diff --git a/AGENTS.md b/AGENTS.md
index bd352dbec..6d9db2fb9 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,10 +1,11 @@
 # j3w1/theme agent instructions
 
 This repository **defines** the j3w1 theme: one versioned specification with
-exact tokens, component rules, a generated single-page visual reference at
-`https://j3w1.github.io/theme/`, and machine exports for agents. If you are
-applying the theme somewhere else, read `agents/consume.md` instead of this
-file.
+exact tokens, component rules, machine exports for agents, and a portal at
+`https://j3w1.github.io/theme/` with a compact `/reference/` hub, component
+detail on `/components/<id>/`, and `/reference/contrast/` and
+`/reference/decisions/`. If you are applying the theme somewhere else, read
+`agents/consume.md` instead of this file.
 
 ## Required reading, in order
 
@@ -23,57 +24,46 @@ Images never override tokens.
 
 ## Source of truth
 
-Literal values live in `tokens/`. Meaning and permitted uses live in `spec/`.
-Native keys live in port mappings. Test facts live in evidence records.
+Literal values live in `tokens/`, meaning and permitted uses in `spec/`, native
+keys in port mappings, test facts in evidence records (D-000). A contradiction
+between spec and tokens is a defect to resolve, not a choice to make.
 
-These files are generated: `exports/`, `schemas/json/`,
-`site/src/styles/tokens.generated.css`, the port files under `ports/*/dist/`,
-`ports/orca/install/specimen.json`, `packages/ui/README.md` (a copy of
-`docs/ui-consumption.md`), and the marker blocks in `README.md` and the port
-guides. Edit their sources and run `npm run generate`; never edit them by
-hand. A contradiction between spec and tokens is a defect to resolve, not a
-choice to make.
+Generated, never edited by hand: `exports/`, `schemas/json/`,
+`site/src/styles/tokens.generated.css`, `packages/ui/dist/`,
+`packages/ui/README.md` (a copy of `docs/ui-consumption.md`), the port files
+under `ports/*/dist/`, `ports/orca/install/specimen.json`, and the marker
+blocks in `README.md`, `agents/consume.md` and the port guides. Edit their
+sources and run `npm run generate`.
 
 ## The check loop
 
-CI picks the checks a change needs (D-031). You can see its choice before you
+CI picks the checks a change needs (D-031); `release-gate` is the only required
+check and passes when every selected check passed. See the plan before you
 push:
 
 ```
 node scripts/ci/select.mjs --event pull_request --base origin/main --head HEAD
 ```
 
-`release-gate` is the only required check: it passes when every selected check
-passed.
+Run what it selects, usually `npm run generate` (after any source change; `npm
+run check` only reports drift), `npm run validate`, `npm run check`, `npm
+test`, `npm run build && npm run test:dist`, and `npm run test:smoke`. Build
+like CI with `GITHUB_SHA` set to the full commit; a pinned build refuses
+uncommitted generated files, so commit first. Browser runs use port 4173; set
+`PW_PORT` to a free port when another checkout is testing.
 
-**Before you push.** Run what the plan selects. The usual set:
+`npm run test:all` is the whole suite, with the browser part in parallel. Run
+it when you changed rendering, tokens, components or the package, and say so
+in the pull request. On `main`, CI runs the whole matrix for every site change
+before it deploys; the workflow dispatch runs it on any branch.
 
-```
-npm run generate      # rewrite every generated file (run it after any source change)
-npm run validate      # sources: manifest, decisions, tokens, docs, spec, contrast, ports, references, private material
-npm run check         # generated files are current, no orphans
-npm test              # node --test over sources and exports
-npm run build && npm run test:dist   # the site under /theme/
-npm run test:smoke    # the built site loads, renders from the tokens, takes a keyboard
-```
-
-`npm run check` only reports drift; `npm run generate` fixes it.
-
-**The whole suite.** `npm run test:all` runs everything; the browser part runs
-in parallel. Run it when you changed rendering, tokens, components or the package,
-and say in the pull request that you did. On `main`, CI runs the whole matrix
-for every change to the site before it deploys. From the Actions tab, the
-workflow dispatch runs it on any branch.
+Only the whole suite writes execution evidence. A subset (`test:smoke`, the
+specs a pull request selects, one spec, shard or project) writes none and
+never claims coverage. Report checks that were not run separately from checks
+that passed.
 
-**Evidence.** Only the whole suite writes execution evidence. A subset, such as
-`test:smoke`, the specs a pull request selects, or a local run of one spec,
-shard or project, writes none and never claims coverage.
-
-Report checks that were not run separately from checks that passed.
-
-**Design mode is a working tool, not a gate.** `npm run design` compares the
-site at an anchored commit with the live dev server (`docs/design-mode.md`).
-Nothing it shows is evidence, and it approves nothing.
+Design mode (`npm run design`, `docs/design-mode.md`) is a working tool, not a
+gate: nothing it shows is evidence, and it approves nothing.
 
 ## What you may do without a decision
 
@@ -115,34 +105,27 @@ exists) and the install commands generated from it into the port guides.
 Commits are conventional (`feat:`, `fix:`, `docs:`, `spec:`, `tokens:`,
 `site:`, `chore:`) and explain why.
 
-## Specification UI maintenance
-
-Every CSS hex literal a person can see on the j3w1 UI Theme Spec must get its
-generated inline color swatch (D-014).
+## Hex swatches (D-014)
 
-- New sections and components get swatches from the whole-page build
-  transform. Never add or maintain swatches by hand.
-- Explicit runtime renderers, such as the token inspector, use the same
-  literal parser and presentation helpers. Never scan the runtime DOM for
-  colors.
-- Keep source text, copied text and machine exports unchanged.
-- Run the three hex gates: source (`tests/hex-literals.test.js`), dist
-  (`tests/dist/hex-swatches.test.js`) and browser
-  (`tests/browser/hex-swatches.spec.js`).
+Every visible CSS hex literal on the site gets its generated inline swatch from
+the whole-page build transform; never add or maintain one by hand. Runtime
+renderers, such as the token inspector, use the same literal parser and
+presentation helpers and never scan the DOM for colours. Source text, copied
+text and machine exports stay unchanged. The three gates are
+`tests/hex-literals.test.js`, `tests/dist/hex-swatches.test.js` and
+`tests/browser/hex-swatches.spec.js`.
 
 ## Execution evidence
 
-- `tested` stays the compatibility alias for `testImplemented`. It is never a
-  pass.
-- Every browser test needs an explicit `verification` annotation that names its
-  component, category, states, variants and limits.
-- Use the shared evidence fixture for the real environment metadata.
-- A test in the matrix proves rendering coverage only.
+- `tested` stays the compatibility alias for `testImplemented`; it is never a
+  pass. A test in the matrix proves rendering coverage only.
+- Every browser test needs an explicit `verification` annotation naming its
+  component, category, states, variants and limits, and uses the shared
+  evidence fixture for the real environment metadata.
 - After the browser suite, run `npm run verification:report`, then
   `npm run verification:check`, then `npm run test:verification`.
-- Keep the exact specimen bytes.
-- Run records go in the ignored `test-results/` and the published
-  `dist/verification/`, never in the deterministic committed exports.
+- Keep the exact specimen bytes. Run records go in the ignored `test-results/`
+  and the published `dist/verification/`, never in the committed exports.
 - Do not claim a manual keyboard or screen-reader pass without a recorded
   protocol and environment.
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d85ceaa26..255630f2a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,38 @@
 
 ## [Unreleased]
 
+- **Display and title type sizes** (D-037): `font.size.display` 32/40 and
+  `font.size.title` 24/32 with their line heights, for page heroes, metric
+  figures and page titles.
+- **Compact is the default density** (D-038). `:root` and bare recipe
+  wrappers carry the compact density values; `data-density="comfortable"`
+  opts in. A consumer that relied on the old comfortable default sets it.
+- **Components follow the spec.** Ordinary controls and rows draw their
+  focus ring at `focus.offset` (−2px), as foundations rule 2 says (D-006,
+  proposed); containers and invalid fields keep their own offsets. A
+  selected item takes the ordinary 1px dashed ring on the selection fill,
+  and links hover on `interaction.hover.bg` (D-027). Composite actions reuse
+  the button tone slots; field parts share one partial.
+- **Site.** One shell built from the documented components, one primary
+  action per view, and calls to action as standalone links. `/reference/`
+  is a static hub (about 0.5 MB, from 4.6 MB); state matrices, token tables
+  and computed contrast pairs live on `/components/<id>/`, and the contrast
+  report, decision log and fixtures on their own `/reference/` pages. Every
+  published anchor still resolves. The per-row copy buttons of the reference
+  token tables are gone: each token's page, `/tokens/<path>/`, copies its
+  path and CSS variable, and the surface and text grids still copy values.
+- **Documentation.** The decision log is grouped by topic. Entries keep the
+  choice, reason and status, and most rule detail moved to the spec section
+  it governs. README, guides and component specs drop most repeated text.
+- **Fixed.** The install guide pins the released package version. Control
+  enhancement no longer restyles component buttons. Contents search and the
+  family filter keep each other's results, and search retries a failed index
+  load. Copy labels cannot stick. The surface and text grids' hex values get
+  their swatches. The token inspector adds no tab stops and 404 ships no
+  inspector data. Generated form workflows have one primary action.
+  Foundation and component spec prose no longer states measured contrast
+  ratios; the computed report carries them, and the decision log keeps its
+  historical measurements.
 - **`color.surface.accent`** (D-035). A new surface for the user's own content,
   such as outgoing chat messages, on the new primitive `color.primitive.red.40`
   (`#3d0c0a`), chosen by the owner from a side-by-side comparison; links keep
diff --git a/README.md b/README.md
index 5f07c84be..d7a115c8b 100644
--- a/README.md
+++ b/README.md
@@ -2,14 +2,16 @@
 
 **True-black canvas. Near-black surfaces. Rose text. Red focus. Square components.**
 
-This repository is the versioned specification of the j3w1 look. People and AI
-agents use it to build the same theme in websites, apps, editors, terminals and
-native theme formats. It publishes:
+`j3w1/theme` **defines** the j3w1 look: exact tokens, semantic roles,
+interaction states, accessibility limits, component specifications and
+portability rules. People and AI agents use it to build the same theme in
+websites, apps, editors, terminals and native theme formats. It publishes:
 
 - a design-system portal: **https://j3w1.github.io/theme/**;
 - the complete static specification: **https://j3w1.github.io/theme/reference/**;
 - an independently written [Vue demo](https://j3w1.github.io/theme/demo/);
-- machine-readable exports for agents.
+- machine-readable exports for agents, the official `@j3w1/ui` web package and
+  ready-made application themes.
 
 <!-- version:start -->
 Specification version **4.0.0** (release; default: approved, heritage-ansi: heritage, extended: proposed).
@@ -20,12 +22,15 @@ Use the pinned approved default profile. Pending roles in that profile use-and-r
 Approval and consumption eligibility are separate; see the policy above and
 `spec/decisions.md` D-013.
 
-## Application theme downloads
+## Quick start
 
-Theme files for apps, ready to import. Each file link is pinned to this
-version's release tag, and the site serves the same file from its **download**
-link. Each port's README under `ports/` gives scope, limits and rollback.
-Declared status and import evidence are explained under
+Pin a release tag or a full commit, never `main`, and read every file at that
+same revision. Releases are tags.
+
+**Theme an application.** Download a file from the table below. Each link is
+pinned to this version's release tag, and the site serves the same file from
+its **download** link. Each port's README under `ports/` gives scope, limits
+and rollback; declared status and import evidence are under
 [Application ports](#application-ports).
 
 <!-- downloads:start -->
@@ -92,57 +97,29 @@ Declared status and import evidence are explained under
 | Windows 11 native and Windhawk theme | [j3w1-terminal-chrome.json](https://raw.githubusercontent.com/j3w1/theme/v4.0.0/ports/windows/dist/j3w1-terminal-chrome.json) | [download](https://j3w1.github.io/theme/ports/windows/j3w1-terminal-chrome.json) | Use the single pinned ports/windows/install.ps1 lifecycle; chrome changes share its saved rollback. | experimental; import evidence not verified |
 <!-- downloads:end -->
 
-To change how the theme looks, use [design mode](docs/design-mode.md)
-(`npm run design`). It shows the real site, built at an anchored commit, next
-to the live dev server, so you judge a change against what it replaces. It is
-a working tool, not a gate.
-
-History in brief:
-
-- The owner chose **True Black / Rose** after the
-  [local visual-foundation review](docs/phase6-visual-review.md). D-023 records
-  the seven canonical surface changes; D-024 records the strong-red links the
-  owner asked for next. See [the migration notes](docs/true-black-rose-migration.md)
-  and [the delivery record](docs/phase6-delivery.md) for verification status.
-- D-025 records the owner's request for themed controls across the portal and
-  the Vue demo. Since version 1.1.0, single and multiple choices use j3w1
-  surfaces and selection colors, keep their native form data and fallback, and
-  come with a supported enhancement for existing app markup. The shared command
-  palette puts a full-width search field under its label.
-
-Forms and design tools:
-
-- The [validation and recovery composition](https://j3w1.github.io/theme/patterns/validation-recovery/)
-  and the [draft form builder](https://j3w1.github.io/theme/builder/) show local
-  form behavior with canonical fields. Definitions are bounded, content-pinned
-  JSON. Entered values never go into downloads or storage.
-- The optional [Figma Variables bridge](https://j3w1.github.io/theme/figma/)
-  is a reviewed one-way import with dry-run, explicit apply and rollback
-  receipts. Generate its sample with
-  `node scripts/figma-bridge.mjs --ref FULL_COMMIT_OR_RELEASE_TAG`.
-- Limits and evidence: [form patterns](spec/form-patterns.md),
-  [builder contract](spec/components/form-builder.md) and
-  [bridge instructions](spec/figma-bridge.md).
-
-## What this is, and what it is not
-
-`j3w1/theme` **defines** the theme: exact tokens, semantic roles, interaction
-states, accessibility limits, component specifications and portability rules.
-The official `@j3w1/ui` package implements all 67 inventory entries with native
-HTML, typed Custom Elements, per-component imports and complete copy
-distributions. The [consumption instructions](docs/ui-consumption.md) cover the
-package, copy and native mapping routes. `j3w1/j3w1.github.io` stays a separate
-downstream app. No purchased template source or assets are included.
-
-## Where it came from
-
-The palette began on a Manjaro i3 workstation, preserved in
-[`j3w1/1w3j`](https://github.com/j3w1/1w3j), and was named as web roles by
-[`j3w1/j3w1.github.io`](https://github.com/j3w1/j3w1.github.io). The full
-story is in `spec/identity.md`. Both sources are pinned by revision in
-`references/sources.json`. Historical ports (a gedit scheme, an IntelliJ
-scheme, tmux, browser extensions) are listed in `references/catalogue.json`
-as evidence, not downloads.
+**Build a web app.** Use the official `@j3w1/ui` package: all 67 inventory
+entries as native HTML, typed Custom Elements, per-component imports and
+complete copy distributions. [`docs/ui-consumption.md`](docs/ui-consumption.md)
+covers the package, copy and native mapping routes. For the official
+implementations, read `packages/ui/dist/index.json`, then the
+`contracts/<id>.json` and `examples/<id>.json` you need; the installed
+`j3w1-ui kit` command prepares bounded framework, package, copy or mapping
+kits. npm publication is still an owner action; until then the portal offers an
+installable tarball with integrity metadata. No purchased template source or
+assets are included, and `j3w1/j3w1.github.io` stays a separate downstream app.
+
+**Use the tokens.** `exports/tokens.css` exposes every role as a CSS custom
+property and `exports/tokens.resolved.json` holds the resolved values of every
+profile. Consume roles, never primitives.
+
+**Point an agent at it.** Follow [`agents/consume.md`](agents/consume.md):
+
+1. Read `theme.json`.
+2. Read `exports/theme.compact.md`.
+3. Read the `exports/components/<id>.json` files you need.
+4. Record `theme.lock.json` and report deviations.
+
+`exports/llms.txt` is a discovery index for tools that look for one.
 
 ## The identity in seven values
 
@@ -171,242 +148,61 @@ as evidence, not downloads.
 Three bounded hues (amber, green, blue) exist for status, diagnostics and diffs
 (decision D-001), and for opt-in syntax themes through `code.hued.*` (D-030).
 They are forbidden in surfaces, chrome, buttons, links and selections. The
-reference syntax highlighting stays monochrome in the default profile.
-
-## Profiles
-
-| Profile | Status | Purpose |
-| --- | --- | --- |
-| `default` | approved | The everyday composition every implementation targets. |
-| `heritage-ansi` | heritage | The sixteen historical terminal slots and assignments, exact, including the ones that fail the contrast floor. |
-| `extended` | proposed | Semantic hues for syntax, a full sixteen-slot terminal palette that reaches 4.5:1, coloured chart series. |
-
-## Using the theme
-
-**People:** browse the portal's foundations, components, patterns and tools.
-The full static reference keeps every state matrix, stress fixture,
-non-example, contrast report and coverage ledger. Old homepage hashes redirect
-to its sections.
-
-**Agents:** use the deterministic artifacts. Pin a tag or commit, then follow
-[`agents/consume.md`](agents/consume.md):
-
-1. Read `theme.json`.
-2. Read `exports/theme.compact.md`.
-3. Read the `exports/components/<id>.json` files you need.
-4. Record `theme.lock.json` and report deviations.
-
-`exports/llms.txt` is a discovery index for tools that look for one. For the
-official implementations, read `packages/ui/dist/index.json`, then the
-`contracts/<id>.json` and `examples/<id>.json` you need. The installed
-`j3w1-ui kit` command prepares bounded framework, package, copy or mapping
-kits. npm publication is still an owner action; until then the portal offers
-an installable tarball with integrity metadata.
-
-**Contributors:** read [`AGENTS.md`](AGENTS.md). `CLAUDE.md` imports it.
-
-### Tools on the portal
-
-- **Shared specimen markup.** State matrices use
-  `scripts/lib/specimen-markup.mjs` for native state attributes and hidden-cell
-  focus handling. Its parsed ID-reference rewriting is shared with recipe
-  instances through `scripts/lib/markup.mjs`. Recipes reject unresolved local
-  references; matrices keep their documented fixture links. Keep these
-  transformations shared when you add specimen tools.
-- **[Component workbench](https://j3w1.github.io/theme/workbench/).** Live
-  controls for button, text field, checkbox, tabs and dialog, plus table and
-  sidebar navigation previews. Pick a maintained variant and starting state,
-  then check real iframe widths, density, language and RTL. Comparison frames
-  can use different environments. The anatomy inspector keeps declared roles,
-  resolved values and browser measurements apart; it reports mismatches
-  without correcting the specimen. Forced visual states are labelled and do
-  not replace keyboard interaction or form validation.
-- **Contrast comparisons** use the existing unrounded contrast engine. Pick
-  the declared pair, or an explicit text/UI context and an opaque underlay.
-  Eligibility and waivers stay separate from the number.
-- **Motion controls** replay only maintained transitions. Static endpoints and
-  reduced motion take precedence. These diagnostic tools do not certify
-  accessibility.
-- **Share links.** Copy a configuration or preview link to reproduce its
-  starting state. Links name the actual build and source digest; a revision
-  that is not available is reported with a pinned source link. Entered
-  specimen text is left out unless you include it in the shown share payload.
-  Nothing is saved to browser storage.
-- **Issue drafts.** Component and token pages link to a reviewed public issue
-  draft. A draft includes the actual build, profile and public anchor, and
-  never includes entered specimen text. If a draft is longer than the
-  8,000-character portable URL budget, copy it and paste it into GitHub's
-  composer. Opening the composer never submits an issue.
-
-Canonical specimens, normative content and direct reporting links all work
-without JavaScript.
-
-`schemas/playground.mjs` defines the closed configuration choices, and
-`site/workbench.json` binds controls to maintained specimen parts. The build
-checks each binding in every variant. Preview routes and state matrices share
-the parsed renderer: add new bindings and coverage instead of writing another
-specimen implementation.
-
-### Choosing a semantic role
-
-Use the [token usage explorer](https://j3w1.github.io/theme/tokens/), or follow
-a token-name link from the specification.
-
-- Filter by role group, component, part, state, variant, profile, status and
-  surface. All selected usage filters must match the same declaration; an
-  unknown relationship matches nothing.
-- Exact path, CSS-variable and hex searches still work, and equal values keep
-  their separate roles.
-- Filter URLs can be shared. The explorer stores no preferences and sends no
-  searches to a service.
-
-Each token has its own page with every profile value, eligibility, pending
-decisions, alias dependencies, provenance, component and port references, and
-contrast declarations. Profile tables and details work without JavaScript.
-Copy controls copy the role path or the CSS variable. In hosted builds, source
-links use the build's full commit and the parsed source line; local builds show
-checkout-relative locations and claim no published revision.
-
-Agents can also fetch `exports/token-usage.json` at the same pinned revision as
-the other contracts. This schema-version-1 reverse index comes from source
-mappings, not from colour similarity.
-
-- Variant references are included only when a mapped part's prefix equals a
-  declared variant id.
-- Missing port consumers stay unknown.
-- The index is digest-covered and uses `schemas/json/token-usage.schema.json`.
-  After you edit source mappings, regenerate it with `npm run generate`.
-- The usage and port-capability indexes keep complete JSON schemas and data,
-  with one usage or capability record per line to reduce transfer size and
-  diff noise. Consume them as JSON; source locations still refer to maintained
-  source files, not the index's presentation. Other exports retain their format.
-
-### Standalone component recipes
-
-The [recipe source viewer](https://j3w1.github.io/theme/recipes/) packages the
-default button, text-field and dialog straight from the maintained demo and
-CSS sources. Each component section links to its source and standalone HTML.
-
-1. Download `example.html` to run it without Astro, or include `tokens.css`,
-   `foundation.css` and `component.css`, in that order, with `markup.html`.
-2. Pick a unique instance prefix in the viewer for each copy. Labels and ARIA
-   references are rewritten together. `two-instances.html` shows two copies
-   side by side.
-
-Styles stay inside `.j3w1-recipe`. The dialog is an open visual reference:
-modal lifecycle, close actions, focus trapping and focus return are the host's
-job. No behavior module or font binary is bundled.
-
-`site/recipes.json` declares the inputs; `npm run generate` writes and
-drift-checks `exports/recipes/`. Source and output digests name the exact
-bytes. Use these paths at one pinned commit; the hosted viewer shows the
-revision it came from. Recipe markup keeps the specimen's CC BY 4.0 licence and
-attribution; CSS keeps its MIT notices. Each recipe's manifest, README and
-LICENSE list its dependencies, pending decisions and limits.
-
-Browser checks use port 4173 by default. If another checkout is testing, set
-`PW_PORT` to a free port before `npm run test:browser` and
-`npm run test:verification`; both use the same server configuration. For
-example, PowerShell: `$env:PW_PORT = '4174'`; POSIX shells:
-`PW_PORT=4174 npm run test:browser`. Finish the build before you start tests.
-
-### Task-scoped implementation kits
-
-With the [task-kit builder](https://j3w1.github.io/theme/kit/):
-
-1. Select components.
-2. Describe the authorized task and give an integration ID, version and kind.
-3. Download a ZIP, or copy the complete Markdown package.
-
-Inputs stay in the browser; no model service, backend or storage is used.
-Without JavaScript, use the CLI from a checkout at a committed revision:
-
-```sh
-npm run task:kit -- --components text-field,checkbox,button,dialog --task "Implement a settings form" --integration-id settings --integration-version 1 --out ../settings-kit
-```
-
-- The CLI uses the current full commit by default. `--ref` takes a full commit
-  or a release tag, never a branch. Every input is read from that Git revision.
-- The browser embeds its source revision and the expected file digests, and
-  rejects mixed deployment bytes. A pinned build needs committed generated
-  inputs and `GITHUB_SHA` set to that full commit. An ordinary unpinned local
-  build shows the workflow but turns packaging off.
-- Standard mode includes the available standalone recipes; `--mode minimal`
-  leaves out only the optional recipes. Both keep the selected JSON and
-  specification contracts, all shared global rules and foundations, the
-  required token/alias closure, the consumer contract, the lock schema and a
-  bounded prompt. Briefs of unselected components are removed from the derived
-  compact file.
-- `KIT.json` keeps upstream hashes apart from the derived compact/subset
-  hashes. The lock's `resolvedAt` is the source commit's timestamp, so the same
-  inputs give the same output. An empty starting deviation list does not
-  certify a downstream implementation.
-
-Output must be a new local directory under an existing parent that is not
-redirected. Existing destinations, symbolic links, Windows reparse points and
-unsafe file names fail closed. The writer never erases a destination
-recursively; a failed write leaves partial output for inspection. Keep the
-parent directory stable while writing: this is not an OS sandbox against
-concurrent changes. The legacy `consumption:kit` command uses the same writer
-and refuses existing directories. Its default path and its `--strict`
-omission of `tokens.resolved.json` are unchanged; pick a new `--out` for each
-rerun.
-
-The original [single-component protocol](tests/consumption/PROTOCOL.md) and
-the [composed task-kit protocol](tests/consumption/TASK-KITS.md) are separate
-acceptance exercises. A generated kit does not run an agent or prove that the
-consumer's implementation conforms.
-
-## Pinned release comparison
-
-The [release comparison](https://j3w1.github.io/theme/releases/) compares two
-published revisions from `site/releases.json`. The catalogue pins every tag to
-its full commit and tells a release apart from a published commit checkpoint.
-Builds need those Git objects locally (`fetch-depth: 0` in CI). Building and
-viewing the comparison never fetch a moving branch.
-
-```sh
-npm run release:compare -- --from v0.1.0 --to b601998b3711dcd62949d497ed828af2089f9544 --out ../release-comparison
-```
-
-- Both arguments take only release tags or full commits. `--profile` picks one
-  common historical profile.
-- The output is a new directory under an existing parent that is not
-  redirected, written by the same guarded writer as task kits. It holds
-  JSON/Markdown migration reports and reconstructed before/after specimens.
-- It never builds historical code, upgrades consumers or certifies a port.
-- An optional `--migrations` JSON file follows the generated
-  `release-migration` schema and names both commits plus explicit role renames.
-  Equal values alone never imply a rename.
-
-How the report reads history:
-
-- Each historical export is checked against its own digest ledger. Missing or
-  unsupported historical contracts stay unsupported.
-- Missing usage indexes are disclosed; direct component/port mappings, where
-  present, still give bounded dependency evidence. Missing historical
-  eligibility fields stay unknown.
-- Reports separate value, alias, status/decision, component/state,
-  portability and appearance-source changes. "Known affected" means a declared
-  dependency or contract changed, not an observed regression in an app.
-  Unregistered consumers stay unknown, and an empty port catalogue stays empty.
-
-The visual reference reuses the parsed specimen renderer with historical
-markup/CSS for the workbench's seven components and their variants and states.
-Both sides use 640 × 480 frames, comfortable density, LTR and static motion
-endpoints. No historical JavaScript and no remote font or asset requests are
-allowed. Fixture changes are disclosed; fonts depend on the shared browser and
-machine. The frames are reconstructed references, not historical runtime
-evidence. Browser tests capture matching specimens and attach their real
-environment, while the report itself says truthfully that visual execution is
-not run. Other engines, physical devices, manual accessibility and unlisted
-component captures stay unverified. Report and specimen outputs live in
-`dist/releases/`, outside the committed canonical exports, and are covered by
-the ordinary built-artifact evidence.
-
-To add a published revision, add a reviewed catalogue pin and pass the usual
-generate/check/build/dist/browser/evidence gates. Adding a comparison changes
-no palette and approves nothing. D-016 records the report schema boundary.
+reference syntax highlighting stays monochrome in the default profile. Where
+the palette came from, and the three profiles (`default`, `heritage-ansi`,
+`extended`), are in [`spec/identity.md`](spec/identity.md).
+
+## Read further
+
+- **Specification:** [identity](spec/identity.md),
+  [foundations](spec/foundations.md), [accessibility](spec/accessibility.md),
+  [portability](spec/portability.md), the [decision log](spec/decisions.md),
+  [form patterns](spec/form-patterns.md), the
+  [Figma bridge](spec/figma-bridge.md) and one file per component under
+  `spec/components/`.
+- **Portal tools:** the
+  [component workbench](https://j3w1.github.io/theme/workbench/), the
+  [token usage explorer](https://j3w1.github.io/theme/tokens/),
+  [standalone recipes](https://j3w1.github.io/theme/recipes/), the
+  [task-kit builder](https://j3w1.github.io/theme/kit/), the
+  [release comparison](https://j3w1.github.io/theme/releases/), the
+  [port capability explorer](https://j3w1.github.io/theme/ports/), the
+  [validation and recovery pattern](https://j3w1.github.io/theme/patterns/validation-recovery/),
+  the [form builder](https://j3w1.github.io/theme/builder/) and the
+  [Figma Variables bridge](https://j3w1.github.io/theme/figma/). Each page
+  states its own limits; canonical specimens, normative content and reporting
+  links work without JavaScript.
+- **Implementation:** [`docs/ui-consumption.md`](docs/ui-consumption.md) and
+  [`docs/ui-architecture.md`](docs/ui-architecture.md).
+- **Ports:** [`ports/README.md`](ports/README.md) says which guide you need.
+- **History:** [`CHANGELOG.md`](CHANGELOG.md), the decision log and the
+  migration notes for [True Black / Rose](docs/true-black-rose-migration.md)
+  and [rose typography](docs/rose-typography-migration.md).
+- **Contributing:** [`AGENTS.md`](AGENTS.md); `CLAUDE.md` imports it. To change
+  how the theme looks, use [design mode](docs/design-mode.md)
+  (`npm run design`), a working tool, not a gate.
+
+## Local commands
+
+Run these from a checkout with full Git history (CI uses `fetch-depth: 0`);
+each tool page above states its limits.
+
+- `npm run task:kit -- --components <ids> --task "<task>" --integration-id <id> --integration-version <n> --out <new-dir>`
+  writes a task kit; `--ref` takes a full commit or release tag, `--mode minimal`
+  omits only the optional recipes. `--out` must be a new directory under an
+  existing, unredirected parent; keep that parent stable while writing (the
+  writer is not an OS sandbox against concurrent changes). The legacy
+  `consumption:kit` refuses an existing directory, so pick a new `--out` for
+  each rerun.
+- `npm run release:compare -- --from <tag|commit> --to <tag|commit> --out <new-dir>`
+  compares two pinned revisions; `--profile` picks one common profile and
+  `--migrations <file>` names explicit role renames. Comparable revisions are
+  the reviewed pins in `site/releases.json`.
+- `npm run parity:private -- --config <file outside the repository>` runs the
+  private parity harness ([protocol](templates/private-parity/README.md)); with
+  no target it prints a not-run record.
+- Browser tests use port 4173; set `PW_PORT` to a free port (for example
+  `PW_PORT=4174 npm run test:browser`) when another checkout is testing.
 
 ## Repository map
 
@@ -419,6 +215,7 @@ no palette and approves nothing. D-016 records the report schema boundary.
 | `schemas/` | zod schema factories shared by the scripts and the site; `schemas/json/` is generated |
 | `scripts/` | Validators and generators (`npm run validate`, `npm run generate`, `npm run check`); `scripts/lib/` is hashed into the package identities, `scripts/tooling/` holds local-tooling helpers that are not |
 | `exports/` | Generated, committed: resolved tokens, semantic usage index, CSS custom properties, contrast report, coverage ledger, per-component JSON and briefs, compact and full Markdown, `llms.txt`, digests |
+| `packages/ui/` | The `@j3w1/ui` package; `packages/ui/dist/` is generated |
 | `site/` | The Astro source of the design-system portal, complete reference and token tools, built to `dist/` and deployed to `/theme/` by CI |
 | `references/` | Pinned provenance, catalogued historical implementations, excerpts, and any reference screenshots with their provenance |
 | `ports/` | One folder per app, each with a manifest, mapping, generated theme file and evidence; Orca, Claude Code and Codex also hold their installer and one guide (`ports/README.md` says which one you need) |
@@ -427,40 +224,12 @@ no palette and approves nothing. D-016 records the report schema boundary.
 
 ## Application ports
 
-The [capability explorer](https://j3w1.github.io/theme/ports/) builds its
-summary, role-to-native-key rows, artifact links and evidence state from the
-same committed port inputs. `exports/port-capabilities.json` is digest-covered
-and included in task kits. It keeps mapped, inherited, unsupported,
-out-of-scope and not-implemented roles apart from import verification. Legacy
-unmapped roles keep their reason, with no guessed classification. An empty
-catalogue publishes no app support.
-
-`ports/README.md` describes the optional capability metadata and the exact
-evidence fingerprint. A stale artifact token digest hides its claimed resolved
-values. Changing targets, mappings, capabilities or artifact bytes makes
-import evidence stale. Static tables and JSON work without JavaScript.
-
-### Private framework parity
-
-With no licensed target supplied, `npm run parity:private` prints a useful
-**not run** prerequisite record. Public validation, builds and browser tests
-never need a private target. To run the bounded seven-component experiment:
-
-1. Follow [the private harness protocol](templates/private-parity/README.md).
-2. Pass an operator-owned JSON file from outside this repository:
-
-   ```sh
-   npm run parity:private -- --config /private/location/parity.json
-   ```
-
-The protocol checks the installed versions against the target package and
-lock. It copies only the selected script/style inputs into a new private
-directory. It captures native references and real framework controls with the
-recorded environment, input hashes, property differences and screenshots. It
-never starts the target app's backend or runs its package scripts. Finished
-diagnostics may report differences; they do not certify an app port. Private
-sources, configuration and results stay out of Git and the public site, also
-when verification fails.
+The [capability explorer](https://j3w1.github.io/theme/ports/) and
+`exports/port-capabilities.json` keep mapped, inherited, unsupported,
+out-of-scope and not-implemented roles apart from import verification (D-018).
+Changing targets, mappings, capabilities or artifact bytes makes import
+evidence stale. `ports/README.md` describes the capability metadata and the
+evidence fingerprint.
 
 <!-- ports:start -->
 | Port | Format | Declared status | Import evidence | Theme | Tested on | Supported / inherited / unsupported |
@@ -481,21 +250,14 @@ when verification fails.
 *Specified* means the component's specification validates. *Demonstrated*
 means its demo renders every declared variant on the site. *Test implemented*
 means a browser test exists for it. Real outcomes are published separately in
-the linked verification report, with exact scope, configuration and digests.
-The ledger is generated from the sources.
-
-The shared browser evidence fixture records the real browser/OS, the final
-viewport, and the page root's declared profile and density when the test ends.
-A missing declaration is recorded as `not-declared`; a page context that is
-not available is reported explicitly. These fields do not infer a mode for
-every nested specimen. Protocols that exercise several local modes describe
-them in their verification annotation instead of labelling every run as
-comfortable.
+the linked verification report, with exact scope, configuration and digests
+(`spec/accessibility.md`, Verification evidence). The ledger is generated from
+the sources.
 
 <!-- coverage:start -->
 | Component | Family | Priority | Specified | Demonstrated | Test implemented |
 | --- | --- | --- | --- | --- | --- |
-| `admin-form` | composed | R1 | yes | yes | — |
+| `admin-form` | composed | R1 | yes | yes | yes |
 | `alert` | feedback | R1 | yes | yes | — |
 | `avatar` | display | R2 | yes | yes | — |
 | `badge` | display | R1 | yes | yes | — |
@@ -506,7 +268,7 @@ comfortable.
 | `chart` | display | R2 | yes | yes | — |
 | `checkbox` | forms-basic | R1 | yes | yes | yes |
 | `chip` | display | R1 | yes | yes | — |
-| `code-editor` | developer | R1 | yes | yes | — |
+| `code-editor` | developer | R1 | yes | yes | yes |
 | `combobox` | forms-advanced | R1 | yes | yes | — |
 | `command-palette` | navigation | R2 | yes | yes | — |
 | `compact-dashboard` | composed | R2 | yes | yes | — |
@@ -581,6 +343,6 @@ note. Releases are tags; consumers pin them.
 ## Licence
 
 MIT for code, tokens, schemas, scripts and generated JSON/CSS; CC BY 4.0 for
-specification prose and specimens; reference screenshots all rights reserved.
-See [`LICENSE.md`](LICENSE.md). No fonts are distributed; the recommended
-family is named in `theme.json`.
+specification prose and specimens; reference screenshots all rights reserved
+(D-004). See [`LICENSE.md`](LICENSE.md). No fonts are distributed; the
+recommended family is named in `theme.json`.
diff --git a/agents/consume.md b/agents/consume.md
index 8126df171..2d317fdf9 100644
--- a/agents/consume.md
+++ b/agents/consume.md
@@ -1,12 +1,10 @@
 # Consuming j3w1/theme (for agents and integrators)
 
-This document is for people and agents who apply the theme to another project.
-The contributor workflow for this repository is in `AGENTS.md`.
-
-You are consuming **design data and optional official implementations**. The
-consumer project's own instructions (its `AGENTS.md`, `CLAUDE.md`, security,
-architecture and operational rules) always win over anything in this
-repository.
+For people and agents who apply the theme to another project; contributors
+to this repository read `AGENTS.md`. You are consuming **design data and
+optional official implementations**. The consumer project's own instructions
+(its `AGENTS.md`, `CLAUDE.md`, security, architecture and operational rules)
+always win over anything in this repository.
 
 ## Official web implementations
 
@@ -22,20 +20,19 @@ bundles are also supported.
    ```
 
 Choose `copy` to own the full source, or `mapping` for a host the package does
-not fit. Native hosts need mapping mode. Kits include the canonical contracts,
-their dependency closure and the shared accessibility/identity rules. They do
+not fit; native hosts need mapping mode. Kits include the canonical contracts,
+their dependency closure and the shared accessibility/identity rules; they do
 not declare your app verified. `docs/ui-consumption.md` has the exact
-installation, framework binding and runtime checks. npm publication is an
-owner release action; until then, use the release tarball and its published
-integrity metadata. For canonical mappings, keep the lock and deviation
-workflow below.
+installation, framework binding and runtime checks. Until npm publication (an
+owner release action), use the release tarball and its published integrity
+metadata. Canonical mappings keep the lock and deviation workflow below.
 
 ## 0. Pin a revision first
 
-`<rev>` is a release tag (`v0.1.0`) or a full 40-character commit SHA. Never
-`main`, never a branch name, never "latest". Resolve a tag to its commit before
-you read anything, and use the same `<rev>` in every URL below. Mixing
-revisions breaks the contract.
+`<rev>` is a release tag (`v0.1.0`) or a full 40-character commit SHA, never
+`main`, a branch name or "latest". Resolve a tag to its commit before you read
+anything, and use the same `<rev>` in every URL below; mixing revisions breaks
+the contract.
 
 ```
 GET https://api.github.com/repos/j3w1/theme/git/ref/tags/<tag>   → object.sha
@@ -65,10 +62,10 @@ Use the pinned approved default profile. Pending roles in that profile use-and-r
 <!-- eligibility:end -->
 
 The policy block above is generated. Each resolved token lists its pending
-decision IDs in `eligibility.decisionIds`, including alias dependencies.
-Report those IDs together with any real deviations. Using an authorized
-pending value is a disclosure, not an invented substitution. A blocked action
-implies no replacement. A profile preview does not authorize delivered work.
+decision IDs, alias dependencies included, in `eligibility.decisionIds`; report
+them with any real deviations. Using an authorized pending value is a
+disclosure, not an invented substitution. A blocked action implies no
+replacement, and a profile preview does not authorize delivered work.
 
 ## 4. Read only what you need, in this order
 
@@ -81,18 +78,17 @@ https://raw.githubusercontent.com/j3w1/theme/<rev>/exports/digests.json
 
 Optional: `exports/theme.full.md` for the whole specification;
 `exports/tokens.css` for a ready-made custom-property sheet. The website
-`https://j3w1.github.io/theme/` is for visual confirmation only. It is not a
-source of values, and screenshots never override tokens.
+`https://j3w1.github.io/theme/` is for visual confirmation only, never a source
+of values; screenshots never override tokens.
 
 ## 5. Inspect the target before changing anything
 
 1. Name the integration kind: `css-vars`, `vuetify`, `tailwind`,
    `jetbrains-icls`, `gtk-css`, `terminal-16` or `other`.
-2. List which specified surfaces the target can express natively, and which
-   it cannot (for example, a framework with no read-only field style, or a
-   sixteen-colour terminal that cannot show hover).
-3. Anything the target cannot express becomes a documented deviation in step
-   7, never an invented approximation.
+2. List which specified surfaces the target can and cannot express natively
+   (for example, no read-only field style, or a sixteen-colour terminal that
+   cannot show hover). Each one it cannot express becomes a documented
+   deviation in step 7, never an invented approximation.
 
 ## 6. Implement the mapping
 
@@ -104,8 +100,8 @@ source of values, and screenshots never override tokens.
 - Keep host accessibility at least as strong as before: never remove a focus
   indicator, never lower a contrast ratio the host already met, never set
   `outline: none` without drawing the specified ring.
-- Radii are 0, borders 1px, the family is monospace. A host that forbids one
-  of these gets a deviation, not a redesign.
+- Radii are 0, borders 1px, the family is monospace; a host that forbids one
+  gets a deviation, not a redesign.
 - Selection is a fill; focus is a ring. On fills, the ring takes the colour
   the component JSON declares for that state (D-015). Status roles keep their
   glyphs.
@@ -118,10 +114,10 @@ source of values, and screenshots never override tokens.
 
 ## What you may not do
 
-- Invent, blend, lighten, darken or "harmonise" colours. Use resolved values
+- Invent, blend, lighten, darken or "harmonise" colours; use resolved values
   only.
 - Use a blocked value, deliver a proposed profile, or leave out the required
-  pending-decision disclosures. Historical-only values are not approved UI
+  pending-decision disclosures; historical-only values are not approved UI
   roles.
 - Take values from the site's HTML, from screenshots or from memory.
 - Touch unrelated components, layouts, copy, dependencies or build
@@ -158,7 +154,7 @@ lock: <path to theme.lock.json>
 
 ## theme.lock.json
 
-A small file, committed next to the integration code and validated by
+Committed next to the integration code and validated by
 `schemas/json/theme.lock.schema.json`. It is not a package manager: no graph,
 no install, no auto-update. To update the theme, change `ref`, `revision`,
 `version` and `exports`, rerun the consumer's own checks, and write the
diff --git a/apps/demo/index.html b/apps/demo/index.html
index f4e150cd8..3b4b2c42c 100644
--- a/apps/demo/index.html
+++ b/apps/demo/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en" data-density="comfortable"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="dark"><title>j3w1 workspace · Vue demo</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="dark"><title>j3w1 workspace · Vue demo</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body></html>
diff --git a/apps/demo/src/App.vue b/apps/demo/src/App.vue
index 14fc0adec..f0fc47f51 100644
--- a/apps/demo/src/App.vue
+++ b/apps/demo/src/App.vue
@@ -1,26 +1,79 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import '@j3w1/ui/register/link';
+import '@j3w1/ui/register/sidebar-nav';
+import '@j3w1/ui/register/skip-link';
+import '@j3w1/ui/styles/link.css';
+import '@j3w1/ui/styles/sidebar-nav.css';
+import '@j3w1/ui/styles/skip-link.css';
 import { state, reset } from './store.js';
 import { groups } from './navigation.js';
 import UiSpecimen from './UiSpecimen.vue';
-const route = useRoute(), router = useRouter(), navigationOpen = ref(false);
+const route = useRoute(), router = useRouter(), navigationOpen = ref(false), rail = ref(), toggle = ref();
 const breadcrumb = computed(() => route.path.split('/').filter(Boolean).join(' / '));
+// A section stays current on its own detail and edit pages.
+const current = path => route.path === path || route.path.startsWith(`${path}/`) ? 'page' : undefined;
+// Below 900px the rail is a drawer: opening moves focus into it, closing returns it to the toggle.
+async function showNavigation(open) {
+  navigationOpen.value = open;
+  await nextTick();
+  if (open) (rail.value?.querySelector('[aria-current="page"]') ?? rail.value?.querySelector('.sidebar-nav-link'))?.focus();
+  else toggle.value?.focus();
+}
+function follow(event, navigate) { navigationOpen.value = false; navigate(event); }
+// The hash router owns the URL fragment, so the skip link moves focus itself.
+function skip() { document.querySelector('main h1')?.focus(); }
 function palette(root) { root.setAttribute('shortcut', ''); const list = root.querySelector('[role="listbox"]'); list.replaceChildren(); for (const group of groups) for (const [path, name] of group.links) { const item = document.createElement('li'); item.setAttribute('role','option'); item.dataset.action = path; const category = document.createElement('span'); category.textContent = group.title.split(' ')[0] + ' '; const label = document.createElement('span'); label.className = 'command-label'; label.textContent = name; item.append(category, label); list.append(item); } root.addEventListener('j3w1-command', event => { const target = event.detail.action; if (groups.some(group => group.links.some(([path]) => path === target))) { event.preventDefault(); router.push(target); } }); root.refresh(); }
 </script>
 <template>
-  <a class="skip-link" href="#demo-main">Skip to content</a>
+  <j3w1-skip-link><a class="skip-link" href="#demo-main" @click.prevent="skip">Skip to content</a></j3w1-skip-link>
   <div class="demo-shell">
-    <aside class="demo-sidebar" :class="{ 'is-open': navigationOpen }" aria-label="Application navigation">
-      <a class="wordmark" href="#/">j3w1<span> / workspace</span></a><p class="eyebrow">TRUE BLACK / ROSE</p>
-      <nav><section v-for="group in groups" :key="group.title"><h2 class="nav-caption">{{ group.title }}</h2><RouterLink v-for="[path, label] in group.links" :key="path" :to="path" @click="navigationOpen=false">{{ label }}</RouterLink></section></nav>
-      <a href="../" class="back-spec">← UI Theme Spec</a>
+    <aside id="demo-navigation" ref="rail" class="demo-sidebar" :class="{ 'is-open': navigationOpen }" aria-label="Application navigation" @keydown.esc="navigationOpen && showNavigation(false)">
+      <div class="demo-sidebar-head">
+        <a class="wordmark" href="#/">j3w1<span> / workspace</span></a>
+        <j3w1-button class="demo-nav-close">
+          <button class="button button-tertiary" type="button" aria-label="Close navigation" @click="showNavigation(false)">Close</button>
+        </j3w1-button>
+      </div>
+      <p class="eyebrow">TRUE BLACK / ROSE</p>
+      <j3w1-sidebar-nav>
+        <nav class="sidebar-nav" aria-label="Workspace">
+          <template v-for="group in groups" :key="group.title">
+            <h2 class="nav-caption">{{ group.title }}</h2>
+            <ul class="sidebar-nav-list">
+              <RouterLink v-for="[path, label] in group.links" :key="path" :to="path" custom v-slot="{ href, navigate }">
+                <li class="sidebar-nav-item">
+                  <a class="sidebar-nav-link" :href="href" :aria-current="current(path)" @click="follow($event, navigate)">
+                    <span class="sidebar-nav-label">{{ label }}</span>
+                  </a>
+                </li>
+              </RouterLink>
+            </ul>
+          </template>
+        </nav>
+      </j3w1-sidebar-nav>
+      <j3w1-link class="back-spec"><a class="link link-standalone" href="../">← UI Theme Spec</a></j3w1-link>
     </aside>
-    <div class="demo-workspace"><header class="demo-topline"><button class="mobile-nav" type="button" :aria-expanded="navigationOpen" @click="navigationOpen=!navigationOpen">☰ Navigation</button><span>Workspace / {{ breadcrumb }}</span><span class="identity">JL</span></header>
-      <div class="demo-context"><span>Vue 3 · independently authored · synthetic local data</span><button type="button" @click="reset">Reset demo ↻</button></div>
-      <main id="demo-main"><RouterView :key="state.epoch" /></main><p class="demo-notice" role="status">{{ state.notice }}</p>
-      <footer class="demo-footer">Local demonstration. Changes live in memory and reset on reload. No messages, payments or credentials are sent.<br /><a href="../implement/">Build this in your app →</a></footer>
+    <div class="demo-workspace">
+      <header class="demo-topline">
+        <j3w1-button class="mobile-nav">
+          <button ref="toggle" class="button button-tertiary" type="button" aria-controls="demo-navigation" :aria-expanded="navigationOpen" @click="showNavigation(!navigationOpen)">☰ Navigation</button>
+        </j3w1-button>
+        <span class="demo-path">Workspace / {{ breadcrumb }}</span>
+        <div class="demo-command"><UiSpecimen id="command-palette" @ready="palette" /></div>
+        <span class="identity">JL</span>
+      </header>
+      <section class="demo-context" aria-label="Demo data">
+        <span>Vue 3 · independently authored · synthetic local data</span>
+        <j3w1-button><button class="button button-secondary" type="button" @click="reset">Reset demo ↻</button></j3w1-button>
+      </section>
+      <main id="demo-main"><RouterView :key="state.epoch" /></main>
+      <p class="demo-notice" role="status">{{ state.notice }}</p>
+      <footer class="demo-footer">
+        <p>Local demonstration. Changes live in memory and reset on reload. No messages, payments or credentials are sent.</p>
+        <j3w1-link><a class="link link-standalone" href="../implement/">Build this in your app →</a></j3w1-link>
+      </footer>
     </div>
   </div>
-  <div class="demo-command"><UiSpecimen id="command-palette" @ready="palette" /></div>
 </template>
diff --git a/apps/demo/src/style.css b/apps/demo/src/style.css
index e1bbd76bd..622041bd1 100644
--- a/apps/demo/src/style.css
+++ b/apps/demo/src/style.css
@@ -1,110 +1,655 @@
-* { box-sizing: border-box; }
-html { color-scheme: dark; font: var(--font-size-ui-md)/1.6 var(--font-family-mono); color: var(--color-text-default); background: var(--color-surface-canvas); }
-body { margin: 0; min-width: 320px; }
-button, input, select, textarea { font: inherit; color: inherit; }
-button, select { cursor: pointer; }
-button, input, select, textarea { border: 1px solid var(--color-border-control); background: var(--color-surface-input); border-radius: var(--radius-none); padding: 8px 12px; max-width: 100%; }
-button:hover { background: var(--color-interaction-hover-bg); }
-button:disabled { cursor: default; color: var(--color-text-muted); }
-:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
-a { color: var(--color-text-link); text-decoration: underline; text-decoration-color: var(--color-text-link-underline); text-decoration-thickness: var(--border-width-default); text-underline-offset: var(--space-2); }
-a:hover { color: var(--color-text-link-hover); background: var(--color-interaction-hover-bg-strong); text-decoration-color: currentColor; text-decoration-thickness: var(--border-width-emphasis); }
-h1,h2,h3 { color: var(--color-text-heading); line-height: 1.3; margin: 0; }
-h1 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.04em; }
-h2 { font-size: 18px; }
-h3 { font-size: 15px; }
-p { margin-block: 10px; }
-.eyebrow,.nav-caption { color: var(--color-text-muted); font-size: 10px; letter-spacing: .12em; }
-.demo-workspace { min-width: 0; }
-.demo-shell { display: grid; grid-template-columns: 216px minmax(0,1fr); min-height: 100vh; }
-.demo-sidebar { background: var(--color-surface-chrome); padding: 28px 18px; border-inline-end: 1px solid var(--color-border-default); }
-.wordmark { text-decoration: none; font-size: 23px; font-weight: bold; color: var(--color-text-bright); }
-.wordmark span { font-size: 11px; color: var(--color-text-muted); }
-.demo-sidebar nav section { margin-top: 26px; }
-.nav-caption { margin: 0 8px 8px; }
-.demo-sidebar nav a { display: block; text-decoration: none; padding: 7px 10px; text-transform: capitalize; border-inline-start: 2px solid transparent; }
-.demo-sidebar nav a.router-link-active { color: var(--color-interaction-selection-text); background: var(--color-interaction-selection-bg); border-color: var(--color-interaction-focus-ring); }
-.back-spec { display: block; margin-top: 32px; }
-.demo-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 32px; border-bottom: 1px solid var(--color-border-default); }
-.identity { display: grid; place-items: center; width: 32px; height: 32px; background: var(--color-surface-default); border: 1px solid var(--color-border-control); }
-.demo-context { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 32px; color: var(--color-text-muted); font-size: 11px; }
-main { padding: 24px 32px; max-width: 1600px; margin-inline: auto; }
-.view-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
-.view-heading p { color: var(--color-text-muted); }
-.panel { background: var(--color-surface-default); border: 1px solid var(--color-border-default); padding: 24px; min-width: 0; }
-.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
-.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-block: 24px; }
-.metric { font-size: 30px; line-height: 1.4; color: var(--color-text-bright); display: block; margin-block: 12px; }
-.metric-label { color: var(--color-text-muted); }
-.dashboard-middle { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(260px,1fr); gap: 20px; margin-block: 20px; }
-.chart-bars { height: 190px; display: flex; align-items: end; gap: 12px; padding-top: 20px; }
-.chart-bar { flex: 1; background: var(--color-chart-series-2); min-width: 2px; }
-.chart-caption { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: 10px; margin-top: 20px; }
-.actions,.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
-.filters { margin-block: 20px; }
-label { display: grid; gap: 6px; }
-.filters label:first-child { flex: 1; min-width: 160px; }
-.table-scroll { overflow: auto; }
-.records-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
-.records-table thead th { color: var(--color-text-bright); font-weight: var(--font-weight-bold); font-size: 11px; text-align: start; }
-.records-table td,.records-table th { border-bottom: 1px solid var(--color-border-default); padding: 14px 12px; }
-.records-table td:first-child { padding-inline-start: 0; }
-.status { color: var(--color-status-info-text); }
-.status.ready { color: var(--color-status-success-text); }
-.status.review { color: var(--color-status-warning-text); }
-.muted { color: var(--color-text-muted); }
-.success { color: var(--color-status-success-text); }
-.block { display: block; }
-.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
-.form-grid .wide { grid-column: 1/-1; }
-.form-grid input,.form-grid select,.form-grid textarea { width: 100%; }
-.form-grid fieldset { margin: 0; border: 1px solid var(--color-border-default); }
-.form-grid .actions { margin-top: 8px; }
-.split { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0,2fr); gap: 20px; }
-.stack { display: grid; gap: 16px; }
-.list-button { display: block; width: 100%; text-align: start; padding: 16px; background: var(--color-surface-default); border: 1px solid var(--color-border-default); }
-.list-button[aria-pressed="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-.message { max-width: 85%; padding: 14px; background: var(--color-surface-input); border: 1px solid var(--color-border-default); }
-.message.self { margin-inline-start: auto; background: var(--color-surface-raised); }
-.kanban { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
-.kanban article { padding: 16px; margin-top: 16px; background: var(--color-surface-input); border: 1px solid var(--color-border-default); }
-.calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 1px; border: 1px solid var(--color-border-default); background: var(--color-border-default); }
-.calendar-day { background: var(--color-surface-default); min-height: 105px; padding: 10px; }
-.calendar-day button { width: 100%; text-align: start; padding: 4px; margin-top: 8px; font-size: 11px; overflow-wrap: anywhere; }
-.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 16px; }
-.gallery-link { text-decoration: none; }
-.demo-specimen { min-width: 0; overflow: auto; }
-.demo-notice { margin: 0 32px; padding: 12px 0; min-height: 48px; color: var(--color-status-success-text); }
-.demo-footer { padding: 24px 32px 100px; color: var(--color-text-muted); font-size: 11px; line-height: 1.9; }
-.demo-command [data-open] { position: fixed; bottom: 20px; right: 24px; z-index: 20; }
-.demo-command .command-palette-dialog:modal { width: min(540px,calc(100vw - 32px)); max-height: 70vh; }
-.demo-command [role="option"] { display: grid; grid-template-columns: 100px 1fr; gap: 12px; }
-.demo-command [role="option"] .command-label { color: inherit; }
-.mobile-nav { display: none; }
-.skip-link { position: fixed; top: -100px; z-index: 100; padding: 12px; background: var(--color-surface-raised); }
-.skip-link:focus { top: 8px; }
-[hidden] { display: none !important; }
-.empty { padding: 48px 24px; text-align: center; }
-.price { font-size: 36px; color: var(--color-text-bright); }
-.error-message { color: var(--color-status-danger-text); }
-pre { overflow: auto; }
-@media(max-width:1100px) { .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .dashboard-middle { grid-template-columns: 1fr; } }
-@media(max-width:780px) { .demo-shell { grid-template-columns: minmax(0,1fr); } .demo-sidebar { display: none; } .demo-sidebar.is-open { display: block; } .mobile-nav { display: block; } main { padding: 20px 16px; } .demo-topline,.demo-context { padding-inline: 16px; } .demo-context { align-items: start; } .form-grid,.split,.kanban { grid-template-columns: 1fr; } .view-heading { flex-wrap: wrap; } .calendar { grid-template-columns: 1fr; } .calendar-day { min-height: 65px; } .panel { padding: 18px; } .metrics { gap: 10px; } .metric { font-size: 24px; } }
-@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; } }
-
-.records-table tbody { color:var(--color-text-default); }
-.records-table tbody th { color:inherit; font-weight:var(--font-weight-regular); }
-
-/* Application hierarchy: page title, section, subheading and supporting copy. */
-.view-heading h1 { color: var(--color-text-heading); font-weight: var(--font-weight-bold); }
-.view-heading > div > p:last-child { color: var(--color-text-muted); font-size: var(--font-size-ui-lg); line-height: 1.8; margin-top: var(--space-12); }
-main h2 { color: var(--color-text-heading); font-weight: var(--font-weight-bold); }
-main h3 { color: var(--color-text-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-ui-lg); }
-.demo-sidebar nav section { margin-top: var(--space-32); }
-.demo-sidebar .nav-caption { color: var(--color-text-bright); font-size: var(--font-size-ui-sm); font-weight: var(--font-weight-bold); letter-spacing: .12em; margin: 0 var(--space-8) var(--space-12); padding-bottom: var(--space-8); border-bottom: var(--border-width-default) solid var(--color-border-default); }
-.demo-sidebar nav a { font-weight: var(--font-weight-regular); padding-inline-start: var(--space-12); }
-.demo-sidebar nav a.router-link-active:focus-visible { outline: var(--focus-ring-container); outline-offset: var(--focus-offset-container); }
-.gallery-link h2 { color: var(--color-text-link); text-decoration: underline; text-decoration-color: var(--color-text-link-underline); text-underline-offset: var(--space-4); }
-.gallery-link:hover h2 { color: var(--color-text-link-hover); text-decoration-color: currentColor; }
-
-.demo-command > .command-palette { display: contents; }
+/* Vue demo layout. Buttons, links, fields, tables, cards and the rail are
+   canonical component classes inside their packaged elements; their look
+   comes only from the packaged component CSS, bare controls from
+   controls.css. This file gives layout and type from token variables only:
+   no literal colours, and no rule that restyles every button or input. */
+
+:root {
+  --demo-rail: calc(5 * var(--space-48)); /* 240px, sidebar-nav.md "responsive" */
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  color-scheme: dark;
+  background: var(--color-surface-canvas);
+  color: var(--color-text-default);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+}
+
+body {
+  margin: 0;
+  min-width: var(--breakpoint-xs);
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:focus-visible {
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
+}
+
+/* Base elements at zero specificity, so packaged component CSS always wins.
+   Application links are canonical .link elements; this only covers a bare
+   anchor that a component leaves unstyled. */
+:where(a) {
+  color: var(--color-text-link);
+  text-decoration: underline;
+  text-decoration-color: var(--color-text-link-underline);
+  text-decoration-thickness: var(--border-width-default);
+  text-underline-offset: var(--space-4);
+}
+
+@media (hover: hover) {
+  :where(a:hover) {
+    background: var(--color-interaction-hover-bg-strong);
+    color: var(--color-text-link-hover);
+    text-decoration-color: currentColor;
+    text-decoration-thickness: var(--border-width-emphasis);
+  }
+}
+
+:where(h1, h2, h3) {
+  margin: 0;
+  color: var(--color-text-heading);
+  font-weight: var(--font-weight-bold);
+  overflow-wrap: anywhere;
+}
+
+/* D-037: the page title uses the title size; section headings use h1. */
+:where(h1) {
+  font-size: var(--font-size-title);
+  line-height: var(--font-line-height-title);
+}
+
+:where(h2) {
+  font-size: var(--font-size-h1);
+  line-height: var(--font-line-height-h1);
+}
+
+:where(h3) {
+  font-size: var(--font-size-h2);
+  line-height: var(--font-line-height-h2);
+}
+
+:where(p) {
+  margin-block: var(--space-12);
+}
+
+:where(small) {
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+:where(pre, code) {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-code);
+  line-height: var(--font-line-height-code);
+}
+
+pre {
+  overflow: auto;
+}
+
+/* The packaged elements carry the recipe foundation's canvas fill; inside the
+   application they sit on panels, so they take the surface they are on.
+   Specimens keep their foundation. */
+.demo-shell :is(j3w1-button, j3w1-link, j3w1-sidebar-nav, j3w1-table, j3w1-text-field, j3w1-select, j3w1-textarea, j3w1-checkbox, j3w1-card, j3w1-description-list, j3w1-list):not(.demo-specimen *) {
+  background: transparent;
+}
+
+/* ---- shell ------------------------------------------------------------ */
+
+.demo-shell {
+  display: grid;
+  grid-template-columns: var(--demo-rail) minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.demo-workspace {
+  min-width: 0;
+}
+
+/* The aside is the rail: it paints the sidebar-nav surface and edge, so the
+   nav inside spans the rail without a second edge. */
+.demo-sidebar {
+  min-width: 0;
+  padding-block: var(--space-24);
+  background: var(--color-surface-default);
+  border-inline-end: var(--border-width-default) solid var(--color-border-divider);
+}
+
+.demo-sidebar .sidebar-nav {
+  max-width: none;
+  padding: 0;
+  background: transparent;
+  border-inline-end: 0;
+}
+
+.demo-sidebar .sidebar-nav-label {
+  text-transform: capitalize;
+}
+
+.demo-sidebar-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-8);
+  padding-inline: var(--density-control-padding-x);
+}
+
+.wordmark {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-h1);
+  line-height: var(--font-line-height-h1);
+  font-weight: var(--font-weight-bold);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.wordmark span {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+  font-weight: var(--font-weight-regular);
+}
+
+.eyebrow,
+.nav-caption {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-caption);
+  line-height: var(--font-line-height-caption);
+  letter-spacing: .12em;
+}
+
+.eyebrow {
+  margin-block: 0 var(--space-8);
+}
+
+.demo-sidebar > .eyebrow {
+  margin: var(--space-4) var(--density-control-padding-x) 0;
+}
+
+.nav-caption {
+  margin: var(--space-24) var(--density-control-padding-x) var(--space-4);
+  font-weight: var(--font-weight-bold);
+}
+
+.back-spec {
+  margin: var(--space-24) var(--space-8) 0;
+}
+
+.demo-topline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-12);
+  min-height: var(--space-48);
+  padding: var(--space-8) var(--space-32);
+  background: var(--color-surface-chrome);
+  border-bottom: var(--border-width-default) solid var(--color-border-default);
+}
+
+.demo-path {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.identity {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: var(--density-control-height);
+  height: var(--density-control-height);
+  background: var(--color-surface-default);
+  border: var(--border-width-default) solid var(--color-border-default);
+  color: var(--color-text-bright);
+}
+
+/* The command palette's trigger sits in the top bar, never floating. */
+.demo-topline .demo-command {
+  margin-inline-start: auto;
+}
+
+.demo-context {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-8) var(--space-16);
+  padding: var(--space-12) var(--space-32);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+main {
+  width: 100%;
+  max-width: var(--layout-app-max);
+  margin-inline: auto;
+  padding: var(--space-24) var(--space-32);
+}
+
+.demo-notice {
+  min-height: var(--space-48);
+  margin: 0 var(--space-32);
+  padding-block: var(--space-12);
+  color: var(--color-status-success-text);
+}
+
+.demo-footer {
+  padding: var(--space-24) var(--space-32) calc(2 * var(--space-48));
+  border-top: var(--border-width-default) solid var(--color-border-default);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.demo-footer p {
+  margin-block: 0 var(--space-8);
+}
+
+/* The palette's framed root would draw an empty bar: only its trigger and
+   its modal dialog take part in the layout. */
+.demo-command .command-palette {
+  display: contents;
+}
+
+.demo-command .command-palette-dialog:modal {
+  width: min(var(--layout-content-max), calc(100vw - var(--space-32)));
+  max-height: 70vh;
+}
+
+.demo-command [role="option"] {
+  display: grid;
+  grid-template-columns: 13ch minmax(0, 1fr);
+  gap: var(--space-12);
+}
+
+.demo-command [role="option"] .command-label {
+  color: inherit;
+}
+
+.demo-specimen {
+  min-width: 0;
+  overflow: auto;
+}
+
+/* ---- views ------------------------------------------------------------ */
+
+.view-heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--space-16) var(--space-24);
+  margin-bottom: var(--space-24);
+}
+
+.view-heading h1 + p {
+  max-width: 72ch;
+  margin-block: var(--space-12) 0;
+  color: var(--color-text-prose);
+  font-size: var(--font-size-reading);
+  line-height: var(--font-line-height-reading);
+}
+
+.panel {
+  min-width: 0;
+  padding: var(--space-24);
+  background: var(--color-surface-default);
+  border: var(--border-width-default) solid var(--color-border-default);
+}
+
+.panel > h3 {
+  margin-block: var(--space-24) var(--space-8);
+}
+
+.panel-heading,
+.pager {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12) var(--space-16);
+}
+
+.panel-heading {
+  margin-bottom: var(--space-16);
+}
+
+.pager {
+  margin-top: var(--space-16);
+}
+
+.pager p {
+  margin: 0;
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-16);
+  margin-block: var(--space-24);
+}
+
+.metric-label,
+.muted {
+  color: var(--color-text-muted);
+}
+
+.metric,
+.price {
+  display: block;
+  color: var(--color-text-bright);
+  font-size: var(--font-size-display);
+  line-height: var(--font-line-height-display);
+  font-weight: var(--font-weight-bold);
+  overflow-wrap: anywhere;
+}
+
+.metric {
+  margin-block: var(--space-8);
+}
+
+.dashboard-middle {
+  display: grid;
+  grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);
+  gap: var(--space-16);
+  margin-block: var(--space-16);
+}
+
+.actions,
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-12);
+}
+
+.actions {
+  align-items: center;
+}
+
+.filters {
+  align-items: end;
+  margin-block: var(--space-16);
+}
+
+.panel > .filters:first-child {
+  margin-top: 0;
+}
+
+/* A field in a filter row takes its full canonical width, then shrinks. */
+.filters > j3w1-text-field {
+  flex: 0 1 calc(var(--font-size-ui-md) * 28);
+}
+
+.status {
+  color: var(--color-status-info-text);
+}
+
+.status.ready {
+  color: var(--color-status-success-text);
+}
+
+.status.review {
+  color: var(--color-status-warning-text);
+}
+
+.block {
+  display: block;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: end;
+  gap: var(--space-16) var(--space-24);
+}
+
+.form-grid .wide {
+  grid-column: 1 / -1;
+}
+
+.form-grid > p {
+  margin: 0;
+}
+
+.split {
+  display: grid;
+  grid-template-columns: minmax(min(100%, 14rem), .8fr) minmax(0, 2fr);
+  align-items: start;
+  gap: var(--space-16);
+}
+
+.stack {
+  display: grid;
+  align-content: start;
+  gap: var(--space-16);
+}
+
+/* Application tables: the canonical table in a scroll region that keeps its
+   columns readable and scrolls instead of the page. */
+.table-scroll {
+  min-width: 0;
+  overflow: auto;
+}
+
+.table-scroll:focus-visible {
+  outline: var(--focus-ring-container);
+  outline-offset: var(--focus-offset-container);
+}
+
+.table-scroll > .table {
+  width: max-content;
+  min-width: 100%;
+}
+
+.table-scroll .table-body th {
+  text-align: start;
+}
+
+.message {
+  max-width: 85%;
+  padding: var(--space-12);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-default);
+}
+
+.message p {
+  margin-block: var(--space-4) 0;
+}
+
+/* The user's own content set apart from its neighbours (foundations, D-035). */
+.message.self {
+  margin-inline-start: auto;
+  background: var(--color-surface-accent);
+}
+
+.kanban {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  gap: var(--space-16);
+}
+
+.kanban article {
+  display: grid;
+  gap: var(--space-8);
+  margin-top: var(--space-16);
+  padding: var(--space-16);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-default);
+}
+
+/* Each day draws its own end and bottom edge, so a short last week leaves the
+   panel surface, not a block of grid-line colour. */
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  margin-block: var(--space-16);
+  border-block-start: var(--border-width-default) solid var(--color-border-default);
+  border-inline-start: var(--border-width-default) solid var(--color-border-default);
+}
+
+.calendar-day {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+  min-width: 0;
+  min-height: calc(2 * var(--space-48));
+  padding: var(--space-8);
+  border-inline-end: var(--border-width-default) solid var(--color-border-default);
+  border-block-end: var(--border-width-default) solid var(--color-border-default);
+}
+
+.calendar-event {
+  display: grid;
+  justify-items: start;
+  gap: var(--space-4);
+  margin: 0;
+  padding-top: var(--space-4);
+  border-top: var(--border-width-default) solid var(--color-border-divider);
+  overflow-wrap: anywhere;
+}
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+  gap: var(--space-16);
+}
+
+.gallery-grid .card {
+  max-width: none;
+  height: 100%;
+  align-content: start;
+}
+
+.empty {
+  padding: var(--space-48) var(--space-24);
+  text-align: center;
+}
+
+.empty .actions {
+  justify-content: center;
+}
+
+/* ---- responsive (foundations "Layout": 600, 900, 1280) ----------------- */
+
+@media (max-width: 1279.98px) {
+  .metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .dashboard-middle {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .calendar {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
+  }
+}
+
+@media (min-width: 900px) {
+  .mobile-nav,
+  .demo-nav-close {
+    display: none;
+  }
+}
+
+/* Below 900px the rail becomes a drawer opened from the top bar. */
+@media (max-width: 899.98px) {
+  .demo-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .demo-sidebar {
+    display: none;
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    z-index: var(--z-drawer);
+    width: min(var(--demo-rail), calc(100vw - var(--space-48)));
+    overflow-y: auto;
+    background: var(--color-surface-overlay);
+    border-inline-end-color: var(--color-border-overlay);
+  }
+
+  .demo-sidebar.is-open {
+    display: block;
+  }
+
+  .demo-topline,
+  .demo-context {
+    padding-inline: var(--space-16);
+  }
+
+  /* The menu and search share the first line; the path takes the second. */
+  .demo-path {
+    order: 1;
+    flex-basis: 100%;
+  }
+
+  main {
+    padding: var(--space-24) var(--space-16);
+  }
+
+  .demo-notice {
+    margin-inline: var(--space-16);
+  }
+
+  .demo-footer {
+    padding-inline: var(--space-16);
+  }
+}
+
+/* Below 600px tables keep their first column in view while they scroll. */
+@media (max-width: 599.98px) {
+  .form-grid,
+  .split {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .panel {
+    padding: var(--space-16);
+  }
+
+  .metrics {
+    gap: var(--space-8);
+  }
+
+  .metric,
+  .price {
+    font-size: var(--font-size-title);
+    line-height: var(--font-line-height-title);
+  }
+
+  .table-scroll :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+    background: var(--color-surface-default);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+  }
+}
+
+.calendar-notifications {
+  position: fixed;
+  inset-inline-end: var(--space-8);
+  inset-block-end: var(--space-8);
+  max-inline-size: calc(100% - 2 * var(--space-8));
+}
diff --git a/apps/demo/src/views/Dashboard.vue b/apps/demo/src/views/Dashboard.vue
index 4b77ab485..fb5eb572e 100644
--- a/apps/demo/src/views/Dashboard.vue
+++ b/apps/demo/src/views/Dashboard.vue
@@ -3,6 +3,9 @@ import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { state } from '../store.js';
 import UiSpecimen from '../UiSpecimen.vue';
+import '@j3w1/ui/register/table';
+import '@j3w1/ui/styles/link.css';
+import '@j3w1/ui/styles/table.css';
 const route = useRoute(), period = ref('12'), chart = ref();
 const dashboards = {
   analytics: { title: 'A clear view of your work.', eyebrow: 'ANALYTICS', metrics: [['Active projects','24','↑ 4 this month'],['Components used','148','Across 12 applications'],['Review queue','07','3 awaiting feedback'],['Delivery health','96.8%','↑ 2.1% this week']], activity: 'Steady progress.', unit: 'Completed tasks', readiness: 'Small steps. Solid foundations.', items: ['Canonical tokens ready','Component reviews in progress','Keyboard flows under review','Release rehearsal next'] },
@@ -15,11 +18,91 @@ const config = computed(() => dashboards[route.params.kind] ?? dashboards.analyt
 const values = [32,44,38,56,48,70,58,82,65,74,88,78];
 function draw(root = chart.value) { if (!root) return; chart.value = root; root.data = values.slice(period.value === '6' ? 6 : 0).map((value,index) => ({ label: `Week ${index + (period.value === '6' ? 7 : 1)}`, value })); const caption = root.querySelector('figcaption'); if(caption) caption.textContent = `${config.value.unit} · synthetic fixture`; }
 watch([period, config], () => draw());
+const glyph = status => status === 'Ready' ? '✓' : status === 'Review' ? '△' : '◌';
 </script>
 <template>
-  <header class="view-heading"><div><p class="eyebrow">J3W1 / {{ config.eyebrow }}</p><h1 tabindex="-1">{{ config.title }}</h1><p>Deliberate hierarchy. Useful color. A native foundation.</p></div><RouterLink to="/records/products">Explore records →</RouterLink></header>
-  <section class="metrics" aria-label="Key metrics"><article v-for="[label,value,note] in config.metrics" :key="label" class="panel"><span class="metric-label">{{ label }}</span><strong class="metric">{{ value }}</strong><span class="muted">{{ note }}</span></article></section>
-  <div class="dashboard-middle"><section class="panel"><div class="panel-heading"><div><p class="eyebrow">ACTIVITY</p><h2>{{ config.activity }}</h2></div><label>Period<select v-model="period"><option value="12">Last 12 weeks</option><option value="6">Last 6 weeks</option></select></label></div><UiSpecimen id="chart" @ready="draw" /></section><section class="panel"><p class="eyebrow">WORKSPACE</p><h2>{{ config.readiness }}</h2><ul class="readiness"><li v-for="item in config.items" :key="item">{{ item }}</li></ul><RouterLink to="/apps/kanban">Open the work board →</RouterLink></section></div>
-  <section class="panel"><div class="panel-heading"><div><p class="eyebrow">PROJECTS</p><h2>Work in motion</h2></div><RouterLink to="/records/products">View all records →</RouterLink></div><div class="table-scroll" tabindex="0" role="region" aria-label="Recent project records"><table class="records-table"><thead><tr><th scope="col">Project</th><th scope="col">Owner</th><th scope="col">Status</th><th scope="col">Scope</th></tr></thead><tbody><tr v-for="row in state.records.products.slice(0,5)" :key="row.id"><td><RouterLink :to="`/records/products/${row.id}`">{{ row.name }}</RouterLink><small class="block muted">Library / {{ row.id }}</small></td><td>{{ row.owner }}</td><td :class="['status', row.status.toLowerCase()]"><span aria-hidden="true">{{ row.status === 'Ready' ? '✓' : row.status === 'Review' ? '△' : '◌' }}</span> {{ row.status }}</td><td>{{ Number(row.id) * 6 }} components</td></tr></tbody></table></div></section>
+  <header class="view-heading">
+    <div>
+      <p class="eyebrow">J3W1 / {{ config.eyebrow }}</p>
+      <h1 tabindex="-1">{{ config.title }}</h1>
+      <p>Deliberate hierarchy. Useful color. A native foundation.</p>
+    </div>
+    <j3w1-link><RouterLink class="link link-standalone" to="/records/products">Explore records →</RouterLink></j3w1-link>
+  </header>
+  <section class="metrics" aria-label="Key metrics">
+    <article v-for="[label, value, note] in config.metrics" :key="label" class="panel">
+      <span class="metric-label">{{ label }}</span>
+      <strong class="metric">{{ value }}</strong>
+      <span class="muted">{{ note }}</span>
+    </article>
+  </section>
+  <div class="dashboard-middle">
+    <section class="panel">
+      <div class="panel-heading">
+        <div>
+          <p class="eyebrow">ACTIVITY</p>
+          <h2>{{ config.activity }}</h2>
+        </div>
+        <j3w1-select>
+          <div class="select">
+            <label class="select-label" for="dashboard-period">Period</label>
+            <div class="select-root">
+              <select id="dashboard-period" class="select-control" name="period" v-model="period">
+                <option value="12">Last 12 weeks</option>
+                <option value="6">Last 6 weeks</option>
+              </select>
+              <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4"></path></svg>
+            </div>
+          </div>
+        </j3w1-select>
+      </div>
+      <UiSpecimen id="chart" @ready="draw" />
+    </section>
+    <section class="panel">
+      <p class="eyebrow">WORKSPACE</p>
+      <h2>{{ config.readiness }}</h2>
+      <ul class="readiness">
+        <li v-for="item in config.items" :key="item">{{ item }}</li>
+      </ul>
+      <j3w1-link><RouterLink class="link link-standalone" to="/apps/kanban">Open the work board →</RouterLink></j3w1-link>
+    </section>
+  </div>
+  <section class="panel">
+    <div class="panel-heading">
+      <div>
+        <p class="eyebrow">PROJECTS</p>
+        <h2>Work in motion</h2>
+      </div>
+      <j3w1-link><RouterLink class="link link-standalone" to="/records/products">View all records →</RouterLink></j3w1-link>
+    </div>
+    <j3w1-table>
+      <div class="table-scroll" tabindex="0" role="region" aria-label="Recent project records">
+        <table class="table">
+          <thead class="table-head">
+            <tr>
+              <th class="table-header" scope="col">Project</th>
+              <th class="table-header" scope="col">Owner</th>
+              <th class="table-header" scope="col">Status</th>
+              <th class="table-header table-header-numeric" scope="col">Scope</th>
+            </tr>
+          </thead>
+          <tbody class="table-body">
+            <tr v-for="row in state.records.products.slice(0, 5)" :key="row.id" class="table-row">
+              <td class="table-cell">
+                <j3w1-link><RouterLink class="link" :to="`/records/products/${row.id}`">{{ row.name }}</RouterLink></j3w1-link>
+                <small class="block muted">Library / {{ row.id }}</small>
+              </td>
+              <td class="table-cell">{{ row.owner }}</td>
+              <td class="table-cell"><span :class="['status', row.status.toLowerCase()]"><span aria-hidden="true">{{ glyph(row.status) }}</span> {{ row.status }}</span></td>
+              <td class="table-cell table-cell-numeric">{{ Number(row.id) * 6 }} components</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </j3w1-table>
+  </section>
 </template>
-<style scoped>.readiness { padding-inline-start: 18px; margin-block: 28px; } .readiness li { margin-block: 18px; }</style>
+<style scoped>
+.readiness { padding-inline-start: var(--space-16); margin-block: var(--space-24); }
+.readiness li { margin-block: var(--space-16); }
+</style>
diff --git a/apps/demo/src/views/Forms.vue b/apps/demo/src/views/Forms.vue
index 265a3bbe9..028ddcc7a 100644
--- a/apps/demo/src/views/Forms.vue
+++ b/apps/demo/src/views/Forms.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import UiSpecimen from '../UiSpecimen.vue';
+import '@j3w1/ui/styles/link.css';
 const route = useRoute();
 const pages = {
   basic: {title:'Forms that work with the browser.',text:'Native labels, real validation, review and correction.',ids:['admin-form']},
@@ -14,4 +15,22 @@ const pages = {
 };
 const config = computed(() => pages[route.params.kind] ?? pages.basic);
 </script>
-<template><header class="view-heading"><div><p class="eyebrow">WORKSPACE / FORMS & SYSTEM</p><h1 tabindex="-1">{{ config.title }}</h1><p>{{ config.text }}</p></div><a href="../implement/">Consumption guide ↗</a></header><div class="stack"><section v-for="id in config.ids" :key="id" class="panel"><div class="panel-heading"><h2>{{ id }}</h2><a :href="`../components/${id}/`">API and copy files ↗</a></div><UiSpecimen :id="id" /></section></div></template>
+<template>
+  <header class="view-heading">
+    <div>
+      <p class="eyebrow">WORKSPACE / FORMS &amp; SYSTEM</p>
+      <h1 tabindex="-1">{{ config.title }}</h1>
+      <p>{{ config.text }}</p>
+    </div>
+    <j3w1-link><a class="link link-standalone" href="../implement/">Consumption guide ↗</a></j3w1-link>
+  </header>
+  <div class="stack">
+    <section v-for="id in config.ids" :key="id" class="panel">
+      <div class="panel-heading">
+        <h2>{{ id }}</h2>
+        <j3w1-link><a class="link link-standalone" :href="`../components/${id}/`">API and copy files ↗</a></j3w1-link>
+      </div>
+      <UiSpecimen :id="id" />
+    </section>
+  </div>
+</template>
diff --git a/apps/demo/src/views/Gallery.vue b/apps/demo/src/views/Gallery.vue
index 3ff9c529c..6636b19c2 100644
--- a/apps/demo/src/views/Gallery.vue
+++ b/apps/demo/src/views/Gallery.vue
@@ -4,6 +4,9 @@ import { useRoute } from 'vue-router';
 import index from '@j3w1/ui/index.json';
 import { loaders } from '../generated-loaders.js';
 import UiSpecimen from '../UiSpecimen.vue';
+import '@j3w1/ui/register/card';
+import '@j3w1/ui/styles/card.css';
+import '@j3w1/ui/styles/link.css';
 const route = useRoute(), query = ref(''), variants = ref([]), variant = ref('default'), markup = ref(''), message = ref('');
 const item = computed(() => index.components.find(item=>item.id===route.params.id));
 const filtered = computed(() => index.components.filter(item=>`${item.id} ${item.name}`.toLowerCase().includes(query.value.toLowerCase())));
@@ -12,7 +15,58 @@ watch(() => route.params.id, async id => { const current=++request;variants.valu
 watch(variant, async value => { const id=route.params.id;if(loaders[id])markup.value=(await loaders[id]())[value] ?? ''; });
 async function copy() { try { await navigator.clipboard.writeText(markup.value); message.value='Maintained markup copied. Include its package registration and styles.'; } catch { message.value='Clipboard unavailable. Select the source below to copy it.'; } }
 </script>
-<template><header class="view-heading"><div><p class="eyebrow">J3W1 / COMPONENT GALLERY</p><h1 tabindex="-1">{{ item?.name ?? `${index.components.length} components. One foundation.` }}</h1><p>Official package implementations, rendered inside a Vue application.</p></div><RouterLink v-if="item" to="/components">← All components</RouterLink></header>
-  <template v-if="item"><div class="filters"><label>Variant<select v-model="variant"><option v-for="name in variants" :key="name">{{ name }}</option></select></label><a :href="`../components/${item.id}/`">Complete specification, API and copy files ↗</a></div><section class="panel"><UiSpecimen :id="item.id" :variant="variant" /></section><div class="actions"><button type="button" @click="copy">Copy maintained markup</button></div><p role="status">{{ message }}</p><pre class="panel"><code>{{ markup }}</code></pre></template>
-  <template v-else><div class="filters"><label>Find a component<input v-model="query" type="search" placeholder="dialog, field, chart…"></label><span>{{ filtered.length }} components</span></div><div class="gallery-grid"><RouterLink v-for="component in filtered" :key="component.id" :to="`/components/${component.id}`" class="panel gallery-link"><p class="eyebrow">{{ component.maturity }}</p><h2>{{ component.name }} →</h2><p class="muted">{{ component.id }}</p></RouterLink></div><p v-if="!filtered.length">No matching components.</p></template>
+<template>
+  <header class="view-heading">
+    <div>
+      <p class="eyebrow">J3W1 / COMPONENT GALLERY</p>
+      <h1 tabindex="-1">{{ item?.name ?? `${index.components.length} components. One foundation.` }}</h1>
+      <p>Official package implementations, rendered inside a Vue application.</p>
+    </div>
+    <j3w1-link v-if="item"><RouterLink class="link link-standalone" to="/components">← All components</RouterLink></j3w1-link>
+  </header>
+  <template v-if="item">
+    <div class="filters">
+      <j3w1-select>
+        <div class="select">
+          <label class="select-label" for="gallery-variant">Variant</label>
+          <div class="select-root">
+            <select id="gallery-variant" class="select-control" name="variant" v-model="variant">
+              <option v-for="name in variants" :key="name">{{ name }}</option>
+            </select>
+            <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4"></path></svg>
+          </div>
+        </div>
+      </j3w1-select>
+      <j3w1-link><a class="link link-standalone" :href="`../components/${item.id}/`">Complete specification, API and copy files ↗</a></j3w1-link>
+    </div>
+    <section class="panel"><UiSpecimen :id="item.id" :variant="variant" /></section>
+    <div class="actions">
+      <j3w1-button><button class="button button-secondary" type="button" @click="copy">Copy maintained markup</button></j3w1-button>
+    </div>
+    <p role="status">{{ message }}</p>
+    <pre class="panel"><code>{{ markup }}</code></pre>
+  </template>
+  <template v-else>
+    <div class="filters">
+      <j3w1-text-field>
+        <div class="text-field">
+          <label class="text-field-label" for="gallery-query">Find a component</label>
+          <div class="text-field-root">
+            <input id="gallery-query" class="text-field-input" type="search" name="query" v-model="query" placeholder="dialog, field, chart…">
+          </div>
+        </div>
+      </j3w1-text-field>
+      <span>{{ filtered.length }} components</span>
+    </div>
+    <div class="gallery-grid">
+      <j3w1-card v-for="component in filtered" :key="component.id">
+        <RouterLink class="card card-link" :to="`/components/${component.id}`">
+          <span class="card-title">{{ component.name }} →</span>
+          <span class="card-body">{{ component.id }}</span>
+          <span class="card-meta">{{ component.maturity }}</span>
+        </RouterLink>
+      </j3w1-card>
+    </div>
+    <p v-if="!filtered.length">No matching components.</p>
+  </template>
 </template>
diff --git a/apps/demo/src/views/Pages.vue b/apps/demo/src/views/Pages.vue
index 63e450207..7afb74204 100644
--- a/apps/demo/src/views/Pages.vue
+++ b/apps/demo/src/views/Pages.vue
@@ -1,22 +1,221 @@
 <script setup>
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { state, notify } from '../store.js';
 import UiSpecimen from '../UiSpecimen.vue';
+import '@j3w1/ui/register/card';
+import '@j3w1/ui/register/checkbox';
+import '@j3w1/ui/register/table';
+import '@j3w1/ui/styles/card.css';
+import '@j3w1/ui/styles/checkbox.css';
+import '@j3w1/ui/styles/link.css';
+import '@j3w1/ui/styles/table.css';
 const route=useRoute(),kind=computed(()=>route.params.kind),email=ref(''),password=ref(''),message=ref(''),help=ref(''),role=ref('Editor'),draft=reactive({...state.profile});
 watch(kind,()=>{message.value='';password.value='';});
 const articles=[['Install one component','Load the exact package version, token CSS, per-component styles and registration. Copy the maintained native markup.','../implement/'],['Use native forms','Native names, labels, fieldsets and constraints keep your application behavior explicit.','../components/text-field/'],['Prepare an agent kit','Select only the needed IDs and keep the complete copy closure and notices.','../agents/'],['Inspect keyboard behavior','Each component contract lists its exact focus, selection and keyboard rules.','../components/']];
 const matches=computed(()=>articles.filter(row=>row.join(' ').toLowerCase().includes(help.value.toLowerCase())));
-function authenticate(){message.value=kind.value==='recovery'?'Recovery request simulated locally. No email was sent.':'Sign-in validation passed locally. No session or authentication request was created.';password.value='';}
+function authenticate(event){message.value=kind.value==='recovery'?'Recovery request simulated locally. No email was sent.':'Sign-in validation passed locally. No session or authentication request was created.';password.value='';restart(event.target);}
+// After a successful local submit the form starts afresh: reset clears the browser's
+// user-validity state, so a field the submit emptied is not shown as invalid. Values
+// Vue rendered are put back, so the DOM keeps matching the model.
+async function restart(form) {
+  await nextTick();
+  const kept = [...form.elements].filter(field => field.matches('input, select, textarea')).map(field => [field, field.value, field.checked]);
+  form.reset();
+  for (const [field, value, checked] of kept) if (['checkbox', 'radio'].includes(field.type)) field.checked = checked; else field.value = value;
+}
 </script>
-<template><header class="view-heading"><div><p class="eyebrow">WORKSPACE / PAGES</p><h1 tabindex="-1" style="text-transform:capitalize">{{ kind.replaceAll('-',' ') }}</h1><p>Application page compositions with explicit local boundaries.</p></div></header>
-  <section v-if="kind==='profile'" class="panel"><div class="panel-heading"><div><span class="identity">JL</span><h2>{{ state.profile.name }}</h2><p>{{ state.profile.email }} · {{ state.profile.role }}</p></div><RouterLink to="/pages/settings">Edit profile →</RouterLink></div><div class="metrics"><article><span class="metric-label">Projects</span><strong class="metric">24</strong></article><article><span class="metric-label">Reviews</span><strong class="metric">148</strong></article><article><span class="metric-label">Contributions</span><strong class="metric">67</strong></article><article><span class="metric-label">Local workspace</span><strong class="metric">01</strong></article></div><UiSpecimen id="timeline" /></section>
-  <form v-else-if="kind==='settings'" class="panel form-grid" @submit.prevent="Object.assign(state.profile,draft);notify('Profile settings saved in this local demo.')"><label>Display name<input v-model="draft.name" required maxlength="80"></label><label>Email address<input type="email" v-model="draft.email" required></label><label>Role label<select v-model="draft.role"><option>Viewer</option><option>Editor</option><option>Administrator</option></select></label><label>Demo notification preference<select :value="String(draft.notifications)" @change="draft.notifications=$event.target.value==='true'"><option value="true">Enabled</option><option value="false">Disabled</option></select></label><p class="wide muted">Role labels are demonstration data and do not grant permissions.</p><div class="actions wide"><j3w1-button><button class="button" type="submit">Save local settings</button></j3w1-button><button type="button" @click="Object.assign(draft,state.profile)">Discard changes</button></div></form>
-  <section v-else-if="kind==='permissions'" class="panel"><div class="panel-heading"><h2>Role capability demonstration</h2><label>Preview role<select v-model="role"><option>Viewer</option><option>Editor</option><option>Administrator</option></select></label></div><div class="table-scroll"><table class="records-table"><thead><tr><th>Capability</th><th>Preview availability</th></tr></thead><tbody><tr v-for="[name,allowed] in [['Read records',true],['Edit records',role!=='Viewer'],['Manage members',role==='Administrator']]" :key="name"><th scope="row">{{ name }}</th><td>{{ allowed?'✓ Available':'— Unavailable' }}</td></tr></tbody></table></div><p class="muted">This is a presentation example. Your server must enforce real authorization independently of the UI.</p></section>
-  <form v-else-if="['sign-in','recovery'].includes(kind)" class="panel stack account-form" @submit.prevent="authenticate"><h2>{{ kind==='recovery'?'Recover access':'Welcome to your workspace' }}</h2><p class="muted">Use synthetic values. No credentials leave this page.</p><label>Email address<input v-model="email" type="email" required autocomplete="off" placeholder="jordan@example.test"></label><label v-if="kind==='sign-in'">Demo password<input v-model="password" type="password" required minlength="8" autocomplete="off"></label><j3w1-button><button class="button" type="submit">{{ kind==='recovery'?'Simulate recovery':'Validate sign-in locally' }}</button></j3w1-button><RouterLink :to="kind==='recovery'?'/pages/sign-in':'/pages/recovery'">{{ kind==='recovery'?'Back to sign-in':'Forgot password?' }}</RouterLink><p role="status">{{ message }}</p></form>
-  <div v-else-if="kind==='pricing'" class="gallery-grid"><article v-for="[name,price,features] in [['Personal','0',['One workspace','Core components','Local projects']],['Team','24',['Shared workspaces','Review workflows','Team templates']],['Organization','64',['Organization views','Policy controls','Priority planning']]]" :key="name" class="panel"><p class="eyebrow">SAMPLE PLAN</p><h2>{{ name }}</h2><p class="price">${{ price }}<small class="muted"> / month</small></p><ul><li v-for="feature in features" :key="feature">{{ feature }}</li></ul><button type="button" @click="notify(`${name} selected for this pricing demonstration. No purchase or subscription was created.`)">Preview {{ name }}</button><p class="muted">Illustrative pricing only.</p></article></div>
-  <section v-else-if="kind==='help'"><div class="filters"><label>Search help<input v-model="help" type="search" placeholder="forms, package, keyboard…"></label></div><div class="gallery-grid"><a v-for="[title,text,url] in matches" :key="title" :href="url" class="panel gallery-link"><h2>{{ title }} →</h2><p>{{ text }}</p></a></div><p v-if="!matches.length">No help articles match this search.</p></section>
-  <section v-else-if="kind==='error'" class="panel empty"><p class="eyebrow">SERVICE ERROR / DEMONSTRATION</p><h2>The sample request could not complete.</h2><p>Your local records are still available.</p><div class="actions"><button type="button" @click="message='Retry completed in the local simulation. No network request was sent.'">Retry locally</button><RouterLink to="/dashboards/analytics">Return to dashboard</RouterLink></div><p role="status">{{ message }}</p></section>
-  <section v-else class="panel empty"><p class="eyebrow">404 / NOT FOUND</p><h2>This page is not in the workspace.</h2><p>Choose a destination from navigation or open the command prompt.</p><RouterLink to="/dashboards/analytics">Return to dashboard →</RouterLink></section>
+<template>
+  <header class="view-heading">
+    <div>
+      <p class="eyebrow">WORKSPACE / PAGES</p>
+      <h1 tabindex="-1" style="text-transform:capitalize">{{ kind.replaceAll('-',' ') }}</h1>
+      <p>Application page compositions with explicit local boundaries.</p>
+    </div>
+  </header>
+  <section v-if="kind==='profile'" class="panel">
+    <div class="panel-heading">
+      <div>
+        <span class="identity">JL</span>
+        <h2>{{ state.profile.name }}</h2>
+        <p>{{ state.profile.email }} · {{ state.profile.role }}</p>
+      </div>
+      <j3w1-link><RouterLink class="link link-standalone" to="/pages/settings">Edit profile →</RouterLink></j3w1-link>
+    </div>
+    <div class="metrics">
+      <article><span class="metric-label">Projects</span><strong class="metric">24</strong></article>
+      <article><span class="metric-label">Reviews</span><strong class="metric">148</strong></article>
+      <article><span class="metric-label">Contributions</span><strong class="metric">67</strong></article>
+      <article><span class="metric-label">Local workspace</span><strong class="metric">01</strong></article>
+    </div>
+    <UiSpecimen id="timeline" />
+  </section>
+  <form v-else-if="kind==='settings'" class="panel form-grid" @submit.prevent="Object.assign(state.profile,draft);notify('Profile settings saved in this local demo.')">
+    <j3w1-text-field>
+      <div class="text-field">
+        <label class="text-field-label" for="settings-name">Display name <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+        <div class="text-field-root">
+          <input id="settings-name" aria-describedby="settings-name-message" class="text-field-input" name="name" v-model="draft.name" required maxlength="80">
+        </div>
+        <p id="settings-name-message" class="text-field-message">✕ Enter a display name.</p>
+      </div>
+    </j3w1-text-field>
+    <j3w1-text-field>
+      <div class="text-field">
+        <label class="text-field-label" for="settings-email">Email address <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+        <div class="text-field-root">
+          <input id="settings-email" aria-describedby="settings-email-message" class="text-field-input" type="email" name="email" v-model="draft.email" required>
+        </div>
+        <p id="settings-email-message" class="text-field-message">✕ Enter an email address.</p>
+      </div>
+    </j3w1-text-field>
+    <j3w1-select>
+      <div class="select">
+        <label class="select-label" for="settings-role">Role label</label>
+        <div class="select-root">
+          <select id="settings-role" class="select-control" name="role" v-model="draft.role">
+            <option>Viewer</option>
+            <option>Editor</option>
+            <option>Administrator</option>
+          </select>
+          <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4"></path></svg>
+        </div>
+      </div>
+    </j3w1-select>
+    <j3w1-checkbox>
+      <div class="checkbox">
+        <label class="checkbox-option">
+          <span class="checkbox-control">
+            <input class="checkbox-input" type="checkbox" name="notifications" v-model="draft.notifications">
+            <svg class="checkbox-check" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3.5 8.5l3 3 6-6"></path></svg>
+            <svg class="checkbox-dash" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 8h8"></path></svg>
+          </span>
+          <span class="checkbox-text">Demo notifications</span>
+        </label>
+      </div>
+    </j3w1-checkbox>
+    <p class="wide muted">Role labels are demonstration data and do not grant permissions.</p>
+    <div class="actions wide">
+      <j3w1-button><button class="button" type="submit">Save local settings</button></j3w1-button>
+      <j3w1-button><button class="button button-tertiary" type="button" @click="Object.assign(draft,state.profile)">Discard changes</button></j3w1-button>
+    </div>
+  </form>
+  <section v-else-if="kind==='permissions'" class="panel">
+    <div class="panel-heading">
+      <h2>Role capability demonstration</h2>
+      <j3w1-select>
+        <div class="select">
+          <label class="select-label" for="permissions-role">Preview role</label>
+          <div class="select-root">
+            <select id="permissions-role" class="select-control" name="role" v-model="role">
+              <option>Viewer</option>
+              <option>Editor</option>
+              <option>Administrator</option>
+            </select>
+            <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4"></path></svg>
+          </div>
+        </div>
+      </j3w1-select>
+    </div>
+    <j3w1-table>
+      <div class="table-scroll" tabindex="0" role="region" aria-label="Role capabilities">
+        <table class="table">
+          <thead class="table-head">
+            <tr>
+              <th class="table-header" scope="col">Capability</th>
+              <th class="table-header" scope="col">Preview availability</th>
+            </tr>
+          </thead>
+          <tbody class="table-body">
+            <tr v-for="[name,allowed] in [['Read records',true],['Edit records',role!=='Viewer'],['Manage members',role==='Administrator']]" :key="name" class="table-row">
+              <th class="table-cell" scope="row">{{ name }}</th>
+              <td class="table-cell">{{ allowed?'✓ Available':'— Unavailable' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </j3w1-table>
+    <p class="muted">This is a presentation example. Your server must enforce real authorization independently of the UI.</p>
+  </section>
+  <form v-else-if="['sign-in','recovery'].includes(kind)" class="panel stack account-form" @submit.prevent="authenticate">
+    <h2>{{ kind==='recovery'?'Recover access':'Welcome to your workspace' }}</h2>
+    <p class="muted">Use synthetic values. No credentials leave this page.</p>
+    <j3w1-text-field>
+      <div class="text-field">
+        <label class="text-field-label" for="account-email">Email address <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+        <div class="text-field-root">
+          <input id="account-email" aria-describedby="account-email-message" class="text-field-input" type="email" name="email" v-model="email" required autocomplete="off" placeholder="jordan@example.test">
+        </div>
+        <p id="account-email-message" class="text-field-message">✕ Enter an email address.</p>
+      </div>
+    </j3w1-text-field>
+    <j3w1-text-field v-if="kind==='sign-in'">
+      <div class="text-field">
+        <label class="text-field-label" for="account-password">Demo password <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+        <div class="text-field-root">
+          <input id="account-password" aria-describedby="account-password-message" class="text-field-input" type="password" name="password" v-model="password" required minlength="8" autocomplete="off">
+        </div>
+        <p id="account-password-message" class="text-field-message">✕ Use at least 8 characters.</p>
+      </div>
+    </j3w1-text-field>
+    <div class="actions">
+      <j3w1-button><button class="button" type="submit">{{ kind==='recovery'?'Simulate recovery':'Validate sign-in locally' }}</button></j3w1-button>
+      <j3w1-link><RouterLink class="link link-standalone" :to="kind==='recovery'?'/pages/sign-in':'/pages/recovery'">{{ kind==='recovery'?'Back to sign-in':'Forgot password?' }}</RouterLink></j3w1-link>
+    </div>
+    <p role="status">{{ message }}</p>
+  </form>
+  <div v-else-if="kind==='pricing'" class="gallery-grid">
+    <article v-for="[name,price,features] in [['Personal','0',['One workspace','Core components','Local projects']],['Team','24',['Shared workspaces','Review workflows','Team templates']],['Organization','64',['Organization views','Policy controls','Priority planning']]]" :key="name" class="panel">
+      <p class="eyebrow">SAMPLE PLAN</p>
+      <h2>{{ name }}</h2>
+      <p class="price">${{ price }}<small class="muted"> / month</small></p>
+      <ul>
+        <li v-for="feature in features" :key="feature">{{ feature }}</li>
+      </ul>
+      <j3w1-button><button class="button button-secondary" type="button" @click="notify(`${name} selected for this pricing demonstration. No purchase or subscription was created.`)">Preview {{ name }}</button></j3w1-button>
+      <p class="muted">Illustrative pricing only.</p>
+    </article>
+  </div>
+  <section v-else-if="kind==='help'">
+    <div class="filters">
+      <j3w1-text-field>
+        <div class="text-field">
+          <label class="text-field-label" for="help-query">Search help</label>
+          <div class="text-field-root">
+            <input id="help-query" class="text-field-input" type="search" name="query" v-model="help" placeholder="forms, package, keyboard…">
+          </div>
+        </div>
+      </j3w1-text-field>
+    </div>
+    <div class="gallery-grid">
+      <j3w1-card v-for="[title,text,url] in matches" :key="title">
+        <a class="card card-link" :href="url">
+          <span class="card-title">{{ title }} →</span>
+          <span class="card-body">{{ text }}</span>
+        </a>
+      </j3w1-card>
+    </div>
+    <p v-if="!matches.length">No help articles match this search.</p>
+  </section>
+  <section v-else-if="kind==='error'" class="panel empty">
+    <p class="eyebrow">SERVICE ERROR / DEMONSTRATION</p>
+    <h2>The sample request could not complete.</h2>
+    <p>Your local records are still available.</p>
+    <div class="actions">
+      <j3w1-button><button class="button" type="button" @click="message='Retry completed in the local simulation. No network request was sent.'">Retry locally</button></j3w1-button>
+      <j3w1-link><RouterLink class="link link-standalone" to="/dashboards/analytics">Return to dashboard</RouterLink></j3w1-link>
+    </div>
+    <p role="status">{{ message }}</p>
+  </section>
+  <section v-else class="panel empty">
+    <p class="eyebrow">404 / NOT FOUND</p>
+    <h2>This page is not in the workspace.</h2>
+    <p>Choose a destination from navigation or open the command prompt.</p>
+    <j3w1-link><RouterLink class="link link-standalone" to="/dashboards/analytics">Return to dashboard →</RouterLink></j3w1-link>
+  </section>
 </template>
-<style scoped>.account-form { max-width:560px; margin-inline:auto; }.price small { font-size:12px; }li { margin-block:12px; }</style>
+<style scoped>
+.account-form { max-width: var(--layout-content-max); margin-inline: auto; }
+.price small { font-size: var(--font-size-ui-sm); line-height: var(--font-line-height-ui-sm); font-weight: var(--font-weight-regular); }
+li { margin-block: var(--space-12); }
+</style>
diff --git a/apps/demo/src/views/Productivity.vue b/apps/demo/src/views/Productivity.vue
index 809d75263..9ab05564b 100644
--- a/apps/demo/src/views/Productivity.vue
+++ b/apps/demo/src/views/Productivity.vue
@@ -1,22 +1,287 @@
 <script setup>
-import { computed, ref, nextTick } from 'vue';
+import { computed, ref, nextTick, onMounted, onUnmounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { state, notify, nextId } from '../store.js';
+import '@j3w1/ui/register/list';
+import '@j3w1/ui/register/toast';
+import '@j3w1/ui/styles/toast.css';
+import '@j3w1/ui/styles/link.css';
+import '@j3w1/ui/styles/list.css';
 const route = useRoute(), kind = computed(() => route.params.kind);
 const text = ref(''), selectedMail = ref(1), archived = ref(false), compose = ref(false), subject = ref(''), mailBody = ref(''), eventTitle = ref(''), day = ref(8), taskName = ref('');
 const mails = computed(() => state.mail.filter(mail => mail.archived===archived.value));
 const selected = computed(() => state.mail.find(mail => mail.id===selectedMail.value));
-function sendChat() { if(!text.value.trim())return;state.messages.push({id:nextId(state.messages),person:'You',text:text.value.trim(),self:true});text.value='';notify('Message added to the local conversation.'); }
+function openMail(mail) { selectedMail.value=mail.id;mail.read=true;compose.value=false; }
+// The mailbox is a single-selection listbox (list.md): one tab stop, selection follows focus.
+const mailTabIndex = (mail, index) => (mails.value.some(item => item.id===selectedMail.value) ? mail.id===selectedMail.value : index===0) ? 0 : -1;
+async function browseMail(event) {
+  const list = event.currentTarget, rows = mails.value, index = rows.findIndex(mail => String(mail.id)===event.target.closest('[data-mail-id]')?.dataset.mailId);
+  let next = { ArrowDown: index + 1, ArrowUp: index - 1, Home: 0, End: rows.length - 1, Enter: index, ' ': index }[event.key];
+  if (next === undefined && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) next = rows.map((_, offset) => (index + 1 + offset) % rows.length).find(position => rows[position].subject.toLowerCase().startsWith(event.key.toLowerCase()));
+  if (next === undefined) return;
+  event.preventDefault();
+  const mail = rows[Math.max(0, Math.min(rows.length - 1, next))];
+  openMail(mail);
+  await nextTick();
+  list.querySelector(`[data-mail-id="${mail.id}"]`)?.focus();
+}
+function sendChat(event) { if(!text.value.trim())return;state.messages.push({id:nextId(state.messages),person:'You',text:text.value.trim(),self:true});text.value='';notify('Message added to the local conversation.');restart(event.target); }
 function sendMail() { state.mail.push({id:nextId(state.mail),from:'You',subject:subject.value,body:mailBody.value,read:true,archived:false});compose.value=false;subject.value='';mailBody.value='';notify('Message created locally. No email was sent.'); }
-function addEvent() { state.events.push({id:nextId(state.events),day:Number(day.value),title:eventTitle.value});eventTitle.value='';notify('Event added to the local September calendar.'); }
-function addTask() { if(!taskName.value.trim())return;state.tasks.push({id:nextId(state.tasks),name:taskName.value.trim(),status:'Ready'});taskName.value='';notify('Task added.'); }
+function addEvent(event) { state.events.push({id:nextId([...state.events, ...removedEvents.value.map(item => item.event)]),day:Number(day.value),title:eventTitle.value});eventTitle.value='';notify('Event added to the local September calendar.');restart(event.target); }
+// Keep removal history after the notice closes, so Undo is never a timed-only action.
+const removedEvents = ref([]), removalNotice = ref(false), notifications = ref(), undoButton = ref();
+const lastRemoved = computed(() => removedEvents.value.at(-1)?.event);
+let removalTimer, remaining = 12000, started = 0, pointerInNotice = false;
+function pauseRemovalNotice() {
+  if (!removalTimer) return;
+  clearTimeout(removalTimer);
+  removalTimer = undefined;
+  remaining = Math.max(0, remaining - (Date.now() - started));
+}
+function resumeRemovalNotice() {
+  if (!removalNotice.value || removalTimer || pointerInNotice || notifications.value?.contains(document.activeElement)) return;
+  started = Date.now();
+  removalTimer = setTimeout(() => { removalTimer = undefined; removalNotice.value = false; }, remaining);
+}
+async function leaveRemovalNotice() { await nextTick(); resumeRemovalNotice(); }
+function hoverRemovalNotice(inside) {
+  pointerInNotice = inside;
+  inside ? pauseRemovalNotice() : resumeRemovalNotice();
+}
+async function removeEvent(event, trigger) {
+  const index = state.events.indexOf(event), hadFocus = trigger === document.activeElement;
+  removedEvents.value.push({ event, index });
+  state.events.splice(index, 1);
+  pauseRemovalNotice();
+  remaining = 12000;
+  removalNotice.value = true;
+  await nextTick();
+  // Removing a focused row leaves focus on a surviving calendar action, never the toast.
+  if (hadFocus) document.querySelector('[data-event-id] button, [data-add-event]')?.focus();
+  resumeRemovalNotice();
+}
+async function undoEvent() {
+  const removed = removedEvents.value.pop();
+  if (!removed) return;
+  state.events.splice(removed.index, 0, removed.event);
+  dismissRemovalNotice();
+  notify(`${removed.event.title} restored to day ${removed.event.day}.`);
+  await nextTick();
+  document.querySelector(`[data-event-id="${removed.event.id}"] button`)?.focus();
+}
+function dismissRemovalNotice() {
+  const hadFocus = notifications.value?.contains(document.activeElement);
+  pauseRemovalNotice();
+  removalNotice.value = false;
+  pointerInNotice = false;
+  if (hadFocus) nextTick(() => undoButton.value?.focus());
+}
+function focusNotifications(event) {
+  if (event.key === 'F6' && kind.value === 'calendar' && removalNotice.value) {
+    event.preventDefault();
+    notifications.value?.querySelector('.toast-action')?.focus();
+  }
+}
+onMounted(() => window.addEventListener('keydown', focusNotifications));
+onUnmounted(() => { clearTimeout(removalTimer); window.removeEventListener('keydown', focusNotifications); });
+function addTask(event) { if(!taskName.value.trim())return;state.tasks.push({id:nextId(state.tasks),name:taskName.value.trim(),status:'Ready'});taskName.value='';notify('Task added.');restart(event.target); }
+// After a successful local submit the form starts afresh: reset clears the browser's
+// user-validity state, so a field the submit emptied is not shown as invalid. Values
+// Vue rendered are put back, so the DOM keeps matching the model.
+async function restart(form) {
+  await nextTick();
+  const kept = [...form.elements].filter(field => field.matches('input, select, textarea')).map(field => [field, field.value, field.checked]);
+  form.reset();
+  for (const [field, value, checked] of kept) if (['checkbox', 'radio'].includes(field.type)) field.checked = checked; else field.value = value;
+}
 async function move(task,status) { task.status=status;notify(`${task.name} moved to ${status}.`);await nextTick();document.querySelector(`[data-task-id="${task.id}"] select`)?.focus(); }
 </script>
 <template>
-  <header class="view-heading"><div><p class="eyebrow">WORKSPACE / APPLICATIONS</p><h1 tabindex="-1" style="text-transform:capitalize">{{ kind }}</h1><p>Bounded local actions, with clear keyboard paths.</p></div></header>
-  <div v-if="kind==='email'" class="split"><aside class="stack"><button type="button" @click="compose=true">+ Compose</button><label>Folder<select :value="archived ? 'archive' : 'inbox'" @change="archived=$event.target.value==='archive'"><option value="inbox">Inbox</option><option value="archive">Archive</option></select></label><button v-for="mail in mails" :key="mail.id" class="list-button" type="button" :aria-pressed="selectedMail===mail.id" @click="selectedMail=mail.id;mail.read=true;compose=false"><strong>{{ mail.subject }} {{ mail.read?'':'●' }}</strong><small class="block muted">{{ mail.from }}</small></button><p v-if="!mails.length">This folder is empty.</p></aside><form v-if="compose" class="panel stack" @submit.prevent="sendMail"><h2>Compose a local message</h2><label>Subject<input v-model="subject" required maxlength="120"></label><label>Message<textarea v-model="mailBody" required rows="8"></textarea></label><div class="actions"><button type="submit">Create local message</button><button type="button" @click="compose=false">Cancel</button></div></form><article v-else-if="selected" class="panel"><div class="panel-heading"><h2>{{ selected.subject }}</h2><button type="button" @click="selected.archived=!selected.archived;notify(selected.archived?'Message archived.':'Message returned to inbox.')">{{ selected.archived?'Move to inbox':'Archive' }}</button></div><p class="muted">From {{ selected.from }}</p><p>{{ selected.body }}</p><div class="actions"><button type="button" @click="compose=true;subject=`Re: ${selected.subject}`">Reply locally</button><button type="button" @click="selected.read=!selected.read">Mark {{ selected.read?'unread':'read' }}</button></div></article></div>
-  <section v-else-if="kind==='chat'" class="panel"><div class="panel-heading"><h2>Design workspace</h2><span class="muted">2 participants · local fixture</span></div><div class="stack" role="log" aria-label="Conversation"><article v-for="message in state.messages" :key="message.id" :class="['message',{self:message.self}]"><small class="muted">{{ message.person }}</small><p>{{ message.text }}</p></article></div><form class="filters" @submit.prevent="sendChat"><label>Message<input v-model="text" required maxlength="1000" placeholder="Write a local message…"></label><button type="submit">Add message →</button></form></section>
-  <template v-else-if="kind==='calendar'"><section class="panel"><div class="panel-heading"><h2>September 2026</h2><span class="muted">Fixed demonstration month</span></div><form class="filters" @submit.prevent="addEvent"><label>Event title<input v-model="eventTitle" required maxlength="80"></label><label>Day<input v-model="day" type="number" min="1" max="30" required></label><button type="submit">Add event</button></form><div class="calendar"><div v-for="date in 30" :key="date" class="calendar-day"><strong>{{ String(date).padStart(2,'0') }}</strong><button v-for="event in state.events.filter(event=>event.day===date)" :key="event.id" type="button" :aria-label="`Remove event: ${event.title}`" @click="state.events.splice(state.events.indexOf(event),1);notify('Local event removed.')">{{ event.title }} ×</button></div></div><p class="muted">Event buttons remove their local entry. No external calendar is connected.</p></section></template>
-  <template v-else-if="kind==='kanban'"><form class="filters" @submit.prevent="addTask"><label>New task<input v-model="taskName" required maxlength="120" placeholder="What needs to happen?"></label><button type="submit">Add task</button></form><div class="kanban"><section v-for="column in ['Ready','In progress','Review']" :key="column" class="panel"><p class="eyebrow">{{ state.tasks.filter(task=>task.status===column).length }} TASKS</p><h2>{{ column }}</h2><article v-for="task in state.tasks.filter(task=>task.status===column)" :key="task.id" :data-task-id="task.id"><h3>{{ task.name }}</h3><label>Move task<select :value="task.status" :aria-label="`Move ${task.name}`" @change="move(task,$event.target.value)"><option>Ready</option><option>In progress</option><option>Review</option></select></label></article><p v-if="!state.tasks.some(task=>task.status===column)" class="muted">No tasks in this column.</p></section></div><p class="muted">Move tasks with the themed choice menu using the pointer or keyboard.</p></template>
-  <section v-else class="panel empty"><h2>Application not found</h2><RouterLink to="/apps/email">Open email →</RouterLink></section>
+  <header class="view-heading">
+    <div>
+      <p class="eyebrow">WORKSPACE / APPLICATIONS</p>
+      <h1 tabindex="-1" style="text-transform:capitalize">{{ kind }}</h1>
+      <p>Bounded local actions, with clear keyboard paths.</p>
+    </div>
+  </header>
+  <div v-if="kind==='email'" class="split">
+    <div class="stack">
+      <j3w1-button><button class="button button-secondary" type="button" @click="compose=true">+ Compose</button></j3w1-button>
+      <j3w1-select>
+        <div class="select">
+          <label class="select-label" for="mail-folder">Folder</label>
+          <div class="select-root">
+            <select id="mail-folder" class="select-control" name="folder" :value="archived ? 'archive' : 'inbox'" @change="archived=$event.target.value==='archive'">
+              <option value="inbox">Inbox</option>
+              <option value="archive">Archive</option>
+            </select>
+            <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4"></path></svg>
+          </div>
+        </div>
+      </j3w1-select>
+      <j3w1-list v-if="mails.length">
+        <ul class="list" role="listbox" aria-label="Messages" @keydown="browseMail">
+          <li v-for="(mail, index) in mails" :key="mail.id" class="list-option" role="option" :aria-selected="String(selectedMail===mail.id)" :tabindex="mailTabIndex(mail, index)" :data-mail-id="mail.id" @click="openMail(mail)">
+            <span class="list-check" aria-hidden="true">✓</span>
+            <span class="list-label">{{ mail.subject }}<template v-if="!mail.read"> <span aria-hidden="true">●</span><span class="sr-only">, unread</span></template></span>
+            <span class="list-meta">{{ mail.from }}</span>
+          </li>
+        </ul>
+      </j3w1-list>
+      <p v-if="!mails.length">This folder is empty.</p>
+    </div>
+    <form v-if="compose" class="panel stack" @submit.prevent="sendMail">
+      <h2>Compose a local message</h2>
+      <j3w1-text-field>
+        <div class="text-field">
+          <label class="text-field-label" for="mail-subject">Subject <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+          <div class="text-field-root">
+            <input id="mail-subject" aria-describedby="mail-subject-message" class="text-field-input" name="subject" v-model="subject" required maxlength="120">
+          </div>
+          <p id="mail-subject-message" class="text-field-message">✕ Enter a subject.</p>
+        </div>
+      </j3w1-text-field>
+      <j3w1-textarea>
+        <div class="textarea">
+          <label class="textarea-label" for="mail-body">Message <span class="textarea-required" aria-hidden="true">*</span><span class="textarea-required sr-only"> required</span></label>
+          <div class="textarea-root">
+            <textarea id="mail-body" aria-describedby="mail-body-message" class="textarea-input" name="body" v-model="mailBody" required rows="8"></textarea>
+          </div>
+          <p id="mail-body-message" class="textarea-message">✕ Write the message.</p>
+        </div>
+      </j3w1-textarea>
+      <div class="actions">
+        <j3w1-button><button class="button" type="submit">Create local message</button></j3w1-button>
+        <j3w1-button><button class="button button-tertiary" type="button" @click="compose=false">Cancel</button></j3w1-button>
+      </div>
+    </form>
+    <article v-else-if="selected" class="panel">
+      <div class="panel-heading">
+        <h2>{{ selected.subject }}</h2>
+        <j3w1-button><button class="button button-secondary" type="button" @click="selected.archived=!selected.archived;notify(selected.archived?'Message archived.':'Message returned to inbox.')">{{ selected.archived?'Move to inbox':'Archive' }}</button></j3w1-button>
+      </div>
+      <p class="muted">From {{ selected.from }}</p>
+      <p>{{ selected.body }}</p>
+      <div class="actions">
+        <j3w1-button><button class="button" type="button" @click="compose=true;subject=`Re: ${selected.subject}`">Reply locally</button></j3w1-button>
+        <j3w1-button><button class="button button-tertiary" type="button" @click="selected.read=!selected.read">Mark {{ selected.read?'unread':'read' }}</button></j3w1-button>
+      </div>
+    </article>
+  </div>
+  <section v-else-if="kind==='chat'" class="panel">
+    <div class="panel-heading">
+      <h2>Design workspace</h2>
+      <span class="muted">2 participants · local fixture</span>
+    </div>
+    <div class="stack" role="log" aria-label="Conversation">
+      <article v-for="message in state.messages" :key="message.id" :class="['message', { self: message.self }]">
+        <small class="muted">{{ message.person }}</small>
+        <p>{{ message.text }}</p>
+      </article>
+    </div>
+    <form class="filters" @submit.prevent="sendChat">
+      <j3w1-text-field>
+        <div class="text-field">
+          <label class="text-field-label" for="chat-text">Message <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+          <div class="text-field-root">
+            <input id="chat-text" aria-describedby="chat-text-message" class="text-field-input" name="message" v-model="text" required maxlength="1000" placeholder="Write a local message…">
+          </div>
+          <p id="chat-text-message" class="text-field-message">✕ Write a message first.</p>
+        </div>
+      </j3w1-text-field>
+      <j3w1-button><button class="button" type="submit">Add message →</button></j3w1-button>
+    </form>
+  </section>
+  <section v-else-if="kind==='calendar'" class="panel">
+    <div class="panel-heading">
+      <h2>September 2026</h2>
+      <span class="muted">Fixed demonstration month</span>
+    </div>
+    <form class="filters" @submit.prevent="addEvent">
+      <j3w1-text-field>
+        <div class="text-field">
+          <label class="text-field-label" for="event-title">Event title <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+          <div class="text-field-root">
+            <input id="event-title" aria-describedby="event-title-message" class="text-field-input" name="title" v-model="eventTitle" required maxlength="80">
+          </div>
+          <p id="event-title-message" class="text-field-message">✕ Enter a title.</p>
+        </div>
+      </j3w1-text-field>
+      <j3w1-text-field>
+        <div class="text-field">
+          <label class="text-field-label" for="event-day">Day <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+          <div class="text-field-root">
+            <input id="event-day" aria-describedby="event-day-message" class="text-field-input text-field-input-numeric" type="number" name="day" v-model="day" min="1" max="30" required>
+          </div>
+          <p id="event-day-message" class="text-field-message">✕ Choose a day from 1 to 30.</p>
+        </div>
+      </j3w1-text-field>
+      <j3w1-button><button class="button" type="submit" data-add-event>Add event</button></j3w1-button>
+    </form>
+    <div class="calendar">
+      <div v-for="date in 30" :key="date" class="calendar-day">
+        <strong>{{ String(date).padStart(2,'0') }}</strong>
+        <p v-for="event in state.events.filter(event=>event.day===date)" :key="event.id" class="calendar-event" :data-event-id="event.id">
+          <span>{{ event.title }}</span>
+          <j3w1-button><button class="button button-destructive" type="button" :aria-label="`Remove event: ${event.title}`" @click="removeEvent(event, $event.currentTarget)">Remove</button></j3w1-button>
+        </p>
+      </div>
+    </div>
+    <div class="actions">
+      <p class="muted">Removed entries can be restored until you leave or reset the demo.</p>
+      <j3w1-button v-if="lastRemoved"><button ref="undoButton" class="button button-secondary" type="button" @click="undoEvent">Undo removal of {{ lastRemoved.title }}</button></j3w1-button>
+    </div>
+    <div v-if="removalNotice" ref="notifications" class="toast-stack calendar-notifications" role="region" aria-label="Notifications" @mouseenter="hoverRemovalNotice(true)" @mouseleave="hoverRemovalNotice(false)" @focusin="pauseRemovalNotice" @focusout="leaveRemovalNotice">
+      <j3w1-toast @j3w1-dismiss.prevent="dismissRemovalNotice">
+        <div class="toast" role="status">
+          <span class="toast-glyph" aria-hidden="true">i</span>
+          <p class="toast-text">{{ lastRemoved.title }} removed.</p>
+          <button class="toast-action" type="button" @click="undoEvent">Undo</button>
+          <button class="toast-close" type="button" aria-label="Dismiss">✕</button>
+        </div>
+      </j3w1-toast>
+    </div>
+  </section>
+  <template v-else-if="kind==='kanban'">
+    <form class="filters" @submit.prevent="addTask">
+      <j3w1-text-field>
+        <div class="text-field">
+          <label class="text-field-label" for="task-name">New task <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+          <div class="text-field-root">
+            <input id="task-name" aria-describedby="task-name-message" class="text-field-input" name="task" v-model="taskName" required maxlength="120" placeholder="What needs to happen?">
+          </div>
+          <p id="task-name-message" class="text-field-message">✕ Describe the task.</p>
+        </div>
+      </j3w1-text-field>
+      <j3w1-button><button class="button" type="submit">Add task</button></j3w1-button>
+    </form>
+    <div class="kanban">
+      <section v-for="column in ['Ready','In progress','Review']" :key="column" class="panel">
+        <p class="eyebrow">{{ state.tasks.filter(task=>task.status===column).length }} TASKS</p>
+        <h2>{{ column }}</h2>
+        <article v-for="task in state.tasks.filter(task=>task.status===column)" :key="task.id" :data-task-id="task.id">
+          <h3>{{ task.name }}</h3>
+          <j3w1-select>
+            <div class="select">
+              <label class="select-label" :for="`task-${task.id}-status`">Move task</label>
+              <div class="select-root">
+                <select :id="`task-${task.id}-status`" class="select-control" name="status" :value="task.status" :aria-label="`Move ${task.name}`" @change="move(task,$event.target.value)">
+                  <option>Ready</option>
+                  <option>In progress</option>
+                  <option>Review</option>
+                </select>
+                <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4"></path></svg>
+              </div>
+            </div>
+          </j3w1-select>
+        </article>
+        <p v-if="!state.tasks.some(task=>task.status===column)" class="muted">No tasks in this column.</p>
+      </section>
+    </div>
+    <p class="muted">Move tasks with the themed choice menu using the pointer or keyboard.</p>
+  </template>
+  <section v-else class="panel empty">
+    <h2>Application not found</h2>
+    <j3w1-link><RouterLink class="link link-standalone" to="/apps/email">Open email →</RouterLink></j3w1-link>
+  </section>
 </template>
diff --git a/apps/demo/src/views/Records.vue b/apps/demo/src/views/Records.vue
index 50224c015..09ddaece0 100644
--- a/apps/demo/src/views/Records.vue
+++ b/apps/demo/src/views/Records.vue
@@ -2,6 +2,11 @@
 import { computed, reactive, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { state, recordKinds, nextId, notify } from '../store.js';
+import '@j3w1/ui/register/description-list';
+import '@j3w1/ui/register/table';
+import '@j3w1/ui/styles/description-list.css';
+import '@j3w1/ui/styles/link.css';
+import '@j3w1/ui/styles/table.css';
 const route = useRoute(), router = useRouter(), query = ref(''), status = ref('all'), direction = ref(1), sort = ref('name'), page = ref(1);
 const kind = computed(() => recordKinds[route.params.kind] ? route.params.kind : 'products');
 const config = computed(() => recordKinds[kind.value]), records = computed(() => state.records[kind.value]);
@@ -12,14 +17,167 @@ const pages = computed(() => Math.max(1,Math.ceil(filtered.value.length / 5))),
 const draft = reactive({ name: '', owner: '', status: 'Ready', amount: 0, note: '' });
 watch(() => route.fullPath, () => { query.value='';status.value='all';page.value=1;Object.assign(draft, selected.value ?? { name: '', owner: 'Jordan Lee', status: 'Ready', amount: 0, note: '' }); }, { immediate:true });
 watch([query,status], () => { page.value=1; });
+const ariaSort = column => sort.value === column ? (direction.value === 1 ? 'ascending' : 'descending') : 'none';
 function order(column) { if(sort.value===column)direction.value*=-1;else {sort.value=column;direction.value=1;} }
 function save() { const row = { ...draft, amount:Number(draft.amount), id:selected.value?.id ?? nextId(records.value) }; if(selected.value)Object.assign(selected.value,row);else records.value.push(row); notify(`${config.value.singular} saved in this local demo.`);router.push(`/records/${kind.value}/${row.id}`); }
 </script>
 <template>
-  <header class="view-heading"><div><p class="eyebrow">WORKSPACE / RECORDS</p><h1 tabindex="-1">{{ editing ? (selected ? 'Edit ' : 'New ') + config.singular.toLowerCase() : selected ? selected.name : config.title }}</h1><p>{{ editing ? 'Update the local record, then review the result.' : 'Search, inspect and edit synthetic application records.' }}</p></div><RouterLink v-if="!route.params.id" :to="`/records/${kind}/new`">+ New {{ config.singular.toLowerCase() }}</RouterLink><RouterLink v-else :to="`/records/${kind}`">← All {{ config.title.toLowerCase() }}</RouterLink></header>
-  <form v-if="editing" class="panel form-grid" @submit.prevent="save"><j3w1-text-field><div class="text-field"><label class="text-field-label" for="record-name">{{ config.singular }} name</label><input class="text-field-input" id="record-name" name="name" v-model="draft.name" required maxlength="120"></div></j3w1-text-field><j3w1-text-field><div class="text-field"><label class="text-field-label" for="record-owner">Owner</label><input class="text-field-input" id="record-owner" name="owner" v-model="draft.owner" required></div></j3w1-text-field><j3w1-select><div class="select"><label class="select-label" for="record-status">Status</label><select class="select-control" id="record-status" v-model="draft.status" name="status"><option>Ready</option><option>In progress</option><option>Review</option></select></div></j3w1-select><label>{{ config.metric }} {{ config.unit }}<input v-model="draft.amount" type="number" name="amount" min="0" :step="kind==='users' ? 1 : .01" required></label><j3w1-textarea class="wide"><div class="textarea"><label class="textarea-label" for="record-note">Notes</label><textarea class="textarea-input" id="record-note" name="note" v-model="draft.note" rows="4"></textarea></div></j3w1-textarea><div class="actions wide"><j3w1-button><button class="button" type="submit">Save {{ config.singular.toLowerCase() }}</button></j3w1-button><RouterLink :to="selected ? `/records/${kind}/${selected.id}` : `/records/${kind}`">Cancel</RouterLink></div></form>
-  <section v-else-if="selected" class="panel"><div class="panel-heading"><h2>{{ config.singular }} / {{ selected.id }}</h2><RouterLink :to="`/records/${kind}/${selected.id}/edit`">Edit record →</RouterLink></div><dl class="record-details"><dt>Name</dt><dd>{{ selected.name }}</dd><dt>Owner</dt><dd>{{ selected.owner }}</dd><dt>Status</dt><dd>{{ selected.status }}</dd><dt>{{ config.metric }}</dt><dd>{{ config.unit }}{{ selected.amount.toLocaleString() }}</dd><dt>Notes</dt><dd>{{ selected.note }}</dd></dl><template v-if="kind==='invoices'"><h3>Invoice preview</h3><p>Reference INV-{{ selected.id }} · sample line item · {{ config.unit }}{{ selected.amount.toFixed(2) }}</p><p class="muted">No payment processing, tax calculation or external delivery is performed.</p></template></section>
-  <section v-else-if="route.params.id" class="panel empty"><h2>Record not found</h2><p>This record does not exist in the current local state.</p></section>
-  <section v-else class="panel"><div class="filters"><label>Search {{ config.title.toLowerCase() }}<input type="search" v-model="query" placeholder="Name, owner or ID…"></label><label>Status<select v-model="status"><option value="all">All statuses</option><option>Ready</option><option>In progress</option><option>Review</option></select></label></div><div class="table-scroll" tabindex="0" role="region" :aria-label="`${config.title} table`"><table class="records-table"><thead><tr><th scope="col" :aria-sort="sort==='name' ? direction===1?'ascending':'descending' : 'none'"><button type="button" @click="order('name')">Name ↕</button></th><th scope="col">Owner</th><th scope="col">Status</th><th scope="col" :aria-sort="sort==='amount' ? direction===1?'ascending':'descending' : 'none'"><button type="button" @click="order('amount')">{{ config.metric }} ↕</button></th><th scope="col">Action</th></tr></thead><tbody><tr v-for="row in visible" :key="row.id"><td><RouterLink :to="`/records/${kind}/${row.id}`">{{ row.name }}</RouterLink><small class="block muted">{{ config.singular }} / {{ row.id }}</small></td><td>{{ row.owner }}</td><td :class="['status',row.status.toLowerCase()]">{{ row.status }}</td><td>{{ config.unit }}{{ row.amount.toLocaleString() }}</td><td><RouterLink :to="`/records/${kind}/${row.id}/edit`">Edit <span class="muted">{{ row.id }}</span></RouterLink></td></tr><tr v-if="!visible.length"><td colspan="5" class="empty">No matching records. Clear the search or choose another status.</td></tr></tbody></table></div><div class="panel-heading"><p role="status">{{ filtered.length }} records · Page {{ page }} of {{ pages }}</p><div class="actions"><button type="button" :disabled="page===1" @click="page--">← Previous</button><button type="button" :disabled="page===pages" @click="page++">Next →</button></div></div></section>
+  <header class="view-heading">
+    <div>
+      <p class="eyebrow">WORKSPACE / RECORDS</p>
+      <h1 tabindex="-1">{{ editing ? (selected ? 'Edit ' : 'New ') + config.singular.toLowerCase() : selected ? selected.name : config.title }}</h1>
+      <p>{{ editing ? 'Update the local record, then review the result.' : 'Search, inspect and edit synthetic application records.' }}</p>
+    </div>
+    <j3w1-link>
+      <RouterLink v-if="!route.params.id" class="link link-standalone" :to="`/records/${kind}/new`">+ New {{ config.singular.toLowerCase() }}</RouterLink>
+      <RouterLink v-else class="link link-standalone" :to="`/records/${kind}`">← All {{ config.title.toLowerCase() }}</RouterLink>
+    </j3w1-link>
+  </header>
+  <form v-if="editing" class="panel form-grid" @submit.prevent="save">
+    <j3w1-text-field>
+      <div class="text-field">
+        <label class="text-field-label" for="record-name">{{ config.singular }} name <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+        <div class="text-field-root">
+          <input id="record-name" aria-describedby="record-name-message" class="text-field-input" name="name" v-model="draft.name" required maxlength="120">
+        </div>
+        <p id="record-name-message" class="text-field-message">✕ Enter a name.</p>
+      </div>
+    </j3w1-text-field>
+    <j3w1-text-field>
+      <div class="text-field">
+        <label class="text-field-label" for="record-owner">Owner <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+        <div class="text-field-root">
+          <input id="record-owner" aria-describedby="record-owner-message" class="text-field-input" name="owner" v-model="draft.owner" required>
+        </div>
+        <p id="record-owner-message" class="text-field-message">✕ Enter an owner.</p>
+      </div>
+    </j3w1-text-field>
+    <j3w1-select>
+      <div class="select">
+        <label class="select-label" for="record-status">Status</label>
+        <div class="select-root">
+          <select id="record-status" class="select-control" name="status" v-model="draft.status">
+            <option>Ready</option>
+            <option>In progress</option>
+            <option>Review</option>
+          </select>
+          <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4"></path></svg>
+        </div>
+      </div>
+    </j3w1-select>
+    <j3w1-text-field>
+      <div class="text-field">
+        <label class="text-field-label" for="record-amount">{{ config.metric }} {{ config.unit }} <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
+        <div class="text-field-root">
+          <input id="record-amount" aria-describedby="record-amount-message" class="text-field-input text-field-input-numeric" type="number" name="amount" v-model="draft.amount" min="0" :step="kind==='users' ? 1 : .01" required>
+        </div>
+        <p id="record-amount-message" class="text-field-message">✕ Enter a value of 0 or more.</p>
+      </div>
+    </j3w1-text-field>
+    <j3w1-textarea class="wide">
+      <div class="textarea">
+        <label class="textarea-label" for="record-note">Notes</label>
+        <div class="textarea-root">
+          <textarea id="record-note" class="textarea-input" name="note" v-model="draft.note" rows="4"></textarea>
+        </div>
+      </div>
+    </j3w1-textarea>
+    <div class="actions wide">
+      <j3w1-button><button class="button" type="submit">Save {{ config.singular.toLowerCase() }}</button></j3w1-button>
+      <j3w1-link><RouterLink class="link link-standalone" :to="selected ? `/records/${kind}/${selected.id}` : `/records/${kind}`">Cancel</RouterLink></j3w1-link>
+    </div>
+  </form>
+  <section v-else-if="selected" class="panel">
+    <div class="panel-heading">
+      <h2>{{ config.singular }} / {{ selected.id }}</h2>
+      <j3w1-link><RouterLink class="link link-standalone" :to="`/records/${kind}/${selected.id}/edit`">Edit record →</RouterLink></j3w1-link>
+    </div>
+    <j3w1-description-list>
+      <dl class="description-list">
+        <div><dt>Name</dt><dd>{{ selected.name }}</dd></div>
+        <div><dt>Owner</dt><dd>{{ selected.owner }}</dd></div>
+        <div><dt>Status</dt><dd>{{ selected.status }}</dd></div>
+        <div><dt>{{ config.metric }}</dt><dd>{{ config.unit }}{{ selected.amount.toLocaleString() }}</dd></div>
+        <div><dt>Notes</dt><dd>{{ selected.note }}</dd></div>
+      </dl>
+    </j3w1-description-list>
+    <template v-if="kind==='invoices'">
+      <h3>Invoice preview</h3>
+      <p>Reference INV-{{ selected.id }} · sample line item · {{ config.unit }}{{ selected.amount.toFixed(2) }}</p>
+      <p class="muted">No payment processing, tax calculation or external delivery is performed.</p>
+    </template>
+  </section>
+  <section v-else-if="route.params.id" class="panel empty">
+    <h2>Record not found</h2>
+    <p>This record does not exist in the current local state.</p>
+  </section>
+  <section v-else class="panel">
+    <div class="filters">
+      <j3w1-text-field>
+        <div class="text-field">
+          <label class="text-field-label" for="records-search">Search {{ config.title.toLowerCase() }}</label>
+          <div class="text-field-root">
+            <input id="records-search" class="text-field-input" type="search" name="query" v-model="query" placeholder="Name, owner or ID…">
+          </div>
+        </div>
+      </j3w1-text-field>
+      <j3w1-select>
+        <div class="select">
+          <label class="select-label" for="records-status">Status</label>
+          <div class="select-root">
+            <select id="records-status" class="select-control" name="status" v-model="status">
+              <option value="all">All statuses</option>
+              <option>Ready</option>
+              <option>In progress</option>
+              <option>Review</option>
+            </select>
+            <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4"></path></svg>
+          </div>
+        </div>
+      </j3w1-select>
+    </div>
+    <j3w1-table>
+      <div class="table-scroll" tabindex="0" role="region" :aria-label="`${config.title} table`">
+        <table class="table">
+          <thead class="table-head">
+            <tr>
+              <th class="table-header" scope="col" :aria-sort="ariaSort('name')">
+                <button class="table-sort" type="button" @click.stop="order('name')">Name<span class="table-sort-glyph" aria-hidden="true">▲</span></button>
+              </th>
+              <th class="table-header" scope="col">Owner</th>
+              <th class="table-header" scope="col">Status</th>
+              <th class="table-header table-header-numeric" scope="col" :aria-sort="ariaSort('amount')">
+                <button class="table-sort" type="button" @click.stop="order('amount')">{{ config.metric }}<span class="table-sort-glyph" aria-hidden="true">▲</span></button>
+              </th>
+              <th class="table-header" scope="col">Action</th>
+            </tr>
+          </thead>
+          <tbody class="table-body">
+            <tr v-for="row in visible" :key="row.id" class="table-row">
+              <td class="table-cell">
+                <j3w1-link><RouterLink class="link" :to="`/records/${kind}/${row.id}`">{{ row.name }}</RouterLink></j3w1-link>
+                <small class="block muted">{{ config.singular }} / {{ row.id }}</small>
+              </td>
+              <td class="table-cell">{{ row.owner }}</td>
+              <td class="table-cell"><span :class="['status', row.status.toLowerCase()]">{{ row.status }}</span></td>
+              <td class="table-cell table-cell-numeric">{{ config.unit }}{{ row.amount.toLocaleString() }}</td>
+              <td class="table-cell">
+                <j3w1-link><RouterLink class="link" :to="`/records/${kind}/${row.id}/edit`">Edit <span class="muted">{{ row.id }}</span></RouterLink></j3w1-link>
+              </td>
+            </tr>
+            <tr v-if="!visible.length" class="table-empty">
+              <td class="table-empty-cell" colspan="5">No matching records. Clear the search or choose another status.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </j3w1-table>
+    <div class="pager">
+      <p role="status">{{ filtered.length }} records · Page {{ page }} of {{ pages }}</p>
+      <div class="actions">
+        <j3w1-button><button class="button button-secondary" type="button" :disabled="page===1" @click="page--">← Previous</button></j3w1-button>
+        <j3w1-button><button class="button button-secondary" type="button" :disabled="page===pages" @click="page++">Next →</button></j3w1-button>
+      </div>
+    </div>
+  </section>
 </template>
-<style scoped>.record-details { display:grid;grid-template-columns:minmax(100px,1fr) 3fr;gap:16px;margin-block:28px; }.record-details dt { color:var(--color-text-muted); }.record-details dd { margin:0;overflow-wrap:anywhere; }</style>
diff --git a/apps/demo/vite.config.js b/apps/demo/vite.config.js
index 1aa76b7c6..fcfd0505c 100644
--- a/apps/demo/vite.config.js
+++ b/apps/demo/vite.config.js
@@ -1,3 +1,4 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-export default defineConfig({ base: "/theme/demo/", plugins: [vue({ template: { compilerOptions: { isCustomElement: tag => tag.startsWith("j3w1-") } } })], build: { target: "es2022", sourcemap: false } });
+import manifest from "../../theme.json" with { type: "json" };
+export default defineConfig({ base: `${manifest.site.base.replace(/\/$/, "")}/demo/`, plugins: [vue({ template: { compilerOptions: { isCustomElement: tag => tag.startsWith("j3w1-") } } })], build: { target: "es2022", sourcemap: false } });
diff --git a/astro.config.mjs b/astro.config.mjs
index 20a47ec48..6b483dd80 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,4 +1,4 @@
-// The site is one static page deployed under /theme/ on GitHub Pages. Every
+// The site is a static portal deployed under /theme/ on GitHub Pages. Every
 // value on the page comes from tokens/ and spec/; Astro owns no truth. See
 // spec/decisions.md D-010 and D-012, and tests/dist/ for the base-path gate.
 
diff --git a/docs/dependabot-bumps.md b/docs/dependabot-bumps.md
index fb2e45f9c..49523da5c 100644
--- a/docs/dependabot-bumps.md
+++ b/docs/dependabot-bumps.md
@@ -1,11 +1,11 @@
 # Reviewing Dependabot npm bumps
 
-For a Dependabot PR that changes `package.json`, a workspace `package.json`, or `package-lock.json`, the read-only `dependabot-refresh` job checks out the **PR head SHA**, installs locked dependencies, runs `npm run generate` and `npm run check`, and offers a patch if committed generated files changed. It does not commit to the branch. The normal selected checks and `release-gate` still decide whether the bump is compatible. A patch is a proposed change, not execution evidence or a passing check.
+For a Dependabot PR that changes `package.json`, a workspace `package.json`, or `package-lock.json`, the read-only `dependabot-refresh` job checks out the **PR head SHA**, installs locked dependencies, runs `npm run generate` and `npm run check`, and offers a patch if committed generated files changed. It never commits to the branch. A patch is a proposed change, not execution evidence or a passing check: the selected checks and `release-gate` still decide whether the bump is compatible.
 
-1. Read the job summary. **No generated drift** means there is no artifact to apply; the required checks must still pass. A failed install, generation, generated-file check, or unexpected modification needs investigation and produces no patch. An API or behavior failure in selected checks needs a compatibility fix; never apply a patch to hide that failure.
-2. When the summary names `dependabot-generated-patch`, download that artifact from the PR's workflow run (or run `gh run download <run-id> -n dependabot-generated-patch -D .cache/dependabot-download`). Extract it if downloading from the browser; the file is `dependabot-refresh.patch`. The artifact expires after seven days.
-3. Check out the PR branch (`gh pr checkout <pr-number>`). Require `git status --short` to be empty and compare `git rev-parse HEAD` with the **exact PR head SHA in the job summary**. If they differ, use a newer run's patch; do not apply an old patch to a moved head.
-4. From the repository root, run `git apply --check .cache/dependabot-download/dependabot-refresh.patch` and then `git apply .cache/dependabot-download/dependabot-refresh.patch` (use the actual path where you downloaded it). Review `git diff --check`, `git diff --stat` and `git diff` including additions and removals. Never apply blindly or commit unrelated files.
-5. With Node 24, run `npm ci`, `npm run check` (the applied patch should already be current), `npm run generate`, then `npm run validate`, `npm run check` and the checks selected by `node scripts/ci/select.mjs --event pull_request --base origin/main --head HEAD`. For a dependency bump this normally means the full unit, build, browser and consumer gates; `npm run test:all` is the local full-suite command after browser dependencies are installed. Commit only the reviewed generated changes and any separately justified compatibility fix to the PR branch if you have permission to push. Otherwise arrange a reviewable follow-up change; do not give PR code a write token.
+1. Read the job summary. **No generated drift** means there is nothing to apply; the required checks must still pass. A failed install, generation or generated-file check, or an unexpected modification, needs investigation and produces no patch. An API or behavior failure in the selected checks needs a compatibility fix; never apply a patch to hide it.
+2. When the summary names `dependabot-generated-patch`, download that artifact from the PR's workflow run (or `gh run download <run-id> -n dependabot-generated-patch -D .cache/dependabot-download`) and, if you downloaded it from the browser, extract `dependabot-refresh.patch`. The artifact expires after seven days.
+3. Check out the PR branch (`gh pr checkout <pr-number>`). `git status --short` must be empty and `git rev-parse HEAD` must equal the **exact PR head SHA in the job summary**; if they differ, use a newer run's patch.
+4. From the repository root, run `git apply --check .cache/dependabot-download/dependabot-refresh.patch`, then `git apply .cache/dependabot-download/dependabot-refresh.patch` (use your actual download path). Review `git diff --check`, `git diff --stat` and the whole `git diff`. Never apply blindly or commit unrelated files.
+5. With Node 24, run `npm ci`, `npm run check` (the applied patch should already be current), `npm run generate`, then `npm run validate`, `npm run check` and the checks selected by `node scripts/ci/select.mjs --event pull_request --base origin/main --head HEAD`; for a dependency bump that is normally the full unit, build, browser and consumer gates (`npm run test:all` locally, after browser dependencies are installed). Commit only the reviewed generated changes and any separately justified compatibility fix to the PR branch if you may push; otherwise arrange a reviewable follow-up change. Never give PR code a write token.
 
-GitHub Actions-only bumps do not generate a patch; ordinary CI still evaluates them. If regeneration or the compatibility suite fails, do not treat an artifact, a successful informational job, or a subset of checks as a green `release-gate`.
\ No newline at end of file
+GitHub Actions-only bumps generate no patch; ordinary CI still evaluates them. An artifact, a successful informational job or a subset of checks is never a green `release-gate`.
diff --git a/docs/design-mode.md b/docs/design-mode.md
index 582cb387b..c23cc8186 100644
--- a/docs/design-mode.md
+++ b/docs/design-mode.md
@@ -2,16 +2,12 @@
 
 Design mode is the local loop for changing how the theme looks. One screen
 shows the site twice: **before** is a frozen production build of where the
-session started, **after** is the live dev server. You judge a change against
-what it replaces before you commit it.
-
-It is a working tool, not a gate. Nothing it produces is evidence, and it
-approves nothing.
+session started, **after** is the live dev server, so you judge a change
+against what it replaces before you commit it. It is a working tool, not a
+gate: nothing it produces is evidence, and it approves nothing.
 
 ## Run it
 
-The repository is an npm workspace. Run design mode through npm:
-
 ```
 npm ci
 npm run design:doctor   # optional: checks the prerequisites below and stops
@@ -20,52 +16,35 @@ npm run design
 
 Then open `http://localhost:4400/` (the default). Stop with Ctrl+C.
 
-To use another port, start with `DESIGN_PORT=4500 npm run design`. The frozen
-side, the live side and the dev server take the next three ports;
-`DESIGN_DEV_PORT` moves only the last.
-
-The three servers listen first, so the screen answers at once. The first entry
-then builds the baseline (`npm run build`) and starts the dev server. Its first
-content sync can take about a minute on a cold cache. The status line under the
-controls names the running step. Until the dev server is ready, the after frame
-shows the frozen build; both frames reload when it is.
-
-Later entries reuse the baseline whenever `.cache/design-mode/baseline/` and its
-`baseline.json` exist, even if `HEAD` has moved. This is deliberate: a session
-commits a checkpoint after each accepted change, and rebuilding "before" each
-time would destroy what you compare against. The before label names the anchor
-commit, plus "working tree" if the tree was dirty then.
-
-`npm run design:baseline`, or the **Re-anchor before** button, re-anchors the
-frozen side to the working tree. Use it to chain comparisons across a long
-session.
-
-### Prerequisites
-
-`npm run design:doctor` checks each item and names the fix for a failure.
-`npm run design` runs the same check before it starts.
-
-- Node 24 (`engines` in `package.json`).
-- `npm ci` has run, so Astro and Vite resolve.
-- `packages/ui/dist` holds the package the screen and the live side load
-  (`index.json`, `styles/controls.css`, `enhance/choice.js`). It is committed;
-  `npm run generate` rebuilds it.
+- `DESIGN_PORT=4500 npm run design` uses another port. The frozen side, the
+  live side and the dev server take the next three ports; `DESIGN_DEV_PORT`
+  moves only the last.
+- The first entry builds the baseline (`npm run build`) and starts the dev
+  server; its first content sync can take about a minute on a cold cache. The
+  status line names the running step, and the after frame shows the frozen
+  build until the dev server is ready.
+- Later entries reuse the baseline whenever `.cache/design-mode/baseline/` and
+  its `baseline.json` exist, even if `HEAD` has moved, so a checkpoint commit
+  does not destroy what you compare against. The before label names the anchor
+  commit, plus "working tree" if the tree was dirty then.
+- `npm run design:baseline`, or the **Re-anchor before** button, re-anchors the
+  frozen side to the working tree, to chain comparisons across a session.
+
+**Prerequisites** (`npm run design:doctor` checks each and names the fix;
+`npm run design` runs the same check first):
+
+- Node 24 (`engines` in `package.json`), and `npm ci` has run.
+- `packages/ui/dist` holds the package (`index.json`, `styles/controls.css`,
+  `enhance/choice.js`); it is committed and `npm run generate` rebuilds it.
 - `site/src/styles/tokens.generated.css` exists (`npm run generate`).
-- git answers inside the checkout; "before" records the commit it came from.
-- The four ports are free.
-- npm answers, and `.cache/` is writable.
-
-### Package manager
-
-`package.json` declares `"packageManager": "npm@…"`, so pnpm and Yarn refuse to
-install or run scripts here. That keeps a second lockfile away from
-`package-lock.json`. The baseline build always runs npm, because the workspace
-layout and `scripts/pack-ui.mjs` (`npm pack --workspace … --json`) are
-npm-specific. Started through `npm run`, it runs that same npm directly (no
-`PATH` lookup, no shell). Started another way, such as
-`node scripts/design-mode.mjs`, it runs `npm` from `PATH` and says so.
+- git answers inside the checkout; the four ports are free; npm answers and
+  `.cache/` is writable.
 
-Astro's telemetry is disabled for design mode and the processes it starts.
+Run it through npm. `package.json` declares `"packageManager": "npm@…"`, so
+pnpm and Yarn refuse to run here, and the baseline build always uses npm.
+Started another way, such as `node scripts/design-mode.mjs`, it runs `npm` from
+`PATH` and says so. Astro's telemetry is disabled for design mode and the
+processes it starts.
 
 ## What the two sides are
 
@@ -74,70 +53,45 @@ Astro's telemetry is disabled for design mode and the processes it starts.
 | before | `.cache/design-mode/baseline/`, a frozen `npm run build` | Production-faithful: real base path, inline hex previews, `ui/` and `demo/` present |
 | after | the dev server, proxied | Vite HMR, so an edit repaints immediately |
 
-The sides use separate origins, so every link, asset and runtime fetch resolves
-exactly as on Pages. Cross-origin frames cannot read each other, so each side
-has a small injected agent that relays its scroll ratio and route.
-
-Every Astro integration here hooks `astro:build:done`. Under the dev server, the
-`ui/`, `demo/`, `exports/` and `downloads/` trees are missing and the inline hex
-previews (D-014) are not applied. Both would look like changes the session did
-not make, so the live proxy fixes them:
-
-- It applies the build's decoration, with the same
-  `decorateHexHtml`/`tokenColorIndex` pair and route list.
-- It falls back to the frozen build for anything the dev server cannot answer.
-  A fallback response carries `x-design-mode: baseline-fallback`.
-
-`astro dev` alone cannot start this project. Its CLI gives the forked dev server
-30 seconds to report ready, and syncing 67 component collections takes longer on
-a cold cache. Design mode uses Astro's JS API, which has no such deadline.
-
-## Controls
-
-The screen uses the theme it changes. `enhance/choice` from `packages/ui`
-renders the route, width and scale selects as the j3w1 combobox. The comparison
-server serves `packages/ui/dist` under `/ui/`, as
-`site/integrations/copy-exports.mjs` does under `dist/ui`.
-
-The route picker must not be an `<input list>`. Chrome gives one
-`appearance: menulist-button`: it drops the author background and colour, draws
-the popup as OS chrome placed by the browser, and filters the options so the
-rest of the list disappears after a selection. A `<datalist>` popup cannot be
-styled at all. For the same reason, the text field beside it has no `list`
-attribute.
+The sides use separate origins, so links, assets and fetches resolve as on
+Pages; a small injected agent relays each side's scroll ratio and route. Under
+the dev server the `ui/`, `demo/`, `exports/` and `downloads/` trees and the
+inline hex previews (D-014) are missing, so the live proxy applies the build's
+decoration (`decorateHexHtml`/`tokenColorIndex` and the same route list) and
+falls back to the frozen build for anything the dev server cannot answer, with
+the header `x-design-mode: baseline-fallback`. Design mode starts the dev
+server through Astro's JS API because `astro dev` gives it only 30 seconds to
+report ready.
+
+The route, width and scale selects are the j3w1 combobox from `packages/ui`,
+served under `/ui/`. The route picker must not be an `<input list>`, and the
+text field beside it has no `list` attribute: Chrome draws that popup as OS
+chrome that drops the author colours and filters the options, and a
+`<datalist>` popup cannot be styled at all.
 
 ## Comparison modes
 
-- **Side by side** — both viewports at their true CSS widths, scroll synced.
-- **Swipe** — one clipped over the other at an adjustable split; drag the seam
-  or use the slider.
-- **Blend** — after faded over before; ghosting shows a shift of a few pixels
-  that a static pair hides.
-- **Blink** — the two alternate in place, so any shift reads as a jump.
+- **Side by side**: both viewports at their true CSS widths, scroll synced.
+- **Swipe**: one clipped over the other; drag the seam or use the slider.
+- **Blend**: after faded over before; ghosting shows a shift of a few pixels.
+- **Blink**: the two alternate in place, so any shift reads as a jump.
 
 Widths match the browser suite's gates: 1440×1000 desktop, 640×500 for 200%
-zoom, 360×740 narrow. They are real CSS widths, not scaled screenshots. The
-scale control only shrinks the result to fit; it does not emulate device pixel
-ratio.
+zoom, 360×740 narrow. They are real CSS widths; the scale control only shrinks
+the result to fit and does not emulate device pixel ratio.
 
 ## Token changes
 
-`site/src/styles/tokens.generated.css` is generated; never hand-edit it. To
-change a colour, edit `tokens/`. Design mode watches `tokens/` and runs the real
-tokens generator, which rewrites that stylesheet, `exports/tokens.resolved.json`
-and `exports/tokens.css`. A shortcut that wrote only the stylesheet would repaint
-a swatch while the page still printed the old hex, because printed hexes come
-from the exports.
-
-A DTCG colour carries both `components` and `hex`, and the resolver rejects it if
-they disagree. Write both, with `components` as each channel ÷ 255.
+`site/src/styles/tokens.generated.css` is generated; to change a colour, edit
+`tokens/`. Design mode watches `tokens/` and runs the real tokens generator,
+which rewrites that stylesheet, `exports/tokens.resolved.json` and
+`exports/tokens.css` (printed hexes come from the exports). A DTCG colour
+carries both `components` and `hex`, and the resolver rejects it if they
+disagree: write both, with `components` as each channel ÷ 255.
 
-The watcher skips validation and the other fourteen generators. At the end of
-the session:
-
-1. Run `npm run generate`. It brings the contrast report, the usage index,
-   `schemas/json/`, the README blocks and the digests back into line.
-2. Run `npm run check` to prove it.
+The watcher skips validation and the other generators. At the end of the
+session run `npm run generate` (contrast report, usage index, `schemas/json/`,
+README blocks, digests), then `npm run check`.
 
 ## The session ledger
 
@@ -149,33 +103,25 @@ node scripts/design-mode.mjs --note "warm the panel surface" --class token --fil
 ```
 
 `--class` is one of `page-local`, `token`, `spec-rule`, `component` or
-`copy/identity`. The class matters: the site is confirmation-only
-(`theme.json`), so anything that is not page layout belongs in `tokens/` or
-`spec/` and must be reconciled there before the work can merge.
-
-`npm run design:exit` prints the session by class and counts the changes that
-still need reconciling.
+`copy/identity`. The site is confirmation-only (`theme.json`), so anything that
+is not page layout belongs in `tokens/` or `spec/` and must be reconciled there
+before the work can merge. `npm run design:exit` prints the session by class
+and counts the changes that still need reconciling.
 
 ## Where the code is
 
-- `scripts/design-mode.mjs` wires the servers, live proxy, HMR upgrade, watchers
-  and regeneration.
-- `scripts/tooling/design-mode.mjs` holds the units that need no server, tested
-  by `tests/design-mode.test.js`: port derivation, route mapping, the frame
-  agent, baseline metadata, route discovery, the ledger and its report, the
-  package-manager choice and the prerequisite check.
-- Neither file is under `scripts/lib`, so changing design mode does not change
-  the package identities `scripts/build-ui.mjs` hashes.
-- The live side's route list comes from `scripts/lib/hex-routes.mjs`, the list
-  the build's hex-swatch integration reads.
+`scripts/design-mode.mjs` wires the servers, proxy, watchers and regeneration.
+`scripts/tooling/design-mode.mjs` holds the server-free units tested by
+`tests/design-mode.test.js`. Neither is under `scripts/lib`, so changing design
+mode does not change the package identities `scripts/build-ui.mjs` hashes. The
+live route list comes from `scripts/lib/hex-routes.mjs`, the list the build's
+hex-swatch integration reads.
 
 ## Limits
 
-- The ledger, baseline and log live in ignored `.cache/`. None of it is evidence
-  or published.
-- Design mode does not run the check loop or validate, and it decides nothing.
-  A new colour, a change to an approved value, a new or renamed role, or any
-  change to the focus, selection or contrast rules still needs a decision entry
-  in `spec/decisions.md`. Only the owner changes a status.
+- The ledger, baseline and log live in ignored `.cache/`; none of it is
+  evidence or published.
+- Design mode does not run the check loop or validate. Changes that need a
+  decision entry (AGENTS.md) still need one in `spec/decisions.md`.
 - Automated rendering in two frames is not a manual keyboard or screen-reader
   result.
diff --git a/docs/phase6-delivery.md b/docs/phase6-delivery.md
index 9b0e530cd..378e5b58f 100644
--- a/docs/phase6-delivery.md
+++ b/docs/phase6-delivery.md
@@ -1,194 +1,82 @@
-# Phase 6 delivery contract and continuation
-
-This records the owner-directed Phase 6 scope and what was built. The owner
-selected True Black / Rose (candidate I); D-023 records it. All 67 inventory
-entries have canonical contracts, official implementations, typed APIs and
-complete copy distributions. The static portal and the full Vue showcase are
-built. Acceptance comes from the separate execution records for the exact
-artifact and protocol; this document does not accept a release by itself.
-
-During the implementation preview, the owner asked for red graphs, distinct
-table column-header and body colors, and a stronger title, subtitle and
-navigation-group hierarchy. These use existing approved roles: red
-`color.chart.series-2`, bright rose column headers, regular rose body values,
-near-white page titles, bright section and group headings, muted supporting
-text. They add no colors and keep the True Black / Rose foundation. The later
-request for a separate link color is D-024: strong red links, persistent
-underlines, near-white hover text.
-
-The selected foundation passed source validation, generation and drift checks,
-105 source tests, the static build, nine distribution tests, and the configured
-browser suite (204 passed, 124 intentionally skipped). Verification-report
-generation kept all 1,866 specimen files; its source and browser checks passed
-(six browser passes, three intentional skips). This is automated foundation
-evidence, not package acceptance or a manual accessibility pass.
-
-## Primary success criterion
-
-An agent building another application can discover, select, install or copy,
-use and verify j3w1 elements, components and compositions from pinned
-artifacts. It never scrapes page DOM, reads values from screenshots, rebuilds
-missing behavior or guesses which CSS and dependencies make a snippet work.
-
-Design meaning stays in `tokens/` and `spec/`; the package implements it, and
-copy bundles, the portal and the Vue application consume that implementation.
-None of them is a second specification (see `docs/ui-architecture.md`).
-
-## Gate order
-
-1. **6A:** Current plus exactly three local candidates: matched interfaces,
-   state board, numeric report, real browser evidence and owner selection.
-2. **6B:** Make the selected foundation canonical in tokens and spec, record the
-   owner's decision, keep history, regenerate and validate exports.
-3. **6C:** Productize all 67 baseline inventory entries, including R2/L; generate
-   the package, standalone distributions and machine implementation mapping.
-4. **6D:** Build the multi-page portal and the complete Vue showcase with
-   consumption docs, live implementation examples and agent-kit entry points.
-5. **6E:** Verify external consumers, publish evidence, prepare tarballs and
-   migration docs, then deploy the tested artifacts. npm publication stays an
-   owner release action.
-
-The owner must select between 6A and 6B. Show a requested hybrid as one combined
-candidate first. Never infer approval from a recommendation or green checks.
-Identity changes outside the selected foundation go back to the owner.
-
-## Official package and copy distributions
-
-Create the publishable `@j3w1/ui` npm workspace package: modular ESM, typed
-public APIs, separate class and registration exports, per-component imports, safe
-repeated registration, semantic token CSS and documented styling extension
-points. Native semantics, real forms, properties, attributes, slots and events
-are the default vocabulary. Choose light or Shadow DOM per component from its
-semantics, static content, composition and real interoperability.
-
-Every inventory entry must map to an official consumable implementation. Deferred
-entries get complete behavior contracts first. Patterns and developer views get
-bounded APIs that fit their meaning. The form builder stays the existing bounded
-model, not an application framework.
-
-Each component or pattern has three integration routes:
-
-| Mode | Required deliverable |
-| --- | --- |
-| Package | Exact install, import, registration, CSS, markup, event/property binding and framework example |
-| Copy | All required markup, CSS, behavior, dependencies, notices and integration instructions in a standalone bundle |
-| Mapping | Existing compact canonical contract and portability/deviation workflow for incompatible or native hosts |
-
-Prefer package mode when compatible; copy mode is first-class. Multi-file
-widgets must include their transitive dependencies and must never be called a
-self-contained snippet. Reuse the maintained implementation and generators; do
-not fork behavior for the site, recipes or framework examples. Validate multiple
-instances and coexistence with host styles.
-
-Add an implementation manifest to the deterministic machine exports: component
-ID, canonical version, package and export identity, recipe path, framework
-examples, variants and states, token dependencies. Keep run evidence in separate
-artifacts with freshness identities. Show implementation, package, copyability,
-showcase and verification as separate facts.
-
-Add target framework and consumption mode to discovery indexes and task kits. A
-small task gets only the selected implementations, their complete dependency
-closure and the shared rules. Keep existing integration and lock formats
-working; record official package use apart from custom mappings. Agents pin
-one immutable revision and keep the required eligibility and decision
-disclosures.
-
-## Portal and documentation
-
-A short design-system orientation page replaces the long homepage. It still
-reads as a UI theme specification, with exact values, state rules and evidence.
-The full reference moves to `/theme/reference/`, with tested migration of the
-old anchors. Core routes: foundations, components, patterns, tokens, tools,
-implement, agents, ports and releases. Keep essential and normative content in
-the first static HTML; ordinary pages must load no catalogue-wide JS.
-
-Every component page combines a live official implementation with anatomy,
-tokens, states, variants, interaction and keyboard rules, accessibility,
-evidence, responsive behavior, generated API tables and minimal runnable usage.
-It offers package instructions, complete copy files, framework examples, machine
-contract links, an agent-kit action and links to realistic showcase compositions.
-
-Document installation, registration, per-component loading, font fallback,
-density, attributes versus properties, custom events, native slots, forms,
-validation, focus, lifecycle cleanup, allowed customization, browser limits,
-troubleshooting, upgrades, pinning and migration. Code in the docs must come from
-maintained examples run against the packed artifact in clean fixtures.
-
-The command palette is an official component used by the portal: a compact,
-square, floating Unix utility panel with one prompt, dense vertical rows, a
-category column, the canonical selection and focus roles, and local
-deterministic search. The later issue comment replaces the original full-width
-top-bar direction.
-
-## Full Vue showcase
-
-Use Vue 3 JavaScript single-file components, Vite and Vue Router to consume the
-framework-agnostic package. Do not build a parallel Vue-native component
-library. All public code, content, assets and data are written independently.
-
-- Analytics, CRM, commerce, academy and logistics dashboards.
-- Product, order, customer, user and invoice list/detail/edit workflows.
-- Email, chat, calendar and kanban layouts with bounded local actions.
-- Profile/settings, a permissions demo, authentication/recovery examples,
-  pricing/help and utility/error pages.
-- Basic/advanced forms, validation recovery, wizards, uploads, charts, developer
-  views, the bounded form builder and the complete component gallery.
-
-Use deterministic synthetic data, resettable in-memory state and working local
-interactions. Say which screens depend on a service, and state what they cannot demonstrate without it. Give drag interactions a
-keyboard alternative. The agreed breadth covers application categories;
-it does not require every external reference route or real backend services.
-
-## Acceptance and hosting
-
-Prove install and copy into separate applications with no access to private
-source paths. Test packed consumers in HTML, Vue, Astro and React. Cover basic
-element copying, the full interactive lifecycle, composition dependency closure,
-host-style coexistence, multiple instances, bounded task kits and pinned
-upgrades. Keep scripted fixtures separate from real agent-run consumption
-acceptance.
-
-Complete the repository gates, package/copy/documentation checks, all-inventory
-coverage, representative cross-browser flows, accessibility/input/lifecycle
-checks and revision-aware evidence. Set payload budgets from measured builds.
-Never claim a manual screen-reader or physical-device pass without its protocol.
-
-GitHub Pages hosts the static portal and `/theme/demo/` by default, with hash
-routing for the Vue application. If a proven Pages limit blocks the agreed
-experience, deploy the demo to Vercel and link it from the portal. Hosting never
-justifies cutting the agreed scope. After the visual-selection and quality gates,
-check that deployed bytes match the tested artifacts.
-
-## Implemented delivery surfaces and evidence
+# Phase 6 delivery record
+
+Phase 6 made the theme installable: an agent building another application can
+discover, select, install or copy, use and verify j3w1 elements, components and
+compositions from pinned artifacts, without scraping page DOM, reading values
+from screenshots, rebuilding missing behavior or guessing which CSS and
+dependencies make a snippet work. Design meaning stays in `tokens/` and
+`spec/`; the package implements it, and copy bundles, the portal and the Vue
+application consume that implementation (`docs/ui-architecture.md`). This
+record does not accept a release by itself; acceptance comes from the separate
+execution records for the exact artifact and protocol.
+
+## Decided
+
+- **6A, foundation selection.** Current plus exactly three local candidates
+  ([visual review](phase6-visual-review.md), D-022). The owner selected
+  True Black / Rose, candidate I (D-023); approval is never inferred from a
+  recommendation or green checks.
+- **Preview corrections.** Red graphs (`color.chart.series-2`), bright rose
+  column headers over regular rose values, near-white page titles, bright
+  section and group headings and muted supporting text use existing approved
+  roles and add no colors. Links became strong red (D-024).
+- **6B–6E.** Make the foundation canonical; productize all 67 inventory
+  entries, including R2/L; build the portal and the Vue showcase; verify
+  external consumers, publish evidence and deploy the tested artifacts. npm
+  publication stays an owner release action.
+- **Integration routes.** Every component or pattern has three: *package*
+  (install, import, registration, CSS, markup, binding, framework example),
+  *copy* (a standalone bundle with all markup, CSS, behavior, dependencies,
+  notices and instructions) and *mapping* (the compact canonical contract and
+  the deviation workflow, for incompatible or native hosts). Multi-file widgets
+  include their transitive dependencies and are never called a self-contained
+  snippet. Validate multiple instances and coexistence with host styles.
+- **Portal.** A short orientation page replaced the long homepage; the full
+  reference moved to `/theme/reference/` with tested migration of old anchors.
+  Normative content stays in the first static HTML, and ordinary pages load no
+  catalogue-wide JavaScript. The command palette is a compact floating panel,
+  not the original full-width top bar.
+- **Vue showcase.** Vue 3 JavaScript SFCs, Vite and Vue Router consume the
+  framework-agnostic package; there is no parallel Vue component library.
+  Synthetic, resettable data; drag interactions have a keyboard alternative;
+  screens that depend on a service say what they cannot demonstrate. GitHub
+  Pages hosts it at `/theme/demo/` with hash routing; Vercel only if a proven
+  Pages limit blocks the agreed experience, linked from the portal. Hosting
+  never justifies cutting the agreed scope.
+
+## Delivered
 
 - `packages/ui/`: modular ESM classes and registration, native forms and
   lifecycle, generated API and token dependency metadata, complete copy
-  distributions, and framework/mode task kits with the selected canonical
-  contracts and shared rules.
-- `site/src/pages/`: static portal, all 67 component pages, foundations,
-  patterns, tools, implementation guide, agent-kit preparation and the complete
-  reference. The packaged command palette loads its generated navigation index
-  on first use and searches components, token values, canonical documents,
-  decisions, tools, patterns, agent routes, ports and releases. Token values use
-  the shared inline hex presentation; static section navigation is the fallback.
-- `apps/demo/`: Vue 3 JavaScript SFCs with hash routing, five dashboard
-  contexts, five record workflows, four productivity apps, forms, developer and
-  utility screens, resettable synthetic data and the whole component gallery.
-- `docs/ui-consumption.md` and the maintained framework sources: installation,
-  binding, lifecycle, native form behavior, copy closure, pinning and migration.
-- `npm run ui:consumers` and `npm run test:ui`: install a real tarball in
+  distributions, and framework/mode task kits.
+- `site/src/pages/`: the portal, all 67 component pages, foundations,
+  patterns, tools, the implementation guide, agent-kit preparation and the
+  complete reference. The command palette loads its generated navigation index
+  on first use.
+- `apps/demo/`: five dashboard contexts, five record workflows, four
+  productivity apps, forms, developer and utility screens and the whole
+  component gallery.
+- `docs/ui-consumption.md`: installation, binding, lifecycle, native form
+  behavior, copy closure, pinning and migration.
+
+## Evidence
+
+- At selection, the foundation passed source validation, generation and drift
+  checks, 105 source tests, the static build, nine distribution tests and the
+  configured browser suite (204 passed, 124 intentionally skipped).
+  Verification-report generation kept all 1,866 specimen files, and its source
+  and browser checks passed (six browser passes, three intentional skips). This is
+  automated foundation evidence, not package acceptance or a manual
+  accessibility pass.
+- `npm run ui:consumers` and `npm run test:ui` install a real tarball in
   isolated HTML/Vue/React/Astro apps, compile declarations and test three
-  engines.
-- `npm run ui:report` keeps sanitized artifact, fixture and protocol identities
-  and the recorded environments. `npm run ui:publish-evidence` checks that report
-  against the downloadable tarball before it publishes `verification/ui.json`.
-- The specification evidence pipeline keeps the exact built specimen bytes. CI
-  requires the package checks and the full site checks before Pages deployment.
-  Failed runs stay evidence of failure; no manual pass is inferred.
-
-The gallery axe protocol respects the documented decorative whitespace waiver in
-`spec/components/code-editor.md`; real code text is still scanned. Native
-validation tests move keyboard focus out of the invalid field before checking
-pointer activation, because native validation UI can swallow a click. Payload
-gates measure the initial static-import closure apart from lazy chunks; see
-`docs/ui-architecture.md` for the measured budgets.
+  engines. `npm run ui:report` records artifact, fixture and protocol
+  identities; `npm run ui:publish-evidence` checks that report against the
+  downloadable tarball before it publishes `verification/ui.json`.
+- CI requires the package checks and the full site checks before Pages
+  deployment. Failed runs stay evidence of failure; no manual pass is inferred.
+- The gallery axe protocol respects the decorative whitespace waiver in
+  `spec/components/code-editor.md`. Native validation tests move focus out of
+  the invalid field before checking pointer activation, because native
+  validation UI can swallow a click. Payload budgets are in
+  `docs/ui-architecture.md`.
diff --git a/docs/phase6-visual-review.md b/docs/phase6-visual-review.md
index 561535a32..2183bfd0c 100644
--- a/docs/phase6-visual-review.md
+++ b/docs/phase6-visual-review.md
@@ -1,11 +1,9 @@
 # Phase 6A local visual review
 
-Phase 6 exists so agents can install or copy complete elements, components and
-compositions into another application, with pinned contracts, explicit
-dependencies and verified instructions. The official web package, the
-multi-page portal and the full Vue showcase serve that goal. This checkpoint
-builds only the local foundation-selection gate from issue #37. It publishes no
-package and does not change the canonical palette.
+The local foundation-selection gate from issue #37 (D-022). It compares Current
+with exactly three candidate token overlays, publishes no package and does not
+change the canonical palette. The owner selected candidate I (D-023); this
+document stays because the review can be reproduced.
 
 ## Run the review
 
@@ -18,53 +16,42 @@ package and does not change the canonical palette.
 
 Routes are `/review/current/`, `/review/conservative/`, `/review/balanced/`,
 `/review/maximum-legibility/`, `/review/compare/` and `/review/report/`. Each
-candidate also has `foundations/` and `components/` routes. `components/`
-renders every existing specification's variant/state combinations with the
-shared parsed specimen renderer. Forced states are appearance references, not
-implemented behavior or keyboard evidence. Deferred inventory stays outside the
-productization claim at this checkpoint.
-
-The Vue scene selector covers dashboard, records, settings, controls, developer
-views and a consumption-documentation composition. The comparison page syncs
-scene, query, filter, form, density, direction and launcher state across four
-same-origin frames. Frame widths are real CSS widths, not scaled screenshots. A
-640px frame is equivalent reflow evidence, not proof of a manual browser zoom.
-Native OS controls and font fallback still depend on the recorded environment.
+candidate also has `foundations/` and `components/` routes; `components/`
+renders every specification's variant/state combinations with the shared
+parsed specimen renderer. Forced states are appearance references, not
+implemented behavior or keyboard evidence.
+
+The comparison page syncs the Vue scene (dashboard, records, settings,
+controls, developer views, consumption documentation), query, filter, form,
+density, direction and launcher state across four same-origin frames. Frame
+widths are real CSS widths, not scaled screenshots; a 640px frame is
+equivalent reflow evidence, not proof of a manual browser zoom. Native OS
+controls and font fallback depend on the recorded environment.
 
 ## Local candidate inputs
 
-Candidate data is ignored on purpose. It is never copied into `dist/`,
-`exports/`, public assets, canonical token profiles or a package. This review
-checkout holds these files under `.cache/phase6a/inputs/`:
-
-- `conservative.json`
-- `balanced.json`
-- `maximum-legibility.json`
-
-A fresh checkout without them stops with a prerequisite message. Do not invent
-or download candidates. Supply the owner-selected local inputs before
-reproducing this review.
-
-Each input follows `overlaySchema` in `scripts/lib/visual-review.mjs`:
+Candidate data is ignored on purpose and never copied into `dist/`,
+`exports/`, public assets, canonical token profiles or a package. The review
+reads `.cache/phase6a/inputs/conservative.json`, `balanced.json` and
+`maximum-legibility.json`. A fresh checkout without them stops with a
+prerequisite message; do not invent or download candidates.
 
-- version 1;
-- the exact baseline digest;
-- candidate ID, a summary, and an optional display name;
-- a role-keyed changes object, each with an sRGB hex value, rationale and tradeoff.
-
-Values replace existing opaque color declarations before the canonical alias
-resolver runs. Unknown roles, non-color roles, historical ANSI primitive changes,
-stale baselines and malformed input fail. Inputs never change approval metadata.
+Each input follows `overlaySchema` in `scripts/lib/visual-review.mjs`: version
+1, the exact baseline digest, candidate ID, a summary, an optional display name,
+and a role-keyed changes object, each with an sRGB hex value, rationale and
+tradeoff. Values replace existing opaque color declarations before the
+canonical alias resolver runs. Unknown roles, non-color roles, historical ANSI
+primitive changes, stale baselines and malformed input fail. Inputs never
+change approval metadata.
 
 `npm run phase6:visual-build` regenerates the local output without starting the
-server. The same source and input bytes give the same output. The report
-contains input identities, specimen identity, perceptual OKLCH deltas, affected
-components, all declared contrast pairs, untouched roles and unchanged waivers.
-It shows unwaived failures rather than fixing or hiding them. Contrast comes
-from unrounded sRGB values through the existing engine. A recommendation is a
-design hypothesis, not approval. Browser results are recorded separately.
+server; the same source and input bytes give the same output. The report holds
+input and specimen identities, perceptual OKLCH deltas, affected components,
+all declared contrast pairs (unrounded, from the existing engine), untouched
+roles and unchanged waivers, and shows unwaived failures rather than hiding
+them. A recommendation is a design hypothesis, not approval.
 
-## Verification and limitations
+## Verification and limits
 
 1. Run `npm run phase6:visual-test` after the local build. It uses the shared
    environment fixture, writes local Playwright results and captures matched
@@ -73,49 +60,25 @@ design hypothesis, not approval. Browser results are recorded separately.
 
 The tests cover synchronization, form recovery, launcher keyboard and focus,
 responsive layout, RTL, motion, forced colors, static boards and isolation from
-public distribution. The ordinary repository check loop still applies; its
-evidence describes the public site, not these local candidates.
-
-The full public browser suite also checks revision-pinned source links and
-task-kit packaging. For that gate:
-
-1. Use a clean committed candidate.
-2. Set `GITHUB_SHA` to its full commit before `npm run build`, as hosted CI does.
-
-An ordinary unpinned local build omits those links and disables packaging on
-purpose, so it cannot pass the pinned-link assertions. If you missed this step,
-keep the failed run and rebuild from the committed candidate. Do not weaken the
-assertions or stamp a dirty build as a published revision.
-
-No font is downloaded or bundled. No private reference source or asset is
-copied. The Vue screen is an original preview built from canonical roles and
-existing component CSS; its controls are not presented as the future official
-package. The consumption-page actions describe future deliverables instead of
-offering package or download links that do not exist. All data is synthetic,
-updates stay in memory, and no remote services run.
-
-## Owner gate and continuation
-
-1. Present the three current input names, the report, the matched local review
-   URLs and the evidence-weighted recommendation.
-2. Keep stable route IDs across review rounds; display names identify the
-   current directions.
-3. Archive rejected inputs, output and evidence together before replacing them.
-   Never carry a rejected round's recommendation into a new report.
-4. Wait for explicit selection. Consolidate a requested hybrid and show it again.
-5. Do not canonicalize, merge, deploy, tag or publish a candidate before
-   selection.
-
-After selection:
-
-1. Freeze the canonical foundation with owner decision provenance.
-2. Productize every baseline inventory entry.
-3. Generate install and copy distributions from the maintained implementation.
-4. Build the static-first portal with API and consumption examples.
-5. Build the full Vue showcase.
-6. Verify external consumer fixtures and documentation.
-7. Release tested artifacts.
-
-The portal replaces the long homepage, keeps the complete reference at a
-secondary route and keeps machine contracts as the agent entry point. Pages is
-the default host; the demo may use Vercel if a real hosting limit requires it.
+public distribution. The repository check loop still applies; its evidence
+describes the public site, not these local candidates. The full public browser
+suite also checks revision-pinned source links and task-kit packaging: build a
+clean committed candidate with `GITHUB_SHA` set to its full commit, as hosted
+CI does. An unpinned local build omits those links and disables packaging, so
+it cannot pass those assertions; keep the failed run and rebuild from the
+committed candidate. Never weaken the assertions or stamp a dirty build as a
+published revision.
+
+No font is downloaded or bundled and no private reference source or asset is
+copied. The Vue screen is an original preview from canonical roles and existing
+component CSS. All data is synthetic, updates stay in memory, and no remote
+services run.
+
+## Owner gate
+
+Present the input names, the report, the matched review URLs and the
+evidence-weighted recommendation. Keep stable route IDs across rounds. Archive
+rejected inputs, output and evidence together before replacing them, and never
+carry a rejected round's recommendation into a new report. Wait for explicit
+selection; show a requested hybrid again as one candidate. Do not canonicalize,
+merge, deploy, tag or publish a candidate before selection.
diff --git a/docs/rose-typography-migration.md b/docs/rose-typography-migration.md
index bd099e4f3..09e1bf5c5 100644
--- a/docs/rose-typography-migration.md
+++ b/docs/rose-typography-migration.md
@@ -1,9 +1,8 @@
 # Rose typography migration — 4.0.0
 
-D-033 corrects the canonical text hierarchy. Ordinary interface and prose are
-`#e99499`; brighter labels are `#ffa2a7`; content titles and H1–H6 use the new
-`color.text.heading` (`#f4eeee`). `color.text.highlight` is an explicit rare
-highlight. Bold inherits context and never chooses a foreground by weight.
+D-033 makes ordinary interface and prose text rose and gives content headings
+`color.text.heading`; bold inherits its context. This audit classifies every
+former near-white use.
 
 ## Near-white audit
 
@@ -21,9 +20,9 @@ highlight. Bold inherits context and never chooses a foreground by weight.
 | heritage-ansi prompt and extended terminal slot 15 | Historical/profile-specific terminal semantics; retain |
 | Historical decisions, releases and reference evidence | Historical truth; do not rewrite |
 
-Every port classifies the new roles; unsupported host hooks are disclosed.
-Generated values change through tokens and mappings only. No global replacement
-of white literals or changes to syntax/diagnostic palettes is performed.
+Every port classifies the new roles and discloses unsupported host hooks.
+Values change through tokens and mappings only: no global replacement of white
+literals, and no change to syntax or diagnostic palettes.
 
 ## Upgrade
 
diff --git a/docs/true-black-rose-migration.md b/docs/true-black-rose-migration.md
index 0433a880e..cdf8ee0d8 100644
--- a/docs/true-black-rose-migration.md
+++ b/docs/true-black-rose-migration.md
@@ -1,8 +1,8 @@
 # True Black / Rose migration
 
-The owner selected the exact locally reviewed candidate I and approved its
-permanent adoption; D-023 records it. Version 1.0.0 follows the repository's
-major-version rule for changing approved values.
+Version 1.0.0 adopts the owner-selected candidate I (D-023), a major version
+under the rule for changing approved values. Seven surfaces change; the
+heritage profile keeps its prior surface assignments.
 
 | Semantic role | Previous value | Selected value |
 | --- | --- | --- |
@@ -14,17 +14,13 @@ major-version rule for changing approved values.
 | color.surface.chrome | #100909 | #090707 |
 | color.surface.default | #160b0b | #100c0c |
 
-The later owner-requested link change (D-024) moves `color.text.link` from
-`#ffa2a7` to the existing strong red `#f73f35`. Visited links keep that color;
-persistent underlines and near-white hover text mark navigation. The heritage
-profile keeps the previous link assignment.
-
-All other token values are unchanged: rose body text, pink headings, white
-prose, red borders/actions/focus/selection, and the status, chart, code and
-terminal assignments stay as reviewed. `color.code.bg` and `color.terminal.bg`
-keep their original assignments; do not confuse them with `color.surface.code`
-and `color.surface.terminal`. The heritage profile keeps its prior surface
-assignments.
+`color.code.bg` and `color.terminal.bg` keep their original assignments; do not
+confuse them with `color.surface.code` and `color.surface.terminal`. Two new
+primitives hold the chrome and panel values; applications still consume
+semantic roles, never primitive keys. In the same release `color.text.link`
+moved from `#ffa2a7` to strong red `#f73f35` (D-024); the heritage profile keeps
+the previous link. Later releases changed more roles: see D-026, D-027 and
+D-033 and the [rose typography migration](rose-typography-migration.md).
 
 ## Update a consumer
 
@@ -37,23 +33,16 @@ Do not overwrite user customization or silently edit another repository. Native
 import verification and manual accessibility records apply only to their
 recorded source and artifact digests.
 
-## What else changed
+## Package and site changes in 1.0.0
 
-The change adds two primitives for the selected chrome and panel values.
-Applications still consume semantic roles, never these primitive keys. This
-change approves no pending decision outside the selected foundation.
+The package and complete copy bundles implement all 67 inventory entries;
+existing mappings and lock formats still work. When you adopt them, install one
+exact version, update its tokens and component styles together, and review the
+full dependency closure when you replace copied source. The CLI refuses to
+overwrite an old copy: create a fresh directory and merge your application
+changes by hand.
 
-The portal replaces the long homepage; the full static state reference is now
+The portal replaces the long homepage; the full static reference is
 `/theme/reference/`. Old homepage hashes move there with JavaScript, and the
 static full-reference link works without it. The Vue demo uses
 `/theme/demo/#/...` so direct links work on GitHub Pages.
-
-The new package and complete copy bundles implement all 67 inventory entries.
-Existing mappings and lock formats still work. When you adopt the package or copy bundles:
-
-1. Install one exact version.
-2. Update its tokens and component styles together.
-3. Review the full dependency closure when you replace copied source.
-
-The CLI refuses to overwrite an old copy. Create a fresh directory and merge
-your application changes carefully, by hand.
diff --git a/docs/ui-architecture.md b/docs/ui-architecture.md
index 182f24e05..d296390e8 100644
--- a/docs/ui-architecture.md
+++ b/docs/ui-architecture.md
@@ -1,8 +1,8 @@
 # Official web implementation architecture
 
-Status: all 67 inventory entries, copy distributions, the static portal and Vue
-showcase are implemented. This document describes the architecture. Actual
-acceptance and deployment are in the separate delivery and execution records.
+All 67 inventory entries, copy distributions, the static portal and the Vue
+showcase are implemented. This document describes the architecture; acceptance
+and deployment are in the separate delivery and execution records.
 
 ## Ownership
 
@@ -11,70 +11,73 @@ acceptance and deployment are in the separate delivery and execution records.
 - The build combines that behavior, the canonical component styles and the
   maintained usage examples into the package and the complete copy
   distributions.
-- The portal and Vue showcase consume those outputs. They carry no second
+- The portal and Vue showcase consume those outputs and carry no second
   component implementation.
 
-UI builds keep stable entry paths under `.cache/ui-build` so emitted bytes and
-implementation identities are reproducible. An exclusive `.cache/ui-build.lock`
-coordinates concurrent build and check processes; each waits for the prior
-process to finish before clearing or reading that stage. The lock is released
-on success or a caught failure. A wait longer than 60 seconds fails. If a process
-is forcibly stopped, confirm no UI build is running before removing its lock.
-
-**Choices (D-025).** Theme-rendered choices are the default web implementation.
-The shared `internal/choice.js` renderer draws single comboboxes and multiple
-listboxes. The original select keeps FormData, constraints, defaults and events.
-
-- The package Select uses the renderer directly; component compositions enhance
-  their own bare controls.
-- The public `enhance/choice` entry watches only the application root you pass
-  it, and skips controls owned by another j3w1 component. It never moves the
-  native select out of its framework-owned DOM position.
-- Destroy disconnects observers and listeners and restores the native control
-  and its label relationship.
-- The Vue application and portal use this public entry; they keep no separate
-  dropdown implementations. Native no-JavaScript fallbacks stay visible.
+**Site chrome.** The portal is built from the components it documents. Chrome
+uses the default `compact` density (D-038) and only canonical component classes: actions are
+`.button` in one of the four tones, navigation is `.link`, calls to action are
+`.link-standalone`. Forced states appear only inside specimens.
+
+**Build lock.** UI builds keep stable entry paths under `.cache/ui-build` so
+emitted bytes and implementation identities are reproducible. An exclusive
+`.cache/ui-build.lock` serializes concurrent build and check processes; it is
+released on success or a caught failure, and a wait longer than 60 seconds
+fails. If a process is forcibly stopped, confirm no UI build is running before
+removing its lock.
+
+**Choices (D-025).** The shared `internal/choice.js` renderer draws single
+comboboxes and multiple listboxes; the original select keeps FormData,
+constraints, defaults and events. The package Select uses the renderer
+directly; component compositions enhance their own bare controls. The public
+`enhance/choice` entry watches only the application root you pass it, skips
+controls owned by another j3w1 component and never moves the native select out
+of its framework-owned DOM position. Destroy disconnects observers and
+listeners and restores the native control and its label relationship. The Vue
+application and portal use this public entry, with no separate dropdowns.
 
 **Control styles.** The standalone `styles/controls.css` is generated from the
 same canonical `site/src/styles/themed-controls.css` that component and copy
 distributions use. It is separate because component styles are scoped to their
 custom-element tag, while application enhancement is scoped to
-`data-j3w1-controls`. The canonical stylesheet also puts generic control chrome
-behind that enhancement boundary, so importing component reference CSS cannot
-change unrelated native specimens, forced-state examples or standalone recipes.
-
-Historical specimen and private comparison rendering resolve this CSS closure
-from the selected Git revision, then apply the existing resource and behavior
-checks. Relative imports stay inside that revision's style tree. External,
-missing, cyclic and escaping dependencies fail closed.
-
-**Inventory.** The inventory is the finite list in `spec/inventory.json`. Package
-generation fails if an entry has no canonical contract or implementation
-mapping. Contract maturity stays separate from implementation and verification
-status; productization does not quietly approve pending design decisions.
+`data-j3w1-controls`. Generic control chrome sits behind that enhancement
+boundary, so importing component reference CSS cannot change unrelated native
+specimens, forced-state examples or standalone recipes. Historical specimen and
+private comparison rendering resolve this CSS closure from the selected Git
+revision; relative imports stay inside that revision's style tree, and
+external, missing, cyclic and escaping dependencies fail closed.
+
+**Specimens.** State matrices, preview routes, recipes and the workbench share one parsed renderer:
+`scripts/lib/specimen-markup.mjs` for native state attributes and hidden-cell focus, and
+`scripts/lib/markup.mjs` for ID-reference rewriting. `site/workbench.json` binds controls to
+specimen parts under the closed choices in `schemas/playground.mjs`. Add bindings and coverage
+there; never write another specimen implementation.
+
+**Inventory.** The inventory is the finite list in `spec/inventory.json`.
+Package generation fails if an entry has no canonical contract or
+implementation mapping. Contract maturity stays separate from implementation
+and verification status; productization does not approve pending decisions.
 
 ## Native content and lifecycle
 
 Components use light DOM where native semantics, form ownership, static content
-and composition benefit. Each implementation manifest entry records the reason.
-
-- A field's input stays the successful native form control; the wrapper submits
-  no duplicate hidden value.
-- Labels, fieldsets, constraint validation and reset keep browser behavior.
-- Custom widgets must implement their complete canonical keyboard and accessibility
-  contracts.
+and composition benefit; each implementation manifest entry records the
+reason. A field's input stays the successful native form control, and the
+wrapper submits no duplicate hidden value. Labels, fieldsets, constraint
+validation and reset keep browser behavior. Custom widgets implement their
+complete canonical keyboard and accessibility contracts.
 
 Registration:
 
-- Class imports are separate from browser registration.
-- Each registration module includes its component dependencies.
+- Class imports are separate from browser registration; each registration
+  module includes its component dependencies, and the root registration module
+  registers the complete catalogue on purpose.
 - Registering again with the same constructor, or the identical generated
   implementation identity, is safe, including across independent copy
   directories. A different version or foreign definition is an error.
 - The implementation identity hashes the component's definition and the exact
   emitted modules its class reaches, so it changes only when that runtime code
   changes.
-- The root registration module registers the complete catalogue on purpose.
 - Server renderers import class definitions only when needed and register in
   the browser. Native child markup is the static and server-rendered content.
 
@@ -83,69 +86,58 @@ Lifecycle:
 - Connected listeners use a connection-scoped AbortSignal. Disconnect aborts
   them and runs controller cleanup for timers, observers and document-level
   effects.
-- Writable controller properties survive reconnection. Properties set before
-  custom-element upgrade are replayed after connection.
+- Writable controller properties survive reconnection; properties set before
+  upgrade are replayed after connection.
 - Call `refresh()` after replacing a component's native child structure.
   Reactive changes to existing native children need no remount.
 
 Properties change state without inventing user input events. Native input and
-change events stay available. Documented `j3w1-*` custom events bubble across
-component boundaries and carry structured details. Navigation, persistence,
+change events stay available; documented `j3w1-*` custom events bubble across
+component boundaries with structured details. Navigation, persistence,
 authorization and network services belong to the consuming application.
 
 ## Styles and complete copying
 
-- Token CSS comes from the selected canonical profile.
-- Component styles come from canonical CSS, shared inherited rules and
-  maintained behavior selectors.
+- Token CSS comes from the selected canonical profile; component styles from
+  canonical CSS, shared inherited rules and maintained behavior selectors.
 - Distribution selectors are scoped to the custom-element name. They keep real
   states and drop forced-state specimen selectors.
-- Light DOM is intentional; it does not claim immunity to overriding host CSS.
-  Semantic variables and anatomy classes are the documented extension points.
+- Light DOM does not claim immunity to overriding host CSS. Semantic variables
+  and anatomy classes are the documented extension points.
 
-Per-component CSS includes transitive composition dependencies. Per-component
-ESM includes the complete runtime dependency closure. The build parses emitted
-module imports with `es-module-lexer`, follows literal relative imports, and
-rejects unbundled bare imports and non-literal dynamic dependencies. Import-like
-text inside strings or comments cannot become a dependency by accident.
+Per-component CSS includes transitive composition dependencies, and
+per-component ESM the complete runtime dependency closure. The build parses
+emitted imports with `es-module-lexer`, follows literal relative imports, and
+rejects unbundled bare imports and non-literal dynamic dependencies;
+import-like text in strings or comments is never a dependency.
 
 Each copy directory contains runnable HTML, element markup, CSS, token CSS,
-runtime modules, notices, instructions and file digests.
-
-- The CLI checks every selected file before creating a destination.
-- It refuses an existing destination, unsafe paths and symlink destinations.
-- Multi-component kits keep complete standalone component directories.
-- Consumers keep the required code licenses and specimen attribution; shipping
-  code next to prose does not relicense it.
+runtime modules, notices, instructions and file digests. The CLI checks every
+selected file before creating a destination and refuses an existing
+destination, unsafe paths and symlink destinations. Multi-component kits keep
+complete standalone component directories. Consumers keep the required code
+licenses and specimen attribution; shipping code next to prose does not
+relicense it.
 
 ## Build and verification commands
 
-The workspace uses Node 24 and npm.
-
 1. `npm run ui:build` builds the package.
 2. `npm run ui:pack` prepares its tarball.
-3. `npm run ui:consumers` packs the real package and installs it into
-   independent temporary HTML, Vue, React and Astro applications. They import
-   public package paths, compile declarations, build their applications and run
-   the installed copy CLI. They have no workspace source imports.
+3. `npm run ui:consumers` installs the packed package into independent
+   temporary HTML, Vue, React and Astro applications that import public package
+   paths only, compile declarations, build and run the installed copy CLI.
 4. `npm run test:ui` runs the served artifacts in Chromium, Firefox and WebKit.
 
-Generated outputs are checked for drift, including orphaned files. These
-commands need the complete implementation catalogue and maintained examples;
-infrastructure alone is not a release. Passing scripted fixtures is reported
-separately from real agent-run acceptance.
-
 Source checks, generated drift checks, static build checks, browser execution,
 packed installation, copying and release deployment are separate gates. Site
-evidence stays tied to the exact built specimen bytes. Package evidence also
-identifies the packed tarball and the external fixture bytes. Manual
-screen-reader and physical-device results need their own recorded protocols;
-automated browser runs do not establish them.
+evidence is tied to the exact built specimen bytes; package evidence also
+identifies the packed tarball and the external fixture bytes. Scripted fixtures
+are reported apart from real agent-run acceptance, infrastructure alone is not
+a release, and manual screen-reader and
+physical-device results need their own recorded protocols.
 
 ## Payload budgets
 
-Distribution checks cap these sizes:
-
 | Measure | Cap |
 | --- | --- |
 | Initial Vue JavaScript | 64 KiB gzip |
@@ -153,20 +145,16 @@ Distribution checks cap these sizes:
 | Each lazy Vue chunk | 192 KiB gzip |
 | Complete installable tarball | 2 MiB |
 
-First measurements were about 46 KiB for the Vue entry and 140 KiB for the
-lazily loaded bounded form builder, which includes its schema and HTML-parsing
-dependencies. These are transfer-size estimates, not a claim that the static
-host enables a particular compression setting. The test follows static imports
-and keeps optional dynamic imports separate. Per-component imports avoid loading
-the full catalogue on ordinary pages.
+The distribution test follows static imports and keeps optional dynamic imports
+separate. First measurements were about 46 KiB for the Vue entry and 140 KiB
+for the lazily loaded form builder. These are transfer-size estimates, not a
+claim about the static host's compression.
 
 ## Standards consulted
 
-The implementation uses the native form and custom-element platform contracts:
-[custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html),
+[Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html),
 [form infrastructure](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html),
-and [Vue's custom-element integration](https://vuejs.org/guide/extras/web-components).
-Custom widgets follow their canonical component specification and the linked
-[APG keyboard guidance](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/).
-These are living documents consulted during implementation; the package's real
-browser evidence defines the exercised compatibility.
+[Vue's custom-element integration](https://vuejs.org/guide/extras/web-components)
+and the [APG keyboard guidance](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/).
+They are living documents; the package's real browser evidence defines the
+exercised compatibility.
diff --git a/docs/ui-consumption.md b/docs/ui-consumption.md
index fb7d37943..14beba12c 100644
--- a/docs/ui-consumption.md
+++ b/docs/ui-consumption.md
@@ -1,61 +1,71 @@
 # Consuming j3w1 components
 
-Use `@j3w1/ui` in web applications that support Custom Elements. Its native
+`@j3w1/ui` serves web applications that support Custom Elements. Native
 children stay real HTML, so labels, form ownership, validation, fieldsets and
-reset keep browser semantics. The canonical design contract stays in `tokens/`
-and `spec/`.
-
-An empty `<j3w1-text-field>` does not invent a label or an input. Start from the
-complete maintained markup on the component's page.
+reset keep browser semantics. The design contract stays in `tokens/` and
+`spec/`. An empty `<j3w1-text-field>` invents no label or input: start from
+the maintained markup on the component's page.
 
 ## Install and pin
 
-- **1.0.0** makes True Black / Rose the default; it is a major upgrade from
-  0.1.0. Read `docs/true-black-rose-migration.md` before you replace old tokens.
-- **2.0.0** is also major: D-029 lifts the dim terminal slots and two code syntax
-  reds, and D-030 adds opt-in `code.hued.*` syntax roles. Component behaviour is
-  unchanged. Read the 2.0.0 changelog entry before you upgrade from 1.x.
-- **3.0.0** is major too: D-032 makes terminal slot 6 coral `#ff7a66`, gives the
-  prompt its own background role, changes the prompt text to bright rose
-  `#ffa2a7` and removes `color.primitive.ansi-readable.6`. Component behaviour
-  is unchanged. Read the 3.0.0 changelog entry before you upgrade.
-
-Keep the exact package version and your package-manager lockfile in source
-control.
+Keep the exact package version and your lockfile in source control.
 
+<!-- ui-install:start -->
 ```sh
-npm install --save-exact @j3w1/ui@3.1.0
+npm install --save-exact @j3w1/ui@4.0.0
 ```
+<!-- ui-install:end -->
 
-That command needs npm publication, which is an owner release action. Before
-publication:
-
-1. Download the release tarball.
-2. Check it against its published digest.
-3. Install the local file:
+That needs npm publication, an owner release action; do not assume it
+happened. Until then, download the release tarball, check it against its
+published digest and install the file:
 
+<!-- ui-tarball:start -->
 ```sh
-npm install --save-exact ./j3w1-ui-3.1.0.tgz
+npm install --save-exact ./j3w1-ui-4.0.0.tgz
 ```
+<!-- ui-tarball:end -->
 
-The repository builds this same artifact with `npm run ui:build` and
-`npm run ui:pack`. Never use a branch URL in place of a release pin. Do not
-assume the package is published just because this guide exists.
+`npm run ui:build` and `npm run ui:pack` build the same artifact here. Never
+pin a branch URL.
 
 ## Load one component
 
-**Choices.** Version 1.1.0 adds theme-owned single and multiple choices (D-025).
-
-- Use `j3w1-select` when the open list must use j3w1 colors. A bare native
-  select is only the no-JavaScript fallback.
-- The component keeps its native select for FormData, required validation,
-  defaults, disabled fieldsets and reset. The visible control is a select-only
-  combobox or a multiselectable listbox.
-- Use the separate `j3w1-combobox` when users need to type and filter
-  suggestions.
+```js
+import '@j3w1/ui/tokens.css';
+import '@j3w1/ui/styles/text-field.css';
+import '@j3w1/ui/register/text-field';
+```
 
-For existing application markup, the supported enhancement applies the same
-renderer without moving the native controls or changing their names:
+Load the token CSS once, then copy the component's maintained markup. A
+registration entry loads the nested registrations it needs, and a stylesheet
+carries its full style closure. `@j3w1/ui/register` and `@j3w1/ui/styles.css`
+load the whole catalogue, for a gallery; ordinary apps import per component.
+
+- Class imports such as `@j3w1/ui/components/text-field` have no registration
+  side effects and are safe during SSR; register in the browser.
+- Registering the same module twice is safe; a foreign class already
+  registered under the same name is rejected. Use one package version per
+  document.
+- Compact is the default density (D-038); set `data-density="comfortable"` on
+  the document or a containing element to opt in to the larger mode.
+- No font binaries are bundled; the stack falls back to locally installed
+  monospace fonts.
+- Component CSS is scoped to its tag: load it after broad resets and avoid
+  later selectors that restyle every button or input. Customise only through
+  the semantic token variables, layout and documented classes. Scope any
+  deliberate host override and record it in your integration; a new literal
+  colour is a deviation, not a theme variant. Keep focus,
+  selection, contrast and forced-colours behaviour.
+
+### Themed choices, dates and native controls
+
+`j3w1-select` renders its open list in theme colours (D-025) as a select-only
+combobox or a multiselectable listbox; its native select stays the source of
+FormData, validation, defaults, disabled fieldsets and reset, and the
+no-JavaScript fallback. Use `j3w1-combobox` when users type to filter. To
+enhance existing application markup without moving native controls or
+changing their names:
 
 ```js
 import '@j3w1/ui/tokens.css';
@@ -67,230 +77,129 @@ const controls = enhanceControls(document.querySelector('#application'));
 controls.destroy();
 ```
 
-- It watches inserted and removed controls inside that root only.
-- Vue and other frameworks keep owning their native selects and option values;
-  normal value bindings and change handlers keep working.
-- In Vue, call it after mount and destroy it in `onBeforeUnmount`. The official
-  demo does this.
-- Complete `select` copy bundles include the same renderer. Do not hand-roll a
-  different dropdown in each application.
-
-Single-choice keys: Enter/Space or arrows open; arrows and Home/End move; typing
-finds an option; Enter/Space commits; Escape/Tab close.
-
-Multiple-choice keys: arrows move; Space or click toggles; Shift with arrows
-selects a range; Ctrl/Command+A selects or clears all enabled options.
-
-The open list, selected fill, check mark, focus boundary and error message are
-theme-rendered. The visible control gets the original accessible label and
-descriptions.
-
-**Dates and times.** Date and time inputs also get a themed editor.
-
-- Dates: explicit YYYY-MM-DD entry and a calendar. Arrows navigate, Home/End
-  move within a week, PageUp/Down change month, Enter/Space choose, Escape
-  closes. The calendar follows the native min, max and step constraints.
-- Times: HH:MM or HH:MM:SS entry, plus buttons that apply the native step;
-  step="any" disables stepping.
-- Labels, native constraints, defaults, reset and read-only/disabled states stay
-  connected to the original inputs, which remain the no-JavaScript fallback.
-- If an engine exposes date/time inputs as text, the enhancement supplies ISO
-  parsing, range/step validation and time stepping itself. The same form value,
-  visible validation and reset contract applies there.
-
-**Other controls.** Within the enhanced root, the stylesheet also themes
-ordinary checkbox, radio, range and file-button chrome, and removes browser
-number spinners; use the Number field's explicit step controls instead.
-Browser-owned file and system dialogs stay host UI.
-
-**Testing.** The native form element stays queryable for data integration, but
-browser tests should use the visible combobox/listbox: Playwright `selectOption` on
-the hidden native select does not test the rendered menu. Click real options and
-use the keyboard.
-
-**One component.**
-
-```js
-import '@j3w1/ui/tokens.css';
-import '@j3w1/ui/styles/text-field.css';
-import '@j3w1/ui/register/text-field';
-```
-
-1. Copy the maintained text-field markup from its component page.
-2. Load token CSS once in your app.
-
-The registration entry loads the nested registrations it needs, and the
-stylesheet includes its full style dependency closure.
-`@j3w1/ui/register` and `@j3w1/ui/styles.css` load the entire catalogue; use them
-for a complete gallery and prefer per-component imports in ordinary apps.
-
-Class imports such as `@j3w1/ui/components/text-field` have no registration side
-effects and are safe during SSR; register in the browser. Importing the same
-registration module again is safe. A foreign class already registered under the
-same name is rejected. Use one package version per document.
+- It watches controls inserted into or removed from that root only.
+  Frameworks keep owning their native selects,
+  value bindings and change handlers; in Vue, call it after mount and destroy
+  it in `onBeforeUnmount`. Complete `select` copy bundles include the same
+  renderer; do not hand-roll another dropdown.
+- Date and time inputs get a themed editor (ISO entry, a calendar, step
+  buttons) bound to the native constraints, defaults and reset; the original
+  inputs stay the no-JavaScript fallback. Where an engine exposes them as
+  text, the enhancement validates ISO values, range and step itself. Keys are
+  on each component page.
+- Checkbox, radio, range and file-button chrome is themed; number spinners are
+  removed in favour of the Number field's step controls. Browser-owned file
+  and system dialogs stay host UI.
+- Test the visible combobox or listbox: Playwright `selectOption` on the
+  hidden native select does not exercise the rendered menu.
 
 ## Vue 3 JavaScript SFCs
 
-1. Tell the Vue compiler that `j3w1-*` tags are Custom Elements in your Vite
-   config:
-
-   ```js
-   import { defineConfig } from 'vite';
-   import vue from '@vitejs/plugin-vue';
-   export default defineConfig({
-     plugins: [vue({ template: { compilerOptions: {
-       isCustomElement: tag => tag.startsWith('j3w1-'),
-     } } })],
-   });
-   ```
+Declare `j3w1-*` tags as Custom Elements in the Vite config, import
+registration in the browser entry or the SFC, and put the maintained native
+markup in the template:
 
-2. Import registration in your browser entry or in the SFC that uses the
-   component.
-3. Put the maintained native markup in the template.
-
-Bindings:
-
-- Native forms: `@submit.prevent` and `new FormData(event.target)`.
-- Custom events: `@j3w1-change="onChange"`; read the payload from `event.detail`.
-- Objects and arrays: `.prop`, for example `:data.prop="series"`.
-- A ref exposes the typed custom-element methods after mount.
-- When Vue owns the value, use the native input's `v-model`. Do not assume a
-  custom wrapper implements Vue's component `modelValue` convention.
+```js
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+export default defineConfig({
+  plugins: [vue({ template: { compilerOptions: {
+    isCustomElement: tag => tag.startsWith('j3w1-'),
+  } } })],
+});
+```
 
-The full JavaScript SFC demo in `apps/demo` is an independently written package
-consumer.
+Submit with `@submit.prevent` and `new FormData(event.target)`; listen with
+`@j3w1-change="onChange"` and read `event.detail`; pass objects and arrays as
+properties (`:data.prop="series"`); bind values with the native input's
+`v-model`, not a component `modelValue`. A ref exposes the element's methods
+after mount. `apps/demo` is an independent package consumer.
 
 ## React, Astro and plain HTML
 
-**React 19** supports Custom Elements.
-
-- Use native JSX children, and `defaultValue` for an uncontrolled native input.
-- Use a ref for complex properties and imperative APIs.
-- `addEventListener('j3w1-change', handler)` works consistently; remove the
-  listener in the effect cleanup.
-- A native form's `onSubmit` receives the real form.
-
-**Astro** renders the maintained markup statically.
+**React 19.** Use native JSX children and `defaultValue` for an uncontrolled
+input, a ref for complex properties and methods, and
+`addEventListener('j3w1-change', handler)` removed in the effect cleanup. A
+native form's `onSubmit` receives the real form.
 
-- Import the CSS in frontmatter.
-- Import registration in a browser `<script>`. Never register Custom Elements in
-  server frontmatter.
-- Essential labels and content are visible before JavaScript runs. Complex
-  interactive controls document their JavaScript limits.
+**Astro.** Import CSS in frontmatter and registration in a browser `<script>`,
+never in server frontmatter.
 
-**Plain HTML.** Use the copy distribution's `index.html`, or serve the package's
-`dist` directory and load its relative ESM registration module with
-`<script type="module">`. Serve it over HTTP; loading module files from a `file:`
-URL is not supported. A complete copy bundle has no bare runtime imports and no
-dependency on the documentation website.
+**Plain HTML.** Use the copy bundle's `index.html`, or serve the package's
+`dist` directory over HTTP and load its relative ESM registration module with
+`<script type="module">`; `file:` URLs are not supported. A complete copy
+bundle has no bare runtime imports and does not depend on this website.
 
 ## Attributes, properties and events
 
-- Boolean attributes work by presence: `disabled="false"` still disables a
-  control. Remove the attribute or set `.disabled = false`.
-- Attributes hold strings. Arrays, objects and native `File` instances go in
-  properties. The generated API table and declarations list each component's
-  properties and methods.
-- Native input attributes set defaults. Setting `.value` or `.checked` changes
-  the current state without faking a user event. Native `form.reset()` restores
-  defaults.
-- A radio group's value names the checked native option. Multiple selections
-  expose arrays where the API declares them.
-- Native input and change events keep their original behavior.
-- Documented `j3w1-*` events are bubbling, composed, cancelable `CustomEvent`s
-  with a structured `detail`. Canceling one controls a default action only when
-  its API says so; canceling a reporting event does not undo a value change.
+- Boolean attributes work by presence: `disabled="false"` still disables.
+  Remove the attribute or set `.disabled = false`.
+- Arrays, objects and `File` instances go in properties; the generated API
+  table lists them.
+- Setting `.value` or `.checked` changes state without faking a user event;
+  native `form.reset()` restores the defaults.
+- Native input and change events behave as usual. Documented `j3w1-*` events
+  are bubbling, composed, cancelable `CustomEvent`s with a structured
+  `detail`; cancelling one stops a default action only where its API says so,
+  and never undoes a value change it reports.
 
 ## Forms and validation
 
-- Keep the native control's `name`, value, label and form relationships intact.
-- `FormData` includes successful native controls; unchecked checkboxes and
-  disabled fields are left out. A switch uses its documented native hidden value.
-- Required, min/max, pattern and custom validity are your choices; the package
-  infers no business validation. Use `checkValidity()` or `reportValidity()`, and
-  keep the canonical error-summary and focus-recovery rules for multi-field forms.
-- File input exposes the selected local files and never uploads them.
-- Authentication, persistence, authorization, network retries and domain policy
-  belong to your app. The demo labels its local simulations. Developer views
-  never run code.
+- Keep each native control's `name`, label and form relationships. `FormData`
+  holds successful native controls only. Validation rules, uploads,
+  persistence and authorisation are your app's; use `checkValidity()` or
+  `reportValidity()`.
 
 ## Composition, lifecycle and styling
 
-The package uses light DOM, so native semantics and static content survive.
-Native children are the composition surface; there are no hidden Shadow DOM
-slots to guess.
-
-- Keep the canonical class names and ARIA relationships from the maintained
-  examples.
-- Give every instance unique IDs, and update all `for`, `aria-*` and fragment
-  references together.
-- Disconnecting an instance removes its listeners, timers and open overlays;
-  reconnecting reattaches behavior.
-- If your framework replaces the native children of a connected instance, call
-  `refresh()` after the DOM update. Do not let a framework and a widget both
-  own or reorder the same child collection.
-
-Density and fonts:
-
-- Set `data-density="compact"` or `data-density="comfortable"` on the document
-  or a containing element. Tokens include both modes.
-- The default font stack falls back to locally installed monospace fonts. No
-  font binaries are bundled; get any optional font from its publisher under its
-  own license.
-
-Styling:
-
-- Component CSS is scoped to its custom tag. Load it after broad application
-  resets, and avoid later selectors that restyle every button or input.
-- Customize only with the canonical semantic token variables, layout and
-  documented classes. New literal colors or changed design meaning are a
-  deviation, not an official theme variant.
-- Keep focus, selection, contrast and forced-colors behavior. Scope any
-  deliberate host override and record it in your integration.
+- Light DOM: native children are the composition surface. Give every instance
+  unique IDs and update each `for`, `aria-*` and fragment reference with
+  them. Call `refresh()` after your framework replaces the children of a
+  connected instance, and never let a framework and a widget both own the
+  same children. Disconnecting removes listeners, timers and open overlays;
+  reconnecting reattaches them.
 
 ## Copy a complete bundle
 
+<!-- ui-copy:start -->
 ```sh
-npx --package=@j3w1/ui@3.1.0 j3w1-ui copy dialog --out ./vendor/j3w1/dialog
-npx --package=@j3w1/ui@3.1.0 j3w1-ui kit --components text-field,button,dialog --out ./vendor/j3w1/task
+npx --package=@j3w1/ui@4.0.0 j3w1-ui copy dialog --out ./vendor/j3w1/dialog
+npx --package=@j3w1/ui@4.0.0 j3w1-ui kit --components text-field,button,dialog --out ./vendor/j3w1/task
 ```
+<!-- ui-copy:end -->
 
-- Installed from a tarball: run the installed `j3w1-ui` binary instead of npx.
-- The CLI checks all source bytes before it writes. It rejects unknown components
-  and symlink destinations, and refuses existing destinations.
-- Keep `element.html`, `component.css`, `tokens.css`, the whole `runtime/`
-  closure, the manifest and the licence notices together.
-- Multi-component kits put each complete bundle in its own named directory. Do
-  not flatten files whose names collide.
-
-The package manifest keeps declared implementation apart from run evidence.
-`index.json` is the compact discovery index; `contracts/<id>.json` and
-`examples/<id>.json` keep small tasks bounded. Canonical exports keep
-eligibility, decision disclosures and the mapping/lock workflow, so existing
-canonical-mapping integrations keep working. Record official package use
-separately, with its exact package identity.
+From a tarball install, run the installed `j3w1-ui` binary instead of npx.
+The CLI checks every source byte before writing and refuses unknown
+components, symlinks and existing destinations. Keep `element.html`,
+`component.css`, `tokens.css`, the whole `runtime/` closure, the manifest and
+the licence notices together; a kit gives each bundle its own directory.
+`index.json` is the discovery index, and `contracts/<id>.json` and
+`examples/<id>.json` keep small tasks bounded.
 
 ## Troubleshooting and upgrades
 
-- Unknown custom tag: load browser registration and configure the Vue compiler.
-- Unstyled control: load tokens and the matching component stylesheet; keep the
-  example's native children and canonical classes.
-- Missing form value: check the native control's name, checked/disabled state
-  and actual owning form. Do not add a duplicate hidden field to a native input.
-- Stale behavior after changing children: call `refresh()` after your
-  framework's DOM update and keep IDs unique.
-- Registration conflict: remove the second implementation or version; never
-  silently replace a class already in the Custom Elements registry.
-- Copy integrity failure: fetch the pinned artifact again and check its digest.
-  Never delete or bypass integrity checks.
-
-To upgrade:
-
-1. Install into a clean fixture.
-2. Review the migration notes and changed contracts.
-3. Exercise your real form and keyboard flows.
-4. Update the package lock and your integration record together.
-
-Browser results apply only to the tested artifact and environment. Manual
-screen-reader and physical-device testing are separate evidence, never inferred
-from automated checks.
+1. Install into a clean fixture; read the notes below, the changelog and the
+   changed component contracts (`contracts/<id>.json`, the component pages).
+2. Exercise your real form and keyboard flows.
+3. Update the lockfile and your integration record together.
+
+- **4.0.0** (D-033): prose and interface text are rose; content headings use
+  `color.text.heading`; bold inherits its colour. Replace heading uses of
+  `text.prose` with `text.heading` and drop colour rules attached only to
+  bold (`docs/rose-typography-migration.md`).
+- **3.0.0** (D-032): terminal slot 6 is coral `#ff7a66`, the prompt gets its
+  own background role and bright rose `#ffa2a7` text, and
+  `color.primitive.ansi-readable.6` is removed.
+- **2.0.0** (D-029, D-030): the dim terminal slots and two code syntax reds are
+  lifted; opt-in `code.hued.*` syntax roles are added.
+- **1.0.0** (D-023): True Black / Rose becomes the default; read
+  `docs/true-black-rose-migration.md` before replacing 0.1.0 tokens.
+
+Component behaviour did not change in 2.0.0 or 3.0.0. If something breaks:
+an unknown tag needs browser registration (and the Vue compiler setting); an
+unstyled control needs tokens and its stylesheet; a missing form value means
+checking the native control's name, state and owning form, never adding a
+hidden duplicate; a registration conflict means removing the second version;
+a copy integrity failure means fetching the pinned artifact again, never
+bypassing the check. Browser results cover only the tested artifact and
+environment; manual screen-reader and device testing are separate evidence.
diff --git a/exports/components/admin-form.brief.txt b/exports/components/admin-form.brief.txt
index 203dfdd94..1af5541da 100644
--- a/exports/components/admin-form.brief.txt
+++ b/exports/components/admin-form.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — admin-form
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/admin-form.json
 spec: spec/components/admin-form.md  site: https://j3w1.github.io/theme/reference/#c-admin-form
 maturity: stable  priority: R1
@@ -49,10 +49,10 @@ Tokens (resolved):
 State dependency disclosures: D-007
 
 States: default, invalid, busy, disabled
-  default: rest tokens of every component on {color.surface.default}; the current step carries the indicator bar, future steps are disabled [`aria-current="step"`]
-  invalid: the name and hostname fields take the 2px {color.status.danger.border} and show their ✕ messages; the current step's marker becomes ✕; a danger alert on {color.status.danger.tint} summarising the two fields replaces the notice; the other fields stay at rest [border width 1 → 2px; glyphs; `aria-invalid`; `role="alert"`]
-  busy: Continue shows the static ⋯ glyph in {color.action.primary.text}; the form carries `aria-busy`; nothing shrinks or animates [glyph; `aria-busy`; cursor: progress]
-  disabled: every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover anywhere [`disabled` on the wrapping fieldset; cursor: not-allowed; never opacity]
+  default: every component's rest tokens on {color.surface.default}; the current step carries the indicator bar, future steps are disabled [`aria-current="step"`]
+  invalid: name and hostname take the 2px {color.status.danger.border} and ✕ messages; the current step's marker becomes ✕; a danger summary on {color.status.danger.tint} naming the two fields replaces the notice; other fields stay at rest [border 1 → 2px; glyphs; `aria-invalid`; `role="alert"`]
+  busy: Continue shows the static ⋯ in {color.action.primary.text}; nothing shrinks or animates [glyph; `aria-busy` on the form; cursor: progress]
+  disabled: every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover [`disabled` on the wrapping fieldset; cursor: not-allowed; never opacity]
 
 Keyboard:
   Tab / Shift+Tab: Breadcrumb links, the reachable step buttons, then every field in reading order, then Back, Save draft and Continue; the file-input's native input is the stop and its button label is drawn with the ring.
diff --git a/exports/components/admin-form.json b/exports/components/admin-form.json
index 2a405a80e..0283a0047 100644
--- a/exports/components/admin-form.json
+++ b/exports/components/admin-form.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "admin-form",
   "family": "composed",
   "maturity": "stable",
@@ -20,8 +20,8 @@
     "maturity": "stable",
     "specified": true,
     "demonstrated": true,
-    "tested": false,
-    "testImplemented": false,
+    "tested": true,
+    "testImplemented": true,
     "states": 4
   },
   "title": "Admin form",
@@ -524,7 +524,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "rest tokens of every component on {color.surface.default}; the current step carries the indicator bar, future steps are disabled",
+      "visual": "every component's rest tokens on {color.surface.default}; the current step carries the indicator bar, future steps are disabled",
       "channel": "`aria-current=\"step\"`",
       "tokens": {
         "fg": {
@@ -569,8 +569,8 @@
     },
     {
       "state": "invalid",
-      "visual": "the name and hostname fields take the 2px {color.status.danger.border} and show their ✕ messages; the current step's marker becomes ✕; a danger alert on {color.status.danger.tint} summarising the two fields replaces the notice; the other fields stay at rest",
-      "channel": "border width 1 → 2px; glyphs; `aria-invalid`; `role=\"alert\"`",
+      "visual": "name and hostname take the 2px {color.status.danger.border} and ✕ messages; the current step's marker becomes ✕; a danger summary on {color.status.danger.tint} naming the two fields replaces the notice; other fields stay at rest",
+      "channel": "border 1 → 2px; glyphs; `aria-invalid`; `role=\"alert\"`",
       "tokens": {
         "fg": {
           "alias": "color.status.danger.text",
@@ -612,8 +612,8 @@
     },
     {
       "state": "busy",
-      "visual": "Continue shows the static ⋯ glyph in {color.action.primary.text}; the form carries `aria-busy`; nothing shrinks or animates",
-      "channel": "glyph; `aria-busy`; cursor: progress",
+      "visual": "Continue shows the static ⋯ in {color.action.primary.text}; nothing shrinks or animates",
+      "channel": "glyph; `aria-busy` on the form; cursor: progress",
       "tokens": {
         "fg": {
           "alias": "color.action.primary.text",
@@ -643,7 +643,7 @@
     },
     {
       "state": "disabled",
-      "visual": "every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover anywhere",
+      "visual": "every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover",
       "channel": "`disabled` on the wrapping fieldset; cursor: not-allowed; never opacity",
       "tokens": {}
     }
@@ -705,7 +705,7 @@
     "table"
   ],
   "specimens": [],
-  "nonExamples": "A rounded card with a drop shadow around the form. A Material stepper with\ncircular numbered badges and a connecting line. A red banner across the\nwhole form instead of the summary alert plus field messages. Fields whose\nborders glow red. A spinner replacing the Continue label. Saving while the\nfields fade to half opacity. Placing the actions in a sticky footer bar with\na shadow.",
+  "nonExamples": "A rounded card with a drop shadow. A Material stepper with numbered circles\nand a connecting line. A red banner across the whole form instead of the\nsummary alert plus field messages. Field borders that glow red. A spinner\nreplacing the Continue label. Fields fading to half opacity while saving. A\nsticky footer bar with a shadow.",
   "contrast": [
     {
       "label": "admin-form default text",
diff --git a/exports/components/alert.brief.txt b/exports/components/alert.brief.txt
index 37909003a..9b1579e1b 100644
--- a/exports/components/alert.brief.txt
+++ b/exports/components/alert.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — alert
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/alert.json
 spec: spec/components/alert.md  site: https://j3w1.github.io/theme/reference/#c-alert
 maturity: stable  priority: R1
@@ -30,8 +30,8 @@ Tokens (resolved):
 
 States: default, hover, focus-visible
   default: status tint, 1px status border, glyph and title in the status text colour [the glyph ✕ ! ✓ i ·]
-  hover: close button background → {color.action.tertiary.hover-bg}; the alert itself does not react [cursor: pointer on the button only]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the close button [the ring]
+  hover: close button → {color.action.tertiary.hover-bg}; the alert itself does not react [cursor: pointer on the button only]
+  focus-visible: 1px dashed {color.interaction.focus.ring} ring at −2px on the close button [the ring]
 
 Keyboard:
   Tab: Reaches the close button when present; the alert itself is never focusable.
diff --git a/exports/components/alert.json b/exports/components/alert.json
index 734c00f1d..718611e68 100644
--- a/exports/components/alert.json
+++ b/exports/components/alert.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "alert",
   "family": "feedback",
   "maturity": "stable",
@@ -347,7 +347,7 @@
     },
     {
       "state": "hover",
-      "visual": "close button background → {color.action.tertiary.hover-bg}; the alert itself does not react",
+      "visual": "close button → {color.action.tertiary.hover-bg}; the alert itself does not react",
       "channel": "cursor: pointer on the button only",
       "tokens": {
         "fg": {
@@ -378,7 +378,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the close button",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px on the close button",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -464,7 +464,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "A coloured left stripe with no border. A rounded, shadowed card. A banner\nthat slides in or auto-dismisses. Colour-only status without the glyph and a\nworded title. Using `role=\"alert\"` for success messages. A close button that\nis an icon with no accessible name. Fixed-position alerts covering content.",
+  "nonExamples": "A coloured left stripe with no border. A rounded, shadowed card. A banner\nthat slides in or auto-dismisses. Colour-only status without the glyph and a\nworded title. `role=\"alert\"` for success. A close icon with no accessible\nname. Fixed-position alerts covering content.",
   "contrast": [
     {
       "label": "alert default text",
diff --git a/exports/components/avatar.brief.txt b/exports/components/avatar.brief.txt
index 009ad5602..3087d639c 100644
--- a/exports/components/avatar.brief.txt
+++ b/exports/components/avatar.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — avatar
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/avatar.json
 spec: spec/components/avatar.md  site: https://j3w1.github.io/theme/reference/#c-avatar
 maturity: stable  priority: R2
@@ -16,17 +16,17 @@ Tokens (resolved):
   control.bg                            #000000  ({color.surface.input})  use
   control.focus                         #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default  1px  ({border.width.default})  use
+  dependency.role-focus-offset          -2px  ({focus.offset})  use
   dependency.role-font-weight-bold      700  ({font.weight.bold})  use
   dependency.role-radius-none           0px  ({radius.none})  use
   dependency.role-space-12              12px  ({space.12})  use
-  dependency.role-space-2               2px  ({space.2})  use
   dependency.role-space-32              32px  ({space.32})  use
 State dependency disclosures: D-007
 
 States: default, loading, error
-  default: Initials or loaded image. [Full name on the image container.]
-  loading: Fallback remains visible. [No loss of the full accessible name while loading.]
-  error: Fallback remains visible. [Image failure does not remove the entity name.]
+  default: Initials or the loaded image. [Full name on the image container.]
+  loading: Fallback stays visible. [Full accessible name kept.]
+  error: Fallback stays visible. [Full accessible name kept.]
 
 Keyboard:
   Tab: No additional tab stop. An enclosing link remains native.
diff --git a/exports/components/avatar.json b/exports/components/avatar.json
index 4ad490b36..fb1f97388 100644
--- a/exports/components/avatar.json
+++ b/exports/components/avatar.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "avatar",
   "family": "display",
   "maturity": "stable",
@@ -149,9 +149,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-font-weight-bold": {
-      "alias": "font.weight.bold",
-      "value": "700",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -161,9 +161,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-font-weight-bold": {
+      "alias": "font.weight.bold",
+      "value": "700",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -173,9 +173,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -185,9 +185,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -213,7 +213,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Initials or loaded image.",
+      "visual": "Initials or the loaded image.",
       "channel": "Full name on the image container.",
       "tokens": {
         "fg": {
@@ -258,14 +258,14 @@
     },
     {
       "state": "loading",
-      "visual": "Fallback remains visible.",
-      "channel": "No loss of the full accessible name while loading.",
+      "visual": "Fallback stays visible.",
+      "channel": "Full accessible name kept.",
       "tokens": {}
     },
     {
       "state": "error",
-      "visual": "Fallback remains visible.",
-      "channel": "Image failure does not remove the entity name.",
+      "visual": "Fallback stays visible.",
+      "channel": "Full accessible name kept.",
       "tokens": {}
     }
   ],
diff --git a/exports/components/badge.brief.txt b/exports/components/badge.brief.txt
index 750314488..5b6c7ced8 100644
--- a/exports/components/badge.brief.txt
+++ b/exports/components/badge.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — badge
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/badge.json
 spec: spec/components/badge.md  site: https://j3w1.github.io/theme/reference/#c-badge
 maturity: stable  priority: R1
@@ -33,7 +33,7 @@ Tokens (resolved):
 
 States: default, empty
   default: fill, glyph and text for the status; or the outline form [the glyph; the text]
-  empty: an 8px square dot in the status fill; the glyph and text visually hidden [`role="img"` with `aria-label`, or the hidden text; the dot's position beside its subject]
+  empty: an 8px square dot in the status fill; glyph and text visually hidden [`role="img"` with `aria-label`, or the hidden text; the dot's position beside its subject]
 
 ARIA: native span; an empty badge is role="img" with aria-label
 Responsive: A badge never wraps; the surrounding line wraps around it. Long labels are a design error, not a truncation case. RTL keeps the glyph at the inline start.
diff --git a/exports/components/badge.json b/exports/components/badge.json
index 76242649a..106dcc690 100644
--- a/exports/components/badge.json
+++ b/exports/components/badge.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "badge",
   "family": "display",
   "maturity": "stable",
@@ -360,7 +360,7 @@
     },
     {
       "state": "empty",
-      "visual": "an 8px square dot in the status fill; the glyph and text visually hidden",
+      "visual": "an 8px square dot in the status fill; glyph and text visually hidden",
       "channel": "`role=\"img\"` with `aria-label`, or the hidden text; the dot's position beside its subject",
       "tokens": {
         "fg": {
@@ -419,7 +419,7 @@
     "filterable-table",
     "settings-panel"
   ],
-  "nonExamples": "Rounded or pill badges. A badge that is clickable. A status shown by colour\nwithout its glyph. A count badge that hides its unit from assistive\ntechnology. Purple, cyan or magenta statuses. A badge in body type. A badge\nwhose text wraps. A dot without a name.",
+  "nonExamples": "Rounded or pill badges. A clickable badge. A status by colour without its\nglyph. A count unit hidden from assistive technology. Purple, cyan or magenta\nstatuses. A badge in body type. Wrapping text. A dot without a name.",
   "contrast": [
     {
       "label": "badge default text",
diff --git a/exports/components/breadcrumbs.brief.txt b/exports/components/breadcrumbs.brief.txt
index 8858a6083..0698cd4fe 100644
--- a/exports/components/breadcrumbs.brief.txt
+++ b/exports/components/breadcrumbs.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — breadcrumbs
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/breadcrumbs.json
 spec: spec/components/breadcrumbs.md  site: https://j3w1.github.io/theme/reference/#c-breadcrumbs
 maturity: stable  priority: R1
@@ -12,7 +12,7 @@ Tokens (resolved):
   link.text          #f73f35  ({color.text.link})  use
   link.underline     #dc282e  ({color.text.link-underline})  use
   link.text-hover    #f4eeee  ({color.text.link-hover})  use
-  link.bg-hover      #630f0d  ({color.interaction.hover.bg-strong})  use
+  link.bg-hover      #1c0a09  ({color.interaction.hover.bg})  use
   link.ring          #e53935  ({color.interaction.focus.ring})  use
   current.text       #ffa2a7  ({color.text.bright})  use
   separator.text     #bd787d  ({color.text.muted})  use
@@ -21,10 +21,10 @@ Tokens (resolved):
 
 States: default, hover, focus-visible, current, truncated
   default: links {color.text.link}, 1px underline; separators {color.text.muted}; current {color.text.bright} [underline on links; none on the current page]
-  hover: link background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover} [underline thickens 1px → 2px; cursor]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px around the link [the ring]
-  current: text {color.text.bright}; no underline; no hover [`aria-current="page"`; no underline]
-  truncated: the middle levels are replaced by an `…` button in {color.text.default} [`aria-expanded="false"` on the button; its label counts the hidden levels]
+  hover: link → {color.interaction.hover.bg}, text {color.text.link-hover} [underline 1px → 2px; cursor]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px around the link [the ring]
+  current: {color.text.bright}; no underline; no hover [`aria-current="page"`; no underline]
+  truncated: middle levels replaced by an `…` button in {color.text.default} [`aria-expanded="false"`; its label counts the hidden levels]
 
 Keyboard:
   Tab / Shift+Tab: Moves through the links in order; the current page is skipped when it is not a link.
diff --git a/exports/components/breadcrumbs.json b/exports/components/breadcrumbs.json
index d8c3b7b70..7e554c729 100644
--- a/exports/components/breadcrumbs.json
+++ b/exports/components/breadcrumbs.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "breadcrumbs",
   "family": "navigation",
   "maturity": "stable",
@@ -108,8 +108,8 @@
       }
     },
     "link.bg-hover": {
-      "alias": "color.interaction.hover.bg-strong",
-      "value": "#630f0d",
+      "alias": "color.interaction.hover.bg",
+      "value": "#1c0a09",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -214,8 +214,8 @@
     },
     {
       "state": "hover",
-      "visual": "link background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover}",
-      "channel": "underline thickens 1px → 2px; cursor",
+      "visual": "link → {color.interaction.hover.bg}, text {color.text.link-hover}",
+      "channel": "underline 1px → 2px; cursor",
       "tokens": {
         "fg": {
           "alias": "color.text.link-hover",
@@ -230,8 +230,8 @@
           }
         },
         "bg": {
-          "alias": "color.interaction.hover.bg-strong",
-          "value": "#630f0d",
+          "alias": "color.interaction.hover.bg",
+          "value": "#1c0a09",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -245,7 +245,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px around the link",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px around the link",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -288,7 +288,7 @@
     },
     {
       "state": "current",
-      "visual": "text {color.text.bright}; no underline; no hover",
+      "visual": "{color.text.bright}; no underline; no hover",
       "channel": "`aria-current=\"page\"`; no underline",
       "tokens": {
         "fg": {
@@ -319,8 +319,8 @@
     },
     {
       "state": "truncated",
-      "visual": "the middle levels are replaced by an `…` button in {color.text.default}",
-      "channel": "`aria-expanded=\"false\"` on the button; its label counts the hidden levels",
+      "visual": "middle levels replaced by an `…` button in {color.text.default}",
+      "channel": "`aria-expanded=\"false\"`; its label counts the hidden levels",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -388,7 +388,7 @@
     "settings-panel",
     "filterable-table"
   ],
-  "nonExamples": "Chevrons, arrows or bullets as separators. A trail that ends with the site\nname instead of the current page. The current page drawn as a link with an\nunderline. Automatic truncation by `text-overflow` that hides levels without\na way to reach them. A trail that scrolls horizontally. Uppercase or\nletter-spaced items. Separators that are read aloud.",
+  "nonExamples": "Chevrons, arrows or bullets as separators. A trail ending with the site name\ninstead of the current page. The current page as an underlined link.\n`text-overflow` truncation that hides unreachable levels. A horizontally\nscrolling trail. Uppercase or letter-spaced items. Separators read aloud.",
   "contrast": [
     {
       "label": "breadcrumbs default text",
@@ -409,10 +409,10 @@
       "kind": "text",
       "min": 4.5,
       "fg": "color.text.link-hover",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#f4eeee",
-      "bgHex": "#630f0d",
-      "ratio": 11.41,
+      "bgHex": "#1c0a09",
+      "ratio": 16.7,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/button-group.brief.txt b/exports/components/button-group.brief.txt
index e35f637dc..0e59ba564 100644
--- a/exports/components/button-group.brief.txt
+++ b/exports/components/button-group.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — button-group
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/button-group.json
 spec: spec/components/button-group.md  site: https://j3w1.github.io/theme/reference/#c-button-group
 maturity: stable  priority: R2
@@ -13,7 +13,12 @@ Tokens (resolved):
   root.border                                         #a3676b  ({color.border.control})  use-and-report (D-007)
   heading.text                                        #ffa2a7  ({color.text.bright})  use
   secondary.text                                      #bd787d  ({color.text.muted})  use
-  control.bg                                          #000000  ({color.surface.input})  use
+  control.bg                                          rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
+  control.text                                        #ffa2a7  ({color.action.secondary.text})  use
+  control.border                                      #a3676b  ({color.action.secondary.border})  use
+  control.bg-hover                                    #630f0d  ({color.action.secondary.hover-bg})  use
+  control.bg-active                                   #420f0c  ({color.action.secondary.pressed-bg})  use
+  control.border-active                               #e53935  ({color.border.active})  use
   control.focus                                       #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default                1px  ({border.width.default})  use
   dependency.role-color-border-disabled               #7d1310  ({color.border.disabled})  use
@@ -21,15 +26,15 @@ Tokens (resolved):
   dependency.role-color-text-disabled                 #8a5559  ({color.text.disabled})  use
   dependency.role-density-comfortable-control-height  32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height      24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                        -2px  ({focus.offset})  use
   dependency.role-radius-none                         0px  ({radius.none})  use
   dependency.role-space-12                            12px  ({space.12})  use
-  dependency.role-space-2                             2px  ({space.2})  use
   dependency.role-space-4                             4px  ({space.4})  use
   dependency.role-space-8                             8px  ({space.8})  use
 State dependency disclosures: D-007
 
 States: default, focus-visible, disabled
-  default: Named content on the default surface. [Native text and structure.]
+  default: Named content on the default surface. Its buttons are the secondary button (button.md). [Native text and structure.]
   focus-visible: Dashed focus ring. [Native keyboard focus position.]
   disabled: Disabled semantic foreground, background and border at full opacity. [Native disabled state blocks activation.]
 
diff --git a/exports/components/button-group.json b/exports/components/button-group.json
index 0528fea7b..4c6c97f98 100644
--- a/exports/components/button-group.json
+++ b/exports/components/button-group.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "button-group",
   "family": "actions",
   "maturity": "stable",
@@ -114,11 +114,71 @@
       }
     },
     "control.bg": {
-      "alias": "color.surface.input",
-      "value": "#000000",
-      "status": "approved",
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
       "deprecated": false,
-      "decisionId": "D-023",
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
       "eligibility": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -209,9 +269,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -221,9 +281,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -233,9 +293,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -273,7 +333,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Named content on the default surface.",
+      "visual": "Named content on the default surface. Its buttons are the secondary button (button.md).",
       "channel": "Native text and structure.",
       "tokens": {
         "fg": {
@@ -360,7 +420,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls, colour-only status, drag-only operations, hidden required\ninstructions, stolen focus or an invented service success.",
   "contrast": [
     {
       "label": "button-group default text",
@@ -426,6 +486,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/exports/components/button.brief.txt b/exports/components/button.brief.txt
index 744954ba7..44635ed5e 100644
--- a/exports/components/button.brief.txt
+++ b/exports/components/button.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — button
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/button.json
 spec: spec/components/button.md  site: https://j3w1.github.io/theme/reference/#c-button
 maturity: stable  priority: R1
@@ -42,10 +42,10 @@ Tokens (resolved):
 States: default, hover, focus-visible, active, disabled, loading
   default: primary: {color.action.primary.bg} fill, {color.action.primary.text}, 1px {color.action.primary.border}; secondary: 1px {color.action.secondary.border}, {color.action.secondary.text}; tertiary: {color.action.tertiary.text}, no border; destructive: 1px {color.action.destructive.border}, {color.action.destructive.text} [—]
   hover: primary → {color.action.primary.hover-bg}; secondary → {color.action.secondary.hover-bg}; tertiary → {color.action.tertiary.hover-bg}; destructive fills {color.action.destructive.hover-bg} with {color.action.destructive.hover-text} [cursor: pointer; hover-capable pointers only]
-  focus-visible: ring 1px dashed at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill [the ring]
-  active: primary → {color.action.primary.pressed-bg}; secondary → {color.action.secondary.pressed-bg}; tertiary → {color.interaction.pressed.bg}; destructive → {color.action.destructive.pressed-bg}; primary keeps {color.action.primary.border}, secondary and tertiary use {color.border.active}, destructive keeps {color.action.destructive.border} (D-015) [border change on secondary and tertiary; no translation or scale]
-  disabled: {color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}, every tone alike; no hover or active styling [`disabled`; cursor: not-allowed; never opacity]
-  loading: size unchanged; the static `⋯` glyph replaces the icon; the button keeps its tone and stays focusable but ignores activation [glyph; `aria-busy`]
+  focus-visible: 1px dashed ring at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill [the ring]
+  active: fill: primary {color.action.primary.pressed-bg}, secondary {color.action.secondary.pressed-bg}, tertiary {color.interaction.pressed.bg}, destructive {color.action.destructive.pressed-bg}; border: primary and destructive keep theirs, secondary and tertiary take {color.border.active} (D-015) [border change on secondary and tertiary; no translation or scale]
+  disabled: {color.text.disabled} on {color.interaction.disabled.bg}, 1px {color.border.disabled}, every tone alike; no hover or active styling [`disabled`; cursor: not-allowed; never opacity]
+  loading: size and tone unchanged; the static `⋯` glyph replaces the icon; stays focusable, ignores activation [glyph; `aria-busy`]
 
 Keyboard:
   Tab / Shift+Tab: Moves focus to and from the button in document order.
diff --git a/exports/components/button.json b/exports/components/button.json
index 7dfe1b679..bd4061628 100644
--- a/exports/components/button.json
+++ b/exports/components/button.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "button",
   "family": "actions",
   "maturity": "stable",
@@ -497,7 +497,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill",
+      "visual": "1px dashed ring at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -540,7 +540,7 @@
     },
     {
       "state": "active",
-      "visual": "primary → {color.action.primary.pressed-bg}; secondary → {color.action.secondary.pressed-bg}; tertiary → {color.interaction.pressed.bg}; destructive → {color.action.destructive.pressed-bg}; primary keeps {color.action.primary.border}, secondary and tertiary use {color.border.active}, destructive keeps {color.action.destructive.border} (D-015)",
+      "visual": "fill: primary {color.action.primary.pressed-bg}, secondary {color.action.secondary.pressed-bg}, tertiary {color.interaction.pressed.bg}, destructive {color.action.destructive.pressed-bg}; border: primary and destructive keep theirs, secondary and tertiary take {color.border.active} (D-015)",
       "channel": "border change on secondary and tertiary; no translation or scale",
       "tokens": {
         "fg": {
@@ -571,13 +571,13 @@
     },
     {
       "state": "disabled",
-      "visual": "{color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}, every tone alike; no hover or active styling",
+      "visual": "{color.text.disabled} on {color.interaction.disabled.bg}, 1px {color.border.disabled}, every tone alike; no hover or active styling",
       "channel": "`disabled`; cursor: not-allowed; never opacity",
       "tokens": {}
     },
     {
       "state": "loading",
-      "visual": "size unchanged; the static `⋯` glyph replaces the icon; the button keeps its tone and stays focusable but ignores activation",
+      "visual": "size and tone unchanged; the static `⋯` glyph replaces the icon; stays focusable, ignores activation",
       "channel": "glyph; `aria-busy`",
       "tokens": {
         "fg": {
@@ -650,7 +650,7 @@
     "settings-panel",
     "filterable-table"
   ],
-  "nonExamples": "Rounded corners or pill shapes. Two filled buttons in one view. A red\nfilled destructive button at rest. A hover that only changes text colour.\nTranslating or scaling the button on press. A spinner inside the button.\nDisabling with opacity. A `<div>` or `<a>` styled as a button. A gradient or\nshadow to suggest depth.",
+  "nonExamples": "Rounded or pill shapes. Two filled buttons in one view. A red filled\ndestructive button at rest. A hover that only changes text colour.\nTranslating or scaling on press. A spinner inside the button. Disabling with\nopacity. A `<div>` or `<a>` styled as a button. A gradient or shadow for\ndepth.",
   "contrast": [
     {
       "label": "button default text",
@@ -741,7 +741,7 @@
       "bgHex": "#100c0c",
       "ratio": 1.83,
       "pass": false,
-      "waiver": "the fill is not the boundary of the control; the label text at 9.28:1 identifies it, and hover, active and focus each add a second channel"
+      "waiver": "the fill is not the boundary of the control; the label text identifies it, and hover, active and focus each add a second channel"
     },
     {
       "label": "secondary text at rest",
diff --git a/exports/components/card.brief.txt b/exports/components/card.brief.txt
index d731aa068..a5a647042 100644
--- a/exports/components/card.brief.txt
+++ b/exports/components/card.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — card
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/card.json
 spec: spec/components/card.md  site: https://j3w1.github.io/theme/reference/#c-card
 maturity: stable  priority: R1
@@ -18,15 +18,15 @@ Tokens (resolved):
   meta.text          #bd787d  ({color.text.muted})  use
   selected.bg        #531310  ({color.interaction.selection.bg})  use
   selected.text      #f4eeee  ({color.interaction.selection.text})  use
-  selected.ring      #ffa2a7  ({color.interaction.focus.ring-container})  use
+  selected.ring      #e53935  ({color.interaction.focus.ring})  use
 State dependency disclosures: D-007
 
 States: default, hover, focus-visible, selected, selected+focus-visible
   default: 1px {color.border.default} on {color.surface.default} [—]
   hover: link and selectable cards only: background → {color.interaction.hover.bg}; border → {color.border.control} [cursor: pointer; the border lightens from decorative to control]
   focus-visible: container ring 2px solid {color.interaction.focus.ring-container} at −3px [the ring]
-  selected: fill {color.interaction.selection.bg} with {color.interaction.selection.text} on every line [`aria-selected="true"`; the fill's on-fill text]
-  selected+focus-visible: the fill and the 2px ring in {color.interaction.focus.ring-container} [both visible at once]
+  selected: fill {color.interaction.selection.bg}, {color.interaction.selection.text} on every line [`aria-selected="true"`; the on-fill text]
+  selected+focus-visible: the fill and 1px dashed {color.interaction.focus.ring} at −2px [both visible at once]
 
 Keyboard:
   Tab: Reaches a link card as one stop; reaches a selectable group at its selected card (roving tabindex).
diff --git a/exports/components/card.json b/exports/components/card.json
index 9609b314d..ca19cb2fe 100644
--- a/exports/components/card.json
+++ b/exports/components/card.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "card",
   "family": "display",
   "maturity": "stable",
@@ -188,8 +188,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -322,8 +322,8 @@
     },
     {
       "state": "selected",
-      "visual": "fill {color.interaction.selection.bg} with {color.interaction.selection.text} on every line",
-      "channel": "`aria-selected=\"true\"`; the fill's on-fill text",
+      "visual": "fill {color.interaction.selection.bg}, {color.interaction.selection.text} on every line",
+      "channel": "`aria-selected=\"true\"`; the on-fill text",
       "tokens": {
         "fg": {
           "alias": "color.interaction.selection.text",
@@ -353,7 +353,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the fill and the 2px ring in {color.interaction.focus.ring-container}",
+      "visual": "the fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -381,8 +381,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -442,7 +442,7 @@
     "settings-panel",
     "filterable-table"
   ],
-  "nonExamples": "A drop shadow or elevation. Rounded corners. A hover lift or scale. A static\ncard with a hover fill. A card whose only clickable part is an invisible\noverlay. A link card containing buttons. A selected card shown by a border\ncolour alone without the fill and `aria-selected`. Muted metadata left on the\nselection fill.",
+  "nonExamples": "A shadow or elevation. Rounded corners. A hover lift or scale. A hover fill\non a static card. An invisible overlay as the only clickable part. A link\ncard containing buttons. A selected card shown by border colour alone,\nwithout the fill and `aria-selected`. Muted metadata left on the selection\nfill.",
   "contrast": [
     {
       "label": "card default text",
@@ -540,11 +540,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -611,7 +611,7 @@
       "bgHex": "#100c0c",
       "ratio": 1.36,
       "pass": true,
-      "waiver": "the default border groups content; a link or selectable card gains border.control on hover and the container ring on focus"
+      "waiver": "the default border groups content; interactive cards gain border.control on hover and a focus ring; selected cards use the ordinary ring"
     }
   ]
 }
diff --git a/exports/components/chart.brief.txt b/exports/components/chart.brief.txt
index 863a81cf6..52c17a510 100644
--- a/exports/components/chart.brief.txt
+++ b/exports/components/chart.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — chart
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/chart.json
 spec: spec/components/chart.md  site: https://j3w1.github.io/theme/reference/#c-chart
 maturity: stable  priority: R2
@@ -19,12 +19,12 @@ Tokens (resolved):
   dependency.role-color-chart-axis      #9e231f  ({color.chart.axis})  use
   dependency.role-color-chart-grid      #2b0e0d  ({color.chart.grid})  use
   dependency.role-color-chart-label     #bd787d  ({color.chart.label})  use
+  dependency.role-focus-offset          -2px  ({focus.offset})  use
   series.primary                        #f73f35  ({color.chart.series-2})  use
   header.text                           #ffa2a7  ({color.text.bright})  use
   row.text                              #e99499  ({color.text.default})  use
   dependency.role-radius-none           0px  ({radius.none})  use
   dependency.role-space-12              12px  ({space.12})  use
-  dependency.role-space-2               2px  ({space.2})  use
   dependency.role-space-8               8px  ({space.8})  use
 State dependency disclosures: D-007
 
diff --git a/exports/components/chart.json b/exports/components/chart.json
index d1b842613..bc347c06c 100644
--- a/exports/components/chart.json
+++ b/exports/components/chart.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "chart",
   "family": "display",
   "maturity": "stable",
@@ -185,6 +185,18 @@
         "decisionIds": []
       }
     },
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "series.primary": {
       "alias": "color.chart.series-2",
       "value": "#f73f35",
@@ -245,18 +257,6 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
-      "status": "observed",
-      "deprecated": false,
-      "decisionId": null,
-      "eligibility": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      }
-    },
     "dependency.role-space-8": {
       "alias": "space.8",
       "value": "8px",
@@ -356,7 +356,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls, colour-only status, drag-only operations, hidden required\ninstructions, stolen focus or an invented service success.",
   "contrast": [
     {
       "label": "chart default text",
diff --git a/exports/components/checkbox.brief.txt b/exports/components/checkbox.brief.txt
index d8a57ad06..0f12c92f1 100644
--- a/exports/components/checkbox.brief.txt
+++ b/exports/components/checkbox.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — checkbox
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/checkbox.json
 spec: spec/components/checkbox.md  site: https://j3w1.github.io/theme/reference/#c-checkbox
 maturity: stable  priority: R1
@@ -29,14 +29,14 @@ State dependency disclosures: D-007
 
 States: default, hover, focus-visible, checked, mixed, checked+focus-visible, checked+disabled, disabled, invalid, required
   default: 16px box, 1px {color.border.control} on {color.surface.input}; text {color.text.default} [—]
-  hover: box background → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg} [cursor: pointer; hover-capable pointers only]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px around the box [the ring]
-  checked: box fills {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control} [the ✓ glyph; `checked`]
-  mixed: box fills {color.action.primary.bg}; – in {color.action.primary.text} [the – glyph; `indeterminate` / `aria-checked="mixed"`]
-  checked+focus-visible: the fill and a ring in {color.interaction.focus.ring-container} [glyph and ring]
-  checked+disabled: box {color.interaction.disabled.bg} with 1px {color.border.disabled}; ✓ and text in {color.text.disabled} [glyph; `disabled`; cursor: not-allowed]
-  disabled: box {color.interaction.disabled.bg} with 1px {color.border.disabled}; text {color.text.disabled} [`disabled`; cursor: not-allowed]
-  invalid: box border 2px {color.status.danger.border}; message with the ✕ glyph [border width 1 → 2px; glyph; `aria-invalid`]
+  hover: box → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg} [cursor: pointer; hover-capable pointers only]
+  focus-visible: 1px dashed {color.interaction.focus.ring} ring at −2px around the box [the ring]
+  checked: fill {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control} [✓ glyph; `checked`]
+  mixed: fill {color.action.primary.bg}; – in {color.action.primary.text} [– glyph; `indeterminate` / `aria-checked="mixed"`]
+  checked+focus-visible: the fill plus a {color.interaction.focus.ring-container} ring [glyph and ring]
+  checked+disabled: box {color.interaction.disabled.bg}, 1px {color.border.disabled}; ✓ and text {color.text.disabled} [glyph; `disabled`; cursor: not-allowed]
+  disabled: box {color.interaction.disabled.bg}, 1px {color.border.disabled}; text {color.text.disabled} [`disabled`; cursor: not-allowed]
+  invalid: 2px {color.status.danger.border} box border; message with the ✕ glyph [border 1 → 2px; glyph; `aria-invalid`]
   required: `*` after the text or legend in {color.status.danger.text} plus visually hidden "required" [`required`; the mark]
 
 Keyboard:
diff --git a/exports/components/checkbox.json b/exports/components/checkbox.json
index 85a51bebb..b9dadf062 100644
--- a/exports/components/checkbox.json
+++ b/exports/components/checkbox.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "checkbox",
   "family": "forms-basic",
   "maturity": "stable",
@@ -307,7 +307,7 @@
     },
     {
       "state": "hover",
-      "visual": "box background → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg}",
+      "visual": "box → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg}",
       "channel": "cursor: pointer; hover-capable pointers only",
       "tokens": {
         "bg": {
@@ -340,7 +340,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px around the box",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px around the box",
       "channel": "the ring",
       "tokens": {
         "bg": {
@@ -385,8 +385,8 @@
     },
     {
       "state": "checked",
-      "visual": "box fills {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control}",
-      "channel": "the ✓ glyph; `checked`",
+      "visual": "fill {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control}",
+      "channel": "✓ glyph; `checked`",
       "tokens": {
         "fg": {
           "alias": "color.action.primary.text",
@@ -416,8 +416,8 @@
     },
     {
       "state": "mixed",
-      "visual": "box fills {color.action.primary.bg}; – in {color.action.primary.text}",
-      "channel": "the – glyph; `indeterminate` / `aria-checked=\"mixed\"`",
+      "visual": "fill {color.action.primary.bg}; – in {color.action.primary.text}",
+      "channel": "– glyph; `indeterminate` / `aria-checked=\"mixed\"`",
       "tokens": {
         "fg": {
           "alias": "color.action.primary.text",
@@ -447,7 +447,7 @@
     },
     {
       "state": "checked+focus-visible",
-      "visual": "the fill and a ring in {color.interaction.focus.ring-container}",
+      "visual": "the fill plus a {color.interaction.focus.ring-container} ring",
       "channel": "glyph and ring",
       "tokens": {
         "fg": {
@@ -490,20 +490,20 @@
     },
     {
       "state": "checked+disabled",
-      "visual": "box {color.interaction.disabled.bg} with 1px {color.border.disabled}; ✓ and text in {color.text.disabled}",
+      "visual": "box {color.interaction.disabled.bg}, 1px {color.border.disabled}; ✓ and text {color.text.disabled}",
       "channel": "glyph; `disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "disabled",
-      "visual": "box {color.interaction.disabled.bg} with 1px {color.border.disabled}; text {color.text.disabled}",
+      "visual": "box {color.interaction.disabled.bg}, 1px {color.border.disabled}; text {color.text.disabled}",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "invalid",
-      "visual": "box border 2px {color.status.danger.border}; message with the ✕ glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border} box border; message with the ✕ glyph",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "bg": {
           "alias": "color.surface.input",
@@ -608,7 +608,7 @@
     "admin-form",
     "filterable-table"
   ],
-  "nonExamples": "Rounded or circular boxes. A tick drawn with a border trick or an icon\nfont. A checked state shown by border colour alone with no glyph. A box\nsmaller than 16px or a row shorter than 24px. The mixed state used as a\nthird value. A checkbox that saves on change. Disabling by opacity. A div\nwith `role=\"checkbox\"`.",
+  "nonExamples": "Rounded or circular boxes. A tick drawn with a border trick or an icon font.\nA checked state shown by border colour alone. A box under 16px or a row under\n24px. The mixed state as a third value. Saving on change. Disabling by\nopacity. A div with `role=\"checkbox\"`.",
   "contrast": [
     {
       "label": "checkbox default border",
diff --git a/exports/components/chip.brief.txt b/exports/components/chip.brief.txt
index b7e11c251..cbebad98d 100644
--- a/exports/components/chip.brief.txt
+++ b/exports/components/chip.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — chip
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/chip.json
 spec: spec/components/chip.md  site: https://j3w1.github.io/theme/reference/#c-chip
 maturity: stable  priority: R1
@@ -19,7 +19,7 @@ Tokens (resolved):
   root.bg-disabled      #160b0b  ({color.interaction.disabled.bg})  use
   selected.bg           #531310  ({color.interaction.selection.bg})  use
   selected.text         #f4eeee  ({color.interaction.selection.text})  use
-  selected.ring         #ffa2a7  ({color.interaction.focus.ring-container})  use
+  selected.ring         #e53935  ({color.interaction.focus.ring})  use
   remove.text           #bd787d  ({color.text.muted})  use
   remove.text-hover     #ffa2a7  ({color.text.bright})  use
   remove.bg-hover       #630f0d  ({color.interaction.hover.bg-strong})  use
@@ -27,11 +27,11 @@ State dependency disclosures: D-007
 
 States: default, hover, focus-visible, selected, selected+focus-visible, disabled
   default: 1px {color.border.control} on {color.surface.default}; text {color.text.default} [—]
-  hover: background → {color.interaction.hover.bg}; the remove button → {color.interaction.hover.bg-strong} with {color.text.bright} [cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the chip or on the remove button [the ring]
-  selected: fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text}; the border takes the fill colour [`aria-pressed="true"`; the ✓ glyph]
-  selected+focus-visible: the fill and the ring in {color.interaction.focus.ring-container} [both visible at once]
-  disabled: text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no hover [`disabled`; cursor: not-allowed]
+  hover: background → {color.interaction.hover.bg}; remove button → {color.interaction.hover.bg-strong} with {color.text.bright} [cursor: pointer]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px on the chip or the remove button [the ring]
+  selected: fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text}; border takes the fill colour [`aria-pressed="true"`; the ✓ glyph]
+  selected+focus-visible: the fill and 1px dashed {color.interaction.focus.ring} at −2px [both visible at once]
+  disabled: {color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}; no hover [`disabled`; cursor: not-allowed]
 
 Keyboard:
   Tab / Shift+Tab: Reaches a filter chip, or the remove button of a removable chip; static chips are skipped.
diff --git a/exports/components/chip.json b/exports/components/chip.json
index 9bcff6220..fa03cf653 100644
--- a/exports/components/chip.json
+++ b/exports/components/chip.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "chip",
   "family": "display",
   "maturity": "stable",
@@ -200,8 +200,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -296,7 +296,7 @@
     },
     {
       "state": "hover",
-      "visual": "background → {color.interaction.hover.bg}; the remove button → {color.interaction.hover.bg-strong} with {color.text.bright}",
+      "visual": "background → {color.interaction.hover.bg}; remove button → {color.interaction.hover.bg-strong} with {color.text.bright}",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -341,7 +341,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the chip or on the remove button",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the chip or the remove button",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -398,7 +398,7 @@
     },
     {
       "state": "selected",
-      "visual": "fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text}; the border takes the fill colour",
+      "visual": "fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text}; border takes the fill colour",
       "channel": "`aria-pressed=\"true\"`; the ✓ glyph",
       "tokens": {
         "fg": {
@@ -429,7 +429,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the fill and the ring in {color.interaction.focus.ring-container}",
+      "visual": "the fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -457,8 +457,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -472,7 +472,7 @@
     },
     {
       "state": "disabled",
-      "visual": "text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no hover",
+      "visual": "{color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}; no hover",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     }
@@ -522,7 +522,7 @@
     "filterable-table",
     "admin-form"
   ],
-  "nonExamples": "Pill or rounded chips. A selected chip shown by a border colour alone\nwithout the fill and `aria-pressed`. A removable chip whose × has no name.\nA chip that is a link. A static tag that reacts to hover. Disabling by\nopacity. A chip whose label clips inside the border. A chip in caption\ntype (that is a badge).",
+  "nonExamples": "Pill or rounded chips. A selected chip shown by border colour alone, without\nthe fill and `aria-pressed`. A nameless ×. A chip that is a link. A static tag\nthat reacts to hover. Disabling by opacity. A label clipped by the border. A\nchip in caption type (that is a badge).",
   "contrast": [
     {
       "label": "chip default text",
@@ -646,11 +646,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/code-editor.brief.txt b/exports/components/code-editor.brief.txt
index b4cd0a8c4..1b1f59bc6 100644
--- a/exports/components/code-editor.brief.txt
+++ b/exports/components/code-editor.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — code-editor
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/code-editor.json
 spec: spec/components/code-editor.md  site: https://j3w1.github.io/theme/reference/#c-code-editor
 maturity: stable  priority: R1
@@ -47,11 +47,11 @@ State dependency disclosures: D-007
 
 States: default, focus-visible, selected, selected+container-inactive, current, read-only
   default: code on {color.code.bg}; comments italic; invalid text wavy-underlined in {color.code.syntax.invalid}; deprecated text struck through [italic, wavy underline, line-through]
-  focus-visible: container ring 2px {color.interaction.focus.ring-container} at −3px; a 1px {color.code.caret} bar; the caret line filled {color.code.current-line} across gutter and text; its number in {color.code.line-number-active} [the ring; the caret bar]
-  selected: the range filled {color.code.selection-bg}; syntax colours kept [the range is announced through the host's selection; the fill spans line ends]
-  selected+container-inactive: the same range in {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no caret, no ring [lightness drop between the two fills]
-  current: both characters of the matched pair outlined 1px solid {color.code.bracket-match} [the outline is a box, not a colour change]
-  read-only: gutter drops to {color.surface.sunken} behind the same line numbers; the gutter rule becomes dotted; no caret is drawn [`aria-readonly`; dotted rule; missing caret]
+  focus-visible: 2px {color.interaction.focus.ring-container} ring at −3px; 1px {color.code.caret} bar; caret line filled {color.code.current-line} across gutter and text, its number {color.code.line-number-active} [the ring; the caret bar]
+  selected: range filled {color.code.selection-bg}; syntax colours kept [the host's selection is announced; the fill spans line ends]
+  selected+container-inactive: same range in {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no caret, no ring [lightness drop between the two fills]
+  current: both characters of the matched pair outlined 1px solid {color.code.bracket-match} [an outline box, not a colour change]
+  read-only: gutter on {color.surface.sunken}, same line numbers; dotted gutter rule; no caret [`aria-readonly`; dotted rule; no caret]
 
 Keyboard:
   (host): The host editor owns every key; the theme changes no binding, no caret behaviour and no selection model.
diff --git a/exports/components/code-editor.json b/exports/components/code-editor.json
index 42dfd20e2..cb0f8c965 100644
--- a/exports/components/code-editor.json
+++ b/exports/components/code-editor.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "code-editor",
   "family": "developer",
   "maturity": "stable",
@@ -20,8 +20,8 @@
     "maturity": "stable",
     "specified": true,
     "demonstrated": true,
-    "tested": false,
-    "testImplemented": false,
+    "tested": true,
+    "testImplemented": true,
     "states": 6
   },
   "title": "Code editor",
@@ -540,7 +540,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "container ring 2px {color.interaction.focus.ring-container} at −3px; a 1px {color.code.caret} bar; the caret line filled {color.code.current-line} across gutter and text; its number in {color.code.line-number-active}",
+      "visual": "2px {color.interaction.focus.ring-container} ring at −3px; 1px {color.code.caret} bar; caret line filled {color.code.current-line} across gutter and text, its number {color.code.line-number-active}",
       "channel": "the ring; the caret bar",
       "tokens": {
         "fg": {
@@ -583,8 +583,8 @@
     },
     {
       "state": "selected",
-      "visual": "the range filled {color.code.selection-bg}; syntax colours kept",
-      "channel": "the range is announced through the host's selection; the fill spans line ends",
+      "visual": "range filled {color.code.selection-bg}; syntax colours kept",
+      "channel": "the host's selection is announced; the fill spans line ends",
       "tokens": {
         "fg": {
           "alias": "color.code.syntax.variable",
@@ -614,7 +614,7 @@
     },
     {
       "state": "selected+container-inactive",
-      "visual": "the same range in {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no caret, no ring",
+      "visual": "same range in {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no caret, no ring",
       "channel": "lightness drop between the two fills",
       "tokens": {
         "fg": {
@@ -646,7 +646,7 @@
     {
       "state": "current",
       "visual": "both characters of the matched pair outlined 1px solid {color.code.bracket-match}",
-      "channel": "the outline is a box, not a colour change",
+      "channel": "an outline box, not a colour change",
       "tokens": {
         "fg": {
           "alias": "color.code.syntax.variable",
@@ -688,8 +688,8 @@
     },
     {
       "state": "read-only",
-      "visual": "gutter drops to {color.surface.sunken} behind the same line numbers; the gutter rule becomes dotted; no caret is drawn",
-      "channel": "`aria-readonly`; dotted rule; missing caret",
+      "visual": "gutter on {color.surface.sunken}, same line numbers; dotted gutter rule; no caret",
+      "channel": "`aria-readonly`; dotted rule; no caret",
       "tokens": {
         "fg": {
           "alias": "color.code.line-number",
@@ -759,7 +759,7 @@
   "specimens": [
     "i3-window-frame"
   ],
-  "nonExamples": "Rainbow syntax in the reference editor, or any hue outside the three bounded\nones (the opt-in `code.hued.*` roles of D-030 carry them for hosts that want\nhue differentiation). A blinking or animated caret in the reference.\nA selection that recolours the text to white and loses the syntax roles. A\ncurrent-line highlight brighter than the selection. A bracket match drawn as\na background fill, which reads as a selection. Line numbers in the decorative\n`#7d1310`. A glow, gradient or rounded corner on the editor box. Removing the\nhost's focus indicator without drawing the container ring.",
+  "nonExamples": "Rainbow syntax in the reference, or any hue beyond the three bounded ones\n(hosts opt into `code.hued.*`, D-030). A blinking or animated caret in the\nreference. A selection that turns text white and drops the syntax roles. A\ncurrent line brighter than the selection. A bracket match as a background\nfill, which reads as a selection. Line numbers in a decorative colour. A glow,\ngradient or rounded corner on the box. Removing the host's focus indicator\nwithout drawing the container ring.",
   "contrast": [
     {
       "label": "code-editor default text",
@@ -1073,6 +1073,32 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "label": "comment syntax decoration inside the selection",
+      "state": "selected",
+      "kind": "ui",
+      "min": 4.5,
+      "fg": "color.code.syntax.comment",
+      "bg": "color.code.selection-bg",
+      "fgHex": "#ad7175",
+      "bgHex": "#420f0c",
+      "ratio": 4.13,
+      "pass": false,
+      "waiver": "syntax colour is decoration; the short-lived selection preserves syntax roles, and comment falls below the text floor on this recorded selection value"
+    },
+    {
+      "label": "type syntax decoration inside the selection",
+      "state": "selected",
+      "kind": "ui",
+      "min": 4.5,
+      "fg": "color.code.syntax.type",
+      "bg": "color.code.selection-bg",
+      "fgHex": "#b37175",
+      "bgHex": "#420f0c",
+      "ratio": 4.24,
+      "pass": false,
+      "waiver": "syntax colour is decoration; the short-lived selection preserves syntax roles, and type falls below the text floor on this recorded selection value"
+    },
     {
       "label": "muted string text inside the selection",
       "state": "selected",
diff --git a/exports/components/combobox.brief.txt b/exports/components/combobox.brief.txt
index 620ef89ca..1f609afc1 100644
--- a/exports/components/combobox.brief.txt
+++ b/exports/components/combobox.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — combobox
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/combobox.json
 spec: spec/components/combobox.md  site: https://j3w1.github.io/theme/reference/#c-combobox
 maturity: stable  priority: R1
@@ -31,7 +31,7 @@ Tokens (resolved):
   option.text-hover     #f4eeee  ({color.text.link-hover})  use
   option.bg-selected    #531310  ({color.interaction.selection.bg})  use
   option.text-selected  #f4eeee  ({color.interaction.selection.text})  use
-  option.ring-selected  #ffa2a7  ({color.interaction.focus.ring-container})  use
+  option.ring-selected  #e53935  ({color.interaction.focus.ring})  use
   group.text            #ad7175  ({color.text.subtle})  use
   group.border          #2b0e0d  ({color.border.divider})  use-and-report (D-008)
   empty.text            #bd787d  ({color.text.muted})  use
@@ -40,16 +40,16 @@ Tokens (resolved):
 State dependency disclosures: D-007, D-008
 
 States: default, hover, focus-visible, open, closed, selected, invalid, invalid+focus-visible, disabled, no-results
-  default: 1px {color.border.control} on {color.surface.input}; list on {color.surface.raised} with a 1px {color.border.overlay} [—]
-  hover: box background → {color.interaction.hover.bg}; the hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover} [cursor: text on the box, default on the list]
-  focus-visible: box border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px [the ring]
-  open: list visible below the box; toggle glyph rotated 180° [`aria-expanded="true"`; the toggle glyph]
-  closed: list absent; the box unchanged [`aria-expanded="false"`; nothing below the box]
-  selected: the active option filled {color.interaction.selection.bg} with {color.interaction.selection.text} and a 1px dashed ring in {color.interaction.focus.ring-container} [`aria-selected="true"`; `aria-activedescendant`; the ring]
-  invalid: box border 2px {color.status.danger.border}; message with the ✕ glyph [border width 1 → 2px; glyph; `aria-invalid`]
-  invalid+focus-visible: the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px [double boundary]
-  disabled: text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; list never opens [`disabled`; cursor: not-allowed]
-  no-results: the list holds only the empty row in {color.text.muted}, italic [`aria-disabled` row; italic; a polite announcement of zero matches]
+  default: 1px {color.border.control} on {color.surface.input}; list on {color.surface.raised}, 1px {color.border.overlay} [—]
+  hover: box → {color.interaction.hover.bg}; hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover} [cursor: text on the box, default on the list]
+  focus-visible: box border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px [the ring]
+  open: list below the box; toggle glyph rotated 180° [`aria-expanded="true"`; toggle glyph]
+  closed: no list; box unchanged [`aria-expanded="false"`; nothing below the box]
+  selected: active option filled {color.interaction.selection.bg} with {color.interaction.selection.text}, 1px dashed {color.interaction.focus.ring} ring at −2px [`aria-selected="true"`; `aria-activedescendant`; the ring]
+  invalid: 2px {color.status.danger.border}; message with ✕ [border 1 → 2px; glyph; `aria-invalid`]
+  invalid+focus-visible: 2px danger border and {color.interaction.focus.ring-container} ring at −4px [double boundary]
+  disabled: {color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}; list never opens [`disabled`; cursor: not-allowed]
+  no-results: only the empty row, {color.text.muted} italic [`aria-disabled` row; italic; polite zero-match announcement]
 
 Keyboard:
   Down / Up: Opens the list if closed; moves the active option, wrapping at either end; the input keeps DOM focus.
diff --git a/exports/components/combobox.json b/exports/components/combobox.json
index 500aa3312..84a1a1075 100644
--- a/exports/components/combobox.json
+++ b/exports/components/combobox.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "combobox",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -349,8 +349,8 @@
       }
     },
     "option.ring-selected": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -426,7 +426,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "1px {color.border.control} on {color.surface.input}; list on {color.surface.raised} with a 1px {color.border.overlay}",
+      "visual": "1px {color.border.control} on {color.surface.input}; list on {color.surface.raised}, 1px {color.border.overlay}",
       "channel": "—",
       "tokens": {
         "fg": {
@@ -471,7 +471,7 @@
     },
     {
       "state": "hover",
-      "visual": "box background → {color.interaction.hover.bg}; the hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover}",
+      "visual": "box → {color.interaction.hover.bg}; hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover}",
       "channel": "cursor: text on the box, default on the list",
       "tokens": {
         "fg": {
@@ -502,7 +502,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "box border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "box border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -557,8 +557,8 @@
     },
     {
       "state": "open",
-      "visual": "list visible below the box; toggle glyph rotated 180°",
-      "channel": "`aria-expanded=\"true\"`; the toggle glyph",
+      "visual": "list below the box; toggle glyph rotated 180°",
+      "channel": "`aria-expanded=\"true\"`; toggle glyph",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -602,13 +602,13 @@
     },
     {
       "state": "closed",
-      "visual": "list absent; the box unchanged",
+      "visual": "no list; box unchanged",
       "channel": "`aria-expanded=\"false\"`; nothing below the box",
       "tokens": {}
     },
     {
       "state": "selected",
-      "visual": "the active option filled {color.interaction.selection.bg} with {color.interaction.selection.text} and a 1px dashed ring in {color.interaction.focus.ring-container}",
+      "visual": "active option filled {color.interaction.selection.bg} with {color.interaction.selection.text}, 1px dashed {color.interaction.focus.ring} ring at −2px",
       "channel": "`aria-selected=\"true\"`; `aria-activedescendant`; the ring",
       "tokens": {
         "fg": {
@@ -636,8 +636,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -651,8 +651,8 @@
     },
     {
       "state": "invalid",
-      "visual": "box border 2px {color.status.danger.border}; message with the ✕ glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border}; message with ✕",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -694,7 +694,7 @@
     },
     {
       "state": "invalid+focus-visible",
-      "visual": "the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px",
+      "visual": "2px danger border and {color.interaction.focus.ring-container} ring at −4px",
       "channel": "double boundary",
       "tokens": {
         "fg": {
@@ -749,14 +749,14 @@
     },
     {
       "state": "disabled",
-      "visual": "text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; list never opens",
+      "visual": "{color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}; list never opens",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "no-results",
-      "visual": "the list holds only the empty row in {color.text.muted}, italic",
-      "channel": "`aria-disabled` row; italic; a polite announcement of zero matches",
+      "visual": "only the empty row, {color.text.muted} italic",
+      "channel": "`aria-disabled` row; italic; polite zero-match announcement",
       "tokens": {
         "fg": {
           "alias": "color.text.muted",
@@ -857,7 +857,7 @@
     "admin-form",
     "filterable-table"
   ],
-  "nonExamples": "A select restyled as a combobox. Moving DOM focus into the list on Down. A\nlist that floats over the page with a shadow or a rounded frame. Highlighting\nthe active option with a colour change of the text alone. A no-results state\nthat silently shows the full list. Opening on hover. A list that slides or\nfades in for longer than 150 ms.",
+  "nonExamples": "A select restyled as a combobox. DOM focus moving into the list on Down. A\nlist floating with a shadow or rounded frame. The active option marked by text\ncolour alone. A no-results state that silently shows the full list. Opening\non hover. A list that slides or fades in for longer than 150 ms.",
   "contrast": [
     {
       "label": "combobox default text",
@@ -981,11 +981,11 @@
       "state": "selected",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/command-palette.brief.txt b/exports/components/command-palette.brief.txt
index d47d873e0..1c50127ce 100644
--- a/exports/components/command-palette.brief.txt
+++ b/exports/components/command-palette.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — command-palette
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/command-palette.json
 spec: spec/components/command-palette.md  site: https://j3w1.github.io/theme/reference/#c-command-palette
 maturity: stable  priority: R2
@@ -15,6 +15,13 @@ Tokens (resolved):
   secondary.text                                      #bd787d  ({color.text.muted})  use
   control.bg                                          #000000  ({color.surface.input})  use
   control.focus                                       #e53935  ({color.interaction.focus.ring})  use
+  button.bg                                           rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
+  button.text                                         #ffa2a7  ({color.action.secondary.text})  use
+  button.border                                       #a3676b  ({color.action.secondary.border})  use
+  button.bg-hover                                     #630f0d  ({color.action.secondary.hover-bg})  use
+  button.bg-active                                    #420f0c  ({color.action.secondary.pressed-bg})  use
+  button.border-active                                #e53935  ({color.border.active})  use
+  button.focus                                        #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default                1px  ({border.width.default})  use
   dependency.role-border-width-emphasis               2px  ({border.width.emphasis})  use
   dependency.role-color-border-overlay                #e53935  ({color.border.overlay})  use-and-report (D-008)
@@ -25,19 +32,19 @@ Tokens (resolved):
   dependency.role-color-surface-overlay               #241010  ({color.surface.overlay})  use
   dependency.role-density-comfortable-control-height  32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height      24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                        -2px  ({focus.offset})  use
   dependency.role-radius-none                         0px  ({radius.none})  use
   dependency.role-space-12                            12px  ({space.12})  use
   dependency.role-space-16                            16px  ({space.16})  use
-  dependency.role-space-2                             2px  ({space.2})  use
   dependency.role-space-8                             8px  ({space.8})  use
 State dependency disclosures: D-007
 
 States: default, open, closed, focus-visible, no-results
-  default: One prompt and dense command rows. [Visible names and categories.]
-  open: Square overlay surface and border. [Native modal dialog and active-descendant relationship.]
-  closed: Panel absent. [Opener remains focusable.]
-  focus-visible: Dashed input ring. [Input retains DOM focus while results change.]
-  no-results: Muted zero-results status. [Explicit result count and no active descendant.]
+  default: One prompt, dense command rows. Button controls are the secondary button (button.md); inputs keep the input look. [Visible names and categories.]
+  open: Square overlay surface and border. [Native modal dialog; active-descendant relationship.]
+  closed: Panel absent. [Opener stays focusable.]
+  focus-visible: Dashed input ring. [Input keeps DOM focus while results change.]
+  no-results: Muted zero-results status. [Explicit result count; no active descendant.]
 
 Keyboard:
   Ctrl+K / Cmd+K: Open when the host explicitly enables the shortcut.
diff --git a/exports/components/command-palette.json b/exports/components/command-palette.json
index df74f683e..89d1ec897 100644
--- a/exports/components/command-palette.json
+++ b/exports/components/command-palette.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "command-palette",
   "family": "navigation",
   "maturity": "stable",
@@ -140,6 +140,90 @@
         "decisionIds": []
       }
     },
+    "button.bg": {
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.focus": {
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-border-width-default": {
       "alias": "border.width.default",
       "value": "1px",
@@ -264,9 +348,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -276,9 +360,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -288,9 +372,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-16": {
-      "alias": "space.16",
-      "value": "16px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -300,9 +384,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-16": {
+      "alias": "space.16",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -328,7 +412,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "One prompt and dense command rows.",
+      "visual": "One prompt, dense command rows. Button controls are the secondary button (button.md); inputs keep the input look.",
       "channel": "Visible names and categories.",
       "tokens": {
         "fg": {
@@ -374,25 +458,25 @@
     {
       "state": "open",
       "visual": "Square overlay surface and border.",
-      "channel": "Native modal dialog and active-descendant relationship.",
+      "channel": "Native modal dialog; active-descendant relationship.",
       "tokens": {}
     },
     {
       "state": "closed",
       "visual": "Panel absent.",
-      "channel": "Opener remains focusable.",
+      "channel": "Opener stays focusable.",
       "tokens": {}
     },
     {
       "state": "focus-visible",
       "visual": "Dashed input ring.",
-      "channel": "Input retains DOM focus while results change.",
+      "channel": "Input keeps DOM focus while results change.",
       "tokens": {}
     },
     {
       "state": "no-results",
       "visual": "Muted zero-results status.",
-      "channel": "Explicit result count and no active descendant.",
+      "channel": "Explicit result count; no active descendant.",
       "tokens": {}
     }
   ],
@@ -505,6 +589,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/exports/components/compact-dashboard.brief.txt b/exports/components/compact-dashboard.brief.txt
index defb1d2fe..1dc128ce1 100644
--- a/exports/components/compact-dashboard.brief.txt
+++ b/exports/components/compact-dashboard.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — compact-dashboard
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/compact-dashboard.json
 spec: spec/components/compact-dashboard.md  site: https://j3w1.github.io/theme/reference/#c-compact-dashboard
 maturity: stable  priority: R2
@@ -13,24 +13,29 @@ Tokens (resolved):
   root.border                                         #a3676b  ({color.border.control})  use-and-report (D-007)
   heading.text                                        #ffa2a7  ({color.text.bright})  use
   secondary.text                                      #bd787d  ({color.text.muted})  use
-  control.bg                                          #000000  ({color.surface.input})  use
+  control.bg                                          rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
+  control.text                                        #ffa2a7  ({color.action.secondary.text})  use
+  control.border                                      #a3676b  ({color.action.secondary.border})  use
+  control.bg-hover                                    #630f0d  ({color.action.secondary.hover-bg})  use
+  control.bg-active                                   #420f0c  ({color.action.secondary.pressed-bg})  use
+  control.border-active                               #e53935  ({color.border.active})  use
   control.focus                                       #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default                1px  ({border.width.default})  use
   dependency.role-color-border-divider                #2b0e0d  ({color.border.divider})  use-and-report (D-008)
   dependency.role-color-surface-chrome                #090707  ({color.surface.chrome})  use
   dependency.role-density-comfortable-control-height  32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height      24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                        -2px  ({focus.offset})  use
   dependency.role-font-size-h2                        16px  ({font.size.h2})  use
   dependency.role-radius-none                         0px  ({radius.none})  use
   dependency.role-space-12                            12px  ({space.12})  use
-  dependency.role-space-2                             2px  ({space.2})  use
   dependency.role-space-8                             8px  ({space.8})  use
 State dependency disclosures: D-007
 
 States: default, loading, empty, focus-visible
-  default: Square metric panels and readable tables. [Metric names, exact values and status text.]
-  loading: Busy boundary with existing content retained. [aria-busy and host-provided loading status.]
-  empty: Explicit absence of records. [Empty message; metric zero differs from unknown.]
+  default: Square metric panels, readable tables. Its buttons are the secondary button (button.md). [Metric names, exact values, status text.]
+  loading: Busy boundary; existing content kept. [`aria-busy` and host-provided loading status.]
+  empty: Explicit absence of records. [Empty message; a zero metric differs from an unknown one.]
   focus-visible: Dashed action outline. [Native keyboard focus.]
 
 Keyboard:
diff --git a/exports/components/compact-dashboard.json b/exports/components/compact-dashboard.json
index 0d40b822a..59275306e 100644
--- a/exports/components/compact-dashboard.json
+++ b/exports/components/compact-dashboard.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "compact-dashboard",
   "family": "composed",
   "maturity": "stable",
@@ -115,11 +115,71 @@
       }
     },
     "control.bg": {
-      "alias": "color.surface.input",
-      "value": "#000000",
-      "status": "approved",
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
       "deprecated": false,
-      "decisionId": "D-023",
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
       "eligibility": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -200,9 +260,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-font-size-h2": {
-      "alias": "font.size.h2",
-      "value": "16px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -212,9 +272,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-font-size-h2": {
+      "alias": "font.size.h2",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -224,9 +284,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -236,9 +296,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -264,8 +324,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Square metric panels and readable tables.",
-      "channel": "Metric names, exact values and status text.",
+      "visual": "Square metric panels, readable tables. Its buttons are the secondary button (button.md).",
+      "channel": "Metric names, exact values, status text.",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -309,14 +369,14 @@
     },
     {
       "state": "loading",
-      "visual": "Busy boundary with existing content retained.",
-      "channel": "aria-busy and host-provided loading status.",
+      "visual": "Busy boundary; existing content kept.",
+      "channel": "`aria-busy` and host-provided loading status.",
       "tokens": {}
     },
     {
       "state": "empty",
       "visual": "Explicit absence of records.",
-      "channel": "Empty message; metric zero differs from unknown.",
+      "channel": "Empty message; a zero metric differs from an unknown one.",
       "tokens": {}
     },
     {
@@ -427,6 +487,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/exports/components/data-table.brief.txt b/exports/components/data-table.brief.txt
index 2b81908be..88f767539 100644
--- a/exports/components/data-table.brief.txt
+++ b/exports/components/data-table.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — data-table
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/data-table.json
 spec: spec/components/data-table.md  site: https://j3w1.github.io/theme/reference/#c-data-table
 maturity: stable  priority: R1
@@ -18,7 +18,7 @@ Tokens (resolved):
   row.ring             #e53935  ({color.interaction.focus.ring})  use
   selected.bg          #531310  ({color.interaction.selection.bg})  use
   selected.text        #f4eeee  ({color.interaction.selection.text})  use
-  selected.ring        #ffa2a7  ({color.interaction.focus.ring-container})  use
+  selected.ring        #e53935  ({color.interaction.focus.ring})  use
   checkbox.bg          #000000  ({color.surface.input})  use
   checkbox.border      #a3676b  ({color.border.control})  use-and-report (D-007)
   checkbox.checked-bg  #7d1310  ({color.action.primary.bg})  use
@@ -30,13 +30,13 @@ Tokens (resolved):
 
 States: default, hover, focus-visible, selected, selected+focus-visible, sorted, mixed, empty, loading
   default: rows on {color.surface.default}; header rule 1px {color.border.strong} [—]
-  hover: row background → {color.interaction.hover.bg}; a resize handle → {color.border.active} [cursor: default on rows, col-resize on handles]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px around the focused row or control [the ring]
-  selected: row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; the row checkbox checked [`aria-selected="true"`; the checked box]
-  selected+focus-visible: the fill and the ring in {color.interaction.focus.ring-container} [both visible at once]
+  hover: row → {color.interaction.hover.bg}; a resize handle → {color.border.active} [cursor: default on rows, col-resize on handles]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px around the focused row or control [the ring]
+  selected: row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; row checkbox checked [`aria-selected="true"`; the checked box]
+  selected+focus-visible: the fill and 1px dashed {color.interaction.focus.ring} at −2px [both visible at once]
   sorted: ▲ or ▼ in {color.text.bright} on the sorted header [`aria-sort`; the glyph]
-  mixed: the select-all on {color.action.primary.bg} with the – glyph [`aria-checked="mixed"`; the glyph]
-  empty: one full-width cell in {color.text.muted}: "No rows match."; the header and controls stay [the message text]
+  mixed: select-all on {color.action.primary.bg} with the – glyph [`aria-checked="mixed"`; the glyph]
+  empty: one full-width cell in {color.text.muted}: "No rows match."; header and controls stay [the message text]
   loading: one full-width cell with the static `⋯` glyph; the header stays [`aria-busy="true"`; the glyph; no animation]
 
 Keyboard:
diff --git a/exports/components/data-table.json b/exports/components/data-table.json
index 9624af95a..39ae3a675 100644
--- a/exports/components/data-table.json
+++ b/exports/components/data-table.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "data-table",
   "family": "display",
   "maturity": "stable",
@@ -192,8 +192,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -336,7 +336,7 @@
     },
     {
       "state": "hover",
-      "visual": "row background → {color.interaction.hover.bg}; a resize handle → {color.border.active}",
+      "visual": "row → {color.interaction.hover.bg}; a resize handle → {color.border.active}",
       "channel": "cursor: default on rows, col-resize on handles",
       "tokens": {
         "fg": {
@@ -367,7 +367,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px around the focused row or control",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px around the focused row or control",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -410,7 +410,7 @@
     },
     {
       "state": "selected",
-      "visual": "row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; the row checkbox checked",
+      "visual": "row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; row checkbox checked",
       "channel": "`aria-selected=\"true\"`; the checked box",
       "tokens": {
         "fg": {
@@ -441,7 +441,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the fill and the ring in {color.interaction.focus.ring-container}",
+      "visual": "the fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -469,8 +469,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -515,7 +515,7 @@
     },
     {
       "state": "mixed",
-      "visual": "the select-all on {color.action.primary.bg} with the – glyph",
+      "visual": "select-all on {color.action.primary.bg} with the – glyph",
       "channel": "`aria-checked=\"mixed\"`; the glyph",
       "tokens": {
         "fg": {
@@ -546,7 +546,7 @@
     },
     {
       "state": "empty",
-      "visual": "one full-width cell in {color.text.muted}: \"No rows match.\"; the header and controls stay",
+      "visual": "one full-width cell in {color.text.muted}: \"No rows match.\"; header and controls stay",
       "channel": "the message text",
       "tokens": {
         "fg": {
@@ -670,7 +670,7 @@
     "filterable-table",
     "admin-form"
   ],
-  "nonExamples": "A grid role on a table that is not navigated cell by cell. Zebra stripes.\nA select-all that is a native checkbox with a script-only indeterminate\nstate and no `aria-checked`. Rows selected by clicking anywhere with no\ncheckbox alternative. A selected row shown by a border alone. A resize\nhandle that is a tab stop. An animated loading skeleton. Rounded checkboxes.\nText truncated with no full-value affordance.",
+  "nonExamples": "A grid role on a table not navigated cell by cell. Zebra stripes. A\nselect-all that is a native checkbox with a script-only indeterminate state\nand no `aria-checked`.\nRow selection by click with no checkbox alternative. A selected row shown by\na border alone. A resize handle as a tab stop. An animated loading skeleton.\nRounded checkboxes. Truncated text with no full-value affordance.",
   "contrast": [
     {
       "label": "data-table default text",
@@ -755,11 +755,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/date-picker.brief.txt b/exports/components/date-picker.brief.txt
index 723556cd9..aa99ab053 100644
--- a/exports/components/date-picker.brief.txt
+++ b/exports/components/date-picker.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — date-picker
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/date-picker.json
 spec: spec/components/date-picker.md  site: https://j3w1.github.io/theme/reference/#c-date-picker
 maturity: stable  priority: R1
@@ -35,13 +35,13 @@ Tokens (resolved):
 State dependency disclosures: D-007
 
 States: default, hover, focus-visible, invalid, invalid+focus-visible, disabled, read-only
-  default: Input surface, default text and control border.
-  hover: The declared hover fill.
-  focus-visible: Active border and the canonical focus ring.
-  invalid: Danger border and a linked message.
-  invalid+focus-visible: Danger border plus the container focus ring.
-  disabled: Disabled colors; editor and calendar actions unavailable.
-  read-only: Readable canvas text and bottom edge; calendar action unavailable.
+  default: {color.text.default} on {color.surface.input}, 1px {color.border.control} [—]
+  hover: background → {color.interaction.hover.bg} [hover-capable pointers only]
+  focus-visible: border → {color.border.active}; the canonical focus ring [the ring]
+  invalid: 2px {color.status.danger.border}; a linked message [border 1 → 2px; ✕ glyph; `aria-invalid`]
+  invalid+focus-visible: the danger border and the ring in {color.interaction.focus.ring-container} at −4px [double boundary]
+  disabled: {color.text.disabled} on {color.interaction.disabled.bg}, border {color.border.disabled}; editor and calendar actions unavailable [`disabled`; cursor: not-allowed]
+  read-only: readable text on {color.surface.canvas}, no box, 1px dotted {color.border.divider} bottom edge; the calendar cannot open [`readonly`; dotted edge]
 
 Keyboard:
   Tab / Shift+Tab: Moves through the editor, calendar trigger and other controls.
diff --git a/exports/components/date-picker.json b/exports/components/date-picker.json
index 6cc8aa696..4bec7eff6 100644
--- a/exports/components/date-picker.json
+++ b/exports/components/date-picker.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "date-picker",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -358,8 +358,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Input surface, default text and control border.",
-      "channel": "",
+      "visual": "{color.text.default} on {color.surface.input}, 1px {color.border.control}",
+      "channel": "—",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -403,8 +403,8 @@
     },
     {
       "state": "hover",
-      "visual": "The declared hover fill.",
-      "channel": "",
+      "visual": "background → {color.interaction.hover.bg}",
+      "channel": "hover-capable pointers only",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -448,8 +448,8 @@
     },
     {
       "state": "focus-visible",
-      "visual": "Active border and the canonical focus ring.",
-      "channel": "",
+      "visual": "border → {color.border.active}; the canonical focus ring",
+      "channel": "the ring",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -503,8 +503,8 @@
     },
     {
       "state": "invalid",
-      "visual": "Danger border and a linked message.",
-      "channel": "",
+      "visual": "2px {color.status.danger.border}; a linked message",
+      "channel": "border 1 → 2px; ✕ glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -546,8 +546,8 @@
     },
     {
       "state": "invalid+focus-visible",
-      "visual": "Danger border plus the container focus ring.",
-      "channel": "",
+      "visual": "the danger border and the ring in {color.interaction.focus.ring-container} at −4px",
+      "channel": "double boundary",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -601,14 +601,14 @@
     },
     {
       "state": "disabled",
-      "visual": "Disabled colors; editor and calendar actions unavailable.",
-      "channel": "",
+      "visual": "{color.text.disabled} on {color.interaction.disabled.bg}, border {color.border.disabled}; editor and calendar actions unavailable",
+      "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "read-only",
-      "visual": "Readable canvas text and bottom edge; calendar action unavailable.",
-      "channel": "",
+      "visual": "readable text on {color.surface.canvas}, no box, 1px dotted {color.border.divider} bottom edge; the calendar cannot open",
+      "channel": "`readonly`; dotted edge",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -692,7 +692,7 @@
     "admin-form",
     "filterable-table"
   ],
-  "nonExamples": "An unthemed host popup presented as fully themed. A second named input that duplicates form values. Discarding native constraints, labels or reset behavior. Literal colors, rounded corners, or a selected fill with no distinguishable focus boundary.",
+  "nonExamples": "An unthemed host popup presented as themed. A second named input\nduplicating form values. Dropping native constraints, labels or reset.\nLiteral colours, rounded corners, or a selected fill with no distinct focus\nboundary.",
   "contrast": [
     {
       "label": "date-picker default text",
diff --git a/exports/components/description-list.brief.txt b/exports/components/description-list.brief.txt
index 478bd8237..508381665 100644
--- a/exports/components/description-list.brief.txt
+++ b/exports/components/description-list.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — description-list
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/description-list.json
 spec: spec/components/description-list.md  site: https://j3w1.github.io/theme/reference/#c-description-list
 maturity: stable  priority: R2
@@ -17,9 +17,9 @@ Tokens (resolved):
   control.focus                         #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default  1px  ({border.width.default})  use
   dependency.role-color-border-divider  #2b0e0d  ({color.border.divider})  use-and-report (D-008)
+  dependency.role-focus-offset          -2px  ({focus.offset})  use
   dependency.role-radius-none           0px  ({radius.none})  use
   dependency.role-space-12              12px  ({space.12})  use
-  dependency.role-space-2               2px  ({space.2})  use
   dependency.role-space-4               4px  ({space.4})  use
   dependency.role-space-8               8px  ({space.8})  use
 State dependency disclosures: D-007
diff --git a/exports/components/description-list.json b/exports/components/description-list.json
index ccc501ae9..158805f0e 100644
--- a/exports/components/description-list.json
+++ b/exports/components/description-list.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "description-list",
   "family": "display",
   "maturity": "stable",
@@ -162,9 +162,9 @@
         ]
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -174,9 +174,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -186,9 +186,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
diff --git a/exports/components/diagnostics.brief.txt b/exports/components/diagnostics.brief.txt
index 3d6303bf1..636c95f1b 100644
--- a/exports/components/diagnostics.brief.txt
+++ b/exports/components/diagnostics.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — diagnostics
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/diagnostics.json
 spec: spec/components/diagnostics.md  site: https://j3w1.github.io/theme/reference/#c-diagnostics
 maturity: stable  priority: R1
@@ -35,7 +35,7 @@ Tokens (resolved):
   row.ring           #e53935  ({color.interaction.focus.ring})  use
   row.bg-selected    #531310  ({color.interaction.selection.bg})  use
   row.text-selected  #f4eeee  ({color.interaction.selection.text})  use
-  row.ring-selected  #ffa2a7  ({color.interaction.focus.ring-container})  use
+  row.ring-selected  #e53935  ({color.interaction.focus.ring})  use
   header.text        #ffa2a7  ({color.text.bright})  use
   status.text        #f73f35  ({color.status.danger.text})  use
   empty.text         #bd787d  ({color.text.muted})  use
@@ -43,13 +43,13 @@ Tokens (resolved):
 State dependency disclosures: D-007
 
 States: default, hover, focus-visible, selected, selected+focus-visible, error, empty
-  default: ranges decorated as above on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default} with 1px {color.border.divider} between them [underline pattern; glyph]
-  hover: panel row background → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface) [cursor: default on rows]
-  focus-visible: the active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: the container ring 2px {color.interaction.focus.ring-container} at −3px [the ring]
+  default: ranges decorated on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default}, 1px {color.border.divider} between [underline pattern; glyph]
+  hover: panel row → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface) [cursor: default on rows]
+  focus-visible: active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: 2px {color.interaction.focus.ring-container} at −3px [the ring]
   selected: row filled {color.interaction.selection.bg}, text and glyph {color.interaction.selection.text}; the matching inline range filled {color.code.selection-bg} under its underline [`aria-selected`; the glyph stays; the fill spans the row]
-  selected+focus-visible: the selection fill and a 1px dashed ring in {color.interaction.focus.ring-container} [both at once]
-  error: the provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the inline stripe shows the same `✕` at its top [glyph; live announcement]
-  empty: no problems: rows and stripe marks hidden; `✓ No problems` in {color.text.muted} with the glyph in {color.status.success.text}; inline decorations removed [glyph; the absence of decoration]
+  selected+focus-visible: the selection fill and 1px dashed {color.interaction.focus.ring} at −2px [both at once]
+  error: provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the stripe shows the same `✕` at its top [glyph; live announcement]
+  empty: rows, stripe marks and inline decorations removed; `✓ No problems` in {color.text.muted}, glyph in {color.status.success.text} [glyph; the absence of decoration]
 
 Keyboard:
   Tab / Shift+Tab: Moves focus to and from the list as one stop; the active row is restored.
diff --git a/exports/components/diagnostics.json b/exports/components/diagnostics.json
index 1d594ef38..a44d466f5 100644
--- a/exports/components/diagnostics.json
+++ b/exports/components/diagnostics.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "diagnostics",
   "family": "developer",
   "maturity": "stable",
@@ -392,8 +392,8 @@
       }
     },
     "row.ring-selected": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -455,7 +455,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "ranges decorated as above on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default} with 1px {color.border.divider} between them",
+      "visual": "ranges decorated on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default}, 1px {color.border.divider} between",
       "channel": "underline pattern; glyph",
       "tokens": {
         "fg": {
@@ -500,7 +500,7 @@
     },
     {
       "state": "hover",
-      "visual": "panel row background → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface)",
+      "visual": "panel row → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface)",
       "channel": "cursor: default on rows",
       "tokens": {
         "fg": {
@@ -531,7 +531,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "the active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: the container ring 2px {color.interaction.focus.ring-container} at −3px",
+      "visual": "active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: 2px {color.interaction.focus.ring-container} at −3px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -605,7 +605,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the selection fill and a 1px dashed ring in {color.interaction.focus.ring-container}",
+      "visual": "the selection fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both at once",
       "tokens": {
         "fg": {
@@ -633,8 +633,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -648,7 +648,7 @@
     },
     {
       "state": "error",
-      "visual": "the provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the inline stripe shows the same `✕` at its top",
+      "visual": "provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the stripe shows the same `✕` at its top",
       "channel": "glyph; live announcement",
       "tokens": {
         "fg": {
@@ -679,7 +679,7 @@
     },
     {
       "state": "empty",
-      "visual": "no problems: rows and stripe marks hidden; `✓ No problems` in {color.text.muted} with the glyph in {color.status.success.text}; inline decorations removed",
+      "visual": "rows, stripe marks and inline decorations removed; `✓ No problems` in {color.text.muted}, glyph in {color.status.success.text}",
       "channel": "glyph; the absence of decoration",
       "tokens": {
         "fg": {
@@ -762,7 +762,7 @@
   "specimens": [
     "i3-window-frame"
   ],
-  "nonExamples": "Red-only errors without the `✕` glyph or the wavy pattern. A wavy underline\nfor every severity, which leaves the pattern meaningless. Purple or cyan for\ninfo and hint. A hover on a panel row that changes only the text colour. A\nselected row whose glyph keeps its severity colour on the red fill (2.47:1).\nA panel row with a rounded highlight or a left accent bar instead of the fill.\nRemoving the error line background to \"calm\" the editor.",
+  "nonExamples": "Red-only errors without `✕` or the wavy pattern. Wavy for every severity.\nPurple or cyan for info and hint. A row hover that changes only text colour.\nA selected row whose glyph keeps its severity colour on the fill. A rounded\nhighlight or left accent bar instead of the row fill. Removing the error line\nfill to \"calm\" the editor.",
   "contrast": [
     {
       "label": "diagnostics default text",
@@ -860,11 +860,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/dialog.brief.txt b/exports/components/dialog.brief.txt
index 0bad58b98..799644251 100644
--- a/exports/components/dialog.brief.txt
+++ b/exports/components/dialog.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — dialog
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/dialog.json
 spec: spec/components/dialog.md  site: https://j3w1.github.io/theme/reference/#c-dialog
 maturity: stable  priority: R1
@@ -36,11 +36,11 @@ State dependency disclosures: D-008
 States: default, open, closed, focus-trapped, hover, focus-visible, reduced-motion
   default: the dialog open on its backdrop [`open`; the page behind is inert]
   open: as default; opacity 0 → 1 within 150 ms on capable hosts [`open`; focus inside the dialog]
-  closed: nothing: the dialog and its backdrop are absent [no `open`; focus back on the opener]
-  focus-trapped: the dialog itself carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles [Tab never leaves; the note text]
-  hover: Close background → {color.action.tertiary.hover-bg}; other buttons take their tone's hover [cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive uses {color.action.destructive.filled-text} (D-015) [the ring]
-  reduced-motion: no opacity transition; the dialog is simply present or absent [`prefers-reduced-motion`]
+  closed: dialog and backdrop absent [no `open`; focus back on the opener]
+  focus-trapped: when it holds focus, the dialog carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px; the note says Tab cycles [Tab never leaves; the note text]
+  hover: Close → {color.action.tertiary.hover-bg}; other buttons take their tone's hover [cursor: pointer]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive {color.action.destructive.filled-text} (D-015) [the ring]
+  reduced-motion: no opacity transition; present or absent [`prefers-reduced-motion`]
 
 Keyboard:
   Tab / Shift+Tab: Cycles through the dialog's focusable elements and never leaves it while open.
diff --git a/exports/components/dialog.json b/exports/components/dialog.json
index e6f229c3e..5431a4576 100644
--- a/exports/components/dialog.json
+++ b/exports/components/dialog.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "dialog",
   "family": "feedback",
   "maturity": "stable",
@@ -440,13 +440,13 @@
     },
     {
       "state": "closed",
-      "visual": "nothing: the dialog and its backdrop are absent",
+      "visual": "dialog and backdrop absent",
       "channel": "no `open`; focus back on the opener",
       "tokens": {}
     },
     {
       "state": "focus-trapped",
-      "visual": "the dialog itself carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles",
+      "visual": "when it holds focus, the dialog carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px; the note says Tab cycles",
       "channel": "Tab never leaves; the note text",
       "tokens": {
         "fg": {
@@ -503,7 +503,7 @@
     },
     {
       "state": "hover",
-      "visual": "Close background → {color.action.tertiary.hover-bg}; other buttons take their tone's hover",
+      "visual": "Close → {color.action.tertiary.hover-bg}; other buttons take their tone's hover",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -534,7 +534,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive uses {color.action.destructive.filled-text} (D-015)",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive {color.action.destructive.filled-text} (D-015)",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -577,7 +577,7 @@
     },
     {
       "state": "reduced-motion",
-      "visual": "no opacity transition; the dialog is simply present or absent",
+      "visual": "no opacity transition; present or absent",
       "channel": "`prefers-reduced-motion`",
       "tokens": {
         "fg": {
@@ -671,7 +671,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "A glowing or shadowed card. Rounded corners. A dialog that slides or scales\nin. `<dialog>` shown with `show()` and a hand-written focus trap. A dialog\nwith no title, or with the title only in the accessible name. A destructive\nconfirm as the default Enter action. A backdrop that closes the dialog with\nno Close button. A dialog stacked on a dialog.",
+  "nonExamples": "A glowing or shadowed card. Rounded corners. Sliding or scaling in.\n`<dialog>` shown with `show()` and a hand-written trap. No title, or the\ntitle only in the accessible name. A destructive confirm as the default\nEnter action. A backdrop that closes the dialog with no Close button. A\ndialog stacked on a dialog.",
   "contrast": [
     {
       "label": "dialog default text",
diff --git a/exports/components/diff-view.brief.txt b/exports/components/diff-view.brief.txt
index d708e2d46..6c34abf0e 100644
--- a/exports/components/diff-view.brief.txt
+++ b/exports/components/diff-view.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — diff-view
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/diff-view.json
 spec: spec/components/diff-view.md  site: https://j3w1.github.io/theme/reference/#c-diff-view
 maturity: stable  priority: R1
@@ -33,16 +33,16 @@ Tokens (resolved):
   row.ring           #e53935  ({color.interaction.focus.ring})  use
   row.bg-selected    #531310  ({color.interaction.selection.bg})  use
   row.text-selected  #f4eeee  ({color.interaction.selection.text})  use
-  row.ring-selected  #ffa2a7  ({color.interaction.focus.ring-container})  use
+  row.ring-selected  #e53935  ({color.interaction.focus.ring})  use
 State dependency disclosures: D-007
 
 States: default, hover, selected, focus-visible, expanded, collapsed
-  default: added rows {color.diff.added.bg} with `+` in {color.diff.added.gutter}; removed {color.diff.removed.bg} with `−` in {color.diff.removed.gutter}; modified {color.diff.modified.bg} with `~` in {color.diff.modified.gutter}; hunk rows {color.diff.header-bg}; conflicts in a 3px double {color.diff.conflict-border} [the markers; the double border]
-  hover: the row's number and marker cells → {color.interaction.hover.bg}; the text cell keeps its fill [cursor: default; only on hover-capable pointers]
-  selected: the whole row filled {color.interaction.selection.bg} with {color.interaction.selection.text}; the marker stays [`aria-current` (or `:target` for a permalinked line); the marker glyph]
-  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px around the row; on a selected row the ring is {color.interaction.focus.ring-container} [the ring]
-  expanded: the folded `<tbody>` is shown; the chevron points down; the button reads "Hide 12 unchanged lines" [`aria-expanded="true"`; the rows appear]
-  collapsed: the folded `<tbody>` is hidden; the chevron points to the inline end; "… 12 unchanged lines" [`aria-expanded="false"`; the ellipsis]
+  default: added {color.diff.added.bg}, `+` in {color.diff.added.gutter}; removed {color.diff.removed.bg}, `−` in {color.diff.removed.gutter}; modified {color.diff.modified.bg}, `~` in {color.diff.modified.gutter}; hunks {color.diff.header-bg}; conflicts in a 3px double {color.diff.conflict-border} [the markers; the double border]
+  hover: number and marker cells → {color.interaction.hover.bg}; the text cell keeps its fill [cursor: default; hover-capable pointers only]
+  selected: whole row {color.interaction.selection.bg} with {color.interaction.selection.text}; the marker stays [`aria-current` (or `:target` for a permalinked line); the marker glyph]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px around the row, including a selected row [the ring]
+  expanded: folded `<tbody>` shown; chevron down; "Hide 12 unchanged lines" [`aria-expanded="true"`; the rows appear]
+  collapsed: folded `<tbody>` hidden; chevron to the inline end; "… 12 unchanged lines" [`aria-expanded="false"`; the ellipsis]
 
 Keyboard:
   Tab / Shift+Tab: Moves between the fold buttons and any row the host makes focusable; rows are not stops in a plain table.
diff --git a/exports/components/diff-view.json b/exports/components/diff-view.json
index fd541c692..61e67eca3 100644
--- a/exports/components/diff-view.json
+++ b/exports/components/diff-view.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "diff-view",
   "family": "developer",
   "maturity": "stable",
@@ -376,8 +376,8 @@
       }
     },
     "row.ring-selected": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -391,7 +391,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "added rows {color.diff.added.bg} with `+` in {color.diff.added.gutter}; removed {color.diff.removed.bg} with `−` in {color.diff.removed.gutter}; modified {color.diff.modified.bg} with `~` in {color.diff.modified.gutter}; hunk rows {color.diff.header-bg}; conflicts in a 3px double {color.diff.conflict-border}",
+      "visual": "added {color.diff.added.bg}, `+` in {color.diff.added.gutter}; removed {color.diff.removed.bg}, `−` in {color.diff.removed.gutter}; modified {color.diff.modified.bg}, `~` in {color.diff.modified.gutter}; hunks {color.diff.header-bg}; conflicts in a 3px double {color.diff.conflict-border}",
       "channel": "the markers; the double border",
       "tokens": {
         "fg": {
@@ -436,8 +436,8 @@
     },
     {
       "state": "hover",
-      "visual": "the row's number and marker cells → {color.interaction.hover.bg}; the text cell keeps its fill",
-      "channel": "cursor: default; only on hover-capable pointers",
+      "visual": "number and marker cells → {color.interaction.hover.bg}; the text cell keeps its fill",
+      "channel": "cursor: default; hover-capable pointers only",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -467,7 +467,7 @@
     },
     {
       "state": "selected",
-      "visual": "the whole row filled {color.interaction.selection.bg} with {color.interaction.selection.text}; the marker stays",
+      "visual": "whole row {color.interaction.selection.bg} with {color.interaction.selection.text}; the marker stays",
       "channel": "`aria-current` (or `:target` for a permalinked line); the marker glyph",
       "tokens": {
         "fg": {
@@ -498,7 +498,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "1px dashed {color.interaction.focus.ring} at −2px around the row; on a selected row the ring is {color.interaction.focus.ring-container}",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px around the row, including a selected row",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -541,7 +541,7 @@
     },
     {
       "state": "expanded",
-      "visual": "the folded `<tbody>` is shown; the chevron points down; the button reads \"Hide 12 unchanged lines\"",
+      "visual": "folded `<tbody>` shown; chevron down; \"Hide 12 unchanged lines\"",
       "channel": "`aria-expanded=\"true\"`; the rows appear",
       "tokens": {
         "fg": {
@@ -572,7 +572,7 @@
     },
     {
       "state": "collapsed",
-      "visual": "the folded `<tbody>` is hidden; the chevron points to the inline end; \"… 12 unchanged lines\"",
+      "visual": "folded `<tbody>` hidden; chevron to the inline end; \"… 12 unchanged lines\"",
       "channel": "`aria-expanded=\"false\"`; the ellipsis",
       "tokens": {
         "fg": {
@@ -646,7 +646,7 @@
   "specimens": [
     "i3-window-frame"
   ],
-  "nonExamples": "Red and green fills with no `+`/`−` marker. Word-level changes drawn as a\nbright fill that pushes the text below 4.5:1. A removed line rendered in\n`text.disabled` or struck through as a whole. Collapsed hunks that are only\nvisually clipped and still read out. Conflict blocks in purple. Hover that\nrecolours the code text. Round-cornered hunk cards floating on the page. A\nselected row that drops the marker because \"the colour says it\".",
+  "nonExamples": "Red and green fills without `+`/`−`. Word-level changes as a bright fill\nthat pushes text below 4.5:1. A removed line in `text.disabled` or struck\nthrough whole. Collapsed hunks only visually clipped and still read out.\nPurple conflict blocks. Hover that recolours the code text. Round-cornered\nhunk cards. A selected row that drops the marker.",
   "contrast": [
     {
       "label": "diff-view default text",
@@ -1004,11 +1004,11 @@
       "state": "focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/disclosure.brief.txt b/exports/components/disclosure.brief.txt
index 74d7f47d3..51f751f76 100644
--- a/exports/components/disclosure.brief.txt
+++ b/exports/components/disclosure.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — disclosure
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/disclosure.json
 spec: spec/components/disclosure.md  site: https://j3w1.github.io/theme/reference/#c-disclosure
 maturity: stable  priority: R2
@@ -23,9 +23,9 @@ Tokens (resolved):
   dependency.role-color-text-disabled                 #8a5559  ({color.text.disabled})  use
   dependency.role-density-comfortable-control-height  32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height      24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                        -2px  ({focus.offset})  use
   dependency.role-radius-none                         0px  ({radius.none})  use
   dependency.role-space-12                            12px  ({space.12})  use
-  dependency.role-space-2                             2px  ({space.2})  use
   dependency.role-space-8                             8px  ({space.8})  use
 State dependency disclosures: D-007
 
diff --git a/exports/components/disclosure.json b/exports/components/disclosure.json
index f1675afc8..96d560247 100644
--- a/exports/components/disclosure.json
+++ b/exports/components/disclosure.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "disclosure",
   "family": "navigation",
   "maturity": "stable",
@@ -234,9 +234,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -246,9 +246,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -258,9 +258,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
diff --git a/exports/components/drawer.brief.txt b/exports/components/drawer.brief.txt
index cd65cbd42..877cbdd1a 100644
--- a/exports/components/drawer.brief.txt
+++ b/exports/components/drawer.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — drawer
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/drawer.json
 spec: spec/components/drawer.md  site: https://j3w1.github.io/theme/reference/#c-drawer
 maturity: stable  priority: R1
@@ -28,9 +28,9 @@ State dependency disclosures: D-008
 States: default, open, closed, focus-trapped, reduced-motion
   default: the panel open at its edge on the backdrop [`open`; the page behind is inert]
   open: as default; opacity 0 → 1 within 150 ms on capable hosts; never a slide [`open`; focus inside the panel]
-  closed: nothing: the panel and the backdrop are absent [no `open`; focus back on the opener]
-  focus-trapped: the panel carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles [Tab never leaves; the note text]
-  reduced-motion: no opacity transition; the panel is simply present or absent [`prefers-reduced-motion`]
+  closed: panel and backdrop absent [no `open`; focus back on the opener]
+  focus-trapped: while it holds focus, the panel carries the 2px solid {color.interaction.focus.ring-container} ring at −3px; the note says Tab cycles [Tab never leaves; the note text]
+  reduced-motion: no opacity transition; present or absent [`prefers-reduced-motion`]
 
 Keyboard:
   Tab / Shift+Tab: Cycles inside the drawer and never leaves it while open.
diff --git a/exports/components/drawer.json b/exports/components/drawer.json
index 1dce4cf16..693b4d511 100644
--- a/exports/components/drawer.json
+++ b/exports/components/drawer.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "drawer",
   "family": "feedback",
   "maturity": "stable",
@@ -338,13 +338,13 @@
     },
     {
       "state": "closed",
-      "visual": "nothing: the panel and the backdrop are absent",
+      "visual": "panel and backdrop absent",
       "channel": "no `open`; focus back on the opener",
       "tokens": {}
     },
     {
       "state": "focus-trapped",
-      "visual": "the panel carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles",
+      "visual": "while it holds focus, the panel carries the 2px solid {color.interaction.focus.ring-container} ring at −3px; the note says Tab cycles",
       "channel": "Tab never leaves; the note text",
       "tokens": {
         "fg": {
@@ -401,7 +401,7 @@
     },
     {
       "state": "reduced-motion",
-      "visual": "no opacity transition; the panel is simply present or absent",
+      "visual": "no opacity transition; present or absent",
       "channel": "`prefers-reduced-motion`",
       "tokens": {
         "fg": {
@@ -489,7 +489,7 @@
     "settings-panel",
     "i3-window-frame"
   ],
-  "nonExamples": "A panel that slides in from the edge. A drawer with a shadow or a rounded\ninner corner. A drawer that is a plain aside with a hand-written focus trap.\nA bottom sheet with a drag handle. A drawer with no Close button. A drawer\nthat stays open under a dialog. A translucent panel over page content.",
+  "nonExamples": "A panel that slides in. A shadow or a rounded inner corner. A plain aside\nwith a hand-written focus trap. A bottom sheet with a drag handle. No Close\nbutton. A drawer that stays open under a dialog. A translucent panel over page\ncontent.",
   "contrast": [
     {
       "label": "drawer default text",
diff --git a/exports/components/editor-search.brief.txt b/exports/components/editor-search.brief.txt
index f40071ae8..99c6dff5a 100644
--- a/exports/components/editor-search.brief.txt
+++ b/exports/components/editor-search.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — editor-search
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/editor-search.json
 spec: spec/components/editor-search.md  site: https://j3w1.github.io/theme/reference/#c-editor-search
 maturity: stable  priority: R2
@@ -15,6 +15,13 @@ Tokens (resolved):
   secondary.text                                          #bd787d  ({color.text.muted})  use
   control.bg                                              #000000  ({color.surface.input})  use
   control.focus                                           #e53935  ({color.interaction.focus.ring})  use
+  button.bg                                               rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
+  button.text                                             #ffa2a7  ({color.action.secondary.text})  use
+  button.border                                           #a3676b  ({color.action.secondary.border})  use
+  button.bg-hover                                         #630f0d  ({color.action.secondary.hover-bg})  use
+  button.bg-active                                        #420f0c  ({color.action.secondary.pressed-bg})  use
+  button.border-active                                    #e53935  ({color.border.active})  use
+  button.focus                                            #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default                    1px  ({border.width.default})  use
   dependency.role-color-code-search-current-bg            #ffa2a7  ({color.code.search-current-bg})  use
   dependency.role-color-code-search-current-text          #0c0909  ({color.code.search-current-text})  use
@@ -23,14 +30,14 @@ Tokens (resolved):
   dependency.role-color-surface-code                      #000000  ({color.surface.code})  use
   dependency.role-density-comfortable-control-height      32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height          24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                            -2px  ({focus.offset})  use
   dependency.role-radius-none                             0px  ({radius.none})  use
   dependency.role-space-12                                12px  ({space.12})  use
-  dependency.role-space-2                                 2px  ({space.2})  use
   dependency.role-space-8                                 8px  ({space.8})  use
 State dependency disclosures: D-007
 
 States: default, filled, no-results, focus-visible
-  default: Plain escaped source. [Readable preformatted text.]
+  default: Plain escaped source. Button controls are the secondary button (button.md); inputs keep the input look. [Readable preformatted text.]
   filled: Match fill; current match has its own marker. [Exact current and total counts.]
   no-results: No highlighted matches. [Explicit zero-results status.]
   focus-visible: Dashed control ring. [Native keyboard focus.]
diff --git a/exports/components/editor-search.json b/exports/components/editor-search.json
index da485e0ae..32124e46b 100644
--- a/exports/components/editor-search.json
+++ b/exports/components/editor-search.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "editor-search",
   "family": "developer",
   "maturity": "stable",
@@ -138,6 +138,90 @@
         "decisionIds": []
       }
     },
+    "button.bg": {
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.focus": {
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-border-width-default": {
       "alias": "border.width.default",
       "value": "1px",
@@ -234,9 +318,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -246,9 +330,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -258,9 +342,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -286,7 +370,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Plain escaped source.",
+      "visual": "Plain escaped source. Button controls are the secondary button (button.md); inputs keep the input look.",
       "channel": "Readable preformatted text.",
       "tokens": {
         "fg": {
@@ -449,6 +533,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/exports/components/empty-state.brief.txt b/exports/components/empty-state.brief.txt
index 1b3b9aa39..04fa8e65f 100644
--- a/exports/components/empty-state.brief.txt
+++ b/exports/components/empty-state.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — empty-state
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/empty-state.json
 spec: spec/components/empty-state.md  site: https://j3w1.github.io/theme/reference/#c-empty-state
 maturity: stable  priority: R1
diff --git a/exports/components/empty-state.json b/exports/components/empty-state.json
index 3576b5fe9..8cbc9fb6c 100644
--- a/exports/components/empty-state.json
+++ b/exports/components/empty-state.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "empty-state",
   "family": "feedback",
   "maturity": "stable",
@@ -239,7 +239,7 @@
     "filterable-table",
     "settings-panel"
   ],
-  "nonExamples": "An illustration or mascot. A primary (filled) call to action. A blank pane.\nA greyed-out table header with no message. A message that only says \"No\ndata\". A heading in the accent red. An empty state that appears while\nloading. Centred text in a rounded card with a shadow.",
+  "nonExamples": "An illustration or mascot. A primary (filled) call to action. A blank pane. A\ngreyed-out table header with no message. Only \"No data\". A heading in the\naccent red. An empty state shown while loading. Centred text in a rounded,\nshadowed card.",
   "contrast": [
     {
       "label": "empty-state default text",
diff --git a/exports/components/error-state.brief.txt b/exports/components/error-state.brief.txt
index 160a309dc..c56ea29c1 100644
--- a/exports/components/error-state.brief.txt
+++ b/exports/components/error-state.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — error-state
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/error-state.json
 spec: spec/components/error-state.md  site: https://j3w1.github.io/theme/reference/#c-error-state
 maturity: stable  priority: R2
@@ -13,7 +13,12 @@ Tokens (resolved):
   root.border                                         #a3676b  ({color.border.control})  use-and-report (D-007)
   heading.text                                        #ffa2a7  ({color.text.bright})  use
   secondary.text                                      #bd787d  ({color.text.muted})  use
-  control.bg                                          #000000  ({color.surface.input})  use
+  control.bg                                          rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
+  control.text                                        #ffa2a7  ({color.action.secondary.text})  use
+  control.border                                      #a3676b  ({color.action.secondary.border})  use
+  control.bg-hover                                    #630f0d  ({color.action.secondary.hover-bg})  use
+  control.bg-active                                   #420f0c  ({color.action.secondary.pressed-bg})  use
+  control.border-active                               #e53935  ({color.border.active})  use
   control.focus                                       #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default                1px  ({border.width.default})  use
   dependency.role-border-width-emphasis               2px  ({border.width.emphasis})  use
@@ -24,14 +29,14 @@ Tokens (resolved):
   dependency.role-color-text-disabled                 #8a5559  ({color.text.disabled})  use
   dependency.role-density-comfortable-control-height  32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height      24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                        -2px  ({focus.offset})  use
   dependency.role-radius-none                         0px  ({radius.none})  use
   dependency.role-space-12                            12px  ({space.12})  use
-  dependency.role-space-2                             2px  ({space.2})  use
   dependency.role-space-8                             8px  ({space.8})  use
 State dependency disclosures: D-007
 
 States: default, error, loading, disabled, focus-visible
-  default: Danger border and text heading. [Specific written explanation and error glyph.]
+  default: Danger border and text heading. Its buttons are the secondary button (button.md). [Specific written explanation and error glyph.]
   error: Same explicit failure treatment. [Failure text remains available.]
   loading: Busy status accompanies the existing explanation. [aria-busy and host-provided pending text.]
   disabled: Disabled roles at full opacity. [Native retry button is disabled.]
diff --git a/exports/components/error-state.json b/exports/components/error-state.json
index 67597b5e9..0c5034cad 100644
--- a/exports/components/error-state.json
+++ b/exports/components/error-state.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "error-state",
   "family": "feedback",
   "maturity": "stable",
@@ -116,11 +116,71 @@
       }
     },
     "control.bg": {
-      "alias": "color.surface.input",
-      "value": "#000000",
-      "status": "approved",
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
       "deprecated": false,
-      "decisionId": "D-023",
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
       "eligibility": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -247,9 +307,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -259,9 +319,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -271,9 +331,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -299,7 +359,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Danger border and text heading.",
+      "visual": "Danger border and text heading. Its buttons are the secondary button (button.md).",
       "channel": "Specific written explanation and error glyph.",
       "tokens": {
         "fg": {
@@ -398,7 +458,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls, colour-only status, drag-only operations, hidden required\ninstructions, stolen focus or an invented service success.",
   "contrast": [
     {
       "label": "error-state default text",
@@ -464,6 +524,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/exports/components/field.brief.txt b/exports/components/field.brief.txt
index 909e2a096..7416f54fc 100644
--- a/exports/components/field.brief.txt
+++ b/exports/components/field.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — field
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/field.json
 spec: spec/components/field.md  site: https://j3w1.github.io/theme/reference/#c-field
 maturity: stable  priority: R1
@@ -24,7 +24,7 @@ States: default, required, invalid, disabled
   default: label {color.text.bright}; help {color.text.muted}; control as its own component [—]
   required: `*` after the label in {color.status.danger.text} plus visually hidden "required" [`required` attribute; the mark]
   invalid: the control's 2px {color.status.danger.border}; message with the ✕ glyph in {color.status.danger.text}; help visually hidden [border width 1 → 2px; glyph; `aria-invalid`]
-  disabled: label and control text {color.text.disabled}; control {color.interaction.disabled.bg} with 1px {color.border.disabled}; help unchanged [`disabled`; cursor: not-allowed]
+  disabled: label and control text {color.text.disabled}; control {color.interaction.disabled.bg}, 1px {color.border.disabled}; help unchanged [`disabled`; cursor: not-allowed]
 
 Keyboard:
   Tab / Shift+Tab: Reaches the control; the label is not a tab stop.
diff --git a/exports/components/field.json b/exports/components/field.json
index b73218f9d..6bf663351 100644
--- a/exports/components/field.json
+++ b/exports/components/field.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "field",
   "family": "forms-basic",
   "maturity": "stable",
@@ -285,7 +285,7 @@
     },
     {
       "state": "disabled",
-      "visual": "label and control text {color.text.disabled}; control {color.interaction.disabled.bg} with 1px {color.border.disabled}; help unchanged",
+      "visual": "label and control text {color.text.disabled}; control {color.interaction.disabled.bg}, 1px {color.border.disabled}; help unchanged",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     }
@@ -330,7 +330,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "A floating label inside the control. A label to the left of the control.\nPlaceholder text as the only label. An error shown by a red border alone. A\nmessage that replaces the help text in the DOM. A required mark that is only\na colour change. An asterisk with no text alternative. Two controls in one\nfield.",
+  "nonExamples": "A floating label inside the control. A label left of the control.\nPlaceholder as the only label. An error shown by a red border alone. A\nmessage that replaces the help in the DOM. A colour-only required mark. An\nasterisk with no text alternative. Two controls in one field.",
   "contrast": [
     {
       "label": "field default text",
diff --git a/exports/components/fieldset.brief.txt b/exports/components/fieldset.brief.txt
index 98b5c1e07..819045a8d 100644
--- a/exports/components/fieldset.brief.txt
+++ b/exports/components/fieldset.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — fieldset
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/fieldset.json
 spec: spec/components/fieldset.md  site: https://j3w1.github.io/theme/reference/#c-fieldset
 maturity: stable  priority: R1
@@ -22,7 +22,7 @@ Tokens (resolved):
 
 States: default, disabled
   default: 1px {color.border.divider} border; legend {color.text.bright}; fields as their own components [the border and the legend]
-  disabled: legend and labels {color.text.disabled}; every control inside takes its own disabled treatment ({color.interaction.disabled.bg}, {color.border.disabled}); the border unchanged [`disabled` on the fieldset; cursor: not-allowed on the controls]
+  disabled: legend and labels {color.text.disabled}; each control takes its own disabled treatment ({color.interaction.disabled.bg}, {color.border.disabled}); border unchanged [`disabled` on the fieldset; cursor: not-allowed on the controls]
 
 Keyboard:
   Tab / Shift+Tab: Moves through the fields inside in document order; the legend is not a tab stop.
diff --git a/exports/components/fieldset.json b/exports/components/fieldset.json
index bd73b8c84..22256fc86 100644
--- a/exports/components/fieldset.json
+++ b/exports/components/fieldset.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "fieldset",
   "family": "forms-basic",
   "maturity": "stable",
@@ -222,7 +222,7 @@
     },
     {
       "state": "disabled",
-      "visual": "legend and labels {color.text.disabled}; every control inside takes its own disabled treatment ({color.interaction.disabled.bg}, {color.border.disabled}); the border unchanged",
+      "visual": "legend and labels {color.text.disabled}; each control takes its own disabled treatment ({color.interaction.disabled.bg}, {color.border.disabled}); border unchanged",
       "channel": "`disabled` on the fieldset; cursor: not-allowed on the controls",
       "tokens": {}
     }
@@ -264,7 +264,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "A fieldset with no legend or with a legend hidden visually. A card used\ninstead of a fieldset for form controls. Rounded corners. A 2px or\n`border.control` border on the group, which would read as a control. A\nlegend in accent red. Disabling only the legend. Nesting three levels deep.",
+  "nonExamples": "No legend, or a visually hidden one. A card instead of a fieldset for form\ncontrols. Rounded corners. A 2px or `border.control` border, which reads as a\ncontrol. A legend in accent red. Disabling only the legend. Three levels of\nnesting.",
   "contrast": [
     {
       "label": "fieldset default text",
diff --git a/exports/components/file-browser.brief.txt b/exports/components/file-browser.brief.txt
index 5e0e6c966..f6be6be5f 100644
--- a/exports/components/file-browser.brief.txt
+++ b/exports/components/file-browser.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — file-browser
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/file-browser.json
 spec: spec/components/file-browser.md  site: https://j3w1.github.io/theme/reference/#c-file-browser
 maturity: stable  priority: R2
@@ -15,21 +15,28 @@ Tokens (resolved):
   secondary.text                                      #bd787d  ({color.text.muted})  use
   control.bg                                          #000000  ({color.surface.input})  use
   control.focus                                       #e53935  ({color.interaction.focus.ring})  use
+  button.bg                                           rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
+  button.text                                         #ffa2a7  ({color.action.secondary.text})  use
+  button.border                                       #a3676b  ({color.action.secondary.border})  use
+  button.bg-hover                                     #630f0d  ({color.action.secondary.hover-bg})  use
+  button.bg-active                                    #420f0c  ({color.action.secondary.pressed-bg})  use
+  button.border-active                                #e53935  ({color.border.active})  use
+  button.focus                                        #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default                1px  ({border.width.default})  use
   dependency.role-border-width-emphasis               2px  ({border.width.emphasis})  use
   dependency.role-color-border-divider                #2b0e0d  ({color.border.divider})  use-and-report (D-008)
   dependency.role-color-border-selected-indicator     #e53935  ({color.border.selected-indicator})  use
   dependency.role-density-comfortable-control-height  32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height      24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                        -2px  ({focus.offset})  use
   dependency.role-radius-none                         0px  ({radius.none})  use
   dependency.role-space-12                            12px  ({space.12})  use
   dependency.role-space-16                            16px  ({space.16})  use
-  dependency.role-space-2                             2px  ({space.2})  use
   dependency.role-space-8                             8px  ({space.8})  use
 State dependency disclosures: D-007
 
 States: default, selected, empty, no-results, focus-visible
-  default: Locations and native file rows. [Explicit names, kinds and sizes.]
+  default: Locations and native file rows. Button controls are the secondary button (button.md); inputs keep the input look. [Explicit names, kinds and sizes.]
   selected: Selected location follows the tree contract. [aria-selected plus location filter.]
   empty: No file rows. [Explicit zero-files text.]
   no-results: Filtered rows are hidden. [Matching count and retained search query.]
diff --git a/exports/components/file-browser.json b/exports/components/file-browser.json
index 434033e11..2a602cab0 100644
--- a/exports/components/file-browser.json
+++ b/exports/components/file-browser.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "file-browser",
   "family": "composed",
   "maturity": "stable",
@@ -139,6 +139,90 @@
         "decisionIds": []
       }
     },
+    "button.bg": {
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.focus": {
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-border-width-default": {
       "alias": "border.width.default",
       "value": "1px",
@@ -213,9 +297,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -225,9 +309,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -237,9 +321,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-16": {
-      "alias": "space.16",
-      "value": "16px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -249,9 +333,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-16": {
+      "alias": "space.16",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -277,7 +361,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Locations and native file rows.",
+      "visual": "Locations and native file rows. Button controls are the secondary button (button.md); inputs keep the input look.",
       "channel": "Explicit names, kinds and sizes.",
       "tokens": {
         "fg": {
@@ -450,6 +534,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/exports/components/file-input.brief.txt b/exports/components/file-input.brief.txt
index 00439ea2b..59d6f8940 100644
--- a/exports/components/file-input.brief.txt
+++ b/exports/components/file-input.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — file-input
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/file-input.json
 spec: spec/components/file-input.md  site: https://j3w1.github.io/theme/reference/#c-file-input
 maturity: stable  priority: R1
@@ -36,12 +36,12 @@ Tokens (resolved):
 
 States: default, hover, focus-visible, drop-target, invalid, disabled, loading
   default: button: 1px {color.action.secondary.border} outline, text {color.action.secondary.text}; zone: 1px dashed {color.interaction.drop-target} [—]
-  hover: button background → {color.action.secondary.hover-bg}; border unchanged [cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the button (the input has focus) [the ring]
-  drop-target: root fill {color.interaction.marquee}; border 1px dashed {color.interaction.drop-target} [dashed pattern; the hint text changes to "Release to add"]
-  invalid: button border 2px {color.status.danger.border}; message with the ✕ glyph; a failed row shows its own ✕ [border width 1 → 2px; glyphs; `aria-invalid`]
-  disabled: button text {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; the zone's dashes take {color.border.disabled}; no hover [`disabled`; cursor: not-allowed]
-  loading: a static bar of 45° stripes, {color.action.primary.bg} on {color.interaction.pressed.bg}, below the row; the button stays enabled [`aria-busy`; the status text reads "Uploading n files"; no animation]
+  hover: button → {color.action.secondary.hover-bg}; border unchanged [cursor: pointer]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px on the button (the input has focus) [the ring]
+  drop-target: root fill {color.interaction.marquee}; 1px dashed {color.interaction.drop-target} border [dashed pattern; hint reads "Release to add"]
+  invalid: button border 2px {color.status.danger.border}; message with ✕; a failed row shows its own ✕ [border 1 → 2px; glyphs; `aria-invalid`]
+  disabled: button text {color.text.disabled}, border {color.border.disabled}, fill {color.interaction.disabled.bg}; zone dashes {color.border.disabled}; no hover [`disabled`; cursor: not-allowed]
+  loading: static 45° stripes, {color.action.primary.bg} on {color.interaction.pressed.bg}, below the row; the button stays enabled [`aria-busy`; status reads "Uploading n files"; no animation]
 
 Keyboard:
   Tab / Shift+Tab: Reaches the native input (drawn as the button), then each remove button in the list.
diff --git a/exports/components/file-input.json b/exports/components/file-input.json
index 7d2a4a833..092621d2a 100644
--- a/exports/components/file-input.json
+++ b/exports/components/file-input.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "file-input",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -413,7 +413,7 @@
     },
     {
       "state": "hover",
-      "visual": "button background → {color.action.secondary.hover-bg}; border unchanged",
+      "visual": "button → {color.action.secondary.hover-bg}; border unchanged",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -444,7 +444,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the button (the input has focus)",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the button (the input has focus)",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -499,8 +499,8 @@
     },
     {
       "state": "drop-target",
-      "visual": "root fill {color.interaction.marquee}; border 1px dashed {color.interaction.drop-target}",
-      "channel": "dashed pattern; the hint text changes to \"Release to add\"",
+      "visual": "root fill {color.interaction.marquee}; 1px dashed {color.interaction.drop-target} border",
+      "channel": "dashed pattern; hint reads \"Release to add\"",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -542,8 +542,8 @@
     },
     {
       "state": "invalid",
-      "visual": "button border 2px {color.status.danger.border}; message with the ✕ glyph; a failed row shows its own ✕",
-      "channel": "border width 1 → 2px; glyphs; `aria-invalid`",
+      "visual": "button border 2px {color.status.danger.border}; message with ✕; a failed row shows its own ✕",
+      "channel": "border 1 → 2px; glyphs; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.action.secondary.text",
@@ -585,14 +585,14 @@
     },
     {
       "state": "disabled",
-      "visual": "button text {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; the zone's dashes take {color.border.disabled}; no hover",
+      "visual": "button text {color.text.disabled}, border {color.border.disabled}, fill {color.interaction.disabled.bg}; zone dashes {color.border.disabled}; no hover",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "loading",
-      "visual": "a static bar of 45° stripes, {color.action.primary.bg} on {color.interaction.pressed.bg}, below the row; the button stays enabled",
-      "channel": "`aria-busy`; the status text reads \"Uploading n files\"; no animation",
+      "visual": "static 45° stripes, {color.action.primary.bg} on {color.interaction.pressed.bg}, below the row; the button stays enabled",
+      "channel": "`aria-busy`; status reads \"Uploading n files\"; no animation",
       "tokens": {}
     }
   ],
@@ -644,7 +644,7 @@
   "specimens": [
     "admin-form"
   ],
-  "nonExamples": "A hidden input with `display: none` and a button that clicks it by script. A\ndrop zone that is the only way to add files. A rounded, dotted, animated\n\"pulsing\" zone. A spinner while uploading. A progress bar that animates its\nstripes. Errors shown by a red file name alone. Disabling by opacity.",
+  "nonExamples": "`display: none` on the input and a button that clicks it by script. A drop\nzone as the only way to add files. A rounded, dotted or pulsing zone. A\nspinner, or animated stripes, while uploading. Errors shown by a red file\nname alone. Disabling by opacity.",
   "contrast": [
     {
       "label": "file-input default text",
@@ -787,7 +787,7 @@
       "bgHex": "#000000",
       "ratio": 4.71,
       "pass": true,
-      "waiver": "inside the hover fill the control border measures 2.94:1; the boundary is judged against the canvas on its outer side (4.45:1), and the fill change is itself the hover signal"
+      "waiver": "inside the hover fill the control border falls below the floor; the boundary is judged against the canvas on its outer side, and the fill change is itself the hover signal"
     },
     {
       "label": "drop-zone dashed border at rest",
diff --git a/exports/components/filterable-table.brief.txt b/exports/components/filterable-table.brief.txt
index 4053a2a31..f5f480960 100644
--- a/exports/components/filterable-table.brief.txt
+++ b/exports/components/filterable-table.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — filterable-table
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/filterable-table.json
 spec: spec/components/filterable-table.md  site: https://j3w1.github.io/theme/reference/#c-filterable-table
 maturity: stable  priority: R1
@@ -52,11 +52,11 @@ Tokens (resolved):
   pagination.disabled      #8a5559  ({color.text.disabled})  use
 
 States: default, hover, focus-visible, selected, no-results
-  default: rest tokens of every component; Name sorted ascending with its ▲ glyph; Prev disabled [`aria-sort`; the glyph]
-  hover: the pointed row takes {color.interaction.hover.bg}; the toolbar controls and chips keep their own hover on their own pointer events only [cursor]
-  focus-visible: the dashed {color.interaction.focus.ring} on the row holding focus (shown on the third row); the toolbar and chips stay at rest [the ring]
-  selected: two rows take {color.interaction.selection.bg} with {color.interaction.selection.text} and a checked box; the select-all reports mixed with the – glyph [`aria-selected`; ✓ and – glyphs; `aria-checked="mixed"`]
-  no-results: the body is the "No components match" row, the count reads 0 of 43, the search field's status line announces it; the chips stay so the cause is visible [text; `role="status"`]
+  default: each component at rest; Name sorted ascending with ▲; Prev disabled [`aria-sort`; the glyph]
+  hover: the pointed row takes {color.interaction.hover.bg}; toolbar controls and chips hover only on their own pointer events [cursor]
+  focus-visible: dashed {color.interaction.focus.ring} on the focused row (the third in the specimen); toolbar and chips at rest [the ring]
+  selected: two rows in {color.interaction.selection.bg} with {color.interaction.selection.text} and a checked box; select-all mixed with – [`aria-selected`; ✓ and – glyphs; `aria-checked="mixed"`]
+  no-results: the body is the "No components match" row; count reads 0 of 43; the search status line announces it; chips stay so the cause is visible [text; `role="status"`]
 
 Keyboard:
   Tab / Shift+Tab: Into the toolbar (the search input is its stop), then each chip's Remove button, then the table (the first row is its stop), then Next.
diff --git a/exports/components/filterable-table.json b/exports/components/filterable-table.json
index 7bfb6a3fc..47672643e 100644
--- a/exports/components/filterable-table.json
+++ b/exports/components/filterable-table.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "filterable-table",
   "family": "composed",
   "maturity": "stable",
@@ -584,7 +584,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "rest tokens of every component; Name sorted ascending with its ▲ glyph; Prev disabled",
+      "visual": "each component at rest; Name sorted ascending with ▲; Prev disabled",
       "channel": "`aria-sort`; the glyph",
       "tokens": {
         "fg": {
@@ -615,7 +615,7 @@
     },
     {
       "state": "hover",
-      "visual": "the pointed row takes {color.interaction.hover.bg}; the toolbar controls and chips keep their own hover on their own pointer events only",
+      "visual": "the pointed row takes {color.interaction.hover.bg}; toolbar controls and chips hover only on their own pointer events",
       "channel": "cursor",
       "tokens": {
         "fg": {
@@ -646,7 +646,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "the dashed {color.interaction.focus.ring} on the row holding focus (shown on the third row); the toolbar and chips stay at rest",
+      "visual": "dashed {color.interaction.focus.ring} on the focused row (the third in the specimen); toolbar and chips at rest",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -689,7 +689,7 @@
     },
     {
       "state": "selected",
-      "visual": "two rows take {color.interaction.selection.bg} with {color.interaction.selection.text} and a checked box; the select-all reports mixed with the – glyph",
+      "visual": "two rows in {color.interaction.selection.bg} with {color.interaction.selection.text} and a checked box; select-all mixed with –",
       "channel": "`aria-selected`; ✓ and – glyphs; `aria-checked=\"mixed\"`",
       "tokens": {
         "fg": {
@@ -720,7 +720,7 @@
     },
     {
       "state": "no-results",
-      "visual": "the body is the \"No components match\" row, the count reads 0 of 43, the search field's status line announces it; the chips stay so the cause is visible",
+      "visual": "the body is the \"No components match\" row; count reads 0 of 43; the search status line announces it; chips stay so the cause is visible",
       "channel": "text; `role=\"status\"`",
       "tokens": {
         "fg": {
@@ -802,7 +802,7 @@
     "pagination"
   ],
   "specimens": [],
-  "nonExamples": "A rounded search pill with a magnifier inside a shadowed toolbar. Filter\nchips drawn as pills with a coloured fill per category. Zebra-striped rows.\nA selected row shown by a coloured left bar and no fill. A blue Material\ncheckbox. A skeleton shimmer while loading. An infinite scroll with no count\nand no pages.",
+  "nonExamples": "A rounded search pill with a magnifier in a shadowed toolbar. Chips as pills\nwith a coloured fill per category. Zebra-striped rows. A selected row shown by\na coloured left bar and no fill. A blue Material checkbox. A skeleton shimmer\nwhile loading. Infinite scroll with no count and no pages.",
   "contrast": [
     {
       "label": "filterable-table default text",
diff --git a/exports/components/form-builder.brief.txt b/exports/components/form-builder.brief.txt
index e35f98b22..2f711263a 100644
--- a/exports/components/form-builder.brief.txt
+++ b/exports/components/form-builder.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — form-builder
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/form-builder.json
 spec: spec/components/form-builder.md  site: https://j3w1.github.io/theme/reference/#c-form-builder
 maturity: draft  priority: L
diff --git a/exports/components/form-builder.json b/exports/components/form-builder.json
index 0dedf2bd2..fee2fdc75 100644
--- a/exports/components/form-builder.json
+++ b/exports/components/form-builder.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "form-builder",
   "family": "forms-advanced",
   "maturity": "draft",
diff --git a/exports/components/i3-window-frame.brief.txt b/exports/components/i3-window-frame.brief.txt
index 8b6d5f64d..f21cd38f4 100644
--- a/exports/components/i3-window-frame.brief.txt
+++ b/exports/components/i3-window-frame.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — i3-window-frame
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/i3-window-frame.json
 spec: spec/components/i3-window-frame.md  site: https://j3w1.github.io/theme/reference/#c-i3-window-frame
 maturity: stable  priority: R1
@@ -18,7 +18,7 @@ Tokens (resolved):
   workspace.selected-text      #f4eeee  ({color.interaction.selection.text})  use
   workspace.bg-hover           #1c0a09  ({color.interaction.hover.bg})  use
   workspace.ring               #e53935  ({color.interaction.focus.ring})  use
-  workspace.ring-on-selection  #ffa2a7  ({color.interaction.focus.ring-container})  use
+  workspace.ring-on-selection  #e53935  ({color.interaction.focus.ring})  use
   workspace.urgent-bg          #dc282e  ({color.status.danger.fill})  use
   workspace.urgent-text        #f9faf9  ({color.status.danger.on-fill})  use
   status.separator             #bd787d  ({color.text.muted})  use
@@ -42,11 +42,11 @@ Tokens (resolved):
   editor.bg                    #0c0909  ({color.code.bg})  use
 
 States: default, focus-visible, selected, container-inactive, error
-  default: the terminal window focused: {color.border.active} frame and the bright title; the editor at rest; workspace 1 filled [the title text; `aria-selected`]
-  focus-visible: the 2px {color.interaction.focus.ring-container} ring at −3px inside the focused window or container; the client draws no second ring [the ring]
-  selected: workspace 2 takes the selection fill with {color.interaction.selection.text}; workspace 1 drops to rest [`aria-selected`]
-  container-inactive: no window has focus: every frame {color.border.default}, every title {color.text.muted} on {color.surface.chrome}, the tab indicator {color.border.selected-indicator-inactive}, no caret [lightness drop; no caret]
-  error: workspace 3 is urgent: {color.status.danger.fill} with {color.status.danger.on-fill} and a trailing ! [the ! mark; "urgent" read to assistive technology]
+  default: terminal window focused: {color.border.active} frame, bright title; editor at rest; workspace 1 filled [the title text; `aria-selected`]
+  focus-visible: 2px {color.interaction.focus.ring-container} ring at −3px inside the focused window or container; the client draws no second ring [the ring]
+  selected: workspace 2 takes the selection fill with {color.interaction.selection.text}, 1px dashed {color.interaction.focus.ring} at −2px when focused; workspace 1 at rest [`aria-selected`]
+  container-inactive: no window focused: every frame {color.border.default}, every title {color.text.muted} on {color.surface.chrome}, tab indicator {color.border.selected-indicator-inactive}, no caret [lightness drop; no caret]
+  error: workspace 3 urgent: {color.status.danger.fill} with {color.status.danger.on-fill} and a trailing ! [the ! mark; "urgent" read to assistive technology]
 
 Keyboard:
   Tab / Shift+Tab: The workspace tablist (its selected tab is the stop), then each window group, then the client inside it; in the tabbed variant the tab list, then the visible panel's client.
diff --git a/exports/components/i3-window-frame.json b/exports/components/i3-window-frame.json
index eb42a5106..5c9a13fdb 100644
--- a/exports/components/i3-window-frame.json
+++ b/exports/components/i3-window-frame.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "i3-window-frame",
   "family": "composed",
   "maturity": "stable",
@@ -188,8 +188,8 @@
       }
     },
     "workspace.ring-on-selection": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -457,7 +457,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "the terminal window focused: {color.border.active} frame and the bright title; the editor at rest; workspace 1 filled",
+      "visual": "terminal window focused: {color.border.active} frame, bright title; editor at rest; workspace 1 filled",
       "channel": "the title text; `aria-selected`",
       "tokens": {
         "fg": {
@@ -488,7 +488,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "the 2px {color.interaction.focus.ring-container} ring at −3px inside the focused window or container; the client draws no second ring",
+      "visual": "2px {color.interaction.focus.ring-container} ring at −3px inside the focused window or container; the client draws no second ring",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -531,7 +531,7 @@
     },
     {
       "state": "selected",
-      "visual": "workspace 2 takes the selection fill with {color.interaction.selection.text}; workspace 1 drops to rest",
+      "visual": "workspace 2 takes the selection fill with {color.interaction.selection.text}, 1px dashed {color.interaction.focus.ring} at −2px when focused; workspace 1 at rest",
       "channel": "`aria-selected`",
       "tokens": {
         "fg": {
@@ -562,7 +562,7 @@
     },
     {
       "state": "container-inactive",
-      "visual": "no window has focus: every frame {color.border.default}, every title {color.text.muted} on {color.surface.chrome}, the tab indicator {color.border.selected-indicator-inactive}, no caret",
+      "visual": "no window focused: every frame {color.border.default}, every title {color.text.muted} on {color.surface.chrome}, tab indicator {color.border.selected-indicator-inactive}, no caret",
       "channel": "lightness drop; no caret",
       "tokens": {
         "fg": {
@@ -593,7 +593,7 @@
     },
     {
       "state": "error",
-      "visual": "workspace 3 is urgent: {color.status.danger.fill} with {color.status.danger.on-fill} and a trailing !",
+      "visual": "workspace 3 urgent: {color.status.danger.fill} with {color.status.danger.on-fill} and a trailing !",
       "channel": "the ! mark; \"urgent\" read to assistive technology",
       "tokens": {
         "fg": {
@@ -667,7 +667,7 @@
     "tabs"
   ],
   "specimens": [],
-  "nonExamples": "A window with rounded corners or a title bar gradient. A focused window\nthat glows or blurs its neighbours. A shadow under a tiled window; the only\nshadow is the floating one. Gaps of 14/−2 forced into an unrelated\napplication's layout. A workspace indicator drawn as a red underline\ninstead of the selection fill. Traffic-light close buttons in the title\nbar. A translucent bar.",
+  "nonExamples": "Rounded corners or a title-bar gradient. A focused window that glows or\nblurs its neighbours. A shadow under a tiled window. 14/−2 gaps forced into\nan unrelated application. A red underline instead of the selection fill for\nthe workspace. Traffic-light buttons in the title bar. A translucent bar.",
   "contrast": [
     {
       "label": "i3-window-frame default text",
@@ -747,6 +747,19 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "label": "ring on a selected workspace when focused",
+      "state": "selected",
+      "kind": "ui",
+      "min": 3,
+      "fg": "color.interaction.focus.ring",
+      "bg": "color.interaction.selection.bg",
+      "fgHex": "#e53935",
+      "bgHex": "#531310",
+      "ratio": 3.38,
+      "pass": true,
+      "waiver": null
+    },
     {
       "label": "workspace names and status text on the bar",
       "state": null,
diff --git a/exports/components/icon-button.brief.txt b/exports/components/icon-button.brief.txt
index a170fd628..edade1586 100644
--- a/exports/components/icon-button.brief.txt
+++ b/exports/components/icon-button.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — icon-button
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/icon-button.json
 spec: spec/components/icon-button.md  site: https://j3w1.github.io/theme/reference/#c-icon-button
 maturity: stable  priority: R1
@@ -17,20 +17,20 @@ Tokens (resolved):
   root.bg-toggled       #531310  ({color.interaction.selection.bg})  use
   root.text-toggled     #f4eeee  ({color.interaction.selection.text})  use
   root.border-toggled   #e53935  ({color.border.selected-indicator})  use
-  root.ring-toggled     #ffa2a7  ({color.interaction.focus.ring-container})  use
+  root.ring-toggled     #e53935  ({color.interaction.focus.ring})  use
   root.text-disabled    #8a5559  ({color.text.disabled})  use
   root.bg-disabled      #160b0b  ({color.interaction.disabled.bg})  use
   root.border-disabled  #7d1310  ({color.border.disabled})  use
   icon.stroke           #e99499  ({color.icon.default})  use
 
 States: default, hover, focus-visible, active, disabled, toggled, toggled+focus-visible
-  default: {color.action.tertiary.text} icon on nothing; transparent 1px border [—]
+  default: {color.action.tertiary.text} icon, no fill; transparent 1px border [—]
   hover: background → {color.action.tertiary.hover-bg} [cursor: pointer; hover-capable pointers only]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px [the ring]
+  focus-visible: 1px dashed ring {color.interaction.focus.ring} at −2px [the ring]
   active: background → {color.interaction.pressed.bg}; border → {color.border.active} [border change; no translation]
-  disabled: {color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}; no hover [`disabled`; cursor: not-allowed]
-  toggled: fill {color.interaction.selection.bg} with {color.interaction.selection.text}; border {color.border.selected-indicator}; the icon draws in its filled form [`aria-pressed="true"`; the filled icon shape; the border]
-  toggled+focus-visible: the selection fill and a ring in {color.interaction.focus.ring-container} [both visible at once]
+  disabled: {color.text.disabled} on {color.interaction.disabled.bg}, 1px {color.border.disabled}; no hover [`disabled`; cursor: not-allowed]
+  toggled: {color.interaction.selection.bg} fill, {color.interaction.selection.text}, border {color.border.selected-indicator}; filled icon form [`aria-pressed="true"`; the filled icon shape; the border]
+  toggled+focus-visible: the selection fill and 1px dashed {color.interaction.focus.ring} at −2px [both visible at once]
 
 Keyboard:
   Tab / Shift+Tab: Moves focus to and from the button.
diff --git a/exports/components/icon-button.json b/exports/components/icon-button.json
index 251daf19e..54c4b95d2 100644
--- a/exports/components/icon-button.json
+++ b/exports/components/icon-button.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "icon-button",
   "family": "actions",
   "maturity": "stable",
@@ -171,8 +171,8 @@
       }
     },
     "root.ring-toggled": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -234,7 +234,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "{color.action.tertiary.text} icon on nothing; transparent 1px border",
+      "visual": "{color.action.tertiary.text} icon, no fill; transparent 1px border",
       "channel": "—",
       "tokens": {
         "fg": {
@@ -296,7 +296,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "1px dashed ring {color.interaction.focus.ring} at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -382,13 +382,13 @@
     },
     {
       "state": "disabled",
-      "visual": "{color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}; no hover",
+      "visual": "{color.text.disabled} on {color.interaction.disabled.bg}, 1px {color.border.disabled}; no hover",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "toggled",
-      "visual": "fill {color.interaction.selection.bg} with {color.interaction.selection.text}; border {color.border.selected-indicator}; the icon draws in its filled form",
+      "visual": "{color.interaction.selection.bg} fill, {color.interaction.selection.text}, border {color.border.selected-indicator}; filled icon form",
       "channel": "`aria-pressed=\"true\"`; the filled icon shape; the border",
       "tokens": {
         "fg": {
@@ -419,7 +419,7 @@
     },
     {
       "state": "toggled+focus-visible",
-      "visual": "the selection fill and a ring in {color.interaction.focus.ring-container}",
+      "visual": "the selection fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -447,8 +447,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -499,7 +499,7 @@
     "filterable-table",
     "i3-window-frame"
   ],
-  "nonExamples": "A circle. An icon button without an accessible name. A toggle that changes\nits label instead of `aria-pressed`. A hover that recolours the icon alone.\nAn emoji or icon-font glyph in place of the SVG. A toggled state shown by\ncolour alone with a line icon. A shadow or scale on press.",
+  "nonExamples": "A circle. No accessible name. A toggle that changes its label instead of\n`aria-pressed`. A hover that recolours only the icon. An emoji or icon-font\nglyph instead of the SVG. A toggled state shown by colour alone with a line\nicon. A shadow or scale on press.",
   "contrast": [
     {
       "label": "icon-button default text",
@@ -610,11 +610,11 @@
       "state": "toggled+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/kbd.brief.txt b/exports/components/kbd.brief.txt
index 2e1818049..dcc5ea1e1 100644
--- a/exports/components/kbd.brief.txt
+++ b/exports/components/kbd.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — kbd
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/kbd.json
 spec: spec/components/kbd.md  site: https://j3w1.github.io/theme/reference/#c-kbd
 maturity: stable  priority: R2
@@ -17,6 +17,7 @@ Tokens (resolved):
   control.focus                          #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default   1px  ({border.width.default})  use
   dependency.role-border-width-emphasis  2px  ({border.width.emphasis})  use
+  dependency.role-focus-offset           -2px  ({focus.offset})  use
   dependency.role-radius-none            0px  ({radius.none})  use
   dependency.role-space-12               12px  ({space.12})  use
   dependency.role-space-2                2px  ({space.2})  use
diff --git a/exports/components/kbd.json b/exports/components/kbd.json
index c7de78e55..1842e98a0 100644
--- a/exports/components/kbd.json
+++ b/exports/components/kbd.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "kbd",
   "family": "display",
   "maturity": "stable",
@@ -159,6 +159,18 @@
         "decisionIds": []
       }
     },
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-radius-none": {
       "alias": "radius.none",
       "value": "0px",
diff --git a/exports/components/link.brief.txt b/exports/components/link.brief.txt
index 6a807e10e..a5b62dc97 100644
--- a/exports/components/link.brief.txt
+++ b/exports/components/link.brief.txt
@@ -1,17 +1,17 @@
 j3w1/theme implementation brief — link
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/link.json
 spec: spec/components/link.md  site: https://j3w1.github.io/theme/reference/#c-link
 maturity: stable  priority: R1
 
-Summary: The native anchor for navigation; always underlined in the link-underline role, hover fills with the strong hover surface, the current page carries a 2px indicator bar.
+Summary: The native anchor for navigation; always underlined in the link-underline role, hover fills with the hover surface, the current page carries a 2px indicator bar.
 
 Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens.
 Tokens (resolved):
   root.text          #f73f35  ({color.text.link})  use
   root.underline     #dc282e  ({color.text.link-underline})  use
   root.text-hover    #f4eeee  ({color.text.link-hover})  use
-  root.bg-hover      #630f0d  ({color.interaction.hover.bg-strong})  use
+  root.bg-hover      #1c0a09  ({color.interaction.hover.bg})  use
   root.ring          #e53935  ({color.interaction.focus.ring})  use
   root.text-visited  #f73f35  ({color.text.link})  use
   root.text-current  #ffa2a7  ({color.text.bright})  use
@@ -19,11 +19,11 @@ Tokens (resolved):
   icon.stroke        #e99499  ({color.icon.default})  use
 
 States: default, hover, focus-visible, visited, current
-  default: {color.text.link}; underline 1px {color.text.link-underline} offset 2px [the underline]
-  hover: background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover}; underline 2px in the text colour [underline thickens 1px → 2px; cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px; no change to the underline [the ring]
-  visited: {color.text.link}; underline unchanged [the underline continues to mark navigation; browsing history does not reduce its visibility]
-  current: text → {color.text.bright}; the underline becomes a 2px {color.border.selected-indicator} bottom border; no hover fill [`aria-current="page"`; the bar's 2px weight]
+  default: {color.text.link}; 1px {color.text.link-underline} underline, offset 2px [the underline]
+  hover: fill {color.interaction.hover.bg} (D-027); text {color.text.link-hover}; underline 2px in the text colour [underline 1px → 2px; cursor: pointer]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px; underline unchanged [the ring]
+  visited: as default [the underline still marks navigation]
+  current: {color.text.bright}; a 2px {color.border.selected-indicator} bottom border replaces the underline; no hover fill [`aria-current="page"`; the 2px bar]
 
 Keyboard:
   Tab / Shift+Tab: Moves focus to and from the link.
diff --git a/exports/components/link.json b/exports/components/link.json
index 644a18354..172f73b6a 100644
--- a/exports/components/link.json
+++ b/exports/components/link.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "link",
   "family": "actions",
   "maturity": "stable",
@@ -25,7 +25,7 @@
     "states": 5
   },
   "title": "Link",
-  "summary": "The native anchor for navigation; always underlined in the link-underline role, hover fills with the strong hover surface, the current page carries a 2px indicator bar.",
+  "summary": "The native anchor for navigation; always underlined in the link-underline role, hover fills with the hover surface, the current page carries a 2px indicator bar.",
   "anchors": {
     "site": "https://j3w1.github.io/theme/reference/#c-link",
     "spec": "spec/components/link.md",
@@ -101,8 +101,8 @@
       }
     },
     "root.bg-hover": {
-      "alias": "color.interaction.hover.bg-strong",
-      "value": "#630f0d",
+      "alias": "color.interaction.hover.bg",
+      "value": "#1c0a09",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -176,7 +176,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "{color.text.link}; underline 1px {color.text.link-underline} offset 2px",
+      "visual": "{color.text.link}; 1px {color.text.link-underline} underline, offset 2px",
       "channel": "the underline",
       "tokens": {
         "fg": {
@@ -207,8 +207,8 @@
     },
     {
       "state": "hover",
-      "visual": "background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover}; underline 2px in the text colour",
-      "channel": "underline thickens 1px → 2px; cursor: pointer",
+      "visual": "fill {color.interaction.hover.bg} (D-027); text {color.text.link-hover}; underline 2px in the text colour",
+      "channel": "underline 1px → 2px; cursor: pointer",
       "tokens": {
         "fg": {
           "alias": "color.text.link-hover",
@@ -223,8 +223,8 @@
           }
         },
         "bg": {
-          "alias": "color.interaction.hover.bg-strong",
-          "value": "#630f0d",
+          "alias": "color.interaction.hover.bg",
+          "value": "#1c0a09",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -238,7 +238,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px; no change to the underline",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px; underline unchanged",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -281,8 +281,8 @@
     },
     {
       "state": "visited",
-      "visual": "{color.text.link}; underline unchanged",
-      "channel": "the underline continues to mark navigation; browsing history does not reduce its visibility",
+      "visual": "as default",
+      "channel": "the underline still marks navigation",
       "tokens": {
         "fg": {
           "alias": "color.text.link",
@@ -312,8 +312,8 @@
     },
     {
       "state": "current",
-      "visual": "text → {color.text.bright}; the underline becomes a 2px {color.border.selected-indicator} bottom border; no hover fill",
-      "channel": "`aria-current=\"page\"`; the bar's 2px weight",
+      "visual": "{color.text.bright}; a 2px {color.border.selected-indicator} bottom border replaces the underline; no hover fill",
+      "channel": "`aria-current=\"page\"`; the 2px bar",
       "tokens": {
         "fg": {
           "alias": "color.text.bright",
@@ -415,10 +415,10 @@
       "kind": "text",
       "min": 4.5,
       "fg": "color.text.link-hover",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#f4eeee",
-      "bgHex": "#630f0d",
-      "ratio": 11.41,
+      "bgHex": "#1c0a09",
+      "ratio": 16.7,
       "pass": true,
       "waiver": null
     },
@@ -545,10 +545,10 @@
       "kind": "ui",
       "min": 3,
       "fg": "color.interaction.focus.ring",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#e53935",
-      "bgHex": "#630f0d",
-      "ratio": 3.1,
+      "bgHex": "#1c0a09",
+      "ratio": 4.53,
       "pass": true,
       "waiver": null
     }
diff --git a/exports/components/list.brief.txt b/exports/components/list.brief.txt
index 3448154c1..6f23eedeb 100644
--- a/exports/components/list.brief.txt
+++ b/exports/components/list.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — list
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/list.json
 spec: spec/components/list.md  site: https://j3w1.github.io/theme/reference/#c-list
 maturity: stable  priority: R1
@@ -17,7 +17,7 @@ Tokens (resolved):
   row.text-disabled       #8a5559  ({color.text.disabled})  use
   selected.bg             #531310  ({color.interaction.selection.bg})  use
   selected.text           #f4eeee  ({color.interaction.selection.text})  use
-  selected.ring           #ffa2a7  ({color.interaction.focus.ring-container})  use
+  selected.ring           #e53935  ({color.interaction.focus.ring})  use
   selected.inactive-bg    #420f0c  ({color.interaction.selection.inactive-bg})  use
   selected.inactive-text  #e99499  ({color.interaction.selection.inactive-text})  use
   check.glyph             #f4eeee  ({color.interaction.selection.text})  use
@@ -25,11 +25,11 @@ Tokens (resolved):
 State dependency disclosures: D-007
 
 States: default, hover, focus-visible, selected, selected+focus-visible, selected+container-inactive, disabled
-  default: text {color.text.default}; no fill; the check gutter empty [—]
+  default: text {color.text.default}; no fill; check gutter empty [—]
   hover: background → {color.interaction.hover.bg} [cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the option [the ring]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px on the option [the ring]
   selected: fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text} [`aria-selected="true"`; the ✓ glyph]
-  selected+focus-visible: the fill and the ring in {color.interaction.focus.ring-container} [both visible at once]
+  selected+focus-visible: the fill and 1px dashed {color.interaction.focus.ring} at −2px [both visible at once]
   selected+container-inactive: fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring [lightness drop between the two fills; the glyph stays]
   disabled: text {color.text.disabled}; no fill; no hover; still reachable by arrow keys [`aria-disabled="true"`; cursor: not-allowed]
 
diff --git a/exports/components/list.json b/exports/components/list.json
index dc0863550..0b40b7264 100644
--- a/exports/components/list.json
+++ b/exports/components/list.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "list",
   "family": "display",
   "maturity": "stable",
@@ -181,8 +181,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -244,7 +244,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "text {color.text.default}; no fill; the check gutter empty",
+      "visual": "text {color.text.default}; no fill; check gutter empty",
       "channel": "—",
       "tokens": {
         "fg": {
@@ -320,7 +320,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the option",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the option",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -394,7 +394,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the fill and the ring in {color.interaction.focus.ring-container}",
+      "visual": "the fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -422,8 +422,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -534,7 +534,7 @@
     "settings-panel",
     "filterable-table"
   ],
-  "nonExamples": "A selected row marked by a border or a check alone without the fill. Rounded\nrow highlights. Muted metadata left on the selection fill. A list where every\nrow is a tab stop. A list that navigates on selection. Disabled rows removed\nfrom the arrow-key order. Hover that changes the text colour. A list without\na frame on the canvas.",
+  "nonExamples": "A selected row marked by a border or check without the fill. Rounded row\nhighlights. Muted metadata left on the selection fill. Every row a tab stop.\nNavigating on selection. Disabled rows removed from the arrow-key order.\nHover that changes text colour. A frameless list on the canvas.",
   "contrast": [
     {
       "label": "list default text",
@@ -632,11 +632,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/loading-indicator.brief.txt b/exports/components/loading-indicator.brief.txt
index de450c89a..558666bad 100644
--- a/exports/components/loading-indicator.brief.txt
+++ b/exports/components/loading-indicator.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — loading-indicator
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/loading-indicator.json
 spec: spec/components/loading-indicator.md  site: https://j3w1.github.io/theme/reference/#c-loading-indicator
 maturity: stable  priority: R1
@@ -15,7 +15,7 @@ Tokens (resolved):
 
 States: default, reduced-motion
   default: the static ⋯ and the label [`aria-busy="true"`; the glyph; the worded label]
-  reduced-motion: identical: there is nothing to reduce [`prefers-reduced-motion`]
+  reduced-motion: identical: nothing to reduce [`prefers-reduced-motion`]
 
 Keyboard:
   Tab: Nothing; the indicator is not focusable and never traps focus; the content it replaces keeps its tab stops when it returns.
diff --git a/exports/components/loading-indicator.json b/exports/components/loading-indicator.json
index 104d2579b..4248e1107 100644
--- a/exports/components/loading-indicator.json
+++ b/exports/components/loading-indicator.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "loading-indicator",
   "family": "feedback",
   "maturity": "stable",
@@ -140,7 +140,7 @@
     },
     {
       "state": "reduced-motion",
-      "visual": "identical: there is nothing to reduce",
+      "visual": "identical: nothing to reduce",
       "channel": "`prefers-reduced-motion`",
       "tokens": {
         "fg": {
@@ -204,7 +204,7 @@
     "filterable-table",
     "settings-panel"
   ],
-  "nonExamples": "A spinner or rotating ring. Animated dots. A shimmering skeleton. A full-page\noverlay that blocks input for a fetch. A glyph with no label. An indicator\nthat takes focus. A dimmed container at reduced opacity.",
+  "nonExamples": "A spinner or rotating ring. Animated dots. A shimmering skeleton. A\nfull-page overlay blocking input for a fetch. A glyph with no label. An\nindicator that takes focus. A dimmed, reduced-opacity container.",
   "contrast": [
     {
       "label": "loading-indicator default text",
diff --git a/exports/components/menu.brief.txt b/exports/components/menu.brief.txt
index 77b1da8da..cd7ca40ec 100644
--- a/exports/components/menu.brief.txt
+++ b/exports/components/menu.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — menu
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/menu.json
 spec: spec/components/menu.md  site: https://j3w1.github.io/theme/reference/#c-menu
 maturity: stable  priority: R1
@@ -23,7 +23,7 @@ Tokens (resolved):
   item.text-disabled  #8a5559  ({color.text.disabled})  use
   active.bg           #531310  ({color.interaction.selection.bg})  use
   active.text         #f4eeee  ({color.interaction.selection.text})  use
-  active.ring         #ffa2a7  ({color.interaction.focus.ring-container})  use
+  active.ring         #e53935  ({color.interaction.focus.ring})  use
   check.glyph         #ffa2a7  ({color.text.bright})  use
   shortcut.text       #bd787d  ({color.text.muted})  use
   separator.color     #2b0e0d  ({color.border.divider})  use-and-report (D-008)
@@ -31,14 +31,14 @@ Tokens (resolved):
 State dependency disclosures: D-007, D-008
 
 States: default, hover, focus-visible, open, closed, disabled, checked, selected
-  default: the button at rest; the list on {color.surface.raised} with the {color.border.overlay} frame [—]
-  hover: item background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover} [cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the button; on the active item the ring is {color.interaction.focus.ring-container} [the ring]
-  open: button fill {color.interaction.pressed.bg} with 1px {color.border.active}; the list shown [`aria-expanded="true"`; the list is present]
-  closed: the button at rest; the list hidden [`aria-expanded="false"`; the list is absent from the tree]
-  disabled: item text {color.text.disabled}; no hover; still focusable by arrow keys when `aria-disabled` [`aria-disabled="true"`; cursor: not-allowed]
-  checked: the ✓ glyph in {color.text.bright} in the gutter [`aria-checked="true"`; the glyph]
-  selected: the active item: fill {color.interaction.selection.bg} with {color.interaction.selection.text} [focus is on the item; `aria-activedescendant` where used]
+  default: button at rest; list on {color.surface.raised} in the {color.border.overlay} frame [—]
+  hover: item → {color.interaction.hover.bg-strong}, text {color.text.link-hover} [cursor: pointer]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px on the button and the active item [the ring]
+  open: button {color.interaction.pressed.bg} with 1px {color.border.active}; list shown [`aria-expanded="true"`; list present]
+  closed: button at rest; list hidden [`aria-expanded="false"`; list absent from the tree]
+  disabled: item text {color.text.disabled}; no hover; still reachable by arrow keys when `aria-disabled` [`aria-disabled="true"`; cursor: not-allowed]
+  checked: ✓ in {color.text.bright} in the gutter [`aria-checked="true"`; the glyph]
+  selected: active item filled {color.interaction.selection.bg} with {color.interaction.selection.text} [focus on the item; `aria-activedescendant` where used]
 
 Keyboard:
   Enter / Space / Down: On the button, opens the menu and focuses the first item; Up opens it and focuses the last.
diff --git a/exports/components/menu.json b/exports/components/menu.json
index 347454645..759da2894 100644
--- a/exports/components/menu.json
+++ b/exports/components/menu.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "menu",
   "family": "navigation",
   "maturity": "stable",
@@ -254,8 +254,8 @@
       }
     },
     "active.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -319,7 +319,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "the button at rest; the list on {color.surface.raised} with the {color.border.overlay} frame",
+      "visual": "button at rest; list on {color.surface.raised} in the {color.border.overlay} frame",
       "channel": "—",
       "tokens": {
         "fg": {
@@ -364,7 +364,7 @@
     },
     {
       "state": "hover",
-      "visual": "item background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover}",
+      "visual": "item → {color.interaction.hover.bg-strong}, text {color.text.link-hover}",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -395,7 +395,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the button; on the active item the ring is {color.interaction.focus.ring-container}",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the button and the active item",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -452,8 +452,8 @@
     },
     {
       "state": "open",
-      "visual": "button fill {color.interaction.pressed.bg} with 1px {color.border.active}; the list shown",
-      "channel": "`aria-expanded=\"true\"`; the list is present",
+      "visual": "button {color.interaction.pressed.bg} with 1px {color.border.active}; list shown",
+      "channel": "`aria-expanded=\"true\"`; list present",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -495,8 +495,8 @@
     },
     {
       "state": "closed",
-      "visual": "the button at rest; the list hidden",
-      "channel": "`aria-expanded=\"false\"`; the list is absent from the tree",
+      "visual": "button at rest; list hidden",
+      "channel": "`aria-expanded=\"false\"`; list absent from the tree",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -540,13 +540,13 @@
     },
     {
       "state": "disabled",
-      "visual": "item text {color.text.disabled}; no hover; still focusable by arrow keys when `aria-disabled`",
+      "visual": "item text {color.text.disabled}; no hover; still reachable by arrow keys when `aria-disabled`",
       "channel": "`aria-disabled=\"true\"`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "checked",
-      "visual": "the ✓ glyph in {color.text.bright} in the gutter",
+      "visual": "✓ in {color.text.bright} in the gutter",
       "channel": "`aria-checked=\"true\"`; the glyph",
       "tokens": {
         "fg": {
@@ -577,8 +577,8 @@
     },
     {
       "state": "selected",
-      "visual": "the active item: fill {color.interaction.selection.bg} with {color.interaction.selection.text}",
-      "channel": "focus is on the item; `aria-activedescendant` where used",
+      "visual": "active item filled {color.interaction.selection.bg} with {color.interaction.selection.text}",
+      "channel": "focus on the item; `aria-activedescendant` where used",
       "tokens": {
         "fg": {
           "alias": "color.interaction.selection.text",
@@ -605,8 +605,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -683,7 +683,7 @@
     "filterable-table",
     "i3-window-frame"
   ],
-  "nonExamples": "A shadow under the menu. Rounded corners on the menu or the items. An active\nitem marked by text colour alone. A hover fill that differs from every other\nmenu in the product. Icons in the check gutter of a plain menuitem. A menu\nthat stays open after an action. Items that are links styled as menu items\nwithout `role=\"menuitem\"`. Disabling by opacity.",
+  "nonExamples": "A shadow under the menu. Rounded menu or items. An active item marked by text\ncolour alone. A hover fill unlike every other menu in the product. Icons in a\nplain menuitem's check gutter. A menu that stays open after an action. Links\nstyled as menu items without `role=\"menuitem\"`. Disabling by opacity.",
   "contrast": [
     {
       "label": "menu default text",
@@ -846,11 +846,11 @@
       "state": "selected",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/multiselect.brief.txt b/exports/components/multiselect.brief.txt
index 224a6082a..42899a25b 100644
--- a/exports/components/multiselect.brief.txt
+++ b/exports/components/multiselect.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — multiselect
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/multiselect.json
 spec: spec/components/multiselect.md  site: https://j3w1.github.io/theme/reference/#c-multiselect
 maturity: stable  priority: R2
@@ -15,6 +15,13 @@ Tokens (resolved):
   secondary.text                                          #bd787d  ({color.text.muted})  use
   control.bg                                              #000000  ({color.surface.input})  use
   control.focus                                           #e53935  ({color.interaction.focus.ring})  use
+  button.bg                                               rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
+  button.text                                             #ffa2a7  ({color.action.secondary.text})  use
+  button.border                                           #a3676b  ({color.action.secondary.border})  use
+  button.bg-hover                                         #630f0d  ({color.action.secondary.hover-bg})  use
+  button.bg-active                                        #420f0c  ({color.action.secondary.pressed-bg})  use
+  button.border-active                                    #e53935  ({color.border.active})  use
+  button.focus                                            #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default                    1px  ({border.width.default})  use
   dependency.role-border-width-emphasis                   2px  ({border.width.emphasis})  use
   dependency.role-color-action-primary-bg                 #7d1310  ({color.action.primary.bg})  use
@@ -46,11 +53,11 @@ Tokens (resolved):
 State dependency disclosures: D-007
 
 States: default, checked, focus-visible, disabled, no-results
-  default: Named content on the default surface. [Native text and structure.]
+  default: Named content on the default surface. Button controls are the secondary button (button.md); inputs keep the input look. [Native text and structure.]
   checked: Selected fill and a check indicator. [Native checked state.]
   focus-visible: Dashed focus ring. [Native keyboard focus position.]
   disabled: Disabled semantic foreground, background and border at full opacity. [Native disabled state blocks activation.]
-  no-results: Muted result count. [Zero-results text; existing selected values remain selected.]
+  no-results: Muted result count. [Zero-results text; selected values stay selected.]
 
 Keyboard:
   Tab / Shift+Tab: Visit search, clear and each visible enabled checkbox.
diff --git a/exports/components/multiselect.json b/exports/components/multiselect.json
index a8ba1ce29..686d488d3 100644
--- a/exports/components/multiselect.json
+++ b/exports/components/multiselect.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "multiselect",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -139,6 +139,90 @@
         "decisionIds": []
       }
     },
+    "button.bg": {
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.focus": {
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-border-width-default": {
       "alias": "border.width.default",
       "value": "1px",
@@ -479,7 +563,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Named content on the default surface.",
+      "visual": "Named content on the default surface. Button controls are the secondary button (button.md); inputs keep the input look.",
       "channel": "Native text and structure.",
       "tokens": {
         "fg": {
@@ -543,7 +627,7 @@
     {
       "state": "no-results",
       "visual": "Muted result count.",
-      "channel": "Zero-results text; existing selected values remain selected.",
+      "channel": "Zero-results text; selected values stay selected.",
       "tokens": {}
     }
   ],
@@ -648,6 +732,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/exports/components/number-field.brief.txt b/exports/components/number-field.brief.txt
index 51e5989a1..a251b1557 100644
--- a/exports/components/number-field.brief.txt
+++ b/exports/components/number-field.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — number-field
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/number-field.json
 spec: spec/components/number-field.md  site: https://j3w1.github.io/theme/reference/#c-number-field
 maturity: stable  priority: R1
@@ -35,11 +35,11 @@ State dependency disclosures: D-007
 States: default, hover, focus-visible, invalid, invalid+focus-visible, disabled, read-only
   default: 1px {color.border.control} on {color.surface.input}; digits {color.text.default}; unit {color.text.muted}; stepper glyphs {color.action.tertiary.text} [—]
   hover: background → {color.interaction.hover.bg}; a hovered stepper button → {color.action.tertiary.hover-bg} [cursor: text on the input, pointer on the buttons]
-  focus-visible: border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px on the box, or on the focused stepper button [the ring]
-  invalid: border 2px {color.status.danger.border}; message with the ✕ glyph [border width 1 → 2px; glyph; `aria-invalid`]
+  focus-visible: border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px on the box or the focused stepper button [the ring]
+  invalid: 2px {color.status.danger.border}; message with the ✕ glyph [border 1 → 2px; glyph; `aria-invalid`]
   invalid+focus-visible: the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px [double boundary]
   disabled: text, unit and glyphs {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; buttons disabled [`disabled`; cursor: not-allowed]
-  read-only: no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; the stepper is hidden [`readonly`; dotted edge; no buttons]
+  read-only: no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; stepper hidden [`readonly`; dotted edge; no buttons]
 
 Keyboard:
   Tab / Shift+Tab: Input, then the increase button, then the decrease button.
diff --git a/exports/components/number-field.json b/exports/components/number-field.json
index bfb33549d..6bb6373b6 100644
--- a/exports/components/number-field.json
+++ b/exports/components/number-field.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "number-field",
   "family": "forms-basic",
   "maturity": "stable",
@@ -427,7 +427,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px on the box, or on the focused stepper button",
+      "visual": "border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px on the box or the focused stepper button",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -482,8 +482,8 @@
     },
     {
       "state": "invalid",
-      "visual": "border 2px {color.status.danger.border}; message with the ✕ glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border}; message with the ✕ glyph",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -586,7 +586,7 @@
     },
     {
       "state": "read-only",
-      "visual": "no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; the stepper is hidden",
+      "visual": "no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; stepper hidden",
       "channel": "`readonly`; dotted edge; no buttons",
       "tokens": {
         "fg": {
@@ -665,7 +665,7 @@
     "settings-panel",
     "admin-form"
   ],
-  "nonExamples": "The host's default spinner. Round or overlapping stepper buttons. A value\nclamped silently on blur. Left-aligned digits. A unit typed into the value.\nA number field for phone numbers, postcodes or identifiers. Invalid shown by\ncolour alone. Disabling by opacity.",
+  "nonExamples": "The host's default spinner. Round or overlapping stepper buttons. A value\nclamped silently. Left-aligned digits. A unit typed into the value. A number\nfield for phone numbers, postcodes or identifiers. Invalid by colour alone.\nDisabling by opacity.",
   "contrast": [
     {
       "label": "number-field default text",
diff --git a/exports/components/pagination.brief.txt b/exports/components/pagination.brief.txt
index 8a207d7ef..abc1fcbf7 100644
--- a/exports/components/pagination.brief.txt
+++ b/exports/components/pagination.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — pagination
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/pagination.json
 spec: spec/components/pagination.md  site: https://j3w1.github.io/theme/reference/#c-pagination
 maturity: stable  priority: R1
@@ -16,17 +16,17 @@ Tokens (resolved):
   link.text-disabled  #8a5559  ({color.text.disabled})  use
   current.bg          #531310  ({color.interaction.selection.bg})  use
   current.text        #f4eeee  ({color.text.on-selection})  use
-  current.ring        #ffa2a7  ({color.interaction.focus.ring-container})  use
+  current.ring        #e53935  ({color.interaction.focus.ring})  use
   gap.text            #bd787d  ({color.text.muted})  use
   status.text         #e99499  ({color.text.default})  use
   status.emphasis     #ffa2a7  ({color.text.bright})  use
 
 States: default, hover, focus-visible, current, disabled
-  default: text {color.text.default}; no fill; no border [—]
+  default: {color.text.default}; no fill, no border [—]
   hover: background → {color.interaction.hover.bg} [cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px; on the current page the ring is {color.interaction.focus.ring-container} [the ring]
-  current: fill {color.interaction.selection.bg}; text {color.text.on-selection}; no hover [`aria-current="page"`]
-  disabled: text {color.text.disabled}; no fill; no hover [`aria-disabled="true"`; no `href`; cursor: not-allowed]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px, including the current page [the ring]
+  current: fill {color.interaction.selection.bg}, text {color.text.on-selection}; no hover [`aria-current="page"`]
+  disabled: {color.text.disabled}; no fill, no hover [`aria-disabled="true"`; no `href`; cursor: not-allowed]
 
 Keyboard:
   Tab / Shift+Tab: Moves through previous, each page link and next in order; a disabled end has no href and is not a stop.
diff --git a/exports/components/pagination.json b/exports/components/pagination.json
index ff123f954..fc277760b 100644
--- a/exports/components/pagination.json
+++ b/exports/components/pagination.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "pagination",
   "family": "navigation",
   "maturity": "stable",
@@ -156,8 +156,8 @@
       }
     },
     "current.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -207,7 +207,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "text {color.text.default}; no fill; no border",
+      "visual": "{color.text.default}; no fill, no border",
       "channel": "—",
       "tokens": {
         "fg": {
@@ -269,7 +269,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px; on the current page the ring is {color.interaction.focus.ring-container}",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px, including the current page",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -312,7 +312,7 @@
     },
     {
       "state": "current",
-      "visual": "fill {color.interaction.selection.bg}; text {color.text.on-selection}; no hover",
+      "visual": "fill {color.interaction.selection.bg}, text {color.text.on-selection}; no hover",
       "channel": "`aria-current=\"page\"`",
       "tokens": {
         "fg": {
@@ -343,7 +343,7 @@
     },
     {
       "state": "disabled",
-      "visual": "text {color.text.disabled}; no fill; no hover",
+      "visual": "{color.text.disabled}; no fill, no hover",
       "channel": "`aria-disabled=\"true\"`; no `href`; cursor: not-allowed",
       "tokens": {}
     }
@@ -385,7 +385,7 @@
   "specimens": [
     "filterable-table"
   ],
-  "nonExamples": "Rounded or circular page buttons. A border around every page link. The\ncurrent page marked by colour or bold alone without `aria-current`. Previous\nand next as glyph-only links without a label. A disabled end that still has\nan `href`. Pagination that hides the last page number. A row that scrolls\nhorizontally.",
+  "nonExamples": "Rounded or circular page buttons. A border around every page link. The\ncurrent page marked by colour or bold alone, without `aria-current`.\nGlyph-only previous and next. A disabled end with an `href`. Hiding the last\npage number. A horizontally scrolling row.",
   "contrast": [
     {
       "label": "pagination default text",
@@ -457,11 +457,11 @@
       "state": "current",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/popover.brief.txt b/exports/components/popover.brief.txt
index 1666f5059..a3f2ca257 100644
--- a/exports/components/popover.brief.txt
+++ b/exports/components/popover.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — popover
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/popover.json
 spec: spec/components/popover.md  site: https://j3w1.github.io/theme/reference/#c-popover
 maturity: stable  priority: R2
@@ -13,22 +13,27 @@ Tokens (resolved):
   root.border                                         #a3676b  ({color.border.control})  use-and-report (D-007)
   heading.text                                        #ffa2a7  ({color.text.bright})  use
   secondary.text                                      #bd787d  ({color.text.muted})  use
-  control.bg                                          #000000  ({color.surface.input})  use
+  control.bg                                          rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
+  control.text                                        #ffa2a7  ({color.action.secondary.text})  use
+  control.border                                      #a3676b  ({color.action.secondary.border})  use
+  control.bg-hover                                    #630f0d  ({color.action.secondary.hover-bg})  use
+  control.bg-active                                   #420f0c  ({color.action.secondary.pressed-bg})  use
+  control.border-active                               #e53935  ({color.border.active})  use
   control.focus                                       #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default                1px  ({border.width.default})  use
   dependency.role-color-border-overlay                #e53935  ({color.border.overlay})  use-and-report (D-008)
   dependency.role-color-surface-overlay               #241010  ({color.surface.overlay})  use
   dependency.role-density-comfortable-control-height  32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height      24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                        -2px  ({focus.offset})  use
   dependency.role-radius-none                         0px  ({radius.none})  use
   dependency.role-space-12                            12px  ({space.12})  use
   dependency.role-space-16                            16px  ({space.16})  use
-  dependency.role-space-2                             2px  ({space.2})  use
   dependency.role-space-8                             8px  ({space.8})  use
 State dependency disclosures: D-007
 
 States: default, open, closed, focus-visible
-  default: Named trigger. [Button semantics and accessible name.]
+  default: Named trigger. Its buttons are the secondary button (button.md). [Button semantics and accessible name.]
   open: Square overlay surface and border. [aria-expanded=true; panel is reachable.]
   closed: Panel hidden. [aria-expanded=false; hidden controls leave focus order.]
   focus-visible: Dashed focus ring. [Native keyboard focus.]
diff --git a/exports/components/popover.json b/exports/components/popover.json
index dcf6bad54..811d70acb 100644
--- a/exports/components/popover.json
+++ b/exports/components/popover.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "popover",
   "family": "feedback",
   "maturity": "stable",
@@ -115,11 +115,71 @@
       }
     },
     "control.bg": {
-      "alias": "color.surface.input",
-      "value": "#000000",
-      "status": "approved",
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
       "deprecated": false,
-      "decisionId": "D-023",
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
       "eligibility": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -200,9 +260,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -212,9 +272,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -224,9 +284,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-16": {
-      "alias": "space.16",
-      "value": "16px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -236,9 +296,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-16": {
+      "alias": "space.16",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -264,7 +324,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Named trigger.",
+      "visual": "Named trigger. Its buttons are the secondary button (button.md).",
       "channel": "Button semantics and accessible name.",
       "tokens": {
         "fg": {
@@ -427,6 +487,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/exports/components/progress.brief.txt b/exports/components/progress.brief.txt
index 5ceef9185..7e7f61765 100644
--- a/exports/components/progress.brief.txt
+++ b/exports/components/progress.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — progress
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/progress.json
 spec: spec/components/progress.md  site: https://j3w1.github.io/theme/reference/#c-progress
 maturity: stable  priority: R1
@@ -21,9 +21,9 @@ Tokens (resolved):
 State dependency disclosures: D-007
 
 States: default, busy, error, reduced-motion
-  default: fill {color.action.primary.bg} on the track; the value text [the native value; the percentage text]
-  busy: the whole track shows static 45° stripes of {color.action.primary.bg} on {color.interaction.pressed.bg}; no value text [`aria-busy`; `aria-valuetext`; the stripe pattern; no animation]
-  error: fill → {color.status.danger.fill}; the label gains the ✕ glyph in {color.status.danger.text}; the detail line says what failed [glyph; worded detail]
+  default: {color.action.primary.bg} fill on the track; the value text [the native value; the percentage text]
+  busy: static 45° stripes of {color.action.primary.bg} on {color.interaction.pressed.bg} across the track; no value text [`aria-busy`; `aria-valuetext`; the stripe pattern; no animation]
+  error: fill → {color.status.danger.fill}; the label gains ✕ in {color.status.danger.text}; the detail line says what failed [glyph; worded detail]
   reduced-motion: identical to default and busy: nothing animates in any state [`prefers-reduced-motion`]
 
 Keyboard:
diff --git a/exports/components/progress.json b/exports/components/progress.json
index 7c6daa591..b96e3feab 100644
--- a/exports/components/progress.json
+++ b/exports/components/progress.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "progress",
   "family": "feedback",
   "maturity": "stable",
@@ -187,7 +187,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "fill {color.action.primary.bg} on the track; the value text",
+      "visual": "{color.action.primary.bg} fill on the track; the value text",
       "channel": "the native value; the percentage text",
       "tokens": {
         "fg": {
@@ -232,13 +232,13 @@
     },
     {
       "state": "busy",
-      "visual": "the whole track shows static 45° stripes of {color.action.primary.bg} on {color.interaction.pressed.bg}; no value text",
+      "visual": "static 45° stripes of {color.action.primary.bg} on {color.interaction.pressed.bg} across the track; no value text",
       "channel": "`aria-busy`; `aria-valuetext`; the stripe pattern; no animation",
       "tokens": {}
     },
     {
       "state": "error",
-      "visual": "fill → {color.status.danger.fill}; the label gains the ✕ glyph in {color.status.danger.text}; the detail line says what failed",
+      "visual": "fill → {color.status.danger.fill}; the label gains ✕ in {color.status.danger.text}; the detail line says what failed",
       "channel": "glyph; worded detail",
       "tokens": {
         "fg": {
@@ -325,7 +325,7 @@
     "admin-form",
     "i3-window-frame"
   ],
-  "nonExamples": "A spinner. Animated or \"barber-pole\" stripes. A shimmering skeleton in place\nof a bar. A circular ring. A rounded pill-shaped bar. Colour-only failure\nwithout the glyph and text. A bar with no label. A bar that blocks input.",
+  "nonExamples": "A spinner. Animated or barber-pole stripes. A shimmering skeleton instead of\na bar. A circular ring. A rounded pill bar. Colour-only failure without the\nglyph and text. A bar with no label. A bar that blocks input.",
   "contrast": [
     {
       "label": "progress default text",
@@ -416,7 +416,7 @@
       "bgHex": "#420f0c",
       "ratio": 1.51,
       "pass": false,
-      "waiver": "the fill measures 1.51:1 against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control, 4.45:1) marks the full extent"
+      "waiver": "the fill falls below the floor against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control) marks the full extent"
     },
     {
       "label": "stripes (decorative pattern)",
diff --git a/exports/components/radio-group.brief.txt b/exports/components/radio-group.brief.txt
index c23871f9d..3bf7d0aa6 100644
--- a/exports/components/radio-group.brief.txt
+++ b/exports/components/radio-group.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — radio-group
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/radio-group.json
 spec: spec/components/radio-group.md  site: https://j3w1.github.io/theme/reference/#c-radio-group
 maturity: stable  priority: R1
@@ -29,11 +29,11 @@ State dependency disclosures: D-007
 
 States: default, hover, focus-visible, checked, checked+focus-visible, disabled, invalid, required
   default: 16px square, 1px {color.border.control} on {color.surface.input}; text {color.text.default} [—]
-  hover: box background → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg} [cursor: pointer; hover-capable pointers only]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px around the box [the ring]
-  checked: box fills {color.action.primary.bg}; an 8px inner square in {color.action.primary.text}; border stays {color.border.control} [the inner square; `checked`]
+  hover: box → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg} [cursor: pointer; hover-capable pointers only]
+  focus-visible: 1px dashed {color.interaction.focus.ring} ring at −2px around the box [the ring]
+  checked: box fills {color.action.primary.bg}; 8px inner square in {color.action.primary.text}; border stays {color.border.control} [the inner square; `checked`]
   checked+focus-visible: the fill and a ring in {color.interaction.focus.ring-container} [inner square and ring]
-  disabled: boxes {color.interaction.disabled.bg} with 1px {color.border.disabled}; inner square and text {color.text.disabled} [`disabled`; cursor: not-allowed]
+  disabled: boxes {color.interaction.disabled.bg}, 1px {color.border.disabled}; inner square and text {color.text.disabled} [`disabled`; cursor: not-allowed]
   invalid: every box border 2px {color.status.danger.border}; message with the ✕ glyph [border width 1 → 2px; glyph; `aria-invalid`]
   required: `*` after the legend in {color.status.danger.text} plus visually hidden "required" [`required`; the mark]
 
diff --git a/exports/components/radio-group.json b/exports/components/radio-group.json
index 4a9111e7a..1d522509e 100644
--- a/exports/components/radio-group.json
+++ b/exports/components/radio-group.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "radio-group",
   "family": "forms-basic",
   "maturity": "stable",
@@ -305,7 +305,7 @@
     },
     {
       "state": "hover",
-      "visual": "box background → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg}",
+      "visual": "box → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg}",
       "channel": "cursor: pointer; hover-capable pointers only",
       "tokens": {
         "bg": {
@@ -338,7 +338,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px around the box",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px around the box",
       "channel": "the ring",
       "tokens": {
         "bg": {
@@ -383,7 +383,7 @@
     },
     {
       "state": "checked",
-      "visual": "box fills {color.action.primary.bg}; an 8px inner square in {color.action.primary.text}; border stays {color.border.control}",
+      "visual": "box fills {color.action.primary.bg}; 8px inner square in {color.action.primary.text}; border stays {color.border.control}",
       "channel": "the inner square; `checked`",
       "tokens": {
         "fg": {
@@ -457,7 +457,7 @@
     },
     {
       "state": "disabled",
-      "visual": "boxes {color.interaction.disabled.bg} with 1px {color.border.disabled}; inner square and text {color.text.disabled}",
+      "visual": "boxes {color.interaction.disabled.bg}, 1px {color.border.disabled}; inner square and text {color.text.disabled}",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
@@ -573,7 +573,7 @@
     "settings-panel",
     "admin-form"
   ],
-  "nonExamples": "Circular radios. A checked state shown by border colour alone with no inner\nsquare. Radios that submit or navigate on change. A group with no legend or\nwith the legend rendered as a label on one option. Separate tab stops per\nradio. One radio on its own. Disabling by opacity. A div with\n`role=\"radiogroup\"` built from spans.",
+  "nonExamples": "Circular radios. Checked shown by border colour alone, without the inner\nsquare. Submitting or navigating on change. No legend, or the legend as one\noption's label. A tab stop per radio. A lone radio. Disabling by opacity. A\ndiv with `role=\"radiogroup\"` built from spans.",
   "contrast": [
     {
       "label": "radio-group default border",
diff --git a/exports/components/range.brief.txt b/exports/components/range.brief.txt
index 1ac910e67..15f9ec1ed 100644
--- a/exports/components/range.brief.txt
+++ b/exports/components/range.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — range
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/range.json
 spec: spec/components/range.md  site: https://j3w1.github.io/theme/reference/#c-range
 maturity: stable  priority: R2
@@ -22,6 +22,7 @@ Tokens (resolved):
   dependency.role-color-text-disabled                 #8a5559  ({color.text.disabled})  use
   dependency.role-density-comfortable-control-height  32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height      24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                        -2px  ({focus.offset})  use
   dependency.role-radius-none                         0px  ({radius.none})  use
   dependency.role-space-12                            12px  ({space.12})  use
   dependency.role-space-2                             2px  ({space.2})  use
@@ -29,9 +30,9 @@ Tokens (resolved):
 State dependency disclosures: D-007
 
 States: default, focus-visible, disabled
-  default: Named content on the default surface. [Native text and structure.]
-  focus-visible: Dashed focus ring. [Native keyboard focus position.]
-  disabled: Disabled semantic foreground, background and border at full opacity. [Native disabled state blocks activation.]
+  default: named content on the default surface [native text and structure]
+  focus-visible: dashed focus ring [native focus position]
+  disabled: disabled foreground, background and border at full opacity [native disabled state blocks activation]
 
 Keyboard:
   Tab / Shift+Tab: Reach and leave the slider.
diff --git a/exports/components/range.json b/exports/components/range.json
index 81b7ed980..1b72854de 100644
--- a/exports/components/range.json
+++ b/exports/components/range.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "range",
   "family": "forms-basic",
   "maturity": "stable",
@@ -221,6 +221,18 @@
         "decisionIds": []
       }
     },
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-radius-none": {
       "alias": "radius.none",
       "value": "0px",
@@ -273,8 +285,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Named content on the default surface.",
-      "channel": "Native text and structure.",
+      "visual": "named content on the default surface",
+      "channel": "native text and structure",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -318,14 +330,14 @@
     },
     {
       "state": "focus-visible",
-      "visual": "Dashed focus ring.",
-      "channel": "Native keyboard focus position.",
+      "visual": "dashed focus ring",
+      "channel": "native focus position",
       "tokens": {}
     },
     {
       "state": "disabled",
-      "visual": "Disabled semantic foreground, background and border at full opacity.",
-      "channel": "Native disabled state blocks activation.",
+      "visual": "disabled foreground, background and border at full opacity",
+      "channel": "native disabled state blocks activation",
       "tokens": {}
     }
   ],
@@ -360,7 +372,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls. Colour-only status. Drag-only operations. Hidden\nrequired instructions. Stolen focus. An invented service success.",
   "contrast": [
     {
       "label": "range default text",
diff --git a/exports/components/repeater.brief.txt b/exports/components/repeater.brief.txt
index 6bbff1e31..6f2940811 100644
--- a/exports/components/repeater.brief.txt
+++ b/exports/components/repeater.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — repeater
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/repeater.json
 spec: spec/components/repeater.md  site: https://j3w1.github.io/theme/reference/#c-repeater
 maturity: stable  priority: R2
@@ -15,24 +15,31 @@ Tokens (resolved):
   secondary.text                                      #bd787d  ({color.text.muted})  use
   control.bg                                          #000000  ({color.surface.input})  use
   control.focus                                       #e53935  ({color.interaction.focus.ring})  use
+  button.bg                                           rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
+  button.text                                         #ffa2a7  ({color.action.secondary.text})  use
+  button.border                                       #a3676b  ({color.action.secondary.border})  use
+  button.bg-hover                                     #630f0d  ({color.action.secondary.hover-bg})  use
+  button.bg-active                                    #420f0c  ({color.action.secondary.pressed-bg})  use
+  button.border-active                                #e53935  ({color.border.active})  use
+  button.focus                                        #e53935  ({color.interaction.focus.ring})  use
   dependency.role-border-width-default                1px  ({border.width.default})  use
   dependency.role-color-border-disabled               #7d1310  ({color.border.disabled})  use
   dependency.role-color-interaction-disabled-bg       #160b0b  ({color.interaction.disabled.bg})  use
   dependency.role-color-text-disabled                 #8a5559  ({color.text.disabled})  use
   dependency.role-density-comfortable-control-height  32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height      24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                        -2px  ({focus.offset})  use
   dependency.role-radius-none                         0px  ({radius.none})  use
   dependency.role-space-12                            12px  ({space.12})  use
-  dependency.role-space-2                             2px  ({space.2})  use
   dependency.role-space-24                            24px  ({space.24})  use
   dependency.role-space-8                             8px  ({space.8})  use
 State dependency disclosures: D-007
 
 States: default, empty, focus-visible, disabled
-  default: Named content on the default surface. [Native text and structure.]
-  empty: A muted empty message. [Explicit text and retained Add action.]
-  focus-visible: Dashed focus ring. [Native keyboard focus position.]
-  disabled: Disabled semantic foreground, background and border at full opacity. [Native disabled state blocks activation.]
+  default: named content on the default surface. Button controls are the secondary button (button.md); inputs keep the input look. [native text and structure]
+  empty: a muted empty message [explicit text; Add stays]
+  focus-visible: dashed focus ring [native focus position]
+  disabled: disabled foreground, background and border at full opacity [native disabled state blocks activation]
 
 Keyboard:
   Tab / Shift+Tab: Visit fields and row actions in source order.
diff --git a/exports/components/repeater.json b/exports/components/repeater.json
index f3d24afd9..9dfe509b9 100644
--- a/exports/components/repeater.json
+++ b/exports/components/repeater.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "repeater",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -138,6 +138,90 @@
         "decisionIds": []
       }
     },
+    "button.bg": {
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.focus": {
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-border-width-default": {
       "alias": "border.width.default",
       "value": "1px",
@@ -210,9 +294,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -222,9 +306,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -234,9 +318,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -274,8 +358,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Named content on the default surface.",
-      "channel": "Native text and structure.",
+      "visual": "named content on the default surface. Button controls are the secondary button (button.md); inputs keep the input look.",
+      "channel": "native text and structure",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -319,20 +403,20 @@
     },
     {
       "state": "empty",
-      "visual": "A muted empty message.",
-      "channel": "Explicit text and retained Add action.",
+      "visual": "a muted empty message",
+      "channel": "explicit text; Add stays",
       "tokens": {}
     },
     {
       "state": "focus-visible",
-      "visual": "Dashed focus ring.",
-      "channel": "Native keyboard focus position.",
+      "visual": "dashed focus ring",
+      "channel": "native focus position",
       "tokens": {}
     },
     {
       "state": "disabled",
-      "visual": "Disabled semantic foreground, background and border at full opacity.",
-      "channel": "Native disabled state blocks activation.",
+      "visual": "disabled foreground, background and border at full opacity",
+      "channel": "native disabled state blocks activation",
       "tokens": {}
     }
   ],
@@ -367,7 +451,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls. Colour-only status. Drag-only operations. Hidden\nrequired instructions. Stolen focus. An invented service success.",
   "contrast": [
     {
       "label": "repeater default text",
@@ -433,6 +517,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/exports/components/search-field.brief.txt b/exports/components/search-field.brief.txt
index 8f7b4fc47..03875e1d4 100644
--- a/exports/components/search-field.brief.txt
+++ b/exports/components/search-field.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — search-field
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/search-field.json
 spec: spec/components/search-field.md  site: https://j3w1.github.io/theme/reference/#c-search-field
 maturity: stable  priority: R1
@@ -32,13 +32,13 @@ State dependency disclosures: D-007
 
 States: default, hover, focus-visible, placeholder-shown, filled, loading, disabled, no-results
   default: 1px {color.border.control} on {color.surface.input}; magnifier {color.icon.default}; text {color.text.default} [the magnifier]
-  hover: background → {color.interaction.hover.bg}; the clear button → {color.action.tertiary.hover-bg} when hovered [cursor: text]
-  focus-visible: border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px; the hint hides [the ring]
-  placeholder-shown: placeholder in {color.text.placeholder}, italic; no clear button [italic; the clear button is absent]
-  filled: as default with a value; the clear button is present [the clear button]
-  loading: the static `⋯` glyph in {color.text.muted} replaces the magnifier; the input stays editable [glyph; `aria-busy`]
-  disabled: text and icon {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no clear button [`disabled`; cursor: not-allowed]
-  no-results: the status line "No results for …" in {color.text.muted} below the help; the box unchanged [the status text; `role="status"`]
+  hover: background → {color.interaction.hover.bg}; a hovered clear button → {color.action.tertiary.hover-bg} [cursor: text]
+  focus-visible: border → {color.border.active}; 1px dashed {color.interaction.focus.ring} ring at −2px; the hint hides [the ring]
+  placeholder-shown: placeholder in {color.text.placeholder}, italic; no clear button [italic; clear button absent]
+  filled: as default with a value; clear button present [the clear button]
+  loading: static `⋯` in {color.text.muted} replaces the magnifier; input stays editable [glyph; `aria-busy`]
+  disabled: text and icon {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; no clear button [`disabled`; cursor: not-allowed]
+  no-results: status line "No results for …" in {color.text.muted} below the help; box unchanged [the status text; `role="status"`]
 
 Keyboard:
   Tab / Shift+Tab: Input, then the clear button when it is visible.
diff --git a/exports/components/search-field.json b/exports/components/search-field.json
index 1dcb56e9c..0f9a2a7a6 100644
--- a/exports/components/search-field.json
+++ b/exports/components/search-field.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "search-field",
   "family": "forms-basic",
   "maturity": "stable",
@@ -353,7 +353,7 @@
     },
     {
       "state": "hover",
-      "visual": "background → {color.interaction.hover.bg}; the clear button → {color.action.tertiary.hover-bg} when hovered",
+      "visual": "background → {color.interaction.hover.bg}; a hovered clear button → {color.action.tertiary.hover-bg}",
       "channel": "cursor: text",
       "tokens": {
         "fg": {
@@ -398,7 +398,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px; the hint hides",
+      "visual": "border → {color.border.active}; 1px dashed {color.interaction.focus.ring} ring at −2px; the hint hides",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -454,7 +454,7 @@
     {
       "state": "placeholder-shown",
       "visual": "placeholder in {color.text.placeholder}, italic; no clear button",
-      "channel": "italic; the clear button is absent",
+      "channel": "italic; clear button absent",
       "tokens": {
         "fg": {
           "alias": "color.text.placeholder",
@@ -498,13 +498,13 @@
     },
     {
       "state": "filled",
-      "visual": "as default with a value; the clear button is present",
+      "visual": "as default with a value; clear button present",
       "channel": "the clear button",
       "tokens": {}
     },
     {
       "state": "loading",
-      "visual": "the static `⋯` glyph in {color.text.muted} replaces the magnifier; the input stays editable",
+      "visual": "static `⋯` in {color.text.muted} replaces the magnifier; input stays editable",
       "channel": "glyph; `aria-busy`",
       "tokens": {
         "fg": {
@@ -549,13 +549,13 @@
     },
     {
       "state": "disabled",
-      "visual": "text and icon {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no clear button",
+      "visual": "text and icon {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; no clear button",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "no-results",
-      "visual": "the status line \"No results for …\" in {color.text.muted} below the help; the box unchanged",
+      "visual": "status line \"No results for …\" in {color.text.muted} below the help; box unchanged",
       "channel": "the status text; `role=\"status\"`",
       "tokens": {
         "fg": {
@@ -650,7 +650,7 @@
     "filterable-table",
     "settings-panel"
   ],
-  "nonExamples": "Rounded or pill-shaped search boxes. A magnifier button that submits\ninstead of an icon. A spinner while loading. Results announced on every\nkeystroke. \"No results\" in red or with the ✕ glyph. A clear button that is\nalways visible. A search field without a label. Disabling by opacity.",
+  "nonExamples": "Rounded or pill-shaped boxes. A magnifier button that submits. A spinner while\nloading. Results announced on every keystroke. \"No results\" in red or with\nthe ✕ glyph. An always-visible clear button. No label. Disabling by opacity.",
   "contrast": [
     {
       "label": "search-field default text",
@@ -897,7 +897,7 @@
       "bgHex": "#000000",
       "ratio": 1.47,
       "pass": true,
-      "waiver": "the hint is not a control; its text at 5.81:1 carries the meaning"
+      "waiver": "the hint is not a control; its text carries the meaning"
     },
     {
       "label": "disabled text (exempt; house floor 3:1)",
diff --git a/exports/components/segmented-control.brief.txt b/exports/components/segmented-control.brief.txt
index c75e2ba88..e30fd729f 100644
--- a/exports/components/segmented-control.brief.txt
+++ b/exports/components/segmented-control.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — segmented-control
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/segmented-control.json
 spec: spec/components/segmented-control.md  site: https://j3w1.github.io/theme/reference/#c-segmented-control
 maturity: stable  priority: R2
@@ -41,7 +41,6 @@ Tokens (resolved):
   dependency.role-radius-none                             0px  ({radius.none})  use
   dependency.role-space-12                                12px  ({space.12})  use
   dependency.role-space-16                                16px  ({space.16})  use
-  dependency.role-space-2                                 2px  ({space.2})  use
   dependency.role-space-24                                24px  ({space.24})  use
   dependency.role-space-4                                 4px  ({space.4})  use
   dependency.role-space-8                                 8px  ({space.8})  use
diff --git a/exports/components/segmented-control.json b/exports/components/segmented-control.json
index b157ecc0c..de2b1fe06 100644
--- a/exports/components/segmented-control.json
+++ b/exports/components/segmented-control.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "segmented-control",
   "family": "actions",
   "maturity": "stable",
@@ -450,18 +450,6 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
-      "status": "observed",
-      "deprecated": false,
-      "decisionId": null,
-      "eligibility": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      }
-    },
     "dependency.role-space-24": {
       "alias": "space.24",
       "value": "24px",
diff --git a/exports/components/select.brief.txt b/exports/components/select.brief.txt
index bc69688aa..f1574648d 100644
--- a/exports/components/select.brief.txt
+++ b/exports/components/select.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — select
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/select.json
 spec: spec/components/select.md  site: https://j3w1.github.io/theme/reference/#c-select
 maturity: stable  priority: R1
@@ -34,11 +34,11 @@ State dependency disclosures: D-007
 States: default, hover, focus-visible, required, invalid, invalid+focus-visible, disabled
   default: 1px {color.border.control} on {color.surface.input}; value {color.text.default}; chevron {color.icon.default} [the chevron]
   hover: background → {color.interaction.hover.bg}; border unchanged [cursor: default; hover-capable pointers only]
-  focus-visible: border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px [the ring]
+  focus-visible: border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px [the ring]
   required: `*` after the label in {color.status.danger.text} plus visually hidden "required" [`required`; the mark]
-  invalid: border 2px {color.status.danger.border}; message with the ✕ glyph [border width 1 → 2px; glyph; `aria-invalid`]
-  invalid+focus-visible: the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px [double boundary]
-  disabled: text and chevron {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg} [`disabled`; cursor: not-allowed]
+  invalid: 2px {color.status.danger.border}; message with ✕ [border 1 → 2px; glyph; `aria-invalid`]
+  invalid+focus-visible: 2px danger border and {color.interaction.focus.ring-container} ring at −4px [double boundary]
+  disabled: text and chevron {color.text.disabled}; {color.border.disabled}; {color.interaction.disabled.bg} [`disabled`; cursor: not-allowed]
 
 Keyboard:
   Tab / Shift+Tab: Moves focus in and out.
diff --git a/exports/components/select.json b/exports/components/select.json
index 012098b94..250dec3f9 100644
--- a/exports/components/select.json
+++ b/exports/components/select.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "select",
   "family": "forms-basic",
   "maturity": "stable",
@@ -414,7 +414,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -514,8 +514,8 @@
     },
     {
       "state": "invalid",
-      "visual": "border 2px {color.status.danger.border}; message with the ✕ glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border}; message with ✕",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -557,7 +557,7 @@
     },
     {
       "state": "invalid+focus-visible",
-      "visual": "the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px",
+      "visual": "2px danger border and {color.interaction.focus.ring-container} ring at −4px",
       "channel": "double boundary",
       "tokens": {
         "fg": {
@@ -612,7 +612,7 @@
     },
     {
       "state": "disabled",
-      "visual": "text and chevron {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}",
+      "visual": "text and chevron {color.text.disabled}; {color.border.disabled}; {color.interaction.disabled.bg}",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     }
@@ -676,7 +676,7 @@
     "admin-form",
     "filterable-table"
   ],
-  "nonExamples": "An unthemed browser popup presented as a fully themed implementation. A background-image chevron in\na literal colour. Rounded corners. A select whose first option is blank. A\nselect that triggers navigation on change. Invalid shown by colour alone.\nA glow instead of the ring. Disabling by opacity.",
+  "nonExamples": "An unthemed browser popup presented as fully themed. A background-image\nchevron in a literal colour. Rounded corners. A blank first option. Navigation\non change. Invalid by colour alone. A glow instead of the ring. Disabling by\nopacity.",
   "contrast": [
     {
       "label": "select default text",
diff --git a/exports/components/settings-panel.brief.txt b/exports/components/settings-panel.brief.txt
index 09c7c90bc..143ee6294 100644
--- a/exports/components/settings-panel.brief.txt
+++ b/exports/components/settings-panel.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — settings-panel
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/settings-panel.json
 spec: spec/components/settings-panel.md  site: https://j3w1.github.io/theme/reference/#c-settings-panel
 maturity: stable  priority: R1
@@ -37,14 +37,14 @@ Tokens (resolved):
 State dependency disclosures: D-007
 
 States: default, focus-visible, invalid, busy
-  default: rest tokens of every component on {color.surface.default}; the open section carries the indicator bar [`aria-current`]
-  focus-visible: the dashed {color.interaction.focus.ring} on the control holding focus (shown on the first switch); the other controls stay at rest [the ring]
-  invalid: the inner-gap field takes the 2px {color.status.danger.border} and shows its ✕ message; the other controls stay at rest [border width 1 → 2px; glyph; `aria-invalid`]
+  default: every component's rest tokens on {color.surface.default}; the open section carries the indicator bar [`aria-current`]
+  focus-visible: the dashed {color.interaction.focus.ring} on the focused control (shown on the first switch); others at rest [the ring]
+  invalid: the inner-gap field takes the 2px {color.status.danger.border} and its ✕ message; others at rest [border width 1 → 2px; glyph; `aria-invalid`]
   busy: Apply shows the static ⋯ glyph in {color.action.primary.text}; the form carries `aria-busy`; nothing shrinks or animates [glyph; `aria-busy`; cursor: progress]
 
 Keyboard:
   Tab / Shift+Tab: Walks the section links, then the controls in reading order, then Apply and Reset; nothing inside is a composite widget, so every control is its own stop.
-  Enter / Space: Follows a section link; toggles a switch or checkbox; opens the select.
+  Enter / Space: Enter follows a section link; Space toggles a switch or native checkbox; Enter or Space opens the select.
   Arrow keys: Move within the radio-group and the select's options; step the numeric field.
   Escape: Nothing; the panel is not a dialog and nothing is dismissed.
 
diff --git a/exports/components/settings-panel.json b/exports/components/settings-panel.json
index 611a3f401..b6184e06c 100644
--- a/exports/components/settings-panel.json
+++ b/exports/components/settings-panel.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "settings-panel",
   "family": "composed",
   "maturity": "stable",
@@ -382,7 +382,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "rest tokens of every component on {color.surface.default}; the open section carries the indicator bar",
+      "visual": "every component's rest tokens on {color.surface.default}; the open section carries the indicator bar",
       "channel": "`aria-current`",
       "tokens": {
         "fg": {
@@ -413,7 +413,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "the dashed {color.interaction.focus.ring} on the control holding focus (shown on the first switch); the other controls stay at rest",
+      "visual": "the dashed {color.interaction.focus.ring} on the focused control (shown on the first switch); others at rest",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -470,7 +470,7 @@
     },
     {
       "state": "invalid",
-      "visual": "the inner-gap field takes the 2px {color.status.danger.border} and shows its ✕ message; the other controls stay at rest",
+      "visual": "the inner-gap field takes the 2px {color.status.danger.border} and its ✕ message; others at rest",
       "channel": "border width 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
@@ -550,7 +550,7 @@
     },
     {
       "key": "Enter / Space",
-      "action": "Follows a section link; toggles a switch or checkbox; opens the select."
+      "action": "Enter follows a section link; Space toggles a switch or native checkbox; Enter or Space opens the select."
     },
     {
       "key": "Arrow keys",
@@ -593,7 +593,7 @@
     "tabs"
   ],
   "specimens": [],
-  "nonExamples": "A rounded, shadowed settings card. A Material-style app bar above the form.\nToggle switches with rounded pills or animated thumbs. Section links drawn\nas filled tabs instead of the indicator bar. A red form background to show\nthat something is invalid. Applying while the controls are dimmed with\nopacity. A spinner replacing the Apply label.",
+  "nonExamples": "A rounded, shadowed settings card. A Material-style app bar above the form.\nPill switches or animated thumbs. Section links as filled tabs instead of\nthe indicator bar. A red form background for invalid. Dimming the controls\nwith opacity while applying. A spinner replacing the Apply label.",
   "contrast": [
     {
       "label": "settings-panel default text",
diff --git a/exports/components/sidebar-nav.brief.txt b/exports/components/sidebar-nav.brief.txt
index ef004d8a0..6d8e7fe84 100644
--- a/exports/components/sidebar-nav.brief.txt
+++ b/exports/components/sidebar-nav.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — sidebar-nav
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/sidebar-nav.json
 spec: spec/components/sidebar-nav.md  site: https://j3w1.github.io/theme/reference/#c-sidebar-nav
 maturity: stable  priority: R1
@@ -19,7 +19,7 @@ Tokens (resolved):
   current.text             #ffa2a7  ({color.text.bright})  use
   selected.bg              #531310  ({color.interaction.selection.bg})  use
   selected.text            #f4eeee  ({color.interaction.selection.text})  use
-  selected.ring            #ffa2a7  ({color.interaction.focus.ring-container})  use
+  selected.ring            #e53935  ({color.interaction.focus.ring})  use
   selected.inactive-bg     #420f0c  ({color.interaction.selection.inactive-bg})  use
   selected.inactive-text   #e99499  ({color.interaction.selection.inactive-text})  use
   icon.stroke              #e99499  ({color.icon.default})  use
@@ -27,13 +27,13 @@ Tokens (resolved):
 
 States: default, hover, focus-visible, current, selected, selected+container-inactive, expanded, collapsed
   default: text {color.text.default}; no fill; transparent inline-start edge [—]
-  hover: background → {color.interaction.hover.bg} [cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px [the ring]
+  hover: → {color.interaction.hover.bg} [cursor: pointer]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px [the ring]
   current: 2px {color.border.selected-indicator} inline-start bar; text {color.text.bright} [`aria-current="page"`; the bar]
-  selected: fill {color.interaction.selection.bg} with {color.interaction.selection.text}; the ring in {color.interaction.focus.ring-container} when focused [`aria-selected` on a listbox-style rail; the fill's on-fill text]
-  selected+container-inactive: fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring [lightness drop between the two fills]
-  expanded: the group's chevron rotated 90°; its sublist shown [`aria-expanded="true"`; the children are present]
-  collapsed: labels visually hidden; icons centred; the current bar and fills unchanged [the labels remain for assistive technology and as tooltips]
+  selected: {color.interaction.selection.bg} with {color.interaction.selection.text}; 1px dashed {color.interaction.focus.ring} at −2px when focused [`aria-selected` on a listbox-style rail; the on-fill text]
+  selected+container-inactive: {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring [lightness drop between the two fills]
+  expanded: chevron rotated 90°; sublist shown [`aria-expanded="true"`; the children are present]
+  collapsed: labels visually hidden; icons centred; current bar and fills unchanged [labels remain for assistive technology and as tooltips]
 
 Keyboard:
   Tab / Shift+Tab: Moves through links and group buttons in document order; hidden children are skipped.
diff --git a/exports/components/sidebar-nav.json b/exports/components/sidebar-nav.json
index 6865d49fa..b6e3fe8b7 100644
--- a/exports/components/sidebar-nav.json
+++ b/exports/components/sidebar-nav.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "sidebar-nav",
   "family": "navigation",
   "maturity": "stable",
@@ -203,8 +203,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -297,7 +297,7 @@
     },
     {
       "state": "hover",
-      "visual": "background → {color.interaction.hover.bg}",
+      "visual": "→ {color.interaction.hover.bg}",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -328,7 +328,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -414,8 +414,8 @@
     },
     {
       "state": "selected",
-      "visual": "fill {color.interaction.selection.bg} with {color.interaction.selection.text}; the ring in {color.interaction.focus.ring-container} when focused",
-      "channel": "`aria-selected` on a listbox-style rail; the fill's on-fill text",
+      "visual": "{color.interaction.selection.bg} with {color.interaction.selection.text}; 1px dashed {color.interaction.focus.ring} at −2px when focused",
+      "channel": "`aria-selected` on a listbox-style rail; the on-fill text",
       "tokens": {
         "fg": {
           "alias": "color.interaction.selection.text",
@@ -445,7 +445,7 @@
     },
     {
       "state": "selected+container-inactive",
-      "visual": "fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring",
+      "visual": "{color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring",
       "channel": "lightness drop between the two fills",
       "tokens": {
         "fg": {
@@ -476,7 +476,7 @@
     },
     {
       "state": "expanded",
-      "visual": "the group's chevron rotated 90°; its sublist shown",
+      "visual": "chevron rotated 90°; sublist shown",
       "channel": "`aria-expanded=\"true\"`; the children are present",
       "tokens": {
         "fg": {
@@ -507,8 +507,8 @@
     },
     {
       "state": "collapsed",
-      "visual": "labels visually hidden; icons centred; the current bar and fills unchanged",
-      "channel": "the labels remain for assistive technology and as tooltips",
+      "visual": "labels visually hidden; icons centred; current bar and fills unchanged",
+      "channel": "labels remain for assistive technology and as tooltips",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -581,7 +581,7 @@
     "settings-panel",
     "i3-window-frame"
   ],
-  "nonExamples": "A filled or rounded current item. The indicator on the inline-end edge. A\ncurrent item marked by bold text alone. Labels removed from the DOM when\ncollapsed. A group whose children stay in the tab order while hidden. A rail\nthat scrolls horizontally. Icon-only links with no accessible name. Hover that\nchanges the text colour.",
+  "nonExamples": "A filled or rounded current item. The indicator on the inline-end edge. A\ncurrent item marked by bold alone. Labels removed from the DOM when\ncollapsed. Hidden children left in the tab order. A rail that scrolls\nhorizontally. Icon-only links without an accessible name. Hover that changes\nthe text colour.",
   "contrast": [
     {
       "label": "sidebar-nav default text",
@@ -718,11 +718,11 @@
       "state": "selected",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/skeleton.brief.txt b/exports/components/skeleton.brief.txt
index ed1c366d3..9219a09ea 100644
--- a/exports/components/skeleton.brief.txt
+++ b/exports/components/skeleton.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — skeleton
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/skeleton.json
 spec: spec/components/skeleton.md  site: https://j3w1.github.io/theme/reference/#c-skeleton
 maturity: stable  priority: R2
@@ -18,16 +18,16 @@ Tokens (resolved):
   dependency.role-border-width-default  1px  ({border.width.default})  use
   dependency.role-color-border-divider  #2b0e0d  ({color.border.divider})  use-and-report (D-008)
   dependency.role-color-surface-raised  #160b0b  ({color.surface.raised})  use
+  dependency.role-focus-offset          -2px  ({focus.offset})  use
   dependency.role-radius-none           0px  ({radius.none})  use
   dependency.role-space-12              12px  ({space.12})  use
   dependency.role-space-16              16px  ({space.16})  use
-  dependency.role-space-2               2px  ({space.2})  use
 State dependency disclosures: D-007
 
 States: default, loading, reduced-motion
-  default: Static decorative blocks. [Named loading status.]
-  loading: Raised surface blocks; no opacity fade. [aria-busy on the region.]
-  reduced-motion: Same static presentation. [No information depends on movement.]
+  default: static decorative blocks [named loading status]
+  loading: raised-surface blocks; no opacity fade [`aria-busy` on the region]
+  reduced-motion: the same static presentation [no information depends on movement]
 
 Keyboard:
   Tab: No new tab stops or focus capture.
diff --git a/exports/components/skeleton.json b/exports/components/skeleton.json
index 63dd2a064..e35e3d103 100644
--- a/exports/components/skeleton.json
+++ b/exports/components/skeleton.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "skeleton",
   "family": "feedback",
   "maturity": "stable",
@@ -175,9 +175,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -187,9 +187,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -199,9 +199,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-16": {
-      "alias": "space.16",
-      "value": "16px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -211,9 +211,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-16": {
+      "alias": "space.16",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -227,8 +227,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Static decorative blocks.",
-      "channel": "Named loading status.",
+      "visual": "static decorative blocks",
+      "channel": "named loading status",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -272,14 +272,14 @@
     },
     {
       "state": "loading",
-      "visual": "Raised surface blocks; no opacity fade.",
-      "channel": "aria-busy on the region.",
+      "visual": "raised-surface blocks; no opacity fade",
+      "channel": "`aria-busy` on the region",
       "tokens": {}
     },
     {
       "state": "reduced-motion",
-      "visual": "Same static presentation.",
-      "channel": "No information depends on movement.",
+      "visual": "the same static presentation",
+      "channel": "no information depends on movement",
       "tokens": {}
     }
   ],
@@ -310,7 +310,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls. Colour-only status. Drag-only operations. Hidden\nrequired instructions. Stolen focus. An invented service success.",
   "contrast": [
     {
       "label": "skeleton default text",
diff --git a/exports/components/skip-link.brief.txt b/exports/components/skip-link.brief.txt
index 20f65be56..b5bf84e14 100644
--- a/exports/components/skip-link.brief.txt
+++ b/exports/components/skip-link.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — skip-link
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/skip-link.json
 spec: spec/components/skip-link.md  site: https://j3w1.github.io/theme/reference/#c-skip-link
 maturity: stable  priority: R1
@@ -15,8 +15,8 @@ Tokens (resolved):
 State dependency disclosures: D-008
 
 States: default, focus-visible
-  default: off-screen; nothing is painted [the link is still in the tab order and the accessibility tree]
-  focus-visible: appears in the top corner; ring 1px dashed {color.interaction.focus.ring} at −2px [the link appears; the ring]
+  default: off-screen; nothing painted [still in the tab order and the accessibility tree]
+  focus-visible: appears in the top corner; 1px dashed {color.interaction.focus.ring} ring at −2px [the link appears; the ring]
 
 Keyboard:
   Tab: From the address bar or the top of the document, focuses the skip link and reveals it.
diff --git a/exports/components/skip-link.json b/exports/components/skip-link.json
index 0ee9a6759..d0225bf23 100644
--- a/exports/components/skip-link.json
+++ b/exports/components/skip-link.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "skip-link",
   "family": "navigation",
   "maturity": "stable",
@@ -104,8 +104,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "off-screen; nothing is painted",
-      "channel": "the link is still in the tab order and the accessibility tree",
+      "visual": "off-screen; nothing painted",
+      "channel": "still in the tab order and the accessibility tree",
       "tokens": {
         "fg": {
           "alias": "color.text.bright",
@@ -149,7 +149,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "appears in the top corner; ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "appears in the top corner; 1px dashed {color.interaction.focus.ring} ring at −2px",
       "channel": "the link appears; the ring",
       "tokens": {
         "fg": {
@@ -245,7 +245,7 @@
     "settings-panel",
     "admin-form"
   ],
-  "nonExamples": "A skip link that is always visible. One hidden with `display: none` or\n`visibility: hidden`. One that is not the first tab stop. One that points at\nan element without `tabindex=\"-1\"`, so focus does not move. A skip link\nthat slides in from the side and causes horizontal scroll while hidden. A\nrounded pill. One rendered without the frame on the canvas.",
+  "nonExamples": "Always visible. Hidden with `display: none` or `visibility: hidden`. Not the\nfirst tab stop. Pointing at an element without `tabindex=\"-1\"`, so focus does\nnot move. Sliding in from the side and causing horizontal scroll while hidden.\nA rounded pill. Rendered without the frame on the canvas.",
   "contrast": [
     {
       "label": "skip-link default text",
diff --git a/exports/components/switch.brief.txt b/exports/components/switch.brief.txt
index a17de861e..2bc509792 100644
--- a/exports/components/switch.brief.txt
+++ b/exports/components/switch.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — switch
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/switch.json
 spec: spec/components/switch.md  site: https://j3w1.github.io/theme/reference/#c-switch
 maturity: stable  priority: R1
@@ -27,12 +27,12 @@ State dependency disclosures: D-007
 
 States: default, hover, focus-visible, checked, checked+focus-visible, disabled, checked+disabled
   default: track 1px {color.border.control} on {color.surface.input}; thumb {color.text.default} at the start [thumb position]
-  hover: track background → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg} [cursor: pointer; hover-capable pointers only]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the track [the ring]
-  checked: track fills {color.action.primary.bg}; thumb {color.action.primary.text} moves to the end; border stays {color.border.control}; the word reads "On" [`aria-checked="true"`; thumb position; the word]
-  checked+focus-visible: the fill and a ring in {color.interaction.focus.ring-container} on the track [position and ring]
-  disabled: track {color.interaction.disabled.bg} with 1px {color.border.disabled}; thumb and name {color.text.disabled} [`disabled`; cursor: not-allowed]
-  checked+disabled: as disabled with the thumb at the end [`disabled`; `aria-checked="true"`; thumb position]
+  hover: off track → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg} [cursor: pointer; hover-capable pointers only]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px on the track [the ring]
+  checked: track fills {color.action.primary.bg}; thumb {color.action.primary.text} at the end; border stays {color.border.control}; the word reads "On" [`aria-checked="true"`; thumb position; the word]
+  checked+focus-visible: the fill and a {color.interaction.focus.ring-container} ring on the track [position and ring]
+  disabled: track {color.interaction.disabled.bg}, 1px {color.border.disabled}; thumb and name {color.text.disabled} [`disabled`; cursor: not-allowed]
+  checked+disabled: as disabled, thumb at the end [`disabled`; `aria-checked="true"`; thumb position]
 
 Keyboard:
   Tab / Shift+Tab: Moves focus to and from the switch.
diff --git a/exports/components/switch.json b/exports/components/switch.json
index e9672d2d0..012a70d63 100644
--- a/exports/components/switch.json
+++ b/exports/components/switch.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "switch",
   "family": "forms-basic",
   "maturity": "stable",
@@ -282,7 +282,7 @@
     },
     {
       "state": "hover",
-      "visual": "track background → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg}",
+      "visual": "off track → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg}",
       "channel": "cursor: pointer; hover-capable pointers only",
       "tokens": {
         "bg": {
@@ -315,7 +315,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the track",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the track",
       "channel": "the ring",
       "tokens": {
         "bg": {
@@ -360,7 +360,7 @@
     },
     {
       "state": "checked",
-      "visual": "track fills {color.action.primary.bg}; thumb {color.action.primary.text} moves to the end; border stays {color.border.control}; the word reads \"On\"",
+      "visual": "track fills {color.action.primary.bg}; thumb {color.action.primary.text} at the end; border stays {color.border.control}; the word reads \"On\"",
       "channel": "`aria-checked=\"true\"`; thumb position; the word",
       "tokens": {
         "fg": {
@@ -391,7 +391,7 @@
     },
     {
       "state": "checked+focus-visible",
-      "visual": "the fill and a ring in {color.interaction.focus.ring-container} on the track",
+      "visual": "the fill and a {color.interaction.focus.ring-container} ring on the track",
       "channel": "position and ring",
       "tokens": {
         "fg": {
@@ -434,13 +434,13 @@
     },
     {
       "state": "disabled",
-      "visual": "track {color.interaction.disabled.bg} with 1px {color.border.disabled}; thumb and name {color.text.disabled}",
+      "visual": "track {color.interaction.disabled.bg}, 1px {color.border.disabled}; thumb and name {color.text.disabled}",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "checked+disabled",
-      "visual": "as disabled with the thumb at the end",
+      "visual": "as disabled, thumb at the end",
       "channel": "`disabled`; `aria-checked=\"true\"`; thumb position",
       "tokens": {}
     }
@@ -485,7 +485,7 @@
   "specimens": [
     "settings-panel"
   ],
-  "nonExamples": "A pill-shaped track or a round thumb. A switch that only takes effect on\nsubmit. A checkbox input styled as a switch. Colour as the only difference\nbetween on and off. A green on colour. A label that reads \"On\" as the name.\nDisabling by opacity. A sliding animation longer than 120ms or one that\nruns under reduced motion.",
+  "nonExamples": "A pill track or round thumb. A switch that applies on submit. A checkbox\ninput styled as a switch. Colour as the only on/off difference. A green on\ncolour. \"On\" as the name. Disabling by opacity. A slide longer than 120ms or\none under reduced motion.",
   "contrast": [
     {
       "label": "switch default border",
diff --git a/exports/components/table.brief.txt b/exports/components/table.brief.txt
index d5d555127..a4d98a82b 100644
--- a/exports/components/table.brief.txt
+++ b/exports/components/table.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — table
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/table.json
 spec: spec/components/table.md  site: https://j3w1.github.io/theme/reference/#c-table
 maturity: stable  priority: R1
@@ -20,7 +20,7 @@ Tokens (resolved):
   row.bg-hover            #1c0a09  ({color.interaction.hover.bg})  use
   selected.bg             #531310  ({color.interaction.selection.bg})  use
   selected.text           #f4eeee  ({color.interaction.selection.text})  use
-  selected.ring           #ffa2a7  ({color.interaction.focus.ring-container})  use
+  selected.ring           #e53935  ({color.interaction.focus.ring})  use
   selected.inactive-bg    #420f0c  ({color.interaction.selection.inactive-bg})  use
   selected.inactive-text  #e99499  ({color.interaction.selection.inactive-text})  use
   caption.text            #bd787d  ({color.text.muted})  use
@@ -29,13 +29,13 @@ Tokens (resolved):
 
 States: default, hover, selected, selected+focus-visible, selected+container-inactive, sorted, empty, loading
   default: rows on {color.surface.default}; header rule 1px {color.border.strong} [—]
-  hover: row background → {color.interaction.hover.bg} [cursor: default; only on hover-capable pointers]
+  hover: row → {color.interaction.hover.bg} [cursor: default; hover-capable pointers only]
   selected: row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text} [`aria-selected="true"` on the row]
-  selected+focus-visible: the fill and a ring in {color.interaction.focus.ring-container} around the row [both visible at once]
+  selected+focus-visible: the fill and 1px dashed {color.interaction.focus.ring} at −2px around the row [both visible at once]
   selected+container-inactive: row fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring [lightness drop between the two fills]
-  sorted: the sorted header shows ▲ (ascending) or ▼ (descending) in {color.text.bright} [`aria-sort`; the glyph]
-  empty: the body is one full-width cell in {color.text.muted}: "No rows match." [the message text]
-  loading: the body is one full-width cell with the static `⋯` glyph in {color.text.muted}; the header stays [`aria-busy="true"`; the glyph; no animation]
+  sorted: ▲ (ascending) or ▼ (descending) in {color.text.bright} on the sorted header [`aria-sort`; the glyph]
+  empty: one full-width cell in {color.text.muted}: "No rows match." [the message text]
+  loading: one full-width cell with the static `⋯` glyph in {color.text.muted}; the header stays [`aria-busy="true"`; the glyph; no animation]
 
 Keyboard:
   Tab / Shift+Tab: Moves between the sort buttons and any controls inside cells; rows themselves are not tab stops in a plain table.
diff --git a/exports/components/table.json b/exports/components/table.json
index 43b389639..fe0110f0f 100644
--- a/exports/components/table.json
+++ b/exports/components/table.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "table",
   "family": "display",
   "maturity": "stable",
@@ -219,8 +219,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -325,8 +325,8 @@
     },
     {
       "state": "hover",
-      "visual": "row background → {color.interaction.hover.bg}",
-      "channel": "cursor: default; only on hover-capable pointers",
+      "visual": "row → {color.interaction.hover.bg}",
+      "channel": "cursor: default; hover-capable pointers only",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -387,7 +387,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the fill and a ring in {color.interaction.focus.ring-container} around the row",
+      "visual": "the fill and 1px dashed {color.interaction.focus.ring} at −2px around the row",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -415,8 +415,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -461,7 +461,7 @@
     },
     {
       "state": "sorted",
-      "visual": "the sorted header shows ▲ (ascending) or ▼ (descending) in {color.text.bright}",
+      "visual": "▲ (ascending) or ▼ (descending) in {color.text.bright} on the sorted header",
       "channel": "`aria-sort`; the glyph",
       "tokens": {
         "fg": {
@@ -492,7 +492,7 @@
     },
     {
       "state": "empty",
-      "visual": "the body is one full-width cell in {color.text.muted}: \"No rows match.\"",
+      "visual": "one full-width cell in {color.text.muted}: \"No rows match.\"",
       "channel": "the message text",
       "tokens": {
         "fg": {
@@ -523,7 +523,7 @@
     },
     {
       "state": "loading",
-      "visual": "the body is one full-width cell with the static `⋯` glyph in {color.text.muted}; the header stays",
+      "visual": "one full-width cell with the static `⋯` glyph in {color.text.muted}; the header stays",
       "channel": "`aria-busy=\"true\"`; the glyph; no animation",
       "tokens": {
         "fg": {
@@ -595,7 +595,7 @@
     "filterable-table",
     "settings-panel"
   ],
-  "nonExamples": "Zebra striping. A rounded or bordered table frame. A selected row marked by\na left bar (that is navigation, not selection). Header text in caption size\nor uppercase. Sorting shown by colour alone without `aria-sort` and a glyph.\nAn animated spinner while loading. An empty state that removes the header.\nText truncated with no way to read the full value. A hover fill on a\ntouch device.",
+  "nonExamples": "Zebra striping. A rounded or bordered frame. A selected row marked by a\nleft bar (that is navigation). Header text in caption size or uppercase.\nSorting by colour alone without `aria-sort` and a glyph. An animated\nspinner. An empty state that removes the header. Truncated text with no way\nto read the full value. Hover fill on touch.",
   "contrast": [
     {
       "label": "table default text",
@@ -654,11 +654,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/exports/components/tabs.brief.txt b/exports/components/tabs.brief.txt
index 21913e896..76ce8ed3f 100644
--- a/exports/components/tabs.brief.txt
+++ b/exports/components/tabs.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — tabs
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/tabs.json
 spec: spec/components/tabs.md  site: https://j3w1.github.io/theme/reference/#c-tabs
 maturity: stable  priority: R1
@@ -24,9 +24,9 @@ Tokens (resolved):
 States: default, hover, focus-visible, selected, selected+focus-visible, selected+container-inactive, disabled
   default: text {color.text.default}; transparent 2px bottom edge [—]
   hover: background → {color.interaction.hover.bg}; text unchanged [cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px [the ring]
+  focus-visible: 1px dashed {color.interaction.focus.ring} ring at −2px [the ring]
   selected: text {color.text.bright}; 2px {color.border.selected-indicator} bar [`aria-selected="true"`; the bar; tabindex 0]
-  selected+focus-visible: the bar and the ring together [both visible]
+  selected+focus-visible: bar and ring together [both visible]
   selected+container-inactive: bar → {color.border.selected-indicator-inactive}; text stays bright [lightness drop of the bar; the container's own inactive state]
   disabled: text {color.text.disabled}; no hover; bar hidden unless selected [`disabled` or `aria-disabled`; cursor: not-allowed]
 
diff --git a/exports/components/tabs.json b/exports/components/tabs.json
index 58485f204..8980fbe3d 100644
--- a/exports/components/tabs.json
+++ b/exports/components/tabs.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "tabs",
   "family": "navigation",
   "maturity": "stable",
@@ -274,7 +274,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -360,7 +360,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the bar and the ring together",
+      "visual": "bar and ring together",
       "channel": "both visible",
       "tokens": {
         "fg": {
@@ -503,7 +503,7 @@
     "settings-panel",
     "i3-window-frame"
   ],
-  "nonExamples": "Pill or filled tabs. A selected tab drawn with the selection fill. Rounded\ncorners on the tab or the bar. A tab strip that wraps to two lines. A tab that\nchanges only its text colour when selected. A glow instead of the dashed ring.\nEvery tab in the tab order. Disabling by opacity.",
+  "nonExamples": "Pill or filled tabs. A selected tab in the selection fill. Rounded tabs or\nbar. A strip that wraps to two lines. A selected tab that changes only its\ntext colour. A glow instead of the dashed ring. Every tab in the tab order.\nDisabling by opacity.",
   "contrast": [
     {
       "label": "tabs default text",
diff --git a/exports/components/terminal.brief.txt b/exports/components/terminal.brief.txt
index 1bc51fe04..777a1468b 100644
--- a/exports/components/terminal.brief.txt
+++ b/exports/components/terminal.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — terminal
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/terminal.json
 spec: spec/components/terminal.md  site: https://j3w1.github.io/theme/reference/#c-terminal
 maturity: stable  priority: R1
@@ -45,11 +45,11 @@ Tokens (resolved):
 State dependency disclosures: D-007
 
 States: default, focus-visible, selected, busy, current
-  default: text on {color.terminal.bg}; the cursor cell hollow, a 1px {color.terminal.cursor} outline; no ring [the hollow cursor]
-  focus-visible: container ring 2px {color.interaction.focus.ring-container} at −3px; the cursor solid {color.terminal.cursor} with {color.terminal.bg} text [the ring; the cursor fills]
-  selected: the run filled {color.terminal.selection-bg} with {color.terminal.selection-text}; slot colours inside the run give way to the selection text [the fill spans whole cells; the emulator exposes the selection]
-  busy: a command is running: the cursor is a solid static block at the end of the output; the transcript is `aria-busy` [`aria-busy`; the cursor shape; no blink]
-  current: the cursor line filled {color.code.current-line} across its width; the cursor as in focus [the row fill; the cursor cell]
+  default: text on {color.terminal.bg}; cursor hollow, 1px {color.terminal.cursor} outline; no ring [the hollow cursor]
+  focus-visible: 2px {color.interaction.focus.ring-container} container ring at −3px; cursor solid {color.terminal.cursor} with {color.terminal.bg} text [the ring; the cursor fills]
+  selected: run filled {color.terminal.selection-bg} with {color.terminal.selection-text}; slot colours inside give way to the selection text [whole-cell fill; the emulator exposes the selection]
+  busy: command running: solid static block cursor at the end of the output; transcript `aria-busy` [`aria-busy`; cursor shape; no blink]
+  current: cursor line filled {color.code.current-line} across its width; cursor as in focus [row fill; cursor cell]
 
 Keyboard:
   (host): The emulator and the shell own every key; the theme changes no binding and no cursor behaviour.
diff --git a/exports/components/terminal.json b/exports/components/terminal.json
index ea4d0847a..466359d3c 100644
--- a/exports/components/terminal.json
+++ b/exports/components/terminal.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "terminal",
   "family": "developer",
   "maturity": "stable",
@@ -479,7 +479,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "text on {color.terminal.bg}; the cursor cell hollow, a 1px {color.terminal.cursor} outline; no ring",
+      "visual": "text on {color.terminal.bg}; cursor hollow, 1px {color.terminal.cursor} outline; no ring",
       "channel": "the hollow cursor",
       "tokens": {
         "fg": {
@@ -524,7 +524,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "container ring 2px {color.interaction.focus.ring-container} at −3px; the cursor solid {color.terminal.cursor} with {color.terminal.bg} text",
+      "visual": "2px {color.interaction.focus.ring-container} container ring at −3px; cursor solid {color.terminal.cursor} with {color.terminal.bg} text",
       "channel": "the ring; the cursor fills",
       "tokens": {
         "fg": {
@@ -567,8 +567,8 @@
     },
     {
       "state": "selected",
-      "visual": "the run filled {color.terminal.selection-bg} with {color.terminal.selection-text}; slot colours inside the run give way to the selection text",
-      "channel": "the fill spans whole cells; the emulator exposes the selection",
+      "visual": "run filled {color.terminal.selection-bg} with {color.terminal.selection-text}; slot colours inside give way to the selection text",
+      "channel": "whole-cell fill; the emulator exposes the selection",
       "tokens": {
         "fg": {
           "alias": "color.terminal.selection-text",
@@ -598,8 +598,8 @@
     },
     {
       "state": "busy",
-      "visual": "a command is running: the cursor is a solid static block at the end of the output; the transcript is `aria-busy`",
-      "channel": "`aria-busy`; the cursor shape; no blink",
+      "visual": "command running: solid static block cursor at the end of the output; transcript `aria-busy`",
+      "channel": "`aria-busy`; cursor shape; no blink",
       "tokens": {
         "fg": {
           "alias": "color.terminal.bg",
@@ -629,8 +629,8 @@
     },
     {
       "state": "current",
-      "visual": "the cursor line filled {color.code.current-line} across its width; the cursor as in focus",
-      "channel": "the row fill; the cursor cell",
+      "visual": "cursor line filled {color.code.current-line} across its width; cursor as in focus",
+      "channel": "row fill; cursor cell",
       "tokens": {
         "fg": {
           "alias": "color.terminal.fg",
@@ -700,7 +700,7 @@
   "specimens": [
     "i3-window-frame"
   ],
-  "nonExamples": "Normalising the heritage slots so every one reaches 4.5:1 and calling it\n`heritage-ansi`. A blinking cursor in the reference. A cursor that is a\nglowing bar. Bold rendered as bright, which silently swaps the slots. A\npurple or cyan slot borrowed from another scheme. Wrapping the transcript at\nnarrow widths and breaking the prompt segments. A selection drawn as a ring\ninstead of a fill. Rounded prompt segments or a gradient prompt.",
+  "nonExamples": "Normalising the heritage slots to 4.5:1 and calling it `heritage-ansi`. A\nblinking cursor in the reference. A glowing bar cursor. Bold rendered as\nbright. A purple or cyan slot borrowed from another scheme. Wrapping the\ntranscript and breaking the prompt segments. A selection drawn as a ring\ninstead of a fill. Rounded or gradient prompt segments.",
   "contrast": [
     {
       "label": "terminal default text",
diff --git a/exports/components/text-field.brief.txt b/exports/components/text-field.brief.txt
index 4a2105890..5ede7fd41 100644
--- a/exports/components/text-field.brief.txt
+++ b/exports/components/text-field.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — text-field
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/text-field.json
 spec: spec/components/text-field.md  site: https://j3w1.github.io/theme/reference/#c-text-field
 maturity: stable  priority: R1
@@ -38,18 +38,18 @@ State dependency disclosures: D-007
 States: default, hover, focus-visible, placeholder-shown, filled, required, invalid, invalid+focus-visible, invalid+hover, disabled, disabled+filled, read-only, read-only+focus-visible, loading
   default: 1px {color.border.control} on {color.surface.input}; text {color.text.default} [—]
   hover: background → {color.interaction.hover.bg}; border unchanged [cursor: text]
-  focus-visible: border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px [the ring]
+  focus-visible: border → {color.border.active}; 1px dashed {color.interaction.focus.ring} ring at −2px [the ring]
   placeholder-shown: placeholder in {color.text.placeholder}, italic [italic]
   filled: as default with a value [—]
   required: `*` after the label in {color.status.danger.text} plus visually hidden "required" [`required` attribute; the mark]
-  invalid: border 2px {color.status.danger.border}; message with the ✕ glyph [border width 1 → 2px; glyph; `aria-invalid`]
-  invalid+focus-visible: the 2px danger border and a 1px dashed ring in {color.interaction.focus.ring-container} at −4px (the control form, recoloured; never the 2px container form) [double boundary]
+  invalid: 2px {color.status.danger.border}; message with the ✕ glyph [border 1 → 2px; glyph; `aria-invalid`]
+  invalid+focus-visible: the 2px danger border plus a 1px dashed {color.interaction.focus.ring-container} ring at −4px (the control form recoloured, never the 2px container form) [double boundary]
   invalid+hover: as invalid with the hover background [cursor]
-  disabled: text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no hover; the label and help keep their colours [`disabled`; cursor: not-allowed]
+  disabled: text {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; no hover; label and help keep their colours [`disabled`; cursor: not-allowed]
   disabled+filled: as disabled with a value [`disabled`]
   read-only: no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; text {color.text.default}; focusable and selectable [`readonly`; dotted edge]
-  read-only+focus-visible: the dotted {color.border.divider} edge unchanged, plus the dashed ring at −2px [the ring]
-  loading: size unchanged; a static `⋯` glyph in {color.text.muted} inside the box after the input and before any trailing action; input remains editable [glyph; `aria-busy`]
+  read-only+focus-visible: the dotted edge unchanged, plus the dashed ring at −2px [the ring]
+  loading: size unchanged; static `⋯` in {color.text.muted} after the input, before any trailing action; still editable [glyph; `aria-busy`]
 
 Keyboard:
   Tab / Shift+Tab: Moves focus in and out; affix actions (clear, reveal, stepper) are separate tab stops after the input.
diff --git a/exports/components/text-field.json b/exports/components/text-field.json
index 739cfa09b..d654df458 100644
--- a/exports/components/text-field.json
+++ b/exports/components/text-field.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "text-field",
   "family": "forms-basic",
   "maturity": "stable",
@@ -479,7 +479,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "border → {color.border.active}; 1px dashed {color.interaction.focus.ring} ring at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -591,8 +591,8 @@
     },
     {
       "state": "invalid",
-      "visual": "border 2px {color.status.danger.border}; message with the ✕ glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border}; message with the ✕ glyph",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -634,7 +634,7 @@
     },
     {
       "state": "invalid+focus-visible",
-      "visual": "the 2px danger border and a 1px dashed ring in {color.interaction.focus.ring-container} at −4px (the control form, recoloured; never the 2px container form)",
+      "visual": "the 2px danger border plus a 1px dashed {color.interaction.focus.ring-container} ring at −4px (the control form recoloured, never the 2px container form)",
       "channel": "double boundary",
       "tokens": {
         "fg": {
@@ -695,7 +695,7 @@
     },
     {
       "state": "disabled",
-      "visual": "text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no hover; the label and help keep their colours",
+      "visual": "text {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; no hover; label and help keep their colours",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
@@ -738,13 +738,13 @@
     },
     {
       "state": "read-only+focus-visible",
-      "visual": "the dotted {color.border.divider} edge unchanged, plus the dashed ring at −2px",
+      "visual": "the dotted edge unchanged, plus the dashed ring at −2px",
       "channel": "the ring",
       "tokens": {}
     },
     {
       "state": "loading",
-      "visual": "size unchanged; a static `⋯` glyph in {color.text.muted} inside the box after the input and before any trailing action; input remains editable",
+      "visual": "size unchanged; static `⋯` in {color.text.muted} after the input, before any trailing action; still editable",
       "channel": "glyph; `aria-busy`",
       "tokens": {}
     }
@@ -801,7 +801,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "Rounded corners. A floating or animated label. An underline-only field with no\nbox. A glow instead of the dashed ring. Placeholder text in red. Disabling by\nopacity. Using colour alone for the invalid state. A hover that changes the\ntext colour.",
+  "nonExamples": "Rounded corners. A floating or animated label. An underline-only field. A glow\ninstead of the dashed ring. Red placeholder text. Disabling by opacity. Colour\nalone for the invalid state. A hover that changes the text colour.",
   "contrast": [
     {
       "label": "text-field default text",
diff --git a/exports/components/textarea.brief.txt b/exports/components/textarea.brief.txt
index 9d63e061e..575a2c302 100644
--- a/exports/components/textarea.brief.txt
+++ b/exports/components/textarea.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — textarea
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/textarea.json
 spec: spec/components/textarea.md  site: https://j3w1.github.io/theme/reference/#c-textarea
 maturity: stable  priority: R1
@@ -35,14 +35,14 @@ State dependency disclosures: D-007
 
 States: default, hover, focus-visible, placeholder-shown, filled, required, invalid, invalid+focus-visible, disabled, read-only
   default: 1px {color.border.control} on {color.surface.input}; text {color.text.default} [—]
-  hover: background → {color.interaction.hover.bg}; border unchanged [cursor: text]
-  focus-visible: border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px [the ring]
-  placeholder-shown: placeholder in {color.text.placeholder}, italic [italic]
+  hover: → {color.interaction.hover.bg}; border unchanged [cursor: text]
+  focus-visible: border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px [the ring]
+  placeholder-shown: {color.text.placeholder}, italic [italic]
   filled: as default with a value [—]
   required: `*` after the label in {color.status.danger.text} plus visually hidden "required" [`required`; the mark]
-  invalid: border 2px {color.status.danger.border}; message with the ✕ glyph; a count past its limit turns {color.status.danger.text} with the glyph [border width 1 → 2px; glyph; `aria-invalid`]
-  invalid+focus-visible: the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px [double boundary]
-  disabled: text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no resize handle [`disabled`; cursor: not-allowed]
+  invalid: 2px {color.status.danger.border}; message with ✕; a count past its limit turns {color.status.danger.text} with the glyph [border 1 → 2px; glyph; `aria-invalid`]
+  invalid+focus-visible: the 2px danger border and a {color.interaction.focus.ring-container} ring at −4px [double boundary]
+  disabled: text {color.text.disabled}, border {color.border.disabled}, fill {color.interaction.disabled.bg}; no resize handle [`disabled`; cursor: not-allowed]
   read-only: no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; no resize handle; selectable [`readonly`; dotted edge]
 
 Keyboard:
diff --git a/exports/components/textarea.json b/exports/components/textarea.json
index 78d7dacfc..e09fe13b0 100644
--- a/exports/components/textarea.json
+++ b/exports/components/textarea.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "textarea",
   "family": "forms-basic",
   "maturity": "stable",
@@ -393,7 +393,7 @@
     },
     {
       "state": "hover",
-      "visual": "background → {color.interaction.hover.bg}; border unchanged",
+      "visual": "→ {color.interaction.hover.bg}; border unchanged",
       "channel": "cursor: text",
       "tokens": {
         "fg": {
@@ -438,7 +438,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -493,7 +493,7 @@
     },
     {
       "state": "placeholder-shown",
-      "visual": "placeholder in {color.text.placeholder}, italic",
+      "visual": "{color.text.placeholder}, italic",
       "channel": "italic",
       "tokens": {
         "fg": {
@@ -550,8 +550,8 @@
     },
     {
       "state": "invalid",
-      "visual": "border 2px {color.status.danger.border}; message with the ✕ glyph; a count past its limit turns {color.status.danger.text} with the glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border}; message with ✕; a count past its limit turns {color.status.danger.text} with the glyph",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -593,7 +593,7 @@
     },
     {
       "state": "invalid+focus-visible",
-      "visual": "the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px",
+      "visual": "the 2px danger border and a {color.interaction.focus.ring-container} ring at −4px",
       "channel": "double boundary",
       "tokens": {
         "fg": {
@@ -648,7 +648,7 @@
     },
     {
       "state": "disabled",
-      "visual": "text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no resize handle",
+      "visual": "text {color.text.disabled}, border {color.border.disabled}, fill {color.interaction.disabled.bg}; no resize handle",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
@@ -729,7 +729,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "Horizontal or free resizing. A box narrower than its label column. A count\nthat only changes colour past the limit. A glow instead of the dashed ring.\nRounded corners. An auto-growing box with no maximum. Tab inserting a\ncharacter. Placeholder text as the label. Disabling by opacity.",
+  "nonExamples": "Horizontal or free resizing. A box narrower than its label column. A count\nthat only changes colour past the limit. A glow instead of the dashed ring.\nRounded corners. Auto-growing with no maximum. Tab inserting a character.\nPlaceholder as the label. Disabling by opacity.",
   "contrast": [
     {
       "label": "textarea default text",
diff --git a/exports/components/time-picker.brief.txt b/exports/components/time-picker.brief.txt
index 5dc301af5..0c92bdf43 100644
--- a/exports/components/time-picker.brief.txt
+++ b/exports/components/time-picker.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — time-picker
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/time-picker.json
 spec: spec/components/time-picker.md  site: https://j3w1.github.io/theme/reference/#c-time-picker
 maturity: stable  priority: R1
@@ -13,6 +13,7 @@ Tokens (resolved):
   root.bg-hover         #1c0a09  ({color.interaction.hover.bg})  use
   root.border-focus     #e53935  ({color.border.active})  use
   root.ring             #e53935  ({color.interaction.focus.ring})  use
+  root.ring-invalid     #ffa2a7  ({color.interaction.focus.ring-container})  use
   root.border-invalid   #e53935  ({color.status.danger.border})  use
   root.border-disabled  #7d1310  ({color.border.disabled})  use
   root.bg-disabled      #160b0b  ({color.interaction.disabled.bg})  use
@@ -24,12 +25,13 @@ Tokens (resolved):
   message.text          #f73f35  ({color.status.danger.text})  use
 State dependency disclosures: D-007
 
-States: default, hover, focus-visible, invalid, disabled
-  default: Input surface, default text and control border.
-  hover: The declared hover fill.
-  focus-visible: Active border and the canonical focus ring.
-  invalid: Danger border and a linked message.
-  disabled: Disabled colors; editor and step actions unavailable.
+States: default, hover, focus-visible, invalid, invalid+focus-visible, disabled
+  default: {color.text.default} on {color.surface.input}, 1px {color.border.control} [—]
+  hover: background → {color.interaction.hover.bg} [hover-capable pointers only]
+  focus-visible: border → {color.border.active}; the canonical focus ring [the ring]
+  invalid: 2px {color.status.danger.border}; a linked message [border 1 → 2px; ✕ glyph; `aria-invalid`]
+  invalid+focus-visible: the danger border and the ring in {color.interaction.focus.ring-container} at −4px [double boundary]
+  disabled: {color.text.disabled} on {color.interaction.disabled.bg}, border {color.border.disabled}; editor and step actions unavailable [`disabled`; cursor: not-allowed]
 
 Keyboard:
   Tab / Shift+Tab: Moves between the time editor, step buttons and other controls.
diff --git a/exports/components/time-picker.json b/exports/components/time-picker.json
index 0587e84cf..29f48b021 100644
--- a/exports/components/time-picker.json
+++ b/exports/components/time-picker.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "time-picker",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -22,7 +22,7 @@
     "demonstrated": true,
     "tested": false,
     "testImplemented": false,
-    "states": 5
+    "states": 6
   },
   "title": "Time picker",
   "summary": "A themed time editor with explicit step buttons, backed by native time values and constraints.",
@@ -51,6 +51,7 @@
     "hover",
     "focus-visible",
     "invalid",
+    "invalid+focus-visible",
     "disabled"
   ],
   "tokens": {
@@ -116,6 +117,18 @@
         "decisionIds": []
       }
     },
+    "root.ring-invalid": {
+      "alias": "color.interaction.focus.ring-container",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "root.border-invalid": {
       "alias": "color.status.danger.border",
       "value": "#e53935",
@@ -228,8 +241,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Input surface, default text and control border.",
-      "channel": "",
+      "visual": "{color.text.default} on {color.surface.input}, 1px {color.border.control}",
+      "channel": "—",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -273,8 +286,8 @@
     },
     {
       "state": "hover",
-      "visual": "The declared hover fill.",
-      "channel": "",
+      "visual": "background → {color.interaction.hover.bg}",
+      "channel": "hover-capable pointers only",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -318,8 +331,8 @@
     },
     {
       "state": "focus-visible",
-      "visual": "Active border and the canonical focus ring.",
-      "channel": "",
+      "visual": "border → {color.border.active}; the canonical focus ring",
+      "channel": "the ring",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -373,8 +386,51 @@
     },
     {
       "state": "invalid",
-      "visual": "Danger border and a linked message.",
-      "channel": "",
+      "visual": "2px {color.status.danger.border}; a linked message",
+      "channel": "border 1 → 2px; ✕ glyph; `aria-invalid`",
+      "tokens": {
+        "fg": {
+          "alias": "color.text.default",
+          "value": "#e99499",
+          "status": "observed",
+          "deprecated": false,
+          "decisionId": null,
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
+        },
+        "bg": {
+          "alias": "color.surface.input",
+          "value": "#000000",
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-023",
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
+        },
+        "border": {
+          "alias": "color.status.danger.border",
+          "value": "#e53935",
+          "status": "observed",
+          "deprecated": false,
+          "decisionId": null,
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
+        }
+      }
+    },
+    {
+      "state": "invalid+focus-visible",
+      "visual": "the danger border and the ring in {color.interaction.focus.ring-container} at −4px",
+      "channel": "double boundary",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -411,13 +467,25 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           }
+        },
+        "outline": {
+          "alias": "color.interaction.focus.ring-container",
+          "value": "#ffa2a7",
+          "status": "observed",
+          "deprecated": false,
+          "decisionId": null,
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
         }
       }
     },
     {
       "state": "disabled",
-      "visual": "Disabled colors; editor and step actions unavailable.",
-      "channel": "",
+      "visual": "{color.text.disabled} on {color.interaction.disabled.bg}, border {color.border.disabled}; editor and step actions unavailable",
+      "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     }
   ],
@@ -463,7 +531,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "An unthemed host popup presented as fully themed. A second named input that duplicates form values. Discarding native constraints, labels or reset behavior. Literal colors, rounded corners, or a selected fill with no distinguishable focus boundary.",
+  "nonExamples": "An unthemed host popup presented as themed. A second named input\nduplicating form values. Dropping native constraints, labels or reset.\nLiteral colours or rounded corners.",
   "contrast": [
     {
       "label": "time-picker default text",
@@ -582,6 +650,45 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "label": "time-picker invalid+focus-visible text",
+      "state": "invalid+focus-visible",
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.text.default",
+      "bg": "color.surface.input",
+      "fgHex": "#e99499",
+      "bgHex": "#000000",
+      "ratio": 9.16,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "time-picker invalid+focus-visible border",
+      "state": "invalid+focus-visible",
+      "kind": "ui",
+      "min": 3,
+      "fg": "color.status.danger.border",
+      "bg": "color.surface.input",
+      "fgHex": "#e53935",
+      "bgHex": "#000000",
+      "ratio": 4.97,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "time-picker invalid+focus-visible outline",
+      "state": "invalid+focus-visible",
+      "kind": "ui",
+      "min": 3,
+      "fg": "color.interaction.focus.ring-container",
+      "bg": "color.surface.input",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#000000",
+      "ratio": 10.98,
+      "pass": true,
+      "waiver": null
+    },
     {
       "label": "validation message on the canvas",
       "state": null,
diff --git a/exports/components/timeline.brief.txt b/exports/components/timeline.brief.txt
index 6aa685053..1c5b2bf12 100644
--- a/exports/components/timeline.brief.txt
+++ b/exports/components/timeline.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — timeline
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/timeline.json
 spec: spec/components/timeline.md  site: https://j3w1.github.io/theme/reference/#c-timeline
 maturity: stable  priority: R2
@@ -19,9 +19,9 @@ Tokens (resolved):
   dependency.role-border-width-emphasis  2px  ({border.width.emphasis})  use
   dependency.role-color-border-active    #e53935  ({color.border.active})  use
   dependency.role-color-border-divider   #2b0e0d  ({color.border.divider})  use-and-report (D-008)
+  dependency.role-focus-offset           -2px  ({focus.offset})  use
   dependency.role-radius-none            0px  ({radius.none})  use
   dependency.role-space-12               12px  ({space.12})  use
-  dependency.role-space-2                2px  ({space.2})  use
   dependency.role-space-4                4px  ({space.4})  use
 State dependency disclosures: D-007
 
diff --git a/exports/components/timeline.json b/exports/components/timeline.json
index 83ff40778..d85df3434 100644
--- a/exports/components/timeline.json
+++ b/exports/components/timeline.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "timeline",
   "family": "display",
   "maturity": "stable",
@@ -186,9 +186,9 @@
         ]
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -198,9 +198,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -210,9 +210,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
diff --git a/exports/components/toast.brief.txt b/exports/components/toast.brief.txt
index 578d53f13..c6df89cb1 100644
--- a/exports/components/toast.brief.txt
+++ b/exports/components/toast.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — toast
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/toast.json
 spec: spec/components/toast.md  site: https://j3w1.github.io/theme/reference/#c-toast
 maturity: stable  priority: R1
@@ -28,7 +28,7 @@ Tokens (resolved):
   danger.text             #f9faf9  ({color.status.danger.on-fill})  use
   danger.button-bg-hover  #ae1914  ({color.action.destructive.pressed-bg})  use
   action.text             #f73f35  ({color.text.link})  use
-  action.bg-hover         #630f0d  ({color.interaction.hover.bg-strong})  use
+  action.bg-hover         #1c0a09  ({color.interaction.hover.bg})  use
   action.text-hover       #f4eeee  ({color.text.link-hover})  use
   close.text              #e99499  ({color.action.tertiary.text})  use
   close.bg-hover          #1c0a09  ({color.action.tertiary.hover-bg})  use
@@ -39,10 +39,10 @@ State dependency disclosures: D-008
 
 States: default, hover, focus-visible, stacked, reduced-motion
   default: canvas surface, 1px overlay border, glyph in the status text colour [the glyph; the worded text]
-  hover: action → {color.interaction.hover.bg-strong} with {color.text.link-hover}; Dismiss → {color.action.tertiary.hover-bg}; the timeout pauses [cursor: pointer; underline thickens on the action]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the focused button; on the danger fill the ring takes {color.status.danger.on-fill}; the timeout pauses [the ring]
-  stacked: toasts sit in one column with a 4px gap, newest at the end; the last visible toast shows "+n" in {color.text.muted} for queued ones [the count text; at most three visible]
-  reduced-motion: no transition; the toast is simply present or absent [`prefers-reduced-motion`; nothing moves]
+  hover: action → {color.interaction.hover.bg} with {color.text.link-hover}; Dismiss → {color.action.tertiary.hover-bg}; the timeout pauses [cursor: pointer; the action's underline thickens]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px on the focused button, {color.status.danger.on-fill} on the danger fill; the timeout pauses [the ring]
+  stacked: one column, 4px gap, newest at the end; the last visible toast shows "+n" in {color.text.muted} [the count text; at most three visible]
+  reduced-motion: no transition; present or absent [`prefers-reduced-motion`; nothing moves]
 
 Keyboard:
   F6 / a host shortcut: Moves focus into the notification region; toasts never steal focus when they appear.
diff --git a/exports/components/toast.json b/exports/components/toast.json
index cfe4f70b4..43391e3bb 100644
--- a/exports/components/toast.json
+++ b/exports/components/toast.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "toast",
   "family": "feedback",
   "maturity": "stable",
@@ -305,8 +305,8 @@
       }
     },
     "action.bg-hover": {
-      "alias": "color.interaction.hover.bg-strong",
-      "value": "#630f0d",
+      "alias": "color.interaction.hover.bg",
+      "value": "#1c0a09",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -437,8 +437,8 @@
     },
     {
       "state": "hover",
-      "visual": "action → {color.interaction.hover.bg-strong} with {color.text.link-hover}; Dismiss → {color.action.tertiary.hover-bg}; the timeout pauses",
-      "channel": "cursor: pointer; underline thickens on the action",
+      "visual": "action → {color.interaction.hover.bg} with {color.text.link-hover}; Dismiss → {color.action.tertiary.hover-bg}; the timeout pauses",
+      "channel": "cursor: pointer; the action's underline thickens",
       "tokens": {
         "fg": {
           "alias": "color.text.link-hover",
@@ -453,8 +453,8 @@
           }
         },
         "bg": {
-          "alias": "color.interaction.hover.bg-strong",
-          "value": "#630f0d",
+          "alias": "color.interaction.hover.bg",
+          "value": "#1c0a09",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -468,7 +468,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the focused button; on the danger fill the ring takes {color.status.danger.on-fill}; the timeout pauses",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the focused button, {color.status.danger.on-fill} on the danger fill; the timeout pauses",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -511,7 +511,7 @@
     },
     {
       "state": "stacked",
-      "visual": "toasts sit in one column with a 4px gap, newest at the end; the last visible toast shows \"+n\" in {color.text.muted} for queued ones",
+      "visual": "one column, 4px gap, newest at the end; the last visible toast shows \"+n\" in {color.text.muted}",
       "channel": "the count text; at most three visible",
       "tokens": {
         "fg": {
@@ -556,7 +556,7 @@
     },
     {
       "state": "reduced-motion",
-      "visual": "no transition; the toast is simply present or absent",
+      "visual": "no transition; present or absent",
       "channel": "`prefers-reduced-motion`; nothing moves",
       "tokens": {
         "fg": {
@@ -648,7 +648,7 @@
     "i3-window-frame",
     "settings-panel"
   ],
-  "nonExamples": "A toast that slides in from an edge. A rounded, shadowed pill. A toast with\nno Dismiss that vanishes after two seconds. A toast that takes focus on\nappearance. Stacking more than three with no count. A form error shown as a\ntoast. Colour-only status without the glyph and worded text.",
+  "nonExamples": "A toast that slides in. A rounded, shadowed pill. No Dismiss and gone in two\nseconds. Taking focus on appearance. More than three stacked with no count. A\nform error as a toast. Colour-only status without the glyph and worded text.",
   "contrast": [
     {
       "label": "toast default text",
@@ -682,10 +682,10 @@
       "kind": "text",
       "min": 4.5,
       "fg": "color.text.link-hover",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#f4eeee",
-      "bgHex": "#630f0d",
-      "ratio": 11.41,
+      "bgHex": "#1c0a09",
+      "ratio": 16.7,
       "pass": true,
       "waiver": null
     },
@@ -986,7 +986,7 @@
       "bgHex": "#dc282e",
       "ratio": 1.13,
       "pass": true,
-      "waiver": "the fill is the boundary at 4.14:1 against the canvas; the border only keeps the box model identical across statuses"
+      "waiver": "the fill is the boundary against the canvas; the border only keeps the box model identical across statuses"
     }
   ]
 }
diff --git a/exports/components/toolbar.brief.txt b/exports/components/toolbar.brief.txt
index 4df98396b..2de12f3bd 100644
--- a/exports/components/toolbar.brief.txt
+++ b/exports/components/toolbar.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — toolbar
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/toolbar.json
 spec: spec/components/toolbar.md  site: https://j3w1.github.io/theme/reference/#c-toolbar
 maturity: stable  priority: R1
@@ -24,7 +24,7 @@ Tokens (resolved):
 States: default, hover, focus-visible, disabled, toggled
   default: text {color.text.default}; no fill; transparent border [—]
   hover: background → {color.interaction.hover.bg} [cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px [the ring]
+  focus-visible: 1px dashed {color.interaction.focus.ring} ring at −2px [the ring]
   disabled: text {color.text.disabled}; no fill; no hover [`disabled`; cursor: not-allowed; skipped by the arrow keys]
   toggled: fill {color.interaction.pressed.bg}; 1px {color.border.active} border; text {color.text.bright} [`aria-pressed="true"`; the border]
 
diff --git a/exports/components/toolbar.json b/exports/components/toolbar.json
index 91e767555..7c862698b 100644
--- a/exports/components/toolbar.json
+++ b/exports/components/toolbar.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "toolbar",
   "family": "navigation",
   "maturity": "stable",
@@ -272,7 +272,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -415,7 +415,7 @@
     "filterable-table",
     "i3-window-frame"
   ],
-  "nonExamples": "Buttons with a visible border at rest. A filled primary button inside the\ntoolbar. Rounded buttons or a pill-shaped toolbar. Every button in the tab\norder when script is available. A toggled state shown by colour alone without\n`aria-pressed`. A toolbar that wraps to two lines. A separator that receives\nfocus. Disabling by opacity.",
+  "nonExamples": "Buttons bordered at rest. A filled primary button in the toolbar. Rounded\nbuttons or a pill-shaped toolbar. Every button in the tab order when script\nis available. A toggled state by colour alone without `aria-pressed`. A\ntoolbar wrapping to two lines. A focusable separator. Disabling by opacity.",
   "contrast": [
     {
       "label": "toolbar default text",
diff --git a/exports/components/tooltip.brief.txt b/exports/components/tooltip.brief.txt
index 68b71d97f..b5e90d292 100644
--- a/exports/components/tooltip.brief.txt
+++ b/exports/components/tooltip.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — tooltip
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/tooltip.json
 spec: spec/components/tooltip.md  site: https://j3w1.github.io/theme/reference/#c-tooltip
 maturity: stable  priority: R1
@@ -20,11 +20,11 @@ Tokens (resolved):
 State dependency disclosures: D-008
 
 States: default, hover, focus-visible, open, closed
-  default: trigger at rest; the popup shown for the demonstration [`aria-describedby` on the trigger]
-  hover: trigger background → {color.action.tertiary.hover-bg}; the popup appears after 300 ms [cursor: pointer; the popup itself]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the trigger; the popup appears at once [the ring; the popup]
-  open: the popup visible, 1px {color.border.overlay} on {color.surface.raised} [the popup is present in the accessibility tree]
-  closed: the popup absent; the trigger unchanged [`hidden`; the description is still read from the DOM]
+  default: trigger at rest; popup shown for the demonstration [`aria-describedby` on the trigger]
+  hover: trigger background → {color.action.tertiary.hover-bg}; popup after 300 ms [cursor: pointer; the popup]
+  focus-visible: 1px dashed {color.interaction.focus.ring} at −2px on the trigger; popup at once [the ring; the popup]
+  open: popup visible, 1px {color.border.overlay} on {color.surface.raised} [popup in the accessibility tree]
+  closed: popup absent; trigger unchanged [`hidden`; the description is still read from the DOM]
 
 Keyboard:
   Tab: Focusing the trigger shows the tooltip; leaving it hides the tooltip.
diff --git a/exports/components/tooltip.json b/exports/components/tooltip.json
index ddb21e5a0..c459e8d7f 100644
--- a/exports/components/tooltip.json
+++ b/exports/components/tooltip.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "tooltip",
   "family": "feedback",
   "maturity": "stable",
@@ -175,7 +175,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "trigger at rest; the popup shown for the demonstration",
+      "visual": "trigger at rest; popup shown for the demonstration",
       "channel": "`aria-describedby` on the trigger",
       "tokens": {
         "fg": {
@@ -220,8 +220,8 @@
     },
     {
       "state": "hover",
-      "visual": "trigger background → {color.action.tertiary.hover-bg}; the popup appears after 300 ms",
-      "channel": "cursor: pointer; the popup itself",
+      "visual": "trigger background → {color.action.tertiary.hover-bg}; popup after 300 ms",
+      "channel": "cursor: pointer; the popup",
       "tokens": {
         "fg": {
           "alias": "color.action.tertiary.text",
@@ -251,7 +251,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the trigger; the popup appears at once",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the trigger; popup at once",
       "channel": "the ring; the popup",
       "tokens": {
         "fg": {
@@ -294,8 +294,8 @@
     },
     {
       "state": "open",
-      "visual": "the popup visible, 1px {color.border.overlay} on {color.surface.raised}",
-      "channel": "the popup is present in the accessibility tree",
+      "visual": "popup visible, 1px {color.border.overlay} on {color.surface.raised}",
+      "channel": "popup in the accessibility tree",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -339,7 +339,7 @@
     },
     {
       "state": "closed",
-      "visual": "the popup absent; the trigger unchanged",
+      "visual": "popup absent; trigger unchanged",
       "channel": "`hidden`; the description is still read from the DOM",
       "tokens": {}
     }
@@ -389,7 +389,7 @@
     "i3-window-frame",
     "filterable-table"
   ],
-  "nonExamples": "A rounded bubble with an arrow. A tooltip with a shadow or a fade longer\nthan 150 ms. A tooltip as the only accessible name of an icon button. A\ntooltip with a link or a button inside. One that opens on focus but not on\nhover, or on hover with no delay. A title attribute. A tooltip that follows\nthe pointer.",
+  "nonExamples": "A rounded bubble with an arrow. A shadow, or a fade longer than 150 ms. The\ntooltip as an icon button's only accessible name. A link or button inside.\nOpening on focus but not hover, or on hover with no delay. A `title`\nattribute. Following the pointer.",
   "contrast": [
     {
       "label": "tooltip default text",
diff --git a/exports/components/tree.brief.txt b/exports/components/tree.brief.txt
index 6f20fec4b..10532d6aa 100644
--- a/exports/components/tree.brief.txt
+++ b/exports/components/tree.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — tree
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/tree.json
 spec: spec/components/tree.md  site: https://j3w1.github.io/theme/reference/#c-tree
 maturity: stable  priority: R2
@@ -23,10 +23,10 @@ Tokens (resolved):
   dependency.role-color-text-disabled                 #8a5559  ({color.text.disabled})  use
   dependency.role-density-comfortable-control-height  32px  ({density.comfortable.control-height})  use
   dependency.role-density-compact-control-height      24px  ({density.compact.control-height})  use
+  dependency.role-focus-offset                        -2px  ({focus.offset})  use
   dependency.role-radius-none                         0px  ({radius.none})  use
   dependency.role-space-12                            12px  ({space.12})  use
   dependency.role-space-16                            16px  ({space.16})  use
-  dependency.role-space-2                             2px  ({space.2})  use
   dependency.role-space-8                             8px  ({space.8})  use
 State dependency disclosures: D-007
 
diff --git a/exports/components/tree.json b/exports/components/tree.json
index 0a8264775..31111bfbe 100644
--- a/exports/components/tree.json
+++ b/exports/components/tree.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "tree",
   "family": "navigation",
   "maturity": "stable",
@@ -237,9 +237,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -249,9 +249,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -261,9 +261,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-16": {
-      "alias": "space.16",
-      "value": "16px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -273,9 +273,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-16": {
+      "alias": "space.16",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
diff --git a/exports/components/wizard.brief.txt b/exports/components/wizard.brief.txt
index 113dd2079..1d99b288b 100644
--- a/exports/components/wizard.brief.txt
+++ b/exports/components/wizard.brief.txt
@@ -1,5 +1,5 @@
 j3w1/theme implementation brief — wizard
-theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=
+theme: j3w1-theme 4.0.0  profile: default  sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=
 pin: https://raw.githubusercontent.com/j3w1/theme/v4.0.0/exports/components/wizard.json
 spec: spec/components/wizard.md  site: https://j3w1.github.io/theme/reference/#c-wizard
 maturity: stable  priority: R1
@@ -35,13 +35,13 @@ Tokens (resolved):
   busy.glyph              #ffa2a7  ({color.action.primary.text})  use
 
 States: default, hover, focus-visible, current, disabled, invalid, busy
-  default: steps in {color.text.default}; complete steps carry the ✓ in {color.status.success.text} [the ✓ glyph; the numbers]
-  hover: step background → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg} [cursor: pointer]
-  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px; on Next's fill the ring takes {color.interaction.focus.ring-container} [the ring]
+  default: steps in {color.text.default}; complete steps carry ✓ in {color.status.success.text} [the ✓ glyph; the numbers]
+  hover: step → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg} [cursor: pointer]
+  focus-visible: 1px dashed {color.interaction.focus.ring} ring at −2px; {color.interaction.focus.ring-container} on Next's fill [the ring]
   current: 2px {color.border.selected-indicator} under the step; name in {color.text.bright} [`aria-current="step"`; the indicator bar; the heading reads "Step n of m"]
   disabled: a future step in {color.text.disabled}; no hover [`disabled`; cursor: not-allowed; skipped by Tab]
-  invalid: the step's marker becomes ✕ in {color.status.danger.text}; its indicator takes {color.status.danger.border}; the panel shows the message [glyph; message text; `aria-invalid` on the failing fields]
-  busy: Next shows the static ⋯ glyph before its label and does not respond; size unchanged [`aria-busy` on the wizard; the glyph; cursor: progress]
+  invalid: marker becomes ✕ in {color.status.danger.text}; indicator {color.status.danger.border}; the panel shows the message [glyph; message text; `aria-invalid` on the failing fields]
+  busy: Next shows the static ⋯ before its label and ignores activation; size unchanged [`aria-busy` on the wizard; the glyph; cursor: progress]
 
 Keyboard:
   Tab / Shift+Tab: Reaches each enabled step button, the panel's fields, then Back and Next; future steps are disabled and skipped.
diff --git a/exports/components/wizard.json b/exports/components/wizard.json
index ba5a2363b..286edb722 100644
--- a/exports/components/wizard.json
+++ b/exports/components/wizard.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "wizard",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -366,7 +366,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "steps in {color.text.default}; complete steps carry the ✓ in {color.status.success.text}",
+      "visual": "steps in {color.text.default}; complete steps carry ✓ in {color.status.success.text}",
       "channel": "the ✓ glyph; the numbers",
       "tokens": {
         "fg": {
@@ -397,7 +397,7 @@
     },
     {
       "state": "hover",
-      "visual": "step background → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg}",
+      "visual": "step → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg}",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -428,7 +428,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px; on Next's fill the ring takes {color.interaction.focus.ring-container}",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px; {color.interaction.focus.ring-container} on Next's fill",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -520,7 +520,7 @@
     },
     {
       "state": "invalid",
-      "visual": "the step's marker becomes ✕ in {color.status.danger.text}; its indicator takes {color.status.danger.border}; the panel shows the message",
+      "visual": "marker becomes ✕ in {color.status.danger.text}; indicator {color.status.danger.border}; the panel shows the message",
       "channel": "glyph; message text; `aria-invalid` on the failing fields",
       "tokens": {
         "fg": {
@@ -563,7 +563,7 @@
     },
     {
       "state": "busy",
-      "visual": "Next shows the static ⋯ glyph before its label and does not respond; size unchanged",
+      "visual": "Next shows the static ⋯ before its label and ignores activation; size unchanged",
       "channel": "`aria-busy` on the wizard; the glyph; cursor: progress",
       "tokens": {
         "fg": {
@@ -638,7 +638,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "Tabs restyled as steps. A progress bar in place of the stepper. Circles with\nconnecting lines that need a rounded radius. Future steps that look enabled\nand reject the click. A spinner on Next. Colour-only completion marks.\nValidation that blocks Back. Animated slides between panels.",
+  "nonExamples": "Tabs restyled as steps. A progress bar instead of the stepper. Circles with\nconnecting lines that need a radius. Future steps that look enabled and\nreject the click. A spinner on Next. Colour-only completion marks. Validation\nthat blocks Back. Animated slides between panels.",
   "contrast": [
     {
       "label": "wizard default text",
@@ -859,7 +859,7 @@
       "bgHex": "#000000",
       "ratio": 2.71,
       "pass": false,
-      "waiver": "the primary button is identified by its text at 9.28:1 on its fill and by its position; the fill measures 1.86:1 and its border 2.56:1 against the canvas, a documented property of the actions family, not of the wizard"
+      "waiver": "the primary button is identified by its text on the fill and by its position; the low-contrast fill and border against the canvas are a documented property of the actions family"
     },
     {
       "label": "ring on the next button's fill",
diff --git a/exports/contrast.json b/exports/contrast.json
index 29d562d3b..3ea168510 100644
--- a/exports/contrast.json
+++ b/exports/contrast.json
@@ -2056,10 +2056,10 @@
       "kind": "text",
       "min": 4.5,
       "fg": "color.text.link-hover",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#f4eeee",
-      "bgHex": "#630f0d",
-      "ratio": 11.41,
+      "bgHex": "#1c0a09",
+      "ratio": 16.7,
       "pass": true,
       "waiver": null
     },
@@ -2217,6 +2217,34 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "button-group",
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "button-group",
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "button",
       "label": "button default text",
@@ -2313,7 +2341,7 @@
       "bgHex": "#100c0c",
       "ratio": 1.83,
       "pass": false,
-      "waiver": "the fill is not the boundary of the control; the label text at 9.28:1 identifies it, and hover, active and focus each add a second channel"
+      "waiver": "the fill is not the boundary of the control; the label text identifies it, and hover, active and focus each add a second channel"
     },
     {
       "source": "button",
@@ -2671,11 +2699,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -2747,7 +2775,7 @@
       "bgHex": "#100c0c",
       "ratio": 1.36,
       "pass": true,
-      "waiver": "the default border groups content; a link or selectable card gains border.control on hover and the container ring on focus"
+      "waiver": "the default border groups content; interactive cards gain border.control on hover and a focus ring; selected cards use the ordinary ring"
     },
     {
       "source": "chart",
@@ -3203,11 +3231,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -3589,6 +3617,34 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "code-editor",
+      "label": "comment syntax decoration inside the selection",
+      "state": "selected",
+      "kind": "ui",
+      "min": 4.5,
+      "fg": "color.code.syntax.comment",
+      "bg": "color.code.selection-bg",
+      "fgHex": "#ad7175",
+      "bgHex": "#420f0c",
+      "ratio": 4.13,
+      "pass": false,
+      "waiver": "syntax colour is decoration; the short-lived selection preserves syntax roles, and comment falls below the text floor on this recorded selection value"
+    },
+    {
+      "source": "code-editor",
+      "label": "type syntax decoration inside the selection",
+      "state": "selected",
+      "kind": "ui",
+      "min": 4.5,
+      "fg": "color.code.syntax.type",
+      "bg": "color.code.selection-bg",
+      "fgHex": "#b37175",
+      "bgHex": "#420f0c",
+      "ratio": 4.24,
+      "pass": false,
+      "waiver": "syntax colour is decoration; the short-lived selection preserves syntax roles, and type falls below the text floor on this recorded selection value"
+    },
     {
       "source": "code-editor",
       "label": "muted string text inside the selection",
@@ -3819,11 +3875,11 @@
       "state": "selected",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -4079,6 +4135,34 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "command-palette",
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "command-palette",
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "compact-dashboard",
       "label": "compact-dashboard default text",
@@ -4149,6 +4233,34 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "compact-dashboard",
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "compact-dashboard",
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "data-table",
       "label": "data-table default text",
@@ -4239,11 +4351,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -4841,11 +4953,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -5891,11 +6003,11 @@
       "state": "focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -6263,6 +6375,34 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "editor-search",
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "editor-search",
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "empty-state",
       "label": "empty-state default text",
@@ -6417,6 +6557,34 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "error-state",
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "error-state",
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "field",
       "label": "field default text",
@@ -6697,6 +6865,34 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "file-browser",
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "file-browser",
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "file-input",
       "label": "file-input default text",
@@ -6849,7 +7045,7 @@
       "bgHex": "#000000",
       "ratio": 4.71,
       "pass": true,
-      "waiver": "inside the hover fill the control border measures 2.94:1; the boundary is judged against the canvas on its outer side (4.45:1), and the fill change is itself the hover signal"
+      "waiver": "inside the hover fill the control border falls below the floor; the boundary is judged against the canvas on its outer side, and the fill change is itself the hover signal"
     },
     {
       "source": "file-input",
@@ -7355,6 +7551,20 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "i3-window-frame",
+      "label": "ring on a selected workspace when focused",
+      "state": "selected",
+      "kind": "ui",
+      "min": 3,
+      "fg": "color.interaction.focus.ring",
+      "bg": "color.interaction.selection.bg",
+      "fgHex": "#e53935",
+      "bgHex": "#531310",
+      "ratio": 3.38,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "i3-window-frame",
       "label": "workspace names and status text on the bar",
@@ -7669,11 +7879,11 @@
       "state": "toggled+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -7824,10 +8034,10 @@
       "kind": "text",
       "min": 4.5,
       "fg": "color.text.link-hover",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#f4eeee",
-      "bgHex": "#630f0d",
-      "ratio": 11.41,
+      "bgHex": "#1c0a09",
+      "ratio": 16.7,
       "pass": true,
       "waiver": null
     },
@@ -7964,10 +8174,10 @@
       "kind": "ui",
       "min": 3,
       "fg": "color.interaction.focus.ring",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#e53935",
-      "bgHex": "#630f0d",
-      "ratio": 3.1,
+      "bgHex": "#1c0a09",
+      "ratio": 4.53,
       "pass": true,
       "waiver": null
     },
@@ -8075,11 +8285,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -8411,11 +8621,11 @@
       "state": "selected",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -8545,6 +8755,34 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "multiselect",
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "multiselect",
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "number-field",
       "label": "number-field default text",
@@ -8929,11 +9167,11 @@
       "state": "current",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -9035,6 +9273,34 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "popover",
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "popover",
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "progress",
       "label": "progress default text",
@@ -9131,7 +9397,7 @@
       "bgHex": "#420f0c",
       "ratio": 1.51,
       "pass": false,
-      "waiver": "the fill measures 1.51:1 against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control, 4.45:1) marks the full extent"
+      "waiver": "the fill falls below the floor against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control) marks the full extent"
     },
     {
       "source": "progress",
@@ -9539,6 +9805,34 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "repeater",
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "repeater",
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "search-field",
       "label": "search-field default text",
@@ -9803,7 +10097,7 @@
       "bgHex": "#000000",
       "ratio": 1.47,
       "pass": true,
-      "waiver": "the hint is not a control; its text at 5.81:1 carries the meaning"
+      "waiver": "the hint is not a control; its text carries the meaning"
     },
     {
       "source": "search-field",
@@ -10567,11 +10861,11 @@
       "state": "selected",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -11043,11 +11337,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -12479,6 +12773,48 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "source": "time-picker",
+      "label": "time-picker invalid+focus-visible text",
+      "state": "invalid+focus-visible",
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.text.default",
+      "bg": "color.surface.input",
+      "fgHex": "#e99499",
+      "bgHex": "#000000",
+      "ratio": 9.16,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "time-picker",
+      "label": "time-picker invalid+focus-visible border",
+      "state": "invalid+focus-visible",
+      "kind": "ui",
+      "min": 3,
+      "fg": "color.status.danger.border",
+      "bg": "color.surface.input",
+      "fgHex": "#e53935",
+      "bgHex": "#000000",
+      "ratio": 4.97,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "source": "time-picker",
+      "label": "time-picker invalid+focus-visible outline",
+      "state": "invalid+focus-visible",
+      "kind": "ui",
+      "min": 3,
+      "fg": "color.interaction.focus.ring-container",
+      "bg": "color.surface.input",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#000000",
+      "ratio": 10.98,
+      "pass": true,
+      "waiver": null
+    },
     {
       "source": "time-picker",
       "label": "validation message on the canvas",
@@ -12640,10 +12976,10 @@
       "kind": "text",
       "min": 4.5,
       "fg": "color.text.link-hover",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#f4eeee",
-      "bgHex": "#630f0d",
-      "ratio": 11.41,
+      "bgHex": "#1c0a09",
+      "ratio": 16.7,
       "pass": true,
       "waiver": null
     },
@@ -12967,7 +13303,7 @@
       "bgHex": "#dc282e",
       "ratio": 1.13,
       "pass": true,
-      "waiver": "the fill is the boundary at 4.14:1 against the canvas; the border only keeps the box model identical across statuses"
+      "waiver": "the fill is the boundary against the canvas; the border only keeps the box model identical across statuses"
     },
     {
       "source": "toolbar",
@@ -13541,7 +13877,7 @@
       "bgHex": "#000000",
       "ratio": 2.71,
       "pass": false,
-      "waiver": "the primary button is identified by its text at 9.28:1 on its fill and by its position; the fill measures 1.86:1 and its border 2.56:1 against the canvas, a documented property of the actions family, not of the wizard"
+      "waiver": "the primary button is identified by its text on the fill and by its position; the low-contrast fill and border against the canvas are a documented property of the actions family"
     },
     {
       "source": "wizard",
diff --git a/exports/contrast.md b/exports/contrast.md
index bc4230a09..579d296cc 100644
--- a/exports/contrast.md
+++ b/exports/contrast.md
@@ -150,7 +150,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | info dot on the panel surface | empty | ui | `color.status.info.fill` #7e9ebb | `color.surface.default` #100c0c | 6.94 | 3 | pass |
 | neutral dot on the panel surface | empty | ui | `color.status.neutral.fill` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | breadcrumbs default text | default | text | `color.text.link` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
-| breadcrumbs hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg-strong` #630f0d | 11.41 | 4.5 | pass |
+| breadcrumbs hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg` #1c0a09 | 16.70 | 4.5 | pass |
 | breadcrumbs focus-visible text | focus-visible | text | `color.text.link` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
 | breadcrumbs focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | breadcrumbs current text | current | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
@@ -162,13 +162,15 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | button default text | default | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 4.5 | pass |
 | button hover text | hover | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.hover-bg` #911410 | 4.75 | 4.5 | pass |
 | button focus-visible text | focus-visible | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 4.5 | pass |
 | button focus-visible outline | focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 3 | pass |
 | button active text | active | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.pressed-bg` #630f0d | 6.84 | 4.5 | pass |
 | button loading text | loading | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 4.5 | pass |
-| primary fill against the panel (decorative; the label identifies the button) | — | ui | `color.action.primary.bg` #7d1310 | `color.surface.default` #100c0c | 1.83 | 3 | waived: the fill is not the boundary of the control; the label text at 9.28:1 identifies it, and hover, active and focus each add a second channel |
+| primary fill against the panel (decorative; the label identifies the button) | — | ui | `color.action.primary.bg` #7d1310 | `color.surface.default` #100c0c | 1.83 | 3 | waived: the fill is not the boundary of the control; the label text identifies it, and hover, active and focus each add a second channel |
 | secondary text at rest | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.bg` #000000 | 10.98 | 4.5 | pass |
 | secondary border at rest | — | ui | `color.action.secondary.border` #a3676b | `color.action.secondary.bg` #000000 | 4.71 | 3 | pass |
 | secondary text on the hover fill | hover | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
@@ -194,7 +196,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | card focus-visible outline | focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 3 | pass |
 | card selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | card selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| card selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| card selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | title on the card | — | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
 | metadata on the card | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | title on the hover fill | hover | text | `color.text.bright` #ffa2a7 | `color.interaction.hover.bg` #1c0a09 | 10.01 | 4.5 | pass |
@@ -232,7 +234,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | chip focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | chip selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | chip selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| chip selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| chip selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | remove glyph at rest | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | disabled chip text (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.interaction.disabled.bg` #160b0b | 3.24 | 3 | pass |
 | disabled chip border (exempt) | disabled | ui | `color.border.disabled` #7d1310 | `color.interaction.disabled.bg` #160b0b | 1.82 | 1 | pass |
@@ -260,6 +262,8 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | tag | — | text | `color.code.syntax.tag` #f7463c | `color.code.bg` #0c0909 | 5.57 | 4.5 | pass |
 | attribute and escape | — | text | `color.code.syntax.attribute` #d4868b | `color.code.bg` #0c0909 | 7.16 | 4.5 | pass |
 | deprecated text | — | text | `color.code.syntax.deprecated` #ad7175 | `color.code.bg` #0c0909 | 5.10 | 4.5 | pass |
+| comment syntax decoration inside the selection | selected | ui | `color.code.syntax.comment` #ad7175 | `color.code.selection-bg` #420f0c | 4.13 | 4.5 | waived: syntax colour is decoration; the short-lived selection preserves syntax roles, and comment falls below the text floor on this recorded selection value |
+| type syntax decoration inside the selection | selected | ui | `color.code.syntax.type` #b37175 | `color.code.selection-bg` #420f0c | 4.24 | 4.5 | waived: syntax colour is decoration; the short-lived selection preserves syntax roles, and type falls below the text floor on this recorded selection value |
 | muted string text inside the selection | selected | text | `color.code.syntax.string` #bd787d | `color.code.selection-bg` #420f0c | 4.71 | 4.5 | pass |
 | keyword and tag text inside the selection (D-029) | selected | text | `color.code.syntax.keyword` #f7463c | `color.code.selection-bg` #420f0c | 4.52 | 4.5 | pass |
 | property, heading and invalid text inside the selection (D-029) | selected | text | `color.code.syntax.property` #e95551 | `color.code.selection-bg` #420f0c | 4.51 | 4.5 | pass |
@@ -276,7 +280,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | combobox open text | open | text | `color.text.default` #e99499 | `color.surface.raised` #160b0b | 8.43 | 4.5 | pass |
 | combobox open border | open | ui | `color.border.overlay` #e53935 | `color.surface.raised` #160b0b | 4.57 | 3 | pass |
 | combobox selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| combobox selected outline | selected | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| combobox selected outline | selected | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | combobox invalid text | invalid | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
 | combobox invalid border | invalid | ui | `color.status.danger.border` #e53935 | `color.surface.input` #000000 | 4.97 | 3 | pass |
 | combobox invalid+focus-visible text | invalid+focus-visible | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
@@ -295,18 +299,22 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | compact-dashboard default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | compact-dashboard default border | default | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | data-table default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | data-table hover text | hover | text | `color.text.default` #e99499 | `color.interaction.hover.bg` #1c0a09 | 8.35 | 4.5 | pass |
 | data-table focus-visible text | focus-visible | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | data-table focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | data-table selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | data-table selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| data-table selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| data-table selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | data-table sorted text | sorted | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
 | data-table mixed text | mixed | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 4.5 | pass |
 | data-table empty text | empty | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
@@ -349,7 +357,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | diagnostics focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | diagnostics selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | diagnostics selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| diagnostics selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| diagnostics selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | diagnostics error text | error | text | `color.status.danger.text` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
 | diagnostics empty text | empty | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | code text | — | text | `color.text.default` #e99499 | `color.code.bg` #0c0909 | 8.65 | 4.5 | pass |
@@ -424,7 +432,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | ring on an added row | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.diff.added.bg` #0f1a0e | 4.23 | 3 | pass |
 | ring on a removed row | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.diff.removed.bg` #2b0e0d | 4.24 | 3 | pass |
 | ring on a modified row | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.diff.modified.bg` #1f1a0c | 4.10 | 3 | pass |
-| ring on the selected row | focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| ring on the selected row | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | fold button text | — | text | `color.text.link` #f73f35 | `color.diff.header-bg` #241010 | 4.94 | 4.5 | pass |
 | disclosure default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | disclosure default border | default | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
@@ -451,6 +459,8 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | empty-state default text | default | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | heading on the panel surface | — | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
 | action text on the panel surface | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
@@ -462,6 +472,8 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | field default text | default | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
 | field required text | required | text | `color.status.danger.text` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
 | field invalid text | invalid | text | `color.status.danger.text` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
@@ -482,6 +494,8 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | file-input default text | default | text | `color.action.secondary.text` #ffa2a7 | `color.surface.canvas` #000000 | 10.98 | 4.5 | pass |
 | file-input default border | default | ui | `color.action.secondary.border` #a3676b | `color.surface.canvas` #000000 | 4.71 | 3 | pass |
 | file-input hover text | hover | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
@@ -529,6 +543,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | i3-window-frame selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | i3-window-frame container-inactive text | container-inactive | text | `color.text.muted` #bd787d | `color.surface.chrome` #090707 | 5.88 | 4.5 | pass |
 | i3-window-frame error text | error | text | `color.status.danger.on-fill` #f9faf9 | `color.status.danger.fill` #dc282e | 4.58 | 4.5 | pass |
+| ring on a selected workspace when focused | selected | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | workspace names and status text on the bar | — | text | `color.text.default` #e99499 | `color.surface.chrome` #090707 | 8.77 | 4.5 | pass |
 | clock on the bar | — | text | `color.text.bright` #ffa2a7 | `color.surface.chrome` #090707 | 10.50 | 4.5 | pass |
 | focused title | — | text | `color.text.bright` #ffa2a7 | `color.surface.chrome-alt` #1c0a09 | 10.01 | 4.5 | pass |
@@ -551,7 +566,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | icon-button active border | active | ui | `color.border.active` #e53935 | `color.interaction.pressed.bg` #420f0c | 3.81 | 3 | pass |
 | icon-button toggled text | toggled | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | icon-button toggled+focus-visible text | toggled+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| icon-button toggled+focus-visible outline | toggled+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| icon-button toggled+focus-visible outline | toggled+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | toggled border against the panel | toggled | ui | `color.border.selected-indicator` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | toggled fill against the panel (decorative) | toggled | ui | `color.interaction.selection.bg` #531310 | `color.surface.default` #100c0c | 1.36 | 3 | waived: aria-pressed, the filled icon form and the 1px selected-indicator border carry the state; the fill is not the boundary |
 | disabled icon (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.interaction.disabled.bg` #160b0b | 3.24 | 3 | pass |
@@ -562,7 +577,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | link default text | default | text | `color.text.link` #f73f35 | `color.surface.canvas` #000000 | 5.72 | 4.5 | pass |
-| link hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg-strong` #630f0d | 11.41 | 4.5 | pass |
+| link hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg` #1c0a09 | 16.70 | 4.5 | pass |
 | link focus-visible text | focus-visible | text | `color.text.link` #f73f35 | `color.surface.canvas` #000000 | 5.72 | 4.5 | pass |
 | link focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.canvas` #000000 | 4.97 | 3 | pass |
 | link visited text | visited | text | `color.text.link` #f73f35 | `color.surface.canvas` #000000 | 5.72 | 4.5 | pass |
@@ -572,7 +587,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | underline on the panel | — | ui | `color.text.link-underline` #dc282e | `color.surface.default` #100c0c | 4.06 | 3 | pass |
 | link text on the panel | — | text | `color.text.link` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
 | link text on raised surfaces | — | text | `color.text.link` #f73f35 | `color.surface.raised` #160b0b | 5.26 | 4.5 | pass |
-| ring on the hover fill | hover | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.hover.bg-strong` #630f0d | 3.10 | 3 | pass |
+| ring on the hover fill | hover | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.hover.bg` #1c0a09 | 4.53 | 3 | pass |
 | list default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | list default border | default | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | list hover text | hover | text | `color.text.default` #e99499 | `color.interaction.hover.bg` #1c0a09 | 8.35 | 4.5 | pass |
@@ -580,7 +595,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | list focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | list selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | list selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| list selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| list selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | list selected+container-inactive text | selected+container-inactive | text | `color.interaction.selection.inactive-text` #e99499 | `color.interaction.selection.inactive-bg` #420f0c | 7.02 | 4.5 | pass |
 | metadata column on the list surface | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | metadata column on the hover fill | hover | text | `color.text.muted` #bd787d | `color.interaction.hover.bg` #1c0a09 | 5.60 | 4.5 | pass |
@@ -604,7 +619,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | menu closed border | closed | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | menu checked text | checked | text | `color.text.bright` #ffa2a7 | `color.surface.raised` #160b0b | 10.10 | 4.5 | pass |
 | menu selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| menu selected outline | selected | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| menu selected outline | selected | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | shortcut hint on the raised surface | — | text | `color.text.muted` #bd787d | `color.surface.raised` #160b0b | 5.66 | 4.5 | pass |
 | disabled item text (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.surface.raised` #160b0b | 3.24 | 3 | pass |
 | item separator (decorative; role separator carries the grouping) | — | ui | `color.border.divider` #2b0e0d | `color.surface.raised` #160b0b | 1.08 | 1 | pass |
@@ -614,6 +629,8 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | number-field default text | default | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
 | number-field default border | default | ui | `color.border.control` #a3676b | `color.surface.input` #000000 | 4.71 | 3 | pass |
 | number-field hover text | hover | text | `color.text.default` #e99499 | `color.interaction.hover.bg` #1c0a09 | 8.35 | 4.5 | pass |
@@ -641,7 +658,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | pagination focus-visible text | focus-visible | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | pagination focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | pagination current text | current | text | `color.text.on-selection` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| ring on the current page when focused | current | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| ring on the current page when focused | current | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | disabled previous/next (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.surface.default` #100c0c | 3.26 | 3 | pass |
 | gap ellipsis on the panel surface | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | popover default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
@@ -649,13 +666,15 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | progress default text | default | text | `color.text.default` #e99499 | `color.surface.canvas` #000000 | 9.16 | 4.5 | pass |
 | progress default border | default | ui | `color.border.control` #a3676b | `color.surface.canvas` #000000 | 4.71 | 3 | pass |
 | progress error text | error | text | `color.status.danger.text` #f73f35 | `color.surface.canvas` #000000 | 5.72 | 4.5 | pass |
 | progress error border | error | ui | `color.status.danger.border` #e53935 | `color.surface.canvas` #000000 | 4.97 | 3 | pass |
 | label on the canvas | — | text | `color.text.bright` #ffa2a7 | `color.surface.canvas` #000000 | 10.98 | 4.5 | pass |
 | detail line on the canvas | — | text | `color.text.muted` #bd787d | `color.surface.canvas` #000000 | 6.15 | 4.5 | pass |
-| value fill against the track | — | ui | `color.action.primary.bg` #7d1310 | `color.interaction.pressed.bg` #420f0c | 1.51 | 3 | waived: the fill measures 1.51:1 against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control, 4.45:1) marks the full extent |
+| value fill against the track | — | ui | `color.action.primary.bg` #7d1310 | `color.interaction.pressed.bg` #420f0c | 1.51 | 3 | waived: the fill falls below the floor against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control) marks the full extent |
 | stripes (decorative pattern) | busy | ui | `color.action.primary.bg` #7d1310 | `color.interaction.pressed.bg` #420f0c | 1.51 | 1 | pass |
 | error fill against the track | error | ui | `color.status.danger.fill` #dc282e | `color.interaction.pressed.bg` #420f0c | 3.36 | 3 | pass |
 | radio-group default border | default | ui | `color.border.control` #a3676b | `color.surface.input` #000000 | 4.71 | 3 | pass |
@@ -685,6 +704,8 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | search-field default text | default | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
 | search-field default border | default | ui | `color.border.control` #a3676b | `color.surface.input` #000000 | 4.71 | 3 | pass |
 | search-field hover text | hover | text | `color.text.default` #e99499 | `color.interaction.hover.bg` #1c0a09 | 8.35 | 4.5 | pass |
@@ -758,7 +779,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | sidebar-nav selected+container-inactive text | selected+container-inactive | text | `color.interaction.selection.inactive-text` #e99499 | `color.interaction.selection.inactive-bg` #420f0c | 7.02 | 4.5 | pass |
 | sidebar-nav expanded text | expanded | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | sidebar-nav collapsed text | collapsed | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
-| ring on a selected item when focused | selected | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| ring on a selected item when focused | selected | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | group chevron (decorative; aria-expanded carries the state) | — | ui | `color.icon.decorative` #a3676b | `color.surface.default` #100c0c | 4.36 | 1 | pass |
 | rail edge (decorative) | — | ui | `color.border.divider` #2b0e0d | `color.surface.default` #100c0c | 1.08 | 1 | pass |
 | skeleton default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
@@ -792,7 +813,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | table hover text | hover | text | `color.text.default` #e99499 | `color.interaction.hover.bg` #1c0a09 | 8.35 | 4.5 | pass |
 | table selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | table selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| table selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| table selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | table selected+container-inactive text | selected+container-inactive | text | `color.interaction.selection.inactive-text` #e99499 | `color.interaction.selection.inactive-bg` #420f0c | 7.02 | 4.5 | pass |
 | table sorted text | sorted | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
 | table empty text | empty | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
@@ -895,6 +916,9 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | time-picker focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.input` #000000 | 4.97 | 3 | pass |
 | time-picker invalid text | invalid | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
 | time-picker invalid border | invalid | ui | `color.status.danger.border` #e53935 | `color.surface.input` #000000 | 4.97 | 3 | pass |
+| time-picker invalid+focus-visible text | invalid+focus-visible | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
+| time-picker invalid+focus-visible border | invalid+focus-visible | ui | `color.status.danger.border` #e53935 | `color.surface.input` #000000 | 4.97 | 3 | pass |
+| time-picker invalid+focus-visible outline | invalid+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.surface.input` #000000 | 10.98 | 3 | pass |
 | validation message on the canvas | — | text | `color.status.danger.text` #f73f35 | `color.surface.canvas` #000000 | 5.72 | 4.5 | pass |
 | help text on the canvas | — | text | `color.text.muted` #bd787d | `color.surface.canvas` #000000 | 6.15 | 4.5 | pass |
 | disabled text (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.interaction.disabled.bg` #160b0b | 3.24 | 3 | pass |
@@ -906,7 +930,7 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | toast default text | default | text | `color.text.default` #e99499 | `color.surface.canvas` #000000 | 9.16 | 4.5 | pass |
 | toast default border | default | ui | `color.border.overlay` #e53935 | `color.surface.canvas` #000000 | 4.97 | 3 | pass |
-| toast hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg-strong` #630f0d | 11.41 | 4.5 | pass |
+| toast hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg` #1c0a09 | 16.70 | 4.5 | pass |
 | toast focus-visible text | focus-visible | text | `color.action.tertiary.text` #e99499 | `color.surface.canvas` #000000 | 9.16 | 4.5 | pass |
 | toast focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.canvas` #000000 | 4.97 | 3 | pass |
 | toast stacked text | stacked | text | `color.text.muted` #bd787d | `color.surface.canvas` #000000 | 6.15 | 4.5 | pass |
@@ -970,6 +994,6 @@ Measured on resolved sRGB values with the WCAG 2.x formula. A pass here is a des
 | panel edge (decorative) | — | ui | `color.border.default` #531310 | `color.surface.canvas` #000000 | 1.47 | 1 | pass |
 | back button text | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.canvas` #000000 | 10.98 | 4.5 | pass |
 | back button boundary | — | ui | `color.action.secondary.border` #a3676b | `color.surface.canvas` #000000 | 4.71 | 3 | pass |
-| next button boundary | — | ui | `color.action.primary.border` #9e231f | `color.surface.canvas` #000000 | 2.71 | 3 | waived: the primary button is identified by its text at 9.28:1 on its fill and by its position; the fill measures 1.86:1 and its border 2.56:1 against the canvas, a documented property of the actions family, not of the wizard |
+| next button boundary | — | ui | `color.action.primary.border` #9e231f | `color.surface.canvas` #000000 | 2.71 | 3 | waived: the primary button is identified by its text on the fill and by its position; the low-contrast fill and border against the canvas are a documented property of the actions family |
 | ring on the next button's fill | focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 3 | pass |
 | future step text (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.surface.canvas` #000000 | 3.52 | 3 | pass |
diff --git a/exports/coverage.json b/exports/coverage.json
index 666969a50..3c88121ca 100644
--- a/exports/coverage.json
+++ b/exports/coverage.json
@@ -12,8 +12,8 @@
     "composed": {
       "specified": 6,
       "demonstrated": 6,
-      "tested": 0,
-      "testImplemented": 0,
+      "tested": 1,
+      "testImplemented": 1,
       "total": 6
     },
     "feedback": {
@@ -54,8 +54,8 @@
     "developer": {
       "specified": 5,
       "demonstrated": 5,
-      "tested": 0,
-      "testImplemented": 0,
+      "tested": 1,
+      "testImplemented": 1,
       "total": 5
     },
     "forms-advanced": {
@@ -73,8 +73,8 @@
       "maturity": "stable",
       "specified": true,
       "demonstrated": true,
-      "tested": false,
-      "testImplemented": false,
+      "tested": true,
+      "testImplemented": true,
       "states": 4
     },
     "alert": {
@@ -183,8 +183,8 @@
       "maturity": "stable",
       "specified": true,
       "demonstrated": true,
-      "tested": false,
-      "testImplemented": false,
+      "tested": true,
+      "testImplemented": true,
       "states": 6
     },
     "combobox": {
@@ -675,7 +675,7 @@
       "demonstrated": true,
       "tested": false,
       "testImplemented": false,
-      "states": 5
+      "states": 6
     },
     "timeline": {
       "family": "display",
diff --git a/exports/digests.json b/exports/digests.json
index 509e017a1..021ae8c54 100644
--- a/exports/digests.json
+++ b/exports/digests.json
@@ -4,185 +4,185 @@
   "version": "4.0.0",
   "algorithm": "sha256 over the file bytes with LF line endings, base64",
   "files": {
-    "exports/components/admin-form.brief.txt": "sha256-jwbJKT11RRI34ePCq2IZgv9dBT7kJBBLQ3Zybe5/jSo=",
-    "exports/components/admin-form.json": "sha256-eRnLywYWpnSnpPiv4MrY0aGZ7BpZEkrJG13tpAxopto=",
-    "exports/components/alert.brief.txt": "sha256-rklZ1GpI83ub+WSO7GqAjjMnrI41zBQk9LVcUM0bdKU=",
-    "exports/components/alert.json": "sha256-fY305BXYtrgqi7ICbnawYPMKZC9ff3t3yJ4I2vRbBZU=",
-    "exports/components/avatar.brief.txt": "sha256-sX1FufhH9Of0Wg7tYb1qJF2AaoZjPCEI4JKafGBQvh8=",
-    "exports/components/avatar.json": "sha256-xsnyI/5aT2MHasx+JQVNpW8boRicxTzw7yA1saDCjnY=",
-    "exports/components/badge.brief.txt": "sha256-NslILG4XhfIXyC6aLyGhrkbvklIeBFiflyClTeOCPrc=",
-    "exports/components/badge.json": "sha256-DwK1qRsb78sSqHyFijG2LGi2lFpfbsuqo/Hn0S+uvK8=",
-    "exports/components/breadcrumbs.brief.txt": "sha256-xd40jmACLs9vAhAzWiDoluy8v8TmyYZKsP+Zr9SZs2Q=",
-    "exports/components/breadcrumbs.json": "sha256-zQLfzLX17c6/w9Qc+NDjT46WgvUPizPDz+c6bFM0ghQ=",
-    "exports/components/button-group.brief.txt": "sha256-4HJE5CQp4x1LbFRLV2eYseIZbWiVzPk15tQTwmG9bKQ=",
-    "exports/components/button-group.json": "sha256-BSp7Mjeyt4XOWCQXFLRlAx8sJg9nw2GeACg8H+o0FEE=",
-    "exports/components/button.brief.txt": "sha256-LHU7uNc+/4xF0VXS2ViCRPO5cL8EtquoqPcOBKODthE=",
-    "exports/components/button.json": "sha256-4p1xTZHKv9gloF1QMtXjx9iP2eX9r9MiKd820lW31eA=",
-    "exports/components/card.brief.txt": "sha256-a1yzkDx21v3mHLSNDl4AUzF17Q5AAuEZ8C1Dj/JHjXg=",
-    "exports/components/card.json": "sha256-0yl0cP1PZEnhNuyuDaCh3Sruv1J0TcGwSnVqV6RsJwM=",
-    "exports/components/chart.brief.txt": "sha256-F8wLgwaGUYUf4JdJPwCMkQwOHrJoeWqhBMOWsnJoSmE=",
-    "exports/components/chart.json": "sha256-oeL0YqV4bPrm0R9MGZYndDvymTiIipuRNuV6dSTNAWc=",
-    "exports/components/checkbox.brief.txt": "sha256-dsJdM6l743WIHvRnxMpMbtJwPta4eJFeytTutCxRVvg=",
-    "exports/components/checkbox.json": "sha256-vKh60jFbH2dStEUVLlAcQGeDkBvWNoY+xASXA2PBvD8=",
-    "exports/components/chip.brief.txt": "sha256-MrN6hScgTkyStDvURTUbSWV8sPthyw2eW7TN51FB+aw=",
-    "exports/components/chip.json": "sha256-PUw2hBa9KFySjCvs2KFCcOHknMs3XPW4cmQMZt19Wgg=",
-    "exports/components/code-editor.brief.txt": "sha256-Pyqk4j6Gb+hpBNBUxbwgCpug4PbCqFOkjiV0SkoHnJw=",
-    "exports/components/code-editor.json": "sha256-BEBkn4aICM9agXkKXXoD/Vp2vBw9L9xzf+PskyKutps=",
-    "exports/components/combobox.brief.txt": "sha256-sDigjW+d4STxWdO04+ez10WOcsEjxzil7iji+WwHuu8=",
-    "exports/components/combobox.json": "sha256-L40mUBv9JftFkoxyytSym7B7RdgvPbzJepfORUt1D+E=",
-    "exports/components/command-palette.brief.txt": "sha256-TFWPsSRtBxSKsRvQ8n7iQvQRj2vLCoeytkAWBaLBhls=",
-    "exports/components/command-palette.json": "sha256-v+uBQa15HR8RmrV4TgtASLLL6heTJxuxXd0eLANkAr8=",
-    "exports/components/compact-dashboard.brief.txt": "sha256-Ubi85HbRa57eo2ZcPeR29fBSefMsgpQmFa2LFxEdKvg=",
-    "exports/components/compact-dashboard.json": "sha256-46PH1YfxF9fa19v3TMeXZQ7cunnFu60zupp+ilyPDX0=",
-    "exports/components/data-table.brief.txt": "sha256-LUYVi6Y/DQ+wNLwRJF1KJLs5Jkf3inDckdL99BcWGNE=",
-    "exports/components/data-table.json": "sha256-Jx64WzlClg9ZEjLxdNQtSVyug+zJB8nR/9Az2E7rjD0=",
-    "exports/components/date-picker.brief.txt": "sha256-wpASanHFamM0GppDmLIB4YFPeb/m3L1z0BHbU8aolwc=",
-    "exports/components/date-picker.json": "sha256-OUGlLh96huXjIEMtVvEA+FVyp4wx1rVR4Ycj0/4jqA0=",
-    "exports/components/description-list.brief.txt": "sha256-qt/tuSFsWeWoAR8vT6gmrHxhNKBuSif4rdzz7YJcCJY=",
-    "exports/components/description-list.json": "sha256-23PielDBv+IvWwGgCucwAFo4aOa2I3rvIyFz7s2Ppm8=",
-    "exports/components/diagnostics.brief.txt": "sha256-fDI7OSxc9CY2EGyzUuGDN9LXb6FQkIk6IxKnvfVddXU=",
-    "exports/components/diagnostics.json": "sha256-DCtdyZ1SB9wO/wcv2e7Vm9K7r7zgTZ/usd0BW+Q+Qns=",
-    "exports/components/dialog.brief.txt": "sha256-MeLS6MnOQ4F3YA+bgXxqldQr2QqGqPVEpa9MBUHNq20=",
-    "exports/components/dialog.json": "sha256-3biN4pOh3Xno1zp8fqp+lfgzhZVGDs3fvOwL+ykPLRo=",
-    "exports/components/diff-view.brief.txt": "sha256-5sEpsA7IuW4dn3BcFHpxXp7FU/Owat7eNbtWLQi5WLQ=",
-    "exports/components/diff-view.json": "sha256-8wdU0wsWaPK9CQrN7RrbVRlH5MPJzkVRaeSCXtrR62k=",
-    "exports/components/disclosure.brief.txt": "sha256-PBh8PsiZMnkrLvA7J8mdgnfXSqli0Dd91tJ/M8DIJew=",
-    "exports/components/disclosure.json": "sha256-shzZ4BJIKao0FVzzv9rmRShM3oUhpXciXiPAEYxhDUg=",
-    "exports/components/drawer.brief.txt": "sha256-cmJq98a/qV5OXb+5Iobm91BjUAb/Ez0l0FTXIi3RIAc=",
-    "exports/components/drawer.json": "sha256-QV4H85dSIRy6UAX3RNVGkFy9s2CYHMnbc+T3AozYPfY=",
-    "exports/components/editor-search.brief.txt": "sha256-oGPJsSf97swfk6I0Px+Ogx50f9iB2xvIZskWvHPV5No=",
-    "exports/components/editor-search.json": "sha256-Gs8sGmYigdm6zJuRk6PO3SZ7DTxlvC8rYJDfMFv2LGQ=",
-    "exports/components/empty-state.brief.txt": "sha256-xoJJajh7uUY4yFWQRymXX00+4V+jAsO2by2dLHf2Hqs=",
-    "exports/components/empty-state.json": "sha256-csrcqKJBMSQ83ah0QGhwEUBUJCzTxs/gmI7Fyew7SAk=",
-    "exports/components/error-state.brief.txt": "sha256-eZuKDN0F7cPX8xMwgUpDT7Am+FiA2SmyNc1Wr1T2VLk=",
-    "exports/components/error-state.json": "sha256-J2Ybn0Dp2zC6DcaNms4M95wSwRuOVbdCbSwVTtZBs3A=",
-    "exports/components/field.brief.txt": "sha256-K/lQS8fpFmYJl7DgnxQOLbEhpIe8bMu2DX+k/dmsHoo=",
-    "exports/components/field.json": "sha256-CwS97OOd/TiSLj14ddTEjLtB+YFwuFwzOeO3Dh0QQyM=",
-    "exports/components/fieldset.brief.txt": "sha256-0mxGVYfmgWha3+UoiRC/uXVQ9iQMLg8jOpko+2mdWPA=",
-    "exports/components/fieldset.json": "sha256-GoUuPV0K4ZEke68Rd5Rep63pZdJrVq0wcP5mtKWaJSA=",
-    "exports/components/file-browser.brief.txt": "sha256-S5E5Sq1wzWZW3Q0XAvmn1ZtSdAmMtYk/nzM/zxGpuoQ=",
-    "exports/components/file-browser.json": "sha256-uCnasCmeUQYFtNwJUXAO41JiYtF8z/0EFeoJLvN0jdc=",
-    "exports/components/file-input.brief.txt": "sha256-MkQDUqeNztoQb94eo3z4EbngNHxY2iL4VU4/CpIPDnQ=",
-    "exports/components/file-input.json": "sha256-WJZZCzR/rBLpBfBw8APEkufz7gWWEslnGppb/sKAni8=",
-    "exports/components/filterable-table.brief.txt": "sha256-Cjg4yAjWIfntKkK3rp4sC6ZrOivlikBZaorcJwFoCgI=",
-    "exports/components/filterable-table.json": "sha256-UFRKkL/36KWNeQWcJ7D0jfZmLoSXvaabNYfVxXy6bBY=",
-    "exports/components/form-builder.brief.txt": "sha256-jfd9rmwYNaA5t+oZaTbmA4vaGWhBXCMl6tAAGrK/Vq4=",
-    "exports/components/form-builder.json": "sha256-7EFKC4g8k2rGhehRW1TKvQgyFpElPMPvf33C83xJRNw=",
-    "exports/components/i3-window-frame.brief.txt": "sha256-HfivqWim5SQbuChd3mlgLGrxRgbQWUtbxX2FbSHlca8=",
-    "exports/components/i3-window-frame.json": "sha256-3vAv8bfDYiK/FtH4WKmbicoPHFOznTjnqcDlaNK7dt8=",
-    "exports/components/icon-button.brief.txt": "sha256-QBJjYtgZgDOaDsxE2ICHNeDpSCmmQe9+6QPC1eX5YMY=",
-    "exports/components/icon-button.json": "sha256-RJm9x6pPDFnF9Q23dbBmUb0E50a1MAx3JroWrDWKS5M=",
-    "exports/components/kbd.brief.txt": "sha256-ep5N3e/tLj5AzWsy6NHQq9D9VvhyRSLzZ/AAtkuekto=",
-    "exports/components/kbd.json": "sha256-l5Bw/Ul8RVifiaH6ooa8AlA5sakuJCoZOPQQbPduvYg=",
-    "exports/components/link.brief.txt": "sha256-+aoKEUepkO+LwMFKQSHfg6qFwtVrsYSYDIdjdlRGwOs=",
-    "exports/components/link.json": "sha256-+bhCm/tbl4N7iCv2WO4cqaTh4FIT5+MPZHd1u3z4R+s=",
-    "exports/components/list.brief.txt": "sha256-8oK96x+T4WjoZl3WUKj0usPgd0wZZm/Hv+Sat4AzFrM=",
-    "exports/components/list.json": "sha256-MpHwE+aKAPvY3CcyudupD7Lw0IjZBimlMjT6TuaS0hA=",
-    "exports/components/loading-indicator.brief.txt": "sha256-zFgayI5iWwyiRUqrCVPuBEHJZso55nUAXx+ikicaN1E=",
-    "exports/components/loading-indicator.json": "sha256-2QKuRjZVJXAgdPIO8G8Y6aJ9KGxA6o6rOiSEp/PvcYE=",
-    "exports/components/menu.brief.txt": "sha256-rQ5I6zaH4mWpqQkN1ObSUmBLu8s6RidDgZ8OiJLvoeE=",
-    "exports/components/menu.json": "sha256-muiitCeijBJjHeaTp/QQx6+IEmQOM4cWE9TrKO77e1Y=",
-    "exports/components/multiselect.brief.txt": "sha256-loE95Wt2oY55Nlvr1jUaYy9xK6Uf92kavNRUwpx7w/w=",
-    "exports/components/multiselect.json": "sha256-4KQgviHmIt6BV24Ovi6iT9bZsRYCKoLRsXv3+6e7bAI=",
-    "exports/components/number-field.brief.txt": "sha256-nFpFbOWiT1PS84To0htAJv+CS6cpE1YMEutRow3bFGY=",
-    "exports/components/number-field.json": "sha256-X2RtxXMFv9aZYoHXBehlz8Yd1gRUJGBEaxlrbbpw2dc=",
-    "exports/components/pagination.brief.txt": "sha256-x9ShiFh4URPO53miHCA7h7hf+ohLXJRZE+tPunBPWpI=",
-    "exports/components/pagination.json": "sha256-yn4BdNlOV/vtz3svE4If1Bbov1AfMfzpKdiAN6133nA=",
-    "exports/components/popover.brief.txt": "sha256-CO4SUkjvXA+x5h0be6BlGgvoM2zJ7SEJr0escROTZ1U=",
-    "exports/components/popover.json": "sha256-EqTG6rC/VtjPzPC5p+8mQCZRmyKmpPaM/gyjnu4fkBs=",
-    "exports/components/progress.brief.txt": "sha256-6W1ZNcJQH2XpKlMW5VW5ssECR/JfEB5NhaiiUox/Dq4=",
-    "exports/components/progress.json": "sha256-gQkfI0q7nw95iejhwbgBL+qnK3YC1Ti/A/fqHcUFodw=",
-    "exports/components/radio-group.brief.txt": "sha256-VFh1W2owO0rv2vP0lxRcVM6BkltbWP13x0QH17x9YTU=",
-    "exports/components/radio-group.json": "sha256-EfvnwOBwd3pdtmPY0Islp1+TgVzZNhfl2aMwwy/ct0k=",
-    "exports/components/range.brief.txt": "sha256-c6UdGCwDV/qHcsvsgfEAcwVpJiSGMlsv3POU8Uqnnew=",
-    "exports/components/range.json": "sha256-acSO0+fixlkKfME6RFcpK00skJMP8gDNPoJhx0jbz90=",
-    "exports/components/repeater.brief.txt": "sha256-GvadRIC2Mm2d/zAiAEBaoIjsjq81qseZIgPSoT47Erk=",
-    "exports/components/repeater.json": "sha256-hd5TfCdk3cefdLf2qQ2VvfCFQ0SZRelNey3Rrg+Po5s=",
-    "exports/components/search-field.brief.txt": "sha256-a4ANkSO5Rms2zHpDdcqsoXVkjOwdGjNvBlFPf8jK8pA=",
-    "exports/components/search-field.json": "sha256-mBG4aed8CuPQnOqvyyO2Ki/6P7Kd+scL0gvy8BSuh0I=",
-    "exports/components/segmented-control.brief.txt": "sha256-c2caBWX9z9rZtgmJ902mgeEsWnulDt7zecmw5VY7YSE=",
-    "exports/components/segmented-control.json": "sha256-NxtziV/OygaDGi6mc6tElJnGbo/IMXmL3Kw0oo4hbWo=",
-    "exports/components/select.brief.txt": "sha256-SSqgUQstDuH32j/2q4Lzb5ww9flG95DLFagHpoV6jns=",
-    "exports/components/select.json": "sha256-lxY8viVzwv7lZNWQb25Q710kRbpjsvAiJOCyNsswl/A=",
-    "exports/components/settings-panel.brief.txt": "sha256-9CbevnNhJSFp+J6YeUF6wFk1wS+1eYu1TAOPJGuVzyk=",
-    "exports/components/settings-panel.json": "sha256-3LcKWsvRUalOjqpJ8BWHz+NwCeeE1QPVVYKBDRl95c0=",
-    "exports/components/sidebar-nav.brief.txt": "sha256-SKPC3g84XpJQTQ4b5sapCA5RLvD+NACA09xQacV5Xeg=",
-    "exports/components/sidebar-nav.json": "sha256-DH9/5y5vhlFC2xhkSRxPHjQUItnETFyylJNlL/eQvZA=",
-    "exports/components/skeleton.brief.txt": "sha256-3nMJPclGi35+1LPNI3hd4T/RkuX8w8SNxERjXaphKPA=",
-    "exports/components/skeleton.json": "sha256-G4HrDr9EuEoWZF5QAu2me2ELZv5wbUmJ3BdH88gd2qI=",
-    "exports/components/skip-link.brief.txt": "sha256-uWgPPgVHrviYczQc2R+mCKgjG+v9o+sou/L2H4k7Rgs=",
-    "exports/components/skip-link.json": "sha256-BVXQbbhH/Yw/1w4ZH4udwjBvHR9EvpaFCklwRMaBzSY=",
-    "exports/components/switch.brief.txt": "sha256-PkD0mYGPxqAOdW5f1J8DQZesYnK0BSSIvdR6QUJLudM=",
-    "exports/components/switch.json": "sha256-oxfIG+7uoRIjqhOX8NJeLOwk96/YOO4xuorhVjcMeBA=",
-    "exports/components/table.brief.txt": "sha256-OALSm9v4rRsh9VsVmFLV2qRFRSM2nQgJDTX8QLHXIrY=",
-    "exports/components/table.json": "sha256-SuXNBFtY8Ta7SYiGP++3vK2F1R5qMDhCqm9MsNridnE=",
-    "exports/components/tabs.brief.txt": "sha256-ksrBHegd+PyVjuaCZDLYEmY8UA1QdiCNL/muJRxmvJc=",
-    "exports/components/tabs.json": "sha256-kvXJtwi+CXSlwSfuKCFXif3+f4RC46YAdX5OscNk7Ak=",
-    "exports/components/terminal.brief.txt": "sha256-1WGDa0H6DgukYvYsBMi8b0Ue10UfUwIlesYllmzMZME=",
-    "exports/components/terminal.json": "sha256-XyXr8dnvYT95prOlPBbRj5a9g68EAugPetzv9jAKXMs=",
-    "exports/components/text-field.brief.txt": "sha256-/c2NU74fJuS1fNhxw4dlm/qA+uuTKsyQnug1lMZuZDU=",
-    "exports/components/text-field.json": "sha256-Lex9v1t/4/YXIFJqbJxCwK/4nVl7XPA9D+FEjx0Rn6M=",
-    "exports/components/textarea.brief.txt": "sha256-0cOxpL4Gck+odFRgkvgepAHWj005baxIU37L8NZMymg=",
-    "exports/components/textarea.json": "sha256-qV1f7XUpYBKJjKIEnduDtBzG6e0UNZC/YT0VDcNdnCQ=",
-    "exports/components/time-picker.brief.txt": "sha256-rYH+sfgpjx3LQMjVOUZSSiFlbAhWaWStROmrndPGrCE=",
-    "exports/components/time-picker.json": "sha256-n9Z27zWFtF0b3GMeCpOO+TyPM/HbKs5YHSFtnu3R8cs=",
-    "exports/components/timeline.brief.txt": "sha256-LuiZyplAYzu0X5usb55xix3hUbc5sngfFJg7paKC6Dc=",
-    "exports/components/timeline.json": "sha256-24hw5t5rGVCeQYH/Z0ZPIcm2M/rSYkqCJmgitCPU4ok=",
-    "exports/components/toast.brief.txt": "sha256-26lfVi1CKS7W31SkMHKFaAeWR0ZsahYdtxsQAxYhPuY=",
-    "exports/components/toast.json": "sha256-iLhC7qFWAYHMbtBKnDeDEPkHEQ9tbsB6tG/Y9lswAUI=",
-    "exports/components/toolbar.brief.txt": "sha256-VPYniux9uZAkC+FpBa9mUSIWWyiRrjVotlImdYutF90=",
-    "exports/components/toolbar.json": "sha256-Qg6UH+C0B9R4jOBl1rmkgPvEiDvUlT3A/wKGVT2XgZM=",
-    "exports/components/tooltip.brief.txt": "sha256-esSGty5mPswuvR10ztOQG4Gma2XNDMRzzVyGd/cuHvE=",
-    "exports/components/tooltip.json": "sha256-imfWbgUObvGd82f5lAzHDkjiG7mAqvrJYbZQ8vEISkU=",
-    "exports/components/tree.brief.txt": "sha256-//WnJZwesy0801qRtjZN5SK7sHOoU7BZ5hJ53/PRvqE=",
-    "exports/components/tree.json": "sha256-CiayPirCLB4h2A0r+OGyq06JJ6ZVylcVctATkD2K5gg=",
-    "exports/components/wizard.brief.txt": "sha256-wNlOCnQdn3+kzh4Fu67RdSOFpkqC23SRCSdVuMDaRu0=",
-    "exports/components/wizard.json": "sha256-pLB+Xs9mSPIhdnsLvv4MEbI4ATie7GjnBP6nAhCf8N4=",
-    "exports/contrast.json": "sha256-gmovO9y68psNmmsDElXktOprdI/0LTT6JCo0/bLzCD4=",
-    "exports/contrast.md": "sha256-vSmxTKGCZHxysVYKkQNwoGdqO2prLBJVZjHwnogcY+s=",
-    "exports/coverage.json": "sha256-FeuiH5WV9i3ILuDqqcloRbL6pCMOoA3qZeoMEv1HdDU=",
+    "exports/components/admin-form.brief.txt": "sha256-96++StOq8tG9f2FrQCrJVyrpQzty3NsEZo1ItGlQHE8=",
+    "exports/components/admin-form.json": "sha256-2TlXwKoXO6zcy7Tx++Cm2rh/hlfQSzLAgg3iHIMc+A8=",
+    "exports/components/alert.brief.txt": "sha256-MFc8WaATNVYJmSxUmKHZKBoCsksKC6rpi3eKaOcI7oQ=",
+    "exports/components/alert.json": "sha256-N1aX81ExUlcbLny7o1Ps8qNiXl6FYwt1lU+/g3RZXRk=",
+    "exports/components/avatar.brief.txt": "sha256-NIlbbcpRnXaOyDtKzs5Ku/s+qmStD/W2WJgYL7WQFy8=",
+    "exports/components/avatar.json": "sha256-r07/ZuUO6VKbEMR1QWVKRz6ccLUBPqurjdKyuQPk6Tk=",
+    "exports/components/badge.brief.txt": "sha256-5TGqDMxU+V18cOu/k0bdvmE1Q0Wy9EDEhWoOYLpHtpg=",
+    "exports/components/badge.json": "sha256-8IEshqfh1RsMRDC6H9H5fptI3HHYLD9cw/xzzTKxj+w=",
+    "exports/components/breadcrumbs.brief.txt": "sha256-iq84h4RgYF5wFI/UoYW2PEzNoC4Sd+/cDqI46HakPA0=",
+    "exports/components/breadcrumbs.json": "sha256-URIM0vmWwvEIVzJIka7s4jaG4WOxMoJ8LDbFFMCMXgc=",
+    "exports/components/button-group.brief.txt": "sha256-E6qysRaVWCOUj44HF715HunwQtWd7/+3obuSkwCnJNA=",
+    "exports/components/button-group.json": "sha256-6R65U8U5eYZkgsk39bFPK5LBTxgclPJ4C5hR9un4iRM=",
+    "exports/components/button.brief.txt": "sha256-0NSXbsFlI5TBu6M/nPZuLmngxHEJXsnwh/Hremey/ho=",
+    "exports/components/button.json": "sha256-fpx3utLRj/ejAQlUy5k14oQwbTIClAI9Oi8Ogyd+d+A=",
+    "exports/components/card.brief.txt": "sha256-P9RW5PAMJFrWtVbpwIGH5cIzURuGpKjTtdA+HiCEwI0=",
+    "exports/components/card.json": "sha256-OPzyirE2R2itNnHbSarld/Un5f9ZTd+FtpvLB23HIA0=",
+    "exports/components/chart.brief.txt": "sha256-YZQ2HvfBah1vMM8ev1lyP0CEJrze9xt96OfaKaFO8CE=",
+    "exports/components/chart.json": "sha256-dNhHbR3i2kV6+CFwpXkGQAemCS63ck3AfJdvm5roZRs=",
+    "exports/components/checkbox.brief.txt": "sha256-eprftdtFOjRVr+XSQW/texODZFC+3vveiYNGRzvE9Sk=",
+    "exports/components/checkbox.json": "sha256-eF4Hc9ptoJR6MAHCFo+XvObHeyrh3JBIEF3jPCA/Yqs=",
+    "exports/components/chip.brief.txt": "sha256-8BXgKnO9F2r0DsnKRHOiSPiU2bhZdrgeT++p966JDtQ=",
+    "exports/components/chip.json": "sha256-n1NBTRmnMEk6PabtvRXepV3xpLoYwBW0nGYcoyJsc4Y=",
+    "exports/components/code-editor.brief.txt": "sha256-ADgLnAftj0/Fb4cjccZp+i7AMeUBZR/J71KswB9KdQM=",
+    "exports/components/code-editor.json": "sha256-0vAFRoRizmdpPWGWawnIIBOOTi0xhNBhg249A2QRwzA=",
+    "exports/components/combobox.brief.txt": "sha256-fxo4YcPSN9sbIoV6pXl9rYAjJukFT7iwCFNogy9K6vY=",
+    "exports/components/combobox.json": "sha256-bi9Un1R+qI1w4uAD7JwXVioAjO+TfBJ2YdPYdYRE5dE=",
+    "exports/components/command-palette.brief.txt": "sha256-UL0UQLji9K8wjqTctUybQg6U76v/drR/cz1o1nx058A=",
+    "exports/components/command-palette.json": "sha256-ca/jmbFZGiDz8eyzg399QygD+QjzRnxbezSSVLMfogE=",
+    "exports/components/compact-dashboard.brief.txt": "sha256-IlBaHQ7LAxuAuDWskKhk1vkCU0Qpxdt74JwhFWR6/fg=",
+    "exports/components/compact-dashboard.json": "sha256-5VqJEG4kjVnz9hGzkvVFe0DN7ct81WF4hgbEEvSjjK8=",
+    "exports/components/data-table.brief.txt": "sha256-OLtzEWK6WfgxVatksFQDSysU50LQ6BhVDqjvaJNF4To=",
+    "exports/components/data-table.json": "sha256-hjakBbiuffz4/zKoHVd1J4O3zOCOsiBgGk40jJzJ/aQ=",
+    "exports/components/date-picker.brief.txt": "sha256-TguYVWfYqXpL02Pz5uwBzSybJK1RddvYQiLdgP7ct94=",
+    "exports/components/date-picker.json": "sha256-C9vZnrKBtp3iyOzD1rj+O7jRttbE1UfyTQ2HO7EghiI=",
+    "exports/components/description-list.brief.txt": "sha256-xO/nPG2Ds0M10dE1CTGFC+DwdVsEybjmRMR/W36Tpls=",
+    "exports/components/description-list.json": "sha256-ZwNsiuLlqLpENEfVPAcjWTAfmA16wLYPGyXww48TyZk=",
+    "exports/components/diagnostics.brief.txt": "sha256-5EEP+/h7KOwK6pgiXNsra23tCuWPNEWp14z9g1aJsRw=",
+    "exports/components/diagnostics.json": "sha256-fD3AIMxCA0nJDmZRkE+basd1hOvDfl8G9SX41NS+Lxw=",
+    "exports/components/dialog.brief.txt": "sha256-OquH9BHCbg9D0GEmgtSlNxs28hxoCEClCvaovxF5A1Y=",
+    "exports/components/dialog.json": "sha256-whsqh1ZTeENrzZQ0fnl3XW0pylTDRVg+I9bL8baI3hc=",
+    "exports/components/diff-view.brief.txt": "sha256-8To1A/0ojg/FMzLM8r4oj3/H2SYql/fjlfZb+/5OrvQ=",
+    "exports/components/diff-view.json": "sha256-pZUhOKHPaDknpm882AYQf9AsG6cJIQMg8gLFrpb92G8=",
+    "exports/components/disclosure.brief.txt": "sha256-qYM0By9TX5yfqpM+JS7p3H5z4G8L+M9IKcX5yEDYeHQ=",
+    "exports/components/disclosure.json": "sha256-aatGXrfUPGCgYBRajZs41hMnlcq0bICILrM/PIJT5xc=",
+    "exports/components/drawer.brief.txt": "sha256-AzSxrjNSuspFwdNf+7GQmHIHP0UA+jGcFKwPl38FZsU=",
+    "exports/components/drawer.json": "sha256-qiAVCt0XgVXzhTO7QmWv7mUrU/R09RK0l3quAFvWyow=",
+    "exports/components/editor-search.brief.txt": "sha256-5CJwqenldMhyMYKXLn62MHe51yIQKn4mmaZ1daVs9Gk=",
+    "exports/components/editor-search.json": "sha256-liHOHxqi1RNapo0uCrv3B7vTJlecr1rL2hA6Ctm/TxI=",
+    "exports/components/empty-state.brief.txt": "sha256-/niRYJqcn6gOutw7eEKJ1CziZevLQY6p+cCSRa6ukBA=",
+    "exports/components/empty-state.json": "sha256-VxtNyRdmMsMGmJRJxyXE33300sOm1PU2kJT6TnzgHVk=",
+    "exports/components/error-state.brief.txt": "sha256-6lvoeFwmDiFGyWbSo75y1+GvG6XEUuJGVu1GKeWcttY=",
+    "exports/components/error-state.json": "sha256-X10UjVV18zwhpqmxs0Wh++8HrNiItZiY5tlhLaGJBgg=",
+    "exports/components/field.brief.txt": "sha256-OOHcCcYW9Y0nMa8D3ZtwhRSkt/370oBKD+8sxvs1/EE=",
+    "exports/components/field.json": "sha256-/718KnElGCw1Tx3beuyzrvUmZ8sbbuu8p2eLHjK7WaY=",
+    "exports/components/fieldset.brief.txt": "sha256-sgCKzpX4jSUOAmQD7tVnt+0fe9sUiFjzy/9cfi9KUi0=",
+    "exports/components/fieldset.json": "sha256-/zqw1AzrNjzsiuyFAH3Se8Zi8ZTF8NrNSpVqV4fFi5s=",
+    "exports/components/file-browser.brief.txt": "sha256-7ilNCpwzYbKjTTcfx+hY3njblx8F/+q6HLdspqNUGsE=",
+    "exports/components/file-browser.json": "sha256-1rW7OwM9GbrP5rg8DUSAzNeU69z+AiqGCpCL5JT1hnE=",
+    "exports/components/file-input.brief.txt": "sha256-fejkotCGd39Mz2x0hdGL23ptzn6fVZzuJY5c+Dpb9Bo=",
+    "exports/components/file-input.json": "sha256-3PC03SAUjPb+h4lFEWDSz5LhqTSVc3uNYlslPzoBdcM=",
+    "exports/components/filterable-table.brief.txt": "sha256-FRJxryZfrn44qDdL4RFbQi6PHjPdniBG4/j8vUz1LAk=",
+    "exports/components/filterable-table.json": "sha256-6EZhwGHWZSx7GFnFOSKeeuUm/4HEprM6Z+fsoR9n4Pg=",
+    "exports/components/form-builder.brief.txt": "sha256-HpSTCVi3/dSy/rebI42qnhGI+j4jfG9zjGkX7XZxyH0=",
+    "exports/components/form-builder.json": "sha256-p/VED53RX0LEzKCFJiJc9dRfvLUAj6WFePwNu8YwbsU=",
+    "exports/components/i3-window-frame.brief.txt": "sha256-GEfqhGvMtWi8GPkMDfpZPs/E2zKmzvSmWC9DcSoF+Ao=",
+    "exports/components/i3-window-frame.json": "sha256-WGOhg2oHOzWzi1hXk3THgnFRdcQnDCDAAkvURDKKil0=",
+    "exports/components/icon-button.brief.txt": "sha256-j7rvUXsGdZFhguYxu8t/KLCDaRIaebWoF6ukXgVmO2M=",
+    "exports/components/icon-button.json": "sha256-BGhJZjoqHZuxGZ4GL/LnGhVgSDt8NT0QsoSSs5Qq2Qk=",
+    "exports/components/kbd.brief.txt": "sha256-cG5EpKi6UUpQ6GGmqWc2gnetgw9Z2kcHMUAwbYwcz2g=",
+    "exports/components/kbd.json": "sha256-i38Th7/ujfsUiMDrhgFVeS3A6mWM5WCOnRJV/jT9pdU=",
+    "exports/components/link.brief.txt": "sha256-6GQbA62ZGPXvYOPe3wFkxICeAzwKuID1Ex4eqAoSpHA=",
+    "exports/components/link.json": "sha256-oeQ8Q4DDjkAzdSmYGSVoW/hx7zbE55v7sfBR/aygZfM=",
+    "exports/components/list.brief.txt": "sha256-bGCqDm5/ST0RInYh7KRd35ZpdEb/bIf7dpq/b+CqqoY=",
+    "exports/components/list.json": "sha256-VG+FKB+lQe72GAi+TbtVwGcCp8xZoSK67yLj/q1eJrE=",
+    "exports/components/loading-indicator.brief.txt": "sha256-Z7x3sh9/J6pygZYlPSA7h2cdFdKsJYk60XpLyQ0rpuI=",
+    "exports/components/loading-indicator.json": "sha256-CWs2iHLscEtxyYfdkf+wykSJq/1tg/50eG6HGzE5WvE=",
+    "exports/components/menu.brief.txt": "sha256-iCafuVuz19ouI+tLNjC4QeaOMO0ba9Oh2AQEAlwZ/vU=",
+    "exports/components/menu.json": "sha256-aI+xAhPbZERQCq3SXhRNiEflEa5nLQECZRThR+J2h+M=",
+    "exports/components/multiselect.brief.txt": "sha256-KTje7E5dAFDAtvoJSWvimRoCMMXBwZkPW//oqPH5XUo=",
+    "exports/components/multiselect.json": "sha256-9j1YnBusfBXHOX8cdz5BvBv5vpqK4vx4PdIKC8Nbmf4=",
+    "exports/components/number-field.brief.txt": "sha256-86YhoorZoEmDMSoc8XpRUPmqeS8bdVlobuQeB6XaD1Y=",
+    "exports/components/number-field.json": "sha256-n41bP6rpy2cLaRjphyTxafEeUTU8EzhfpeQsAllMJYY=",
+    "exports/components/pagination.brief.txt": "sha256-m3KsTMdgkH+yyqbpd6cGYosj03pChmEDiMyl2MfcFBI=",
+    "exports/components/pagination.json": "sha256-/gj/OtiYZ2bx2eGXlGBDWFQ2t6okaz9Fij3NQ6VIYik=",
+    "exports/components/popover.brief.txt": "sha256-Y4+Uu3J4rlqbmHxn9uWTihLPHAchR/3EnlqDoG+z+0k=",
+    "exports/components/popover.json": "sha256-zQuAADCQ6AJNdf1EEFyY4/OUMjEvKTvBdOKn8ZqZxoc=",
+    "exports/components/progress.brief.txt": "sha256-Ik019UIMHcMIHt7zEP7TAKjJqLxHM2+oqTTjwz0PrEQ=",
+    "exports/components/progress.json": "sha256-GmSVxYy5rJ5yCC94AD11VMIXremS9vS3kocXp/xq9cY=",
+    "exports/components/radio-group.brief.txt": "sha256-yzL1S3IbDt0L8RUiPUI6feaYXUPM6H5USz4CqHL+C/o=",
+    "exports/components/radio-group.json": "sha256-XKfMy84MCW/4OhLmJs9UpY5QmTfzmmfVWep27KMO9Us=",
+    "exports/components/range.brief.txt": "sha256-3jnpyHRV97tJymLdNSCUbPp3SRIzyaz5MwQp53+awf8=",
+    "exports/components/range.json": "sha256-HZROwoGsWUctb37zk5B2fb4fu9BNf3GezlbkjvgJ8eM=",
+    "exports/components/repeater.brief.txt": "sha256-B5zRQrJdPCsEggK5dIvTWAdFuZw84f0/cQVq5AzZiYc=",
+    "exports/components/repeater.json": "sha256-96FIpOJc1q8Bg9akgdH9oh9keyGyPqte+R8s6kHgBBM=",
+    "exports/components/search-field.brief.txt": "sha256-kby2Ch7lO1WUQoJagR3rQK4uHu5dh5K3bZo+pLqRHuA=",
+    "exports/components/search-field.json": "sha256-G1TUdNMKHodg90kQREtOOEe8Sc9XQQwY+JYFFDRsN7s=",
+    "exports/components/segmented-control.brief.txt": "sha256-uYCvubXp/NnunboXXlSppUCf4Z/MNBIlGTgxim861NU=",
+    "exports/components/segmented-control.json": "sha256-zQWmERfCcB8Trq7pb2IZwmk4GJ7G+XrA5OZGGZUn4v4=",
+    "exports/components/select.brief.txt": "sha256-thjv5yrE0Q2D9az80C0J7GJGd26MXwsQ2Wi6lKVqzzk=",
+    "exports/components/select.json": "sha256-+104x89k42mQE/HXROEO3H3J0LiouM+rmSaBTau7/v4=",
+    "exports/components/settings-panel.brief.txt": "sha256-RPlLtmy+hO50amLpjN3b1Hzkc33HEXpWsnCjVndoIbI=",
+    "exports/components/settings-panel.json": "sha256-MdoyYk8AhfdhaoCImjuSPyaLL1W5kq/NId7DmNRrjhM=",
+    "exports/components/sidebar-nav.brief.txt": "sha256-Wc3sTAHABrceaz0PMpxDRSYBdPd+i4ulKSxKce/xRjU=",
+    "exports/components/sidebar-nav.json": "sha256-Rai29nxmXghlJymY8EsG+2+Gb21H00wSR9670+6B/wo=",
+    "exports/components/skeleton.brief.txt": "sha256-s4MYRIvJRUhQW6/09pzimflLDSgjzycn0MZVnxSu6+s=",
+    "exports/components/skeleton.json": "sha256-e35OkgH9WCDFuP2ehaMaxlsi6lHfufOL23j1Eb8wI0w=",
+    "exports/components/skip-link.brief.txt": "sha256-m81OpFW0ZjCvHxcohmj5Z4tFzMXGPLGpzxR+5XMM15U=",
+    "exports/components/skip-link.json": "sha256-QW+6Ggs71uJPCPPD1wIMoCD3zKXwjN3iBrk1N++E388=",
+    "exports/components/switch.brief.txt": "sha256-fJncvy75DGYnk9fLui4P8UEcpMEkMvkNz59upPinbDw=",
+    "exports/components/switch.json": "sha256-srVz19F+sBbbrnK7qdTz9fOyuPamwKYU4pRJUNMGpXI=",
+    "exports/components/table.brief.txt": "sha256-YevoWr5OF77kaP9e+YaO1Y6PSdx2dSIj5gvAh6b+uTM=",
+    "exports/components/table.json": "sha256-00qzkQ7+Z1S4KyMdpqY7rpJwF1ThX9GPyF2seTosYNM=",
+    "exports/components/tabs.brief.txt": "sha256-Ga38w12lnvz49D/GWdhswk/eD0fQjZ0isnxaGTG0BIk=",
+    "exports/components/tabs.json": "sha256-azbH6ieXepaIRn9UBNXvi879wHCR+rkMD8swCB6CZIM=",
+    "exports/components/terminal.brief.txt": "sha256-ygDCMg4eRVXP3ppFeDMlU5PQQoFXFVmfGqRRlZ/LLFM=",
+    "exports/components/terminal.json": "sha256-F32f03n5TcghhAXLRQgUUVTocwOzkdFuc1RnN5xWy28=",
+    "exports/components/text-field.brief.txt": "sha256-aT3uiXt0SSbaXPShc90n77G+nb/7rE4vteDXUp16weo=",
+    "exports/components/text-field.json": "sha256-xaKWYj2Xr70t21J4K+RaHFYIJqrHERfUjkuGDynhXYI=",
+    "exports/components/textarea.brief.txt": "sha256-xTBRisNUYV7dsP175TzwYF56h/I0A6XI1q2SmbyGOO4=",
+    "exports/components/textarea.json": "sha256-+ESs+Xw17KqNhLGqYUv+TY/epN/X8kJNtB80OUFgArw=",
+    "exports/components/time-picker.brief.txt": "sha256-MMIcKqrIx5MRDT0ZbppalDGXZ5q7bTDStRx3lFFVY5E=",
+    "exports/components/time-picker.json": "sha256-m1ht0mGWX1ZZg5FWZae+jK39fgtAvEDdsZksj764liE=",
+    "exports/components/timeline.brief.txt": "sha256-pBCs3o8PRPazqueGrq8P4frjsK8w7DUain4CJCf56Q0=",
+    "exports/components/timeline.json": "sha256-slpRcVncm8yu9FK/bxDpYrOrk1gO7qd0iwSJ3d8xXV0=",
+    "exports/components/toast.brief.txt": "sha256-i0Mxemb2egHQ+8HEO+Hn6OaqhAmesgMnd6U+hJBwjhs=",
+    "exports/components/toast.json": "sha256-FQZu2cYm6Ynw2S0ItMLBr9u/rVLZMntD7Z+ht0OXBXc=",
+    "exports/components/toolbar.brief.txt": "sha256-HeLw80KIEYBfF+vNUdTOAJe8CwSv66INI0ng77f3z10=",
+    "exports/components/toolbar.json": "sha256-Cgqztp/7RUBC2gPBbPdH5XszuMRpyiQ4gwi9G+2gBFA=",
+    "exports/components/tooltip.brief.txt": "sha256-dGTsrlNGHZPaufIreDdZd7mYMO1LXVfS2CKqDMJbrpk=",
+    "exports/components/tooltip.json": "sha256-c4YtPBxsctZRCwpA1v8KZ9ih6PPBdBMUc+c7BzVXaV8=",
+    "exports/components/tree.brief.txt": "sha256-IEwTHqsL94mWuqhxOmUsufAiq4YhmDuvWhGtkfknpjU=",
+    "exports/components/tree.json": "sha256-L9jLSs+I4wsrYtPhwJ1qaONJ180iXvXGv7Rg7f6Smuk=",
+    "exports/components/wizard.brief.txt": "sha256-WW45w5JoCSvmXC6MWI/eoLdXqJuOkchfucD0i/aqYc8=",
+    "exports/components/wizard.json": "sha256-pzkWqKyyi2EQ1GXntebvKyalvYt6pusuP1aRRtiRfdw=",
+    "exports/contrast.json": "sha256-bgDQoGZ5LImALKWRD8T3v+2LfjRF0/4h5a889E9Efms=",
+    "exports/contrast.md": "sha256-BuswGRwpq/tmJ01xRSrfzRoFq/GBXlEuiHS+HCKtyNE=",
+    "exports/coverage.json": "sha256-ZR7OWZVWxuPKUohFNtcGN++eR000c0wJLbEeymEjuto=",
     "exports/figma/importer.mjs": "sha256-VXfdSuZ1eYqKIIadm4JI73kT9Or0PTracOyncWAsbnI=",
-    "exports/forms/identity.json": "sha256-ekAbK96YcmiUX2CTKjroPPKh0RpCXJcduq37KjniCJg=",
+    "exports/forms/identity.json": "sha256-n/R6B4LoUwv4BP+l0gQtnT628xZ7Lles+aAopbggMO0=",
     "exports/forms/templates.json": "sha256-k2e6tcvD0k6hUCU+l+1itDIeEGjAzxvq8bCmewl8XRg=",
     "exports/llms.txt": "sha256-Bzchjr9xc74FBFmz0hwbl9kjJBWCV/L8ZL/q+NvFOm8=",
-    "exports/patterns/validation-recovery.json": "sha256-g2g8DBXXPzt8ZbhXmahQay69CDqruxx2m6Mdvga5+UM=",
-    "exports/port-capabilities.json": "sha256-c4HHGplL/Vh7JJD8MZONBbTRbEpYe+mYNVPsVbFoRRE=",
+    "exports/patterns/validation-recovery.json": "sha256-cHCKbumgqiAPPwhL47zBWVncJtLYZAAGwZhf3Llxrj8=",
+    "exports/port-capabilities.json": "sha256-3NonQaSmytqqsMAVNYb53m45OGqD6hiCiN07GaWRJGo=",
     "exports/recipes/button/LICENSE.md": "sha256-vVf/G6WKJRqbyGZCppbAxMh+UAJdSzaPt5xWUujehyU=",
-    "exports/recipes/button/README.md": "sha256-XMR0WkxC2OZc4k7b4YbzLPO7V+3sqncs+Gp6VrWN/iA=",
-    "exports/recipes/button/component.css": "sha256-+Fn90PbGbnW0JxDH1RAdiYrVQ4FrstMA+Rq7HlAQTdU=",
-    "exports/recipes/button/example.html": "sha256-HRSLwap8t93ggusQ8BYoEAE0wPCsBWTKSY+4JGzRNa4=",
-    "exports/recipes/button/foundation.css": "sha256-gItmMJgxTkuTe8+9G3aZQviwGcJ5cQaNANEvpcyOA88=",
-    "exports/recipes/button/manifest.json": "sha256-GJJVcMHg7JCNv2EwQYzyH8HvblxYINZy4R644vtPIwo=",
-    "exports/recipes/button/markup.html": "sha256-9HjLJ98lH4SKiwVWynQKarCqWTK/+IKfcvGr6464P3c=",
+    "exports/recipes/button/README.md": "sha256-PFptO8Sfyo2yzQoMnyf7+qotgB+Uols1JNNcZdj+9bg=",
+    "exports/recipes/button/component.css": "sha256-fO1HSQ+wy0Zku8pqVotCypnOH+iDz8SAX9GxMspxA8U=",
+    "exports/recipes/button/example.html": "sha256-6Jd+ynSweVG+DO3EUHUbEUNSEbj5+6+iBzqXU4YLtIs=",
+    "exports/recipes/button/foundation.css": "sha256-jm66ZdmdAhTyMVQIMKhzVZZm/NhB5ZbLq8g3UASzy98=",
+    "exports/recipes/button/manifest.json": "sha256-3luqMDAS/1LEFotJqqkbVuuOdA/0svj5WXgA3Gd3gH0=",
+    "exports/recipes/button/markup.html": "sha256-be2Beb08aKEqIKaDsxTq8IJdSdfNPJyWS2M5aav7R7k=",
     "exports/recipes/button/template.html": "sha256-FfylFZ+qzMUFxQKnIdqJiYmC8p4F+cNxK8BJSTo8XU8=",
-    "exports/recipes/button/tokens.css": "sha256-a/TLRGPaqlzicffxz3q5+tWHlvaJ9h78GE1mHVxzp/s=",
-    "exports/recipes/button/two-instances.html": "sha256-SUuvR3ZxzWymDnwkF8BdP321ok8G/grt3ePxGLLUBS4=",
+    "exports/recipes/button/tokens.css": "sha256-AJa/NV2e+fHrwjzGqedaXaFmM54azgP/b9wytMJiVCs=",
+    "exports/recipes/button/two-instances.html": "sha256-HrqWaokDwmbQXfgRiFeyWToB617qs6c+t/UQLJs0Blk=",
     "exports/recipes/dialog/LICENSE.md": "sha256-vVf/G6WKJRqbyGZCppbAxMh+UAJdSzaPt5xWUujehyU=",
-    "exports/recipes/dialog/README.md": "sha256-AL07d5Th8y7YXkw0pqRE3C5OtnLoJoPkd0TrkVBXVd0=",
-    "exports/recipes/dialog/component.css": "sha256-Q2j1S57IHrXP3j0VijKinSjdfBgbr6nkFZHrFbkmNaI=",
-    "exports/recipes/dialog/example.html": "sha256-4W9jw4/GPrhd2VhxlZXF91t2yanib4VIWbJ18XomB0I=",
-    "exports/recipes/dialog/foundation.css": "sha256-gItmMJgxTkuTe8+9G3aZQviwGcJ5cQaNANEvpcyOA88=",
-    "exports/recipes/dialog/manifest.json": "sha256-0OWeXDl1F2+hy0Go/RDdcxHVzikxDc44qksLw/QgUh0=",
-    "exports/recipes/dialog/markup.html": "sha256-o9WIUCRlY5GUbx8+IYfcIv9JJlXBbiJBjb7jUkjNTHE=",
+    "exports/recipes/dialog/README.md": "sha256-TprCvG8noK53sTTwJVCHD0V1zx6BUW+HP7reUSdyhVk=",
+    "exports/recipes/dialog/component.css": "sha256-4rB4zaZ85zCcwBibahNlsmkeHocfBbSHfwT9xY/jwE8=",
+    "exports/recipes/dialog/example.html": "sha256-NfEbyJuZuMeGI56eQN6PW+EXPWfv8OjpngN0eMztvPQ=",
+    "exports/recipes/dialog/foundation.css": "sha256-jm66ZdmdAhTyMVQIMKhzVZZm/NhB5ZbLq8g3UASzy98=",
+    "exports/recipes/dialog/manifest.json": "sha256-HGobBl2jdTaW36simdVaI8eA4OER0LhG8r9gusVpXjI=",
+    "exports/recipes/dialog/markup.html": "sha256-3KkpFAZ9Id+n/Pmpuu4Os4Wea88fXD39tHcFoCINEDQ=",
     "exports/recipes/dialog/template.html": "sha256-ekYfQWlHu6z/dh7Wi1W3GZayMjEjxB5ru5nU7CKIqMg=",
-    "exports/recipes/dialog/tokens.css": "sha256-H4mpfW2luSqCo9S9PPrDgpevuK2OSiXDpp7+a+dFeFw=",
-    "exports/recipes/dialog/two-instances.html": "sha256-KqTTacdBcUnD+k4PYaBYhC74nsIJ1Twu1IOaDjQdoFI=",
-    "exports/recipes/index.json": "sha256-p/IWOQ+hZb2Yz3LE0RibtkwkPx2P5NR4elcQqRIkXzg=",
+    "exports/recipes/dialog/tokens.css": "sha256-8v2razLbiqxJ36LPLf8rHQG219Ns6nFnyRGKJqh/evs=",
+    "exports/recipes/dialog/two-instances.html": "sha256-g3casyVMkw4tWfmMAkD3Aq9kp+I7vebgRqjir2H/52c=",
+    "exports/recipes/index.json": "sha256-Bjyg4+xyj++k2UJAK2zNCqZh7gsiFRE9OTPBLw25VWA=",
     "exports/recipes/text-field/LICENSE.md": "sha256-vVf/G6WKJRqbyGZCppbAxMh+UAJdSzaPt5xWUujehyU=",
-    "exports/recipes/text-field/README.md": "sha256-4IdgTG0RNA0xp3IIcosxkwvq7KQdLS2Wiw1TuWxlzas=",
-    "exports/recipes/text-field/component.css": "sha256-VgGNE3+NVtPUYTJf02aIPHq3JrH5EGckSbwQealUEwU=",
-    "exports/recipes/text-field/example.html": "sha256-OT8OHppA6ssLf5OlKXOIqPBdkCDLa9lXaqsUOtT1SyQ=",
-    "exports/recipes/text-field/foundation.css": "sha256-gItmMJgxTkuTe8+9G3aZQviwGcJ5cQaNANEvpcyOA88=",
-    "exports/recipes/text-field/manifest.json": "sha256-ObZff1cu6gngs5yKnxm7yLN6N816nHa1rrKJYbiHygs=",
-    "exports/recipes/text-field/markup.html": "sha256-O4CmIRb2RUPigpgQAcre9bSpIRJxN52MMxJW4fTyhpM=",
+    "exports/recipes/text-field/README.md": "sha256-HpwPQAB3ombWhQi6qdKYU8fgIeJAxlbGFP8ovZEdVnw=",
+    "exports/recipes/text-field/component.css": "sha256-Oz8HGS0K4usbEkFFSKi93G9yUBnUass/Z8uQbOJZXNc=",
+    "exports/recipes/text-field/example.html": "sha256-bgWf7wJ491bEm4esZkZzyuL263quAotSfoygX24ZkFU=",
+    "exports/recipes/text-field/foundation.css": "sha256-jm66ZdmdAhTyMVQIMKhzVZZm/NhB5ZbLq8g3UASzy98=",
+    "exports/recipes/text-field/manifest.json": "sha256-vgWhdku9jsH/2KoHM1IevuPZ5eN1BsE46QaN1Aj/C7g=",
+    "exports/recipes/text-field/markup.html": "sha256-wARfGY6V60eMUhV8JNGMhY+EnikQvcPlSqkD5WPOULo=",
     "exports/recipes/text-field/template.html": "sha256-IlSlLS7sPC3MLqIdxMRQUP4sFnn/58lwM3AFALtdY3c=",
-    "exports/recipes/text-field/tokens.css": "sha256-EqSdsrQqs1NJVLFBDmxFtT0mbcjOiUeAx1G9cTcdpIY=",
-    "exports/recipes/text-field/two-instances.html": "sha256-Abep8m5/si0kuUu3cVGEVzcHqMN1pHkPazmjloND8J0=",
-    "exports/task-inputs.json": "sha256-fM34VhKdEfU6nCu29ZMwBdovMDMPOVKEQyub/czMMZY=",
-    "exports/theme.compact.md": "sha256-scHwaXnCWxW392O05sqziYlTLymSaro4g5hSNijAwoo=",
-    "exports/theme.full.md": "sha256-ZhUQth0gL7M8hymt4ptTqyzWa9qYtCJaoTNp6PAntUU=",
-    "exports/token-usage.json": "sha256-H96Z5c44DtcP5MzkPiReXm1oXLTe31w6fu20W6dFqHc=",
-    "exports/tokens.css": "sha256-jcet9sSAiqrRJ5JZAAPP3LQgonPGl51F58SI869KAAg=",
-    "exports/tokens.resolved.json": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY="
+    "exports/recipes/text-field/tokens.css": "sha256-Z7C9Hx+UzJAtRTBN08cB9BRDeTuCjEQr3xZyD2i0vgU=",
+    "exports/recipes/text-field/two-instances.html": "sha256-JIl9HQHQPYXg+r8lkFfC0x50KKiLyNWAwYm9mdQXGGw=",
+    "exports/task-inputs.json": "sha256-5lxC7PkVN5GUOh15VftLvs6RxdWdvGQgxB0s5dCbjJk=",
+    "exports/theme.compact.md": "sha256-wIvg24me6vAnXYzWXdBmoJsTKtrBSm7GS9yCcb8wgxc=",
+    "exports/theme.full.md": "sha256-SPX7zrH+lfKfCoCewB/nwxdDzWl0g36DSHf3B/GfBBE=",
+    "exports/token-usage.json": "sha256-v3sZK98nwkEq+AJKV5x7t6Hc3Ic2Qdqrartdf0gub4Y=",
+    "exports/tokens.css": "sha256-ePraUzvnHrCsJIZ1frkOqaHPFHo7iT+aE6wrL4ian68=",
+    "exports/tokens.resolved.json": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU="
   }
 }
diff --git a/exports/forms/identity.json b/exports/forms/identity.json
index 6a81a0aaa..039d7d20f 100644
--- a/exports/forms/identity.json
+++ b/exports/forms/identity.json
@@ -2,5 +2,5 @@
   "name": "j3w1-theme",
   "version": "4.0.0",
   "profile": "default",
-  "sourceDigest": "sha256-0pGYzXZFMWkGlbzNIlyxfInXr3Pog+Q6PuQTyO1Rbu0="
+  "sourceDigest": "sha256-9w2X6Cih03PDyOMVu4XmMrmPqHs2iwGGaq5TvafCIUw="
 }
diff --git a/exports/patterns/validation-recovery.json b/exports/patterns/validation-recovery.json
index 82a71c612..a5c19d9b9 100644
--- a/exports/patterns/validation-recovery.json
+++ b/exports/patterns/validation-recovery.json
@@ -152,17 +152,17 @@
     "name": "j3w1-theme",
     "version": "4.0.0",
     "profile": "default",
-    "sourceDigest": "sha256-0pGYzXZFMWkGlbzNIlyxfInXr3Pog+Q6PuQTyO1Rbu0="
+    "sourceDigest": "sha256-9w2X6Cih03PDyOMVu4XmMrmPqHs2iwGGaq5TvafCIUw="
   },
   "componentDigests": {
-    "admin-form": "sha256-eRnLywYWpnSnpPiv4MrY0aGZ7BpZEkrJG13tpAxopto=",
-    "alert": "sha256-fY305BXYtrgqi7ICbnawYPMKZC9ff3t3yJ4I2vRbBZU=",
-    "button": "sha256-4p1xTZHKv9gloF1QMtXjx9iP2eX9r9MiKd820lW31eA=",
-    "checkbox": "sha256-vKh60jFbH2dStEUVLlAcQGeDkBvWNoY+xASXA2PBvD8=",
-    "radio-group": "sha256-EfvnwOBwd3pdtmPY0Islp1+TgVzZNhfl2aMwwy/ct0k=",
-    "select": "sha256-lxY8viVzwv7lZNWQb25Q710kRbpjsvAiJOCyNsswl/A=",
-    "table": "sha256-SuXNBFtY8Ta7SYiGP++3vK2F1R5qMDhCqm9MsNridnE=",
-    "text-field": "sha256-Lex9v1t/4/YXIFJqbJxCwK/4nVl7XPA9D+FEjx0Rn6M=",
-    "textarea": "sha256-qV1f7XUpYBKJjKIEnduDtBzG6e0UNZC/YT0VDcNdnCQ="
+    "admin-form": "sha256-2TlXwKoXO6zcy7Tx++Cm2rh/hlfQSzLAgg3iHIMc+A8=",
+    "alert": "sha256-N1aX81ExUlcbLny7o1Ps8qNiXl6FYwt1lU+/g3RZXRk=",
+    "button": "sha256-fpx3utLRj/ejAQlUy5k14oQwbTIClAI9Oi8Ogyd+d+A=",
+    "checkbox": "sha256-eF4Hc9ptoJR6MAHCFo+XvObHeyrh3JBIEF3jPCA/Yqs=",
+    "radio-group": "sha256-XKfMy84MCW/4OhLmJs9UpY5QmTfzmmfVWep27KMO9Us=",
+    "select": "sha256-+104x89k42mQE/HXROEO3H3J0LiouM+rmSaBTau7/v4=",
+    "table": "sha256-00qzkQ7+Z1S4KyMdpqY7rpJwF1ThX9GPyF2seTosYNM=",
+    "text-field": "sha256-xaKWYj2Xr70t21J4K+RaHFYIJqrHERfUjkuGDynhXYI=",
+    "textarea": "sha256-+ESs+Xw17KqNhLGqYUv+TY/epN/X8kJNtB80OUFgArw="
   }
 }
diff --git a/exports/port-capabilities.json b/exports/port-capabilities.json
index 7ebe285f2..5940adb9f 100644
--- a/exports/port-capabilities.json
+++ b/exports/port-capabilities.json
@@ -25,7 +25,7 @@
         "status": "not verified",
         "reason": "No recorded real-import protocol bound to this subject."
       },
-      "subjectDigest": "sha256-v22QcxyCUElYae+NTFBE+DC8YOEVx3edOqcEVHymyKU=",
+      "subjectDigest": "sha256-F+2vlVTjEVjjuUUBOfvKrgrRWYYXJoa78tPiT4aVah8=",
       "evidencePath": null,
       "surfaces": {
         "appearance-settings": {
@@ -382,21 +382,25 @@
         {"role":"font.letter-spacing.terminal","nativeKeys":[],"value":"-0.5px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.caption","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.code","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.display","nativeKeys":[],"value":"40px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h1","nativeKeys":[],"value":"28px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h2","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h3","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.reading","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.terminal","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.title","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-lg","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-md","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-sm","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.caption","nativeKeys":[],"value":"11px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT has only a UI size and a code size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.code","nativeKeys":["Code font size"],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"appearance-settings","reason":"Set by Code font size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.display","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT has only a UI size and a code size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h1","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT has only a UI size and a code size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h2","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT has only a UI size and a code size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h3","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT has only a UI size and a code size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.reading","nativeKeys":["UI font size"],"value":"15px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"appearance-settings","reason":"Set by UI font size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.terminal","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT has only a UI size and a code size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.title","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT has only a UI size and a code size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-lg","nativeKeys":[],"value":"14px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT has only a UI size and a code size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-md","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT has only a UI size and a code size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-sm","nativeKeys":[],"value":"12px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"typography","reason":"ChatGPT has only a UI size and a code size.","source":"ports/chatgpt/mapping.json","spec":"spec/portability.md"},
@@ -457,7 +461,7 @@
         "status": "not verified",
         "reason": "No recorded real-import protocol bound to this subject."
       },
-      "subjectDigest": "sha256-me1Sj2tF/8GsHCFBcPzf6IBwNwe/KxVPSe8prdVhw1U=",
+      "subjectDigest": "sha256-mZSTsPqcrEueILfJGlCxv474z8ftEiq1075cE4sSMzY=",
       "evidencePath": null,
       "surfaces": {
         "theme-roles": {
@@ -790,21 +794,25 @@
         {"role":"font.letter-spacing.terminal","nativeKeys":[],"value":"-0.5px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.caption","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.code","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.display","nativeKeys":[],"value":"40px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h1","nativeKeys":[],"value":"28px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h2","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h3","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.reading","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.terminal","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.title","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-lg","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-md","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-sm","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.caption","nativeKeys":[],"value":"11px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.code","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.display","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h1","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h2","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h3","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.reading","nativeKeys":[],"value":"15px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.terminal","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.title","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-lg","nativeKeys":[],"value":"14px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-md","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-sm","nativeKeys":[],"value":"12px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-claude","reason":"Not a colour; a Claude Code theme carries colours only.","source":"ports/claude-code/mapping.json","spec":"spec/portability.md"},
@@ -863,7 +871,7 @@
         "status": "not verified",
         "reason": "No recorded real-import protocol bound to this subject."
       },
-      "subjectDigest": "sha256-YNge+khP5DG3f+D1YdaITPhf+uj9JMQ625qekhussp0=",
+      "subjectDigest": "sha256-WKYbKXp0JlgtN2meigk7CSDNC0+G1EiOJYiCV64TV8c=",
       "evidencePath": null,
       "surfaces": {
         "theme-scopes": {
@@ -1200,21 +1208,25 @@
         {"role":"font.letter-spacing.terminal","nativeKeys":[],"value":"-0.5px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.caption","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.code","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.display","nativeKeys":[],"value":"40px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h1","nativeKeys":[],"value":"28px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h2","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h3","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.reading","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.terminal","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.title","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-lg","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-md","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-sm","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.caption","nativeKeys":[],"value":"11px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.code","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.display","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h1","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h2","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h3","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.reading","nativeKeys":[],"value":"15px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.terminal","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.title","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-lg","nativeKeys":[],"value":"14px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-md","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-sm","nativeKeys":[],"value":"12px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-codex","reason":"Not a colour; a tmTheme carries colours only.","source":"ports/codex/mapping.json","spec":"spec/portability.md"},
@@ -1272,7 +1284,7 @@
         "status": "not verified",
         "reason": "No recorded real-import protocol bound to this subject."
       },
-      "subjectDigest": "sha256-ap47jQvF7xqmYy30KRPDNIttIx50q29xjNUFgboSLpQ=",
+      "subjectDigest": "sha256-lDvxf8jk3rKlEJ5zdmg+8F794O1YCKNLdbbpXWkb8/U=",
       "evidencePath": null,
       "surfaces": {
         "terminal-colours": {
@@ -1609,21 +1621,25 @@
         {"role":"font.letter-spacing.terminal","nativeKeys":[],"value":"-0.5px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"terminal-font","reason":"A Ghostty theme carries colours; Ghostty has no letter-spacing key.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.caption","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.code","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.display","nativeKeys":[],"value":"40px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h1","nativeKeys":[],"value":"28px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h2","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h3","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.reading","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.terminal","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"terminal-font","reason":"A Ghostty theme carries colours; adjust-cell-height has no exact conversion from a pixel line height.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.title","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-lg","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-md","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-sm","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.caption","nativeKeys":[],"value":"11px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.code","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.display","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h1","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h2","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h3","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.reading","nativeKeys":[],"value":"15px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.terminal","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"terminal-font","reason":"A Ghostty theme carries colours; set font-size in your own config.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.title","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-lg","nativeKeys":[],"value":"14px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-md","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-sm","nativeKeys":[],"value":"12px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/ghostty/mapping.json","spec":"spec/portability.md"},
@@ -1681,7 +1697,7 @@
         "status": "not verified",
         "reason": "No recorded real-import protocol bound to this subject."
       },
-      "subjectDigest": "sha256-4ZXQpvj4FS4DR0McKIi318xtZV8VaSGtYhHbTmqfVYQ=",
+      "subjectDigest": "sha256-FHT3goPZaDay2iLVjM6lDy7vpCyNeie0R9QFY2dG5Tk=",
       "evidencePath": null,
       "surfaces": {
         "interface": {
@@ -2027,21 +2043,25 @@
         {"role":"font.letter-spacing.terminal","nativeKeys":[],"value":"-0.5px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.letter-spacing.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.caption","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.caption: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.code","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.code: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.display","nativeKeys":[],"value":"40px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.display: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h1","nativeKeys":[],"value":"28px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.h1: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h2","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.h2: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h3","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.h3: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.reading","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.reading: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.terminal","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.title","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.title: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-lg","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.ui-lg: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-md","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.ui-md: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-sm","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.line-height.ui-sm: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.caption","nativeKeys":[],"value":"11px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.caption: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.code","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.code: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.display","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.display: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h1","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.h1: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h2","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.h2: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h3","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.h3: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.reading","nativeKeys":[],"value":"15px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.reading: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.terminal","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.title","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.title: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-lg","nativeKeys":[],"value":"14px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.ui-lg: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-md","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.ui-md: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-sm","nativeKeys":[],"value":"12px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"host-behavior","reason":"font.size.ui-sm: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":"ports/obsidian/mapping.json","spec":"spec/portability.md"},
@@ -2100,7 +2120,7 @@
         "status": "not verified",
         "reason": "No recorded real-import protocol bound to this subject."
       },
-      "subjectDigest": "sha256-M3ZJYgCkqX5Kn+P58DljhgG5enfEGNym9GaGlKrSiKI=",
+      "subjectDigest": "sha256-x63CfYp5P7a96P97rq3idBVI7gwlNk5CIvMyyXZPzeQ=",
       "evidencePath": null,
       "surfaces": {
         "terminal-colours": {
@@ -2441,21 +2461,25 @@
         {"role":"font.letter-spacing.terminal","nativeKeys":[],"value":"-0.5px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"terminal-line-height","reason":"Neither the Ghostty config nor Orca's import has a letter-spacing key.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.caption","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.code","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.display","nativeKeys":[],"value":"40px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h1","nativeKeys":[],"value":"28px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h2","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h3","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.reading","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.terminal","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"terminal-line-height","reason":"Ghostty's adjust-cell-height, which Orca imports, is relative to the font's own cell height; a pixel line height has no exact conversion. Orca keeps its line-height setting.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.title","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-lg","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-md","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-sm","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.caption","nativeKeys":[],"value":"11px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.code","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.display","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h1","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h2","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h3","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.reading","nativeKeys":[],"value":"15px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.terminal","nativeKeys":["font-size"],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"terminal-font","reason":"Written to the file's font-size key.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.title","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-lg","nativeKeys":[],"value":"14px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-md","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-sm","nativeKeys":[],"value":"12px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/orca/mapping.json","spec":"spec/portability.md"},
@@ -2519,7 +2543,7 @@
         "status": "stale",
         "reason": "Target, mapping, capabilities, tokens or artifact bytes changed since the recorded import."
       },
-      "subjectDigest": "sha256-Sny0kZ99cieROPgFigFuVMnnLwra5tHhg5nnTpyVXwg=",
+      "subjectDigest": "sha256-z7ekmrfpnJd5Bqmm2tAKWlFKuKUoL9k+1OTrRIa/E+A=",
       "evidencePath": "ports/telegram/evidence/2026-10-06-import.json",
       "surfaces": {
         "interface": {
@@ -2873,21 +2897,25 @@
         {"role":"font.letter-spacing.terminal","nativeKeys":[],"value":"-0.5px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.caption","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.code","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.display","nativeKeys":[],"value":"40px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h1","nativeKeys":[],"value":"28px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h2","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h3","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.reading","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.terminal","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.title","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-lg","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-md","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-sm","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.caption","nativeKeys":[],"value":"11px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.code","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.display","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h1","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h2","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h3","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.reading","nativeKeys":[],"value":"15px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.terminal","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.title","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-lg","nativeKeys":[],"value":"14px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-md","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-sm","nativeKeys":[],"value":"12px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"typography","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":"ports/telegram/mapping.json","spec":"spec/portability.md"},
@@ -2946,7 +2974,7 @@
         "status": "not verified",
         "reason": "No recorded real-import protocol bound to this subject."
       },
-      "subjectDigest": "sha256-Fb2GBfKclqhemyy4inGUKz7vjJEBggE/vRHPRdl0VY0=",
+      "subjectDigest": "sha256-5zeQkfrmrdz9IQiwYNhFHGxK/l88Lv5IQcK9Jpi+LCM=",
       "evidencePath": null,
       "surfaces": {
         "terminal-colours": {
@@ -3283,21 +3311,25 @@
         {"role":"font.letter-spacing.terminal","nativeKeys":[],"value":"-0.5px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"terminal-font","reason":"The application's own terminal font setting.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.caption","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.code","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.display","nativeKeys":[],"value":"40px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h1","nativeKeys":[],"value":"28px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h2","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h3","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.reading","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.terminal","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"terminal-font","reason":"The application's own terminal font setting.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.title","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-lg","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-md","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-sm","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.caption","nativeKeys":[],"value":"11px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.code","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.display","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h1","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h2","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h3","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.reading","nativeKeys":[],"value":"15px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.terminal","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"inherited","surface":"terminal-font","reason":"The application's own terminal font setting.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.title","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-lg","nativeKeys":[],"value":"14px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-md","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-sm","nativeKeys":[],"value":"12px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"out-of-scope","surface":"outside-terminal","reason":"Not a colour; a terminal theme file carries colours only.","source":"ports/warp/mapping.json","spec":"spec/portability.md"},
@@ -3355,7 +3387,7 @@
         "status": "not verified",
         "reason": "No recorded real-import protocol bound to this subject."
       },
-      "subjectDigest": "sha256-WoqG4J+X/1c2sUKSgPXjnFcYi2QAh8simGJTtu9S6nE=",
+      "subjectDigest": "sha256-SjYiFcen5HQKvrV8H/r9JWoWa22EWydhupAbfGPMVFo=",
       "evidencePath": null,
       "surfaces": {
         "desktop": {
@@ -3740,21 +3772,25 @@
         {"role":"font.letter-spacing.terminal","nativeKeys":[],"value":"-0.5px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.caption","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.code","nativeKeys":["powertoys.markdown.CODE_LINE"],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"powertoys","reason":"Token-derived CSS in the exact-admitted PowerToys Markdown rendering boundary; import and visual acceptance are separate.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.display","nativeKeys":[],"value":"40px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h1","nativeKeys":["powertoys.markdown.H1_LINE"],"value":"28px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"powertoys","reason":"Token-derived CSS in the exact-admitted PowerToys Markdown rendering boundary; import and visual acceptance are separate.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h2","nativeKeys":["powertoys.markdown.H2_LINE"],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"powertoys","reason":"Token-derived CSS in the exact-admitted PowerToys Markdown rendering boundary; import and visual acceptance are separate.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.h3","nativeKeys":["powertoys.markdown.H3_LINE"],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"powertoys","reason":"Token-derived CSS in the exact-admitted PowerToys Markdown rendering boundary; import and visual acceptance are separate.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.reading","nativeKeys":["powertoys.markdown.READING_LINE"],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"powertoys","reason":"Token-derived CSS in the exact-admitted PowerToys Markdown rendering boundary; import and visual acceptance are separate.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.terminal","nativeKeys":[],"value":"19px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.line-height.title","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-lg","nativeKeys":[],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-md","nativeKeys":[],"value":"18px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.line-height.ui-sm","nativeKeys":[],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.caption","nativeKeys":[],"value":"11px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.code","nativeKeys":["powertoys.markdown.CODE_SIZE"],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"powertoys","reason":"Token-derived CSS in the exact-admitted PowerToys Markdown rendering boundary; import and visual acceptance are separate.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.display","nativeKeys":[],"value":"32px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h1","nativeKeys":["powertoys.markdown.H1_SIZE"],"value":"20px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"powertoys","reason":"Token-derived CSS in the exact-admitted PowerToys Markdown rendering boundary; import and visual acceptance are separate.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h2","nativeKeys":["powertoys.markdown.H2_SIZE"],"value":"16px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"powertoys","reason":"Token-derived CSS in the exact-admitted PowerToys Markdown rendering boundary; import and visual acceptance are separate.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.h3","nativeKeys":["powertoys.markdown.H3_SIZE"],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"powertoys","reason":"Token-derived CSS in the exact-admitted PowerToys Markdown rendering boundary; import and visual acceptance are separate.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.reading","nativeKeys":["powertoys.markdown.READING_SIZE"],"value":"15px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"mapped","surface":"powertoys","reason":"Token-derived CSS in the exact-admitted PowerToys Markdown rendering boundary; import and visual acceptance are separate.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.terminal","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
+        {"role":"font.size.title","nativeKeys":[],"value":"24px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-lg","nativeKeys":[],"value":"14px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-md","nativeKeys":[],"value":"13px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
         {"role":"font.size.ui-sm","nativeKeys":[],"value":"12px","eligibility":{"action":"use","reason":"Use within the role's documented scope and restrictions.","decisionIds":[]},"state":"unsupported","surface":"unsupported","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":"ports/windows/mapping.json","spec":"spec/portability.md"},
diff --git a/exports/recipes/button/README.md b/exports/recipes/button/README.md
index f1e3670fa..afc9c6543 100644
--- a/exports/recipes/button/README.md
+++ b/exports/recipes/button/README.md
@@ -2,7 +2,7 @@
 
 j3w1 theme 4.0.0. Markup adapted from j3w1 UI Theme Spec, https://github.com/j3w1/theme, CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Changes: scoped instance IDs and documentation-only content removed. CSS and generator: MIT; see LICENSE.md.
 
-Version 4.0.0; profile default; source digest sha256-tLOvGHSxAnJojvXOq307DdwimfKorzgnNxhuLtFEc6k=. Pin the supplying commit and verify manifest source/file digests; the version alone does not identify a revision.
+Version 4.0.0; profile default; source digest sha256-dEM5sRKZMKr8AoTw9J/e2qFritEPNzhGaVvuBgzgANs=. Pin the supplying commit and verify manifest source/file digests; the version alone does not identify a revision.
 
 Open example.html directly, without Astro, network assets or a build step. two-instances.html demonstrates independent IDs. For integration, include tokens.css, foundation.css and component.css in that order, then markup.html. Keep .j3w1-recipe and data-density on the wrapper. The source viewer can make a fresh instance prefix; use a unique prefix for every copy and rewrite all ID references together.
 
diff --git a/exports/recipes/button/component.css b/exports/recipes/button/component.css
index 68789edf7..f4f77d403 100644
--- a/exports/recipes/button/component.css
+++ b/exports/recipes/button/component.css
@@ -19,21 +19,17 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
-.j3w1-recipe .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -46,8 +42,23 @@ SOFTWARE.
   cursor: pointer;
   outline: 0;
 }
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-.j3w1-recipe .button-secondary {
+.j3w1-recipe .button-secondary,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -79,7 +90,8 @@ SOFTWARE.
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-.j3w1-recipe .button-destructive-filled {
+.j3w1-recipe .button-destructive-filled,
+.j3w1-recipe .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -89,6 +101,49 @@ SOFTWARE.
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  .j3w1-recipe .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .j3w1-recipe .dialog-button,
+  .j3w1-recipe .empty-state-action,
+  .j3w1-recipe .file-input-button,
+  .j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 .j3w1-recipe .button-icon {
   flex: none;
@@ -106,25 +161,6 @@ SOFTWARE.
 .j3w1-recipe .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  .j3w1-recipe .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  .j3w1-recipe .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-.j3w1-recipe .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-.j3w1-recipe .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 .j3w1-recipe .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -136,16 +172,6 @@ SOFTWARE.
 .j3w1-recipe .button[aria-busy="true"] {
   cursor: progress;
 }
-.j3w1-recipe .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   .j3w1-recipe .button {
@@ -154,7 +180,4 @@ SOFTWARE.
 }
 
 @media (forced-colors: active) {
-  .j3w1-recipe .button:focus-visible {
-    outline-color: Highlight;
-  }
 }
diff --git a/exports/recipes/button/example.html b/exports/recipes/button/example.html
index ddb9586cf..f4b8e099e 100644
--- a/exports/recipes/button/example.html
+++ b/exports/recipes/button/example.html
@@ -89,7 +89,7 @@
   --radius-none: 0px;
   --space-4: 4px;
 }
-.j3w1-recipe[data-density="compact"] {
+.j3w1-recipe, .j3w1-recipe[data-density="compact"] {
   --density-control-height: var(--density-compact-control-height);
   --density-control-padding-x: var(--density-compact-control-padding-x);
 }
@@ -128,7 +128,7 @@
   line-height: var(--font-line-height-ui-md);
 }
 .j3w1-recipe, .j3w1-recipe *, .j3w1-recipe *::before, .j3w1-recipe *::after { box-sizing: border-box; }
-.j3w1-recipe button, .j3w1-recipe input, .j3w1-recipe select, .j3w1-recipe textarea { font: inherit; }
+.j3w1-recipe :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 .j3w1-recipe ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -166,21 +166,17 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
-.j3w1-recipe .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -193,8 +189,23 @@
   cursor: pointer;
   outline: 0;
 }
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-.j3w1-recipe .button-secondary {
+.j3w1-recipe .button-secondary,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -226,7 +237,8 @@
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-.j3w1-recipe .button-destructive-filled {
+.j3w1-recipe .button-destructive-filled,
+.j3w1-recipe .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -236,6 +248,49 @@
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  .j3w1-recipe .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .j3w1-recipe .dialog-button,
+  .j3w1-recipe .empty-state-action,
+  .j3w1-recipe .file-input-button,
+  .j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 .j3w1-recipe .button-icon {
   flex: none;
@@ -253,25 +308,6 @@
 .j3w1-recipe .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  .j3w1-recipe .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  .j3w1-recipe .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-.j3w1-recipe .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-.j3w1-recipe .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 .j3w1-recipe .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -283,16 +319,6 @@
 .j3w1-recipe .button[aria-busy="true"] {
   cursor: progress;
 }
-.j3w1-recipe .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   .j3w1-recipe .button {
@@ -301,13 +327,10 @@
 }
 
 @media (forced-colors: active) {
-  .j3w1-recipe .button:focus-visible {
-    outline-color: Highlight;
-  }
 }
 </style>
 </head><body>
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <button class="button" type="button">
   <svg class="button-icon" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3 8.5l3 3 7-7"></path></svg>
   <span class="button-loading" aria-hidden="true">⋯</span>
diff --git a/exports/recipes/button/foundation.css b/exports/recipes/button/foundation.css
index e6ef36567..5f3f8089d 100644
--- a/exports/recipes/button/foundation.css
+++ b/exports/recipes/button/foundation.css
@@ -28,7 +28,7 @@ SOFTWARE.
   line-height: var(--font-line-height-ui-md);
 }
 .j3w1-recipe, .j3w1-recipe *, .j3w1-recipe *::before, .j3w1-recipe *::after { box-sizing: border-box; }
-.j3w1-recipe button, .j3w1-recipe input, .j3w1-recipe select, .j3w1-recipe textarea { font: inherit; }
+.j3w1-recipe :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 .j3w1-recipe ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/exports/recipes/button/manifest.json b/exports/recipes/button/manifest.json
index c204372c3..b361441fd 100644
--- a/exports/recipes/button/manifest.json
+++ b/exports/recipes/button/manifest.json
@@ -10,20 +10,21 @@
     "files": {
       "theme.json": "sha256-4NYtr9+dtCjVshxiuC/YkB+7FzdUbd4E60lcZknHTLE=",
       "site/recipes.json": "sha256-71h0SYIOKbPRh+V/IhtLV7ZGuX90wfmeo84Rx0sm494=",
-      "scripts/lib/recipe-generator.mjs": "sha256-73WV6IUzUVgC3oyFESbgawkTU9o6mh+rKtZx8HgdZeA=",
-      "scripts/lib/recipe-css.mjs": "sha256-dA/5L61Tsn+Gkmz/syAd689Z5IyuShpluZ1NfgXcZ/c=",
+      "scripts/lib/recipe-generator.mjs": "sha256-Bx+XV4uu1Ha1lvB+SFJ08FwyhsJFXITpvg37hICAdTM=",
+      "scripts/lib/recipe-css.mjs": "sha256-pYVBZWuIylisk1RECCR78awarge02KZZwVi9+nyBwlw=",
       "scripts/lib/recipe-markup.mjs": "sha256-pxTFKTEWI1f86ScNw0e2ZfSFkdba5Zs6a7GhmMbIUUQ=",
-      "scripts/lib/markup.mjs": "sha256-/jd6ncIZAtDpNgML1FKkJn4mFJitU4mSXE9DLLvt2EI=",
-      "spec/components/button.md": "sha256-BIJgU88v/JaTsHJF+I64GyX4hw1PWYyB30y+gWG1sAU=",
+      "scripts/lib/markup.mjs": "sha256-VbP1LaVzZwTrklUjCiwB7kN/feI9Zg29+Nt1ANkDF0k=",
+      "spec/components/button.md": "sha256-9UFCI3pyeX01/OaxTSkn0azT/+jrJm8hI1VJQVyUQg4=",
       "spec/components/button.demo.html": "sha256-imCfWDUkqdDOF6H8KEdGAw0qejBcHrtPrnyTMxXvpnI=",
-      "site/src/styles/recipe-foundation.css": "sha256-siLjKAkNj84Wa0+Xz5Vf2yj9DT9k0K/Swy/cwHNrvYo=",
-      "site/src/styles/components/button.css": "sha256-cTeJ1Xhs2PQ77A1isdwO7UPvrb+RZDEArmYJ946DLWI=",
+      "site/src/styles/recipe-foundation.css": "sha256-SUmvPxZ7TNZA79xx7u87QonwpwCDBRcRzTnrTOfV8k8=",
+      "site/src/styles/partials/button.css": "sha256-1cA7h1aJlVcTlORaAJhO090/TgU8DwI74qonuV3PiyM=",
+      "site/src/styles/components/button.css": "sha256-W1TBmogBv28yqLCIQPZjnbF8SC/owyViHaNEKyOedTk=",
       "LICENSE.md": "sha256-Ih5+DpqcNXGWJX6BbYgpt6psmJi9lGcXGJzuiU7elE0=",
       "tokens/primitives.tokens.json": "sha256-cmydigBuNgi4hyQLi+3VS5JBhDQ8VMStlmUtPSSc05E=",
       "tokens/semantic.tokens.json": "sha256-jbrikW294TIEdB7rAiqlLPAiLUy2CMyLT/opZiVe/E0=",
-      "tokens/foundations.tokens.json": "sha256-/gYmJavPwEyem7mpNRhaBa8jjyuPKnSisugGky3PdCY="
+      "tokens/foundations.tokens.json": "sha256-30MQxI9wjLrZLFYJBPe1+gLUT80oRCnMDNiNoltbtjk="
     },
-    "digest": "sha256-tLOvGHSxAnJojvXOq307DdwimfKorzgnNxhuLtFEc6k=",
+    "digest": "sha256-dEM5sRKZMKr8AoTw9J/e2qFritEPNzhGaVvuBgzgANs=",
     "revisionPolicy": "Resolve these paths at the same pinned commit as this manifest. The hosted source viewer identifies its supplying commit; generated source files contain content digests, never a floating revision claim."
   },
   "dependencies": {
@@ -386,14 +387,14 @@
     "notice": "j3w1 theme 4.0.0. Markup adapted from j3w1 UI Theme Spec, https://github.com/j3w1/theme, CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Changes: scoped instance IDs and documentation-only content removed. CSS and generator: MIT; see LICENSE.md."
   },
   "files": {
-    "markup.html": "sha256-9HjLJ98lH4SKiwVWynQKarCqWTK/+IKfcvGr6464P3c=",
+    "markup.html": "sha256-be2Beb08aKEqIKaDsxTq8IJdSdfNPJyWS2M5aav7R7k=",
     "template.html": "sha256-FfylFZ+qzMUFxQKnIdqJiYmC8p4F+cNxK8BJSTo8XU8=",
-    "tokens.css": "sha256-a/TLRGPaqlzicffxz3q5+tWHlvaJ9h78GE1mHVxzp/s=",
-    "foundation.css": "sha256-gItmMJgxTkuTe8+9G3aZQviwGcJ5cQaNANEvpcyOA88=",
-    "component.css": "sha256-+Fn90PbGbnW0JxDH1RAdiYrVQ4FrstMA+Rq7HlAQTdU=",
-    "example.html": "sha256-HRSLwap8t93ggusQ8BYoEAE0wPCsBWTKSY+4JGzRNa4=",
-    "two-instances.html": "sha256-SUuvR3ZxzWymDnwkF8BdP321ok8G/grt3ePxGLLUBS4=",
+    "tokens.css": "sha256-AJa/NV2e+fHrwjzGqedaXaFmM54azgP/b9wytMJiVCs=",
+    "foundation.css": "sha256-jm66ZdmdAhTyMVQIMKhzVZZm/NhB5ZbLq8g3UASzy98=",
+    "component.css": "sha256-fO1HSQ+wy0Zku8pqVotCypnOH+iDz8SAX9GxMspxA8U=",
+    "example.html": "sha256-6Jd+ynSweVG+DO3EUHUbEUNSEbj5+6+iBzqXU4YLtIs=",
+    "two-instances.html": "sha256-HrqWaokDwmbQXfgRiFeyWToB617qs6c+t/UQLJs0Blk=",
     "LICENSE.md": "sha256-vVf/G6WKJRqbyGZCppbAxMh+UAJdSzaPt5xWUujehyU=",
-    "README.md": "sha256-XMR0WkxC2OZc4k7b4YbzLPO7V+3sqncs+Gp6VrWN/iA="
+    "README.md": "sha256-PFptO8Sfyo2yzQoMnyf7+qotgB+Uols1JNNcZdj+9bg="
   }
 }
diff --git a/exports/recipes/button/markup.html b/exports/recipes/button/markup.html
index 94c88f555..fe980199c 100644
--- a/exports/recipes/button/markup.html
+++ b/exports/recipes/button/markup.html
@@ -1,5 +1,5 @@
 <!-- j3w1 theme 4.0.0. Markup adapted from j3w1 UI Theme Spec, https://github.com/j3w1/theme, CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Changes: scoped instance IDs and documentation-only content removed. CSS and generator: MIT; see LICENSE.md. -->
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <button class="button" type="button">
   <svg class="button-icon" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3 8.5l3 3 7-7"></path></svg>
   <span class="button-loading" aria-hidden="true">⋯</span>
diff --git a/exports/recipes/button/tokens.css b/exports/recipes/button/tokens.css
index 8aa2eec46..4b4ef0ea8 100644
--- a/exports/recipes/button/tokens.css
+++ b/exports/recipes/button/tokens.css
@@ -85,7 +85,7 @@ SOFTWARE.
   --radius-none: 0px;
   --space-4: 4px;
 }
-.j3w1-recipe[data-density="compact"] {
+.j3w1-recipe, .j3w1-recipe[data-density="compact"] {
   --density-control-height: var(--density-compact-control-height);
   --density-control-padding-x: var(--density-compact-control-padding-x);
 }
diff --git a/exports/recipes/button/two-instances.html b/exports/recipes/button/two-instances.html
index 065323f81..50d5c4601 100644
--- a/exports/recipes/button/two-instances.html
+++ b/exports/recipes/button/two-instances.html
@@ -89,7 +89,7 @@
   --radius-none: 0px;
   --space-4: 4px;
 }
-.j3w1-recipe[data-density="compact"] {
+.j3w1-recipe, .j3w1-recipe[data-density="compact"] {
   --density-control-height: var(--density-compact-control-height);
   --density-control-padding-x: var(--density-compact-control-padding-x);
 }
@@ -128,7 +128,7 @@
   line-height: var(--font-line-height-ui-md);
 }
 .j3w1-recipe, .j3w1-recipe *, .j3w1-recipe *::before, .j3w1-recipe *::after { box-sizing: border-box; }
-.j3w1-recipe button, .j3w1-recipe input, .j3w1-recipe select, .j3w1-recipe textarea { font: inherit; }
+.j3w1-recipe :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 .j3w1-recipe ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -166,21 +166,17 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
-.j3w1-recipe .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -193,8 +189,23 @@
   cursor: pointer;
   outline: 0;
 }
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-.j3w1-recipe .button-secondary {
+.j3w1-recipe .button-secondary,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -226,7 +237,8 @@
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-.j3w1-recipe .button-destructive-filled {
+.j3w1-recipe .button-destructive-filled,
+.j3w1-recipe .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -236,6 +248,49 @@
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  .j3w1-recipe .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .j3w1-recipe .dialog-button,
+  .j3w1-recipe .empty-state-action,
+  .j3w1-recipe .file-input-button,
+  .j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 .j3w1-recipe .button-icon {
   flex: none;
@@ -253,25 +308,6 @@
 .j3w1-recipe .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  .j3w1-recipe .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  .j3w1-recipe .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-.j3w1-recipe .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-.j3w1-recipe .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 .j3w1-recipe .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -283,16 +319,6 @@
 .j3w1-recipe .button[aria-busy="true"] {
   cursor: progress;
 }
-.j3w1-recipe .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   .j3w1-recipe .button {
@@ -301,20 +327,17 @@
 }
 
 @media (forced-colors: active) {
-  .j3w1-recipe .button:focus-visible {
-    outline-color: Highlight;
-  }
 }
 </style>
 </head><body>
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <button class="button" type="button">
   <svg class="button-icon" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3 8.5l3 3 7-7"></path></svg>
   <span class="button-loading" aria-hidden="true">⋯</span>
   <span class="button-label">Save changes</span>
 </button>
 </div>
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <button class="button" type="button">
   <svg class="button-icon" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3 8.5l3 3 7-7"></path></svg>
   <span class="button-loading" aria-hidden="true">⋯</span>
diff --git a/exports/recipes/dialog/README.md b/exports/recipes/dialog/README.md
index 7d94f1550..5d3f9d3f8 100644
--- a/exports/recipes/dialog/README.md
+++ b/exports/recipes/dialog/README.md
@@ -2,7 +2,7 @@
 
 j3w1 theme 4.0.0. Markup adapted from j3w1 UI Theme Spec, https://github.com/j3w1/theme, CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Changes: scoped instance IDs and documentation-only content removed. CSS and generator: MIT; see LICENSE.md.
 
-Version 4.0.0; profile default; source digest sha256-O/XLRlwd5dEvDccFKU/lnvNi424Qy8nvTrinPm4hgZU=. Pin the supplying commit and verify manifest source/file digests; the version alone does not identify a revision.
+Version 4.0.0; profile default; source digest sha256-uuI/ebqf+dTaeJCC2s0y51Zadt6ty1j1N3Av9/PMuDA=. Pin the supplying commit and verify manifest source/file digests; the version alone does not identify a revision.
 
 Open example.html directly, without Astro, network assets or a build step. two-instances.html demonstrates independent IDs. For integration, include tokens.css, foundation.css and component.css in that order, then markup.html. Keep .j3w1-recipe and data-density on the wrapper. The source viewer can make a fresh instance prefix; use a unique prefix for every copy and rewrite all ID references together.
 
diff --git a/exports/recipes/dialog/component.css b/exports/recipes/dialog/component.css
index fb2a393e1..8779a3964 100644
--- a/exports/recipes/dialog/component.css
+++ b/exports/recipes/dialog/component.css
@@ -19,6 +19,192 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+.j3w1-recipe .button-secondary,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+.j3w1-recipe .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+.j3w1-recipe .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+.j3w1-recipe .button-destructive-filled,
+.j3w1-recipe .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  .j3w1-recipe .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .j3w1-recipe .dialog-button,
+  .j3w1-recipe .empty-state-action,
+  .j3w1-recipe .file-input-button,
+  .j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+.j3w1-recipe .combobox-label,
+.j3w1-recipe .dialog-field-label,
+.j3w1-recipe .field-label,
+.j3w1-recipe .fieldset-label,
+.j3w1-recipe .file-input-label,
+.j3w1-recipe .number-field-label,
+.j3w1-recipe .search-field-label,
+.j3w1-recipe .select-label,
+.j3w1-recipe .text-field-label,
+.j3w1-recipe .textarea-label,
+.j3w1-recipe .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-help,
+.j3w1-recipe .date-picker-help,
+.j3w1-recipe .dialog-field-help,
+.j3w1-recipe .fieldset-help,
+.j3w1-recipe .file-input-help,
+.j3w1-recipe .number-field-help,
+.j3w1-recipe .search-field-help,
+.j3w1-recipe .select-help,
+.j3w1-recipe .text-field-help,
+.j3w1-recipe .textarea-help,
+.j3w1-recipe .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-message,
+.j3w1-recipe .date-picker-message,
+.j3w1-recipe .file-input-message,
+.j3w1-recipe .number-field-message,
+.j3w1-recipe .radio-group-message,
+.j3w1-recipe .select-message,
+.j3w1-recipe .text-field-message,
+.j3w1-recipe .textarea-message,
+.j3w1-recipe .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-root,
+.j3w1-recipe .date-picker-root,
+.j3w1-recipe .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 .j3w1-recipe .dialog-backdrop {
   display: grid;
   place-items: center;
@@ -97,15 +283,9 @@ SOFTWARE.
   gap: var(--space-4);
 }
 
-.j3w1-recipe .dialog-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .j3w1-recipe .dialog-field-input {
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -120,13 +300,6 @@ SOFTWARE.
   outline-offset: var(--focus-offset);
 }
 
-.j3w1-recipe .dialog-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .j3w1-recipe .dialog-actions {
   display: flex;
   flex-wrap: wrap;
@@ -138,63 +311,13 @@ SOFTWARE.
 .j3w1-recipe .dialog-body .dialog-actions {
   margin-top: var(--space-4);
 }
-
-.j3w1-recipe .dialog-button {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.j3w1-recipe .dialog-button-primary {
-  background: var(--color-action-primary-bg);
-  border-color: var(--color-action-primary-border);
-  color: var(--color-action-primary-text);
-}
-
-.j3w1-recipe .dialog-button-destructive {
-  background: var(--color-action-destructive-filled-bg);
-  border-color: var(--color-action-destructive-border);
-  color: var(--color-action-destructive-filled-text);
-}
 .j3w1-recipe .dialog-close:hover {
   background: var(--color-action-tertiary-hover-bg);
 }
-
-.j3w1-recipe .dialog-button:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-.j3w1-recipe .dialog-button-primary:hover {
-  background: var(--color-action-primary-hover-bg);
-}
-
-.j3w1-recipe .dialog-button-destructive:hover {
-  background: var(--color-action-destructive-hover-bg);
-  color: var(--color-action-destructive-hover-text);
-}
-.j3w1-recipe .dialog-close:focus-visible,
-.j3w1-recipe .dialog-button:focus-visible {
+.j3w1-recipe .dialog-close:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-.j3w1-recipe .dialog-button-primary:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
-  outline-offset: var(--focus-offset);
-}
-
-.j3w1-recipe .dialog-button-destructive:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-action-destructive-filled-text);
-  outline-offset: var(--focus-offset);
-}
 .j3w1-recipe .dialog[open] {
   display: block;
 }
@@ -218,19 +341,6 @@ SOFTWARE.
   .j3w1-recipe .dialog-close:hover {
     background: transparent;
   }
-
-  .j3w1-recipe .dialog-button:hover {
-    background: var(--color-action-secondary-bg);
-  }
-
-  .j3w1-recipe .dialog-button-primary:hover {
-    background: var(--color-action-primary-bg);
-  }
-
-  .j3w1-recipe .dialog-button-destructive:hover {
-    background: var(--color-action-destructive-filled-bg);
-    color: var(--color-action-destructive-filled-text);
-  }
 }
 
 @media (max-width: 320px) {
@@ -246,7 +356,6 @@ SOFTWARE.
   }
 
   .j3w1-recipe .dialog-close:focus-visible,
-  .j3w1-recipe .dialog-button:focus-visible,
   .j3w1-recipe .dialog:focus-visible {
     outline-color: Highlight;
   }
diff --git a/exports/recipes/dialog/example.html b/exports/recipes/dialog/example.html
index 2e1df09d2..7ebabfa72 100644
--- a/exports/recipes/dialog/example.html
+++ b/exports/recipes/dialog/example.html
@@ -31,27 +31,35 @@
   --color-action-destructive-filled-text: #f9faf9;
   --color-action-destructive-hover-bg: #dc282e;
   --color-action-destructive-hover-text: #f9faf9;
+  --color-action-destructive-pressed-bg: #ae1914;
+  --color-action-destructive-text: #f73f35;
   --color-action-primary-bg: #7d1310;
   --color-action-primary-border: #9e231f;
   --color-action-primary-hover-bg: #911410;
+  --color-action-primary-pressed-bg: #630f0d;
   --color-action-primary-text: #ffa2a7;
   --color-action-secondary-bg: rgb(0 0 0 / 0%);
   --color-action-secondary-border: #a3676b;
   --color-action-secondary-hover-bg: #630f0d;
+  --color-action-secondary-pressed-bg: #420f0c;
   --color-action-secondary-text: #ffa2a7;
   --color-action-tertiary-hover-bg: #1c0a09;
   --color-action-tertiary-text: #e99499;
   --color-border-active: #e53935;
   --color-border-control: #a3676b;
+  --color-border-disabled: #7d1310;
   --color-border-overlay: #e53935;
   --color-code-caret: #e99499;
+  --color-interaction-disabled-bg: #160b0b;
   --color-interaction-focus-ring: #e53935;
   --color-interaction-focus-ring-container: #ffa2a7;
+  --color-interaction-pressed-bg: #420f0c;
   --color-interaction-text-selection-bg: #911410;
   --color-interaction-text-selection-text: #f4eeee;
   --color-primitive-alpha-black-65: rgb(0 0 0 / 65%);
   --color-primitive-alpha-transparent: rgb(0 0 0 / 0%);
   --color-primitive-ink-0: #000000;
+  --color-primitive-ink-30: #160b0b;
   --color-primitive-ink-40: #1c0a09;
   --color-primitive-ink-52: #241010;
   --color-primitive-paper-100: #f9faf9;
@@ -60,18 +68,24 @@
   --color-primitive-red-200: #7d1310;
   --color-primitive-red-350: #911410;
   --color-primitive-red-400: #9e231f;
+  --color-primitive-red-50: #420f0c;
+  --color-primitive-red-550: #ae1914;
   --color-primitive-red-750: #dc282e;
   --color-primitive-red-800: #e53935;
+  --color-primitive-red-850: #f73f35;
+  --color-primitive-rose-300: #8a5559;
   --color-primitive-rose-350: #a3676b;
   --color-primitive-rose-600: #bd787d;
   --color-primitive-rose-700: #e99499;
   --color-primitive-rose-800: #ffa2a7;
+  --color-status-danger-text: #f73f35;
   --color-surface-backdrop: rgb(0 0 0 / 65%);
   --color-surface-canvas: #000000;
   --color-surface-input: #000000;
   --color-surface-overlay: #241010;
   --color-text-bright: #ffa2a7;
   --color-text-default: #e99499;
+  --color-text-disabled: #8a5559;
   --color-text-muted: #bd787d;
   --color-text-on-action: #ffa2a7;
   --density-comfortable-control-height: 32px;
@@ -90,6 +104,7 @@
   --font-size-ui-md: 13px;
   --font-size-ui-sm: 12px;
   --font-weight-bold: 700;
+  --motion-duration-fast: 80ms;
   --motion-duration-slow: 150ms;
   --radius-none: 0px;
   --space-12: 12px;
@@ -99,7 +114,7 @@
   --space-8: 8px;
   --z-dialog: 30;
 }
-.j3w1-recipe[data-density="compact"] {
+.j3w1-recipe, .j3w1-recipe[data-density="compact"] {
   --density-control-height: var(--density-compact-control-height);
   --density-control-padding-x: var(--density-compact-control-padding-x);
 }
@@ -138,7 +153,7 @@
   line-height: var(--font-line-height-ui-md);
 }
 .j3w1-recipe, .j3w1-recipe *, .j3w1-recipe *::before, .j3w1-recipe *::after { box-sizing: border-box; }
-.j3w1-recipe button, .j3w1-recipe input, .j3w1-recipe select, .j3w1-recipe textarea { font: inherit; }
+.j3w1-recipe :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 .j3w1-recipe ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -176,6 +191,192 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+.j3w1-recipe .button-secondary,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+.j3w1-recipe .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+.j3w1-recipe .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+.j3w1-recipe .button-destructive-filled,
+.j3w1-recipe .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  .j3w1-recipe .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .j3w1-recipe .dialog-button,
+  .j3w1-recipe .empty-state-action,
+  .j3w1-recipe .file-input-button,
+  .j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+.j3w1-recipe .combobox-label,
+.j3w1-recipe .dialog-field-label,
+.j3w1-recipe .field-label,
+.j3w1-recipe .fieldset-label,
+.j3w1-recipe .file-input-label,
+.j3w1-recipe .number-field-label,
+.j3w1-recipe .search-field-label,
+.j3w1-recipe .select-label,
+.j3w1-recipe .text-field-label,
+.j3w1-recipe .textarea-label,
+.j3w1-recipe .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-help,
+.j3w1-recipe .date-picker-help,
+.j3w1-recipe .dialog-field-help,
+.j3w1-recipe .fieldset-help,
+.j3w1-recipe .file-input-help,
+.j3w1-recipe .number-field-help,
+.j3w1-recipe .search-field-help,
+.j3w1-recipe .select-help,
+.j3w1-recipe .text-field-help,
+.j3w1-recipe .textarea-help,
+.j3w1-recipe .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-message,
+.j3w1-recipe .date-picker-message,
+.j3w1-recipe .file-input-message,
+.j3w1-recipe .number-field-message,
+.j3w1-recipe .radio-group-message,
+.j3w1-recipe .select-message,
+.j3w1-recipe .text-field-message,
+.j3w1-recipe .textarea-message,
+.j3w1-recipe .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-root,
+.j3w1-recipe .date-picker-root,
+.j3w1-recipe .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 .j3w1-recipe .dialog-backdrop {
   display: grid;
   place-items: center;
@@ -254,15 +455,9 @@
   gap: var(--space-4);
 }
 
-.j3w1-recipe .dialog-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .j3w1-recipe .dialog-field-input {
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -277,13 +472,6 @@
   outline-offset: var(--focus-offset);
 }
 
-.j3w1-recipe .dialog-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .j3w1-recipe .dialog-actions {
   display: flex;
   flex-wrap: wrap;
@@ -295,63 +483,13 @@
 .j3w1-recipe .dialog-body .dialog-actions {
   margin-top: var(--space-4);
 }
-
-.j3w1-recipe .dialog-button {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.j3w1-recipe .dialog-button-primary {
-  background: var(--color-action-primary-bg);
-  border-color: var(--color-action-primary-border);
-  color: var(--color-action-primary-text);
-}
-
-.j3w1-recipe .dialog-button-destructive {
-  background: var(--color-action-destructive-filled-bg);
-  border-color: var(--color-action-destructive-border);
-  color: var(--color-action-destructive-filled-text);
-}
 .j3w1-recipe .dialog-close:hover {
   background: var(--color-action-tertiary-hover-bg);
 }
-
-.j3w1-recipe .dialog-button:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-.j3w1-recipe .dialog-button-primary:hover {
-  background: var(--color-action-primary-hover-bg);
-}
-
-.j3w1-recipe .dialog-button-destructive:hover {
-  background: var(--color-action-destructive-hover-bg);
-  color: var(--color-action-destructive-hover-text);
-}
-.j3w1-recipe .dialog-close:focus-visible,
-.j3w1-recipe .dialog-button:focus-visible {
+.j3w1-recipe .dialog-close:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-.j3w1-recipe .dialog-button-primary:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
-  outline-offset: var(--focus-offset);
-}
-
-.j3w1-recipe .dialog-button-destructive:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-action-destructive-filled-text);
-  outline-offset: var(--focus-offset);
-}
 .j3w1-recipe .dialog[open] {
   display: block;
 }
@@ -375,19 +513,6 @@
   .j3w1-recipe .dialog-close:hover {
     background: transparent;
   }
-
-  .j3w1-recipe .dialog-button:hover {
-    background: var(--color-action-secondary-bg);
-  }
-
-  .j3w1-recipe .dialog-button-primary:hover {
-    background: var(--color-action-primary-bg);
-  }
-
-  .j3w1-recipe .dialog-button-destructive:hover {
-    background: var(--color-action-destructive-filled-bg);
-    color: var(--color-action-destructive-filled-text);
-  }
 }
 
 @media (max-width: 320px) {
@@ -403,14 +528,13 @@
   }
 
   .j3w1-recipe .dialog-close:focus-visible,
-  .j3w1-recipe .dialog-button:focus-visible,
   .j3w1-recipe .dialog:focus-visible {
     outline-color: Highlight;
   }
 }
 </style>
 </head><body>
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <div class="dialog-backdrop">
   <dialog class="dialog" role="alertdialog" open="" aria-labelledby="example-recipe-dg-confirm-title" aria-describedby="example-recipe-dg-confirm-text">
     <div class="dialog-header">
diff --git a/exports/recipes/dialog/foundation.css b/exports/recipes/dialog/foundation.css
index e6ef36567..5f3f8089d 100644
--- a/exports/recipes/dialog/foundation.css
+++ b/exports/recipes/dialog/foundation.css
@@ -28,7 +28,7 @@ SOFTWARE.
   line-height: var(--font-line-height-ui-md);
 }
 .j3w1-recipe, .j3w1-recipe *, .j3w1-recipe *::before, .j3w1-recipe *::after { box-sizing: border-box; }
-.j3w1-recipe button, .j3w1-recipe input, .j3w1-recipe select, .j3w1-recipe textarea { font: inherit; }
+.j3w1-recipe :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 .j3w1-recipe ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/exports/recipes/dialog/manifest.json b/exports/recipes/dialog/manifest.json
index 03d876cb1..b09dc4fc7 100644
--- a/exports/recipes/dialog/manifest.json
+++ b/exports/recipes/dialog/manifest.json
@@ -10,20 +10,22 @@
     "files": {
       "theme.json": "sha256-4NYtr9+dtCjVshxiuC/YkB+7FzdUbd4E60lcZknHTLE=",
       "site/recipes.json": "sha256-71h0SYIOKbPRh+V/IhtLV7ZGuX90wfmeo84Rx0sm494=",
-      "scripts/lib/recipe-generator.mjs": "sha256-73WV6IUzUVgC3oyFESbgawkTU9o6mh+rKtZx8HgdZeA=",
-      "scripts/lib/recipe-css.mjs": "sha256-dA/5L61Tsn+Gkmz/syAd689Z5IyuShpluZ1NfgXcZ/c=",
+      "scripts/lib/recipe-generator.mjs": "sha256-Bx+XV4uu1Ha1lvB+SFJ08FwyhsJFXITpvg37hICAdTM=",
+      "scripts/lib/recipe-css.mjs": "sha256-pYVBZWuIylisk1RECCR78awarge02KZZwVi9+nyBwlw=",
       "scripts/lib/recipe-markup.mjs": "sha256-pxTFKTEWI1f86ScNw0e2ZfSFkdba5Zs6a7GhmMbIUUQ=",
-      "scripts/lib/markup.mjs": "sha256-/jd6ncIZAtDpNgML1FKkJn4mFJitU4mSXE9DLLvt2EI=",
-      "spec/components/dialog.md": "sha256-zKmPZU3GdJ1IPYbCO6KY7oizbzzKXSdlw3ujXc+R3bE=",
+      "scripts/lib/markup.mjs": "sha256-VbP1LaVzZwTrklUjCiwB7kN/feI9Zg29+Nt1ANkDF0k=",
+      "spec/components/dialog.md": "sha256-b2BJ7XMfsSQhSxJZxHIyIrj+hdFOaPEoaAHbQBWKOpQ=",
       "spec/components/dialog.demo.html": "sha256-m9m1JcXKJ5j3f0rxR1fojmkYvtgzUnhgWBPA0iI6cSM=",
-      "site/src/styles/recipe-foundation.css": "sha256-siLjKAkNj84Wa0+Xz5Vf2yj9DT9k0K/Swy/cwHNrvYo=",
-      "site/src/styles/components/dialog.css": "sha256-JYVSY/qlwfi+ygYj4vWspfmxxphd5Oor8V5aF0k94D8=",
+      "site/src/styles/recipe-foundation.css": "sha256-SUmvPxZ7TNZA79xx7u87QonwpwCDBRcRzTnrTOfV8k8=",
+      "site/src/styles/partials/button.css": "sha256-1cA7h1aJlVcTlORaAJhO090/TgU8DwI74qonuV3PiyM=",
+      "site/src/styles/partials/field.css": "sha256-WTZb/N3/3OT12dHJbvImC02NJBaOkGX8rQ+alodB3S0=",
+      "site/src/styles/components/dialog.css": "sha256-LsgLtsmzj87glU24kBSLeKNmpLIUDCqe3ojq5+mrXEs=",
       "LICENSE.md": "sha256-Ih5+DpqcNXGWJX6BbYgpt6psmJi9lGcXGJzuiU7elE0=",
       "tokens/primitives.tokens.json": "sha256-cmydigBuNgi4hyQLi+3VS5JBhDQ8VMStlmUtPSSc05E=",
       "tokens/semantic.tokens.json": "sha256-jbrikW294TIEdB7rAiqlLPAiLUy2CMyLT/opZiVe/E0=",
-      "tokens/foundations.tokens.json": "sha256-/gYmJavPwEyem7mpNRhaBa8jjyuPKnSisugGky3PdCY="
+      "tokens/foundations.tokens.json": "sha256-30MQxI9wjLrZLFYJBPe1+gLUT80oRCnMDNiNoltbtjk="
     },
-    "digest": "sha256-O/XLRlwd5dEvDccFKU/lnvNi424Qy8nvTrinPm4hgZU=",
+    "digest": "sha256-uuI/ebqf+dTaeJCC2s0y51Zadt6ty1j1N3Av9/PMuDA=",
     "revisionPolicy": "Resolve these paths at the same pinned commit as this manifest. The hosted source viewer identifies its supplying commit; generated source files contain content digests, never a floating revision claim."
   },
   "dependencies": {
@@ -42,27 +44,35 @@
     "color.action.destructive.filled-text",
     "color.action.destructive.hover-bg",
     "color.action.destructive.hover-text",
+    "color.action.destructive.pressed-bg",
+    "color.action.destructive.text",
     "color.action.primary.bg",
     "color.action.primary.border",
     "color.action.primary.hover-bg",
+    "color.action.primary.pressed-bg",
     "color.action.primary.text",
     "color.action.secondary.bg",
     "color.action.secondary.border",
     "color.action.secondary.hover-bg",
+    "color.action.secondary.pressed-bg",
     "color.action.secondary.text",
     "color.action.tertiary.hover-bg",
     "color.action.tertiary.text",
     "color.border.active",
     "color.border.control",
+    "color.border.disabled",
     "color.border.overlay",
     "color.code.caret",
+    "color.interaction.disabled.bg",
     "color.interaction.focus.ring",
     "color.interaction.focus.ring-container",
+    "color.interaction.pressed.bg",
     "color.interaction.text-selection.bg",
     "color.interaction.text-selection.text",
     "color.primitive.alpha.black-65",
     "color.primitive.alpha.transparent",
     "color.primitive.ink.0",
+    "color.primitive.ink.30",
     "color.primitive.ink.40",
     "color.primitive.ink.52",
     "color.primitive.paper.100",
@@ -71,18 +81,24 @@
     "color.primitive.red.200",
     "color.primitive.red.350",
     "color.primitive.red.400",
+    "color.primitive.red.50",
+    "color.primitive.red.550",
     "color.primitive.red.750",
     "color.primitive.red.800",
+    "color.primitive.red.850",
+    "color.primitive.rose.300",
     "color.primitive.rose.350",
     "color.primitive.rose.600",
     "color.primitive.rose.700",
     "color.primitive.rose.800",
+    "color.status.danger.text",
     "color.surface.backdrop",
     "color.surface.canvas",
     "color.surface.input",
     "color.surface.overlay",
     "color.text.bright",
     "color.text.default",
+    "color.text.disabled",
     "color.text.muted",
     "color.text.on-action",
     "density.comfortable.control-height",
@@ -101,6 +117,7 @@
     "font.size.ui-md",
     "font.size.ui-sm",
     "font.weight.bold",
+    "motion.duration.fast",
     "motion.duration.slow",
     "radius.none",
     "space.12",
@@ -117,29 +134,39 @@
     "color.action.destructive.filled-text",
     "color.action.destructive.hover-bg",
     "color.action.destructive.hover-text",
+    "color.action.destructive.pressed-bg",
+    "color.action.destructive.text",
     "color.action.primary.bg",
     "color.action.primary.border",
     "color.action.primary.hover-bg",
+    "color.action.primary.pressed-bg",
     "color.action.primary.text",
     "color.action.secondary.bg",
     "color.action.secondary.border",
     "color.action.secondary.hover-bg",
+    "color.action.secondary.pressed-bg",
     "color.action.secondary.text",
     "color.action.tertiary.hover-bg",
     "color.action.tertiary.text",
     "color.border.active",
     "color.border.control",
+    "color.border.disabled",
     "color.border.overlay",
     "color.code.caret",
+    "color.interaction.disabled.bg",
+    "color.interaction.focus.ring",
     "color.interaction.focus.ring-container",
+    "color.interaction.pressed.bg",
     "color.interaction.text-selection.bg",
     "color.interaction.text-selection.text",
+    "color.status.danger.text",
     "color.surface.backdrop",
     "color.surface.canvas",
     "color.surface.input",
     "color.surface.overlay",
     "color.text.bright",
     "color.text.default",
+    "color.text.disabled",
     "color.text.muted",
     "density.comfortable.control-height",
     "density.comfortable.control-padding-x",
@@ -157,6 +184,7 @@
     "font.size.ui-md",
     "font.size.ui-sm",
     "font.weight.bold",
+    "motion.duration.fast",
     "motion.duration.slow",
     "radius.none",
     "space.12",
@@ -197,6 +225,16 @@
       "reason": "Use within the role's documented scope and restrictions.",
       "decisionIds": []
     },
+    "color.action.destructive.pressed-bg": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
+    "color.action.destructive.text": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
     "color.action.primary.bg": {
       "action": "use",
       "reason": "Use within the role's documented scope and restrictions.",
@@ -212,6 +250,11 @@
       "reason": "Use within the role's documented scope and restrictions.",
       "decisionIds": []
     },
+    "color.action.primary.pressed-bg": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
     "color.action.primary.text": {
       "action": "use",
       "reason": "Use within the role's documented scope and restrictions.",
@@ -232,6 +275,11 @@
       "reason": "Use within the role's documented scope and restrictions.",
       "decisionIds": []
     },
+    "color.action.secondary.pressed-bg": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
     "color.action.secondary.text": {
       "action": "use",
       "reason": "Use within the role's documented scope and restrictions.",
@@ -259,6 +307,11 @@
         "D-007"
       ]
     },
+    "color.border.disabled": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
     "color.border.overlay": {
       "action": "use-and-report",
       "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -271,11 +324,26 @@
       "reason": "Use within the role's documented scope and restrictions.",
       "decisionIds": []
     },
+    "color.interaction.disabled.bg": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
+    "color.interaction.focus.ring": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
     "color.interaction.focus.ring-container": {
       "action": "use",
       "reason": "Use within the role's documented scope and restrictions.",
       "decisionIds": []
     },
+    "color.interaction.pressed.bg": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
     "color.interaction.text-selection.bg": {
       "action": "use",
       "reason": "Use within the role's documented scope and restrictions.",
@@ -286,6 +354,11 @@
       "reason": "Use within the role's documented scope and restrictions.",
       "decisionIds": []
     },
+    "color.status.danger.text": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
     "color.surface.backdrop": {
       "action": "use-and-report",
       "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -318,6 +391,11 @@
       "reason": "Use within the role's documented scope and restrictions.",
       "decisionIds": []
     },
+    "color.text.disabled": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
     "color.text.muted": {
       "action": "use",
       "reason": "Use within the role's documented scope and restrictions.",
@@ -403,6 +481,11 @@
       "reason": "Use within the role's documented scope and restrictions.",
       "decisionIds": []
     },
+    "motion.duration.fast": {
+      "action": "use",
+      "reason": "Use within the role's documented scope and restrictions.",
+      "decisionIds": []
+    },
     "motion.duration.slow": {
       "action": "use",
       "reason": "Use within the role's documented scope and restrictions.",
@@ -468,14 +551,14 @@
     "notice": "j3w1 theme 4.0.0. Markup adapted from j3w1 UI Theme Spec, https://github.com/j3w1/theme, CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Changes: scoped instance IDs and documentation-only content removed. CSS and generator: MIT; see LICENSE.md."
   },
   "files": {
-    "markup.html": "sha256-o9WIUCRlY5GUbx8+IYfcIv9JJlXBbiJBjb7jUkjNTHE=",
+    "markup.html": "sha256-3KkpFAZ9Id+n/Pmpuu4Os4Wea88fXD39tHcFoCINEDQ=",
     "template.html": "sha256-ekYfQWlHu6z/dh7Wi1W3GZayMjEjxB5ru5nU7CKIqMg=",
-    "tokens.css": "sha256-H4mpfW2luSqCo9S9PPrDgpevuK2OSiXDpp7+a+dFeFw=",
-    "foundation.css": "sha256-gItmMJgxTkuTe8+9G3aZQviwGcJ5cQaNANEvpcyOA88=",
-    "component.css": "sha256-Q2j1S57IHrXP3j0VijKinSjdfBgbr6nkFZHrFbkmNaI=",
-    "example.html": "sha256-4W9jw4/GPrhd2VhxlZXF91t2yanib4VIWbJ18XomB0I=",
-    "two-instances.html": "sha256-KqTTacdBcUnD+k4PYaBYhC74nsIJ1Twu1IOaDjQdoFI=",
+    "tokens.css": "sha256-8v2razLbiqxJ36LPLf8rHQG219Ns6nFnyRGKJqh/evs=",
+    "foundation.css": "sha256-jm66ZdmdAhTyMVQIMKhzVZZm/NhB5ZbLq8g3UASzy98=",
+    "component.css": "sha256-4rB4zaZ85zCcwBibahNlsmkeHocfBbSHfwT9xY/jwE8=",
+    "example.html": "sha256-NfEbyJuZuMeGI56eQN6PW+EXPWfv8OjpngN0eMztvPQ=",
+    "two-instances.html": "sha256-g3casyVMkw4tWfmMAkD3Aq9kp+I7vebgRqjir2H/52c=",
     "LICENSE.md": "sha256-vVf/G6WKJRqbyGZCppbAxMh+UAJdSzaPt5xWUujehyU=",
-    "README.md": "sha256-AL07d5Th8y7YXkw0pqRE3C5OtnLoJoPkd0TrkVBXVd0="
+    "README.md": "sha256-TprCvG8noK53sTTwJVCHD0V1zx6BUW+HP7reUSdyhVk="
   }
 }
diff --git a/exports/recipes/dialog/markup.html b/exports/recipes/dialog/markup.html
index fac7d47f4..1e2271b82 100644
--- a/exports/recipes/dialog/markup.html
+++ b/exports/recipes/dialog/markup.html
@@ -1,5 +1,5 @@
 <!-- j3w1 theme 4.0.0. Markup adapted from j3w1 UI Theme Spec, https://github.com/j3w1/theme, CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Changes: scoped instance IDs and documentation-only content removed. CSS and generator: MIT; see LICENSE.md. -->
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <div class="dialog-backdrop">
   <dialog class="dialog" role="alertdialog" open="" aria-labelledby="example-recipe-dg-confirm-title" aria-describedby="example-recipe-dg-confirm-text">
     <div class="dialog-header">
diff --git a/exports/recipes/dialog/tokens.css b/exports/recipes/dialog/tokens.css
index 787eeb5f1..e2ac070d5 100644
--- a/exports/recipes/dialog/tokens.css
+++ b/exports/recipes/dialog/tokens.css
@@ -27,27 +27,35 @@ SOFTWARE.
   --color-action-destructive-filled-text: #f9faf9;
   --color-action-destructive-hover-bg: #dc282e;
   --color-action-destructive-hover-text: #f9faf9;
+  --color-action-destructive-pressed-bg: #ae1914;
+  --color-action-destructive-text: #f73f35;
   --color-action-primary-bg: #7d1310;
   --color-action-primary-border: #9e231f;
   --color-action-primary-hover-bg: #911410;
+  --color-action-primary-pressed-bg: #630f0d;
   --color-action-primary-text: #ffa2a7;
   --color-action-secondary-bg: rgb(0 0 0 / 0%);
   --color-action-secondary-border: #a3676b;
   --color-action-secondary-hover-bg: #630f0d;
+  --color-action-secondary-pressed-bg: #420f0c;
   --color-action-secondary-text: #ffa2a7;
   --color-action-tertiary-hover-bg: #1c0a09;
   --color-action-tertiary-text: #e99499;
   --color-border-active: #e53935;
   --color-border-control: #a3676b;
+  --color-border-disabled: #7d1310;
   --color-border-overlay: #e53935;
   --color-code-caret: #e99499;
+  --color-interaction-disabled-bg: #160b0b;
   --color-interaction-focus-ring: #e53935;
   --color-interaction-focus-ring-container: #ffa2a7;
+  --color-interaction-pressed-bg: #420f0c;
   --color-interaction-text-selection-bg: #911410;
   --color-interaction-text-selection-text: #f4eeee;
   --color-primitive-alpha-black-65: rgb(0 0 0 / 65%);
   --color-primitive-alpha-transparent: rgb(0 0 0 / 0%);
   --color-primitive-ink-0: #000000;
+  --color-primitive-ink-30: #160b0b;
   --color-primitive-ink-40: #1c0a09;
   --color-primitive-ink-52: #241010;
   --color-primitive-paper-100: #f9faf9;
@@ -56,18 +64,24 @@ SOFTWARE.
   --color-primitive-red-200: #7d1310;
   --color-primitive-red-350: #911410;
   --color-primitive-red-400: #9e231f;
+  --color-primitive-red-50: #420f0c;
+  --color-primitive-red-550: #ae1914;
   --color-primitive-red-750: #dc282e;
   --color-primitive-red-800: #e53935;
+  --color-primitive-red-850: #f73f35;
+  --color-primitive-rose-300: #8a5559;
   --color-primitive-rose-350: #a3676b;
   --color-primitive-rose-600: #bd787d;
   --color-primitive-rose-700: #e99499;
   --color-primitive-rose-800: #ffa2a7;
+  --color-status-danger-text: #f73f35;
   --color-surface-backdrop: rgb(0 0 0 / 65%);
   --color-surface-canvas: #000000;
   --color-surface-input: #000000;
   --color-surface-overlay: #241010;
   --color-text-bright: #ffa2a7;
   --color-text-default: #e99499;
+  --color-text-disabled: #8a5559;
   --color-text-muted: #bd787d;
   --color-text-on-action: #ffa2a7;
   --density-comfortable-control-height: 32px;
@@ -86,6 +100,7 @@ SOFTWARE.
   --font-size-ui-md: 13px;
   --font-size-ui-sm: 12px;
   --font-weight-bold: 700;
+  --motion-duration-fast: 80ms;
   --motion-duration-slow: 150ms;
   --radius-none: 0px;
   --space-12: 12px;
@@ -95,7 +110,7 @@ SOFTWARE.
   --space-8: 8px;
   --z-dialog: 30;
 }
-.j3w1-recipe[data-density="compact"] {
+.j3w1-recipe, .j3w1-recipe[data-density="compact"] {
   --density-control-height: var(--density-compact-control-height);
   --density-control-padding-x: var(--density-compact-control-padding-x);
 }
diff --git a/exports/recipes/dialog/two-instances.html b/exports/recipes/dialog/two-instances.html
index 8b099c5ab..bbfbae65d 100644
--- a/exports/recipes/dialog/two-instances.html
+++ b/exports/recipes/dialog/two-instances.html
@@ -31,27 +31,35 @@
   --color-action-destructive-filled-text: #f9faf9;
   --color-action-destructive-hover-bg: #dc282e;
   --color-action-destructive-hover-text: #f9faf9;
+  --color-action-destructive-pressed-bg: #ae1914;
+  --color-action-destructive-text: #f73f35;
   --color-action-primary-bg: #7d1310;
   --color-action-primary-border: #9e231f;
   --color-action-primary-hover-bg: #911410;
+  --color-action-primary-pressed-bg: #630f0d;
   --color-action-primary-text: #ffa2a7;
   --color-action-secondary-bg: rgb(0 0 0 / 0%);
   --color-action-secondary-border: #a3676b;
   --color-action-secondary-hover-bg: #630f0d;
+  --color-action-secondary-pressed-bg: #420f0c;
   --color-action-secondary-text: #ffa2a7;
   --color-action-tertiary-hover-bg: #1c0a09;
   --color-action-tertiary-text: #e99499;
   --color-border-active: #e53935;
   --color-border-control: #a3676b;
+  --color-border-disabled: #7d1310;
   --color-border-overlay: #e53935;
   --color-code-caret: #e99499;
+  --color-interaction-disabled-bg: #160b0b;
   --color-interaction-focus-ring: #e53935;
   --color-interaction-focus-ring-container: #ffa2a7;
+  --color-interaction-pressed-bg: #420f0c;
   --color-interaction-text-selection-bg: #911410;
   --color-interaction-text-selection-text: #f4eeee;
   --color-primitive-alpha-black-65: rgb(0 0 0 / 65%);
   --color-primitive-alpha-transparent: rgb(0 0 0 / 0%);
   --color-primitive-ink-0: #000000;
+  --color-primitive-ink-30: #160b0b;
   --color-primitive-ink-40: #1c0a09;
   --color-primitive-ink-52: #241010;
   --color-primitive-paper-100: #f9faf9;
@@ -60,18 +68,24 @@
   --color-primitive-red-200: #7d1310;
   --color-primitive-red-350: #911410;
   --color-primitive-red-400: #9e231f;
+  --color-primitive-red-50: #420f0c;
+  --color-primitive-red-550: #ae1914;
   --color-primitive-red-750: #dc282e;
   --color-primitive-red-800: #e53935;
+  --color-primitive-red-850: #f73f35;
+  --color-primitive-rose-300: #8a5559;
   --color-primitive-rose-350: #a3676b;
   --color-primitive-rose-600: #bd787d;
   --color-primitive-rose-700: #e99499;
   --color-primitive-rose-800: #ffa2a7;
+  --color-status-danger-text: #f73f35;
   --color-surface-backdrop: rgb(0 0 0 / 65%);
   --color-surface-canvas: #000000;
   --color-surface-input: #000000;
   --color-surface-overlay: #241010;
   --color-text-bright: #ffa2a7;
   --color-text-default: #e99499;
+  --color-text-disabled: #8a5559;
   --color-text-muted: #bd787d;
   --color-text-on-action: #ffa2a7;
   --density-comfortable-control-height: 32px;
@@ -90,6 +104,7 @@
   --font-size-ui-md: 13px;
   --font-size-ui-sm: 12px;
   --font-weight-bold: 700;
+  --motion-duration-fast: 80ms;
   --motion-duration-slow: 150ms;
   --radius-none: 0px;
   --space-12: 12px;
@@ -99,7 +114,7 @@
   --space-8: 8px;
   --z-dialog: 30;
 }
-.j3w1-recipe[data-density="compact"] {
+.j3w1-recipe, .j3w1-recipe[data-density="compact"] {
   --density-control-height: var(--density-compact-control-height);
   --density-control-padding-x: var(--density-compact-control-padding-x);
 }
@@ -138,7 +153,7 @@
   line-height: var(--font-line-height-ui-md);
 }
 .j3w1-recipe, .j3w1-recipe *, .j3w1-recipe *::before, .j3w1-recipe *::after { box-sizing: border-box; }
-.j3w1-recipe button, .j3w1-recipe input, .j3w1-recipe select, .j3w1-recipe textarea { font: inherit; }
+.j3w1-recipe :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 .j3w1-recipe ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -176,6 +191,192 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+.j3w1-recipe .button,
+.j3w1-recipe .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+.j3w1-recipe .button-secondary,
+.j3w1-recipe .dialog-button,
+.j3w1-recipe .empty-state-action,
+.j3w1-recipe .file-input-button,
+.j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+.j3w1-recipe .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+.j3w1-recipe .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+.j3w1-recipe .button-destructive-filled,
+.j3w1-recipe .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  .j3w1-recipe .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+.j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .j3w1-recipe .dialog-button,
+  .j3w1-recipe .empty-state-action,
+  .j3w1-recipe .file-input-button,
+  .j3w1-recipe button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  .j3w1-recipe :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+.j3w1-recipe .combobox-label,
+.j3w1-recipe .dialog-field-label,
+.j3w1-recipe .field-label,
+.j3w1-recipe .fieldset-label,
+.j3w1-recipe .file-input-label,
+.j3w1-recipe .number-field-label,
+.j3w1-recipe .search-field-label,
+.j3w1-recipe .select-label,
+.j3w1-recipe .text-field-label,
+.j3w1-recipe .textarea-label,
+.j3w1-recipe .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-help,
+.j3w1-recipe .date-picker-help,
+.j3w1-recipe .dialog-field-help,
+.j3w1-recipe .fieldset-help,
+.j3w1-recipe .file-input-help,
+.j3w1-recipe .number-field-help,
+.j3w1-recipe .search-field-help,
+.j3w1-recipe .select-help,
+.j3w1-recipe .text-field-help,
+.j3w1-recipe .textarea-help,
+.j3w1-recipe .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-message,
+.j3w1-recipe .date-picker-message,
+.j3w1-recipe .file-input-message,
+.j3w1-recipe .number-field-message,
+.j3w1-recipe .radio-group-message,
+.j3w1-recipe .select-message,
+.j3w1-recipe .text-field-message,
+.j3w1-recipe .textarea-message,
+.j3w1-recipe .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-root,
+.j3w1-recipe .date-picker-root,
+.j3w1-recipe .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 .j3w1-recipe .dialog-backdrop {
   display: grid;
   place-items: center;
@@ -254,15 +455,9 @@
   gap: var(--space-4);
 }
 
-.j3w1-recipe .dialog-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .j3w1-recipe .dialog-field-input {
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -277,13 +472,6 @@
   outline-offset: var(--focus-offset);
 }
 
-.j3w1-recipe .dialog-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .j3w1-recipe .dialog-actions {
   display: flex;
   flex-wrap: wrap;
@@ -295,63 +483,13 @@
 .j3w1-recipe .dialog-body .dialog-actions {
   margin-top: var(--space-4);
 }
-
-.j3w1-recipe .dialog-button {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.j3w1-recipe .dialog-button-primary {
-  background: var(--color-action-primary-bg);
-  border-color: var(--color-action-primary-border);
-  color: var(--color-action-primary-text);
-}
-
-.j3w1-recipe .dialog-button-destructive {
-  background: var(--color-action-destructive-filled-bg);
-  border-color: var(--color-action-destructive-border);
-  color: var(--color-action-destructive-filled-text);
-}
 .j3w1-recipe .dialog-close:hover {
   background: var(--color-action-tertiary-hover-bg);
 }
-
-.j3w1-recipe .dialog-button:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-.j3w1-recipe .dialog-button-primary:hover {
-  background: var(--color-action-primary-hover-bg);
-}
-
-.j3w1-recipe .dialog-button-destructive:hover {
-  background: var(--color-action-destructive-hover-bg);
-  color: var(--color-action-destructive-hover-text);
-}
-.j3w1-recipe .dialog-close:focus-visible,
-.j3w1-recipe .dialog-button:focus-visible {
+.j3w1-recipe .dialog-close:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-.j3w1-recipe .dialog-button-primary:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
-  outline-offset: var(--focus-offset);
-}
-
-.j3w1-recipe .dialog-button-destructive:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-action-destructive-filled-text);
-  outline-offset: var(--focus-offset);
-}
 .j3w1-recipe .dialog[open] {
   display: block;
 }
@@ -375,19 +513,6 @@
   .j3w1-recipe .dialog-close:hover {
     background: transparent;
   }
-
-  .j3w1-recipe .dialog-button:hover {
-    background: var(--color-action-secondary-bg);
-  }
-
-  .j3w1-recipe .dialog-button-primary:hover {
-    background: var(--color-action-primary-bg);
-  }
-
-  .j3w1-recipe .dialog-button-destructive:hover {
-    background: var(--color-action-destructive-filled-bg);
-    color: var(--color-action-destructive-filled-text);
-  }
 }
 
 @media (max-width: 320px) {
@@ -403,14 +528,13 @@
   }
 
   .j3w1-recipe .dialog-close:focus-visible,
-  .j3w1-recipe .dialog-button:focus-visible,
   .j3w1-recipe .dialog:focus-visible {
     outline-color: Highlight;
   }
 }
 </style>
 </head><body>
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <div class="dialog-backdrop">
   <dialog class="dialog" role="alertdialog" open="" aria-labelledby="first-recipe-dg-confirm-title" aria-describedby="first-recipe-dg-confirm-text">
     <div class="dialog-header">
@@ -428,7 +552,7 @@ <h2 class="dialog-title" id="first-recipe-dg-confirm-title">Save changes?</h2>
   </dialog>
 </div>
 </div>
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <div class="dialog-backdrop">
   <dialog class="dialog" role="alertdialog" open="" aria-labelledby="second-recipe-dg-confirm-title" aria-describedby="second-recipe-dg-confirm-text">
     <div class="dialog-header">
diff --git a/exports/recipes/index.json b/exports/recipes/index.json
index d314d216d..d83502202 100644
--- a/exports/recipes/index.json
+++ b/exports/recipes/index.json
@@ -7,7 +7,7 @@
       "id": "button",
       "variant": "default",
       "manifest": "exports/recipes/button/manifest.json",
-      "sourceDigest": "sha256-tLOvGHSxAnJojvXOq307DdwimfKorzgnNxhuLtFEc6k=",
+      "sourceDigest": "sha256-dEM5sRKZMKr8AoTw9J/e2qFritEPNzhGaVvuBgzgANs=",
       "limitations": [
         "Native button activation only; application actions are supplied by the host.",
         "aria-busy supplies the loading appearance; the host must suppress repeated activation while busy."
@@ -17,7 +17,7 @@
       "id": "text-field",
       "variant": "default",
       "manifest": "exports/recipes/text-field/manifest.json",
-      "sourceDigest": "sha256-0dRyQbwiDMQLwJzeoNbHAnfQaeDkppIgJOluTJqTdWU=",
+      "sourceDigest": "sha256-YUjIVkdZJyC/rWXFXU5iUEe01k1zm5jV4Z0I+fY4RyE=",
       "limitations": [
         "Native text editing only; validation messages and aria-invalid are managed by the host.",
         "The default text variant is packaged. Password reveal, search clearing and number steppers are not implemented."
@@ -27,7 +27,7 @@
       "id": "dialog",
       "variant": "default",
       "manifest": "exports/recipes/dialog/manifest.json",
-      "sourceDigest": "sha256-O/XLRlwd5dEvDccFKU/lnvNi424Qy8nvTrinPm4hgZU=",
+      "sourceDigest": "sha256-uuI/ebqf+dTaeJCC2s0y51Zadt6ty1j1N3Av9/PMuDA=",
       "limitations": [
         "Visual-only: the native dialog is open in normal flow with a simulated backdrop.",
         "No showModal, focus trap, Escape handling, close actions or focus return is supplied. The host owns the complete modal lifecycle and positioning.",
diff --git a/exports/recipes/text-field/README.md b/exports/recipes/text-field/README.md
index b2899f873..6d4d198dc 100644
--- a/exports/recipes/text-field/README.md
+++ b/exports/recipes/text-field/README.md
@@ -2,7 +2,7 @@
 
 j3w1 theme 4.0.0. Markup adapted from j3w1 UI Theme Spec, https://github.com/j3w1/theme, CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Changes: scoped instance IDs and documentation-only content removed. CSS and generator: MIT; see LICENSE.md.
 
-Version 4.0.0; profile default; source digest sha256-0dRyQbwiDMQLwJzeoNbHAnfQaeDkppIgJOluTJqTdWU=. Pin the supplying commit and verify manifest source/file digests; the version alone does not identify a revision.
+Version 4.0.0; profile default; source digest sha256-YUjIVkdZJyC/rWXFXU5iUEe01k1zm5jV4Z0I+fY4RyE=. Pin the supplying commit and verify manifest source/file digests; the version alone does not identify a revision.
 
 Open example.html directly, without Astro, network assets or a build step. two-instances.html demonstrates independent IDs. For integration, include tokens.css, foundation.css and component.css in that order, then markup.html. Keep .j3w1-recipe and data-density on the wrapper. The source viewer can make a fresh instance prefix; use a unique prefix for every copy and rewrite all ID references together.
 
diff --git a/exports/recipes/text-field/component.css b/exports/recipes/text-field/component.css
index 4b4623107..7b789e370 100644
--- a/exports/recipes/text-field/component.css
+++ b/exports/recipes/text-field/component.css
@@ -19,6 +19,66 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
+.j3w1-recipe .combobox-label,
+.j3w1-recipe .dialog-field-label,
+.j3w1-recipe .field-label,
+.j3w1-recipe .fieldset-label,
+.j3w1-recipe .file-input-label,
+.j3w1-recipe .number-field-label,
+.j3w1-recipe .search-field-label,
+.j3w1-recipe .select-label,
+.j3w1-recipe .text-field-label,
+.j3w1-recipe .textarea-label,
+.j3w1-recipe .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-help,
+.j3w1-recipe .date-picker-help,
+.j3w1-recipe .dialog-field-help,
+.j3w1-recipe .fieldset-help,
+.j3w1-recipe .file-input-help,
+.j3w1-recipe .number-field-help,
+.j3w1-recipe .search-field-help,
+.j3w1-recipe .select-help,
+.j3w1-recipe .text-field-help,
+.j3w1-recipe .textarea-help,
+.j3w1-recipe .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-message,
+.j3w1-recipe .date-picker-message,
+.j3w1-recipe .file-input-message,
+.j3w1-recipe .number-field-message,
+.j3w1-recipe .radio-group-message,
+.j3w1-recipe .select-message,
+.j3w1-recipe .text-field-message,
+.j3w1-recipe .textarea-message,
+.j3w1-recipe .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-root,
+.j3w1-recipe .date-picker-root,
+.j3w1-recipe .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 .j3w1-recipe .text-field {
   position: relative;
   display: grid;
@@ -28,12 +88,6 @@ SOFTWARE.
   color: var(--color-text-default);
 }
 
-.j3w1-recipe .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .j3w1-recipe .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -43,7 +97,7 @@ SOFTWARE.
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -52,7 +106,7 @@ SOFTWARE.
 .j3w1-recipe .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -128,21 +182,6 @@ SOFTWARE.
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-.j3w1-recipe .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.j3w1-recipe .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 .j3w1-recipe .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/exports/recipes/text-field/example.html b/exports/recipes/text-field/example.html
index 7b0cf1125..a6e20c6c0 100644
--- a/exports/recipes/text-field/example.html
+++ b/exports/recipes/text-field/example.html
@@ -78,7 +78,7 @@
   --space-4: 4px;
   --space-8: 8px;
 }
-.j3w1-recipe[data-density="compact"] {
+.j3w1-recipe, .j3w1-recipe[data-density="compact"] {
   --density-control-height: var(--density-compact-control-height);
   --density-control-padding-x: var(--density-compact-control-padding-x);
 }
@@ -117,7 +117,7 @@
   line-height: var(--font-line-height-ui-md);
 }
 .j3w1-recipe, .j3w1-recipe *, .j3w1-recipe *::before, .j3w1-recipe *::after { box-sizing: border-box; }
-.j3w1-recipe button, .j3w1-recipe input, .j3w1-recipe select, .j3w1-recipe textarea { font: inherit; }
+.j3w1-recipe :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 .j3w1-recipe ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -155,6 +155,66 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
+.j3w1-recipe .combobox-label,
+.j3w1-recipe .dialog-field-label,
+.j3w1-recipe .field-label,
+.j3w1-recipe .fieldset-label,
+.j3w1-recipe .file-input-label,
+.j3w1-recipe .number-field-label,
+.j3w1-recipe .search-field-label,
+.j3w1-recipe .select-label,
+.j3w1-recipe .text-field-label,
+.j3w1-recipe .textarea-label,
+.j3w1-recipe .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-help,
+.j3w1-recipe .date-picker-help,
+.j3w1-recipe .dialog-field-help,
+.j3w1-recipe .fieldset-help,
+.j3w1-recipe .file-input-help,
+.j3w1-recipe .number-field-help,
+.j3w1-recipe .search-field-help,
+.j3w1-recipe .select-help,
+.j3w1-recipe .text-field-help,
+.j3w1-recipe .textarea-help,
+.j3w1-recipe .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-message,
+.j3w1-recipe .date-picker-message,
+.j3w1-recipe .file-input-message,
+.j3w1-recipe .number-field-message,
+.j3w1-recipe .radio-group-message,
+.j3w1-recipe .select-message,
+.j3w1-recipe .text-field-message,
+.j3w1-recipe .textarea-message,
+.j3w1-recipe .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-root,
+.j3w1-recipe .date-picker-root,
+.j3w1-recipe .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 .j3w1-recipe .text-field {
   position: relative;
   display: grid;
@@ -164,12 +224,6 @@
   color: var(--color-text-default);
 }
 
-.j3w1-recipe .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .j3w1-recipe .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -179,7 +233,7 @@
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -188,7 +242,7 @@
 .j3w1-recipe .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -264,21 +318,6 @@
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-.j3w1-recipe .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.j3w1-recipe .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 .j3w1-recipe .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -354,7 +393,7 @@
 }
 </style>
 </head><body>
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <div class="text-field">
   <label class="text-field-label" for="example-recipe-tf-name">Display name <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
   <div class="text-field-root">
diff --git a/exports/recipes/text-field/foundation.css b/exports/recipes/text-field/foundation.css
index e6ef36567..5f3f8089d 100644
--- a/exports/recipes/text-field/foundation.css
+++ b/exports/recipes/text-field/foundation.css
@@ -28,7 +28,7 @@ SOFTWARE.
   line-height: var(--font-line-height-ui-md);
 }
 .j3w1-recipe, .j3w1-recipe *, .j3w1-recipe *::before, .j3w1-recipe *::after { box-sizing: border-box; }
-.j3w1-recipe button, .j3w1-recipe input, .j3w1-recipe select, .j3w1-recipe textarea { font: inherit; }
+.j3w1-recipe :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 .j3w1-recipe ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/exports/recipes/text-field/manifest.json b/exports/recipes/text-field/manifest.json
index 693541504..b913a8b1c 100644
--- a/exports/recipes/text-field/manifest.json
+++ b/exports/recipes/text-field/manifest.json
@@ -10,20 +10,21 @@
     "files": {
       "theme.json": "sha256-4NYtr9+dtCjVshxiuC/YkB+7FzdUbd4E60lcZknHTLE=",
       "site/recipes.json": "sha256-71h0SYIOKbPRh+V/IhtLV7ZGuX90wfmeo84Rx0sm494=",
-      "scripts/lib/recipe-generator.mjs": "sha256-73WV6IUzUVgC3oyFESbgawkTU9o6mh+rKtZx8HgdZeA=",
-      "scripts/lib/recipe-css.mjs": "sha256-dA/5L61Tsn+Gkmz/syAd689Z5IyuShpluZ1NfgXcZ/c=",
+      "scripts/lib/recipe-generator.mjs": "sha256-Bx+XV4uu1Ha1lvB+SFJ08FwyhsJFXITpvg37hICAdTM=",
+      "scripts/lib/recipe-css.mjs": "sha256-pYVBZWuIylisk1RECCR78awarge02KZZwVi9+nyBwlw=",
       "scripts/lib/recipe-markup.mjs": "sha256-pxTFKTEWI1f86ScNw0e2ZfSFkdba5Zs6a7GhmMbIUUQ=",
-      "scripts/lib/markup.mjs": "sha256-/jd6ncIZAtDpNgML1FKkJn4mFJitU4mSXE9DLLvt2EI=",
-      "spec/components/text-field.md": "sha256-nLOL2IloE3AKZ7EqGA0iIBUVuEZf+iVcTJcBn0x8y2Y=",
+      "scripts/lib/markup.mjs": "sha256-VbP1LaVzZwTrklUjCiwB7kN/feI9Zg29+Nt1ANkDF0k=",
+      "spec/components/text-field.md": "sha256-iLHCdTuJlbSfqRTnHiZJ8P6xV4HrD4S5Bzt5SBP6zP4=",
       "spec/components/text-field.demo.html": "sha256-ZB5xDObbSUC3QCuqccJpd3EmQ5YJQhJ74BCTur+xwa4=",
-      "site/src/styles/recipe-foundation.css": "sha256-siLjKAkNj84Wa0+Xz5Vf2yj9DT9k0K/Swy/cwHNrvYo=",
-      "site/src/styles/components/text-field.css": "sha256-/kKVqES+lIgSlMzei+bu09SI6o6KeVaz7c1qSlKH0A4=",
+      "site/src/styles/recipe-foundation.css": "sha256-SUmvPxZ7TNZA79xx7u87QonwpwCDBRcRzTnrTOfV8k8=",
+      "site/src/styles/partials/field.css": "sha256-WTZb/N3/3OT12dHJbvImC02NJBaOkGX8rQ+alodB3S0=",
+      "site/src/styles/components/text-field.css": "sha256-7HgfVLJYEB2zasvJhhCqO2ClcAdxorbg5wpXXqPXPZc=",
       "LICENSE.md": "sha256-Ih5+DpqcNXGWJX6BbYgpt6psmJi9lGcXGJzuiU7elE0=",
       "tokens/primitives.tokens.json": "sha256-cmydigBuNgi4hyQLi+3VS5JBhDQ8VMStlmUtPSSc05E=",
       "tokens/semantic.tokens.json": "sha256-jbrikW294TIEdB7rAiqlLPAiLUy2CMyLT/opZiVe/E0=",
-      "tokens/foundations.tokens.json": "sha256-/gYmJavPwEyem7mpNRhaBa8jjyuPKnSisugGky3PdCY="
+      "tokens/foundations.tokens.json": "sha256-30MQxI9wjLrZLFYJBPe1+gLUT80oRCnMDNiNoltbtjk="
     },
-    "digest": "sha256-0dRyQbwiDMQLwJzeoNbHAnfQaeDkppIgJOluTJqTdWU=",
+    "digest": "sha256-YUjIVkdZJyC/rWXFXU5iUEe01k1zm5jV4Z0I+fY4RyE=",
     "revisionPolicy": "Resolve these paths at the same pinned commit as this manifest. The hosted source viewer identifies its supplying commit; generated source files contain content digests, never a floating revision claim."
   },
   "dependencies": {
@@ -351,14 +352,14 @@
     "notice": "j3w1 theme 4.0.0. Markup adapted from j3w1 UI Theme Spec, https://github.com/j3w1/theme, CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Changes: scoped instance IDs and documentation-only content removed. CSS and generator: MIT; see LICENSE.md."
   },
   "files": {
-    "markup.html": "sha256-O4CmIRb2RUPigpgQAcre9bSpIRJxN52MMxJW4fTyhpM=",
+    "markup.html": "sha256-wARfGY6V60eMUhV8JNGMhY+EnikQvcPlSqkD5WPOULo=",
     "template.html": "sha256-IlSlLS7sPC3MLqIdxMRQUP4sFnn/58lwM3AFALtdY3c=",
-    "tokens.css": "sha256-EqSdsrQqs1NJVLFBDmxFtT0mbcjOiUeAx1G9cTcdpIY=",
-    "foundation.css": "sha256-gItmMJgxTkuTe8+9G3aZQviwGcJ5cQaNANEvpcyOA88=",
-    "component.css": "sha256-VgGNE3+NVtPUYTJf02aIPHq3JrH5EGckSbwQealUEwU=",
-    "example.html": "sha256-OT8OHppA6ssLf5OlKXOIqPBdkCDLa9lXaqsUOtT1SyQ=",
-    "two-instances.html": "sha256-Abep8m5/si0kuUu3cVGEVzcHqMN1pHkPazmjloND8J0=",
+    "tokens.css": "sha256-Z7C9Hx+UzJAtRTBN08cB9BRDeTuCjEQr3xZyD2i0vgU=",
+    "foundation.css": "sha256-jm66ZdmdAhTyMVQIMKhzVZZm/NhB5ZbLq8g3UASzy98=",
+    "component.css": "sha256-Oz8HGS0K4usbEkFFSKi93G9yUBnUass/Z8uQbOJZXNc=",
+    "example.html": "sha256-bgWf7wJ491bEm4esZkZzyuL263quAotSfoygX24ZkFU=",
+    "two-instances.html": "sha256-JIl9HQHQPYXg+r8lkFfC0x50KKiLyNWAwYm9mdQXGGw=",
     "LICENSE.md": "sha256-vVf/G6WKJRqbyGZCppbAxMh+UAJdSzaPt5xWUujehyU=",
-    "README.md": "sha256-4IdgTG0RNA0xp3IIcosxkwvq7KQdLS2Wiw1TuWxlzas="
+    "README.md": "sha256-HpwPQAB3ombWhQi6qdKYU8fgIeJAxlbGFP8ovZEdVnw="
   }
 }
diff --git a/exports/recipes/text-field/markup.html b/exports/recipes/text-field/markup.html
index f6370a844..abc86d604 100644
--- a/exports/recipes/text-field/markup.html
+++ b/exports/recipes/text-field/markup.html
@@ -1,5 +1,5 @@
 <!-- j3w1 theme 4.0.0. Markup adapted from j3w1 UI Theme Spec, https://github.com/j3w1/theme, CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Changes: scoped instance IDs and documentation-only content removed. CSS and generator: MIT; see LICENSE.md. -->
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <div class="text-field">
   <label class="text-field-label" for="example-recipe-tf-name">Display name <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
   <div class="text-field-root">
diff --git a/exports/recipes/text-field/tokens.css b/exports/recipes/text-field/tokens.css
index b21e8dcce..d0db47473 100644
--- a/exports/recipes/text-field/tokens.css
+++ b/exports/recipes/text-field/tokens.css
@@ -74,7 +74,7 @@ SOFTWARE.
   --space-4: 4px;
   --space-8: 8px;
 }
-.j3w1-recipe[data-density="compact"] {
+.j3w1-recipe, .j3w1-recipe[data-density="compact"] {
   --density-control-height: var(--density-compact-control-height);
   --density-control-padding-x: var(--density-compact-control-padding-x);
 }
diff --git a/exports/recipes/text-field/two-instances.html b/exports/recipes/text-field/two-instances.html
index 374717f99..0301f1401 100644
--- a/exports/recipes/text-field/two-instances.html
+++ b/exports/recipes/text-field/two-instances.html
@@ -78,7 +78,7 @@
   --space-4: 4px;
   --space-8: 8px;
 }
-.j3w1-recipe[data-density="compact"] {
+.j3w1-recipe, .j3w1-recipe[data-density="compact"] {
   --density-control-height: var(--density-compact-control-height);
   --density-control-padding-x: var(--density-compact-control-padding-x);
 }
@@ -117,7 +117,7 @@
   line-height: var(--font-line-height-ui-md);
 }
 .j3w1-recipe, .j3w1-recipe *, .j3w1-recipe *::before, .j3w1-recipe *::after { box-sizing: border-box; }
-.j3w1-recipe button, .j3w1-recipe input, .j3w1-recipe select, .j3w1-recipe textarea { font: inherit; }
+.j3w1-recipe :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 .j3w1-recipe ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -155,6 +155,66 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
+.j3w1-recipe .combobox-label,
+.j3w1-recipe .dialog-field-label,
+.j3w1-recipe .field-label,
+.j3w1-recipe .fieldset-label,
+.j3w1-recipe .file-input-label,
+.j3w1-recipe .number-field-label,
+.j3w1-recipe .search-field-label,
+.j3w1-recipe .select-label,
+.j3w1-recipe .text-field-label,
+.j3w1-recipe .textarea-label,
+.j3w1-recipe .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-help,
+.j3w1-recipe .date-picker-help,
+.j3w1-recipe .dialog-field-help,
+.j3w1-recipe .fieldset-help,
+.j3w1-recipe .file-input-help,
+.j3w1-recipe .number-field-help,
+.j3w1-recipe .search-field-help,
+.j3w1-recipe .select-help,
+.j3w1-recipe .text-field-help,
+.j3w1-recipe .textarea-help,
+.j3w1-recipe .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-message,
+.j3w1-recipe .date-picker-message,
+.j3w1-recipe .file-input-message,
+.j3w1-recipe .number-field-message,
+.j3w1-recipe .radio-group-message,
+.j3w1-recipe .select-message,
+.j3w1-recipe .text-field-message,
+.j3w1-recipe .textarea-message,
+.j3w1-recipe .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.j3w1-recipe .combobox-root,
+.j3w1-recipe .date-picker-root,
+.j3w1-recipe .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 .j3w1-recipe .text-field {
   position: relative;
   display: grid;
@@ -164,12 +224,6 @@
   color: var(--color-text-default);
 }
 
-.j3w1-recipe .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .j3w1-recipe .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -179,7 +233,7 @@
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -188,7 +242,7 @@
 .j3w1-recipe .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -264,21 +318,6 @@
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-.j3w1-recipe .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.j3w1-recipe .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 .j3w1-recipe .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -354,7 +393,7 @@
 }
 </style>
 </head><body>
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <div class="text-field">
   <label class="text-field-label" for="first-recipe-tf-name">Display name <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
   <div class="text-field-root">
@@ -365,7 +404,7 @@
   <p class="text-field-message" id="first-recipe-tf-name-message">✕ Use 2 to 32 characters.</p>
 </div>
 </div>
-<div class="j3w1-recipe" data-density="comfortable">
+<div class="j3w1-recipe" data-density="compact">
 <div class="text-field">
   <label class="text-field-label" for="second-recipe-tf-name">Display name <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
   <div class="text-field-root">
diff --git a/exports/task-inputs.json b/exports/task-inputs.json
index f287a3459..9ee7bc33f 100644
--- a/exports/task-inputs.json
+++ b/exports/task-inputs.json
@@ -145,21 +145,25 @@
     "font.letter-spacing.terminal",
     "font.line-height.caption",
     "font.line-height.code",
+    "font.line-height.display",
     "font.line-height.h1",
     "font.line-height.h2",
     "font.line-height.h3",
     "font.line-height.reading",
     "font.line-height.terminal",
+    "font.line-height.title",
     "font.line-height.ui-lg",
     "font.line-height.ui-md",
     "font.line-height.ui-sm",
     "font.size.caption",
     "font.size.code",
+    "font.size.display",
     "font.size.h1",
     "font.size.h2",
     "font.size.h3",
     "font.size.reading",
     "font.size.terminal",
+    "font.size.title",
     "font.size.ui-lg",
     "font.size.ui-md",
     "font.size.ui-sm",
@@ -195,7 +199,7 @@
     "z.skip-link",
     "z.toast"
   ],
-  "usageDigest": "sha256-H96Z5c44DtcP5MzkPiReXm1oXLTe31w6fu20W6dFqHc=",
+  "usageDigest": "sha256-v3sZK98nwkEq+AJKV5x7t6Hc3Ic2Qdqrartdf0gub4Y=",
   "tokenDependencies": {
     "border.width.default": [],
     "border.width.emphasis": [],
@@ -941,21 +945,25 @@
     "font.letter-spacing.terminal": [],
     "font.line-height.caption": [],
     "font.line-height.code": [],
+    "font.line-height.display": [],
     "font.line-height.h1": [],
     "font.line-height.h2": [],
     "font.line-height.h3": [],
     "font.line-height.reading": [],
     "font.line-height.terminal": [],
+    "font.line-height.title": [],
     "font.line-height.ui-lg": [],
     "font.line-height.ui-md": [],
     "font.line-height.ui-sm": [],
     "font.size.caption": [],
     "font.size.code": [],
+    "font.size.display": [],
     "font.size.h1": [],
     "font.size.h2": [],
     "font.size.h3": [],
     "font.size.reading": [],
     "font.size.terminal": [],
+    "font.size.title": [],
     "font.size.ui-lg": [],
     "font.size.ui-md": [],
     "font.size.ui-sm": [],
@@ -995,180 +1003,180 @@
     "z.toast": []
   },
   "files": {
-    "agents/consume.md": "sha256-i6Yk0kTqauioqD23HdGiN3S1EkyVC1bn/m86OR99hqc=",
-    "exports/components/admin-form.json": "sha256-eRnLywYWpnSnpPiv4MrY0aGZ7BpZEkrJG13tpAxopto=",
-    "exports/components/alert.json": "sha256-fY305BXYtrgqi7ICbnawYPMKZC9ff3t3yJ4I2vRbBZU=",
-    "exports/components/avatar.json": "sha256-xsnyI/5aT2MHasx+JQVNpW8boRicxTzw7yA1saDCjnY=",
-    "exports/components/badge.json": "sha256-DwK1qRsb78sSqHyFijG2LGi2lFpfbsuqo/Hn0S+uvK8=",
-    "exports/components/breadcrumbs.json": "sha256-zQLfzLX17c6/w9Qc+NDjT46WgvUPizPDz+c6bFM0ghQ=",
-    "exports/components/button-group.json": "sha256-BSp7Mjeyt4XOWCQXFLRlAx8sJg9nw2GeACg8H+o0FEE=",
-    "exports/components/button.json": "sha256-4p1xTZHKv9gloF1QMtXjx9iP2eX9r9MiKd820lW31eA=",
-    "exports/components/card.json": "sha256-0yl0cP1PZEnhNuyuDaCh3Sruv1J0TcGwSnVqV6RsJwM=",
-    "exports/components/chart.json": "sha256-oeL0YqV4bPrm0R9MGZYndDvymTiIipuRNuV6dSTNAWc=",
-    "exports/components/checkbox.json": "sha256-vKh60jFbH2dStEUVLlAcQGeDkBvWNoY+xASXA2PBvD8=",
-    "exports/components/chip.json": "sha256-PUw2hBa9KFySjCvs2KFCcOHknMs3XPW4cmQMZt19Wgg=",
-    "exports/components/code-editor.json": "sha256-BEBkn4aICM9agXkKXXoD/Vp2vBw9L9xzf+PskyKutps=",
-    "exports/components/combobox.json": "sha256-L40mUBv9JftFkoxyytSym7B7RdgvPbzJepfORUt1D+E=",
-    "exports/components/command-palette.json": "sha256-v+uBQa15HR8RmrV4TgtASLLL6heTJxuxXd0eLANkAr8=",
-    "exports/components/compact-dashboard.json": "sha256-46PH1YfxF9fa19v3TMeXZQ7cunnFu60zupp+ilyPDX0=",
-    "exports/components/data-table.json": "sha256-Jx64WzlClg9ZEjLxdNQtSVyug+zJB8nR/9Az2E7rjD0=",
-    "exports/components/date-picker.json": "sha256-OUGlLh96huXjIEMtVvEA+FVyp4wx1rVR4Ycj0/4jqA0=",
-    "exports/components/description-list.json": "sha256-23PielDBv+IvWwGgCucwAFo4aOa2I3rvIyFz7s2Ppm8=",
-    "exports/components/diagnostics.json": "sha256-DCtdyZ1SB9wO/wcv2e7Vm9K7r7zgTZ/usd0BW+Q+Qns=",
-    "exports/components/dialog.json": "sha256-3biN4pOh3Xno1zp8fqp+lfgzhZVGDs3fvOwL+ykPLRo=",
-    "exports/components/diff-view.json": "sha256-8wdU0wsWaPK9CQrN7RrbVRlH5MPJzkVRaeSCXtrR62k=",
-    "exports/components/disclosure.json": "sha256-shzZ4BJIKao0FVzzv9rmRShM3oUhpXciXiPAEYxhDUg=",
-    "exports/components/drawer.json": "sha256-QV4H85dSIRy6UAX3RNVGkFy9s2CYHMnbc+T3AozYPfY=",
-    "exports/components/editor-search.json": "sha256-Gs8sGmYigdm6zJuRk6PO3SZ7DTxlvC8rYJDfMFv2LGQ=",
-    "exports/components/empty-state.json": "sha256-csrcqKJBMSQ83ah0QGhwEUBUJCzTxs/gmI7Fyew7SAk=",
-    "exports/components/error-state.json": "sha256-J2Ybn0Dp2zC6DcaNms4M95wSwRuOVbdCbSwVTtZBs3A=",
-    "exports/components/field.json": "sha256-CwS97OOd/TiSLj14ddTEjLtB+YFwuFwzOeO3Dh0QQyM=",
-    "exports/components/fieldset.json": "sha256-GoUuPV0K4ZEke68Rd5Rep63pZdJrVq0wcP5mtKWaJSA=",
-    "exports/components/file-browser.json": "sha256-uCnasCmeUQYFtNwJUXAO41JiYtF8z/0EFeoJLvN0jdc=",
-    "exports/components/file-input.json": "sha256-WJZZCzR/rBLpBfBw8APEkufz7gWWEslnGppb/sKAni8=",
-    "exports/components/filterable-table.json": "sha256-UFRKkL/36KWNeQWcJ7D0jfZmLoSXvaabNYfVxXy6bBY=",
-    "exports/components/form-builder.json": "sha256-7EFKC4g8k2rGhehRW1TKvQgyFpElPMPvf33C83xJRNw=",
-    "exports/components/i3-window-frame.json": "sha256-3vAv8bfDYiK/FtH4WKmbicoPHFOznTjnqcDlaNK7dt8=",
-    "exports/components/icon-button.json": "sha256-RJm9x6pPDFnF9Q23dbBmUb0E50a1MAx3JroWrDWKS5M=",
-    "exports/components/kbd.json": "sha256-l5Bw/Ul8RVifiaH6ooa8AlA5sakuJCoZOPQQbPduvYg=",
-    "exports/components/link.json": "sha256-+bhCm/tbl4N7iCv2WO4cqaTh4FIT5+MPZHd1u3z4R+s=",
-    "exports/components/list.json": "sha256-MpHwE+aKAPvY3CcyudupD7Lw0IjZBimlMjT6TuaS0hA=",
-    "exports/components/loading-indicator.json": "sha256-2QKuRjZVJXAgdPIO8G8Y6aJ9KGxA6o6rOiSEp/PvcYE=",
-    "exports/components/menu.json": "sha256-muiitCeijBJjHeaTp/QQx6+IEmQOM4cWE9TrKO77e1Y=",
-    "exports/components/multiselect.json": "sha256-4KQgviHmIt6BV24Ovi6iT9bZsRYCKoLRsXv3+6e7bAI=",
-    "exports/components/number-field.json": "sha256-X2RtxXMFv9aZYoHXBehlz8Yd1gRUJGBEaxlrbbpw2dc=",
-    "exports/components/pagination.json": "sha256-yn4BdNlOV/vtz3svE4If1Bbov1AfMfzpKdiAN6133nA=",
-    "exports/components/popover.json": "sha256-EqTG6rC/VtjPzPC5p+8mQCZRmyKmpPaM/gyjnu4fkBs=",
-    "exports/components/progress.json": "sha256-gQkfI0q7nw95iejhwbgBL+qnK3YC1Ti/A/fqHcUFodw=",
-    "exports/components/radio-group.json": "sha256-EfvnwOBwd3pdtmPY0Islp1+TgVzZNhfl2aMwwy/ct0k=",
-    "exports/components/range.json": "sha256-acSO0+fixlkKfME6RFcpK00skJMP8gDNPoJhx0jbz90=",
-    "exports/components/repeater.json": "sha256-hd5TfCdk3cefdLf2qQ2VvfCFQ0SZRelNey3Rrg+Po5s=",
-    "exports/components/search-field.json": "sha256-mBG4aed8CuPQnOqvyyO2Ki/6P7Kd+scL0gvy8BSuh0I=",
-    "exports/components/segmented-control.json": "sha256-NxtziV/OygaDGi6mc6tElJnGbo/IMXmL3Kw0oo4hbWo=",
-    "exports/components/select.json": "sha256-lxY8viVzwv7lZNWQb25Q710kRbpjsvAiJOCyNsswl/A=",
-    "exports/components/settings-panel.json": "sha256-3LcKWsvRUalOjqpJ8BWHz+NwCeeE1QPVVYKBDRl95c0=",
-    "exports/components/sidebar-nav.json": "sha256-DH9/5y5vhlFC2xhkSRxPHjQUItnETFyylJNlL/eQvZA=",
-    "exports/components/skeleton.json": "sha256-G4HrDr9EuEoWZF5QAu2me2ELZv5wbUmJ3BdH88gd2qI=",
-    "exports/components/skip-link.json": "sha256-BVXQbbhH/Yw/1w4ZH4udwjBvHR9EvpaFCklwRMaBzSY=",
-    "exports/components/switch.json": "sha256-oxfIG+7uoRIjqhOX8NJeLOwk96/YOO4xuorhVjcMeBA=",
-    "exports/components/table.json": "sha256-SuXNBFtY8Ta7SYiGP++3vK2F1R5qMDhCqm9MsNridnE=",
-    "exports/components/tabs.json": "sha256-kvXJtwi+CXSlwSfuKCFXif3+f4RC46YAdX5OscNk7Ak=",
-    "exports/components/terminal.json": "sha256-XyXr8dnvYT95prOlPBbRj5a9g68EAugPetzv9jAKXMs=",
-    "exports/components/text-field.json": "sha256-Lex9v1t/4/YXIFJqbJxCwK/4nVl7XPA9D+FEjx0Rn6M=",
-    "exports/components/textarea.json": "sha256-qV1f7XUpYBKJjKIEnduDtBzG6e0UNZC/YT0VDcNdnCQ=",
-    "exports/components/time-picker.json": "sha256-n9Z27zWFtF0b3GMeCpOO+TyPM/HbKs5YHSFtnu3R8cs=",
-    "exports/components/timeline.json": "sha256-24hw5t5rGVCeQYH/Z0ZPIcm2M/rSYkqCJmgitCPU4ok=",
-    "exports/components/toast.json": "sha256-iLhC7qFWAYHMbtBKnDeDEPkHEQ9tbsB6tG/Y9lswAUI=",
-    "exports/components/toolbar.json": "sha256-Qg6UH+C0B9R4jOBl1rmkgPvEiDvUlT3A/wKGVT2XgZM=",
-    "exports/components/tooltip.json": "sha256-imfWbgUObvGd82f5lAzHDkjiG7mAqvrJYbZQ8vEISkU=",
-    "exports/components/tree.json": "sha256-CiayPirCLB4h2A0r+OGyq06JJ6ZVylcVctATkD2K5gg=",
-    "exports/components/wizard.json": "sha256-pLB+Xs9mSPIhdnsLvv4MEbI4ATie7GjnBP6nAhCf8N4=",
-    "exports/port-capabilities.json": "sha256-c4HHGplL/Vh7JJD8MZONBbTRbEpYe+mYNVPsVbFoRRE=",
-    "exports/recipes/button/component.css": "sha256-+Fn90PbGbnW0JxDH1RAdiYrVQ4FrstMA+Rq7HlAQTdU=",
-    "exports/recipes/button/example.html": "sha256-HRSLwap8t93ggusQ8BYoEAE0wPCsBWTKSY+4JGzRNa4=",
-    "exports/recipes/button/foundation.css": "sha256-gItmMJgxTkuTe8+9G3aZQviwGcJ5cQaNANEvpcyOA88=",
+    "agents/consume.md": "sha256-I7gvGchrdAXnxI1VpW1sIodxyPy9hNvveANaO2p7h8w=",
+    "exports/components/admin-form.json": "sha256-2TlXwKoXO6zcy7Tx++Cm2rh/hlfQSzLAgg3iHIMc+A8=",
+    "exports/components/alert.json": "sha256-N1aX81ExUlcbLny7o1Ps8qNiXl6FYwt1lU+/g3RZXRk=",
+    "exports/components/avatar.json": "sha256-r07/ZuUO6VKbEMR1QWVKRz6ccLUBPqurjdKyuQPk6Tk=",
+    "exports/components/badge.json": "sha256-8IEshqfh1RsMRDC6H9H5fptI3HHYLD9cw/xzzTKxj+w=",
+    "exports/components/breadcrumbs.json": "sha256-URIM0vmWwvEIVzJIka7s4jaG4WOxMoJ8LDbFFMCMXgc=",
+    "exports/components/button-group.json": "sha256-6R65U8U5eYZkgsk39bFPK5LBTxgclPJ4C5hR9un4iRM=",
+    "exports/components/button.json": "sha256-fpx3utLRj/ejAQlUy5k14oQwbTIClAI9Oi8Ogyd+d+A=",
+    "exports/components/card.json": "sha256-OPzyirE2R2itNnHbSarld/Un5f9ZTd+FtpvLB23HIA0=",
+    "exports/components/chart.json": "sha256-dNhHbR3i2kV6+CFwpXkGQAemCS63ck3AfJdvm5roZRs=",
+    "exports/components/checkbox.json": "sha256-eF4Hc9ptoJR6MAHCFo+XvObHeyrh3JBIEF3jPCA/Yqs=",
+    "exports/components/chip.json": "sha256-n1NBTRmnMEk6PabtvRXepV3xpLoYwBW0nGYcoyJsc4Y=",
+    "exports/components/code-editor.json": "sha256-0vAFRoRizmdpPWGWawnIIBOOTi0xhNBhg249A2QRwzA=",
+    "exports/components/combobox.json": "sha256-bi9Un1R+qI1w4uAD7JwXVioAjO+TfBJ2YdPYdYRE5dE=",
+    "exports/components/command-palette.json": "sha256-ca/jmbFZGiDz8eyzg399QygD+QjzRnxbezSSVLMfogE=",
+    "exports/components/compact-dashboard.json": "sha256-5VqJEG4kjVnz9hGzkvVFe0DN7ct81WF4hgbEEvSjjK8=",
+    "exports/components/data-table.json": "sha256-hjakBbiuffz4/zKoHVd1J4O3zOCOsiBgGk40jJzJ/aQ=",
+    "exports/components/date-picker.json": "sha256-C9vZnrKBtp3iyOzD1rj+O7jRttbE1UfyTQ2HO7EghiI=",
+    "exports/components/description-list.json": "sha256-ZwNsiuLlqLpENEfVPAcjWTAfmA16wLYPGyXww48TyZk=",
+    "exports/components/diagnostics.json": "sha256-fD3AIMxCA0nJDmZRkE+basd1hOvDfl8G9SX41NS+Lxw=",
+    "exports/components/dialog.json": "sha256-whsqh1ZTeENrzZQ0fnl3XW0pylTDRVg+I9bL8baI3hc=",
+    "exports/components/diff-view.json": "sha256-pZUhOKHPaDknpm882AYQf9AsG6cJIQMg8gLFrpb92G8=",
+    "exports/components/disclosure.json": "sha256-aatGXrfUPGCgYBRajZs41hMnlcq0bICILrM/PIJT5xc=",
+    "exports/components/drawer.json": "sha256-qiAVCt0XgVXzhTO7QmWv7mUrU/R09RK0l3quAFvWyow=",
+    "exports/components/editor-search.json": "sha256-liHOHxqi1RNapo0uCrv3B7vTJlecr1rL2hA6Ctm/TxI=",
+    "exports/components/empty-state.json": "sha256-VxtNyRdmMsMGmJRJxyXE33300sOm1PU2kJT6TnzgHVk=",
+    "exports/components/error-state.json": "sha256-X10UjVV18zwhpqmxs0Wh++8HrNiItZiY5tlhLaGJBgg=",
+    "exports/components/field.json": "sha256-/718KnElGCw1Tx3beuyzrvUmZ8sbbuu8p2eLHjK7WaY=",
+    "exports/components/fieldset.json": "sha256-/zqw1AzrNjzsiuyFAH3Se8Zi8ZTF8NrNSpVqV4fFi5s=",
+    "exports/components/file-browser.json": "sha256-1rW7OwM9GbrP5rg8DUSAzNeU69z+AiqGCpCL5JT1hnE=",
+    "exports/components/file-input.json": "sha256-3PC03SAUjPb+h4lFEWDSz5LhqTSVc3uNYlslPzoBdcM=",
+    "exports/components/filterable-table.json": "sha256-6EZhwGHWZSx7GFnFOSKeeuUm/4HEprM6Z+fsoR9n4Pg=",
+    "exports/components/form-builder.json": "sha256-p/VED53RX0LEzKCFJiJc9dRfvLUAj6WFePwNu8YwbsU=",
+    "exports/components/i3-window-frame.json": "sha256-WGOhg2oHOzWzi1hXk3THgnFRdcQnDCDAAkvURDKKil0=",
+    "exports/components/icon-button.json": "sha256-BGhJZjoqHZuxGZ4GL/LnGhVgSDt8NT0QsoSSs5Qq2Qk=",
+    "exports/components/kbd.json": "sha256-i38Th7/ujfsUiMDrhgFVeS3A6mWM5WCOnRJV/jT9pdU=",
+    "exports/components/link.json": "sha256-oeQ8Q4DDjkAzdSmYGSVoW/hx7zbE55v7sfBR/aygZfM=",
+    "exports/components/list.json": "sha256-VG+FKB+lQe72GAi+TbtVwGcCp8xZoSK67yLj/q1eJrE=",
+    "exports/components/loading-indicator.json": "sha256-CWs2iHLscEtxyYfdkf+wykSJq/1tg/50eG6HGzE5WvE=",
+    "exports/components/menu.json": "sha256-aI+xAhPbZERQCq3SXhRNiEflEa5nLQECZRThR+J2h+M=",
+    "exports/components/multiselect.json": "sha256-9j1YnBusfBXHOX8cdz5BvBv5vpqK4vx4PdIKC8Nbmf4=",
+    "exports/components/number-field.json": "sha256-n41bP6rpy2cLaRjphyTxafEeUTU8EzhfpeQsAllMJYY=",
+    "exports/components/pagination.json": "sha256-/gj/OtiYZ2bx2eGXlGBDWFQ2t6okaz9Fij3NQ6VIYik=",
+    "exports/components/popover.json": "sha256-zQuAADCQ6AJNdf1EEFyY4/OUMjEvKTvBdOKn8ZqZxoc=",
+    "exports/components/progress.json": "sha256-GmSVxYy5rJ5yCC94AD11VMIXremS9vS3kocXp/xq9cY=",
+    "exports/components/radio-group.json": "sha256-XKfMy84MCW/4OhLmJs9UpY5QmTfzmmfVWep27KMO9Us=",
+    "exports/components/range.json": "sha256-HZROwoGsWUctb37zk5B2fb4fu9BNf3GezlbkjvgJ8eM=",
+    "exports/components/repeater.json": "sha256-96FIpOJc1q8Bg9akgdH9oh9keyGyPqte+R8s6kHgBBM=",
+    "exports/components/search-field.json": "sha256-G1TUdNMKHodg90kQREtOOEe8Sc9XQQwY+JYFFDRsN7s=",
+    "exports/components/segmented-control.json": "sha256-zQWmERfCcB8Trq7pb2IZwmk4GJ7G+XrA5OZGGZUn4v4=",
+    "exports/components/select.json": "sha256-+104x89k42mQE/HXROEO3H3J0LiouM+rmSaBTau7/v4=",
+    "exports/components/settings-panel.json": "sha256-MdoyYk8AhfdhaoCImjuSPyaLL1W5kq/NId7DmNRrjhM=",
+    "exports/components/sidebar-nav.json": "sha256-Rai29nxmXghlJymY8EsG+2+Gb21H00wSR9670+6B/wo=",
+    "exports/components/skeleton.json": "sha256-e35OkgH9WCDFuP2ehaMaxlsi6lHfufOL23j1Eb8wI0w=",
+    "exports/components/skip-link.json": "sha256-QW+6Ggs71uJPCPPD1wIMoCD3zKXwjN3iBrk1N++E388=",
+    "exports/components/switch.json": "sha256-srVz19F+sBbbrnK7qdTz9fOyuPamwKYU4pRJUNMGpXI=",
+    "exports/components/table.json": "sha256-00qzkQ7+Z1S4KyMdpqY7rpJwF1ThX9GPyF2seTosYNM=",
+    "exports/components/tabs.json": "sha256-azbH6ieXepaIRn9UBNXvi879wHCR+rkMD8swCB6CZIM=",
+    "exports/components/terminal.json": "sha256-F32f03n5TcghhAXLRQgUUVTocwOzkdFuc1RnN5xWy28=",
+    "exports/components/text-field.json": "sha256-xaKWYj2Xr70t21J4K+RaHFYIJqrHERfUjkuGDynhXYI=",
+    "exports/components/textarea.json": "sha256-+ESs+Xw17KqNhLGqYUv+TY/epN/X8kJNtB80OUFgArw=",
+    "exports/components/time-picker.json": "sha256-m1ht0mGWX1ZZg5FWZae+jK39fgtAvEDdsZksj764liE=",
+    "exports/components/timeline.json": "sha256-slpRcVncm8yu9FK/bxDpYrOrk1gO7qd0iwSJ3d8xXV0=",
+    "exports/components/toast.json": "sha256-FQZu2cYm6Ynw2S0ItMLBr9u/rVLZMntD7Z+ht0OXBXc=",
+    "exports/components/toolbar.json": "sha256-Cgqztp/7RUBC2gPBbPdH5XszuMRpyiQ4gwi9G+2gBFA=",
+    "exports/components/tooltip.json": "sha256-c4YtPBxsctZRCwpA1v8KZ9ih6PPBdBMUc+c7BzVXaV8=",
+    "exports/components/tree.json": "sha256-L9jLSs+I4wsrYtPhwJ1qaONJ180iXvXGv7Rg7f6Smuk=",
+    "exports/components/wizard.json": "sha256-pzkWqKyyi2EQ1GXntebvKyalvYt6pusuP1aRRtiRfdw=",
+    "exports/port-capabilities.json": "sha256-3NonQaSmytqqsMAVNYb53m45OGqD6hiCiN07GaWRJGo=",
+    "exports/recipes/button/component.css": "sha256-fO1HSQ+wy0Zku8pqVotCypnOH+iDz8SAX9GxMspxA8U=",
+    "exports/recipes/button/example.html": "sha256-6Jd+ynSweVG+DO3EUHUbEUNSEbj5+6+iBzqXU4YLtIs=",
+    "exports/recipes/button/foundation.css": "sha256-jm66ZdmdAhTyMVQIMKhzVZZm/NhB5ZbLq8g3UASzy98=",
     "exports/recipes/button/LICENSE.md": "sha256-vVf/G6WKJRqbyGZCppbAxMh+UAJdSzaPt5xWUujehyU=",
-    "exports/recipes/button/manifest.json": "sha256-GJJVcMHg7JCNv2EwQYzyH8HvblxYINZy4R644vtPIwo=",
-    "exports/recipes/button/markup.html": "sha256-9HjLJ98lH4SKiwVWynQKarCqWTK/+IKfcvGr6464P3c=",
-    "exports/recipes/button/README.md": "sha256-XMR0WkxC2OZc4k7b4YbzLPO7V+3sqncs+Gp6VrWN/iA=",
+    "exports/recipes/button/manifest.json": "sha256-3luqMDAS/1LEFotJqqkbVuuOdA/0svj5WXgA3Gd3gH0=",
+    "exports/recipes/button/markup.html": "sha256-be2Beb08aKEqIKaDsxTq8IJdSdfNPJyWS2M5aav7R7k=",
+    "exports/recipes/button/README.md": "sha256-PFptO8Sfyo2yzQoMnyf7+qotgB+Uols1JNNcZdj+9bg=",
     "exports/recipes/button/template.html": "sha256-FfylFZ+qzMUFxQKnIdqJiYmC8p4F+cNxK8BJSTo8XU8=",
-    "exports/recipes/button/tokens.css": "sha256-a/TLRGPaqlzicffxz3q5+tWHlvaJ9h78GE1mHVxzp/s=",
-    "exports/recipes/button/two-instances.html": "sha256-SUuvR3ZxzWymDnwkF8BdP321ok8G/grt3ePxGLLUBS4=",
-    "exports/recipes/dialog/component.css": "sha256-Q2j1S57IHrXP3j0VijKinSjdfBgbr6nkFZHrFbkmNaI=",
-    "exports/recipes/dialog/example.html": "sha256-4W9jw4/GPrhd2VhxlZXF91t2yanib4VIWbJ18XomB0I=",
-    "exports/recipes/dialog/foundation.css": "sha256-gItmMJgxTkuTe8+9G3aZQviwGcJ5cQaNANEvpcyOA88=",
+    "exports/recipes/button/tokens.css": "sha256-AJa/NV2e+fHrwjzGqedaXaFmM54azgP/b9wytMJiVCs=",
+    "exports/recipes/button/two-instances.html": "sha256-HrqWaokDwmbQXfgRiFeyWToB617qs6c+t/UQLJs0Blk=",
+    "exports/recipes/dialog/component.css": "sha256-4rB4zaZ85zCcwBibahNlsmkeHocfBbSHfwT9xY/jwE8=",
+    "exports/recipes/dialog/example.html": "sha256-NfEbyJuZuMeGI56eQN6PW+EXPWfv8OjpngN0eMztvPQ=",
+    "exports/recipes/dialog/foundation.css": "sha256-jm66ZdmdAhTyMVQIMKhzVZZm/NhB5ZbLq8g3UASzy98=",
     "exports/recipes/dialog/LICENSE.md": "sha256-vVf/G6WKJRqbyGZCppbAxMh+UAJdSzaPt5xWUujehyU=",
-    "exports/recipes/dialog/manifest.json": "sha256-0OWeXDl1F2+hy0Go/RDdcxHVzikxDc44qksLw/QgUh0=",
-    "exports/recipes/dialog/markup.html": "sha256-o9WIUCRlY5GUbx8+IYfcIv9JJlXBbiJBjb7jUkjNTHE=",
-    "exports/recipes/dialog/README.md": "sha256-AL07d5Th8y7YXkw0pqRE3C5OtnLoJoPkd0TrkVBXVd0=",
+    "exports/recipes/dialog/manifest.json": "sha256-HGobBl2jdTaW36simdVaI8eA4OER0LhG8r9gusVpXjI=",
+    "exports/recipes/dialog/markup.html": "sha256-3KkpFAZ9Id+n/Pmpuu4Os4Wea88fXD39tHcFoCINEDQ=",
+    "exports/recipes/dialog/README.md": "sha256-TprCvG8noK53sTTwJVCHD0V1zx6BUW+HP7reUSdyhVk=",
     "exports/recipes/dialog/template.html": "sha256-ekYfQWlHu6z/dh7Wi1W3GZayMjEjxB5ru5nU7CKIqMg=",
-    "exports/recipes/dialog/tokens.css": "sha256-H4mpfW2luSqCo9S9PPrDgpevuK2OSiXDpp7+a+dFeFw=",
-    "exports/recipes/dialog/two-instances.html": "sha256-KqTTacdBcUnD+k4PYaBYhC74nsIJ1Twu1IOaDjQdoFI=",
-    "exports/recipes/text-field/component.css": "sha256-VgGNE3+NVtPUYTJf02aIPHq3JrH5EGckSbwQealUEwU=",
-    "exports/recipes/text-field/example.html": "sha256-OT8OHppA6ssLf5OlKXOIqPBdkCDLa9lXaqsUOtT1SyQ=",
-    "exports/recipes/text-field/foundation.css": "sha256-gItmMJgxTkuTe8+9G3aZQviwGcJ5cQaNANEvpcyOA88=",
+    "exports/recipes/dialog/tokens.css": "sha256-8v2razLbiqxJ36LPLf8rHQG219Ns6nFnyRGKJqh/evs=",
+    "exports/recipes/dialog/two-instances.html": "sha256-g3casyVMkw4tWfmMAkD3Aq9kp+I7vebgRqjir2H/52c=",
+    "exports/recipes/text-field/component.css": "sha256-Oz8HGS0K4usbEkFFSKi93G9yUBnUass/Z8uQbOJZXNc=",
+    "exports/recipes/text-field/example.html": "sha256-bgWf7wJ491bEm4esZkZzyuL263quAotSfoygX24ZkFU=",
+    "exports/recipes/text-field/foundation.css": "sha256-jm66ZdmdAhTyMVQIMKhzVZZm/NhB5ZbLq8g3UASzy98=",
     "exports/recipes/text-field/LICENSE.md": "sha256-vVf/G6WKJRqbyGZCppbAxMh+UAJdSzaPt5xWUujehyU=",
-    "exports/recipes/text-field/manifest.json": "sha256-ObZff1cu6gngs5yKnxm7yLN6N816nHa1rrKJYbiHygs=",
-    "exports/recipes/text-field/markup.html": "sha256-O4CmIRb2RUPigpgQAcre9bSpIRJxN52MMxJW4fTyhpM=",
-    "exports/recipes/text-field/README.md": "sha256-4IdgTG0RNA0xp3IIcosxkwvq7KQdLS2Wiw1TuWxlzas=",
+    "exports/recipes/text-field/manifest.json": "sha256-vgWhdku9jsH/2KoHM1IevuPZ5eN1BsE46QaN1Aj/C7g=",
+    "exports/recipes/text-field/markup.html": "sha256-wARfGY6V60eMUhV8JNGMhY+EnikQvcPlSqkD5WPOULo=",
+    "exports/recipes/text-field/README.md": "sha256-HpwPQAB3ombWhQi6qdKYU8fgIeJAxlbGFP8ovZEdVnw=",
     "exports/recipes/text-field/template.html": "sha256-IlSlLS7sPC3MLqIdxMRQUP4sFnn/58lwM3AFALtdY3c=",
-    "exports/recipes/text-field/tokens.css": "sha256-EqSdsrQqs1NJVLFBDmxFtT0mbcjOiUeAx1G9cTcdpIY=",
-    "exports/recipes/text-field/two-instances.html": "sha256-Abep8m5/si0kuUu3cVGEVzcHqMN1pHkPazmjloND8J0=",
-    "exports/theme.compact.md": "sha256-scHwaXnCWxW392O05sqziYlTLymSaro4g5hSNijAwoo=",
-    "exports/tokens.resolved.json": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY=",
+    "exports/recipes/text-field/tokens.css": "sha256-Z7C9Hx+UzJAtRTBN08cB9BRDeTuCjEQr3xZyD2i0vgU=",
+    "exports/recipes/text-field/two-instances.html": "sha256-JIl9HQHQPYXg+r8lkFfC0x50KKiLyNWAwYm9mdQXGGw=",
+    "exports/theme.compact.md": "sha256-wIvg24me6vAnXYzWXdBmoJsTKtrBSm7GS9yCcb8wgxc=",
+    "exports/tokens.resolved.json": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU=",
     "LICENSE.md": "sha256-Ih5+DpqcNXGWJX6BbYgpt6psmJi9lGcXGJzuiU7elE0=",
     "schemas/json/theme.lock.schema.json": "sha256-y6m+IekX0jzgI6Rhel1Vx33fgz8RIT5A2OPyBL0qlXw=",
-    "spec/accessibility.md": "sha256-XHd+Z74KRN/ftw9YeaZwfrjsI84HmeZJ/3gcllztxnM=",
-    "spec/components/admin-form.md": "sha256-552HA8irB15PND4VGHGFeZXaMMfq4Clhg2azvraweUw=",
-    "spec/components/alert.md": "sha256-QqsY2zBnEhvFDkw54c915inRJn08t3SiL5NorcL1s1s=",
-    "spec/components/avatar.md": "sha256-IAoiogKneg7KNKcSA3eO0A5UkNF/EchPFY1QtCIQ4KM=",
-    "spec/components/badge.md": "sha256-8Zvw++3AM/nW4ZxxU1eymHE7p0h34NBIqw1YfTqVcek=",
-    "spec/components/breadcrumbs.md": "sha256-+zfv/ZG8YAXVNjtYLBOgLARWjZGgW8JcQSOs7v+PPJw=",
-    "spec/components/button-group.md": "sha256-za+0JAp4yj8SadprNAahyIfwMdq1DJzx1TfKvhUWOcM=",
-    "spec/components/button.md": "sha256-BIJgU88v/JaTsHJF+I64GyX4hw1PWYyB30y+gWG1sAU=",
-    "spec/components/card.md": "sha256-mQoFcvz2rvbVApLHRTDbY5NsD708eBUzZ9oLpQpc5/Q=",
-    "spec/components/chart.md": "sha256-C/qy6xNIQZeuqvtG7d5hkZAZ8INPfr1apXjR/+77B/Q=",
-    "spec/components/checkbox.md": "sha256-wyTZ9Xk6DM2Hb7DYWaCKSWsI/ScYNT0KPLfNypqILRU=",
-    "spec/components/chip.md": "sha256-tR2zogsVatt5RHKNZshHMe8ImtMWk8An0y4wyGZg62M=",
-    "spec/components/code-editor.md": "sha256-5EQMQ8k0jwP7TQH7/fXTtaucTS7KLMqMLPK+LHX98aQ=",
-    "spec/components/combobox.md": "sha256-8iYhH/WxT9GeLUCbGJqmBma/TPpB+nn6fhhcboll6w4=",
-    "spec/components/command-palette.md": "sha256-sCIa621jsqaArWhWUmGAU7C8AbBpY27bDUs6YvSRl7Q=",
-    "spec/components/compact-dashboard.md": "sha256-I0zt3CIPnS/SHKhTmwXLQC60z7icLRFn3rD4u5hjxg8=",
-    "spec/components/data-table.md": "sha256-yPy9hgPKE1FgUljsi5W6fqlj+gB3YBU6TLQM5OMdp3s=",
-    "spec/components/date-picker.md": "sha256-mjGk4fMBX5vOOdmZh0CIOx1KKkG4WBOkx4WBkMGq+yI=",
-    "spec/components/description-list.md": "sha256-xBkPh6RBX1MEEB2+vtGlYsaxpDHMDTkddrE0F9pXfTA=",
-    "spec/components/diagnostics.md": "sha256-f/fHsg7YnWtg0IN8FRKcLqlKzVnPaezFtYFquydZVuQ=",
-    "spec/components/dialog.md": "sha256-zKmPZU3GdJ1IPYbCO6KY7oizbzzKXSdlw3ujXc+R3bE=",
-    "spec/components/diff-view.md": "sha256-E7iylkX7lh1IYs2db2VKpV8wb7wuDbtG8Sg8yMdhFuE=",
-    "spec/components/disclosure.md": "sha256-qkipfDChjal5M8+VUiFpNpIfM0L/v4KgHoJW1zGRY1k=",
-    "spec/components/drawer.md": "sha256-UcCTj/kCnSFYryYYP6qGJWhBQe/HmxN2uK7izbMw9a0=",
-    "spec/components/editor-search.md": "sha256-1LeWAVax9yrCr3VjlUnEodk8ZYvw8ZMwxae9/ohfv/g=",
-    "spec/components/empty-state.md": "sha256-6rtQdRIQan/TZG4ZOCeqswr5srKwbv1s3rn5hEszI2U=",
-    "spec/components/error-state.md": "sha256-g4neCzLQxQdfGcRNfU4pgaQO/r4wMgWdmEkFlS6M7Hc=",
-    "spec/components/field.md": "sha256-B8hTku4uAttoaE3Os73M1VXy7f6s/quoleTNtS/1FlQ=",
-    "spec/components/fieldset.md": "sha256-A/vskREFO0JeQ4aAtr6CIQLE1ukRcKQKRdvgGNlhmBY=",
-    "spec/components/file-browser.md": "sha256-KZhhw6l6Ju3/RLhNiuQy9ZrdlN8euJ8O9oXffotalwI=",
-    "spec/components/file-input.md": "sha256-YCjdW2PbufzyfvesNFSv1szRoZ18abR/J2P8cHJ/jCM=",
-    "spec/components/filterable-table.md": "sha256-LcJDZ5d68XqVNuT/7JmOqKBuvXUcLQup6U2nF3ICtoU=",
-    "spec/components/form-builder.md": "sha256-fI8gO7Qpmlx4ONJZ8KHHfX3PgJsBaSDBDrlJTnkgAiU=",
-    "spec/components/i3-window-frame.md": "sha256-GNFcG4sKiYX6yJo3DiokOCcxUieia7dDg/3+P+PUV5c=",
-    "spec/components/icon-button.md": "sha256-eXo3eOYPDJEg64z2izl5nDhsSmWk6NfhWYIyH7sP/rE=",
-    "spec/components/kbd.md": "sha256-i1Kc6CSqEheGuYWyy9GkvwZmc+YRSqYLg5aF6QoPljo=",
-    "spec/components/link.md": "sha256-SE05TsWmp81FA+qD5CaXKW3KtAU+7+hH7v8wpdVwknI=",
-    "spec/components/list.md": "sha256-t6X3JGSVZXpTzWG4kW9fZ42aueoboFKSUjIkZ8e9GBU=",
-    "spec/components/loading-indicator.md": "sha256-Dxjle5SuLF8jv5MfILOWBv823pJ5BqA9artA2FAp6eU=",
-    "spec/components/menu.md": "sha256-B9XKFwIaFAY2QAf30HOz3KoVN36co/yExPS0zze4NoM=",
-    "spec/components/multiselect.md": "sha256-d3ICBkkARr9y+KfGVdMhr+5zoq9ltg6deWYlzk4ZQx0=",
-    "spec/components/number-field.md": "sha256-Pcb29byKH5op8ohJYPZPhLJACLyifXfCIYIhua6ENxU=",
-    "spec/components/pagination.md": "sha256-xVquvG2h+JNXIErO3X9OOG+brSSdFyXFthz9GiWeJZo=",
-    "spec/components/popover.md": "sha256-BHgcSzgHh2+5662U/+fmjlTikp/nQrk5SyLXmYa0PfI=",
-    "spec/components/progress.md": "sha256-aepD6XR1QBa2gbl3gt04egKZtl9jXxcQ7AKG2H/beLw=",
-    "spec/components/radio-group.md": "sha256-8aPv8rJriLvBTJgvRK7LVOzQVtGKHQlD4We902RkXYw=",
-    "spec/components/range.md": "sha256-AWxTDEzhO1ndkGRh+hTb2t2g4d7xyP/7KhhI89gM2WQ=",
-    "spec/components/repeater.md": "sha256-hzu1CKkYc9S3yFMEzuM3QtfuTCvkbEuO0XUGQ7vwfc8=",
-    "spec/components/search-field.md": "sha256-ZGFvtJTINbupQiFER1NFXuUvBgPMR/1cg31De9DxSFI=",
-    "spec/components/segmented-control.md": "sha256-NMIGLiyjoOH7jUAczV7MyLKqMhk1gGJWrYap6DasHmQ=",
-    "spec/components/select.md": "sha256-zNZsM/7CxxCg5vsLov3HrdrI5MY4NRv+AbcfvUg4TO8=",
-    "spec/components/settings-panel.md": "sha256-QS0hwq2um8Oa8Sdpe/0fsL3U5vACPISLKqGuTqfHE30=",
-    "spec/components/sidebar-nav.md": "sha256-hbpE3D/qM/Zop/pTFZ2ZYH0Jbm6mVdJ04wEZ+8puX5M=",
-    "spec/components/skeleton.md": "sha256-UROFpM9/H1uUul1t/Vhg4pZiJAL2tQkLVIKU1YhkuoQ=",
-    "spec/components/skip-link.md": "sha256-UbBYqrit9Znnf4Hx3U3Y5v7KTDm7/VMJplbLvONOjwQ=",
-    "spec/components/switch.md": "sha256-XJ3+10oUPCvhqkH/lWu8dWsqL0brJI7oymez7AGYSHY=",
-    "spec/components/table.md": "sha256-xMtevi0kAWa6Ez1NhRIB5xMC+l2VrE7NhvV2mzosnD8=",
-    "spec/components/tabs.md": "sha256-A9VYQUj7eb4EWPhcq5K0eWcqS+kGRpjINoTUQ0vyAlA=",
-    "spec/components/terminal.md": "sha256-ydr8Qu2izMSVnyX96RlUdM5Xo7UBmqaQpq8PruqvEo0=",
-    "spec/components/text-field.md": "sha256-nLOL2IloE3AKZ7EqGA0iIBUVuEZf+iVcTJcBn0x8y2Y=",
-    "spec/components/textarea.md": "sha256-0NG50DJ8RhLyEA7FMmZhpAAz0wEuF2o9U+gNmMuQMQU=",
-    "spec/components/time-picker.md": "sha256-SDQ5HQs8TQzqLjegvaOd4mfzPxKgmxU2/eDhcYXldOA=",
-    "spec/components/timeline.md": "sha256-ciH0oXKQos8+8qMH7/D7QNJ3EDPt/2QrQd+AJ/2FoBI=",
-    "spec/components/toast.md": "sha256-H5/i4eMMjz8qwXVXczHuxv/cAeygWTT/SV2V4i/5/zM=",
-    "spec/components/toolbar.md": "sha256-J40C5wSQgnF2IV7G1c2w6czYqg0moflH+wu0Mtdm/rw=",
-    "spec/components/tooltip.md": "sha256-aGBiTFfJs2Fzu7eOAPuYH/cIn0jqGBOAiuZwGfGxfmo=",
-    "spec/components/tree.md": "sha256-TUax9A1lljFb3i52Y94X+hCB+cwsLuNm1deqfQu64cs=",
-    "spec/components/wizard.md": "sha256-r8OMQZiTErtvTONWGBw+Cd7lemejKxn/Lwx+kkiKRNo=",
-    "spec/foundations.md": "sha256-kMZMhBc+eTtqFLh6K0GYY8xjiae2uc9YYQ5FkZ80deQ=",
-    "spec/identity.md": "sha256-+9KCn1sARgi1lOZTLt537O4wpRxdspCJf+Dkgx9vQ7o=",
-    "spec/portability.md": "sha256-sOIeL4x2Vi+QX4Jmje5EpcrkRJDXKz1IszpUlL/b5IY=",
+    "spec/accessibility.md": "sha256-v0OBqI/EIrp4qIargTKTGld4OB6awm5yFGOImprAmh0=",
+    "spec/components/admin-form.md": "sha256-psXNtkf0hWi0tt/m7vTi3eRJmtJhprzxyNBFodDbAkw=",
+    "spec/components/alert.md": "sha256-k9IwqPx1bXIWXpfPH18gn+BNvV/vzePBDlPQFEkKTa0=",
+    "spec/components/avatar.md": "sha256-Fw+mYmdrJ7dafmDLnuWGb/ZJRv+QUtrz68tTom0bGkk=",
+    "spec/components/badge.md": "sha256-S7/ZvAeyQoFVJu2e/Rf9d+GzJ9PgYF1X+HWp4gg3HeQ=",
+    "spec/components/breadcrumbs.md": "sha256-qfag+jaZ1ewmWiJioQBkvNTEqfAQTx0wjZSroXmdaRQ=",
+    "spec/components/button-group.md": "sha256-BovfgrbEiWx0o88TP7Bhe9FI2ZXvSnFkBxK7NQ2HwCc=",
+    "spec/components/button.md": "sha256-9UFCI3pyeX01/OaxTSkn0azT/+jrJm8hI1VJQVyUQg4=",
+    "spec/components/card.md": "sha256-ux2pS6zVRvMmOmnODUuZwbtWyylrgl7ZO38VlMPUUV4=",
+    "spec/components/chart.md": "sha256-PjKnFosDg/xhEVmQysfTsbsYZAFNX+a7BvRtiutPubc=",
+    "spec/components/checkbox.md": "sha256-HZnoDCHM05Z0DZaceewmf2wMw07YUUdxD3E4ZXsbpwQ=",
+    "spec/components/chip.md": "sha256-5qHXu5lXCe63CSVzuC22OtUaWtYYnR0tLeIIIyJoFPU=",
+    "spec/components/code-editor.md": "sha256-yTWy6hpE8boZgYrfCtF7Rn2VJc2SFHWuxg+mrfOIx/Y=",
+    "spec/components/combobox.md": "sha256-UBmG6Ete1ugeivGWwSysOZRr6drMX5ui9t56HQiGbiI=",
+    "spec/components/command-palette.md": "sha256-S6aeFdk57991A+veoYUhEDNcxKY4mFoEdOafXR/eRhg=",
+    "spec/components/compact-dashboard.md": "sha256-3xhw1Niyjz687vwrh5HI9E+EP2GEuZR1b1epUVWJ4/c=",
+    "spec/components/data-table.md": "sha256-Ijwt97vF+B+JRe2l3o+ujoywHtCcDV3/axgRGFpCNo0=",
+    "spec/components/date-picker.md": "sha256-w6FxYrua5F0F3CZ5q/1d3QETj7hbp9UV9gtFF73ZA+U=",
+    "spec/components/description-list.md": "sha256-zJhCUr4PEnyTPu/pL4N9jN9KGa+taCGLaSPw+NrV21s=",
+    "spec/components/diagnostics.md": "sha256-8T5UvfzkYTEJF6gaiNttNqP8ifxW1dPhaFh02z0Lxac=",
+    "spec/components/dialog.md": "sha256-b2BJ7XMfsSQhSxJZxHIyIrj+hdFOaPEoaAHbQBWKOpQ=",
+    "spec/components/diff-view.md": "sha256-0CpK8Pqb6Pt1R2gYNaBa65fFP7o5OWh0UKNOpeu1GwM=",
+    "spec/components/disclosure.md": "sha256-rnAShwjz/LjOxUwgEUB9K9AcJLCK533MWI9n7esOs9c=",
+    "spec/components/drawer.md": "sha256-+EnooZpUoKmY4KSTX7056qGNyTgcgY4/Nmj/CnRYjm0=",
+    "spec/components/editor-search.md": "sha256-V9ONlYLC7TMXYDXFTr+TyuVXB70BdieZ+zCQBTMIH2M=",
+    "spec/components/empty-state.md": "sha256-Qs2POTFLbwXIRc/fcUq0FriKIiE5Y06L6qiLHy29Tqc=",
+    "spec/components/error-state.md": "sha256-3/8CQ2QuxFQcoYrIpMYDgtkNlaeil3Wh6JRpuDSjjXI=",
+    "spec/components/field.md": "sha256-DMAJ8uoHkjvDWOp2reVfovUtg9L/gOHoihRx0ZpWKHo=",
+    "spec/components/fieldset.md": "sha256-Ih1ghBPNJ59e7/u0aAcYThVHcd/uTe69PZzUyhLi97s=",
+    "spec/components/file-browser.md": "sha256-M9nhm9ulCC23CGJhOSi4WHOTWtLYoGIvqxFId1Y5dIA=",
+    "spec/components/file-input.md": "sha256-+PwS8gVmIMzww6YgaPLt/yAuOX1u5/gR2Kq8Ds3DM5k=",
+    "spec/components/filterable-table.md": "sha256-K+VKqw6UT2wVbygY2S6I00p7x6zKpIcUGMzRB1uMtgo=",
+    "spec/components/form-builder.md": "sha256-V5WtRTHNtU+bw26E5at8yy6zM/H3yWrgJ9hyaCqdhqk=",
+    "spec/components/i3-window-frame.md": "sha256-ZyKxf1vKn+lL/5DjpNr/OxQpa9Xy4ecUkt7XX/frQxk=",
+    "spec/components/icon-button.md": "sha256-aFcvTtOdvtA++wdEkbUp7Kd+ON61YKR/mLdAQgzqX4k=",
+    "spec/components/kbd.md": "sha256-ePP2aUzSxrY6kofr2hyOXG1LNt2X6qfjAn3D/CPSulg=",
+    "spec/components/link.md": "sha256-U6gy7cpFCS4vRhNDhSsfgEmdFghp6R/TxPri60gmtN4=",
+    "spec/components/list.md": "sha256-0vKj8KQBCIxT16436RwCr9UGr9m1jEuHTEzVJvflp/Q=",
+    "spec/components/loading-indicator.md": "sha256-Nz6thMuU1pQRLWQopVR2vxKT6vHeB5wRDlD61JdHYrA=",
+    "spec/components/menu.md": "sha256-3uljZ67SkAqeNTjZO12g1Z1myutuqMzwO45kCex9z84=",
+    "spec/components/multiselect.md": "sha256-/qFc5Y9z5MXvIWJlctXkEpdLauOTNLyf/CJt5YokTlg=",
+    "spec/components/number-field.md": "sha256-NS5+KRlqJ7sRh9OOiR5M9JkAty9jlhgxFtro1ItiGWU=",
+    "spec/components/pagination.md": "sha256-M77Hy8WWvcMAiZ3jGq37OTmdReLB4tOQR0v4vBQ2A88=",
+    "spec/components/popover.md": "sha256-Wwx/otpwO00iwrNGW0wsrsPPiUMzvKFhu+zlZmQiCJg=",
+    "spec/components/progress.md": "sha256-I7GnDAGR4AUd1rICuRFm7xiXMpPpBBz3iUKtcRZze+k=",
+    "spec/components/radio-group.md": "sha256-FmzhuvFGRGs/RmqPNPMaR0VprTM3+YyX1IxlN6ffTms=",
+    "spec/components/range.md": "sha256-KzZBqVpLykhc22DnfsUQsuhVIMWI8MDW0eU0AWGRHUU=",
+    "spec/components/repeater.md": "sha256-a8nFWIE4fnlD6VBTJ2mDqvU+XjMR5qEXTLYVtFPINlA=",
+    "spec/components/search-field.md": "sha256-c2fJD3Btbi0xEYDUrm/wf6U20cUdl2ONOeXU7Tb+fP8=",
+    "spec/components/segmented-control.md": "sha256-4Povju4RVLbBqVR/SC5KGeJIloJ/f2rahKeuvjLWXVM=",
+    "spec/components/select.md": "sha256-e/gO3b/m2iJvUN7pZjQW7RlKqiORY3QjpH9eJjcnJFY=",
+    "spec/components/settings-panel.md": "sha256-4JKXOuiJ6FHZQKiXHNnmnoeb1oUNRE3sYZBlC1rmiAM=",
+    "spec/components/sidebar-nav.md": "sha256-1AFqqG5Q4FgdDO/zjFnJ0h9XQYso3TLxYm7T4cKC0rs=",
+    "spec/components/skeleton.md": "sha256-bv6PPl2Uvm0luCHBJleAyotQ3bDYUqaXXPPzSERyJm0=",
+    "spec/components/skip-link.md": "sha256-5DGhkFCk8fRb7BD4LxqufBV0+BEHEwhCiBluSAKaLNE=",
+    "spec/components/switch.md": "sha256-RmfQDcNEu7OoNR/M00Tr4FUyOGJCFejAAfLLku6PR+Q=",
+    "spec/components/table.md": "sha256-feSdaQUzQZXWbDOQVHMqjnID3N6V9jO1IO4gxK6pJwA=",
+    "spec/components/tabs.md": "sha256-wtvKIUeaBxeqnOSramG1b6DhR2I2sqhwtNRN4BHx3XE=",
+    "spec/components/terminal.md": "sha256-eHDjs57Tj2Uz/81ZACO7UADwjN4lhYiKdiJ6c/Ox9vw=",
+    "spec/components/text-field.md": "sha256-iLHCdTuJlbSfqRTnHiZJ8P6xV4HrD4S5Bzt5SBP6zP4=",
+    "spec/components/textarea.md": "sha256-XNETTxBG2UGOUemf6A0wBAzYpM08MgULdVSwdUlxU0k=",
+    "spec/components/time-picker.md": "sha256-Ik5byARst70oTYVgn6FO13ThMfx0E7IZCxgEZrbqbkM=",
+    "spec/components/timeline.md": "sha256-6CbjCtkUPHYk/x2Q+CHew9ZahoJB5RoujkQr8iEM+gc=",
+    "spec/components/toast.md": "sha256-yklzPt6YGS5BYuwEfeJSFgOnjvY+U7LsT4gOhBr7BxI=",
+    "spec/components/toolbar.md": "sha256-sdHLFiEMZfZkGnAmNZTMtuRmM3asshKnwC9N569OFcc=",
+    "spec/components/tooltip.md": "sha256-QBHgaDiiPB/9VbOhpC2u8kydSv3XBQLquiEDN1hsDuQ=",
+    "spec/components/tree.md": "sha256-xzH6p2tk0R5fZ4uCs4AAKahHWG410WexZKTKPo/jHzM=",
+    "spec/components/wizard.md": "sha256-N+fEu9MTa4QwIjeJcMtlOKjZ3OdS5ebVH1tA+BSU8cs=",
+    "spec/foundations.md": "sha256-P2lPH3Q67xXdaM1bvjZe0I5cDvPSrPLaV/Qzhzu0/QQ=",
+    "spec/identity.md": "sha256-TrKV9nW1uFJMYUzZSGsa/vcXkD0NDIlcjCHJgNEz4YA=",
+    "spec/portability.md": "sha256-KGDmt7UGop7xbh1z07rkGqGZLFz9+BIPlr8XIXDm6o0=",
     "theme.json": "sha256-4NYtr9+dtCjVshxiuC/YkB+7FzdUbd4E60lcZknHTLE="
   },
   "components": {
@@ -1255,10 +1263,10 @@
         "color.text.bright",
         "color.text.default",
         "color.text.muted",
+        "focus.offset",
         "font.weight.bold",
         "radius.none",
         "space.12",
-        "space.2",
         "space.32"
       ],
       "recipeFiles": [],
@@ -1307,7 +1315,6 @@
       "tokens": [
         "color.interaction.focus.ring",
         "color.interaction.hover.bg",
-        "color.interaction.hover.bg-strong",
         "color.surface.default",
         "color.text.bright",
         "color.text.default",
@@ -1327,21 +1334,26 @@
       ],
       "tokens": [
         "border.width.default",
+        "color.action.secondary.bg",
+        "color.action.secondary.border",
+        "color.action.secondary.hover-bg",
+        "color.action.secondary.pressed-bg",
+        "color.action.secondary.text",
+        "color.border.active",
         "color.border.control",
         "color.border.disabled",
         "color.interaction.disabled.bg",
         "color.interaction.focus.ring",
         "color.surface.default",
-        "color.surface.input",
         "color.text.bright",
         "color.text.default",
         "color.text.disabled",
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "radius.none",
         "space.12",
-        "space.2",
         "space.4",
         "space.8"
       ],
@@ -1450,6 +1462,7 @@
       "tokens": [
         "color.border.control",
         "color.border.default",
+        "color.interaction.focus.ring",
         "color.interaction.focus.ring-container",
         "color.interaction.hover.bg",
         "color.interaction.selection.bg",
@@ -1481,9 +1494,9 @@
         "color.text.bright",
         "color.text.default",
         "color.text.muted",
+        "focus.offset",
         "radius.none",
         "space.12",
-        "space.2",
         "space.8"
       ],
       "recipeFiles": [],
@@ -1527,7 +1540,6 @@
         "color.border.disabled",
         "color.interaction.disabled.bg",
         "color.interaction.focus.ring",
-        "color.interaction.focus.ring-container",
         "color.interaction.hover.bg",
         "color.interaction.hover.bg-strong",
         "color.interaction.pressed.bg",
@@ -1556,9 +1568,7 @@
         "color.code.current-line",
         "color.code.gutter-bg",
         "color.code.gutter-rule",
-        "color.code.hued.number",
         "color.code.hued.string",
-        "color.code.hued.type",
         "color.code.indent-guide",
         "color.code.line-number",
         "color.code.line-number-active",
@@ -1585,9 +1595,7 @@
         "color.interaction.selection.inactive-bg",
         "color.interaction.selection.inactive-text",
         "color.surface.sunken",
-        "color.text.default",
-        "color.text.muted",
-        "color.text.subtle"
+        "color.text.muted"
       ],
       "recipeFiles": [],
       "recipeTokens": []
@@ -1639,6 +1647,12 @@
       "tokens": [
         "border.width.default",
         "border.width.emphasis",
+        "color.action.secondary.bg",
+        "color.action.secondary.border",
+        "color.action.secondary.hover-bg",
+        "color.action.secondary.pressed-bg",
+        "color.action.secondary.text",
+        "color.border.active",
         "color.border.control",
         "color.border.overlay",
         "color.border.selected-indicator",
@@ -1654,10 +1668,10 @@
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "radius.none",
         "space.12",
         "space.16",
-        "space.2",
         "space.8"
       ],
       "recipeFiles": [],
@@ -1671,21 +1685,26 @@
       ],
       "tokens": [
         "border.width.default",
+        "color.action.secondary.bg",
+        "color.action.secondary.border",
+        "color.action.secondary.hover-bg",
+        "color.action.secondary.pressed-bg",
+        "color.action.secondary.text",
+        "color.border.active",
         "color.border.control",
         "color.border.divider",
         "color.interaction.focus.ring",
         "color.surface.chrome",
         "color.surface.default",
-        "color.surface.input",
         "color.text.bright",
         "color.text.default",
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "font.size.h2",
         "radius.none",
         "space.12",
-        "space.2",
         "space.8"
       ],
       "recipeFiles": [],
@@ -1706,7 +1725,6 @@
         "color.border.divider",
         "color.border.strong",
         "color.interaction.focus.ring",
-        "color.interaction.focus.ring-container",
         "color.interaction.hover.bg",
         "color.interaction.selection.bg",
         "color.interaction.selection.text",
@@ -1767,9 +1785,9 @@
         "color.text.bright",
         "color.text.default",
         "color.text.muted",
+        "focus.offset",
         "radius.none",
         "space.12",
-        "space.2",
         "space.4",
         "space.8"
       ],
@@ -1866,29 +1884,39 @@
         "color.action.destructive.filled-text",
         "color.action.destructive.hover-bg",
         "color.action.destructive.hover-text",
+        "color.action.destructive.pressed-bg",
+        "color.action.destructive.text",
         "color.action.primary.bg",
         "color.action.primary.border",
         "color.action.primary.hover-bg",
+        "color.action.primary.pressed-bg",
         "color.action.primary.text",
         "color.action.secondary.bg",
         "color.action.secondary.border",
         "color.action.secondary.hover-bg",
+        "color.action.secondary.pressed-bg",
         "color.action.secondary.text",
         "color.action.tertiary.hover-bg",
         "color.action.tertiary.text",
         "color.border.active",
         "color.border.control",
+        "color.border.disabled",
         "color.border.overlay",
         "color.code.caret",
+        "color.interaction.disabled.bg",
+        "color.interaction.focus.ring",
         "color.interaction.focus.ring-container",
+        "color.interaction.pressed.bg",
         "color.interaction.text-selection.bg",
         "color.interaction.text-selection.text",
+        "color.status.danger.text",
         "color.surface.backdrop",
         "color.surface.canvas",
         "color.surface.input",
         "color.surface.overlay",
         "color.text.bright",
         "color.text.default",
+        "color.text.disabled",
         "color.text.muted",
         "density.comfortable.control-height",
         "density.comfortable.control-padding-x",
@@ -1906,6 +1934,7 @@
         "font.size.ui-md",
         "font.size.ui-sm",
         "font.weight.bold",
+        "motion.duration.fast",
         "motion.duration.slow",
         "radius.none",
         "space.12",
@@ -1939,7 +1968,6 @@
         "color.diff.removed.emphasis",
         "color.diff.removed.gutter",
         "color.interaction.focus.ring",
-        "color.interaction.focus.ring-container",
         "color.interaction.hover.bg",
         "color.interaction.hover.bg-strong",
         "color.interaction.selection.bg",
@@ -1974,9 +2002,9 @@
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "radius.none",
         "space.12",
-        "space.2",
         "space.8"
       ],
       "recipeFiles": [],
@@ -2015,6 +2043,12 @@
       ],
       "tokens": [
         "border.width.default",
+        "color.action.secondary.bg",
+        "color.action.secondary.border",
+        "color.action.secondary.hover-bg",
+        "color.action.secondary.pressed-bg",
+        "color.action.secondary.text",
+        "color.border.active",
         "color.border.control",
         "color.code.search-current-bg",
         "color.code.search-current-text",
@@ -2029,9 +2063,9 @@
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "radius.none",
         "space.12",
-        "space.2",
         "space.8"
       ],
       "recipeFiles": [],
@@ -2067,6 +2101,12 @@
       "tokens": [
         "border.width.default",
         "border.width.emphasis",
+        "color.action.secondary.bg",
+        "color.action.secondary.border",
+        "color.action.secondary.hover-bg",
+        "color.action.secondary.pressed-bg",
+        "color.action.secondary.text",
+        "color.border.active",
         "color.border.control",
         "color.border.disabled",
         "color.interaction.disabled.bg",
@@ -2074,16 +2114,15 @@
         "color.status.danger.border",
         "color.status.danger.text",
         "color.surface.default",
-        "color.surface.input",
         "color.text.bright",
         "color.text.default",
         "color.text.disabled",
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "radius.none",
         "space.12",
-        "space.2",
         "space.8"
       ],
       "recipeFiles": [],
@@ -2142,6 +2181,12 @@
       "tokens": [
         "border.width.default",
         "border.width.emphasis",
+        "color.action.secondary.bg",
+        "color.action.secondary.border",
+        "color.action.secondary.hover-bg",
+        "color.action.secondary.pressed-bg",
+        "color.action.secondary.text",
+        "color.border.active",
         "color.border.control",
         "color.border.divider",
         "color.border.selected-indicator",
@@ -2153,10 +2198,10 @@
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "radius.none",
         "space.12",
         "space.16",
-        "space.2",
         "space.8"
       ],
       "recipeFiles": [],
@@ -2299,7 +2344,6 @@
         "color.icon.default",
         "color.interaction.disabled.bg",
         "color.interaction.focus.ring",
-        "color.interaction.focus.ring-container",
         "color.interaction.pressed.bg",
         "color.interaction.selection.bg",
         "color.interaction.selection.text",
@@ -2325,6 +2369,7 @@
         "color.text.bright",
         "color.text.default",
         "color.text.muted",
+        "focus.offset",
         "radius.none",
         "space.12",
         "space.2",
@@ -2343,7 +2388,7 @@
         "color.border.selected-indicator",
         "color.icon.default",
         "color.interaction.focus.ring",
-        "color.interaction.hover.bg-strong",
+        "color.interaction.hover.bg",
         "color.surface.canvas",
         "color.surface.default",
         "color.surface.raised",
@@ -2365,7 +2410,6 @@
         "color.border.control",
         "color.border.divider",
         "color.interaction.focus.ring",
-        "color.interaction.focus.ring-container",
         "color.interaction.hover.bg",
         "color.interaction.selection.bg",
         "color.interaction.selection.inactive-bg",
@@ -2408,7 +2452,6 @@
         "color.border.overlay",
         "color.icon.decorative",
         "color.interaction.focus.ring",
-        "color.interaction.focus.ring-container",
         "color.interaction.hover.bg",
         "color.interaction.hover.bg-strong",
         "color.interaction.pressed.bg",
@@ -2437,6 +2480,11 @@
         "color.action.primary.bg",
         "color.action.primary.hover-bg",
         "color.action.primary.text",
+        "color.action.secondary.bg",
+        "color.action.secondary.border",
+        "color.action.secondary.hover-bg",
+        "color.action.secondary.pressed-bg",
+        "color.action.secondary.text",
         "color.border.active",
         "color.border.control",
         "color.border.disabled",
@@ -2510,7 +2558,6 @@
       ],
       "tokens": [
         "color.interaction.focus.ring",
-        "color.interaction.focus.ring-container",
         "color.interaction.hover.bg",
         "color.interaction.pressed.bg",
         "color.interaction.selection.bg",
@@ -2532,21 +2579,26 @@
       ],
       "tokens": [
         "border.width.default",
+        "color.action.secondary.bg",
+        "color.action.secondary.border",
+        "color.action.secondary.hover-bg",
+        "color.action.secondary.pressed-bg",
+        "color.action.secondary.text",
+        "color.border.active",
         "color.border.control",
         "color.border.overlay",
         "color.interaction.focus.ring",
         "color.surface.default",
-        "color.surface.input",
         "color.surface.overlay",
         "color.text.bright",
         "color.text.default",
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "radius.none",
         "space.12",
         "space.16",
-        "space.2",
         "space.8"
       ],
       "recipeFiles": [],
@@ -2621,6 +2673,7 @@
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "radius.none",
         "space.12",
         "space.2",
@@ -2637,6 +2690,12 @@
       ],
       "tokens": [
         "border.width.default",
+        "color.action.secondary.bg",
+        "color.action.secondary.border",
+        "color.action.secondary.hover-bg",
+        "color.action.secondary.pressed-bg",
+        "color.action.secondary.text",
+        "color.border.active",
         "color.border.control",
         "color.border.disabled",
         "color.interaction.disabled.bg",
@@ -2649,9 +2708,9 @@
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "radius.none",
         "space.12",
-        "space.2",
         "space.24",
         "space.8"
       ],
@@ -2727,7 +2786,6 @@
         "radius.none",
         "space.12",
         "space.16",
-        "space.2",
         "space.24",
         "space.4",
         "space.8"
@@ -2806,7 +2864,6 @@
         "color.icon.decorative",
         "color.icon.default",
         "color.interaction.focus.ring",
-        "color.interaction.focus.ring-container",
         "color.interaction.hover.bg",
         "color.interaction.pressed.bg",
         "color.interaction.selection.bg",
@@ -2837,10 +2894,10 @@
         "color.text.bright",
         "color.text.default",
         "color.text.muted",
+        "focus.offset",
         "radius.none",
         "space.12",
-        "space.16",
-        "space.2"
+        "space.16"
       ],
       "recipeFiles": [],
       "recipeTokens": []
@@ -2895,7 +2952,6 @@
         "color.border.divider",
         "color.border.strong",
         "color.interaction.focus.ring",
-        "color.interaction.focus.ring-container",
         "color.interaction.hover.bg",
         "color.interaction.selection.bg",
         "color.interaction.selection.inactive-bg",
@@ -3098,6 +3154,7 @@
         "color.code.caret",
         "color.interaction.disabled.bg",
         "color.interaction.focus.ring",
+        "color.interaction.focus.ring-container",
         "color.interaction.hover.bg",
         "color.status.danger.border",
         "color.status.danger.text",
@@ -3129,9 +3186,9 @@
         "color.text.bright",
         "color.text.default",
         "color.text.muted",
+        "focus.offset",
         "radius.none",
         "space.12",
-        "space.2",
         "space.4"
       ],
       "recipeFiles": [],
@@ -3149,7 +3206,7 @@
         "color.action.tertiary.text",
         "color.border.overlay",
         "color.interaction.focus.ring",
-        "color.interaction.hover.bg-strong",
+        "color.interaction.hover.bg",
         "color.status.danger.border",
         "color.status.danger.fill",
         "color.status.danger.on-fill",
@@ -3240,10 +3297,10 @@
         "color.text.muted",
         "density.comfortable.control-height",
         "density.compact.control-height",
+        "focus.offset",
         "radius.none",
         "space.12",
         "space.16",
-        "space.2",
         "space.8"
       ],
       "recipeFiles": [],
diff --git a/exports/theme.compact.md b/exports/theme.compact.md
index 510926461..8e87cf54d 100644
--- a/exports/theme.compact.md
+++ b/exports/theme.compact.md
@@ -1,5 +1,5 @@
 # j3w1 UI Theme Spec — compact (4.0.0, profile: default)
-<!-- generated by scripts/generate.mjs from tokens/ and spec/ — do not edit. theme: j3w1-theme 4.0.0 · profile: default · sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc= -->
+<!-- generated by scripts/generate.mjs from tokens/ and spec/ — do not edit. theme: j3w1-theme 4.0.0 · profile: default · sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw= -->
 
 Read this first; it is the smallest complete statement of the approved contract.
 Pin a tag or commit and fetch every file at that revision (see `agents/consume.md`). Values marked PROPOSED are not approved.
@@ -7,7 +7,7 @@ Pin a tag or commit and fetch every file at that revision (see `agents/consume.m
 Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens.
 ## Identity
 
-True-black canvas (`#000000`), near-black panels (`#100c0c`) and chrome (`#090707`), with dark-red raised layers, rose interface text (`#e99499`), rose reading text (`#e99499`), near-white content headings (`#f4eeee`), dark-red selections (`#531310`), a bright red focus ring (`#e53935`), 1px square borders, zero radii, one monospace family for chrome, reading and code. Red marks *interaction*: focus, selection, active borders, primary actions. It is not a decoration and it is not applied to everything. Darkness is the canvas; readable content is the priority.
+True-black canvas (`#000000`), near-black panels (`#100c0c`) and chrome (`#090707`), with dark-red raised layers, rose interface and reading text (`#e99499`), near-white content headings (`#f4eeee`), dark-red selections (`#531310`), a bright red focus ring (`#e53935`), 1px square borders, zero radii, one monospace family for chrome, reading and code. Red marks *interaction*: focus, selection, active borders, primary actions; it is not decoration. Darkness is the canvas; readable content is the priority.
 
 Five rules keep an implementation recognisable:
 
@@ -137,6 +137,8 @@ Surfaces, text, borders, interaction, actions and status. The code, diagnostic,
 | `font.size.reading` | `15px` |  |
 | `font.size.code` | `13px` |  |
 | `font.size.terminal` | `13px` | URxvt pixelsize 13. |
+| `font.size.display` | `32px` | Page heroes and metric figures on the portal (D-037). |
+| `font.size.title` | `24px` | Page titles above h1 on the portal (D-037). |
 | `font.size.h1` | `20px` |  |
 | `font.size.h2` | `16px` |  |
 | `font.size.h3` | `13px` |  |
@@ -163,10 +165,10 @@ Every interactive component declares which of these apply and demonstrates every
 | active / pressed | background → `interaction.pressed.bg`; border → `border.active` | border change; no translation |
 | focus-visible | the ring (below) | the ring itself; never a glow or a colour shift alone |
 | selected | fill `interaction.selection.bg` with `interaction.selection.text`; tabs and navigation use a 2px `border.selected-indicator` | `aria-selected` / `aria-current`; a check glyph in lists |
-| selected + focus-visible | the selection fill **and** a ring in the fill's on-fill colour (`interaction.focus.ring-container`, 7.48:1 on the selection) | both visible at once |
+| selected + focus-visible | the selection fill **and** the ordinary ring (rule 1; D-027) | both visible at once |
 | text selected, host keeps the text colour | translucent `interaction.text-selection.tint` (D-036), which also suits hosts that paint the fill over their content; where the host can recolour selected text, `interaction.text-selection.bg` with `interaction.text-selection.text` | the host's selection handles |
 | selected, container inactive | `interaction.selection.inactive-bg` with `interaction.selection.inactive-text`; no ring | lightness drop between the two fills |
-| disabled | `text.disabled`, `border.disabled`, `interaction.disabled.bg`; no hover or pressed styling; still focusable when `aria-disabled` | `disabled` / `aria-disabled`; `cursor: not-allowed`; never opacity |
+| disabled | `text.disabled`, `border.disabled`, `interaction.disabled.bg`; no hover or pressed styling; still focusable when `aria-disabled` | `disabled` / `aria-disabled`; `cursor: not-allowed` (rule 5) |
 | invalid | border → `status.danger.border` at 2px; message in `status.danger.text` with the `✕` glyph; `aria-invalid`; `aria-describedby` | border width 1 → 2px; glyph; message |
 | invalid + focus-visible | the 2px danger border **and** the ring in `interaction.focus.ring-container` at `focus.offset-invalid` | double boundary |
 | read-only | `text.default`; 1px dotted `border.divider` bottom; no fill; focusable; selectable | `readonly`; dotted edge |
@@ -179,7 +181,7 @@ Every interactive component declares which of these apply and demonstrates every
 
 Rules that apply everywhere:
 
-1. **Selection is a fill; focus is a ring.** Neither borrows the other's form. A ring still has to be visible on whatever it sits over: `#e53935` measures 2.52:1 on `action.primary.bg` and 1.13:1 on `status.danger.fill`, which is why the ring recolours on those fills instead of relying on hue. It measures 3.38:1 on the `interaction.selection.bg` recessed by D-027, so a selected row keeps the ordinary control ring.
+1. **Selection is a fill; focus is a ring.** Neither borrows the other's form. The ring must reach 3:1 on whatever it sits over: `#e53935` falls below it on `action.primary.bg` and `status.danger.fill`, so the ring recolours on those fills; it meets it on `interaction.selection.bg` (D-027), so a selected row keeps the ordinary control ring.
 2. **Focus ring (D-006; component mapping clarification D-015).** Controls and rows: `outline: 1px dashed {color.interaction.focus.ring}; outline-offset: -2px`. Focusable containers (panes, windows, dialogs, cards): `outline: 2px solid {color.interaction.focus.ring-container}; outline-offset: -3px`. On filled surfaces use the component's explicit ring mapping: primary buttons and checked controls use `interaction.focus.ring-container` where declared; destructive buttons use their declared on-fill text role. The selection fill is the exception and takes the ordinary ring, on the measurement in rule 1. Keep the control or container geometry independently of the colour mapping. `:focus:not(:focus-visible)` draws nothing. Forced-colors mode uses `Highlight`. A host focus indicator is never removed without this replacement.
 3. **Never colour-only.** Every state and every status carries a second channel: a glyph (`✕ ! ✓ i ·`), a border width, an underline pattern, or an ARIA state. Charts carry pattern fills.
 4. **Hover changes fills and borders, never text colour alone**, and only on hover-capable pointers.
@@ -215,11 +217,11 @@ Tokens: backdrop.bg → `color.surface.backdrop` (rgb(0 0 0 / 65%)); root.bg →
 
 ### link — Link
 
-The native anchor for navigation; always underlined in the link-underline role, hover fills with the strong hover surface, the current page carries a 2px indicator bar. Status: specified, demonstrated, test implemented. Site: https://j3w1.github.io/theme/reference/#c-link. JSON: `exports/components/link.json`.
+The native anchor for navigation; always underlined in the link-underline role, hover fills with the hover surface, the current page carries a 2px indicator bar. Status: specified, demonstrated, test implemented. Site: https://j3w1.github.io/theme/reference/#c-link. JSON: `exports/components/link.json`.
 
 States: default, hover, focus-visible, visited, current.
 
-Tokens: root.text → `color.text.link` (#f73f35); root.underline → `color.text.link-underline` (#dc282e); root.text-hover → `color.text.link-hover` (#f4eeee); root.bg-hover → `color.interaction.hover.bg-strong` (#630f0d); root.ring → `color.interaction.focus.ring` (#e53935); root.text-visited → `color.text.link` (#f73f35); root.text-current → `color.text.bright` (#ffa2a7); root.indicator → `color.border.selected-indicator` (#e53935); icon.stroke → `color.icon.default` (#e99499).
+Tokens: root.text → `color.text.link` (#f73f35); root.underline → `color.text.link-underline` (#dc282e); root.text-hover → `color.text.link-hover` (#f4eeee); root.bg-hover → `color.interaction.hover.bg` (#1c0a09); root.ring → `color.interaction.focus.ring` (#e53935); root.text-visited → `color.text.link` (#f73f35); root.text-current → `color.text.bright` (#ffa2a7); root.indicator → `color.border.selected-indicator` (#e53935); icon.stroke → `color.icon.default` (#e99499).
 
 ### menu — Menu
 
@@ -227,7 +229,7 @@ A menu button that opens a list of actions on the raised surface inside a 1px ov
 
 States: default, hover, focus-visible, open, closed, disabled, checked, selected.
 
-Tokens: button.text → `color.text.default` (#e99499); button.bg → `color.surface.default` (#100c0c); button.border → `color.border.control` (#a3676b); button.bg-hover → `color.interaction.hover.bg` (#1c0a09); button.bg-open → `color.interaction.pressed.bg` (#420f0c); button.border-open → `color.border.active` (#e53935); button.ring → `color.interaction.focus.ring` (#e53935); surface.bg → `color.surface.raised` (#160b0b); surface.border → `color.border.overlay` (#e53935); item.text → `color.text.default` (#e99499); item.bg-hover → `color.interaction.hover.bg-strong` (#630f0d); item.text-hover → `color.text.link-hover` (#f4eeee); item.text-disabled → `color.text.disabled` (#8a5559); active.bg → `color.interaction.selection.bg` (#531310); active.text → `color.interaction.selection.text` (#f4eeee); active.ring → `color.interaction.focus.ring-container` (#ffa2a7); check.glyph → `color.text.bright` (#ffa2a7); shortcut.text → `color.text.muted` (#bd787d); separator.color → `color.border.divider` (#2b0e0d); chevron.color → `color.icon.decorative` (#a3676b).
+Tokens: button.text → `color.text.default` (#e99499); button.bg → `color.surface.default` (#100c0c); button.border → `color.border.control` (#a3676b); button.bg-hover → `color.interaction.hover.bg` (#1c0a09); button.bg-open → `color.interaction.pressed.bg` (#420f0c); button.border-open → `color.border.active` (#e53935); button.ring → `color.interaction.focus.ring` (#e53935); surface.bg → `color.surface.raised` (#160b0b); surface.border → `color.border.overlay` (#e53935); item.text → `color.text.default` (#e99499); item.bg-hover → `color.interaction.hover.bg-strong` (#630f0d); item.text-hover → `color.text.link-hover` (#f4eeee); item.text-disabled → `color.text.disabled` (#8a5559); active.bg → `color.interaction.selection.bg` (#531310); active.text → `color.interaction.selection.text` (#f4eeee); active.ring → `color.interaction.focus.ring` (#e53935); check.glyph → `color.text.bright` (#ffa2a7); shortcut.text → `color.text.muted` (#bd787d); separator.color → `color.border.divider` (#2b0e0d); chevron.color → `color.icon.decorative` (#a3676b).
 
 ### radio-group — Radio group
 
@@ -251,7 +253,7 @@ A native data table with a header rule, row dividers, hover and selection fills,
 
 States: default, hover, selected, selected+focus-visible, selected+container-inactive, sorted, empty, loading.
 
-Tokens: root.bg → `color.surface.default` (#100c0c); header.text → `color.text.bright` (#ffa2a7); header.bg → `color.surface.default` (#100c0c); header.rule → `color.border.strong` (#9e231f); header.bg-sticky → `color.surface.raised` (#160b0b); sort.glyph → `color.text.bright` (#ffa2a7); sort.ring → `color.interaction.focus.ring` (#e53935); row.text → `color.text.default` (#e99499); row.divider → `color.border.divider` (#2b0e0d); row.bg-hover → `color.interaction.hover.bg` (#1c0a09); selected.bg → `color.interaction.selection.bg` (#531310); selected.text → `color.interaction.selection.text` (#f4eeee); selected.ring → `color.interaction.focus.ring-container` (#ffa2a7); selected.inactive-bg → `color.interaction.selection.inactive-bg` (#420f0c); selected.inactive-text → `color.interaction.selection.inactive-text` (#e99499); caption.text → `color.text.muted` (#bd787d); empty.text → `color.text.muted` (#bd787d); loading.glyph → `color.text.muted` (#bd787d).
+Tokens: root.bg → `color.surface.default` (#100c0c); header.text → `color.text.bright` (#ffa2a7); header.bg → `color.surface.default` (#100c0c); header.rule → `color.border.strong` (#9e231f); header.bg-sticky → `color.surface.raised` (#160b0b); sort.glyph → `color.text.bright` (#ffa2a7); sort.ring → `color.interaction.focus.ring` (#e53935); row.text → `color.text.default` (#e99499); row.divider → `color.border.divider` (#2b0e0d); row.bg-hover → `color.interaction.hover.bg` (#1c0a09); selected.bg → `color.interaction.selection.bg` (#531310); selected.text → `color.interaction.selection.text` (#f4eeee); selected.ring → `color.interaction.focus.ring` (#e53935); selected.inactive-bg → `color.interaction.selection.inactive-bg` (#420f0c); selected.inactive-text → `color.interaction.selection.inactive-text` (#e99499); caption.text → `color.text.muted` (#bd787d); empty.text → `color.text.muted` (#bd787d); loading.glyph → `color.text.muted` (#bd787d).
 
 ### tabs — Tabs
 
diff --git a/exports/theme.full.md b/exports/theme.full.md
index 2a5c84678..5e0474064 100644
--- a/exports/theme.full.md
+++ b/exports/theme.full.md
@@ -1,5 +1,5 @@
 # j3w1 UI Theme Spec — full (4.0.0)
-<!-- generated by scripts/generate.mjs from tokens/ and spec/ — do not edit. theme: j3w1-theme 4.0.0 · profile: default · sourceDigest: sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc= -->
+<!-- generated by scripts/generate.mjs from tokens/ and spec/ — do not edit. theme: j3w1-theme 4.0.0 · profile: default · sourceDigest: sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw= -->
 
 Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens.
 Everything in one document: identity, foundations, every profile's resolved tokens, accessibility with the contrast report, portability, every component specification, the coverage ledger, the support table, the decision log and the references catalogue.
@@ -7,7 +7,7 @@ Everything in one document: identity, foundations, every profile's resolved toke
 ## Identity
 
 <!-- @compact:start -->
-True-black canvas (`#000000`), near-black panels (`#100c0c`) and chrome (`#090707`), with dark-red raised layers, rose interface text (`#e99499`), rose reading text (`#e99499`), near-white content headings (`#f4eeee`), dark-red selections (`#531310`), a bright red focus ring (`#e53935`), 1px square borders, zero radii, one monospace family for chrome, reading and code. Red marks *interaction*: focus, selection, active borders, primary actions. It is not a decoration and it is not applied to everything. Darkness is the canvas; readable content is the priority.
+True-black canvas (`#000000`), near-black panels (`#100c0c`) and chrome (`#090707`), with dark-red raised layers, rose interface and reading text (`#e99499`), near-white content headings (`#f4eeee`), dark-red selections (`#531310`), a bright red focus ring (`#e53935`), 1px square borders, zero radii, one monospace family for chrome, reading and code. Red marks *interaction*: focus, selection, active borders, primary actions; it is not decoration. Darkness is the canvas; readable content is the priority.
 
 Five rules keep an implementation recognisable:
 
@@ -20,112 +20,118 @@ Five rules keep an implementation recognisable:
 
 ## Where it came from
 
-The palette began on a Manjaro i3 workstation, preserved in `j3w1/1w3j`. A
-pywal ramp was pulled from a red wallpaper, then frozen and tuned slot by slot
-in `config/Xresources` while watching what `ls`, vim and the agnoster prompt
-really showed. The i3 configuration gave the rest of the look: 1px pixel
-borders, 14/−2 gaps, tabbed layouts, a hidden top bar with Chinese status
-labels, dunst toasts framed in `#ae1914`, and dmenu selections in `#630f0d`.
-
-The modern reference is `j3w1/j3w1.github.io`, a web version of that
-workstation. Its stylesheet named the roles this specification uses
-(`--terminal`, `--surface-raised`, `--selection`, `--focus`, `--prose`,
-`--muted` …) and wrote the first contrast contract. Both sources are pinned by
-revision in `references/sources.json`. This repository is now the authority:
-later changes in either source are proposals, not automatic updates.
+The palette began on a Manjaro i3 workstation (`j3w1/1w3j`): a pywal ramp
+from a red wallpaper, frozen and tuned slot by slot in `config/Xresources`.
+The i3 configuration gave the rest: 1px borders, 14/−2 gaps, tabbed layouts,
+dunst toasts framed in `#ae1914`, dmenu selections in `#630f0d`. Its web
+version, `j3w1/j3w1.github.io`, named the roles this specification uses and
+wrote the first contrast contract. Both are pinned in
+`references/sources.json`. This repository is the authority: later changes in
+either source are proposals, not automatic updates.
 
 ## What "modern" means here
 
-Modern means clear structure, responsive layout, strong keyboard and
-screen-reader support, exact states, and controls that are pleasant to use. It
-does not mean pill buttons, glass panels, gradients, neon glows, a
-Material-style redesign, or red on every surface. The site shows sixteen such
-misreadings as labelled non-examples.
-
-One narrow exception: the colour previews that the spec page draws next to
-each hex value may be round, sit on a checkerboard and animate (D-014).
-Component and consumer rules do not change.
+Clear structure, responsive layout, strong keyboard and screen-reader
+support, exact states, pleasant controls. Not pill buttons, glass panels,
+gradients, neon glows, a Material-style redesign, or red on every surface; the
+site draws such misreadings as labelled non-examples.
+
+One exception (D-014): the generated preview beside each visible CSS hex
+literal on the spec page. It adds no palette, role or geometry rule, and text,
+copying, keyboard order and no-JS access stay intact.
+
+- A 16px circle with its theme-derived 1px boundary; alpha shows over a
+  checkerboard of theme tokens.
+- On CSS `:hover` it becomes a 17.4px square (fast duration, ease-out on
+  transform and border-radius; none under reduced motion).
+- Mouse and pen pointers also open a non-interactive popup with the exact
+  value; touch and unknown pointers do not. CSS `:hover` alone drives both,
+  never the `hover` or `any-hover` media features, which can report no hover
+  despite a mouse.
+- The popup follows the pointer inside the circle at an 8px gap, flips when
+  needed and keeps an 8px viewport gutter. Tracking has no animation.
+- It closes when the pointer leaves the circle, on an outside press, Escape,
+  loss of window focus, and on page or nested scrolling unless the circle is
+  still under the last pointer position. It never captures input, holds
+  itself open or adds a keyboard stop; token tables and the token inspector
+  keep the persistent information.
 
 ## Profiles
 
-- `default` — the approved everyday composition. Monochrome red/rose for chrome,
-  text, borders, interaction and actions. Three bounded hues (amber, green,
-  blue) for status, diagnostics and diffs (D-001). Syntax is monochrome; the
-  three hues are available to opt-in syntax themes as `code.hued.*` (D-030).
+- `default` — the approved everyday composition: monochrome red/rose for
+  chrome, text, borders, interaction and actions; three bounded hues (amber,
+  green, blue) for status, diagnostics and diffs (D-001). Syntax is monochrome;
+  opt-in syntax themes may use the hues as `code.hued.*` (D-030).
 - `heritage-ansi` — the sixteen Xresources slots and their historical
-  assignments, exact, including the ones that fail the contrast floor. Use it
-  for terminals, archives and fidelity, never for new interface text.
-- `extended` — a proposed overlay that colours syntax, a full sixteen-slot
-  semantic terminal palette and chart series with the same three hues. It is
-  not approved, and the site labels it.
+  assignments, exact, including those that fail the contrast floor. For
+  terminals, archives and fidelity, never new interface text.
+- `extended` — a proposed, unapproved overlay that colours syntax, a
+  sixteen-slot semantic terminal palette and chart series with the same three
+  hues.
 
 ## Naming
 
-Roles are `color.<group>.<role>`. The group list is closed: `surface`, `text`,
+Roles are `color.<group>.<role>`, from a closed group list: `surface`, `text`,
 `border`, `interaction`, `action`, `status`, `code`, `diagnostic`, `diff`,
-`terminal`, `chart`, `icon`. Primitives are `color.primitive.<family>.<step>`;
-the step rises with luminance. A CSS custom property is the path with dots
-replaced by dashes: `color.interaction.focus.ring` →
-`--color-interaction-focus-ring`. Roles alias primitives; primitives carry
-provenance.
+`terminal`, `chart`, `icon`. Primitives are `color.primitive.<family>.<step>`,
+the step rising with luminance; roles alias primitives, and primitives carry
+provenance. A CSS custom property is the path with dashes for dots:
+`color.interaction.focus.ring` → `--color-interaction-focus-ring`.
 
 ## Foundations
 
-Values live in `tokens/`. This document says what each role means and where it
-may be used. Every rule below is normative for the `default` profile.
+Values live in `tokens/`; this document says what each role means and where
+it may be used. Every rule is normative for the `default` profile.
 
 ### Surfaces
 
-`surface.desktop` and `surface.canvas` are true black (`#000000`). Put readable
-content on the canvas or on these surfaces:
+`surface.desktop` and `surface.canvas` are true black (`#000000`). Readable
+content sits on the canvas or on:
 
 - `default` (`#100c0c`) for panels and cards;
 - `raised` (`#160b0b`) for sticky headers, menus and popovers;
 - `overlay` for dialogs and drawers;
-- `accent` (`#3d0c0a`) for the user's own content set apart from its neighbours, such as outgoing chat messages; secondary text on it uses `text.muted`, never `text.subtle` (D-035);
+- `accent` (`#3d0c0a`) for the user's own content set apart from its neighbours, such as outgoing chat messages; secondary text on it uses `text.muted`, never `text.subtle`. Red links cap its brightness: at this hue it stays at or below `#3f0c0a` (D-035);
 - `sunken` (`#000000`) for reading and detail panes;
 - `input` for form-control fills;
 - `chrome` and `chrome-alt` for window frames and bars.
 
-The layers differ only a little, by design. That must never hide the edge of a
-control, so controls also carry `border.control`.
-
-Never tint photos, video, document content or user-defined data colours to put
-more red on screen.
+The layers differ only slightly, so controls also carry `border.control`.
+Never tint photos, video, document content or user-defined data colours.
 
 ### Text ladder
 
-| Role | Value | Contrast on canvas / default / raised | Use |
-| --- | --- | --- | --- |
-| `text.prose` | `#e99499` | 9.16 / 8.48 / 7.92 | long-form reading; aliases text.default (D-033) |
-| `text.heading` | `#f4eeee` | see generated contrast report | content titles and H1–H6 |
-| `text.highlight` | `#f4eeee` | see generated contrast report | deliberate exceptional highlights |
-| `text.bright` | `#ffa2a7` | 10.98 / 10.17 / 9.49 | brighter UI labels and semantic rose emphasis |
-| `text.default` | `#e99499` | 9.16 / 8.48 / 7.92 | interface and body text |
-| `text.muted` | `#bd787d` | 6.15 / 5.69 / 5.31 | secondary text; the darkest colour permitted for chrome text |
-| `text.subtle` | `#ad7175` | 5.40 / 5.00 / 4.66 | metadata, comments, line numbers |
-| `text.disabled` | `#8a5559` | 3.52 / 3.26 / 3.05 | disabled controls only (exempt under WCAG 1.4.3; at least 3:1 by policy) |
-| `text.accent` | `#e53935` | 4.97 / 4.60 / 4.30 | accent text on canvas and default surfaces only |
-| `text.accent-strong` | `#f73f35` | 5.72 / 5.29 / 4.94 | accent text safe on every surface |
-
-`#a3676b` and `#7d1310` are never text roles in `default`, even where a darker
-background would raise their ratio. They stay in service as `border.control`,
-`icon.decorative`, `status.neutral.fill` and `border.disabled`. Metadata and
-comments that people need to read are not decorative: they use `text.subtle`,
-not a graphic colour. The contrast floor is rule 6 under Interaction states.
+| Role | Value | Use |
+| --- | --- | --- |
+| `text.prose` | `#e99499` | long-form reading; aliases text.default (D-033) |
+| `text.heading` | `#f4eeee` | content titles and H1–H6 |
+| `text.highlight` | `#f4eeee` | deliberate exceptional highlights |
+| `text.bright` | `#ffa2a7` | brighter UI labels and semantic rose emphasis |
+| `text.default` | `#e99499` | interface and body text |
+| `text.muted` | `#bd787d` | secondary text; the darkest colour permitted for chrome text |
+| `text.subtle` | `#ad7175` | metadata, comments, line numbers |
+| `text.disabled` | `#8a5559` | disabled controls only (exempt under WCAG 1.4.3; at least 3:1 by policy) |
+| `text.accent` | `#e53935` | accent text on canvas and default surfaces only |
+| `text.accent-strong` | `#f73f35` | accent text safe on every surface |
+| `text.link` | `#f73f35` | links, always underlined, distinct from rose body and headings (D-024); hover is near-white `text.link-hover` on `interaction.hover.bg` (D-027) |
+
+Ratios per surface are in the contrast report. `#a3676b` and `#7d1310` are
+never text roles in `default`, even on a darker background (D-003); they serve
+as `border.control`, `icon.decorative`, `status.neutral.fill`,
+`chart.series.4`, `border.disabled` and `code.whitespace`. Metadata and
+comments people need to read use `text.subtle`, not a graphic colour.
 
 ### Borders
 
 Every border is 1px (`border.width.default`). 2px (`border.width.emphasis`) is
 only for the selected indicator bar, the sticky-header rule and the invalid
-border. The quote rule is the one wider edge, at twice the emphasis width,
-because it marks a block rather than bounding a control.
+border. The quote rule, which marks a block rather than bounding a control, is
+the one wider edge, at twice the emphasis width.
 
 - `border.divider` (`#2b0e0d`) separates rows and sections.
-- `border.default` (`#531310`) is decorative. It may never be the only visible
-  edge of a control.
-- `border.control` (`#a3676b`, 4.71:1) is the edge of every form control at
-  rest.
+- `border.default` (`#531310`) is decorative, never the only visible edge of
+  a control.
+- `border.control` (`#a3676b`) is the edge of every form control at rest.
 - `border.active` (`#e53935`) marks the focused or active control.
 - `border.overlay` (`#e53935`) frames every floating layer.
 
@@ -145,10 +151,10 @@ Every interactive component declares which of these apply and demonstrates every
 | active / pressed | background → `interaction.pressed.bg`; border → `border.active` | border change; no translation |
 | focus-visible | the ring (below) | the ring itself; never a glow or a colour shift alone |
 | selected | fill `interaction.selection.bg` with `interaction.selection.text`; tabs and navigation use a 2px `border.selected-indicator` | `aria-selected` / `aria-current`; a check glyph in lists |
-| selected + focus-visible | the selection fill **and** a ring in the fill's on-fill colour (`interaction.focus.ring-container`, 7.48:1 on the selection) | both visible at once |
+| selected + focus-visible | the selection fill **and** the ordinary ring (rule 1; D-027) | both visible at once |
 | text selected, host keeps the text colour | translucent `interaction.text-selection.tint` (D-036), which also suits hosts that paint the fill over their content; where the host can recolour selected text, `interaction.text-selection.bg` with `interaction.text-selection.text` | the host's selection handles |
 | selected, container inactive | `interaction.selection.inactive-bg` with `interaction.selection.inactive-text`; no ring | lightness drop between the two fills |
-| disabled | `text.disabled`, `border.disabled`, `interaction.disabled.bg`; no hover or pressed styling; still focusable when `aria-disabled` | `disabled` / `aria-disabled`; `cursor: not-allowed`; never opacity |
+| disabled | `text.disabled`, `border.disabled`, `interaction.disabled.bg`; no hover or pressed styling; still focusable when `aria-disabled` | `disabled` / `aria-disabled`; `cursor: not-allowed` (rule 5) |
 | invalid | border → `status.danger.border` at 2px; message in `status.danger.text` with the `✕` glyph; `aria-invalid`; `aria-describedby` | border width 1 → 2px; glyph; message |
 | invalid + focus-visible | the 2px danger border **and** the ring in `interaction.focus.ring-container` at `focus.offset-invalid` | double boundary |
 | read-only | `text.default`; 1px dotted `border.divider` bottom; no fill; focusable; selectable | `readonly`; dotted edge |
@@ -161,7 +167,7 @@ Every interactive component declares which of these apply and demonstrates every
 
 Rules that apply everywhere:
 
-1. **Selection is a fill; focus is a ring.** Neither borrows the other's form. A ring still has to be visible on whatever it sits over: `#e53935` measures 2.52:1 on `action.primary.bg` and 1.13:1 on `status.danger.fill`, which is why the ring recolours on those fills instead of relying on hue. It measures 3.38:1 on the `interaction.selection.bg` recessed by D-027, so a selected row keeps the ordinary control ring.
+1. **Selection is a fill; focus is a ring.** Neither borrows the other's form. The ring must reach 3:1 on whatever it sits over: `#e53935` falls below it on `action.primary.bg` and `status.danger.fill`, so the ring recolours on those fills; it meets it on `interaction.selection.bg` (D-027), so a selected row keeps the ordinary control ring.
 2. **Focus ring (D-006; component mapping clarification D-015).** Controls and rows: `outline: 1px dashed {color.interaction.focus.ring}; outline-offset: -2px`. Focusable containers (panes, windows, dialogs, cards): `outline: 2px solid {color.interaction.focus.ring-container}; outline-offset: -3px`. On filled surfaces use the component's explicit ring mapping: primary buttons and checked controls use `interaction.focus.ring-container` where declared; destructive buttons use their declared on-fill text role. The selection fill is the exception and takes the ordinary ring, on the measurement in rule 1. Keep the control or container geometry independently of the colour mapping. `:focus:not(:focus-visible)` draws nothing. Forced-colors mode uses `Highlight`. A host focus indicator is never removed without this replacement.
 3. **Never colour-only.** Every state and every status carries a second channel: a glyph (`✕ ! ✓ i ·`), a border width, an underline pattern, or an ARIA state. Charts carry pattern fills.
 4. **Hover changes fills and borders, never text colour alone**, and only on hover-capable pointers.
@@ -172,18 +178,18 @@ Rules that apply everywhere:
 
 ### Actions
 
-There are four button tones:
+Four button tones:
 
-- `primary` is the only filled button at rest (`action.primary.bg` `#7d1310`
-  with `action.primary.text` (bright rose; D-033)).
-- `secondary` is an outline (`border.control`, text `text.bright`).
-- `tertiary` is a ghost or icon button (`text.default`, hover
-  `interaction.hover.bg`).
-- `destructive` is an outline in `action.destructive.text` (`#f73f35`). On
-  hover it fills with `action.destructive.hover-bg` (`#dc282e`) and `#f9faf9`
-  text (4.58:1). A filled variant exists for confirm dialogs.
+- `primary`, the only filled button at rest: `action.primary.bg` (`#7d1310`)
+  with `action.primary.text` (bright rose; D-033).
+- `secondary`, an outline: `border.control`, text `text.bright`.
+- `tertiary`, a ghost or icon button: `text.default`, hover
+  `interaction.hover.bg`.
+- `destructive`, an outline in `action.destructive.text` (`#f73f35`) that
+  fills on hover with `action.destructive.hover-bg` (`#dc282e`) and `#f9faf9`
+  text. A filled variant exists for confirm dialogs.
 
-Destructive actions also need a confirmation step or an undo. The colour is
+Destructive actions also need a confirmation step or an undo; the colour is
 not the safeguard.
 
 ### Status, diagnostics and diffs (D-001)
@@ -193,10 +199,10 @@ Five statuses: `danger` (`#f73f35` text, `#dc282e` fill), `warning`
 text, `#a3676b` fill). Each has `text`, `fill`, `on-fill`, `tint` and `border`
 roles, a required glyph (`✕ ! ✓ i ·`) and its own underline or border pattern
 (wavy, dashed, solid, dotted, double). The three extension hues are
-desaturated and shifted warm so they fit the identity. All sit between 6.5:1
-and 7.6:1 on every surface. They are **forbidden** in `surface`, `text`,
-`border`, `interaction` and `action`. Purple, cyan and magenta do not exist in
-the theme.
+desaturated and shifted warm to fit the identity, and meet 4.5:1 as text on
+every surface. They are **forbidden** in `surface`, `text`, `border`,
+`interaction` and `action`. Purple, cyan and magenta do not exist in the
+theme.
 
 Diagnostics:
 
@@ -227,7 +233,7 @@ Editor surfaces:
 - line numbers `code.line-number` (`text.subtle`, replacing the site's
   `#7d1310`);
 - caret `#e99499`;
-- selection `#420f0c` (muted text stays 4.71:1 inside it);
+- selection `#420f0c` (muted text stays above 4.5:1 inside it);
 - search matches `#630f0d`, with the current match inverted (`#ffa2a7` on
   `#0c0909`);
 - bracket match as a 1px `#e53935` border;
@@ -236,8 +242,8 @@ Editor surfaces:
 Syntax in `default` is monochrome: keywords `#f7463c`, strings `#bd787d`,
 comments `#ad7175` italic, numbers and constants `#d4868b`, functions
 `#ffa2a7`, variables and operators `#e99499`, types `#b37175`, properties and
-headings `#e95551`, tags `#f7463c`, attributes and escapes `#d4868b`. D-029
-lifted the two syntax reds. Hosts that want hue can opt in to `code.hued.*`
+headings `#e95551`, tags `#f7463c`, attributes and escapes `#d4868b` (the two
+reds as lifted by D-029). Hosts that want hue can opt in to `code.hued.*`
 (D-030): strings green `#86a46f`; numbers, constants, functions, attributes and
 escapes amber `#c9973f`; types and properties blue `#7e9ebb`; operators
 `#ffa2a7`. Keywords, tags, comments, variables and punctuation do not change.
@@ -249,40 +255,40 @@ Inside an editor selection some syntax roles fall below 4.5:1; see
 Terminal slots:
 
 - `heritage-ansi` carries the sixteen `Xresources` slots exactly.
-- `default` carries the readable heritage sixteen (D-029). Every slot that fell
-  below the text floor keeps its hue and saturation and gets more lightness.
-  Slot 6 is the exception: it is coral `#ff7a66` (D-032). Slots 1–7 and 9–15
-  all reach 4.5:1 on the terminal background. Slot 8 (bright black) stays the
-  dim tier at 3.01:1.
+  `color.primitive.ansi.*` keeps those values byte for byte; lifted values
+  live in `color.primitive.ansi-readable.*`, and `heritage-ansi` pins every
+  changed role back to the heritage primitive (D-029).
+- `default` carries the readable heritage sixteen (D-029): every slot that
+  fell below the text floor keeps its hue and saturation and gains lightness,
+  except slot 6, which is coral `#ff7a66` (D-032). Slots 1–7 and 9–15 reach
+  4.5:1 on the terminal background; slot 8 (bright black) stays the dim tier,
+  at 3:1.
 - The `extended` overlay proposes a semantic sixteen that all reach 4.5:1.
 
-Programs, not the theme, choose which slot means what. The readable sixteen
+Programs, not the theme, choose which slot means what; the readable sixteen
 make that choice safe for text.
 
-Links use strong red `text.link` (`#f73f35`) and a persistent underline, so they
-stand apart from the rose body and heading colours (D-024). On hover they use
-near-white `text.link-hover` on `interaction.hover.bg` (D-027). The strong
-fill looked louder than the link itself, so it stays with menu items.
-Current-page and selected navigation use their own indicator and on-fill
-roles.
-
 ### Typography
 
-One family: `SauceCodePro NFM` (Source Code Pro in the Nerd Fonts build). It
-falls back to Source Code Pro, Cascadia Mono, Consolas, Liberation Mono,
+One family: `SauceCodePro NFM` (Source Code Pro in the Nerd Fonts build),
+falling back to Source Code Pro, Cascadia Mono, Consolas, Liberation Mono,
 DejaVu Sans Mono and `monospace`. The site records `size-adjust` metrics for
 the fallbacks; no font file is distributed. Weights 400 and 700, plus italic.
 
 Scale (size/line-height in px): `ui-sm` 12/16, `ui-md` 13/18, `ui-lg` 14/20,
 `reading` 15/24, `code` 13/19, `terminal` 13/19 with −0.5px letter-spacing,
 `h1` 20/28 bold, `h2` 16/24 bold, `h3` 13/18 bold in `text.heading`, `caption`
-11/16 only with `text.muted` or lighter. Hosts keep the size the user chose;
-tiny UI text is a metric of the reference implementation, not a rule.
+11/16 only with `text.muted` or lighter. D-037: `display` 32/40 for
+page heroes and metric figures and `title` 24/32 for page titles above `h1`;
+components keep `h1`–`h3`. Hosts keep the size the user chose; tiny UI text is
+a metric of the reference implementation, not a rule.
 
 ### Spacing and density (D-009)
 
-Spacing steps: 0, 1, 2, 4, 8, 12, 16, 24, 32, 48 px. Set a density mode with
-`data-density` on any subtree:
+Spacing steps: 0, 1, 2, 4, 8, 12, 16, 24, 32, 48 px. `compact` is the default
+density (D-038): it applies wherever no `data-density` is set, in components,
+the site and copied bundles. Set `data-density="comfortable"` on any subtree to
+opt in to the larger mode:
 
 | Mode | Control | Row | Type | Horizontal padding | Gaps | Use |
 | --- | --- | --- | --- | --- | --- | --- |
@@ -290,11 +296,10 @@ Spacing steps: 0, 1, 2, 4, 8, 12, 16, 24, 32, 48 px. Set a density mode with
 | `comfortable` | 32px | 36px | `ui-md` | 12px | 4px | everyday applications |
 
 Both meet the 24×24 CSS-pixel target minimum; `compact` needs 4px between
-neighbouring targets. Table rows are exempt and always use the comfortable row
-height: a data row is content, not chrome, and a compact row is harder to scan
-exactly where scanning matters most. Controls inside a row still follow the
-page density. The site's 3px i3 gap, 14/−2 window gaps and 28px bar are
-window-manager geometry, not theme tokens.
+neighbouring targets. Table rows always use the comfortable row height (a data
+row is content, and compact rows are harder to scan); controls inside a row
+follow the page density. The site's 3px i3 gap, 14/−2 window gaps and 28px bar
+are window-manager geometry, not theme tokens.
 
 ### Elevation and layering
 
@@ -306,19 +311,16 @@ skip link 1000.
 
 A popup opened by hovering follows the pointer:
 
-- It sits 8px from the cursor.
-- It flips to the other side of the cursor instead of crossing a viewport
-  edge, and keeps an 8px margin from every edge.
+- It sits 8px from the cursor, flips to the cursor's other side instead of
+  crossing a viewport edge, and keeps 8px from every edge.
 - It moves again on pointer move, scroll and resize.
-- A popup with nothing to operate takes no pointer events, so it never sits
-  between the cursor and what opened it. A popup with a control or a link
-  stays reachable and stays open while the pointer is inside it.
+- A popup with nothing to operate takes no pointer events; one with a control
+  or link stays reachable and open while the pointer is inside it.
 - Either kind closes when the pointer leaves both the trigger and the popup.
 
-The same popup opened from the keyboard anchors to its trigger instead: below
-it, or above when there is no room below. Focus has no pointer to follow. This
-is a placement rule only. What opens a popup, and whether it is a tooltip, a
-preview or an inspector, belongs to the component's own contract.
+Opened from the keyboard, the same popup anchors to its trigger: below it, or
+above when there is no room below. This is a placement rule only; what opens a
+popup and what kind it is belong to the component's contract.
 
 ### Icons
 
@@ -343,13 +345,13 @@ Breakpoints 320 (reflow floor), 600, 900, 1280.
 ### Typography semantics (D-033)
 
 All content titles and H1–H6 use `text.heading`; size, weight and spacing carry
-their relative hierarchy. Chrome/window titles use `text.default` or
-`text.bright`. Ordinary body and long-form prose use `text.default` and
-`text.prose`. Bold inherits the current semantic color, including inside
-headings, muted text, links and selections. It never requests white by itself.
-Near-white is limited to headings, deliberate highlights, selections, hover
-highlights and documented contrast-critical on-fill text. See the exhaustive
-role audit in `docs/rose-typography-migration.md`; measure the actual state pair.
+the hierarchy. Chrome and window titles use `text.default` or `text.bright`;
+body and long-form prose use `text.default` and `text.prose`. Bold inherits the
+current semantic colour, including inside headings, muted text, links and
+selections, and never requests white by itself. Near-white is limited to
+headings, deliberate highlights, selections, hover highlights and documented
+contrast-critical on-fill text; measure the actual state pair. Role audit:
+`docs/rose-typography-migration.md`.
 
 ## Tokens — profile `default` (approved)
 
@@ -583,6 +585,8 @@ role audit in `docs/rose-typography-migration.md`; measure the actual state pair
 | `font.size.reading` | `15px` |  |
 | `font.size.code` | `13px` |  |
 | `font.size.terminal` | `13px` | URxvt pixelsize 13. |
+| `font.size.display` | `32px` | Page heroes and metric figures on the portal (D-037). |
+| `font.size.title` | `24px` | Page titles above h1 on the portal (D-037). |
 | `font.size.h1` | `20px` |  |
 | `font.size.h2` | `16px` |  |
 | `font.size.h3` | `13px` |  |
@@ -593,6 +597,8 @@ role audit in `docs/rose-typography-migration.md`; measure the actual state pair
 | `font.line-height.reading` | `24px` |  |
 | `font.line-height.code` | `19px` |  |
 | `font.line-height.terminal` | `19px` |  |
+| `font.line-height.display` | `40px` |  |
+| `font.line-height.title` | `32px` |  |
 | `font.line-height.h1` | `28px` |  |
 | `font.line-height.h2` | `24px` |  |
 | `font.line-height.h3` | `18px` |  |
@@ -1052,13 +1058,12 @@ role audit in `docs/rose-typography-migration.md`; measure the actual state pair
 
 ### What is claimed
 
-WCAG 2.2 criteria are used as measurable **design targets** for the roles this
-theme defines. A green contrast report and a clean automated scan of the site
-show that the specified colours and the reference markup meet those targets.
-They are not a conformance claim for any application that adopts the theme.
-Keyboard operation, focus management, labels, reflow and manual review stay
-the consumer's job. The theme's own limits are listed at the end of this
-document.
+WCAG 2.2 criteria are measurable **design targets** for the theme's roles. A
+green contrast report and a clean automated scan show that the specified
+colours and the reference markup meet them; they are not a conformance claim
+for any adopting application. Keyboard operation, focus management, labels,
+reflow and manual review stay the consumer's job. The theme's own limits are
+under Limitations.
 
 ### Contrast
 
@@ -1067,51 +1072,43 @@ document.
 - Large text (18.66px bold or 24px regular and above): at least 3:1.
 - Control boundaries, focus rings, meaningful icons and chart marks: at least
   3:1 (WCAG 1.4.11).
-- Disabled text is exempt under WCAG 1.4.3, but house policy still needs 3:1
-  (`text.disabled` `#8a5559`, 3.52:1 on the true-black canvas). It sits below
-  the ordinary-text floor by design.
+- Disabled text is exempt under WCAG 1.4.3; house policy still needs 3:1
+  (`text.disabled`), below the ordinary-text floor by design.
 - Never round a value into a pass. The report keeps the unrounded ratio and
   shows two decimals: `4.4996` reads 4.50 and fails.
 - Heritage values that fail (`#a3676b` as text, `#7d1310` anywhere as text)
-  are flagged `$deprecated` in the `heritage-ansi` profile. They are never
-  shown as ordinary passes.
+  are flagged `$deprecated` in the `heritage-ansi` profile, never shown as
+  ordinary passes.
 
-`exports/contrast.md` lists every declared pair: the global pairs in
-`spec/contrast.json` and every `stateTokens` and `contrast[]` entry of every
-component. Waived pairs carry their reason. A waiver is only valid for
-decorative graphics that are never the only boundary of a control.
+`exports/contrast.md` lists every declared pair (the global pairs in
+`spec/contrast.json` and every component's `stateTokens` and `contrast[]`
+entries) with its computed ratio. Waived pairs carry their reason; a waiver is
+valid only for decorative graphics that are never the only boundary of a
+control.
 
 ### Text hierarchy
 
-D-033 makes ordinary interface and reading text rose (`color.text.default` and
-`color.text.prose`). Bold changes weight and inherits the current semantic
-foreground, including inside headings, links, muted and selected text. Content
-titles and H1-H6 use `color.text.heading`; near-white is not a readability or
-boldness requirement. Selection and contrast-critical on-fill roles stay
-explicit and are checked against their actual backgrounds. Heading level is
-also conveyed through structure, size and weight, never colour alone.
+The colour roles are in `spec/foundations.md`, Typography semantics (D-033);
+near-white is not a readability or boldness requirement. Selection and
+contrast-critical on-fill roles are checked against their actual
+backgrounds. Heading level is conveyed through structure, size and weight,
+never colour alone.
 
 ### Focus
 
 Focus is never lost and never invisible. The ring is defined once, in
-`spec/foundations.md`, Interaction states, rule 2 (D-006, D-015). In short:
-controls and rows show `focus.ring` (1px dashed `#e53935`, offset −2px);
-focusable containers show `focus.ring-container` (2px solid `#ffa2a7`, offset
-−3px); primary and checked controls use `focus.ring-container` where declared;
-destructive fills use their on-fill text role. Colour mapping does not change
-ring geometry.
-
-- `:focus` without `:focus-visible` draws nothing. Pointer clicks stay quiet,
-  and keyboard focus stays visible.
-- A component that removes a host's default indicator must draw this one.
-- The site's state matrices render every declared combination, including
-  `selected+focus-visible` and `invalid+focus-visible`, because that is where
-  rings disappear in practice.
+`spec/foundations.md`, Interaction states, rule 2 (D-006, D-015).
+
+- `:focus` without `:focus-visible` draws nothing: pointer clicks stay quiet,
+  keyboard focus stays visible.
+- The state matrices render every declared combination, including
+  `selected+focus-visible` and `invalid+focus-visible`, where rings disappear
+  in practice.
 
 ### Keyboard
 
-Native controls keep native keyboard behaviour. Custom widgets follow the WAI
-ARIA Authoring Practices pattern cited in their frontmatter (`aria.apg`):
+Native controls keep native keyboard behaviour. Custom widgets follow the
+WAI-ARIA Authoring Practices pattern in their `aria.apg`:
 
 - roving tabindex in toolbars, tabs, trees and listboxes;
 - `aria-activedescendant` in comboboxes;
@@ -1124,8 +1121,8 @@ keyboard, and the no-JS build keeps every normative section readable.
 
 ### Motion
 
-Durations are at most 150ms and apply to opacity, transform and background
-only. Under `prefers-reduced-motion: reduce` every duration is 0.01ms:
+Motion follows `spec/foundations.md`, Interaction states, rule 7. Under
+`prefers-reduced-motion: reduce`:
 
 - toasts, dialogs and drawers appear in place;
 - indeterminate progress shows static stripes;
@@ -1133,67 +1130,70 @@ only. Under `prefers-reduced-motion: reduce` every duration is 0.01ms:
 - skeletons do not shimmer;
 - tab indicators do not slide.
 
-No behaviour waits on `transitionend`.
-
 ### Forced colours and high contrast
 
-Under `forced-colors: active`, rings use `Highlight` and selections use
-`Highlight` / `HighlightText`. Borders survive, because they are real borders,
-not box-shadows. Pattern fills keep charts and diffs readable.
+Under `forced-colors: active`, rings use `Highlight` and selections
+`Highlight` / `HighlightText`. Borders survive because they are real borders,
+not box-shadows; pattern fills keep charts and diffs readable.
 
 ### Reflow, zoom and text
 
 Components reflow at 320 CSS pixels without horizontal page scrolling, at 200%
 browser zoom and at 200% text-only zoom. Rings and borders stay 1px / 2px CSS.
 Targets are at least 24×24 CSS pixels, with 4px spacing in `compact` density.
-Long labels wrap, or truncate with a visible affordance. The site's stress
-fixtures (English, Spanish, Chinese, Arabic with `dir="rtl"`) test this.
+Long labels wrap, or truncate with a visible affordance; the stress fixtures
+(English, Spanish, Chinese, Arabic with `dir="rtl"`) exercise this.
 
 ### Colour is never the only channel
 
-Every status has a glyph. Every state has a border, pattern or ARIA change.
-Diffs keep their `+ − ~` markers. Charts carry pattern fills and a table
-fallback. The `heritage-ansi` terminal palette has less hue difference by
-design; the specification records this as a limit instead of fixing it
-silently.
+Every status has a glyph; every state a border, pattern or ARIA change. Diffs
+keep their `+ − ~` markers. Charts carry pattern fills and a table fallback.
+The `heritage-ansi` terminal palette has less hue difference by design, a
+recorded limit.
 
 ### Limitations (recorded, not hidden)
 
 - The theme specifies colours, states and reference markup. It cannot make a
   host application's own focus management, labels or reading order correct.
-- The site's automated scan uses axe-core with the WCAG 2.x A and AA rule
-  sets. It does not test every success criterion. Manual checks (keyboard
-  walks, screen-reader reading, zoom) need their own execution evidence. A
-  missing protocol stays not run; the scan does not imply it.
-- In the `default` profile, terminal slot 8 is the dim tier at 3.01:1 on the
-  terminal background (D-029; slot 0 is the background). Programs that draw
-  text in slot 8 inherit that. The `heritage-ansi` profile keeps the historical
-  slots, where 1, 4, 6, 8, 9, 10, 12, 13, 14 and 15 fail 4.5:1. The `extended`
-  overlay proposes a semantic set.
-- Syntax roles inside an editor selection: type and comment drop below 4.5:1 on
-  `code.selection-bg` (4.24 and 4.13:1). Keyword, tag, property and heading
-  stay above it after D-029. A selection is short-lived; the code-editor
-  specification records this limit.
-- Text selection with `interaction.text-selection.tint` (D-036) keeps text at
-  4.5:1 or above only where the host draws the tint under the text.
+- The automated scan uses axe-core with the WCAG 2.x A and AA rule sets and
+  does not test every success criterion. Manual checks (keyboard walks,
+  screen-reader reading, zoom) need their own execution evidence; a missing
+  protocol stays not run.
+- In `default`, terminal slot 8 is the dim tier, under 4.5:1 on the terminal
+  background (D-029; slot 0 is the background); programs drawing text in it
+  inherit that. In `heritage-ansi`, slots 1, 4, 6, 8, 9, 10, 12, 13, 14 and 15
+  fail 4.5:1. The `extended` overlay proposes a semantic set.
+- Inside an editor selection, type and comment syntax drop below 4.5:1 on
+  `code.selection-bg`; keyword, tag, property and heading stay above it after
+  D-029. A selection is short-lived; the code-editor specification records
+  this limit.
+- `interaction.text-selection.tint` (D-036) keeps text at 4.5:1 only where the
+  host draws the tint under the text.
   - **Over the text:** where a host paints it over the text, as in Telegram's
-    rich editor and rich translation preview, selected text measures 2.96 to
-    3.43:1.
-  - **Links and code:** inside a selection they drop below 4.5:1 (links 3.45
-    to 4.30; code 3.13 to 4.24, and 4.40 for numbers in outgoing blocks).
+    rich editor and rich translation preview, selected text falls below 4.5:1.
+  - **Links and code:** inside a selection they drop below 4.5:1. Links are
+    not a declared pair: a failing pair needs a waiver, and waivers cover
+    decorative graphics only.
+  - **Strength:** no tint strength meets both the over-the-text case and the
+    floor on `surface.accent`.
+  - **Outgoing code blocks:** inside one, the selection stands only ΔE 18.3
+    (CIE76) from the block.
+
+  The global contrast pairs composite the tint over the canvas only; the
+  Telegram port's tests enforce the raised and accent cases. A selection is
+  short-lived, as in an editor.
 
 ### Verification evidence and freshness
 
 **Source coverage.** The coverage ledger records source facts: specified,
 demonstrated and test implemented. `exports/coverage.json` schemaVersion 1
-adds `testImplemented` and keeps `tested` as a compatibility alias with its
-original meaning (the test file exists). Component JSON coverage and family
-totals use the same definitions. No source coverage Boolean proves an
-execution or blanket WCAG conformance.
+adds `testImplemented` and keeps `tested` as a compatibility alias meaning the
+test file exists; component JSON and family totals use the same definitions.
+No coverage Boolean proves an execution or WCAG conformance.
 
-**Execution evidence.** The linked static verification report gives the real
-per-test outcomes and per-component summaries. Evidence schemaVersion 1
-records, for each result:
+**Execution evidence.** The static verification report gives per-test
+outcomes and per-component summaries. Evidence schemaVersion 1 records, for
+each result:
 
 - the method (automated or manual), category and component;
 - the states and variants it explicitly covers (empty lists mean
@@ -1201,20 +1201,20 @@ records, for each result:
 - browser and version, OS, viewport, profile, density and JavaScript setting;
 - a run or protocol reference.
 
-The recorded profile and density describe the starting configuration; tests
-that switch them say so in their scope. Results from one browser engine never
-stand for another. Skipped, failed, not run and not applicable are separate
-outcomes, and every non-pass has a reason. Manual screen-reader and keyboard
-claims need protocol records. The current automated suite targets Chromium;
-other engines stay not run.
-
-**Freshness.** A claim is current only while two things match: the digest of
-the tested artifact, and a broad source fingerprint. The fingerprint covers
-tracked contract sources, schemas, generators, site code, tests, agent
-guidance, CI configuration and the package lockfile. Any change to these
-makes the claim stale, so an unrelated change can make more evidence stale
-than strictly needed. A stale record keeps its real outcome and reference, but
-it no longer shows a current pass.
+The recorded profile and density are the page's declared `data-profile` and
+`data-density` when the test ends; tests that switch them say so in their
+scope. One browser engine never stands for
+another. Skipped, failed, not run and not applicable are separate outcomes,
+and every non-pass has a reason. Manual screen-reader and keyboard claims need
+protocol records. The automated suite targets Chromium; other engines stay not
+run.
+
+**Freshness.** A claim is current only while the tested artifact's digest and
+a broad source fingerprint both match. The fingerprint covers tracked contract
+sources, schemas, generators, site code, tests, agent guidance, CI
+configuration and the package lockfile, so an unrelated change can stale more
+evidence than strictly needed. A stale record keeps its real outcome and
+reference but no longer shows a current pass.
 
 **How the report is built.**
 
@@ -1227,8 +1227,7 @@ it no longer shows a current pass.
    never certifies itself.
 
 Run timestamps and revisions live only in this post-test evidence, outside the
-committed deterministic exports and their digests, so no hash depends on
-itself.
+committed exports and their digests, so no hash depends on itself.
 
 **Run it locally.**
 
@@ -1237,14 +1236,14 @@ itself.
 3. Run `npm run verification:report`, then `npm run verification:check`, then
    `npm run test:verification`.
 
-A local run names its local execution and digests. It is never presented as
+A local run names its local execution and digests and is never presented as
 hosted CI evidence.
 
 **Record a manual protocol.** Pass a schema-valid evidence document to
-`node scripts/verification-report.mjs <repo-relative-evidence.json>`. It must
-carry the real tested digests, the browser and environment, and a `protocol:`
-reference with the protocol identifier and the recorded observations. Keep the
-protocol with the evidence. Do not copy private artifacts into this public
+`node scripts/verification-report.mjs <repo-relative-evidence.json>`, carrying
+the real tested digests, the browser and environment, and a `protocol:`
+reference with the protocol identifier and recorded observations. Keep the
+protocol with the evidence; never copy private artifacts into this public
 repository.
 
 ### Contrast report
@@ -1397,7 +1396,7 @@ repository.
 | info dot on the panel surface | empty | ui | `color.status.info.fill` #7e9ebb | `color.surface.default` #100c0c | 6.94 | 3 | pass |
 | neutral dot on the panel surface | empty | ui | `color.status.neutral.fill` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | breadcrumbs default text | default | text | `color.text.link` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
-| breadcrumbs hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg-strong` #630f0d | 11.41 | 4.5 | pass |
+| breadcrumbs hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg` #1c0a09 | 16.70 | 4.5 | pass |
 | breadcrumbs focus-visible text | focus-visible | text | `color.text.link` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
 | breadcrumbs focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | breadcrumbs current text | current | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
@@ -1409,13 +1408,15 @@ repository.
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | button default text | default | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 4.5 | pass |
 | button hover text | hover | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.hover-bg` #911410 | 4.75 | 4.5 | pass |
 | button focus-visible text | focus-visible | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 4.5 | pass |
 | button focus-visible outline | focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 3 | pass |
 | button active text | active | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.pressed-bg` #630f0d | 6.84 | 4.5 | pass |
 | button loading text | loading | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 4.5 | pass |
-| primary fill against the panel (decorative; the label identifies the button) | — | ui | `color.action.primary.bg` #7d1310 | `color.surface.default` #100c0c | 1.83 | 3 | waived: the fill is not the boundary of the control; the label text at 9.28:1 identifies it, and hover, active and focus each add a second channel |
+| primary fill against the panel (decorative; the label identifies the button) | — | ui | `color.action.primary.bg` #7d1310 | `color.surface.default` #100c0c | 1.83 | 3 | waived: the fill is not the boundary of the control; the label text identifies it, and hover, active and focus each add a second channel |
 | secondary text at rest | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.bg` #000000 | 10.98 | 4.5 | pass |
 | secondary border at rest | — | ui | `color.action.secondary.border` #a3676b | `color.action.secondary.bg` #000000 | 4.71 | 3 | pass |
 | secondary text on the hover fill | hover | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
@@ -1441,7 +1442,7 @@ repository.
 | card focus-visible outline | focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 3 | pass |
 | card selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | card selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| card selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| card selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | title on the card | — | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
 | metadata on the card | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | title on the hover fill | hover | text | `color.text.bright` #ffa2a7 | `color.interaction.hover.bg` #1c0a09 | 10.01 | 4.5 | pass |
@@ -1479,7 +1480,7 @@ repository.
 | chip focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | chip selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | chip selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| chip selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| chip selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | remove glyph at rest | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | disabled chip text (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.interaction.disabled.bg` #160b0b | 3.24 | 3 | pass |
 | disabled chip border (exempt) | disabled | ui | `color.border.disabled` #7d1310 | `color.interaction.disabled.bg` #160b0b | 1.82 | 1 | pass |
@@ -1507,6 +1508,8 @@ repository.
 | tag | — | text | `color.code.syntax.tag` #f7463c | `color.code.bg` #0c0909 | 5.57 | 4.5 | pass |
 | attribute and escape | — | text | `color.code.syntax.attribute` #d4868b | `color.code.bg` #0c0909 | 7.16 | 4.5 | pass |
 | deprecated text | — | text | `color.code.syntax.deprecated` #ad7175 | `color.code.bg` #0c0909 | 5.10 | 4.5 | pass |
+| comment syntax decoration inside the selection | selected | ui | `color.code.syntax.comment` #ad7175 | `color.code.selection-bg` #420f0c | 4.13 | 4.5 | waived: syntax colour is decoration; the short-lived selection preserves syntax roles, and comment falls below the text floor on this recorded selection value |
+| type syntax decoration inside the selection | selected | ui | `color.code.syntax.type` #b37175 | `color.code.selection-bg` #420f0c | 4.24 | 4.5 | waived: syntax colour is decoration; the short-lived selection preserves syntax roles, and type falls below the text floor on this recorded selection value |
 | muted string text inside the selection | selected | text | `color.code.syntax.string` #bd787d | `color.code.selection-bg` #420f0c | 4.71 | 4.5 | pass |
 | keyword and tag text inside the selection (D-029) | selected | text | `color.code.syntax.keyword` #f7463c | `color.code.selection-bg` #420f0c | 4.52 | 4.5 | pass |
 | property, heading and invalid text inside the selection (D-029) | selected | text | `color.code.syntax.property` #e95551 | `color.code.selection-bg` #420f0c | 4.51 | 4.5 | pass |
@@ -1523,7 +1526,7 @@ repository.
 | combobox open text | open | text | `color.text.default` #e99499 | `color.surface.raised` #160b0b | 8.43 | 4.5 | pass |
 | combobox open border | open | ui | `color.border.overlay` #e53935 | `color.surface.raised` #160b0b | 4.57 | 3 | pass |
 | combobox selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| combobox selected outline | selected | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| combobox selected outline | selected | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | combobox invalid text | invalid | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
 | combobox invalid border | invalid | ui | `color.status.danger.border` #e53935 | `color.surface.input` #000000 | 4.97 | 3 | pass |
 | combobox invalid+focus-visible text | invalid+focus-visible | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
@@ -1542,18 +1545,22 @@ repository.
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | compact-dashboard default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | compact-dashboard default border | default | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | data-table default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | data-table hover text | hover | text | `color.text.default` #e99499 | `color.interaction.hover.bg` #1c0a09 | 8.35 | 4.5 | pass |
 | data-table focus-visible text | focus-visible | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | data-table focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | data-table selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | data-table selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| data-table selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| data-table selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | data-table sorted text | sorted | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
 | data-table mixed text | mixed | text | `color.action.primary.text` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 4.5 | pass |
 | data-table empty text | empty | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
@@ -1596,7 +1603,7 @@ repository.
 | diagnostics focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | diagnostics selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | diagnostics selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| diagnostics selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| diagnostics selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | diagnostics error text | error | text | `color.status.danger.text` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
 | diagnostics empty text | empty | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | code text | — | text | `color.text.default` #e99499 | `color.code.bg` #0c0909 | 8.65 | 4.5 | pass |
@@ -1671,7 +1678,7 @@ repository.
 | ring on an added row | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.diff.added.bg` #0f1a0e | 4.23 | 3 | pass |
 | ring on a removed row | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.diff.removed.bg` #2b0e0d | 4.24 | 3 | pass |
 | ring on a modified row | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.diff.modified.bg` #1f1a0c | 4.10 | 3 | pass |
-| ring on the selected row | focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| ring on the selected row | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | fold button text | — | text | `color.text.link` #f73f35 | `color.diff.header-bg` #241010 | 4.94 | 4.5 | pass |
 | disclosure default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | disclosure default border | default | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
@@ -1698,6 +1705,8 @@ repository.
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | empty-state default text | default | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | heading on the panel surface | — | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
 | action text on the panel surface | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
@@ -1709,6 +1718,8 @@ repository.
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | field default text | default | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
 | field required text | required | text | `color.status.danger.text` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
 | field invalid text | invalid | text | `color.status.danger.text` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
@@ -1729,6 +1740,8 @@ repository.
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | file-input default text | default | text | `color.action.secondary.text` #ffa2a7 | `color.surface.canvas` #000000 | 10.98 | 4.5 | pass |
 | file-input default border | default | ui | `color.action.secondary.border` #a3676b | `color.surface.canvas` #000000 | 4.71 | 3 | pass |
 | file-input hover text | hover | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
@@ -1776,6 +1789,7 @@ repository.
 | i3-window-frame selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | i3-window-frame container-inactive text | container-inactive | text | `color.text.muted` #bd787d | `color.surface.chrome` #090707 | 5.88 | 4.5 | pass |
 | i3-window-frame error text | error | text | `color.status.danger.on-fill` #f9faf9 | `color.status.danger.fill` #dc282e | 4.58 | 4.5 | pass |
+| ring on a selected workspace when focused | selected | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | workspace names and status text on the bar | — | text | `color.text.default` #e99499 | `color.surface.chrome` #090707 | 8.77 | 4.5 | pass |
 | clock on the bar | — | text | `color.text.bright` #ffa2a7 | `color.surface.chrome` #090707 | 10.50 | 4.5 | pass |
 | focused title | — | text | `color.text.bright` #ffa2a7 | `color.surface.chrome-alt` #1c0a09 | 10.01 | 4.5 | pass |
@@ -1798,7 +1812,7 @@ repository.
 | icon-button active border | active | ui | `color.border.active` #e53935 | `color.interaction.pressed.bg` #420f0c | 3.81 | 3 | pass |
 | icon-button toggled text | toggled | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | icon-button toggled+focus-visible text | toggled+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| icon-button toggled+focus-visible outline | toggled+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| icon-button toggled+focus-visible outline | toggled+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | toggled border against the panel | toggled | ui | `color.border.selected-indicator` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | toggled fill against the panel (decorative) | toggled | ui | `color.interaction.selection.bg` #531310 | `color.surface.default` #100c0c | 1.36 | 3 | waived: aria-pressed, the filled icon form and the 1px selected-indicator border carry the state; the fill is not the boundary |
 | disabled icon (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.interaction.disabled.bg` #160b0b | 3.24 | 3 | pass |
@@ -1809,7 +1823,7 @@ repository.
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | link default text | default | text | `color.text.link` #f73f35 | `color.surface.canvas` #000000 | 5.72 | 4.5 | pass |
-| link hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg-strong` #630f0d | 11.41 | 4.5 | pass |
+| link hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg` #1c0a09 | 16.70 | 4.5 | pass |
 | link focus-visible text | focus-visible | text | `color.text.link` #f73f35 | `color.surface.canvas` #000000 | 5.72 | 4.5 | pass |
 | link focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.canvas` #000000 | 4.97 | 3 | pass |
 | link visited text | visited | text | `color.text.link` #f73f35 | `color.surface.canvas` #000000 | 5.72 | 4.5 | pass |
@@ -1819,7 +1833,7 @@ repository.
 | underline on the panel | — | ui | `color.text.link-underline` #dc282e | `color.surface.default` #100c0c | 4.06 | 3 | pass |
 | link text on the panel | — | text | `color.text.link` #f73f35 | `color.surface.default` #100c0c | 5.29 | 4.5 | pass |
 | link text on raised surfaces | — | text | `color.text.link` #f73f35 | `color.surface.raised` #160b0b | 5.26 | 4.5 | pass |
-| ring on the hover fill | hover | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.hover.bg-strong` #630f0d | 3.10 | 3 | pass |
+| ring on the hover fill | hover | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.hover.bg` #1c0a09 | 4.53 | 3 | pass |
 | list default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | list default border | default | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | list hover text | hover | text | `color.text.default` #e99499 | `color.interaction.hover.bg` #1c0a09 | 8.35 | 4.5 | pass |
@@ -1827,7 +1841,7 @@ repository.
 | list focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | list selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | list selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| list selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| list selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | list selected+container-inactive text | selected+container-inactive | text | `color.interaction.selection.inactive-text` #e99499 | `color.interaction.selection.inactive-bg` #420f0c | 7.02 | 4.5 | pass |
 | metadata column on the list surface | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | metadata column on the hover fill | hover | text | `color.text.muted` #bd787d | `color.interaction.hover.bg` #1c0a09 | 5.60 | 4.5 | pass |
@@ -1851,7 +1865,7 @@ repository.
 | menu closed border | closed | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | menu checked text | checked | text | `color.text.bright` #ffa2a7 | `color.surface.raised` #160b0b | 10.10 | 4.5 | pass |
 | menu selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| menu selected outline | selected | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| menu selected outline | selected | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | shortcut hint on the raised surface | — | text | `color.text.muted` #bd787d | `color.surface.raised` #160b0b | 5.66 | 4.5 | pass |
 | disabled item text (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.surface.raised` #160b0b | 3.24 | 3 | pass |
 | item separator (decorative; role separator carries the grouping) | — | ui | `color.border.divider` #2b0e0d | `color.surface.raised` #160b0b | 1.08 | 1 | pass |
@@ -1861,6 +1875,8 @@ repository.
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | number-field default text | default | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
 | number-field default border | default | ui | `color.border.control` #a3676b | `color.surface.input` #000000 | 4.71 | 3 | pass |
 | number-field hover text | hover | text | `color.text.default` #e99499 | `color.interaction.hover.bg` #1c0a09 | 8.35 | 4.5 | pass |
@@ -1888,7 +1904,7 @@ repository.
 | pagination focus-visible text | focus-visible | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | pagination focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.default` #100c0c | 4.60 | 3 | pass |
 | pagination current text | current | text | `color.text.on-selection` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| ring on the current page when focused | current | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| ring on the current page when focused | current | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | disabled previous/next (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.surface.default` #100c0c | 3.26 | 3 | pass |
 | gap ellipsis on the panel surface | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | popover default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
@@ -1896,13 +1912,15 @@ repository.
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | progress default text | default | text | `color.text.default` #e99499 | `color.surface.canvas` #000000 | 9.16 | 4.5 | pass |
 | progress default border | default | ui | `color.border.control` #a3676b | `color.surface.canvas` #000000 | 4.71 | 3 | pass |
 | progress error text | error | text | `color.status.danger.text` #f73f35 | `color.surface.canvas` #000000 | 5.72 | 4.5 | pass |
 | progress error border | error | ui | `color.status.danger.border` #e53935 | `color.surface.canvas` #000000 | 4.97 | 3 | pass |
 | label on the canvas | — | text | `color.text.bright` #ffa2a7 | `color.surface.canvas` #000000 | 10.98 | 4.5 | pass |
 | detail line on the canvas | — | text | `color.text.muted` #bd787d | `color.surface.canvas` #000000 | 6.15 | 4.5 | pass |
-| value fill against the track | — | ui | `color.action.primary.bg` #7d1310 | `color.interaction.pressed.bg` #420f0c | 1.51 | 3 | waived: the fill measures 1.51:1 against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control, 4.45:1) marks the full extent |
+| value fill against the track | — | ui | `color.action.primary.bg` #7d1310 | `color.interaction.pressed.bg` #420f0c | 1.51 | 3 | waived: the fill falls below the floor against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control) marks the full extent |
 | stripes (decorative pattern) | busy | ui | `color.action.primary.bg` #7d1310 | `color.interaction.pressed.bg` #420f0c | 1.51 | 1 | pass |
 | error fill against the track | error | ui | `color.status.danger.fill` #dc282e | `color.interaction.pressed.bg` #420f0c | 3.36 | 3 | pass |
 | radio-group default border | default | ui | `color.border.control` #a3676b | `color.surface.input` #000000 | 4.71 | 3 | pass |
@@ -1932,6 +1950,8 @@ repository.
 | Primary content | — | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | Supporting content | — | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
+| Button label | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
+| Button label on hover | — | text | `color.action.secondary.text` #ffa2a7 | `color.action.secondary.hover-bg` #630f0d | 6.84 | 4.5 | pass |
 | search-field default text | default | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
 | search-field default border | default | ui | `color.border.control` #a3676b | `color.surface.input` #000000 | 4.71 | 3 | pass |
 | search-field hover text | hover | text | `color.text.default` #e99499 | `color.interaction.hover.bg` #1c0a09 | 8.35 | 4.5 | pass |
@@ -2005,7 +2025,7 @@ repository.
 | sidebar-nav selected+container-inactive text | selected+container-inactive | text | `color.interaction.selection.inactive-text` #e99499 | `color.interaction.selection.inactive-bg` #420f0c | 7.02 | 4.5 | pass |
 | sidebar-nav expanded text | expanded | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
 | sidebar-nav collapsed text | collapsed | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
-| ring on a selected item when focused | selected | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| ring on a selected item when focused | selected | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | group chevron (decorative; aria-expanded carries the state) | — | ui | `color.icon.decorative` #a3676b | `color.surface.default` #100c0c | 4.36 | 1 | pass |
 | rail edge (decorative) | — | ui | `color.border.divider` #2b0e0d | `color.surface.default` #100c0c | 1.08 | 1 | pass |
 | skeleton default text | default | text | `color.text.default` #e99499 | `color.surface.default` #100c0c | 8.48 | 4.5 | pass |
@@ -2039,7 +2059,7 @@ repository.
 | table hover text | hover | text | `color.text.default` #e99499 | `color.interaction.hover.bg` #1c0a09 | 8.35 | 4.5 | pass |
 | table selected text | selected | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
 | table selected+focus-visible text | selected+focus-visible | text | `color.interaction.selection.text` #f4eeee | `color.interaction.selection.bg` #531310 | 12.47 | 4.5 | pass |
-| table selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.interaction.selection.bg` #531310 | 7.48 | 3 | pass |
+| table selected+focus-visible outline | selected+focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.interaction.selection.bg` #531310 | 3.38 | 3 | pass |
 | table selected+container-inactive text | selected+container-inactive | text | `color.interaction.selection.inactive-text` #e99499 | `color.interaction.selection.inactive-bg` #420f0c | 7.02 | 4.5 | pass |
 | table sorted text | sorted | text | `color.text.bright` #ffa2a7 | `color.surface.default` #100c0c | 10.17 | 4.5 | pass |
 | table empty text | empty | text | `color.text.muted` #bd787d | `color.surface.default` #100c0c | 5.69 | 4.5 | pass |
@@ -2142,6 +2162,9 @@ repository.
 | time-picker focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.input` #000000 | 4.97 | 3 | pass |
 | time-picker invalid text | invalid | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
 | time-picker invalid border | invalid | ui | `color.status.danger.border` #e53935 | `color.surface.input` #000000 | 4.97 | 3 | pass |
+| time-picker invalid+focus-visible text | invalid+focus-visible | text | `color.text.default` #e99499 | `color.surface.input` #000000 | 9.16 | 4.5 | pass |
+| time-picker invalid+focus-visible border | invalid+focus-visible | ui | `color.status.danger.border` #e53935 | `color.surface.input` #000000 | 4.97 | 3 | pass |
+| time-picker invalid+focus-visible outline | invalid+focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.surface.input` #000000 | 10.98 | 3 | pass |
 | validation message on the canvas | — | text | `color.status.danger.text` #f73f35 | `color.surface.canvas` #000000 | 5.72 | 4.5 | pass |
 | help text on the canvas | — | text | `color.text.muted` #bd787d | `color.surface.canvas` #000000 | 6.15 | 4.5 | pass |
 | disabled text (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.interaction.disabled.bg` #160b0b | 3.24 | 3 | pass |
@@ -2153,7 +2176,7 @@ repository.
 | Control boundary | — | ui | `color.border.control` #a3676b | `color.surface.default` #100c0c | 4.36 | 3 | pass |
 | toast default text | default | text | `color.text.default` #e99499 | `color.surface.canvas` #000000 | 9.16 | 4.5 | pass |
 | toast default border | default | ui | `color.border.overlay` #e53935 | `color.surface.canvas` #000000 | 4.97 | 3 | pass |
-| toast hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg-strong` #630f0d | 11.41 | 4.5 | pass |
+| toast hover text | hover | text | `color.text.link-hover` #f4eeee | `color.interaction.hover.bg` #1c0a09 | 16.70 | 4.5 | pass |
 | toast focus-visible text | focus-visible | text | `color.action.tertiary.text` #e99499 | `color.surface.canvas` #000000 | 9.16 | 4.5 | pass |
 | toast focus-visible outline | focus-visible | ui | `color.interaction.focus.ring` #e53935 | `color.surface.canvas` #000000 | 4.97 | 3 | pass |
 | toast stacked text | stacked | text | `color.text.muted` #bd787d | `color.surface.canvas` #000000 | 6.15 | 4.5 | pass |
@@ -2217,7 +2240,7 @@ repository.
 | panel edge (decorative) | — | ui | `color.border.default` #531310 | `color.surface.canvas` #000000 | 1.47 | 1 | pass |
 | back button text | — | text | `color.action.secondary.text` #ffa2a7 | `color.surface.canvas` #000000 | 10.98 | 4.5 | pass |
 | back button boundary | — | ui | `color.action.secondary.border` #a3676b | `color.surface.canvas` #000000 | 4.71 | 3 | pass |
-| next button boundary | — | ui | `color.action.primary.border` #9e231f | `color.surface.canvas` #000000 | 2.71 | 3 | waived: the primary button is identified by its text at 9.28:1 on its fill and by its position; the fill measures 1.86:1 and its border 2.56:1 against the canvas, a documented property of the actions family, not of the wizard |
+| next button boundary | — | ui | `color.action.primary.border` #9e231f | `color.surface.canvas` #000000 | 2.71 | 3 | waived: the primary button is identified by its text on the fill and by its position; the low-contrast fill and border against the canvas are a documented property of the actions family |
 | ring on the next button's fill | focus-visible | ui | `color.interaction.focus.ring-container` #ffa2a7 | `color.action.primary.bg` #7d1310 | 5.57 | 3 | pass |
 | future step text (exempt; house floor 3:1) | disabled | ui | `color.text.disabled` #8a5559 | `color.surface.canvas` #000000 | 3.52 | 3 | pass |
 
@@ -2233,8 +2256,8 @@ a file that changes one does not claim the others. A port never:
 - overwrites a user's whole settings file;
 - replaces keybindings, credentials or unrelated preferences.
 
-It installs under a unique name next to the host's defaults and documents how
-to roll back.
+It installs under a unique name beside the host's defaults and documents the
+rollback.
 
 ### What every port must reproduce
 
@@ -2266,9 +2289,9 @@ percentage means something only with its denominator.
 
 ### Shared component defaults
 
-A component whose Portability section links here follows these rules. Its
-frontmatter `responsive` and `portability.nativeFallbacks` fields carry the
-same rules for the exports.
+Components whose Portability section links here follow these rules; their
+`responsive` and `portability.nativeFallbacks` fields carry them into the
+exports.
 
 - Wrap labels and actions without changing source order.
 - Use logical spacing in RTL.
@@ -2289,16 +2312,31 @@ onto the framework's theme keys and lists what it cannot express.
 ### Native ports
 
 A port lives at `ports/<slug>/` with a README, `port.json`, `mapping.json` and
-importable artifacts under `dist/`. Add `capabilities.json` for precise role
-classifications. Add `src/` only for real generator inputs that these sources
-cannot express, and `evidence/` only for actual evidence; neither needs a
-placeholder directory. `templates/port/` is a starting aid when work begins.
-
+importable artifacts under `dist/`. Add `src/` only for real generator inputs
+that these sources cannot express, and `evidence/` only for actual evidence;
+neither needs a placeholder directory. `templates/port/` is a starting aid
+when work begins.
+
+- `capabilities.json` refines each role into mapped, inherited, unsupported,
+  out-of-scope or not-implemented, with a surface and a reason (D-018). A
+  legacy unmapped reason stays unclassified, never guessed. One generated
+  catalogue feeds the summaries, drill-downs and task kits; private parity
+  records never enter it.
+- Every port classifies a new role, even when only one maps it. Telegram alone
+  maps `surface.accent` (outgoing bubbles; incoming stay `surface.raised`,
+  timestamps on both `text.muted`) and `interaction.text-selection.tint`
+  (Android text selection; Desktop keeps `selection.bg` with near-white text).
+  Claude Code's `userMessageBackground` keeps `interaction.selection.bg`, and
+  Obsidian, which keeps the text colour, would suit the tint; each adoption is
+  a separate change with its own import check (D-035, D-036).
 - Statuses are `experimental`, `verified` and `deprecated`. Reference
   implementations and roadmap candidates are not statuses.
 - `verified` needs a real import into the recorded application version, with
   matching evidence and a token digest equal to the current default profile.
-  A successful XML or JSON parse is a structural pass, not verification.
+  Import verification is separate from mapping state and declared status: a
+  relevant change to the target, tokens, mappings, capabilities or artifact
+  bytes makes evidence stale, and a failed or missing check never passes. A
+  successful XML or JSON parse is a structural pass, not verification.
 - Never hand-edit a generated hex. Fix the mapping or the approved token and
   regenerate.
 - `npm run generate` writes `dist/` for every port whose `format` has an
@@ -2310,7 +2348,7 @@ placeholder directory. `templates/port/` is a starting aid when work begins.
   convention. Unsafe or duplicate paths and missing/extra outputs fail before
   any port artifact is written. Obsidian emits a manifest and CSS together;
   Telegram emits Android text and a Desktop zip.
-- The README downloads table links each file at the release tag, and the site
+- The README downloads table links each file at the release tag; the site
   serves a copy at `ports/<slug>/<file>`.
 
 For JetBrains, an editor scheme (`.icls`) and a UI theme plugin are separate
@@ -2322,10 +2360,10 @@ tested version before mapping.
 ### The reference implementation
 
 `j3w1/j3w1.github.io` is the flagship web implementation and the source of the
-observed values. This repository does not scrape it at build time, and nothing
-synchronises in either direction. A later integration pins a release of this
-theme in that site through a separate reviewed change, and records its own
-site-specific values (window-manager geometry, wallpaper gradients) as such.
+observed values. Nothing is scraped at build time or synchronised in either
+direction. An integration there pins a release of this theme through a
+separate reviewed change and records its site-specific values (window-manager
+geometry, wallpaper gradients) as such.
 
 ## Actions
 
@@ -2370,20 +2408,16 @@ The native push button in the four action tones; primary is the only filled butt
 
 #### Purpose
 
-The push button that triggers an action. Four tones and no more: `primary`
-is the single filled button in a view, `secondary` is the outline for every
-other action, `tertiary` is the ghost for low-emphasis and toolbar actions,
-`destructive` is an outline in the danger tone that fills on hover. A
-destructive button also requires a confirmation step or an undo affordance;
-the colour is not the safeguard. Navigation is a link, not a button.
+Triggers an action; navigation is a link. Four tones only, and one `primary`
+per view; `secondary` serves every other action, `tertiary` low-emphasis and
+toolbar actions. A `destructive` button also needs a confirmation step or an
+undo; the colour is not the safeguard.
 
 #### Anatomy
 
-A native `<button>`; optional leading icon; the label. The loading glyph
-occupies the icon slot so the size never changes. A filled destructive
-modifier (`.button-destructive-filled`, {color.action.destructive.filled-bg}
-with {color.action.destructive.filled-text}) exists only inside confirm
-dialogs.
+The filled destructive modifier (`.button-destructive-filled`,
+{color.action.destructive.filled-bg} with
+{color.action.destructive.filled-text}) exists only inside confirm dialogs.
 
 #### States
 
@@ -2391,52 +2425,42 @@ dialogs.
 | --- | --- | --- |
 | default | primary: {color.action.primary.bg} fill, {color.action.primary.text}, 1px {color.action.primary.border}; secondary: 1px {color.action.secondary.border}, {color.action.secondary.text}; tertiary: {color.action.tertiary.text}, no border; destructive: 1px {color.action.destructive.border}, {color.action.destructive.text} | — |
 | hover | primary → {color.action.primary.hover-bg}; secondary → {color.action.secondary.hover-bg}; tertiary → {color.action.tertiary.hover-bg}; destructive fills {color.action.destructive.hover-bg} with {color.action.destructive.hover-text} | cursor: pointer; hover-capable pointers only |
-| focus-visible | ring 1px dashed at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill | the ring |
-| active | primary → {color.action.primary.pressed-bg}; secondary → {color.action.secondary.pressed-bg}; tertiary → {color.interaction.pressed.bg}; destructive → {color.action.destructive.pressed-bg}; primary keeps {color.action.primary.border}, secondary and tertiary use {color.border.active}, destructive keeps {color.action.destructive.border} (D-015) | border change on secondary and tertiary; no translation or scale |
-| disabled | {color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}, every tone alike; no hover or active styling | `disabled`; cursor: not-allowed; never opacity |
-| loading | size unchanged; the static `⋯` glyph replaces the icon; the button keeps its tone and stays focusable but ignores activation | glyph; `aria-busy` |
+| focus-visible | 1px dashed ring at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill | the ring |
+| active | fill: primary {color.action.primary.pressed-bg}, secondary {color.action.secondary.pressed-bg}, tertiary {color.interaction.pressed.bg}, destructive {color.action.destructive.pressed-bg}; border: primary and destructive keep theirs, secondary and tertiary take {color.border.active} (D-015) | border change on secondary and tertiary; no translation or scale |
+| disabled | {color.text.disabled} on {color.interaction.disabled.bg}, 1px {color.border.disabled}, every tone alike; no hover or active styling | `disabled`; cursor: not-allowed; never opacity |
+| loading | size and tone unchanged; the static `⋯` glyph replaces the icon; stays focusable, ignores activation | glyph; `aria-busy` |
 
 Precedence: disabled > loading > active > hover; focus-visible is always
 drawn.
 
-The primary edge stays unchanged when pressed (D-015). Its exact role is
-`root.border-active` in the part map, just as `root.border` names the rest
-edge. The default-tone state contrast map checks the text against the
-pressed fill; it does not substitute `color.border.active` for this
-unchanged edge. The existing primary-action contrast declaration identifies
-the labelled button through its text, not through the fill's boundary.
-
 #### Keyboard
 
-Native. Enter and Space activate; nothing else is bound. A loading button
-stays in the tab order so focus is not lost mid-action, and the host ignores
-activation until `aria-busy` clears.
+Native; nothing else is bound. A loading button keeps its tab stop so focus
+is not lost mid-action.
 
 #### Accessibility
 
-The accessible name is the label text; an icon-only button is the
-icon-button component. Never `aria-disabled` on a button that should be
-skipped, and never `disabled` on a button whose reason a user needs to
-discover: prefer keeping it enabled and explaining on activation. Contrast:
-primary 9.28:1, secondary 10.37:1, tertiary 8.65:1, destructive 5.40:1 at
-rest and 4.58:1 on the hover fill; every outline border ≥ 4.45:1; rings ≥
-3:1 on every fill they sit on. The target is at least 24×24 CSS pixels in
-`compact` density with 4px between neighbours.
+The accessible name is the label; an icon-only button is `icon-button`.
+Never `aria-disabled` on a button that should be skipped. When a user needs
+to discover why an action is unavailable, keep the button enabled and
+explain on activation instead of disabling it. Text meets 4.5:1 and borders
+and rings 3:1 on every fill they sit on. Target at least 24×24 CSS pixels in
+`compact`, with 4px between neighbours.
 
 #### Portability
 
 Fill, border and outline express every state; no gradient, shadow or
-transform is used. Hosts without dashed outlines draw a solid 1px ring in the
-same colour and record the deviation. Hosts that cannot recolour the ring on
-a fill draw it outside the fill at +1px.
+transform. A host without dashed outlines draws a solid 1px ring in the same
+colour and records the deviation; one that cannot recolour the ring on a
+fill draws it outside the fill at +1px.
 
 #### Non-examples
 
-Rounded corners or pill shapes. Two filled buttons in one view. A red
-filled destructive button at rest. A hover that only changes text colour.
-Translating or scaling the button on press. A spinner inside the button.
-Disabling with opacity. A `<div>` or `<a>` styled as a button. A gradient or
-shadow to suggest depth.
+Rounded or pill shapes. Two filled buttons in one view. A red filled
+destructive button at rest. A hover that only changes text colour.
+Translating or scaling on press. A spinner inside the button. Disabling with
+opacity. A `<div>` or `<a>` styled as a button. A gradient or shadow for
+depth.
 
 ### Icon button (`icon-button`)
 
@@ -2453,7 +2477,7 @@ A square ghost button whose only content is a 16px line icon; it always carries
 | root.bg-toggled | `color.interaction.selection.bg` | `#531310` | use |
 | root.text-toggled | `color.interaction.selection.text` | `#f4eeee` | use |
 | root.border-toggled | `color.border.selected-indicator` | `#e53935` | use |
-| root.ring-toggled | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| root.ring-toggled | `color.interaction.focus.ring` | `#e53935` | use |
 | root.text-disabled | `color.text.disabled` | `#8a5559` | use |
 | root.bg-disabled | `color.interaction.disabled.bg` | `#160b0b` | use |
 | root.border-disabled | `color.border.disabled` | `#7d1310` | use |
@@ -2461,72 +2485,66 @@ A square ghost button whose only content is a 16px line icon; it always carries
 
 #### Purpose
 
-A button whose whole content is one icon: toolbar actions, close and clear
-affordances, and boolean toggles such as pin, mute or wrap. It is the
-tertiary tone constrained to a square. Any icon button needs an accessible
-name and a tooltip; if the label must be visible it is a button.
+The tertiary tone in a square, for toolbar actions, close and clear
+affordances and boolean toggles such as pin, mute or wrap. If the label must
+be visible, use `button`.
 
 #### Anatomy
 
-A native `<button>` sized to the density control height in both axes with a
-single 16px inline SVG inside. The border is 1px and transparent at rest so
-the active and toggled borders do not shift the layout.
+Parts as listed in the anatomy.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | {color.action.tertiary.text} icon on nothing; transparent 1px border | — |
+| default | {color.action.tertiary.text} icon, no fill; transparent 1px border | — |
 | hover | background → {color.action.tertiary.hover-bg} | cursor: pointer; hover-capable pointers only |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| focus-visible | 1px dashed ring {color.interaction.focus.ring} at −2px | the ring |
 | active | background → {color.interaction.pressed.bg}; border → {color.border.active} | border change; no translation |
-| disabled | {color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}; no hover | `disabled`; cursor: not-allowed |
-| toggled | fill {color.interaction.selection.bg} with {color.interaction.selection.text}; border {color.border.selected-indicator}; the icon draws in its filled form | `aria-pressed="true"`; the filled icon shape; the border |
-| toggled+focus-visible | the selection fill and a ring in {color.interaction.focus.ring-container} | both visible at once |
+| disabled | {color.text.disabled} on {color.interaction.disabled.bg}, 1px {color.border.disabled}; no hover | `disabled`; cursor: not-allowed |
+| toggled | {color.interaction.selection.bg} fill, {color.interaction.selection.text}, border {color.border.selected-indicator}; filled icon form | `aria-pressed="true"`; the filled icon shape; the border |
+| toggled+focus-visible | the selection fill and 1px dashed {color.interaction.focus.ring} at −2px | both visible at once |
 
 Precedence: disabled > toggled > active > hover; focus-visible is always
 drawn.
 
 #### Keyboard
 
-Native. The toggle variant flips `aria-pressed` on Enter and Space and does
-not move focus. Inside a toolbar the host applies roving tabindex; the
-button itself binds nothing.
+Native; the toggle does not move focus. In a toolbar the host applies roving
+tabindex; the button binds nothing.
 
 #### Accessibility
 
-`aria-label` (or `aria-labelledby`) names the button; the tooltip repeats
-the same text and is not the name. The SVG is `aria-hidden="true"` and
-`focusable="false"`. A toggle uses `aria-pressed`, whose value is announced;
-the name never changes with the state ("Mute", not "Mute" / "Unmute").
-Contrast: icon 8.65:1 at rest, 12.47:1 on the selection fill; ring 4.69:1,
-container ring 7.48:1 on the selection fill. Target ≥ 24×24 CSS pixels with
-4px between neighbours in `compact` density.
+Every icon button has an accessible name (`aria-label` or `aria-labelledby`)
+and a tooltip that repeats it but is not the name. The SVG is
+`aria-hidden="true"` and `focusable="false"`. The name never changes with
+the state ("Mute", not "Mute" / "Unmute"). The icon meets 4.5:1 and rings
+3:1 on every fill. Target at least 24×24 CSS pixels in `compact`, with 4px
+between neighbours.
 
 #### Portability
 
-Square, fill, border, outline; the icon is currentColor so it follows every
-state without its own colour. Hosts without inline SVG use their icon theme at
-16px and record the substitution. Hosts without dashed outlines draw a solid
-1px ring.
+Square, fill, border and outline; the `currentColor` icon follows every
+state. A host without inline SVG uses its icon theme at 16px and records the
+substitution; one without dashed outlines draws a solid 1px ring.
 
 #### Non-examples
 
-A circle. An icon button without an accessible name. A toggle that changes
-its label instead of `aria-pressed`. A hover that recolours the icon alone.
-An emoji or icon-font glyph in place of the SVG. A toggled state shown by
-colour alone with a line icon. A shadow or scale on press.
+A circle. No accessible name. A toggle that changes its label instead of
+`aria-pressed`. A hover that recolours only the icon. An emoji or icon-font
+glyph instead of the SVG. A toggled state shown by colour alone with a line
+icon. A shadow or scale on press.
 
 ### Link (`link`)
 
-The native anchor for navigation; always underlined in the link-underline role, hover fills with the strong hover surface, the current page carries a 2px indicator bar. Family: actions. Priority: R1. Maturity: stable. States: default, hover, focus-visible, visited, current.
+The native anchor for navigation; always underlined in the link-underline role, hover fills with the hover surface, the current page carries a 2px indicator bar. Family: actions. Priority: R1. Maturity: stable. States: default, hover, focus-visible, visited, current.
 
 | Part | Role | Value | Eligibility |
 | --- | --- | --- | --- |
 | root.text | `color.text.link` | `#f73f35` | use |
 | root.underline | `color.text.link-underline` | `#dc282e` | use |
 | root.text-hover | `color.text.link-hover` | `#f4eeee` | use |
-| root.bg-hover | `color.interaction.hover.bg-strong` | `#630f0d` | use |
+| root.bg-hover | `color.interaction.hover.bg` | `#1c0a09` | use |
 | root.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | root.text-visited | `color.text.link` | `#f73f35` | use |
 | root.text-current | `color.text.bright` | `#ffa2a7` | use |
@@ -2535,52 +2553,47 @@ The native anchor for navigation; always underlined in the link-underline role,
 
 #### Purpose
 
-Navigation to another document, section or resource. A link never performs
-an action on the current page; that is a button. Links are recognisable by
-the persistent underline as well as strong red {color.text.link}, distinct
-from rose body text and headings (D-024).
+Navigation to another document, section or resource; an action on the
+current page is a button. A link is recognised by its persistent underline as
+well as strong red {color.text.link}, distinct from rose body text and
+headings (D-024).
 
 #### Anatomy
 
-A native `<a href>`. Inline: text plus the 1px underline. Standalone: the
-same with a trailing arrow icon and a little horizontal padding so the hover
-fill has room. Current: `aria-current="page"`, brighter text and a 2px bar
-replacing the underline.
+Parts as listed in the anatomy; the current link has no underline, only its
+2px bar.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | {color.text.link}; underline 1px {color.text.link-underline} offset 2px | the underline |
-| hover | background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover}; underline 2px in the text colour | underline thickens 1px → 2px; cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px; no change to the underline | the ring |
-| visited | {color.text.link}; underline unchanged | the underline continues to mark navigation; browsing history does not reduce its visibility |
-| current | text → {color.text.bright}; the underline becomes a 2px {color.border.selected-indicator} bottom border; no hover fill | `aria-current="page"`; the bar's 2px weight |
+| default | {color.text.link}; 1px {color.text.link-underline} underline, offset 2px | the underline |
+| hover | fill {color.interaction.hover.bg} (D-027); text {color.text.link-hover}; underline 2px in the text colour | underline 1px → 2px; cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px; underline unchanged | the ring |
+| visited | as default | the underline still marks navigation |
+| current | {color.text.bright}; a 2px {color.border.selected-indicator} bottom border replaces the underline; no hover fill | `aria-current="page"`; the 2px bar |
 
 Precedence: current > hover; focus-visible is always drawn.
 
 #### Keyboard
 
-Native. Enter follows the link; Space never does. Skip links and in-page
-links move focus to their target, which needs `tabindex="-1"` when it is not
-focusable.
+As in the key table. An in-page or skip-link target that is not focusable
+takes `tabindex="-1"` so focus moves to it.
 
 #### Accessibility
 
-The link text describes the destination on its own ("Release notes", never
-"here"). Same destination, same text. `aria-current="page"` marks the
-current document in navigation and nothing else. Links that open a new
-window say so in text. Link text meets 4.5:1 on canvas, panel and raised
-surfaces; the underline meets 3:1. The generated contrast report records exact
-ratios for the current profile, including hover text and focus. Inline targets are exempt
-from the 24×24 minimum; standalone links reach it through their line box.
+Link text names the destination on its own ("Release notes", never "here");
+same destination, same text. `aria-current="page"` marks the current document
+in navigation and nothing else. A link that opens a new window says so in
+text. Text meets 4.5:1 on canvas, panel and raised surfaces; the underline
+3:1. Inline links are exempt from the 24×24 target minimum; standalone links
+reach it through their line box.
 
 #### Portability
 
-Colour, underline thickness, background and outline; the arrow is an inline
-SVG in currentColor. Hosts that cannot thicken an underline invert the link on
-hover instead and record it. Hosts without `aria-current` expose the current
-link as selected.
+The arrow is an inline SVG in currentColor. A host that cannot thicken an
+underline inverts the link on hover instead and records it. A host without `aria-current` exposes the current link as
+selected.
 
 #### Non-examples
 
@@ -2600,7 +2613,12 @@ Related independent native actions with individual tab stops. Family: actions. P
 | root.border | `color.border.control` | `#a3676b` | use-and-report (D-007) |
 | heading.text | `color.text.bright` | `#ffa2a7` | use |
 | secondary.text | `color.text.muted` | `#bd787d` | use |
-| control.bg | `color.surface.input` | `#000000` | use |
+| control.bg | `color.action.secondary.bg` | `rgb(0 0 0 / 0%)` | use |
+| control.text | `color.action.secondary.text` | `#ffa2a7` | use |
+| control.border | `color.action.secondary.border` | `#a3676b` | use |
+| control.bg-hover | `color.action.secondary.hover-bg` | `#630f0d` | use |
+| control.bg-active | `color.action.secondary.pressed-bg` | `#420f0c` | use |
+| control.border-active | `color.border.active` | `#e53935` | use |
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-color-border-disabled | `color.border.disabled` | `#7d1310` | use |
@@ -2608,37 +2626,36 @@ Related independent native actions with individual tab stops. Family: actions. P
 | dependency.role-color-text-disabled | `color.text.disabled` | `#8a5559` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-4 | `space.4` | `4px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Group related independent actions without turning them into an exclusive choice. Each button keeps its native type, accessible name and tab stop. Application effects belong to the host.
+Groups related, independent actions without making them an exclusive choice.
 
 #### Anatomy
 
-- **group:** Labelled group that wraps its buttons.
-- **actions:** Independent buttons in source order.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Named content on the default surface. | Native text and structure. |
+| default | Named content on the default surface. Its buttons are the secondary button (button.md). | Native text and structure. |
 | focus-visible | Dashed focus ring. | Native keyboard focus position. |
 | disabled | Disabled semantic foreground, background and border at full opacity. | Native disabled state blocks activation. |
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Visit each enabled button.
-- **Enter / Space:** Activate the focused native button.
+As in the key table; no arrow-key navigation is added.
 
 #### Accessibility
 
-Use role=group with a visible or accessible label. Buttons retain distinct names and native disabled behavior. A button group does not add arrow-key navigation or selection semantics.
+`role=group` with a visible or accessible label. Buttons keep distinct names
+and native disabled behaviour; the group adds no selection semantics.
 
 #### Portability
 
@@ -2646,7 +2663,8 @@ Follows the shared component defaults in `spec/portability.md` (section "Shared
 
 #### Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls, colour-only status, drag-only operations, hidden required
+instructions, stolen focus or an invented service success.
 
 ### Segmented control (`segmented-control`)
 
@@ -2687,23 +2705,22 @@ A short exclusive choice implemented with labelled native radios. Family: action
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
 | dependency.role-space-16 | `space.16` | `16px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-24 | `space.24` | `24px` | use |
 | dependency.role-space-4 | `space.4` | `4px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Choose one value from a short labelled set using native radios. This changes a value; use tabs for associated content panels. Native names, required checks, disabled fieldsets and form reset are preserved.
+Changes one value from a short labelled set; for associated content panels
+use tabs.
 
 #### Anatomy
 
-- **fieldset:** Legend names the choice.
-- **options:** Native radios sharing one name, each with a visible label.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Named content on the default surface. | Native text and structure. |
 | checked | Selected fill and a check indicator. | Native checked state. |
@@ -2712,12 +2729,13 @@ Choose one value from a short labelled set using native radios. This changes a v
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Enter the native radio group once and leave it.
-- **Arrow keys / Space:** Use native radio selection and wrapping.
+As in the key table.
 
 #### Accessibility
 
-Keep native radios and labels. A checked value has both a visible native indicator and its programmatic checked state. Do not hide all radios from assistive technology or put role=tab on the labels.
+Keep native radios and labels. A checked value has both a visible native
+indicator and its programmatic checked state. Never hide all radios from
+assistive technology or put `role=tab` on the labels.
 
 #### Portability
 
@@ -2751,18 +2769,13 @@ The label, control, help and message wrapper that every form control sits in; it
 
 #### Purpose
 
-The wrapper that gives every control the same label, description and error
-treatment. Controls specify their box; the field specifies what sits above
-and below it and how they are linked. Every form control in this theme is
-rendered inside a field or a fieldset.
+Gives every control the same label, description and error treatment: the
+control specifies its box, the field what sits above and below it and how
+they are linked. Every form control renders inside a field or a fieldset.
 
 #### Anatomy
 
-Label above the control, always stacked; the control slot; help text
-below in {color.text.muted}; the validation message, which takes the help
-slot visually while help stays in the DOM and `aria-describedby` lists both.
-The required mark is present in the markup and shown only when the control
-is required.
+Parts as listed in the anatomy.
 
 #### States
 
@@ -2771,37 +2784,32 @@ is required.
 | default | label {color.text.bright}; help {color.text.muted}; control as its own component | — |
 | required | `*` after the label in {color.status.danger.text} plus visually hidden "required" | `required` attribute; the mark |
 | invalid | the control's 2px {color.status.danger.border}; message with the ✕ glyph in {color.status.danger.text}; help visually hidden | border width 1 → 2px; glyph; `aria-invalid` |
-| disabled | label and control text {color.text.disabled}; control {color.interaction.disabled.bg} with 1px {color.border.disabled}; help unchanged | `disabled`; cursor: not-allowed |
+| disabled | label and control text {color.text.disabled}; control {color.interaction.disabled.bg}, 1px {color.border.disabled}; help unchanged | `disabled`; cursor: not-allowed |
 
 Precedence: disabled > invalid; required is shown in every state.
 
 #### Keyboard
 
-The field adds no behaviour. Clicking the label focuses the control
-(native `for`). Focus order inside the field is the control's own.
+Adds no behaviour; clicking the label focuses the control (native `for`).
 
 #### Accessibility
 
-Every control has a programmatic label; placeholder text is never the
-label. Help and message are linked with `aria-describedby` in that order so
-the description is read before the error. `aria-invalid="true"` is set only
-after interaction or submit. The message keeps its glyph so the state is not
-colour-only. Contrast: label 10.10:1, help 5.66:1, message 5.26:1 on the
-panel surface; disabled label 3.24:1 (exempt).
+Every control has a programmatic label; placeholder text is never the label.
+The message keeps its glyph, so the state is not colour-only. Text meets
+4.5:1; disabled text is exempt, with a house floor of 3:1.
 
 #### Portability
 
-Plain block layout; the only pseudo-element is nothing, the mark is real
-markup. Hosts without `aria-describedby` put help and message in the
-control's tooltip or accessible description and record it.
+No pseudo-elements: the required mark is real markup. Hosts without
+`aria-describedby` put help and message in the control's tooltip or
+accessible description and record it.
 
 #### Non-examples
 
-A floating label inside the control. A label to the left of the control.
-Placeholder text as the only label. An error shown by a red border alone. A
-message that replaces the help text in the DOM. A required mark that is only
-a colour change. An asterisk with no text alternative. Two controls in one
-field.
+A floating label inside the control. A label left of the control.
+Placeholder as the only label. An error shown by a red border alone. A
+message that replaces the help in the DOM. A colour-only required mark. An
+asterisk with no text alternative. Two controls in one field.
 
 ### Text field (`text-field`)
 
@@ -2837,18 +2845,13 @@ Single-line free-text entry, covering every native input type that renders as a
 
 #### Purpose
 
-Single-line free-text entry. Every native `type` that renders as a line box
-(`text`, `password`, `search`, `number`, `email`, `url`, `tel`) is this
-component; date and time inputs are the date-picker and time-picker
-components because their popups are host surfaces.
+Single-line free-text entry for every native `type` that renders as a line
+box (`text`, `password`, `search`, `number`, `email`, `url`, `tel`). Date and
+time inputs are the date-picker and time-picker components.
 
 #### Anatomy
 
-Label above the control; the control box; optional prefix and suffix inside
-the box separated by a {color.border.divider} rule; the input; optional
-trailing actions (clear, reveal, stepper); help text below; the validation
-message, which takes the help slot visually while help stays in the DOM and
-`aria-describedby` lists both.
+Parts as listed in the anatomy.
 
 #### States
 
@@ -2856,53 +2859,48 @@ message, which takes the help slot visually while help stays in the DOM and
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.input}; text {color.text.default} | — |
 | hover | background → {color.interaction.hover.bg}; border unchanged | cursor: text |
-| focus-visible | border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| focus-visible | border → {color.border.active}; 1px dashed {color.interaction.focus.ring} ring at −2px | the ring |
 | placeholder-shown | placeholder in {color.text.placeholder}, italic | italic |
 | filled | as default with a value | — |
 | required | `*` after the label in {color.status.danger.text} plus visually hidden "required" | `required` attribute; the mark |
-| invalid | border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
-| invalid+focus-visible | the 2px danger border and a 1px dashed ring in {color.interaction.focus.ring-container} at −4px (the control form, recoloured; never the 2px container form) | double boundary |
+| invalid | 2px {color.status.danger.border}; message with the ✕ glyph | border 1 → 2px; glyph; `aria-invalid` |
+| invalid+focus-visible | the 2px danger border plus a 1px dashed {color.interaction.focus.ring-container} ring at −4px (the control form recoloured, never the 2px container form) | double boundary |
 | invalid+hover | as invalid with the hover background | cursor |
-| disabled | text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no hover; the label and help keep their colours | `disabled`; cursor: not-allowed |
+| disabled | text {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; no hover; label and help keep their colours | `disabled`; cursor: not-allowed |
 | disabled+filled | as disabled with a value | `disabled` |
 | read-only | no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; text {color.text.default}; focusable and selectable | `readonly`; dotted edge |
-| read-only+focus-visible | the dotted {color.border.divider} edge unchanged, plus the dashed ring at −2px | the ring |
-| loading | size unchanged; a static `⋯` glyph in {color.text.muted} inside the box after the input and before any trailing action; input remains editable | glyph; `aria-busy` |
+| read-only+focus-visible | the dotted edge unchanged, plus the dashed ring at −2px | the ring |
+| loading | size unchanged; static `⋯` in {color.text.muted} after the input, before any trailing action; still editable | glyph; `aria-busy` |
 
-Precedence when several apply: disabled > loading > invalid > hover;
-focus-visible is always drawn.
+Precedence: disabled > loading > invalid > hover; focus-visible is always
+drawn.
 
 #### Keyboard
 
-Focus order is label (not focusable) → input → clear or reveal → stepper
-buttons. The clear button is `type="button"` with `aria-label="Clear <label>"`;
-the reveal button toggles `type` between `password` and `text` and its own
-`aria-pressed`. Escape in the search variant clears a non-empty value.
+As in the key table; the label is not a stop, and clear or reveal precede the
+stepper buttons.
 
 #### Accessibility
 
-A programmatic label is required (`<label for>`). Help and message are linked
-through `aria-describedby` in that order. `aria-invalid="true"` is set only
-after the user interacted with the field or submitted the form, never on first
-paint. The message is announced on submit through the form's live region, not
-on every keystroke. Contrast: text 8.65:1 on the input surface, placeholder
-5.81:1, disabled text 3.33:1 (exempt), control border 4.45:1 (≥ 3:1), invalid
-border 4.69:1, danger message 5.40:1. The box is at least 24×24 CSS pixels in
-`compact` density.
+The clear button is `type="button"` with `aria-label="Clear <label>"`; the
+reveal button toggles `type` between `password` and `text` and its own
+`aria-pressed`. `aria-invalid` is never set on first paint. The message is
+announced on submit through the form's live region, not on every keystroke.
+Text meets 4.5:1 and borders and rings 3:1; disabled text is exempt (house
+floor 3:1). The box is at least 24×24 CSS pixels in `compact`.
 
 #### Portability
 
-Everything is expressible with border, background and outline; the only
-pseudo-element is the required mark. Toolkits without dashed outlines draw a
-solid 1px ring in the same colour and record the deviation. Toolkits without a
-read-only style treat read-only as default text and record it.
+Border, background and outline express everything; the only pseudo-element is
+the required mark. Toolkits without dashed outlines draw a solid 1px ring in
+the same colour; toolkits without a read-only style show read-only as default
+text. Both record the deviation.
 
 #### Non-examples
 
-Rounded corners. A floating or animated label. An underline-only field with no
-box. A glow instead of the dashed ring. Placeholder text in red. Disabling by
-opacity. Using colour alone for the invalid state. A hover that changes the
-text colour.
+Rounded corners. A floating or animated label. An underline-only field. A glow
+instead of the dashed ring. Red placeholder text. Disabling by opacity. Colour
+alone for the invalid state. A hover that changes the text colour.
 
 ### Textarea (`textarea`)
 
@@ -2938,60 +2936,53 @@ Multi-line free-text entry in the same box as the text field; resizes vertically
 
 Free text longer than a line: descriptions, messages, notes. It shares the
 text field's box, states and message so a form reads as one system. Code
-goes in the code-editor component, not a textarea.
+goes in the code-editor component.
 
 #### Anatomy
 
-Label above; the box with the native `<textarea>` inside, at least three
-rows tall, resizable downwards only; the optional count; help; the
-validation message that takes the help slot visually while help stays in the
-DOM.
+Parts as listed in the anatomy, top to bottom: label, box, count, help; the
+message takes the help slot visually while help stays in the DOM.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.input}; text {color.text.default} | — |
-| hover | background → {color.interaction.hover.bg}; border unchanged | cursor: text |
-| focus-visible | border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
-| placeholder-shown | placeholder in {color.text.placeholder}, italic | italic |
+| hover | → {color.interaction.hover.bg}; border unchanged | cursor: text |
+| focus-visible | border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| placeholder-shown | {color.text.placeholder}, italic | italic |
 | filled | as default with a value | — |
 | required | `*` after the label in {color.status.danger.text} plus visually hidden "required" | `required`; the mark |
-| invalid | border 2px {color.status.danger.border}; message with the ✕ glyph; a count past its limit turns {color.status.danger.text} with the glyph | border width 1 → 2px; glyph; `aria-invalid` |
-| invalid+focus-visible | the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
-| disabled | text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no resize handle | `disabled`; cursor: not-allowed |
+| invalid | 2px {color.status.danger.border}; message with ✕; a count past its limit turns {color.status.danger.text} with the glyph | border 1 → 2px; glyph; `aria-invalid` |
+| invalid+focus-visible | the 2px danger border and a {color.interaction.focus.ring-container} ring at −4px | double boundary |
+| disabled | text {color.text.disabled}, border {color.border.disabled}, fill {color.interaction.disabled.bg}; no resize handle | `disabled`; cursor: not-allowed |
 | read-only | no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; no resize handle; selectable | `readonly`; dotted edge |
 
 Precedence: disabled > invalid > hover; focus-visible is always drawn.
 
 #### Keyboard
 
-Native editing. Enter inserts a line break and never submits. Tab leaves
-the control; a host that needs literal tabs provides a separate command and
-documents it. The count is not focusable.
+As in the key table. A host that needs literal tabs provides a separate
+command and documents it. The count is not focusable.
 
 #### Accessibility
 
-A programmatic label is required. Help, count and message are linked
-through `aria-describedby` in that order. The count is `aria-live="polite"`
-and throttled so it does not announce every keystroke; the limit is stated
-in the help text so it is known before typing. `aria-invalid="true"` only
-after interaction or submit. Contrast as the text field: text 8.65:1,
-placeholder 5.81:1, control border 4.45:1, invalid border 4.69:1, message
-5.40:1.
+A programmatic label is required. `aria-describedby` lists help, count and
+message in that order. The help text states the limit before typing.
+`aria-invalid="true"` only after interaction or submit. Text and placeholder
+meet 4.5:1; control and invalid borders 3:1.
 
 #### Portability
 
-Border, background, outline and `resize: vertical`. Hosts without a resize
-handle grow the box with content up to a maximum and record it. Hosts
-without dashed outlines draw a solid 1px ring.
+Hosts without a resize handle grow the box with content up to a maximum and
+record it. Hosts without dashed outlines draw a solid 1px ring.
 
 #### Non-examples
 
 Horizontal or free resizing. A box narrower than its label column. A count
 that only changes colour past the limit. A glow instead of the dashed ring.
-Rounded corners. An auto-growing box with no maximum. Tab inserting a
-character. Placeholder text as the label. Disabling by opacity.
+Rounded corners. Auto-growing with no maximum. Tab inserting a character.
+Placeholder as the label. Disabling by opacity.
 
 ### Select (`select`)
 
@@ -3023,18 +3014,14 @@ A themed single-choice combobox or multiple-choice list backed by a native selec
 
 #### Purpose
 
-Choosing one option, or several, from a fixed list. D-025 requires theme-owned
-choice surfaces in web applications. The native select remains the form-value
-and constraint source. A searchable or asynchronous list is the separate
-combobox component.
+One or several options from a fixed list. D-025 requires theme-owned choice
+surfaces in web applications; the native select stays the form-value and
+constraint source. A searchable or asynchronous list is `combobox`.
 
 #### Anatomy
 
-Label above; a theme-owned trigger and listbox for single choices, or an
-always-visible multiselectable listbox. Each selected option has a check mark
-and the canonical selection fill. The hidden native `<select>` retains its
-name, options, current values and defaults. Help and validation are linked
-to the visible control. Without JavaScript the original native control is visible.
+Each selected option has a check mark and the selection fill. The hidden
+native `<select>` keeps its name, options, current values and defaults.
 
 #### States
 
@@ -3042,52 +3029,47 @@ to the visible control. Without JavaScript the original native control is visibl
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.input}; value {color.text.default}; chevron {color.icon.default} | the chevron |
 | hover | background → {color.interaction.hover.bg}; border unchanged | cursor: default; hover-capable pointers only |
-| focus-visible | border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| focus-visible | border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px | the ring |
 | required | `*` after the label in {color.status.danger.text} plus visually hidden "required" | `required`; the mark |
-| invalid | border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
-| invalid+focus-visible | the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
-| disabled | text and chevron {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg} | `disabled`; cursor: not-allowed |
+| invalid | 2px {color.status.danger.border}; message with ✕ | border 1 → 2px; glyph; `aria-invalid` |
+| invalid+focus-visible | 2px danger border and {color.interaction.focus.ring-container} ring at −4px | double boundary |
+| disabled | text and chevron {color.text.disabled}; {color.border.disabled}; {color.interaction.disabled.bg} | `disabled`; cursor: not-allowed |
 
-Inside the theme-owned list, a selected option is
-{color.interaction.selection.bg} with {color.interaction.selection.text} and
-group labels are {color.text.muted} on {color.surface.raised}. Precedence:
-disabled > invalid > hover; focus-visible is always drawn.
+In the list, a selected option is {color.interaction.selection.bg} with
+{color.interaction.selection.text}; group labels {color.text.muted} on
+{color.surface.raised}. Precedence: disabled > invalid > hover; focus-visible
+is always drawn.
 
 #### Keyboard
 
-The single control follows the select-only combobox pattern: arrows open and
-move the active option, Home/End reach the ends, typing finds an option, and
-Enter/Space commits. Escape and Tab close without committing. Multiple choices
-use arrows, Space or click to toggle, Shift with arrows for a range, and
-Ctrl/Command+A to select or clear all enabled choices. No modifier is required
-for ordinary multiple selection. The native fallback uses host keyboard behavior.
+As in the key table, plus Home/End to the ends of the single list. Ordinary
+multiple selection needs no modifier. The native fallback keeps host
+behaviour.
 
 #### Accessibility
 
-A programmatic label is required; the first option is a real choice or a
-placeholder option that is `disabled` and `selected` with text such as
-"Choose a workspace", never an empty string. `aria-invalid="true"` only after
-interaction or submit. Help and message through `aria-describedby`. The
-themed popup uses the declared contrast roles. The visible control receives
-the label, required/invalid state and descriptions. A failed native constraint
-focuses that visible control and exposes a theme-owned error. Disabled options,
-optgroups and fieldsets remain unavailable. Current values and defaults survive
+A programmatic label is required. The first option is a real choice or a
+`disabled` `selected` placeholder with text ("Choose a workspace"), never
+empty. `aria-invalid="true"` only after interaction or submit. The visible
+control carries the label, required and invalid state, and descriptions
+(help and message via `aria-describedby`). A failed native constraint focuses
+the visible control and shows a theme-owned error. Disabled options,
+optgroups and fieldsets stay unavailable. Values and defaults survive
 reconnection, programmatic updates and form reset. Automated evidence records
-its actual environments; it does not imply a manual screen-reader pass.
+its real environments and implies no manual screen-reader pass.
 
 #### Portability
 
-Use the packaged behavior and complete copy closure for web implementations.
-The supported enhancement can apply the same renderer to existing selects
-without moving them or duplicating form values. Native platforms keep the
-mappings listed above; no-JavaScript pages expose the native fallback.
+Web implementations use the packaged behaviour and its complete copy closure.
+The enhancement can apply the same renderer to existing selects without
+moving them or duplicating form values.
 
 #### Non-examples
 
-An unthemed browser popup presented as a fully themed implementation. A background-image chevron in
-a literal colour. Rounded corners. A select whose first option is blank. A
-select that triggers navigation on change. Invalid shown by colour alone.
-A glow instead of the ring. Disabling by opacity.
+An unthemed browser popup presented as fully themed. A background-image
+chevron in a literal colour. Rounded corners. A blank first option. Navigation
+on change. Invalid by colour alone. A glow instead of the ring. Disabling by
+opacity.
 
 ### Checkbox (`checkbox`)
 
@@ -3115,32 +3097,29 @@ The native checkbox drawn as a 16px square that fills with the primary action co
 
 #### Purpose
 
-An independent yes/no choice, or several of them under one legend. A
-setting that takes effect immediately is a switch; one of several exclusive
-options is a radio group. A parent checkbox over a partly selected set shows
-the mixed state.
+An independent yes/no choice, or several under one legend. A setting that
+takes effect immediately is a switch; one of several exclusive options is a
+radio group. A parent checkbox over a partly selected set shows the mixed
+state.
 
 #### Anatomy
 
-The box is the native input itself with `appearance: none`, so it keeps
-native focus, form and keyboard behaviour. The ✓ and – glyphs are inline
-SVGs stacked over it in the same 16px cell. The option row is a `<label>`,
-at least 24px tall, which makes the text part of the target. A group is a
-`<fieldset>` with a `<legend>`.
+Parts as listed in the anatomy. Because the box is the native input, it keeps
+native focus, form and keyboard behaviour.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 16px box, 1px {color.border.control} on {color.surface.input}; text {color.text.default} | — |
-| hover | box background → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px around the box | the ring |
-| checked | box fills {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control} | the ✓ glyph; `checked` |
-| mixed | box fills {color.action.primary.bg}; – in {color.action.primary.text} | the – glyph; `indeterminate` / `aria-checked="mixed"` |
-| checked+focus-visible | the fill and a ring in {color.interaction.focus.ring-container} | glyph and ring |
-| checked+disabled | box {color.interaction.disabled.bg} with 1px {color.border.disabled}; ✓ and text in {color.text.disabled} | glyph; `disabled`; cursor: not-allowed |
-| disabled | box {color.interaction.disabled.bg} with 1px {color.border.disabled}; text {color.text.disabled} | `disabled`; cursor: not-allowed |
-| invalid | box border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
+| hover | box → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px around the box | the ring |
+| checked | fill {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control} | ✓ glyph; `checked` |
+| mixed | fill {color.action.primary.bg}; – in {color.action.primary.text} | – glyph; `indeterminate` / `aria-checked="mixed"` |
+| checked+focus-visible | the fill plus a {color.interaction.focus.ring-container} ring | glyph and ring |
+| checked+disabled | box {color.interaction.disabled.bg}, 1px {color.border.disabled}; ✓ and text {color.text.disabled} | glyph; `disabled`; cursor: not-allowed |
+| disabled | box {color.interaction.disabled.bg}, 1px {color.border.disabled}; text {color.text.disabled} | `disabled`; cursor: not-allowed |
+| invalid | 2px {color.status.danger.border} box border; message with the ✕ glyph | border 1 → 2px; glyph; `aria-invalid` |
 | required | `*` after the text or legend in {color.status.danger.text} plus visually hidden "required" | `required`; the mark |
 
 Precedence: disabled > invalid > checked > hover; focus-visible is always
@@ -3148,33 +3127,27 @@ drawn.
 
 #### Keyboard
 
-Native. Space toggles; Enter does nothing. Every checkbox in a group is a
-separate tab stop, unlike radios. A mixed parent becomes checked on the
-first Space and unchecked on the second, never mixed again by keyboard.
+Native; Enter does nothing. A mixed parent becomes checked on the first Space
+and unchecked on the second, never mixed again by keyboard.
 
 #### Accessibility
 
-The text is the label through the wrapping `<label>`; a group has its
-legend read before each option. `indeterminate` is a DOM property with no
-attribute, so the host mirrors it to `data-state-mixed` for styling and the
-state reads as "mixed" natively. A required group marks the legend, not
-every option, and validates on submit. Contrast: text 8.43:1, glyph 9.28:1
-on the fill, box edge 4.45:1 on the input surface and 4.33:1 against the
-panel when checked, ring 4.69:1, container ring 5.57:1 on the fill.
+A group's legend is read before each option. The mixed state reads as "mixed"
+natively. A required group marks the legend, not every option, and validates
+on submit. Text and glyphs meet 4.5:1; box edges and rings 3:1.
 
 #### Portability
 
-A square with a border and a fill plus two glyphs. Hosts that draw their own
-indicator set it square, 16px, and use the same fill and glyph colours; a
-host without a mixed indicator draws the dash itself or records the gap.
+Hosts that draw their own indicator make it square, 16px, with the same fill
+and glyph colours; a host without a mixed indicator draws the dash itself or
+records the gap.
 
 #### Non-examples
 
-Rounded or circular boxes. A tick drawn with a border trick or an icon
-font. A checked state shown by border colour alone with no glyph. A box
-smaller than 16px or a row shorter than 24px. The mixed state used as a
-third value. A checkbox that saves on change. Disabling by opacity. A div
-with `role="checkbox"`.
+Rounded or circular boxes. A tick drawn with a border trick or an icon font.
+A checked state shown by border colour alone. A box under 16px or a row under
+24px. The mixed state as a third value. Saving on change. Disabling by
+opacity. A div with `role="checkbox"`.
 
 ### Radio group (`radio-group`)
 
@@ -3202,29 +3175,24 @@ A fieldset of native radios for one exclusive choice; each radio is a 16px squar
 
 #### Purpose
 
-One choice out of a few visible options. Below two options a checkbox or
-switch is used; above roughly six, a select. The radios are square, as every
-control in this theme is, and are told apart from checkboxes by the inner
-square instead of the ✓ glyph and by arrow-key movement instead of separate
-tab stops.
+One choice among two to roughly six visible options; fewer is a checkbox or
+switch, more a select. It differs from a checkbox by the inner square
+instead of ✓ and by arrow keys instead of separate tab stops.
 
 #### Anatomy
 
-A `<fieldset>` whose `<legend>` asks the question; a list of `<label>` rows
-each holding the native input, drawn as a 16px square with `appearance:
-none`, and its text; the validation message at the end. The inner square is
-a real element stacked over the input in the same cell.
+Parts as listed in the anatomy.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 16px square, 1px {color.border.control} on {color.surface.input}; text {color.text.default} | — |
-| hover | box background → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px around the box | the ring |
-| checked | box fills {color.action.primary.bg}; an 8px inner square in {color.action.primary.text}; border stays {color.border.control} | the inner square; `checked` |
+| hover | box → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px around the box | the ring |
+| checked | box fills {color.action.primary.bg}; 8px inner square in {color.action.primary.text}; border stays {color.border.control} | the inner square; `checked` |
 | checked+focus-visible | the fill and a ring in {color.interaction.focus.ring-container} | inner square and ring |
-| disabled | boxes {color.interaction.disabled.bg} with 1px {color.border.disabled}; inner square and text {color.text.disabled} | `disabled`; cursor: not-allowed |
+| disabled | boxes {color.interaction.disabled.bg}, 1px {color.border.disabled}; inner square and text {color.text.disabled} | `disabled`; cursor: not-allowed |
 | invalid | every box border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
 | required | `*` after the legend in {color.status.danger.text} plus visually hidden "required" | `required`; the mark |
 
@@ -3233,34 +3201,29 @@ drawn.
 
 #### Keyboard
 
-Native. The group is one tab stop; the arrow keys move both focus and the
-check, so moving through a group changes the value. That is why a radio
-group never triggers navigation or a request on change; the value is read on
-submit or through an explicit action.
+Native and one tab stop. Arrows move focus and the check together, so a
+radio group never navigates or sends a request on change; the value is read
+on submit or through an explicit action.
 
 #### Accessibility
 
-The legend is read before each option and is the group's name. Options
-share a `name`. The message is linked with `aria-describedby` on the
-fieldset and `aria-invalid` is set on the inputs after submit. A group with
-no default checked radio must have a required mark or a "none" option, so
-the empty state is intentional. Contrast: text 8.43:1, inner square 9.28:1
-on the fill, box edge 4.45:1 on the input surface and 4.33:1 against the
-panel when checked, ring 4.69:1, container ring 5.57:1.
+The legend names the group and is read before each option. `aria-invalid` is
+set on the inputs after submit. A group with no default checked radio has a
+required mark or a "none" option, so the empty state is intentional. Text
+meets 4.5:1; box edges, the inner square and rings 3:1.
 
 #### Portability
 
-Square, border, fill and one inner square; no pseudo-element is needed.
-Hosts that insist on a circular radio indicator record the deviation rather
-than replacing the control with a custom widget.
+Square, border, fill and one inner square; no pseudo-element. A host that
+insists on a circular indicator records the deviation instead of replacing
+the control with a custom widget.
 
 #### Non-examples
 
-Circular radios. A checked state shown by border colour alone with no inner
-square. Radios that submit or navigate on change. A group with no legend or
-with the legend rendered as a label on one option. Separate tab stops per
-radio. One radio on its own. Disabling by opacity. A div with
-`role="radiogroup"` built from spans.
+Circular radios. Checked shown by border colour alone, without the inner
+square. Submitting or navigating on change. No legend, or the legend as one
+option's label. A tab stop per radio. A lone radio. Disabling by opacity. A
+div with `role="radiogroup"` built from spans.
 
 ### Switch (`switch`)
 
@@ -3286,28 +3249,26 @@ An on/off control that takes effect immediately; a button with role switch and a
 
 #### Purpose
 
-A setting that turns on or off the moment it is toggled: notifications,
-wrap lines, follow system theme. A choice that is only applied on submit is
-a checkbox. The switch is a button because it acts; it is not a form field.
+A setting that applies the moment it is toggled: notifications, wrap lines,
+follow system theme. A choice applied on submit is a checkbox. The switch is
+a button because it acts; it is not a form field.
 
 #### Anatomy
 
-A `<button role="switch">`; inside it the track, a 32×16px box with square
-corners, and the thumb, a 10px square that sits at the start when off and
-at the end when on. The with-labels variant adds a visible name before the
-button and an "Off" / "On" word after the track.
+Parts as listed in the anatomy; the thumb sits at the start when off and at
+the end when on.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | track 1px {color.border.control} on {color.surface.input}; thumb {color.text.default} at the start | thumb position |
-| hover | track background → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the track | the ring |
-| checked | track fills {color.action.primary.bg}; thumb {color.action.primary.text} moves to the end; border stays {color.border.control}; the word reads "On" | `aria-checked="true"`; thumb position; the word |
-| checked+focus-visible | the fill and a ring in {color.interaction.focus.ring-container} on the track | position and ring |
-| disabled | track {color.interaction.disabled.bg} with 1px {color.border.disabled}; thumb and name {color.text.disabled} | `disabled`; cursor: not-allowed |
-| checked+disabled | as disabled with the thumb at the end | `disabled`; `aria-checked="true"`; thumb position |
+| hover | off track → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the track | the ring |
+| checked | track fills {color.action.primary.bg}; thumb {color.action.primary.text} at the end; border stays {color.border.control}; the word reads "On" | `aria-checked="true"`; thumb position; the word |
+| checked+focus-visible | the fill and a {color.interaction.focus.ring-container} ring on the track | position and ring |
+| disabled | track {color.interaction.disabled.bg}, 1px {color.border.disabled}; thumb and name {color.text.disabled} | `disabled`; cursor: not-allowed |
+| checked+disabled | as disabled, thumb at the end | `disabled`; `aria-checked="true"`; thumb position |
 
 The thumb moves without animation by default; a host may transition
 `transform` for at most 120ms under `prefers-reduced-motion:
@@ -3316,32 +3277,28 @@ always drawn.
 
 #### Keyboard
 
-Space and Enter toggle. Nothing else is bound; there is no arrow-key
-movement between switches. Focus never moves as a result of toggling.
+As in the key table; no arrow keys between switches. Toggling never moves
+focus.
 
 #### Accessibility
 
-`role="switch"` on a native button gives the correct name, role and value
-with the button's own keyboard handling; only `aria-checked` is scripted.
-The name states what is on ("Wrap long lines"), never the current value;
-the "Off" / "On" word is `aria-hidden` because assistive technology reads
-`aria-checked`. The state is also carried by thumb position and, in the
-with-labels variant, the word. Contrast: thumb 8.65:1 on the off track,
-9.28:1 on the on track; track edge 4.45:1; ring 4.69:1 off, 5.57:1 on.
+On a native button only `aria-checked` is scripted. The name states what is
+on ("Wrap long lines"), never the current value. Thumb position and, with
+labels, the word also carry the state. The thumb and track edge meet 3:1,
+the ring 3:1 off and on.
 
 #### Portability
 
-Two nested rectangles, a border and a fill; the thumb position is layout,
-not a transform, so it survives hosts with no animation. Hosts with a native
-switch use it, square it, and map the two fills.
+The thumb position is layout, not a transform, so it survives hosts with no
+animation. Hosts with a native switch use it, square it, and map the two
+fills.
 
 #### Non-examples
 
-A pill-shaped track or a round thumb. A switch that only takes effect on
-submit. A checkbox input styled as a switch. Colour as the only difference
-between on and off. A green on colour. A label that reads "On" as the name.
-Disabling by opacity. A sliding animation longer than 120ms or one that
-runs under reduced motion.
+A pill track or round thumb. A switch that applies on submit. A checkbox
+input styled as a switch. Colour as the only on/off difference. A green on
+colour. "On" as the name. Disabling by opacity. A slide longer than 120ms or
+one under reduced motion.
 
 ### Fieldset (`fieldset`)
 
@@ -3363,52 +3320,46 @@ The native fieldset that groups related fields under a legend inside a 1px divid
 
 #### Purpose
 
-Grouping fields that belong together: an address, a set of credentials,
-the options of one feature. The legend names the group for sighted users
-and assistive technology alike, and disabling the fieldset disables every
-control inside it in one step. Checkbox and radio groups use their own
-components, which are fieldsets too.
+Groups fields that belong together: an address, a set of credentials, the
+options of one feature. Checkbox and radio groups use their own components,
+which are fieldsets too.
 
 #### Anatomy
 
-The native `<fieldset>` with a 1px {color.border.divider} border and 16px
-padding; the `<legend>` in {color.text.bright} sitting in the top border;
-the fields stacked inside. The border is a section rule, decorative by
-design; the legend and the spacing carry the grouping.
+Parts as listed in the anatomy. The border is a decorative section rule; the
+legend and the spacing carry the grouping.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 1px {color.border.divider} border; legend {color.text.bright}; fields as their own components | the border and the legend |
-| disabled | legend and labels {color.text.disabled}; every control inside takes its own disabled treatment ({color.interaction.disabled.bg}, {color.border.disabled}); the border unchanged | `disabled` on the fieldset; cursor: not-allowed on the controls |
+| disabled | legend and labels {color.text.disabled}; each control takes its own disabled treatment ({color.interaction.disabled.bg}, {color.border.disabled}); border unchanged | `disabled` on the fieldset; cursor: not-allowed on the controls |
 
 #### Keyboard
 
-None of its own. Disabled fieldsets remove their controls from the tab
-order natively, so a disabled group is skipped rather than walked.
+None of its own; a disabled group's controls leave the tab order natively.
 
 #### Accessibility
 
-The legend is the accessible name of the group and is announced before the
-first field inside; it says what the group is, not what to do. A group
-never nests deeper than two levels. Disabling a group hides its controls
-from keyboard users, so a disabled group states why in text before it or
-keeps its controls enabled. Contrast: legend 10.10:1, labels 8.43:1, help
-5.66:1 on the panel surface.
+The legend names the group and is announced before its first field; it says
+what the group is, not what to do. Groups nest at most two levels. Because
+disabling hides controls from keyboard users, a disabled group states why in
+text before it or keeps its controls enabled. Legend, labels and help meet
+4.5:1.
 
 #### Portability
 
-A border and a heading. Hosts without a legend-in-border draw the heading
-above the box and record it. Disabled propagation is native on the web and
-in GTK and Qt; a host without it disables each control.
+Hosts without a legend-in-border draw the heading above the box and record
+it. Disabled propagation is native on the web, GTK and Qt; a host without it
+disables each control.
 
 #### Non-examples
 
-A fieldset with no legend or with a legend hidden visually. A card used
-instead of a fieldset for form controls. Rounded corners. A 2px or
-`border.control` border on the group, which would read as a control. A
-legend in accent red. Disabling only the legend. Nesting three levels deep.
+No legend, or a visually hidden one. A card instead of a fieldset for form
+controls. Rounded corners. A 2px or `border.control` border, which reads as a
+control. A legend in accent red. Disabling only the legend. Three levels of
+nesting.
 
 ### Number field (`number-field`)
 
@@ -3441,17 +3392,14 @@ The text-field box around a native number input with right-aligned tabular digit
 
 #### Purpose
 
-Entering a bounded number: a gap in pixels, a timeout in milliseconds, a
-count. The theme replaces the host spinner, which is tiny and inconsistent,
-with two square buttons that are real tab stops. Free-form numeric text such
-as a version or an identifier is a text field with `inputmode`.
+Entering a bounded number: a gap in pixels, a timeout, a count. The host
+spinner, tiny and inconsistent, gives way to two square buttons that are
+real tab stops. Free-form numeric text (a version, an identifier) is a
+`text-field` with `inputmode`.
 
 #### Anatomy
 
-Label above; the box; the input with digits aligned to the end; the
-optional unit; the stepper with + over −, each button half the control
-height and at least 24px wide; help stating the range; the validation
-message.
+Parts as listed in the anatomy; each stepper button is at least 24px wide.
 
 #### States
 
@@ -3459,43 +3407,39 @@ message.
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.input}; digits {color.text.default}; unit {color.text.muted}; stepper glyphs {color.action.tertiary.text} | — |
 | hover | background → {color.interaction.hover.bg}; a hovered stepper button → {color.action.tertiary.hover-bg} | cursor: text on the input, pointer on the buttons |
-| focus-visible | border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px on the box, or on the focused stepper button | the ring |
-| invalid | border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
+| focus-visible | border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px on the box or the focused stepper button | the ring |
+| invalid | 2px {color.status.danger.border}; message with the ✕ glyph | border 1 → 2px; glyph; `aria-invalid` |
 | invalid+focus-visible | the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
 | disabled | text, unit and glyphs {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; buttons disabled | `disabled`; cursor: not-allowed |
-| read-only | no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; the stepper is hidden | `readonly`; dotted edge; no buttons |
+| read-only | no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; stepper hidden | `readonly`; dotted edge; no buttons |
 
 Precedence: disabled > invalid > hover; focus-visible is always drawn.
 
 #### Keyboard
 
-Native arrow stepping inside the input; the stepper buttons are ordinary
-buttons after it in the tab order and call `stepUp()` / `stepDown()`.
-Typing a value outside the range is allowed and reported as invalid on
-blur or submit, never clamped silently.
+A value outside the range may be typed; it is reported invalid on blur or
+submit, never clamped silently.
 
 #### Accessibility
 
-A programmatic label is required. The unit is `aria-hidden` and repeated in
-the label or help ("Inner gap (px)"), so it is never lost. Stepper buttons
-are named "Increase <label>" and "Decrease <label>". Help states min, max
-and step before the user types. `aria-invalid` only after interaction or
-submit. Contrast: digits 8.65:1, unit 5.81:1, glyphs 8.65:1, control border
-4.45:1, invalid border 4.69:1.
+A programmatic label is required. The `aria-hidden` unit is repeated in the
+label or help ("Inner gap (px)"). Help states min, max and step before the
+user types. `aria-invalid` only after interaction or submit. Text meets
+4.5:1; borders 3:1.
 
 #### Portability
 
-The text field's box plus two buttons; the host spinner is hidden with the
-engine's pseudo-elements and `appearance: textfield`. Hosts whose spin
-buttons cannot be replaced style them square in the same colours and record
-it.
+The `text-field` box plus two buttons; the host spinner is hidden with the
+engine's pseudo-elements and `appearance: textfield`. A host whose spin
+buttons cannot be replaced styles them square in the same colours and
+records it.
 
 #### Non-examples
 
 The host's default spinner. Round or overlapping stepper buttons. A value
-clamped silently on blur. Left-aligned digits. A unit typed into the value.
-A number field for phone numbers, postcodes or identifiers. Invalid shown by
-colour alone. Disabling by opacity.
+clamped silently. Left-aligned digits. A unit typed into the value. A number
+field for phone numbers, postcodes or identifiers. Invalid by colour alone.
+Disabling by opacity.
 
 ### Search field (`search-field`)
 
@@ -3526,63 +3470,52 @@ The text-field box around a native search input with a magnifier, a clear button
 
 #### Purpose
 
-Filtering a list or table or searching a site. It is the text field's box
-with the parts a search needs: an icon that says what the box is for, a
-clear button, a place for the shortcut that reaches it, a loading glyph
-while results arrive and a status line when nothing matches. A search that
-offers suggestions as you type is the combobox component.
+Filtering a list or table, or searching a site. A search that suggests as you
+type is the combobox.
 
 #### Anatomy
 
-Label above (or visually hidden); the box with the magnifier, the input,
-the clear button and the optional hint; help; the status line. The loading
-glyph takes the magnifier's slot so the box never changes size.
+Parts as listed in the anatomy. The loading glyph takes the magnifier's slot,
+so the box never changes size.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.input}; magnifier {color.icon.default}; text {color.text.default} | the magnifier |
-| hover | background → {color.interaction.hover.bg}; the clear button → {color.action.tertiary.hover-bg} when hovered | cursor: text |
-| focus-visible | border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px; the hint hides | the ring |
-| placeholder-shown | placeholder in {color.text.placeholder}, italic; no clear button | italic; the clear button is absent |
-| filled | as default with a value; the clear button is present | the clear button |
-| loading | the static `⋯` glyph in {color.text.muted} replaces the magnifier; the input stays editable | glyph; `aria-busy` |
-| disabled | text and icon {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no clear button | `disabled`; cursor: not-allowed |
-| no-results | the status line "No results for …" in {color.text.muted} below the help; the box unchanged | the status text; `role="status"` |
+| hover | background → {color.interaction.hover.bg}; a hovered clear button → {color.action.tertiary.hover-bg} | cursor: text |
+| focus-visible | border → {color.border.active}; 1px dashed {color.interaction.focus.ring} ring at −2px; the hint hides | the ring |
+| placeholder-shown | placeholder in {color.text.placeholder}, italic; no clear button | italic; clear button absent |
+| filled | as default with a value; clear button present | the clear button |
+| loading | static `⋯` in {color.text.muted} replaces the magnifier; input stays editable | glyph; `aria-busy` |
+| disabled | text and icon {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; no clear button | `disabled`; cursor: not-allowed |
+| no-results | status line "No results for …" in {color.text.muted} below the help; box unchanged | the status text; `role="status"` |
 
-Precedence: disabled > loading > hover; focus-visible is always drawn.
-A search field is never invalid; an empty result is a status, not an error.
+Precedence: disabled > loading > hover; focus-visible is always drawn. A
+search field is never invalid; an empty result is a status, not an error.
 
 #### Keyboard
 
-Escape clears a non-empty value and keeps focus, which is native for
-`type="search"` in most engines and scripted where it is not. The clear
-button is a separate tab stop only while it is visible. The shortcut in the
-hint is bound by the host and never captured while another field has focus.
+Escape-to-clear is native for `type="search"` in most engines and scripted
+where it is not. The host never captures the shortcut while another field has
+focus.
 
 #### Accessibility
 
-A programmatic label is required even when hidden. The landmark
-`role="search"` lets users jump to it. The status line is `role="status"`
-so "No results" is announced once, after the query settles, and the result
-count is announced there too ("12 results"). The magnifier and hint are
-`aria-hidden`; the clear button is named "Clear <label>". Contrast: text
-8.65:1, placeholder 5.81:1, magnifier 8.65:1, glyph 5.81:1, hint 5.81:1,
-control border 4.45:1.
+A programmatic label is required even when hidden. The status line announces
+"No results" once, after the query settles, and the result count there too
+("12 results"). The clear button is named "Clear <label>". Text meets 4.5:1;
+the magnifier, borders and rings 3:1.
 
 #### Portability
 
-The text field plus icons and a status line. Hosts hide their own cancel
-button; hosts that cannot draw the hint omit it and keep the shortcut in the
-tooltip.
+Hosts that cannot draw the hint omit it and keep the shortcut in the tooltip.
 
 #### Non-examples
 
-Rounded or pill-shaped search boxes. A magnifier button that submits
-instead of an icon. A spinner while loading. Results announced on every
-keystroke. "No results" in red or with the ✕ glyph. A clear button that is
-always visible. A search field without a label. Disabling by opacity.
+Rounded or pill-shaped boxes. A magnifier button that submits. A spinner while
+loading. Results announced on every keystroke. "No results" in red or with
+the ✕ glyph. An always-visible clear button. No label. Disabling by opacity.
 
 ### Range (`range`)
 
@@ -3604,6 +3537,7 @@ A bounded native numeric slider with visible output. Family: forms-basic. Priori
 | dependency.role-color-text-disabled | `color.text.disabled` | `#8a5559` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
 | dependency.role-space-2 | `space.2` | `2px` | use |
@@ -3611,38 +3545,39 @@ A bounded native numeric slider with visible output. Family: forms-basic. Priori
 
 #### Purpose
 
-Set a numeric value with a native range input and a visible output. The input retains min, max, step, disabled, name/value submission and form reset. Platform track geometry is a native rendering boundary; the semantic accent and focus roles remain explicit.
+A bounded numeric value on a native slider with a visible output.
 
 #### Anatomy
 
-- **label:** Visible label linked to the input.
-- **input:** Native range control with caller-specified bounds.
-- **output:** Current numeric value linked using for.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Named content on the default surface. | Native text and structure. |
-| focus-visible | Dashed focus ring. | Native keyboard focus position. |
-| disabled | Disabled semantic foreground, background and border at full opacity. | Native disabled state blocks activation. |
+| default | named content on the default surface | native text and structure |
+| focus-visible | dashed focus ring | native focus position |
+| disabled | disabled foreground, background and border at full opacity | native disabled state blocks activation |
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Reach and leave the slider.
-- **Arrow keys / Home / End:** Use native stepping, minimum and maximum behavior.
+Native, as in the key table.
 
 #### Accessibility
 
-Retain the input's accessible name and native value semantics. The visible output does not replace its label. Put units in the label or help text. No value changes solely from receiving focus.
+The input keeps its accessible name and native value semantics; the output
+never replaces the label. Units go in the label or help text. Focus alone
+never changes the value.
 
 #### Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 #### Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls. Colour-only status. Drag-only operations. Hidden
+required instructions. Stolen focus. An invented service success.
 
 ## Advanced forms
 
@@ -3677,7 +3612,7 @@ A text input that filters a listbox of suggestions; the APG combobox with list a
 | option.text-hover | `color.text.link-hover` | `#f4eeee` | use |
 | option.bg-selected | `color.interaction.selection.bg` | `#531310` | use |
 | option.text-selected | `color.interaction.selection.text` | `#f4eeee` | use |
-| option.ring-selected | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| option.ring-selected | `color.interaction.focus.ring` | `#e53935` | use |
 | group.text | `color.text.subtle` | `#ad7175` | use |
 | group.border | `color.border.divider` | `#2b0e0d` | use-and-report (D-008) |
 | empty.text | `color.text.muted` | `#bd787d` | use |
@@ -3686,34 +3621,30 @@ A text input that filters a listbox of suggestions; the APG combobox with list a
 
 #### Purpose
 
-A text input whose value is completed from a list of suggestions. It is the
-right control when the set is large or open-ended (fonts, hosts, tags); a
-closed set of a dozen values is the select component. The demonstration
-renders the list open so every option state is visible without a script.
+A text input completed from a list of suggestions, for large or open-ended
+sets (fonts, hosts, tags); a closed set of a dozen values is `select`. The
+demonstration renders the list open so every option state shows without a
+script.
 
 #### Anatomy
 
-Label above the box; the box with the input and an optional toggle; the
-listbox directly below, on {color.surface.raised} behind a 1px
-{color.border.overlay}; options in {color.text.default}, an optional group
-heading in {color.text.subtle} above a {color.border.divider} rule; the empty
-message in {color.text.muted}; help and validation message below, as in the
-text field.
+Parts as listed in the anatomy; help and validation message behave as in
+`text-field`.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | 1px {color.border.control} on {color.surface.input}; list on {color.surface.raised} with a 1px {color.border.overlay} | — |
-| hover | box background → {color.interaction.hover.bg}; the hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover} | cursor: text on the box, default on the list |
-| focus-visible | box border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
-| open | list visible below the box; toggle glyph rotated 180° | `aria-expanded="true"`; the toggle glyph |
-| closed | list absent; the box unchanged | `aria-expanded="false"`; nothing below the box |
-| selected | the active option filled {color.interaction.selection.bg} with {color.interaction.selection.text} and a 1px dashed ring in {color.interaction.focus.ring-container} | `aria-selected="true"`; `aria-activedescendant`; the ring |
-| invalid | box border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
-| invalid+focus-visible | the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
-| disabled | text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; list never opens | `disabled`; cursor: not-allowed |
-| no-results | the list holds only the empty row in {color.text.muted}, italic | `aria-disabled` row; italic; a polite announcement of zero matches |
+| default | 1px {color.border.control} on {color.surface.input}; list on {color.surface.raised}, 1px {color.border.overlay} | — |
+| hover | box → {color.interaction.hover.bg}; hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover} | cursor: text on the box, default on the list |
+| focus-visible | box border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| open | list below the box; toggle glyph rotated 180° | `aria-expanded="true"`; toggle glyph |
+| closed | no list; box unchanged | `aria-expanded="false"`; nothing below the box |
+| selected | active option filled {color.interaction.selection.bg} with {color.interaction.selection.text}, 1px dashed {color.interaction.focus.ring} ring at −2px | `aria-selected="true"`; `aria-activedescendant`; the ring |
+| invalid | 2px {color.status.danger.border}; message with ✕ | border 1 → 2px; glyph; `aria-invalid` |
+| invalid+focus-visible | 2px danger border and {color.interaction.focus.ring-container} ring at −4px | double boundary |
+| disabled | {color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}; list never opens | `disabled`; cursor: not-allowed |
+| no-results | only the empty row, {color.text.muted} italic | `aria-disabled` row; italic; polite zero-match announcement |
 
 Precedence when several apply: disabled > invalid > selected > hover;
 focus-visible is always drawn on the box, and the selection ring on the
@@ -3721,43 +3652,31 @@ option.
 
 #### Keyboard
 
-DOM focus never leaves the input. Down and Up open the list and move the
-active option, which the input reports through `aria-activedescendant`; Enter
-accepts it; Escape closes the list and, when the list is already closed,
-clears the value. Alt+Down and Alt+Up open and close without changing the
-active option. Home and End move the caret. Tab closes the list and keeps
-whatever is typed. Typing filters the list on every keystroke; the number of
-matches is announced through a polite live region, not by re-reading the list.
+As in the key table. Typing filters on every keystroke; the match count is
+announced through a polite live region, not by re-reading the list.
 
 #### Accessibility
 
-The input carries `role="combobox"`, `aria-autocomplete="list"`,
-`aria-expanded`, `aria-controls` pointing at the listbox and, while an option
-is active, `aria-activedescendant`. The listbox has an accessible name
-(`aria-label` or `aria-labelledby` the field label); options are `role="option"`
-with `aria-selected` on the active one only; groups are `role="group"` with
-`aria-labelledby` their heading. The empty row is a disabled option so the
-list is never empty; the zero-match count is announced through the same polite
-live region as every other count. Contrast: option text 8.43:1 on the
-raised surface, selection text 12.47:1 on the selection fill, the selection ring
-7.48:1 on the fill, the list border 4.57:1 on the raised surface, group
-headings 4.96:1.
+The listbox is named (`aria-label`, or `aria-labelledby` the field label);
+options are `role="option"`, `aria-selected` on the active one only; groups
+are `role="group"` labelled by their heading. The empty row is a disabled
+option so the list is never empty. Text meets 4.5:1; list border and
+selection ring 3:1.
 
 #### Portability
 
-Everything is expressible with background, border and outline; the toggle
-rotation is a transform inside the motion budget. Toolkits with a native
-completion popup use it and map the option fill to the selection roles; the
-list border is the popover frame. Toolkits without `aria-activedescendant`
-move real focus to the option and record the deviation.
+Background, border and outline express everything; the toggle rotation is a
+transform inside the motion budget. A toolkit with a native completion popup
+uses it, mapping the option fill to the selection roles and the list border
+to the popover frame. Without `aria-activedescendant`, real focus moves to the
+option and the deviation is recorded.
 
 #### Non-examples
 
-A select restyled as a combobox. Moving DOM focus into the list on Down. A
-list that floats over the page with a shadow or a rounded frame. Highlighting
-the active option with a colour change of the text alone. A no-results state
-that silently shows the full list. Opening on hover. A list that slides or
-fades in for longer than 150 ms.
+A select restyled as a combobox. DOM focus moving into the list on Down. A
+list floating with a shadow or rounded frame. The active option marked by text
+colour alone. A no-results state that silently shows the full list. Opening
+on hover. A list that slides or fades in for longer than 150 ms.
 
 ### Date picker (`date-picker`)
 
@@ -3792,47 +3711,59 @@ A themed date editor and calendar, alone or as a from/to pair, backed by native
 
 #### Purpose
 
-Choose a date by explicit text entry or a themed calendar. A range is two separately labeled date controls. D-025 requires theme-owned web controls rather than browser popup styling.
+Choose a date by typing or from a themed calendar; a range is two
+separately labelled date controls. D-025: theme-owned web controls, not
+browser popup styling.
 
 #### Anatomy
 
-A label, editor, calendar trigger, format hint and validation message. The native date input remains the successful form control and owns its value, defaults and constraints. It is hidden only after enhancement.
+A label, editor, calendar trigger, format hint and validation message. The
+native date input stays the successful form control, owns value, defaults
+and constraints, and is hidden only after enhancement.
 
 #### States
 
-| State | Treatment |
-| --- | --- |
-| default | Input surface, default text and control border. |
-| hover | The declared hover fill. |
-| focus-visible | Active border and the canonical focus ring. |
-| invalid | Danger border and a linked message. |
-| invalid+focus-visible | Danger border plus the container focus ring. |
-| disabled | Disabled colors; editor and calendar actions unavailable. |
-| read-only | Readable canvas text and bottom edge; calendar action unavailable. |
-
-Use the declared state tokens: default input surface and control border; hover fill; the canonical focus ring; danger border and message for invalid input; disabled colors and unavailable actions. Read-only values remain readable and cannot open a picker or change through step buttons. The date read-only treatment retains the canvas surface and unobtrusive bottom edge.
+| State | Visual | Non-colour channel |
+| --- | --- | --- |
+| default | {color.text.default} on {color.surface.input}, 1px {color.border.control} | — |
+| hover | background → {color.interaction.hover.bg} | hover-capable pointers only |
+| focus-visible | border → {color.border.active}; the canonical focus ring | the ring |
+| invalid | 2px {color.status.danger.border}; a linked message | border 1 → 2px; ✕ glyph; `aria-invalid` |
+| invalid+focus-visible | the danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
+| disabled | {color.text.disabled} on {color.interaction.disabled.bg}, border {color.border.disabled}; editor and calendar actions unavailable | `disabled`; cursor: not-allowed |
+| read-only | readable text on {color.surface.canvas}, no box, 1px dotted {color.border.divider} bottom edge; the calendar cannot open | `readonly`; dotted edge |
 
 #### Keyboard
 
-Alt+Down opens the calendar. Arrows move by a day or week, Home/End reach week boundaries, and PageUp/PageDown change months. Enter/Space chooses a focused date. Escape closes and restores editor focus. Tab leaves normally; the calendar is a nonmodal popup.
+Arrows move by a day or a week. Tab leaves normally; the calendar is a
+nonmodal popup.
 
 #### Accessibility
 
-The visible editor receives the original label, descriptions, required state and error state. Format hints are always available. Native min, max, step and required constraints remain authoritative. Invalid entry focuses the visible editor and exposes a theme-owned message. Calendar selection is a fill; keyboard focus is a separate ring. Disabled dates cannot be selected. The range validates that its end is not before its start. Form reset restores the native defaults.
-
-Automated evidence records its actual browser, states and limitations; it is not a manual screen-reader acceptance.
+The visible editor receives the original label, descriptions, required and
+error state. Format hints are always available. Native min, max, step and
+required stay authoritative. Invalid entry focuses the visible editor and
+shows a theme-owned message. Calendar selection is a fill, focus a separate
+ring. Disabled dates cannot be chosen. A range rejects an end before its
+start. Form reset restores the native defaults. Automated evidence records
+its browser, states and limits and is not a manual screen-reader acceptance.
 
 #### Portability
 
-The package and complete copy distribution include the renderer. The public control enhancement applies the same behavior to existing native markup. The no-JavaScript fallback and non-web platform mappings remain native.
+The package and the complete copy distribution include the renderer; the
+public control enhancement applies it to existing native markup. Without
+JavaScript, and on non-web platforms, the control stays native.
 
 #### Non-examples
 
-An unthemed host popup presented as fully themed. A second named input that duplicates form values. Discarding native constraints, labels or reset behavior. Literal colors, rounded corners, or a selected fill with no distinguishable focus boundary.
+An unthemed host popup presented as themed. A second named input
+duplicating form values. Dropping native constraints, labels or reset.
+Literal colours, rounded corners, or a selected fill with no distinct focus
+boundary.
 
 ### Time picker (`time-picker`)
 
-A themed time editor with explicit step buttons, backed by native time values and constraints. Family: forms-advanced. Priority: R1. Maturity: stable. States: default, hover, focus-visible, invalid, disabled.
+A themed time editor with explicit step buttons, backed by native time values and constraints. Family: forms-advanced. Priority: R1. Maturity: stable. States: default, hover, focus-visible, invalid, invalid+focus-visible, disabled.
 
 | Part | Role | Value | Eligibility |
 | --- | --- | --- | --- |
@@ -3841,6 +3772,7 @@ A themed time editor with explicit step buttons, backed by native time values an
 | root.bg-hover | `color.interaction.hover.bg` | `#1c0a09` | use |
 | root.border-focus | `color.border.active` | `#e53935` | use |
 | root.ring | `color.interaction.focus.ring` | `#e53935` | use |
+| root.ring-invalid | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
 | root.border-invalid | `color.status.danger.border` | `#e53935` | use |
 | root.border-disabled | `color.border.disabled` | `#7d1310` | use |
 | root.bg-disabled | `color.interaction.disabled.bg` | `#160b0b` | use |
@@ -3853,41 +3785,54 @@ A themed time editor with explicit step buttons, backed by native time values an
 
 #### Purpose
 
-Enter a time explicitly or adjust it using themed step buttons. D-025 requires theme-owned web controls rather than browser popup styling.
+Enter a time by typing or with themed step buttons. D-025: theme-owned web
+controls, not browser popup styling.
 
 #### Anatomy
 
-A label, editor, increase/decrease buttons, format hint and validation message. The native time input remains the successful form control and owns its value, defaults and constraints. It is hidden only after enhancement.
+A label, editor, increase and decrease buttons, format hint and validation
+message. The native time input stays the successful form control, owns
+value, defaults and constraints, and is hidden only after enhancement.
 
 #### States
 
-| State | Treatment |
-| --- | --- |
-| default | Input surface, default text and control border. |
-| hover | The declared hover fill. |
-| focus-visible | Active border and the canonical focus ring. |
-| invalid | Danger border and a linked message. |
-| disabled | Disabled colors; editor and step actions unavailable. |
+| State | Visual | Non-colour channel |
+| --- | --- | --- |
+| default | {color.text.default} on {color.surface.input}, 1px {color.border.control} | — |
+| hover | background → {color.interaction.hover.bg} | hover-capable pointers only |
+| focus-visible | border → {color.border.active}; the canonical focus ring | the ring |
+| invalid | 2px {color.status.danger.border}; a linked message | border 1 → 2px; ✕ glyph; `aria-invalid` |
+| invalid+focus-visible | the danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
+| disabled | {color.text.disabled} on {color.interaction.disabled.bg}, border {color.border.disabled}; editor and step actions unavailable | `disabled`; cursor: not-allowed |
 
-Use the declared state tokens: default input surface and control border; hover fill; the canonical focus ring; danger border and message for invalid input; disabled colors and unavailable actions. Read-only values remain readable and cannot open a picker or change through step buttons. The date read-only treatment retains the canvas surface and unobtrusive bottom edge.
+A read-only value stays readable and cannot change through the step
+buttons.
 
 #### Keyboard
 
-Type HH:MM or HH:MM:SS in the editor. Tab reaches the named step buttons; Enter/Space activates them. Each step uses the native input step attribute. With step="any", use direct entry and the step buttons remain unavailable.
+As in the key table; the step buttons are named.
 
 #### Accessibility
 
-The visible editor receives the original label, descriptions, required state and error state. Format hints are always available. Native min, max, step and required constraints remain authoritative. Invalid entry focuses the visible editor and exposes a theme-owned message. No host clock popup or browser segment selection is used in the enhanced control. Form reset restores the native defaults.
-
-Automated evidence records its actual browser, states and limitations; it is not a manual screen-reader acceptance.
+The visible editor receives the original label, descriptions, required and
+error state. Format hints are always available. Native min, max, step and
+required stay authoritative. Invalid entry focuses the visible editor and
+shows a theme-owned message. The enhanced control uses no host clock popup
+or browser segment selection. Form reset restores the native defaults.
+Automated evidence records its browser, states and limits and is not a
+manual screen-reader acceptance.
 
 #### Portability
 
-The package and complete copy distribution include the renderer. The public control enhancement applies the same behavior to existing native markup. The no-JavaScript fallback and non-web platform mappings remain native.
+The package and the complete copy distribution include the renderer; the
+public control enhancement applies it to existing native markup. Without
+JavaScript, and on non-web platforms, the control stays native.
 
 #### Non-examples
 
-An unthemed host popup presented as fully themed. A second named input that duplicates form values. Discarding native constraints, labels or reset behavior. Literal colors, rounded corners, or a selected fill with no distinguishable focus boundary.
+An unthemed host popup presented as themed. A second named input
+duplicating form values. Dropping native constraints, labels or reset.
+Literal colours or rounded corners.
 
 ### File input (`file-input`)
 
@@ -3924,69 +3869,55 @@ A native file input behind a label styled as a secondary button, optionally insi
 #### Purpose
 
 Choosing one or more files from the host. The native input keeps the host
-chooser, its keyboard behaviour and its security model; the theme replaces
-only the input's own rendering with a button-styled label, adds an optional
-drop zone, and lists what was chosen with any per-file error.
+chooser, its keyboard and its security model; the theme replaces only its
+rendering.
 
 #### Anatomy
 
-The field label; the root row (or the drop zone) holding the button-styled
-label and the status text; the hidden-but-focusable native input; an optional
-list of chosen files, each with name, size in {color.text.subtle} and a
-remove button, one of which may carry the ✕ glyph and an error in
-{color.status.danger.text}; a static striped progress bar while uploading;
-help and validation message below.
+Parts as listed in the anatomy; help and message sit below the root.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | button: 1px {color.action.secondary.border} outline, text {color.action.secondary.text}; zone: 1px dashed {color.interaction.drop-target} | — |
-| hover | button background → {color.action.secondary.hover-bg}; border unchanged | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the button (the input has focus) | the ring |
-| drop-target | root fill {color.interaction.marquee}; border 1px dashed {color.interaction.drop-target} | dashed pattern; the hint text changes to "Release to add" |
-| invalid | button border 2px {color.status.danger.border}; message with the ✕ glyph; a failed row shows its own ✕ | border width 1 → 2px; glyphs; `aria-invalid` |
-| disabled | button text {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; the zone's dashes take {color.border.disabled}; no hover | `disabled`; cursor: not-allowed |
-| loading | a static bar of 45° stripes, {color.action.primary.bg} on {color.interaction.pressed.bg}, below the row; the button stays enabled | `aria-busy`; the status text reads "Uploading n files"; no animation |
-
-Precedence when several apply: disabled > loading > invalid > drop-target >
-hover; focus-visible is always drawn.
+| hover | button → {color.action.secondary.hover-bg}; border unchanged | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the button (the input has focus) | the ring |
+| drop-target | root fill {color.interaction.marquee}; 1px dashed {color.interaction.drop-target} border | dashed pattern; hint reads "Release to add" |
+| invalid | button border 2px {color.status.danger.border}; message with ✕; a failed row shows its own ✕ | border 1 → 2px; glyphs; `aria-invalid` |
+| disabled | button text {color.text.disabled}, border {color.border.disabled}, fill {color.interaction.disabled.bg}; zone dashes {color.border.disabled}; no hover | `disabled`; cursor: not-allowed |
+| loading | static 45° stripes, {color.action.primary.bg} on {color.interaction.pressed.bg}, below the row; the button stays enabled | `aria-busy`; status reads "Uploading n files"; no animation |
+
+Precedence: disabled > loading > invalid > drop-target > hover;
+focus-visible is always drawn.
 
 #### Keyboard
 
-Tab reaches the native input, which is drawn as the button; Enter or Space
-opens the host chooser; Escape in the chooser returns to the input. Each
-remove button in the list is its own tab stop after the input, and Delete or
-Backspace on it acts like Enter. Dropping is a pointer gesture only and never
-the sole way to add a file.
+As in the key table; closing the chooser returns focus to the input.
+Dropping is pointer-only and never the sole way to add a file.
 
 #### Accessibility
 
-The native input is hidden with the `sr-only` pattern, never `display: none`
-or `visibility: hidden`, so it keeps focus and the host chooser. It is named
-by both labels ("Attachments" and "Choose files"), and `aria-describedby`
-lists help and message. The status text and the list are announced through a
-polite live region after a choice; per-file errors are in the row text, not
-only in colour. The drop zone has no role and no `tabindex`; `aria-busy` on
-the root marks uploading. Contrast: button text 10.37:1 on the canvas and
-6.84:1 on the hover fill, button border 4.45:1, drop-target border 4.69:1 on
-the canvas and 4.52:1 on the marquee fill, status and help 5.81:1, sizes
-5.10:1, danger text 5.40:1.
+Hide the input with `sr-only`, never `display: none` or `visibility: hidden`,
+so it keeps focus and the chooser. Both labels name it ("Attachments",
+"Choose files"); `aria-describedby` lists help and message. The status and
+list are announced through a polite live region after a choice; per-file
+errors are in the row text. The drop zone has no role and no `tabindex`.
+Text meets 4.5:1; borders 3:1.
 
 #### Portability
 
-The button is the secondary button of the actions family; the zone is a
-dashed border and a translucent fill; the stripes are a repeating gradient
-(or a hatched brush). Toolkits without drag-and-drop omit the zone and keep
-the button; toolkits without a translucent fill composite the marquee over the
-canvas and record the value.
+The button is the secondary button of the actions family; the stripes are a
+repeating gradient or a hatched brush. Toolkits without drag-and-drop omit
+the zone and keep the button; without a translucent fill, composite the
+marquee over the canvas and record the value.
 
 #### Non-examples
 
-A hidden input with `display: none` and a button that clicks it by script. A
-drop zone that is the only way to add files. A rounded, dotted, animated
-"pulsing" zone. A spinner while uploading. A progress bar that animates its
-stripes. Errors shown by a red file name alone. Disabling by opacity.
+`display: none` on the input and a button that clicks it by script. A drop
+zone as the only way to add files. A rounded, dotted or pulsing zone. A
+spinner, or animated stripes, while uploading. Errors shown by a red file
+name alone. Disabling by opacity.
 
 ### Wizard (`wizard`)
 
@@ -4022,70 +3953,56 @@ A multi-step form with a stepper header, the current panel and back/next actions
 
 #### Purpose
 
-A form too long for one screen, split into ordered steps that are validated
-one at a time. The stepper shows where the person is and which steps are
-complete; the panel holds the current step; Back and Next move through the
-sequence. Steps are not tabs: a future step is unreachable until the steps
-before it pass.
+A form too long for one screen, split into ordered steps validated one at a
+time. Steps are not tabs: a future step is unreachable until the steps before
+it pass.
 
 #### Anatomy
 
-The stepper, an ordered list of step buttons over a {color.border.divider}
-rule; each step's marker and name; the panel on {color.surface.default} with
-its "Step n of m" heading in {color.text.bright}; the actions row with Back
-(secondary) and Next (primary, {color.action.primary.bg} with
-{color.action.primary.text}).
+Parts as listed in the anatomy; the panel heading reads "Step n of m".
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | steps in {color.text.default}; complete steps carry the ✓ in {color.status.success.text} | the ✓ glyph; the numbers |
-| hover | step background → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px; on Next's fill the ring takes {color.interaction.focus.ring-container} | the ring |
+| default | steps in {color.text.default}; complete steps carry ✓ in {color.status.success.text} | the ✓ glyph; the numbers |
+| hover | step → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg} | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px; {color.interaction.focus.ring-container} on Next's fill | the ring |
 | current | 2px {color.border.selected-indicator} under the step; name in {color.text.bright} | `aria-current="step"`; the indicator bar; the heading reads "Step n of m" |
 | disabled | a future step in {color.text.disabled}; no hover | `disabled`; cursor: not-allowed; skipped by Tab |
-| invalid | the step's marker becomes ✕ in {color.status.danger.text}; its indicator takes {color.status.danger.border}; the panel shows the message | glyph; message text; `aria-invalid` on the failing fields |
-| busy | Next shows the static ⋯ glyph before its label and does not respond; size unchanged | `aria-busy` on the wizard; the glyph; cursor: progress |
+| invalid | marker becomes ✕ in {color.status.danger.text}; indicator {color.status.danger.border}; the panel shows the message | glyph; message text; `aria-invalid` on the failing fields |
+| busy | Next shows the static ⋯ before its label and ignores activation; size unchanged | `aria-busy` on the wizard; the glyph; cursor: progress |
 
-Precedence when several apply: disabled > busy > invalid > current > hover;
-focus-visible is always drawn.
+Precedence: disabled > busy > invalid > current > hover; focus-visible is
+always drawn.
 
 #### Keyboard
 
-Tab walks the enabled step buttons in order, then the panel's fields, then
-Back and Next. Enter or Space on a reachable step goes to it; on Next it
-validates the panel, and on failure moves focus to the first invalid field,
-on success advances and moves focus to the new panel heading. Back never
-validates. There is no arrow-key navigation between steps, because the
+As in the key table. A failed Next moves focus to the first invalid field; a
+successful one to the new panel heading. No arrow keys between steps: the
 stepper is a list of buttons, not a tablist.
 
 #### Accessibility
 
-The wizard is a region named by `aria-label`; the stepper is an `<ol>` so
-count and position are announced; the current step carries
-`aria-current="step"`; complete steps append visually hidden ", complete";
-unreachable steps are `disabled`, not `aria-disabled`, because they cannot be
-activated. The panel is a `<section>` named by its heading, which receives
-focus after each step change. Validation failures are announced through the
-form's live region and the ✕ marker; `aria-busy` marks the wizard while Next
-is in progress. Contrast: step text 8.65:1, current name 10.37:1, complete
-marker 7.13:1, indicator 4.69:1, Next text 9.28:1 on its fill, ring 5.57:1 on
-the primary fill, future step text 3.33:1 (exempt).
+The wizard is a region named by `aria-label`; the `<ol>` announces count and
+position. Complete steps append a visually hidden ", complete". Unreachable
+steps are `disabled`, not `aria-disabled`, because they cannot be activated.
+Validation failures are announced through the form's live region and the ✕
+marker. Text meets 4.5:1; the indicator and rings 3:1; future step text is
+exempt (house floor 3:1).
 
 #### Portability
 
-Everything is text, a 2px bottom border and the button tones; no icon font
-(the markers are text glyphs). Toolkits with a native assistant use its page
-list and map the indicator to the current page; toolkits with none draw the
-stepper as a row of buttons and record any deviation in the indicator width.
+Text, a 2px bottom border and the button tones; markers are text glyphs, no
+icon font. A toolkit without a native assistant draws the stepper as a row of
+buttons and records any deviation in the indicator width.
 
 #### Non-examples
 
-Tabs restyled as steps. A progress bar in place of the stepper. Circles with
-connecting lines that need a rounded radius. Future steps that look enabled
-and reject the click. A spinner on Next. Colour-only completion marks.
-Validation that blocks Back. Animated slides between panels.
+Tabs restyled as steps. A progress bar instead of the stepper. Circles with
+connecting lines that need a radius. Future steps that look enabled and
+reject the click. A spinner on Next. Colour-only completion marks. Validation
+that blocks Back. Animated slides between panels.
 
 ### Form builder (`form-builder`)
 
@@ -4100,57 +4017,56 @@ A bounded reference editor for five canonical field kinds, with keyboard orderin
 
 #### Purpose
 
-Build a bounded reference form from text, textarea, select, checkbox and radio
-fields in the [interactive builder](https://j3w1.github.io/theme/builder/). D-021 remains proposed. This
-draft component does not promote new tokens, roles, profiles or native ports.
+Build a bounded reference form in the
+[interactive builder](https://j3w1.github.io/theme/builder/). D-021 remains
+proposed; this draft promotes no tokens, roles, profiles or native ports.
 
 #### Anatomy
 
-Each field has a stable ID, label, help, required flag and, for select/radio,
-stable option IDs and labels. Add and remove fields, edit definitions and move
-them with explicit Move up / Move down buttons. Saving an edit validates the
-complete proposed definition before replacing the current one.
+Each field has a stable ID, label, help, required flag and, for select and
+radio, stable option IDs and labels. Saving an edit validates the whole
+proposed definition before replacing the current one.
 
-The preview uses the same canonical field renderer and validation model as
-the validation-recovery composition. Changing a definition clears preview
-values and errors. Merely moving focus or typing a preview value does not
-change the definition. Preview state is separate from schema state.
+The preview uses the canonical field renderer and validation model of the
+validation-recovery composition. Changing a definition clears preview values
+and errors; moving focus or typing a preview value never changes the
+definition.
 
 #### States
 
-The empty state displays an explanation and an add action. An invalid import or definition
-edit reports a corrective message and leaves the current definition intact.
-Unavailable movement buttons are disabled at the list boundaries. The default state
-shows the ordered definition and preview. The static specimen represents the
-definition; interactive execution evidence is recorded separately.
+The empty state shows an explanation and an add action. An invalid import or edit
+reports a corrective message and keeps the current definition. Move buttons
+are disabled at the list boundaries. Default shows the ordered definition and
+preview. The static specimen shows the definition; interactive execution
+evidence is recorded separately.
 
 #### Keyboard
 
-All operations use native controls. No drag operation is required. Move actions
-keep focus on the moved field's controls. Removing a field focuses the next
-remaining field or the add control. Import and reset return to the add control.
-Preview submit focuses its error summary; links target stable field control IDs.
+No drag is required. Moving keeps focus on the moved field's controls;
+removing focuses the next remaining field or the add control; import and
+reset return to the add control. Preview submit focuses its error summary,
+whose links target stable field control IDs.
 
 #### Accessibility
 
 Use the canonical label, help and error associations, required markers and
-radio fieldset/legend semantics. Stable IDs survive JSON round trips and field
-reordering. Imported strings are text, never markup. No manual screen-reader
-pass is claimed by test presence.
+radio fieldset/legend semantics. Stable IDs survive JSON round trips and
+reordering. Imported strings are text, never markup. Test presence claims no
+manual screen-reader pass.
 
 #### Portability
 
 Definition schema version 1 pins theme name, version, default profile and
-constituent component content digest. Accept at most 64 KiB, 20 fields, 20
-options per choice field, 120-character labels and 400-character help. Preview
-text is limited to 2000 characters. Unknown keys, duplicate IDs, unsupported
-kinds, invalid choices and mismatched theme identity are rejected atomically.
-An old content identity requires an explicit migration outside this tool.
+constituent component content digest. Limits: 64 KiB, 20 fields, 20 options
+per choice field, 120-character labels, 400-character help, 2000-character
+preview text. Unknown keys, duplicate IDs, unsupported kinds, invalid choices
+and mismatched theme identity are rejected atomically. An old content
+identity needs an explicit migration outside this tool.
 
-Everything stays in memory. Only explicit Download definition creates a file,
-containing the schema and no entered values. Reset clears the definition and
-preview. There is no autosave, network submission, schema execution, arbitrary
-HTML/CSS/JavaScript or imported validation expression.
+Everything stays in memory; only Download definition creates a file, with the
+schema and no entered values. Reset clears definition and preview. No
+autosave, network submission, schema execution, arbitrary HTML/CSS/JavaScript
+or imported validation expression.
 
 #### Non-examples
 
@@ -4170,6 +4086,13 @@ A searchable native checkbox group that preserves all selected form values. Fami
 | secondary.text | `color.text.muted` | `#bd787d` | use |
 | control.bg | `color.surface.input` | `#000000` | use |
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
+| button.bg | `color.action.secondary.bg` | `rgb(0 0 0 / 0%)` | use |
+| button.text | `color.action.secondary.text` | `#ffa2a7` | use |
+| button.border | `color.action.secondary.border` | `#a3676b` | use |
+| button.bg-hover | `color.action.secondary.hover-bg` | `#630f0d` | use |
+| button.bg-active | `color.action.secondary.pressed-bg` | `#420f0c` | use |
+| button.border-active | `color.border.active` | `#e53935` | use |
+| button.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-border-width-emphasis | `border.width.emphasis` | `2px` | use |
 | dependency.role-color-action-primary-bg | `color.action.primary.bg` | `#7d1310` | use |
@@ -4201,34 +4124,32 @@ A searchable native checkbox group that preserves all selected form values. Fami
 
 #### Purpose
 
-Select zero or more named values using a labelled native checkbox list. Local search filters visible choices without clearing selections. Successful checkboxes retain repeated native form keys. Clear selection is an explicit action.
+Select zero or more named values from a searchable native checkbox list.
 
 #### Anatomy
 
-- **group:** Fieldset and legend name the choice.
-- **filter:** Labelled search input filters option labels.
-- **options:** Native checkboxes remain selected when filtered out.
-- **status:** Visible count distinguishes matching options from selected values.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Named content on the default surface. | Native text and structure. |
+| default | Named content on the default surface. Button controls are the secondary button (button.md); inputs keep the input look. | Native text and structure. |
 | checked | Selected fill and a check indicator. | Native checked state. |
 | focus-visible | Dashed focus ring. | Native keyboard focus position. |
 | disabled | Disabled semantic foreground, background and border at full opacity. | Native disabled state blocks activation. |
-| no-results | Muted result count. | Zero-results text; existing selected values remain selected. |
+| no-results | Muted result count. | Zero-results text; selected values stay selected. |
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Visit search, clear and each visible enabled checkbox.
-- **Space:** Toggle the focused checkbox.
-- **Escape:** Clear a non-empty query without clearing selection.
+As in the key table.
 
 #### Accessibility
 
-Keep labels and native checkbox semantics. Hidden choices leave the focus order but retain checked form values. Announce matching and selected counts, including zero. Required selection policy belongs to the host; marking every checkbox required would require every option.
+Keep labels and native checkbox semantics. Filtered-out choices leave the
+focus order but keep their checked form values. Announce matching and
+selected counts, including zero. Required-selection policy belongs to the
+host; marking every checkbox required would require every option.
 
 #### Portability
 
@@ -4251,53 +4172,62 @@ Repeat native field rows with stable identities and keyboard ordering. Family: f
 | secondary.text | `color.text.muted` | `#bd787d` | use |
 | control.bg | `color.surface.input` | `#000000` | use |
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
+| button.bg | `color.action.secondary.bg` | `rgb(0 0 0 / 0%)` | use |
+| button.text | `color.action.secondary.text` | `#ffa2a7` | use |
+| button.border | `color.action.secondary.border` | `#a3676b` | use |
+| button.bg-hover | `color.action.secondary.hover-bg` | `#630f0d` | use |
+| button.bg-active | `color.action.secondary.pressed-bg` | `#420f0c` | use |
+| button.border-active | `color.border.active` | `#e53935` | use |
+| button.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-color-border-disabled | `color.border.disabled` | `#7d1310` | use |
 | dependency.role-color-interaction-disabled-bg | `color.interaction.disabled.bg` | `#160b0b` | use |
 | dependency.role-color-text-disabled | `color.text.disabled` | `#8a5559` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-24 | `space.24` | `24px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Repeat native fields from trusted inert HTML. Add, remove and reorder preserve row identities. The host supplies fields and handles submission; the component does not execute a schema or provide persistence. A max attribute bounds the number of rows; the supplied example is limited to ten.
+A variable number of the same native field row in one form; the host owns
+the fields, submission and persistence.
 
 #### Anatomy
 
-- **rows:** Ordered list of independently named field rows.
-- **template:** Trusted native markup cloned on explicit Add.
-- **actions:** Add, remove, move up and move down; no drag-only behavior.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Named content on the default surface. | Native text and structure. |
-| empty | A muted empty message. | Explicit text and retained Add action. |
-| focus-visible | Dashed focus ring. | Native keyboard focus position. |
-| disabled | Disabled semantic foreground, background and border at full opacity. | Native disabled state blocks activation. |
+| default | named content on the default surface. Button controls are the secondary button (button.md); inputs keep the input look. | native text and structure |
+| empty | a muted empty message | explicit text; Add stays |
+| focus-visible | dashed focus ring | native focus position |
+| disabled | disabled foreground, background and border at full opacity | native disabled state blocks activation |
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Visit fields and row actions in source order.
-- **Enter / Space:** Add, remove or move a row. Focus follows the affected row or nearest survivor.
+As in the key table; nothing else is bound.
 
 #### Accessibility
 
-Namespace IDs and label/ARIA references for each row. Row identities do not change during reordering. Actions have names and disabled boundary states. Removing a focused row restores focus to a surviving row or Add; announce each explicit operation.
+IDs and label and ARIA references are namespaced per row. Actions are named
+and keep their boundary when disabled. Removing a focused row moves focus to
+a surviving row or to Add; each explicit operation is announced.
 
 #### Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 #### Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls. Colour-only status. Drag-only operations. Hidden
+required instructions. Stolen focus. An invented service success.
 
 ## Navigation
 
@@ -4324,18 +4254,14 @@ A tablist of buttons that switches between panels in place; the selected tab car
 
 #### Purpose
 
-Switches between peer panels in place without leaving the page. Tabs are
-navigation within one view; for moving between views use sidebar-nav, for
-mutually exclusive options inside a form use radio-group or
+Navigation between peer panels within one view. Between views use
+sidebar-nav; for exclusive options in a form use radio-group or
 segmented-control.
 
 #### Anatomy
 
-A tablist strip on {color.surface.default} with a 1px {color.border.divider}
-rule beneath it; tab buttons in {color.text.default}; the selected tab in
-{color.text.bright} with a 2px {color.border.selected-indicator} bottom bar
-that sits on the rule; the panel below in {color.text.default}. Tabs carry no
-fill and no box; the bar is the only ornament.
+Parts as listed in the anatomy. The indicator sits on the rule; tabs carry no
+fill and no box, and the bar is the only ornament.
 
 #### States
 
@@ -4343,49 +4269,41 @@ fill and no box; the bar is the only ornament.
 | --- | --- | --- |
 | default | text {color.text.default}; transparent 2px bottom edge | — |
 | hover | background → {color.interaction.hover.bg}; text unchanged | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px | the ring |
 | selected | text {color.text.bright}; 2px {color.border.selected-indicator} bar | `aria-selected="true"`; the bar; tabindex 0 |
-| selected+focus-visible | the bar and the ring together | both visible |
+| selected+focus-visible | bar and ring together | both visible |
 | selected+container-inactive | bar → {color.border.selected-indicator-inactive}; text stays bright | lightness drop of the bar; the container's own inactive state |
 | disabled | text {color.text.disabled}; no hover; bar hidden unless selected | `disabled` or `aria-disabled`; cursor: not-allowed |
 
 Precedence: disabled > selected > hover; focus-visible is always drawn.
-Pressing a tab uses {color.interaction.pressed.bg} for the duration of the
-press only.
+{color.interaction.pressed.bg} shows only for the duration of a press.
 
 #### Keyboard
 
-One tab stop for the whole strip: the selected tab has `tabindex="0"`, every
-other tab `tabindex="-1"` (roving tabindex). Left and Right move focus and
-wrap; Home and End jump to the ends; Enter and Space activate when activation
-is manual. Automatic activation is the default in this theme because panels
-are cheap; use manual activation when a panel is expensive to render. The
-panel is a tab stop only when it has no focusable content.
+As in the key table. Automatic activation is the default because panels are
+cheap; use manual activation when a panel is expensive to render. The panel is
+a tab stop only when it has no focusable content.
 
 #### Accessibility
 
-The tablist carries `aria-label` or `aria-labelledby`; each tab has
-`aria-controls` pointing at its panel and each panel `aria-labelledby`
-pointing back. Vertical tablists set `aria-orientation="vertical"` and swap
-the arrow keys. Contrast: tab text 8.43:1, selected text 10.10:1, indicator
-4.57:1 (≥ 3:1) and ring 4.57:1 on the panel surface. Each tab is at least
-24×24 CSS pixels in `compact` density with 4px between neighbours. The
-indicator is never the only signal: `aria-selected` and the bright text
-travel with it.
+The tablist carries `aria-label` or `aria-labelledby`. A vertical tablist
+sets `aria-orientation="vertical"` and swaps the arrow keys. Text meets
+4.5:1; the indicator and ring 3:1. Each tab is at least 24×24 CSS pixels in
+`compact`, with 4px between neighbours. The indicator is never the only
+signal: `aria-selected` and the bright text travel with it.
 
 #### Portability
 
-A border-bottom that changes colour and an outline are all the drawing needed.
-Toolkits that cannot draw a partial bottom border draw a 2px rule across the
-full tab width. Hosts that have their own tab strip (browsers, editors) keep
+A toolkit that cannot draw a partial bottom border draws a 2px rule across
+the full tab width. Hosts with their own tab strip (browsers, editors) keep
 their keyboard model and take only the colours and the 2px bar.
 
 #### Non-examples
 
-Pill or filled tabs. A selected tab drawn with the selection fill. Rounded
-corners on the tab or the bar. A tab strip that wraps to two lines. A tab that
-changes only its text colour when selected. A glow instead of the dashed ring.
-Every tab in the tab order. Disabling by opacity.
+Pill or filled tabs. A selected tab in the selection fill. Rounded tabs or
+bar. A strip that wraps to two lines. A selected tab that changes only its
+text colour. A glow instead of the dashed ring. Every tab in the tab order.
+Disabling by opacity.
 
 ### Breadcrumbs (`breadcrumbs`)
 
@@ -4397,7 +4315,7 @@ The path from the root to the current page as an ordered list of links separated
 | link.text | `color.text.link` | `#f73f35` | use |
 | link.underline | `color.text.link-underline` | `#dc282e` | use |
 | link.text-hover | `color.text.link-hover` | `#f4eeee` | use |
-| link.bg-hover | `color.interaction.hover.bg-strong` | `#630f0d` | use |
+| link.bg-hover | `color.interaction.hover.bg` | `#1c0a09` | use |
 | link.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | current.text | `color.text.bright` | `#ffa2a7` | use |
 | separator.text | `color.text.muted` | `#bd787d` | use |
@@ -4406,60 +4324,51 @@ The path from the root to the current page as an ordered list of links separated
 
 #### Purpose
 
-Shows where the current page sits in a hierarchy and lets the user jump to
-any ancestor. Breadcrumbs are secondary navigation: they never replace the
-sidebar or the page title, and they are omitted on the root page.
+Where the current page sits in a hierarchy, with a jump to any ancestor.
+Secondary navigation: never a replacement for the sidebar or page title, and
+omitted on the root page.
 
 #### Anatomy
 
-A `nav` labelled "Breadcrumb" wrapping an `ol`. Each ancestor is a link in
-{color.text.link} with a 1px {color.text.link-underline}; a `/` separator in
-{color.text.muted} follows every item but the last; the last item is the
-current page in {color.text.bright} with `aria-current="page"`. When the
-trail is deeper than the space allows, the middle levels collapse behind an
-ellipsis button that names how many levels it hides.
+Parts as listed in the anatomy; the separator follows every item but the last.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | links {color.text.link}, 1px underline; separators {color.text.muted}; current {color.text.bright} | underline on links; none on the current page |
-| hover | link background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover} | underline thickens 1px → 2px; cursor |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px around the link | the ring |
-| current | text {color.text.bright}; no underline; no hover | `aria-current="page"`; no underline |
-| truncated | the middle levels are replaced by an `…` button in {color.text.default} | `aria-expanded="false"` on the button; its label counts the hidden levels |
+| hover | link → {color.interaction.hover.bg}, text {color.text.link-hover} | underline 1px → 2px; cursor |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px around the link | the ring |
+| current | {color.text.bright}; no underline; no hover | `aria-current="page"`; no underline |
+| truncated | middle levels replaced by an `…` button in {color.text.default} | `aria-expanded="false"`; its label counts the hidden levels |
 
 #### Keyboard
 
-Every ancestor link is a tab stop in trail order. The ellipsis button is a tab
-stop that discloses the hidden levels in place on Enter or Space and sets its
-own `aria-expanded`; focus stays on the button so the newly revealed links are
-the next Tab presses.
+As in the key table. The ellipsis button discloses the hidden levels in place
+on Enter or Space; focus stays on it, so the revealed links are the next Tab
+stops.
 
 #### Accessibility
 
-`aria-label="Breadcrumb"` on the `nav`, translated. The separator is
-`aria-hidden` so nothing voices "slash"; the list structure gives the count.
-`aria-current="page"` marks the last item whether or not it is a link. Hidden
-levels stay in the DOM under the ellipsis (`hidden` until disclosed) so a
-find-in-page still reaches them. Contrast: link text 10.10:1, current
-10.10:1, separator 5.66:1, underline 4.57:1 on the panel surface. Each link
-is at least 24 CSS pixels tall through its line box and padding.
+The `nav` label "Breadcrumb" is translated. The `aria-hidden` separator keeps
+"slash" unspoken; the list gives the count. `aria-current="page"` marks the
+last item, link or not. Hidden levels stay in the DOM (`hidden` until
+disclosed) so find-in-page reaches them. Text meets 4.5:1; underline and ring
+3:1. Each link is at least 24 CSS pixels tall through line box and padding.
 
 #### Portability
 
-Plain inline links and text; the only requirement is an inline-start margin
-on the separator that flips in RTL. Toolkits without an underline draw the
-link in the link colour and record the deviation. The ellipsis disclosure is
-optional; hosts without it show the full trail and let it wrap.
+Plain inline links and text; the separator needs only an inline-start margin
+that flips in RTL. Without an underline, a toolkit draws the link in the link
+colour and records the deviation. The ellipsis is optional; without it the
+full trail shows and wraps.
 
 #### Non-examples
 
-Chevrons, arrows or bullets as separators. A trail that ends with the site
-name instead of the current page. The current page drawn as a link with an
-underline. Automatic truncation by `text-overflow` that hides levels without
-a way to reach them. A trail that scrolls horizontally. Uppercase or
-letter-spaced items. Separators that are read aloud.
+Chevrons, arrows or bullets as separators. A trail ending with the site name
+instead of the current page. The current page as an underlined link.
+`text-overflow` truncation that hides unreachable levels. A horizontally
+scrolling trail. Uppercase or letter-spaced items. Separators read aloud.
 
 ### Pagination (`pagination`)
 
@@ -4475,69 +4384,57 @@ Page links for a long result set; the current page takes the selection fill and
 | link.text-disabled | `color.text.disabled` | `#8a5559` | use |
 | current.bg | `color.interaction.selection.bg` | `#531310` | use |
 | current.text | `color.text.on-selection` | `#f4eeee` | use |
-| current.ring | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| current.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | gap.text | `color.text.muted` | `#bd787d` | use |
 | status.text | `color.text.default` | `#e99499` | use |
 | status.emphasis | `color.text.bright` | `#ffa2a7` | use |
 
 #### Purpose
 
-Moves through a result set that is split into pages. Pagination is for sets
-whose size is known; use a "load more" button or infinite scroll for feeds,
-and a range field for jumping to an arbitrary offset.
+Moves through a paged result set of known size. Feeds use a "load more"
+button or infinite scroll; jumping to an arbitrary offset is a range field.
 
 #### Anatomy
 
-A `nav` labelled "Pagination" holding a `ul`: previous, the page links with
-an aria-hidden `…` gap where pages are skipped, next. Every page link is a
-square target in {color.text.default} with no border; the current page is
-filled with {color.interaction.selection.bg} and {color.text.on-selection}.
-The compact variant keeps previous and next and replaces the numbers with
-"3 of 12", the current number in {color.text.bright}.
+Parts as listed in the anatomy; page links have no border.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | text {color.text.default}; no fill; no border | — |
+| default | {color.text.default}; no fill, no border | — |
 | hover | background → {color.interaction.hover.bg} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px; on the current page the ring is {color.interaction.focus.ring-container} | the ring |
-| current | fill {color.interaction.selection.bg}; text {color.text.on-selection}; no hover | `aria-current="page"` |
-| disabled | text {color.text.disabled}; no fill; no hover | `aria-disabled="true"`; no `href`; cursor: not-allowed |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px, including the current page | the ring |
+| current | fill {color.interaction.selection.bg}, text {color.text.on-selection}; no hover | `aria-current="page"` |
+| disabled | {color.text.disabled}; no fill, no hover | `aria-disabled="true"`; no `href`; cursor: not-allowed |
 
-Pressing a link uses {color.interaction.pressed.bg} for the duration of the
-press only.
+A link shows {color.interaction.pressed.bg} only while pressed.
 
 #### Keyboard
 
-Plain links in document order: previous, the pages, next. A disabled end has
-no `href`, so it is not a tab stop and cannot be activated. The current page
-remains a link to itself so a keyboard user can reload it.
+As in the key table. The current page stays a link to itself so a keyboard
+user can reload it.
 
 #### Accessibility
 
-`aria-label="Pagination"` on the `nav`; a second pagination on the same page
-gets a distinct label. Previous and next carry a visible word, not just a
-glyph, and `aria-label` gives the target page number when it is known
-("Previous page, 2"). The gap is `aria-hidden`; the list count tells a screen
-reader how many links follow. Contrast: link text 8.43:1, current text 12.47:1
-on the selection fill, ring-container 7.48:1 on the fill, disabled 3.24:1
-(exempt). Targets are at least 24×24 CSS pixels in `compact` density.
+A second pagination on the same page gets a distinct label. Previous and next
+carry a visible word, not just a glyph; `aria-label` gives the target page
+when known ("Previous page, 2"). The list count tells a screen reader how many
+links follow. Text meets 4.5:1 and the ring 3:1; disabled ends are exempt
+(house floor 3:1). Targets are at least 24×24 CSS pixels in `compact`.
 
 #### Portability
 
-Links with a background and an outline; nothing else. Hosts that cannot
-remove `href` from a disabled link use a disabled button for the ends and
-record it. The compact variant is plain text and two links and ports
-anywhere.
+Links with a background and an outline; nothing else. A host that cannot
+remove `href` from a disabled link uses a disabled button for the ends and
+records it. The compact variant is plain text and two links.
 
 #### Non-examples
 
 Rounded or circular page buttons. A border around every page link. The
-current page marked by colour or bold alone without `aria-current`. Previous
-and next as glyph-only links without a label. A disabled end that still has
-an `href`. Pagination that hides the last page number. A row that scrolls
-horizontally.
+current page marked by colour or bold alone, without `aria-current`.
+Glyph-only previous and next. A disabled end with an `href`. Hiding the last
+page number. A horizontally scrolling row.
 
 ### Sidebar navigation (`sidebar-nav`)
 
@@ -4556,7 +4453,7 @@ A vertical list of section links with optional nested groups; the current sectio
 | current.text | `color.text.bright` | `#ffa2a7` | use |
 | selected.bg | `color.interaction.selection.bg` | `#531310` | use |
 | selected.text | `color.interaction.selection.text` | `#f4eeee` | use |
-| selected.ring | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| selected.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | selected.inactive-bg | `color.interaction.selection.inactive-bg` | `#420f0c` | use |
 | selected.inactive-text | `color.interaction.selection.inactive-text` | `#e99499` | use |
 | icon.stroke | `color.icon.default` | `#e99499` | use |
@@ -4564,72 +4461,58 @@ A vertical list of section links with optional nested groups; the current sectio
 
 #### Purpose
 
-Moves between the sections of an application. The sidebar is the primary
-navigation of a settings panel, an admin area or a documentation site; tabs
-switch views inside one section, and a tree browses data rather than
-sections.
+Moves between the sections of an application: the primary navigation of a
+settings panel, admin area or documentation site. Tabs switch views inside
+one section; a tree browses data, not sections.
 
 #### Anatomy
 
 A `nav` on {color.surface.default} with a 1px {color.border.divider}
-inline-end edge. Each link is one row: an icon slot, a label in
-{color.text.default}, and a transparent 2px inline-start edge. The current
-link colours that edge with {color.border.selected-indicator} and its text
-with {color.text.bright}. Groups are buttons with a chevron in
-{color.icon.decorative}; their children sit in a sublist indented by one icon
-width. Collapsed, the rail keeps the icons and hides the labels visually.
+inline-end edge; otherwise parts as listed in the anatomy.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | text {color.text.default}; no fill; transparent inline-start edge | — |
-| hover | background → {color.interaction.hover.bg} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| hover | → {color.interaction.hover.bg} | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px | the ring |
 | current | 2px {color.border.selected-indicator} inline-start bar; text {color.text.bright} | `aria-current="page"`; the bar |
-| selected | fill {color.interaction.selection.bg} with {color.interaction.selection.text}; the ring in {color.interaction.focus.ring-container} when focused | `aria-selected` on a listbox-style rail; the fill's on-fill text |
-| selected+container-inactive | fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring | lightness drop between the two fills |
-| expanded | the group's chevron rotated 90°; its sublist shown | `aria-expanded="true"`; the children are present |
-| collapsed | labels visually hidden; icons centred; the current bar and fills unchanged | the labels remain for assistive technology and as tooltips |
+| selected | {color.interaction.selection.bg} with {color.interaction.selection.text}; 1px dashed {color.interaction.focus.ring} at −2px when focused | `aria-selected` on a listbox-style rail; the on-fill text |
+| selected+container-inactive | {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring | lightness drop between the two fills |
+| expanded | chevron rotated 90°; sublist shown | `aria-expanded="true"`; the children are present |
+| collapsed | labels visually hidden; icons centred; current bar and fills unchanged | labels remain for assistive technology and as tooltips |
 
 `current` is where the user is; `selected` is what the user chose in a rail
-that drives a detail pane. A rail is one or the other, never both at once.
+that drives a detail pane. A rail is one or the other, never both.
 
 #### Keyboard
 
-Every link and every group button is a tab stop in document order; children
-of a closed group are hidden and skipped. Enter follows a link; Enter or Space
-toggles a group and leaves focus on the button. There is no arrow-key model:
-the rail is a list of links, not a tree, so the native tab order is the whole
-contract.
+As in the key table; toggling a group leaves focus on its button. No arrow
+keys: the rail is a list of links, not a tree.
 
 #### Accessibility
 
-`aria-label` on the `nav` distinguishes it from other landmarks. The current
-link carries `aria-current="page"`; a rail that drives a detail pane uses a
-listbox with `aria-selected` instead of links. Group buttons carry
-`aria-expanded` and `aria-controls`; the sublist is `hidden` until expanded
-so its links leave the tab order. Collapsed labels use a clip-rect hiding, not
-`display: none`, so names survive; icon-only links also get a `title`.
-Contrast: text 8.43:1, current text 10.10:1, indicator 4.57:1, selection text
-12.47:1 on the fill, inactive selection 7.02:1. Rows are at least 24 CSS pixels
-tall in `compact` density.
+`aria-label` on the `nav` distinguishes the landmark. A rail that drives a
+detail pane is a listbox with `aria-selected`, not links. A closed sublist is
+`hidden`, so its links leave the tab order. Collapsed labels are clipped, not
+`display: none`, so names survive; icon-only links also get a `title`. Text
+meets 4.5:1; the indicator 3:1. Rows are at least 24 CSS pixels tall in
+`compact`.
 
 #### Portability
 
-A border-inline-start, a background and an outline; the chevron is an SVG.
-Toolkits without logical borders draw the bar on the left in LTR and on the
-right in RTL explicitly. The collapsed rail is a width change and a hidden
-label; hosts that cannot hide labels while keeping their names show the full
-rail.
+The chevron is an SVG. Toolkits without logical borders draw the bar on the
+left in LTR and on the right in RTL explicitly. Hosts that cannot hide labels while keeping their
+names show the full rail.
 
 #### Non-examples
 
 A filled or rounded current item. The indicator on the inline-end edge. A
-current item marked by bold text alone. Labels removed from the DOM when
-collapsed. A group whose children stay in the tab order while hidden. A rail
-that scrolls horizontally. Icon-only links with no accessible name. Hover that
-changes the text colour.
+current item marked by bold alone. Labels removed from the DOM when
+collapsed. Hidden children left in the tab order. A rail that scrolls
+horizontally. Icon-only links without an accessible name. Hover that changes
+the text colour.
 
 ### Toolbar (`toolbar`)
 
@@ -4652,19 +4535,13 @@ A row of related controls under one tab stop with arrow-key movement; ghost butt
 
 #### Purpose
 
-Groups the frequent actions of a view into one row that costs one tab stop.
-A toolbar is for actions on the content beneath it; navigation between views
-belongs in tabs or the sidebar, and a set of mutually exclusive choices in a
-segmented control or radio group.
+Groups a view's frequent actions on the content beneath it into one row that
+costs one tab stop. Navigation between views belongs in tabs or the sidebar;
+mutually exclusive choices in a segmented control or radio group.
 
 #### Anatomy
 
-A `div` with `role="toolbar"` on {color.surface.chrome} with a 1px
-{color.border.divider} bottom edge. Inside, ghost buttons in
-{color.text.default} with a transparent 1px border, vertical separators in
-{color.border.default} between groups, and in the overflow variant a trailing
-"More" button that opens a menu with the controls that do not fit. Toggle
-buttons carry `aria-pressed`.
+Parts as listed in the anatomy.
 
 #### States
 
@@ -4672,47 +4549,37 @@ buttons carry `aria-pressed`.
 | --- | --- | --- |
 | default | text {color.text.default}; no fill; transparent border | — |
 | hover | background → {color.interaction.hover.bg} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px | the ring |
 | disabled | text {color.text.disabled}; no fill; no hover | `disabled`; cursor: not-allowed; skipped by the arrow keys |
 | toggled | fill {color.interaction.pressed.bg}; 1px {color.border.active} border; text {color.text.bright} | `aria-pressed="true"`; the border |
 
-Pressing a button uses {color.interaction.pressed.bg} for the duration of
-the press only; a toggled button keeps it.
+A press shows {color.interaction.pressed.bg} only while it lasts; a toggled
+button keeps it.
 
 #### Keyboard
 
-The toolbar is one tab stop: the last focused control (initially the first
-enabled one) has `tabindex="0"`, every other control `tabindex="-1"`. Left
-and Right move between controls and wrap; Home and End jump to the ends;
-Enter and Space activate. Disabled controls are skipped. Vertical toolbars
-declare `aria-orientation="vertical"` and use Up and Down. Without script
-every button is a tab stop, which is acceptable, not ideal.
+As in the key table. The roving stop is the last focused control, initially
+the first enabled one.
 
 #### Accessibility
 
-`aria-label` names the toolbar; a page with several toolbars gives each a
-distinct name. Toggle buttons expose `aria-pressed`; their label does not
-change with the state. Separators are `role="separator"` with
-`aria-orientation="vertical"` and are never focusable. Icon-only buttons
-carry `aria-label` and a tooltip. Contrast: text 8.60:1 on the chrome
-surface, toggled text 8.41:1 on the pressed fill, the toggled border 3.81:1,
-ring 4.66:1. Every control is at least 24×24 CSS pixels with 4px between
-neighbours in `compact` density.
+A page with several toolbars names each distinctly. A toggle button's label
+does not change with its state. Icon-only buttons carry `aria-label` and a
+tooltip. Text meets 4.5:1, the toggled border and the ring 3:1. Every control
+is at least 24×24 CSS pixels with 4px between neighbours in `compact`.
 
 #### Portability
 
-Ghost buttons with a background and a border; the separator is a 1px rule.
 Toolkits with a native toolbar keep their own keyboard model and take the
-colours. The overflow menu is a menu component; hosts without one wrap the
-row instead and record the deviation.
+colours. The overflow menu is the menu component; hosts without one wrap the
+row and record the deviation.
 
 #### Non-examples
 
-Buttons with a visible border at rest. A filled primary button inside the
-toolbar. Rounded buttons or a pill-shaped toolbar. Every button in the tab
-order when script is available. A toggled state shown by colour alone without
-`aria-pressed`. A toolbar that wraps to two lines. A separator that receives
-focus. Disabling by opacity.
+Buttons bordered at rest. A filled primary button in the toolbar. Rounded
+buttons or a pill-shaped toolbar. Every button in the tab order when script
+is available. A toggled state by colour alone without `aria-pressed`. A
+toolbar wrapping to two lines. A focusable separator. Disabling by opacity.
 
 ### Menu (`menu`)
 
@@ -4735,7 +4602,7 @@ A menu button that opens a list of actions on the raised surface inside a 1px ov
 | item.text-disabled | `color.text.disabled` | `#8a5559` | use |
 | active.bg | `color.interaction.selection.bg` | `#531310` | use |
 | active.text | `color.interaction.selection.text` | `#f4eeee` | use |
-| active.ring | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| active.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | check.glyph | `color.text.bright` | `#ffa2a7` | use |
 | shortcut.text | `color.text.muted` | `#bd787d` | use |
 | separator.color | `color.border.divider` | `#2b0e0d` | use-and-report (D-008) |
@@ -4743,71 +4610,54 @@ A menu button that opens a list of actions on the raised surface inside a 1px ov
 
 #### Purpose
 
-Offers a short list of actions behind one button. A menu is for commands;
-choosing a value belongs in select or combobox, and moving between views in
-tabs or the sidebar. Menus close as soon as an action runs.
+A short list of commands behind one button. Choosing a value is `select` or
+`combobox`; moving between views is tabs or the sidebar. Running an action
+closes the menu; a check item toggles and leaves it open.
 
 #### Anatomy
 
-A menu button, styled as a secondary button, that opens a list on
-{color.surface.raised} inside a 1px {color.border.overlay} frame. Items are
-buttons in {color.text.default} with a check gutter at the inline start, the
-label, and an optional shortcut hint in {color.text.muted}. Separators are
-1px {color.border.divider} rules. The active item, whether reached by pointer
-or by arrow key, is the selection fill {color.interaction.selection.bg} with
-{color.interaction.selection.text}. The reference renders the menu open in
-flow beneath the button; a host positions it at `z.popover`.
+Parts as listed in the anatomy. The active item, reached by pointer or arrow
+key, takes the selection fill.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | the button at rest; the list on {color.surface.raised} with the {color.border.overlay} frame | — |
-| hover | item background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the button; on the active item the ring is {color.interaction.focus.ring-container} | the ring |
-| open | button fill {color.interaction.pressed.bg} with 1px {color.border.active}; the list shown | `aria-expanded="true"`; the list is present |
-| closed | the button at rest; the list hidden | `aria-expanded="false"`; the list is absent from the tree |
-| disabled | item text {color.text.disabled}; no hover; still focusable by arrow keys when `aria-disabled` | `aria-disabled="true"`; cursor: not-allowed |
-| checked | the ✓ glyph in {color.text.bright} in the gutter | `aria-checked="true"`; the glyph |
-| selected | the active item: fill {color.interaction.selection.bg} with {color.interaction.selection.text} | focus is on the item; `aria-activedescendant` where used |
+| default | button at rest; list on {color.surface.raised} in the {color.border.overlay} frame | — |
+| hover | item → {color.interaction.hover.bg-strong}, text {color.text.link-hover} | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the button and the active item | the ring |
+| open | button {color.interaction.pressed.bg} with 1px {color.border.active}; list shown | `aria-expanded="true"`; list present |
+| closed | button at rest; list hidden | `aria-expanded="false"`; list absent from the tree |
+| disabled | item text {color.text.disabled}; no hover; still reachable by arrow keys when `aria-disabled` | `aria-disabled="true"`; cursor: not-allowed |
+| checked | ✓ in {color.text.bright} in the gutter | `aria-checked="true"`; the glyph |
+| selected | active item filled {color.interaction.selection.bg} with {color.interaction.selection.text} | focus on the item; `aria-activedescendant` where used |
 
 Precedence: disabled > selected > hover; focus-visible is always drawn.
 
 #### Keyboard
 
-The button opens on Enter, Space or Down (focus on the first item) and on Up
-(focus on the last). Inside, Up and Down move and wrap, Home and End jump,
-Right opens a submenu and Left closes it, typing a letter jumps to the next
-matching item. Enter or Space activates; a check item toggles without closing.
-Escape closes and returns focus to the button; Tab closes and continues the
-tab order. Focus never rests on a separator.
+As in the key table; focus never rests on a separator.
 
 #### Accessibility
 
-The button carries `aria-haspopup="menu"`, `aria-expanded` and
-`aria-controls`; the list `role="menu"` and `aria-labelledby` pointing at the
-button. Items are `role="menuitem"` or `role="menuitemcheckbox"` with
-`aria-checked`; disabled items use `aria-disabled` so they remain reachable
-and announced. Shortcut hints are text, not `aria-keyshortcuts` alone.
-Contrast: item text 8.43:1 and shortcut 5.66:1 on the raised surface, active
-text 12.47:1 on the fill, the frame 4.57:1, ring-container 7.48:1 on the fill.
-Items are the row height, at least 24 CSS pixels in `compact` density.
+The list is `aria-labelledby` the button. Disabled items use `aria-disabled`
+so they stay reachable and announced. Shortcut hints are text, not
+`aria-keyshortcuts` alone. Text meets 4.5:1; frame and ring 3:1. Items are at
+least 24 CSS pixels tall in `compact`.
 
 #### Portability
 
-A framed box with rows; the active row is a fill, the frame a border, the
-ring an outline. Toolkits with native menus keep their keyboard model and
-take the surface, frame and fill colours. Hosts that cannot draw the frame
-in the overlay colour draw it in the strong border colour and record the
-deviation.
+A framed box of rows: the active row a fill, the frame a border, the ring an
+outline. Native menus keep their keyboard model and take the surface, frame
+and fill colours. A host that cannot draw the frame in the overlay colour
+uses the strong border colour and records the deviation.
 
 #### Non-examples
 
-A shadow under the menu. Rounded corners on the menu or the items. An active
-item marked by text colour alone. A hover fill that differs from every other
-menu in the product. Icons in the check gutter of a plain menuitem. A menu
-that stays open after an action. Items that are links styled as menu items
-without `role="menuitem"`. Disabling by opacity.
+A shadow under the menu. Rounded menu or items. An active item marked by text
+colour alone. A hover fill unlike every other menu in the product. Icons in a
+plain menuitem's check gutter. A menu that stays open after an action. Links
+styled as menu items without `role="menuitem"`. Disabling by opacity.
 
 ### Skip link (`skip-link`)
 
@@ -4822,55 +4672,48 @@ The first tab stop of a page, hidden until it receives keyboard focus, that jump
 
 #### Purpose
 
-Lets a keyboard user bypass the header, navigation and toolbars in one
-press. It satisfies WCAG 2.4.1 for pages that have repeated blocks before
-the content; a page with nothing before `main` does not need one.
+Lets a keyboard user bypass the header, navigation and toolbars in one press,
+satisfying WCAG 2.4.1. A page with nothing before `main` does not need one.
 
 #### Anatomy
 
-One anchor, first in the body, with `href` pointing at the `main` landmark.
-It is a small raised card: {color.surface.raised}, 1px {color.border.overlay},
-text {color.text.bright}, at the top inline-start corner at `z.skip-link`.
-Off-screen at rest (a negative top), on-screen while focused.
+A small raised card: {color.surface.raised}, 1px {color.border.overlay}, text
+{color.text.bright}.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | off-screen; nothing is painted | the link is still in the tab order and the accessibility tree |
-| focus-visible | appears in the top corner; ring 1px dashed {color.interaction.focus.ring} at −2px | the link appears; the ring |
+| default | off-screen; nothing painted | still in the tab order and the accessibility tree |
+| focus-visible | appears in the top corner; 1px dashed {color.interaction.focus.ring} ring at −2px | the link appears; the ring |
 
-There is no hover state: a pointer cannot reach it while it is hidden, and
-once visible it behaves as a link.
+No hover state: a pointer cannot reach the hidden link, and once visible it
+behaves as a link.
 
 #### Keyboard
 
-Tab from the top of the document reaches it first. Enter moves focus to
-`main`, which carries `tabindex="-1"` so the browser's focus actually lands
-there and the next Tab continues inside the content. Tab away hides it again.
+As in the key table; after Enter the next Tab continues inside the content.
 
 #### Accessibility
 
-The link text names the destination ("Skip to content"), translated. Hiding
-uses position only, so the link remains in the accessibility tree; `display:
-none`, `visibility: hidden` and `aria-hidden` all defeat it. The reveal is an
-instant position change: nothing slides, so reduced motion needs no special
-case. Contrast: text 10.10:1 on the raised surface, frame 4.57:1,
-ring 4.57:1. The visible target is at least 24 CSS pixels tall.
+The link text names the destination ("Skip to content"), translated.
+`aria-hidden` defeats it as surely as `display: none` or `visibility: hidden`.
+The reveal is an instant position change, so reduced motion needs no special
+case. Text meets 4.5:1; frame and ring 3:1. The visible target is at least 24
+CSS pixels tall.
 
 #### Portability
 
-Web-only. Frameworks that render their own header keep this exact markup
-first in the body; a host stylesheet that removes outlines must restore the
-ring here. The reference site uses this component for its own skip link.
+Web-only. Frameworks that render their own header keep this exact markup first
+in the body; a host stylesheet that removes outlines must restore the ring
+here. The reference site uses this component for its own skip link.
 
 #### Non-examples
 
-A skip link that is always visible. One hidden with `display: none` or
-`visibility: hidden`. One that is not the first tab stop. One that points at
-an element without `tabindex="-1"`, so focus does not move. A skip link
-that slides in from the side and causes horizontal scroll while hidden. A
-rounded pill. One rendered without the frame on the canvas.
+Always visible. Hidden with `display: none` or `visibility: hidden`. Not the
+first tab stop. Pointing at an element without `tabindex="-1"`, so focus does
+not move. Sliding in from the side and causing horizontal scroll while hidden.
+A rounded pill. Rendered without the frame on the canvas.
 
 ### Command palette (`command-palette`)
 
@@ -4885,6 +4728,13 @@ A compact square modal command prompt with local results and category labels. Fa
 | secondary.text | `color.text.muted` | `#bd787d` | use |
 | control.bg | `color.surface.input` | `#000000` | use |
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
+| button.bg | `color.action.secondary.bg` | `rgb(0 0 0 / 0%)` | use |
+| button.text | `color.action.secondary.text` | `#ffa2a7` | use |
+| button.border | `color.action.secondary.border` | `#a3676b` | use |
+| button.bg-hover | `color.action.secondary.hover-bg` | `#630f0d` | use |
+| button.bg-active | `color.action.secondary.pressed-bg` | `#420f0c` | use |
+| button.border-active | `color.border.active` | `#e53935` | use |
+| button.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-border-width-emphasis | `border.width.emphasis` | `2px` | use |
 | dependency.role-color-border-overlay | `color.border.overlay` | `#e53935` | use-and-report (D-008) |
@@ -4895,48 +4745,45 @@ A compact square modal command prompt with local results and category labels. Fa
 | dependency.role-color-surface-overlay | `color.surface.overlay` | `#241010` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
 | dependency.role-space-16 | `space.16` | `16px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Find and invoke local commands from a compact square floating utility panel. One prompt filters dense rows with category labels. Results are caller-supplied links or bounded actions; no remote search occurs. The host may opt into Ctrl+K or Cmd+K.
+Finds and invokes local commands; navigation the site requires stays
+available outside the palette, without JavaScript.
 
 #### Anatomy
 
-- **trigger:** Named native button opens the utility panel.
-- **prompt:** Labelled combobox input retains focus while navigating results.
-- **results:** Listbox results include category and command text.
-- **dialog:** Native modal dialog provides containment and return.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | One prompt and dense command rows. | Visible names and categories. |
-| open | Square overlay surface and border. | Native modal dialog and active-descendant relationship. |
-| closed | Panel absent. | Opener remains focusable. |
-| focus-visible | Dashed input ring. | Input retains DOM focus while results change. |
-| no-results | Muted zero-results status. | Explicit result count and no active descendant. |
+| default | One prompt, dense command rows. Button controls are the secondary button (button.md); inputs keep the input look. | Visible names and categories. |
+| open | Square overlay surface and border. | Native modal dialog; active-descendant relationship. |
+| closed | Panel absent. | Opener stays focusable. |
+| focus-visible | Dashed input ring. | Input keeps DOM focus while results change. |
+| no-results | Muted zero-results status. | Explicit result count; no active descendant. |
 
 #### Keyboard
 
-- **Ctrl+K / Cmd+K:** Open when the host explicitly enables the shortcut.
-- **Up / Down:** Move the active result while retaining input focus.
-- **Enter:** Invoke the active enabled result and close.
-- **Escape:** Close and restore the opener.
-- **Tab / Shift+Tab:** Cycle through native modal controls.
+As in the key table. Shortcuts are never intercepted globally unless the host
+opts in, and one Escape closes the palette.
 
 #### Accessibility
 
-Combine native modal focus behavior with the editable combobox pattern. Result names include their category and command text; selection uses the approved selected roles. Escape closes once and restores focus. Required site navigation remains available outside the palette without JavaScript. Do not globally intercept shortcuts unless the host opts in.
+Each result's name includes its category and command text. Selection uses the
+approved selected roles.
 
 #### Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 #### Non-examples
 
@@ -4963,25 +4810,23 @@ Hierarchical navigation with explicit expansion and one roving tab stop. Family:
 | dependency.role-color-text-disabled | `color.text.disabled` | `#8a5559` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
 | dependency.role-space-16 | `space.16` | `16px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Navigate hierarchical items with explicit expansion and a single roving tab stop. Selection differs from expansion. Caller-supplied nodes represent identities; activation emits an event and never invents file access.
+Navigates a hierarchy; selection and expansion are separate actions.
 
 #### Anatomy
 
-- **tree:** Labelled tree with nested groups.
-- **item:** Named treeitems expose selection; parents also expose expansion.
-- **children:** A nested group hidden when the parent collapses.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Visible named tree items. | Tree and group hierarchy. |
 | selected | Selected fill, text and start indicator. | aria-selected. |
@@ -4992,14 +4837,12 @@ Navigate hierarchical items with explicit expansion and a single roving tab stop
 
 #### Keyboard
 
-- **Up / Down / Home / End:** Move through visible items in source order.
-- **Right / Left:** Expand or enter a parent, collapse it or return to its parent. Mirror these keys in RTL.
-- **Enter / Space:** Select the focused enabled item.
-- **Typing:** Move to the next visible label starting with the character.
+As in the key table; only one visible item has tabindex=0.
 
 #### Accessibility
 
-Implement the linked tree pattern. Only one visible item has tabindex=0. Labels exclude descendant text. Collapsing a parent of the focused item moves focus to that parent. Selection has a programmatic state and border indicator; disabled items do not activate.
+Labels exclude descendant text. Collapsing a parent of the focused item moves
+focus to that parent.
 
 #### Portability
 
@@ -5030,23 +4873,22 @@ Native details and summary for supporting content. Family: navigation. Priority:
 | dependency.role-color-text-disabled | `color.text.disabled` | `#8a5559` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Reveal supporting content with native details and summary. Essential instructions stay outside a collapsed disclosure. The summary supplies a complete accessible name; content remains in normal reading order.
+Reveals optional supporting content on request.
 
 #### Anatomy
 
-- **details:** Native expanded state and content container.
-- **summary:** Visible name and native disclosure marker.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Named content on the default surface. | Native text and structure. |
 | expanded | Expanded content and native marker. | Native open state exposes the content. |
@@ -5055,12 +4897,11 @@ Reveal supporting content with native details and summary. Essential instruction
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Reach the summary and expanded interactive content.
-- **Enter / Space:** Toggle native details.
+As in the key table.
 
 #### Accessibility
 
-Keep the native marker and summary semantics. Do not add a competing aria-expanded value. Required instructions and the portal's normative content are never placed only inside a disclosure.
+Keep the native marker and summary semantics; add no competing aria-expanded value. Required instructions and the portal's normative content are never placed only inside a disclosure.
 
 #### Portability
 
@@ -5090,22 +4931,18 @@ A bordered panel that groups a title, body and metadata; a link card makes the w
 | meta.text | `color.text.muted` | `#bd787d` | use |
 | selected.bg | `color.interaction.selection.bg` | `#531310` | use |
 | selected.text | `color.interaction.selection.text` | `#f4eeee` | use |
-| selected.ring | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| selected.ring | `color.interaction.focus.ring` | `#e53935` | use |
 
 #### Purpose
 
-Groups a small unit of content — a title, a line or two, a metadata line —
-so it reads as one thing. A card is static by default; it becomes a link
-when the whole unit leads somewhere, and an option when the user picks among
-several units. A card is not a dialog, not a form and not a table row.
+Groups a title, a line or two and a metadata line so they read as one
+thing. Static by default; a link when the whole unit leads somewhere, an
+option when the user picks among units. Not a dialog, a form or a table row.
 
 #### Anatomy
 
-A 1px {color.border.default} edge on {color.surface.default}, no shadow, no
-radius. Inside, a title in {color.text.bright}, body text in
-{color.text.default}, metadata in {color.text.muted}. Padding is 12px in
-`comfortable` and 8px in `compact` density. A link card is one anchor around
-the same content; a selectable card is an option inside a listbox group.
+Parts as listed in the anatomy. Padding 12px in `comfortable`, 8px in
+`compact`.
 
 #### States
 
@@ -5114,45 +4951,37 @@ the same content; a selectable card is an option inside a listbox group.
 | default | 1px {color.border.default} on {color.surface.default} | — |
 | hover | link and selectable cards only: background → {color.interaction.hover.bg}; border → {color.border.control} | cursor: pointer; the border lightens from decorative to control |
 | focus-visible | container ring 2px solid {color.interaction.focus.ring-container} at −3px | the ring |
-| selected | fill {color.interaction.selection.bg} with {color.interaction.selection.text} on every line | `aria-selected="true"`; the fill's on-fill text |
-| selected+focus-visible | the fill and the 2px ring in {color.interaction.focus.ring-container} | both visible at once |
+| selected | fill {color.interaction.selection.bg}, {color.interaction.selection.text} on every line | `aria-selected="true"`; the on-fill text |
+| selected+focus-visible | the fill and 1px dashed {color.interaction.focus.ring} at −2px | both visible at once |
 
-A static card has no hover and no focus: nothing happens on a pointer and it
-is not in the tab order.
+A static card has no hover and no focus, and is not in the tab order.
 
 #### Keyboard
 
-A link card is one tab stop and Enter follows it; controls inside a link
-card are not allowed (a link cannot contain a button). A selectable group is
-a listbox with roving tabindex: Tab lands on the selected card, the arrow
-keys move and select, Space toggles in a multi-select group. A static card
-that contains controls contributes those controls to the tab order and
-nothing else.
+A link card may hold no controls (a link cannot contain a button). A static
+card contributes only the controls it contains to the tab order.
 
 #### Accessibility
 
 A static card is an `article` with a heading when it stands alone, or a
-`section` inside a list. A link card names itself from its content and the
-title comes first so it is read first. Selectable cards are `role="option"`
-inside `role="listbox"` with `aria-label`; `aria-selected` on each option.
-Contrast: title 10.10:1, body 8.43:1, metadata 5.66:1 on the card; on the
-selection fill every line switches to the on-fill text (12.47:1) because muted
-text would fall to 4.19:1. The ring is 10.10:1 on the card and 7.48:1 on the
-fill.
+`section` inside a list. A link card names itself from its content, title
+first. A selectable group's listbox carries `aria-label`. On the selection
+fill every line takes the on-fill text, because muted text would fall below
+4.5:1. Text meets 4.5:1; the ring 3:1 on the card and on the fill.
 
 #### Portability
 
-A bordered box with a background and an outline. Toolkits that add a shadow
-to their frames remove it. Hosts without container outlines draw the ring
-as a 2px inner border and record it.
+A bordered box with a background and an outline. Toolkits that shadow their
+frames remove it. A host without outlines draws a 2px inner border for the container ring,
+1px for the selected card, and records it.
 
 #### Non-examples
 
-A drop shadow or elevation. Rounded corners. A hover lift or scale. A static
-card with a hover fill. A card whose only clickable part is an invisible
-overlay. A link card containing buttons. A selected card shown by a border
-colour alone without the fill and `aria-selected`. Muted metadata left on the
-selection fill.
+A shadow or elevation. Rounded corners. A hover lift or scale. A hover fill
+on a static card. An invisible overlay as the only clickable part. A link
+card containing buttons. A selected card shown by border colour alone,
+without the fill and `aria-selected`. Muted metadata left on the selection
+fill.
 
 ### List (`list`)
 
@@ -5169,7 +4998,7 @@ A selectable list of rows (an APG listbox) in single or multiple selection; the
 | row.text-disabled | `color.text.disabled` | `#8a5559` | use |
 | selected.bg | `color.interaction.selection.bg` | `#531310` | use |
 | selected.text | `color.interaction.selection.text` | `#f4eeee` | use |
-| selected.ring | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| selected.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | selected.inactive-bg | `color.interaction.selection.inactive-bg` | `#420f0c` | use |
 | selected.inactive-text | `color.interaction.selection.inactive-text` | `#e99499` | use |
 | check.glyph | `color.interaction.selection.text` | `#f4eeee` | use |
@@ -5177,30 +5006,24 @@ A selectable list of rows (an APG listbox) in single or multiple selection; the
 
 #### Purpose
 
-Lets the user choose one or several rows from a short, visible set. A list
-is a listbox: it holds a selection, it does not navigate. Rows that lead
-somewhere are sidebar-nav; rows with columns are a table; a long set that
-needs filtering is a combobox.
+Choose one or several rows from a short, visible set. It holds a selection
+and never navigates: rows that lead somewhere are `sidebar-nav`, rows with
+columns a `table`, a long set that needs filtering a `combobox`.
 
 #### Anatomy
 
-A `ul` with `role="listbox"` framed by 1px {color.border.control} on
-{color.surface.default}. Each option is one row: a check gutter, the label in
-{color.text.default}, and in the metadata variant a trailing column in
-{color.text.muted}. Rows are separated by 1px {color.border.divider}. A
-selected row is filled with {color.interaction.selection.bg}; every part of
-it, including the metadata and the ✓ glyph, takes
-{color.interaction.selection.text}.
+Parts as listed in the anatomy; on a selected row every part, metadata and
+✓ included, takes {color.interaction.selection.text}.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | text {color.text.default}; no fill; the check gutter empty | — |
+| default | text {color.text.default}; no fill; check gutter empty | — |
 | hover | background → {color.interaction.hover.bg} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the option | the ring |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the option | the ring |
 | selected | fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text} | `aria-selected="true"`; the ✓ glyph |
-| selected+focus-visible | the fill and the ring in {color.interaction.focus.ring-container} | both visible at once |
+| selected+focus-visible | the fill and 1px dashed {color.interaction.focus.ring} at −2px | both visible at once |
 | selected+container-inactive | fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring | lightness drop between the two fills; the glyph stays |
 | disabled | text {color.text.disabled}; no fill; no hover; still reachable by arrow keys | `aria-disabled="true"`; cursor: not-allowed |
 
@@ -5208,39 +5031,31 @@ Precedence: disabled > selected > hover; focus-visible is always drawn.
 
 #### Keyboard
 
-Roving tabindex: the selected option (or the first) has `tabindex="0"`, the
-rest `-1`, so the list costs one tab stop. Up and Down move; in single
-selection the selection follows focus, in multiple selection Space toggles
-and Shift with the arrows extends. Home and End jump; Ctrl+A selects all in a
-multi-select list; typing jumps to the next matching label. Disabled options
-are reachable and announced, never skipped silently.
+The list costs one tab stop (`tabindex="0"` on the selected or first
+option, `-1` on the rest). Disabled options are reached and announced, never
+skipped.
 
 #### Accessibility
 
-`aria-label` or `aria-labelledby` on the listbox; `aria-multiselectable`
-when several may be chosen; `aria-selected` on every option, including
-`"false"`. The ✓ glyph is `aria-hidden`; `aria-selected` is the state.
-Metadata is inside the option so it is read with the label. Contrast: text
-8.43:1, metadata 5.66:1, selected text 12.47:1 on the fill, inactive selection
-7.02:1, ring 4.57:1 on the surface and 7.48:1 on the fill, frame 4.33:1. Rows
-are at least 24 CSS pixels tall with the check gutter as the leading target
-area.
+`aria-label` or `aria-labelledby` names the listbox; every option carries
+`aria-selected`, including `"false"`. The ✓ is `aria-hidden`;
+`aria-selected` is the state. Metadata sits inside the option so it is read
+with the label. Text meets 4.5:1; frame and rings 3:1. Rows are at least 24
+CSS pixels tall, with the check gutter as the leading target area.
 
 #### Portability
 
-Rows with a background, a glyph gutter and an outline; nothing else. Hosts
-with a native list view take the fill, the inactive fill and the divider
-colour and keep their keyboard model. The inactive fill applies when the
-list's window or pane loses focus, which a web page detects through
-`:focus-within` on the pane.
+Rows with a background, a glyph gutter and an outline; nothing else. Native
+list views take the fill, inactive fill and divider colour and keep their
+own keyboard model. The inactive fill applies when the list's window or pane
+loses focus; the web detects it with `:focus-within` on the pane.
 
 #### Non-examples
 
-A selected row marked by a border or a check alone without the fill. Rounded
-row highlights. Muted metadata left on the selection fill. A list where every
-row is a tab stop. A list that navigates on selection. Disabled rows removed
-from the arrow-key order. Hover that changes the text colour. A list without
-a frame on the canvas.
+A selected row marked by a border or check without the fill. Rounded row
+highlights. Muted metadata left on the selection fill. Every row a tab stop.
+Navigating on selection. Disabled rows removed from the arrow-key order.
+Hover that changes text colour. A frameless list on the canvas.
 
 ### Badge (`badge`)
 
@@ -5274,60 +5089,49 @@ A small square label for a status or a count; every status carries its glyph and
 #### Purpose
 
 Names a status or shows a count next to the thing it describes. A badge is
-read-only: it never opens, toggles or removes anything. An interactive
-label is a chip; a message with a status is an alert.
+read-only: it never opens, toggles or removes anything. An interactive label
+is a chip; a message with a status is an alert.
 
 #### Anatomy
 
-An inline span in caption type with 2px by 8px padding and square corners.
-Status badges fill with `color.status.<status>.fill` and use the matching
-`on-fill` text, preceded by the status glyph: ✕ danger, ! warning, ✓ success,
-i info, · neutral. Outline badges have no fill, the `text` colour and a 1px
-`border` in the same status. The count badge is a number on
-{color.action.primary.bg} in {color.action.primary.text} with a visually
-hidden unit. An empty badge is an 8px square dot in the status fill with a
-name.
+Parts as listed in the anatomy. The glyphs are ✕ danger, ! warning, ✓
+success, i info and · neutral.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | fill, glyph and text for the status; or the outline form | the glyph; the text |
-| empty | an 8px square dot in the status fill; the glyph and text visually hidden | `role="img"` with `aria-label`, or the hidden text; the dot's position beside its subject |
+| empty | an 8px square dot in the status fill; glyph and text visually hidden | `role="img"` with `aria-label`, or the hidden text; the dot's position beside its subject |
 
-A badge has no hover, focus, pressed or disabled state because it is not a
-control.
+No hover, focus, pressed or disabled state: a badge is not a control.
 
 #### Keyboard
 
-None. A badge is never focusable. When a badge summarises something the
-user can act on, the action lives in the neighbouring control and the badge
-is part of that control's name or description.
+None. When a badge summarises something the user can act on, the action lives
+in the neighbouring control and the badge is part of that control's name or
+description.
 
 #### Accessibility
 
-The glyph is `aria-hidden` and the text carries the meaning, so a screen
-reader hears "Failed", not "cross Failed". Count badges include their unit
-as visually hidden text ("12 unread"). An empty badge, a dot, carries
-`role="img"` and `aria-label` or wraps hidden text; a dot with no name is
-decoration and must be `aria-hidden`. Contrast: on-fill text 4.58:1 (danger),
-7.54:1 (warning), 7.13:1 (success), 7.08:1 (info), 4.71:1 (neutral); outline
-text 5.26:1 to 7.34:1; borders and dots at least 4.04:1 on the panel surface.
-Badges are not targets, so no minimum size applies beyond legibility at 11px
-caption type.
+The text carries the meaning, so a reader hears "Failed", not "cross Failed".
+The count's hidden unit reads as "12 unread". An empty badge may wrap hidden
+text instead of `aria-label`; a dot with no name is decoration and must be
+`aria-hidden`. Text meets 4.5:1; outline borders and dots 3:1 on the panel
+surface. Badges are not targets, so no size minimum applies beyond legibility
+at 11px caption type.
 
 #### Portability
 
-A filled or outlined span with a glyph. Toolkits without background colours
-on labels use the outline form. Hosts without the glyph characters use the
-nearest available (x, !, check mark, i, bullet) and record it.
+Toolkits without background colours on labels use the outline form. Hosts
+without the glyph characters use the nearest available (x, !, check mark, i,
+bullet) and record it.
 
 #### Non-examples
 
-Rounded or pill badges. A badge that is clickable. A status shown by colour
-without its glyph. A count badge that hides its unit from assistive
-technology. Purple, cyan or magenta statuses. A badge in body type. A badge
-whose text wraps. A dot without a name.
+Rounded or pill badges. A clickable badge. A status by colour without its
+glyph. A count unit hidden from assistive technology. Purple, cyan or magenta
+statuses. A badge in body type. Wrapping text. A dot without a name.
 
 ### Chip (`chip`)
 
@@ -5346,73 +5150,61 @@ A square bordered token for a filter, a removable value or a static tag; a press
 | root.bg-disabled | `color.interaction.disabled.bg` | `#160b0b` | use |
 | selected.bg | `color.interaction.selection.bg` | `#531310` | use |
 | selected.text | `color.interaction.selection.text` | `#f4eeee` | use |
-| selected.ring | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| selected.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | remove.text | `color.text.muted` | `#bd787d` | use |
 | remove.text-hover | `color.text.bright` | `#ffa2a7` | use |
 | remove.bg-hover | `color.interaction.hover.bg-strong` | `#630f0d` | use |
 
 #### Purpose
 
-Represents one value the user can toggle or remove: a filter in a
-filterable table, a chosen item in a multiselect, a tag on a record. A chip
-that only informs is a badge; a chip that runs an action is a button.
+One value the user can toggle or remove: a filter, a multiselect choice, a
+record's tag. A chip that only informs is a badge; one that runs an action is
+a button.
 
 #### Anatomy
 
-A square control-height box with 1px {color.border.control} on
-{color.surface.default} and text in {color.text.default}. A filter chip is a
-button with a check gutter that shows ✓ while pressed. A removable chip is a
-span holding the label and a × button in {color.text.muted}. A static chip is
-a span with nothing else. When selected, the chip fills with
-{color.interaction.selection.bg} and its text becomes
-{color.interaction.selection.text}.
+Parts as listed in the anatomy; a static chip is a span with nothing else.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.default}; text {color.text.default} | — |
-| hover | background → {color.interaction.hover.bg}; the remove button → {color.interaction.hover.bg-strong} with {color.text.bright} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the chip or on the remove button | the ring |
-| selected | fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text}; the border takes the fill colour | `aria-pressed="true"`; the ✓ glyph |
-| selected+focus-visible | the fill and the ring in {color.interaction.focus.ring-container} | both visible at once |
-| disabled | text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no hover | `disabled`; cursor: not-allowed |
-
-Pressing a filter chip uses {color.interaction.pressed.bg} for the duration
-of the press only. Precedence: disabled > selected > hover; focus-visible is
-always drawn.
+| hover | background → {color.interaction.hover.bg}; remove button → {color.interaction.hover.bg-strong} with {color.text.bright} | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the chip or the remove button | the ring |
+| selected | fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text}; border takes the fill colour | `aria-pressed="true"`; the ✓ glyph |
+| selected+focus-visible | the fill and 1px dashed {color.interaction.focus.ring} at −2px | both visible at once |
+| disabled | {color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}; no hover | `disabled`; cursor: not-allowed |
+
+A filter chip shows {color.interaction.pressed.bg} only while pressed.
+Precedence: disabled > selected > hover; focus-visible is always drawn.
 
 #### Keyboard
 
-A filter chip is one tab stop that toggles on Space or Enter. A removable
-chip contributes only its remove button to the tab order; the label is not
-focusable. A static chip is never focusable. Inside a token field the field
-owns Backspace and the arrow keys.
+As in the key table. The label of a removable chip is not focusable; inside a
+token field the field owns Backspace and the arrow keys.
 
 #### Accessibility
 
-Filter chips expose `aria-pressed` and keep the same label in both states;
-the ✓ glyph is `aria-hidden`. The remove button is named "Remove <value>" so
-it is unambiguous out of context, and removing a chip moves focus to the
-next chip or the field. Contrast: text 8.43:1, border 4.33:1, selected text
-12.47:1 on the fill, ring 4.57:1 on the surface and 7.48:1 on the fill,
-remove glyph 5.66:1. Chips and remove buttons are at least 24×24 CSS pixels
-in `compact` density with 4px between neighbours.
+A filter chip keeps the same label in both states; the ✓ is `aria-hidden`.
+The remove button's name ("Remove <value>") is unambiguous out of context;
+removing a chip moves focus to the next chip or the field. Text meets 4.5:1;
+border and rings 3:1. Chips and remove buttons are at least 24×24 CSS pixels
+in `compact`, with 4px between neighbours.
 
 #### Portability
 
 A bordered box with a background and an outline; the remove control is an
-ordinary small button. Toolkits with a native toggle button take the fill
-for the checked state. Hosts without a glyph draw the check as a 2px inset
-rule at the inline start and record it.
+ordinary small button. Native toggle buttons take the fill for the checked
+state. A host without a glyph draws the check as a 2px inset rule at the
+inline start and records it.
 
 #### Non-examples
 
-Pill or rounded chips. A selected chip shown by a border colour alone
-without the fill and `aria-pressed`. A removable chip whose × has no name.
-A chip that is a link. A static tag that reacts to hover. Disabling by
-opacity. A chip whose label clips inside the border. A chip in caption
-type (that is a badge).
+Pill or rounded chips. A selected chip shown by border colour alone, without
+the fill and `aria-pressed`. A nameless ×. A chip that is a link. A static tag
+that reacts to hover. Disabling by opacity. A label clipped by the border. A
+chip in caption type (that is a badge).
 
 ### Table (`table`)
 
@@ -5432,7 +5224,7 @@ A native data table with a header rule, row dividers, hover and selection fills,
 | row.bg-hover | `color.interaction.hover.bg` | `#1c0a09` | use |
 | selected.bg | `color.interaction.selection.bg` | `#531310` | use |
 | selected.text | `color.interaction.selection.text` | `#f4eeee` | use |
-| selected.ring | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| selected.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | selected.inactive-bg | `color.interaction.selection.inactive-bg` | `#420f0c` | use |
 | selected.inactive-text | `color.interaction.selection.inactive-text` | `#e99499` | use |
 | caption.text | `color.text.muted` | `#bd787d` | use |
@@ -5441,73 +5233,58 @@ A native data table with a header rule, row dividers, hover and selection fills,
 
 #### Purpose
 
-Shows records as rows and attributes as columns so they can be compared
-down a column. The table is for reading; a table with selection
-checkboxes, resizable columns and a toolbar is the data-table. A single
-column of rows is a list.
+Records as rows, attributes as columns, compared down a column. For
+reading only: selection, resizing and a toolbar make it a `data-table`; a
+single column of rows is a `list`.
 
 #### Anatomy
 
-A collapsed native table on {color.surface.default} with no outer border.
-The header row is {color.text.bright} above a 1px {color.border.strong} rule
-(2px when the header is sticky, on {color.surface.raised}); sortable headers
-wrap their label in a button and show ▲ or ▼ when sorted. Body rows are the
-row height, separated by 1px {color.border.divider}, text in
-{color.text.default}; numeric cells are end-aligned with tabular numbers.
-An optional caption in {color.text.muted} sits above. Two special rows,
-hidden unless needed, span every column: the empty message and the loading
-glyph.
+Parts as listed in the anatomy; the sticky header sits on
+{color.surface.raised}.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | rows on {color.surface.default}; header rule 1px {color.border.strong} | — |
-| hover | row background → {color.interaction.hover.bg} | cursor: default; only on hover-capable pointers |
+| hover | row → {color.interaction.hover.bg} | cursor: default; hover-capable pointers only |
 | selected | row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text} | `aria-selected="true"` on the row |
-| selected+focus-visible | the fill and a ring in {color.interaction.focus.ring-container} around the row | both visible at once |
+| selected+focus-visible | the fill and 1px dashed {color.interaction.focus.ring} at −2px around the row | both visible at once |
 | selected+container-inactive | row fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring | lightness drop between the two fills |
-| sorted | the sorted header shows ▲ (ascending) or ▼ (descending) in {color.text.bright} | `aria-sort`; the glyph |
-| empty | the body is one full-width cell in {color.text.muted}: "No rows match." | the message text |
-| loading | the body is one full-width cell with the static `⋯` glyph in {color.text.muted}; the header stays | `aria-busy="true"`; the glyph; no animation |
+| sorted | ▲ (ascending) or ▼ (descending) in {color.text.bright} on the sorted header | `aria-sort`; the glyph |
+| empty | one full-width cell in {color.text.muted}: "No rows match." | the message text |
+| loading | one full-width cell with the static `⋯` glyph in {color.text.muted}; the header stays | `aria-busy="true"`; the glyph; no animation |
 
 Precedence: loading > empty; selected > hover; focus-visible is always
 drawn.
 
 #### Keyboard
 
-A plain table has no row focus: Tab reaches the sort buttons in the header
-and any control inside a cell. Enter or Space on a sort button cycles
-ascending, descending. Tables whose rows are targets (row links, row
-selection) are the data-table and add row focus there.
+As in the key table. Rows that are targets (row links, row selection) make
+it a `data-table`, which adds row focus.
 
 #### Accessibility
 
-`caption` or `aria-labelledby` names the table; `th scope="col"` on every
-header and `scope="row"` on a row header column. `aria-sort` on the sorted
-`th`, `none` or absent elsewhere; the glyph is `aria-hidden`. The empty and
-loading rows are real rows so the table stays a table; `aria-busy="true"`
-on the table while loading and a live region for the outcome. Contrast:
-body text 8.43:1, header 10.10:1, caption and empty message 5.66:1, selected
-text 12.47:1 on the fill, inactive 7.02:1, ring 7.48:1 on the fill, sort ring
-4.57:1. Rows are at least 24 CSS pixels tall; sort buttons fill the header
-cell.
+`caption` or `aria-labelledby` names the table; `scope="row"` on a row
+header column. `aria-sort` is `none` or absent on unsorted headers; the
+glyph is `aria-hidden`. Empty and loading rows are real rows; a live region
+reports the loading outcome. Text meets 4.5:1; rings 3:1. Rows are at least
+24 CSS pixels tall; sort buttons fill the header cell.
 
 #### Portability
 
 Row backgrounds, one border under the header, one between rows, an outline
-on a selected row. Toolkits with a native table view take the rule, the
-divider and the two fills. Hosts that cannot draw an outline on a row draw
-the ring as an inset 1px border and record it.
+on a selected row. Native table views take the rule, the divider and the two
+fills. A host that cannot outline a row draws the ring as an inset 1px
+border and records it.
 
 #### Non-examples
 
-Zebra striping. A rounded or bordered table frame. A selected row marked by
-a left bar (that is navigation, not selection). Header text in caption size
-or uppercase. Sorting shown by colour alone without `aria-sort` and a glyph.
-An animated spinner while loading. An empty state that removes the header.
-Text truncated with no way to read the full value. A hover fill on a
-touch device.
+Zebra striping. A rounded or bordered frame. A selected row marked by a
+left bar (that is navigation). Header text in caption size or uppercase.
+Sorting by colour alone without `aria-sort` and a glyph. An animated
+spinner. An empty state that removes the header. Truncated text with no way
+to read the full value. Hover fill on touch.
 
 ### Data table (`data-table`)
 
@@ -5525,7 +5302,7 @@ A native table with controls: a selection column with a mixed select-all, sortab
 | row.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | selected.bg | `color.interaction.selection.bg` | `#531310` | use |
 | selected.text | `color.interaction.selection.text` | `#f4eeee` | use |
-| selected.ring | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| selected.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | checkbox.bg | `color.surface.input` | `#000000` | use |
 | checkbox.border | `color.border.control` | `#a3676b` | use-and-report (D-007) |
 | checkbox.checked-bg | `color.action.primary.bg` | `#7d1310` | use |
@@ -5537,79 +5314,62 @@ A native table with controls: a selection column with a mixed select-all, sortab
 
 #### Purpose
 
-A table the user works in: selects rows, sorts, resizes columns. The
-plain table is for reading; this component adds the controls and the
-keyboard model. It stays a native table so its cells keep their header
-associations; hosts that need cell-level navigation promote it to a grid
-and record the change.
+A table the user works in; the plain `table` is for reading. It stays a
+native table so cells keep their header associations; a host that needs
+cell-level navigation promotes it to a grid and records the change.
 
 #### Anatomy
 
-The table component's structure with the same rule, dividers and fills,
-plus: a selection column whose header holds a select-all with
-`aria-checked` true, false or mixed, drawn on {color.action.primary.bg} with
-the ✓ or – glyph in {color.action.primary.text}; native checkboxes in each
-row on {color.surface.input} with a 1px {color.border.control} boundary;
-rows that can take focus; and in the resizable variant a 1px handle in
-{color.border.default} at the inline end of each header that turns
-{color.border.active} under the pointer.
+The `table` structure, rule, dividers and fills, plus the parts listed in
+the anatomy; row checkboxes have a 1px {color.border.control} boundary.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | rows on {color.surface.default}; header rule 1px {color.border.strong} | — |
-| hover | row background → {color.interaction.hover.bg}; a resize handle → {color.border.active} | cursor: default on rows, col-resize on handles |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px around the focused row or control | the ring |
-| selected | row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; the row checkbox checked | `aria-selected="true"`; the checked box |
-| selected+focus-visible | the fill and the ring in {color.interaction.focus.ring-container} | both visible at once |
+| hover | row → {color.interaction.hover.bg}; a resize handle → {color.border.active} | cursor: default on rows, col-resize on handles |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px around the focused row or control | the ring |
+| selected | row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; row checkbox checked | `aria-selected="true"`; the checked box |
+| selected+focus-visible | the fill and 1px dashed {color.interaction.focus.ring} at −2px | both visible at once |
 | sorted | ▲ or ▼ in {color.text.bright} on the sorted header | `aria-sort`; the glyph |
-| mixed | the select-all on {color.action.primary.bg} with the – glyph | `aria-checked="mixed"`; the glyph |
-| empty | one full-width cell in {color.text.muted}: "No rows match."; the header and controls stay | the message text |
+| mixed | select-all on {color.action.primary.bg} with the – glyph | `aria-checked="mixed"`; the glyph |
+| empty | one full-width cell in {color.text.muted}: "No rows match."; header and controls stay | the message text |
 | loading | one full-width cell with the static `⋯` glyph; the header stays | `aria-busy="true"`; the glyph; no animation |
 
 Precedence: loading > empty; selected > hover; focus-visible is always
-drawn. Selection is a fill; focus is a ring; they never borrow each other's
-form.
+drawn. Selection is a fill, focus a ring; neither borrows the other's form.
 
 #### Keyboard
 
-Header controls first: the select-all, then each sort button. Rows use a
-roving tabindex so the body costs one tab stop; Up and Down move, Space
-toggles, Shift extends, Ctrl+A selects all. Controls inside the focused row
-are reached with Tab and left with Shift+Tab. Column widths are set from a
-header menu or by dragging the handle; the handle itself is never a tab
-stop.
+Controls inside the focused row are reached with Tab and left with
+Shift+Tab. Column widths come from a header menu or the handle, which is
+never a tab stop.
 
 #### Accessibility
 
-Every row checkbox is labelled by the row's first data cell
-(`aria-labelledby`); the select-all is named "Select all rows" and exposes
-`aria-checked="mixed"` when only some are selected. `aria-selected` on the
-row mirrors its checkbox. Sorted headers carry `aria-sort`; the table
-carries `aria-busy` while loading; the count of selected rows is announced
-through a live region owned by the surrounding toolbar. Contrast: text
-8.43:1, header 10.10:1, selected text 12.47:1 on the fill, ring 4.57:1 on the
-surface and 7.48:1 on the fill, checkbox boundary 4.33:1, check glyph 9.28:1
-on the primary fill. Checkboxes and handles are at least 24 CSS pixels tall
-in `compact` density.
+Each row checkbox is labelled by the row's first data cell
+(`aria-labelledby`); the select-all is named "Select all rows".
+`aria-selected` on the row mirrors its checkbox. The selected-row count is
+announced through a live region owned by the surrounding toolbar. Text meets
+4.5:1; boundaries and rings 3:1. Checkboxes and handles are at least 24 CSS
+pixels tall in `compact`.
 
 #### Portability
 
-The table component's drawing plus a checkbox column and a header
-checkbox; the handle is a 1px rule. Toolkits with native table views map
-row selection to their selection model and the mixed state to their
-tristate checkbox. Hosts without row focus fall back to the checkbox as the
-only row control and record it.
+The `table` drawing plus a checkbox column and header checkbox; the handle
+is a 1px rule. Native table views map row selection to their selection model
+and mixed to their tristate checkbox. A host without row focus keeps the
+checkbox as the only row control and records it.
 
 #### Non-examples
 
-A grid role on a table that is not navigated cell by cell. Zebra stripes.
-A select-all that is a native checkbox with a script-only indeterminate
-state and no `aria-checked`. Rows selected by clicking anywhere with no
-checkbox alternative. A selected row shown by a border alone. A resize
-handle that is a tab stop. An animated loading skeleton. Rounded checkboxes.
-Text truncated with no full-value affordance.
+A grid role on a table not navigated cell by cell. Zebra stripes. A
+select-all that is a native checkbox with a script-only indeterminate state
+and no `aria-checked`.
+Row selection by click with no checkbox alternative. A selected row shown by
+a border alone. A resize handle as a tab stop. An animated loading skeleton.
+Rounded checkboxes. Truncated text with no full-value affordance.
 
 ### Description list (`description-list`)
 
@@ -5626,40 +5386,40 @@ Semantic terms and values that wrap into a readable single column. Family: displ
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-color-border-divider | `color.border.divider` | `#2b0e0d` | use-and-report (D-008) |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-4 | `space.4` | `4px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Present named facts as semantic terms and descriptions. Terms remain adjacent to their values in source order. A narrow view stacks the term above its value.
+Named facts as term and value pairs.
 
 #### Anatomy
 
-- **list:** Native description list.
-- **term:** Concise name for a fact.
-- **value:** Text, links or semantic inline content.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Two aligned columns. | Native term and description relationships. |
 | stacked | One column at narrow widths. | Each term immediately precedes its value. |
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Visit links in values. Plain facts are not tab stops.
+As in the key table.
 
 #### Accessibility
 
-Use dt and dd rather than a grid of unrelated paragraphs. Long values wrap without clipping. Preserve meaningful link text and do not make every value keyboard focusable.
+Use `dt` and `dd`, not a grid of unrelated paragraphs. Long values wrap
+without clipping. Keep link text meaningful.
 
 #### Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 #### Non-examples
 
@@ -5679,41 +5439,42 @@ A square entity image with a named text fallback. Family: display. Priority: R2.
 | control.bg | `color.surface.input` | `#000000` | use |
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-font-weight-bold | `font.weight.bold` | `700` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-32 | `space.32` | `32px` | use |
 
 #### Purpose
 
-Identify a person or entity with an optional caller-owned image and text fallback. The component ships no image service or assets. Failed images restore the fallback and retain the full accessible name.
+Identifies a person or entity; the caller owns the image.
 
 #### Anatomy
 
-- **frame:** Square bounded image area with a border.
-- **fallback:** Caller-supplied initials, backed by the full accessible name.
-- **image:** Optional image; failed loading restores the text fallback.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Initials or loaded image. | Full name on the image container. |
-| loading | Fallback remains visible. | No loss of the full accessible name while loading. |
-| error | Fallback remains visible. | Image failure does not remove the entity name. |
+| default | Initials or the loaded image. | Full name on the image container. |
+| loading | Fallback stays visible. | Full accessible name kept. |
+| error | Fallback stays visible. | Full accessible name kept. |
 
 #### Keyboard
 
-- **Tab:** No additional tab stop. An enclosing link remains native.
+As in the key table; nothing is bound.
 
 #### Accessibility
 
-Use one full accessible name, avoiding duplicate announcements from image alt and fallback text. Initials alone do not adequately identify a person. A decorative avatar beside an equivalent visible name may be aria-hidden.
+One full accessible name, never announced twice by image alt and fallback
+text; initials alone do not identify a person. A decorative avatar beside an
+equivalent visible name may be `aria-hidden`.
 
 #### Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 #### Non-examples
 
@@ -5736,35 +5497,35 @@ Chronological events with explicit dates, descriptions and current state. Family
 | dependency.role-border-width-emphasis | `border.width.emphasis` | `2px` | use |
 | dependency.role-color-border-active | `color.border.active` | `#e53935` | use |
 | dependency.role-color-border-divider | `color.border.divider` | `#2b0e0d` | use-and-report (D-008) |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-4 | `space.4` | `4px` | use |
 
 #### Purpose
 
-Read events as an ordered list with explicit time and status text. The caller supplies order; the component does not reorder unknown dates. Lines support the sequence without becoming the only status channel.
+Chronological events read as an ordered list in the order the caller gives.
 
 #### Anatomy
 
-- **list:** Ordered events in reading order.
-- **time:** Native time element with machine-readable datetime.
-- **event:** Heading and status-bearing description.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Divider along the event sequence. | Ordered list and visible time. |
 | current | Emphasized start border. | aria-current and explicit Current text. |
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Reach event links and actions. The sequence is not focusable.
+As in the key table.
 
 #### Accessibility
 
-Use real time values and visible dates. Identify the current event with aria-current and text. Avoid a color-only dot or an order that changes between visual presentation and reading order.
+Use real time values and visible dates. Mark the current event with
+`aria-current` and text. No colour-only dot; visual order matches reading
+order.
 
 #### Portability
 
@@ -5791,28 +5552,26 @@ A one-series numeric chart with an always-visible complete data table. Family: d
 | dependency.role-color-chart-axis | `color.chart.axis` | `#9e231f` | use |
 | dependency.role-color-chart-grid | `color.chart.grid` | `#2b0e0d` | use |
 | dependency.role-color-chart-label | `color.chart.label` | `#bd787d` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | series.primary | `color.chart.series-2` | `#f73f35` | use |
 | header.text | `color.text.bright` | `#ffa2a7` | use |
 | row.text | `color.text.default` | `#e99499` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Show one bounded numeric series with its complete textual data table. Labels and exact values carry the meaning without color. The API accepts finite non-negative values; it rejects invalid data rather than silently inventing missing numbers.
+One bounded numeric series, plotted beside the complete data table that
+carries its meaning.
 
 #### Anatomy
 
-- **figure:** Caption identifies the measure and units.
-- **plot:** Responsive SVG with an accessible name.
-- **table:** Always-visible labels and exact values.
-- **empty:** Explicit message when the supplied series is empty.
+Parts as listed in the anatomy; each SVG bar has a text label.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Red primary series (`color.chart.series-2`), with canonical axis and label roles. | Complete labelled data table. |
 | empty | Plot and rows are absent. | Explicit No data available text. |
@@ -5820,16 +5579,16 @@ Show one bounded numeric series with its complete textual data table. Labels and
 
 #### Keyboard
 
-- **Tab:** Visit any scrollable data region. Points do not add unnecessary tab stops.
+As in the key table.
 
 #### Accessibility
 
-Keep the table visible without JavaScript. Do not replace it with tooltips or color-only legends. The single series uses the approved red chart role `color.chart.series-2`, as requested by the owner for graphs; foreground typography retains its rose roles. Each SVG bar has a text label. A loading status must distinguish old data from a completed refresh.
-
-Column headers use `color.text.bright`; body row labels and numeric values use
-`color.text.default`. Row-header semantics remain native `th scope="row"` even
-though their typography matches body values. Do not apply the column-header color
-to every `th` indiscriminately.
+The table stays visible without JavaScript and is never replaced by tooltips
+or colour-only legends. Text keeps its rose roles; only the series is red. A
+loading status distinguishes old data from a completed refresh. Column
+headers use `color.text.bright`; row labels and values use
+`color.text.default`, while row headers stay native `th scope="row"`. Do not
+give every `th` the column-header colour.
 
 #### Portability
 
@@ -5837,7 +5596,8 @@ Follows the shared component defaults in `spec/portability.md` (section "Shared
 
 #### Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls, colour-only status, drag-only operations, hidden required
+instructions, stolen focus or an invented service success.
 
 ### Keyboard key (`kbd`)
 
@@ -5854,6 +5614,7 @@ A literal key or short keyboard sequence rendered as native kbd text. Family: di
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-border-width-emphasis | `border.width.emphasis` | `2px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
 | dependency.role-space-2 | `space.2` | `2px` | use |
@@ -5861,30 +5622,32 @@ A literal key or short keyboard sequence rendered as native kbd text. Family: di
 
 #### Purpose
 
-Show readable key names using native kbd text. This documents a shortcut; it does not bind one. State the platform when shortcuts differ.
+Shows the reader a key or shortcut; it binds nothing.
 
 #### Anatomy
 
-- **key:** Native kbd containing a readable key name.
-- **sequence:** Separate keys joined by text in activation order.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Named content on the default surface. | Native text and structure. |
 
 #### Keyboard
 
-- **None:** The keycap is documentation, not a button.
+Not interactive; nothing is bound.
 
 #### Accessibility
 
-Write readable names such as Ctrl, Shift and Escape. Keep sequence punctuation as text. A shortcut hint does not replace an action's accessible name.
+Write readable names such as Ctrl, Shift and Escape, and keep sequence
+punctuation as text. A shortcut hint never replaces an action's accessible
+name.
 
 #### Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 #### Non-examples
 
@@ -5923,65 +5686,53 @@ An inline status message with a mandatory glyph on the status tint behind a 1px
 #### Purpose
 
 A status message that belongs to the page or form around it: a failed
-submit, a saved draft, a deprecation notice. It stays in flow, is never
-timed, and is announced once when it appears. Transient confirmations are
-toasts; blocking questions are dialogs.
+submit, a saved draft, a deprecation notice. It stays in flow, is never timed,
+and is announced once when it appears. Transient confirmations are toasts;
+blocking questions are dialogs.
 
 #### Anatomy
 
-The block on the status tint behind a 1px status border; the glyph in the
-status text colour; the title in the same colour and the message in
-{color.text.default}; an optional close button at the end. The five statuses
-use their own `tint`, `border` and `text` roles: {color.status.danger.tint},
-{color.status.warning.tint}, {color.status.success.tint},
-{color.status.info.tint} and {color.status.neutral.tint} behind
-{color.status.danger.border}, {color.status.warning.border},
-{color.status.success.border}, {color.status.info.border} and
-{color.status.neutral.border}.
+Parts as listed in the anatomy. Each of the five statuses uses its own
+`tint`, `border` and `text` roles.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | status tint, 1px status border, glyph and title in the status text colour | the glyph ✕ ! ✓ i · |
-| hover | close button background → {color.action.tertiary.hover-bg}; the alert itself does not react | cursor: pointer on the button only |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the close button | the ring |
+| hover | close button → {color.action.tertiary.hover-bg}; the alert itself does not react | cursor: pointer on the button only |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px on the close button | the ring |
 
-The alert has no disabled, selected or loading state; a message that is no
-longer true is removed, not greyed.
+No disabled, selected or loading state: a message that is no longer true is
+removed, not greyed.
 
 #### Keyboard
 
-Only the close button is in the tab order. Enter or Space dismisses and
-returns focus to where it was, or to the next focusable element after the
-alert when that element is gone. Escape does nothing, so a page-level Escape
-handler is never swallowed.
+As in the key table. Escape does nothing so a page-level Escape handler is
+never swallowed.
 
 #### Accessibility
 
-Danger uses `role="alert"` (assertive) because it needs attention now; the
-other four use `role="status"` (polite). The container exists before its
-text is set, so the live region fires; text is never injected together with
-the container. The glyph is `aria-hidden` and the title states the status in
-words ("Build failed", "Saved"), so nothing depends on colour or on the glyph
-alone. The close button is `aria-label="Dismiss"` and at least 24×24 CSS
-pixels. Contrast: status text on its tint from 4.88:1 (danger) to 6.59:1
-(warning, info); body text at least 7.56:1 on every tint; borders from 4.07:1
-(neutral) to 6.59:1.
+Danger is `role="alert"` (assertive) because it needs attention now; the
+other four are `role="status"` (polite). The container exists before its text
+is set so the live region fires; never inject text together with the
+container. The glyph is `aria-hidden` and the title states the status in
+words ("Build failed", "Saved"), so nothing depends on colour or the glyph
+alone. The close button is at least 24×24 CSS pixels. Text meets 4.5:1 on
+every tint; borders 3:1.
 
 #### Portability
 
-Everything is a tint, a 1px border and text; the glyph is a text character,
-not an icon font. Toolkits with a native info bar map its type to the five
-statuses and keep the glyph in the text; toolkits without a tint draw the
-border only and record the deviation.
+The glyph is a text character, not an icon font. A toolkit with a native info
+bar maps its type to the five statuses and keeps the glyph in the text; one
+without a tint draws the border only and records the deviation.
 
 #### Non-examples
 
 A coloured left stripe with no border. A rounded, shadowed card. A banner
 that slides in or auto-dismisses. Colour-only status without the glyph and a
-worded title. Using `role="alert"` for success messages. A close button that
-is an icon with no accessible name. Fixed-position alerts covering content.
+worded title. `role="alert"` for success. A close icon with no accessible
+name. Fixed-position alerts covering content.
 
 ### Toast (`toast`)
 
@@ -6009,7 +5760,7 @@ A brief notification in a fixed corner stack; canvas surface behind a 1px overla
 | danger.text | `color.status.danger.on-fill` | `#f9faf9` | use |
 | danger.button-bg-hover | `color.action.destructive.pressed-bg` | `#ae1914` | use |
 | action.text | `color.text.link` | `#f73f35` | use |
-| action.bg-hover | `color.interaction.hover.bg-strong` | `#630f0d` | use |
+| action.bg-hover | `color.interaction.hover.bg` | `#1c0a09` | use |
 | action.text-hover | `color.text.link-hover` | `#f4eeee` | use |
 | close.text | `color.action.tertiary.text` | `#e99499` | use |
 | close.bg-hover | `color.action.tertiary.hover-bg` | `#1c0a09` | use |
@@ -6019,63 +5770,52 @@ A brief notification in a fixed corner stack; canvas surface behind a 1px overla
 
 #### Purpose
 
-A short confirmation or notice that does not belong to any one element on
-the page: "Saved", "Copied", "Connection lost". It appears in a fixed corner
-stack, is announced politely, and leaves on its own after a pause or when
-dismissed. Anything that needs a decision is a dialog; anything tied to a
-form is an alert.
+A short notice that belongs to no one element on the page: "Saved",
+"Copied", "Connection lost". It leaves on its own after a pause or when
+dismissed. A decision is a dialog; a notice tied to a form is an alert.
 
 #### Anatomy
 
-The stack region; each toast on {color.surface.canvas} behind a 1px
-{color.border.overlay}, or on a status tint with its status border; the glyph
-and the text; an optional action; the Dismiss button; the "+n" count. The
-danger toast is the historical critical notification: {color.status.danger.fill}
-with {color.status.danger.on-fill} for the text, the glyph and both buttons.
+Parts as listed in the anatomy. The danger toast is the historical critical
+notification: {color.status.danger.fill} with {color.status.danger.on-fill}
+for the text, the glyph and both buttons.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | canvas surface, 1px overlay border, glyph in the status text colour | the glyph; the worded text |
-| hover | action → {color.interaction.hover.bg-strong} with {color.text.link-hover}; Dismiss → {color.action.tertiary.hover-bg}; the timeout pauses | cursor: pointer; underline thickens on the action |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the focused button; on the danger fill the ring takes {color.status.danger.on-fill}; the timeout pauses | the ring |
-| stacked | toasts sit in one column with a 4px gap, newest at the end; the last visible toast shows "+n" in {color.text.muted} for queued ones | the count text; at most three visible |
-| reduced-motion | no transition; the toast is simply present or absent | `prefers-reduced-motion`; nothing moves |
+| hover | action → {color.interaction.hover.bg} with {color.text.link-hover}; Dismiss → {color.action.tertiary.hover-bg}; the timeout pauses | cursor: pointer; the action's underline thickens |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the focused button, {color.status.danger.on-fill} on the danger fill; the timeout pauses | the ring |
+| stacked | one column, 4px gap, newest at the end; the last visible toast shows "+n" in {color.text.muted} | the count text; at most three visible |
+| reduced-motion | no transition; present or absent | `prefers-reduced-motion`; nothing moves |
 
-The toast has no disabled, selected or busy state.
+No disabled, selected or busy state.
 
 #### Keyboard
 
-Toasts never take focus when they appear. A host shortcut (F6 on the web
-reference) moves focus into the region; Tab then walks each toast's action
-and Dismiss; Escape dismisses the focused toast. While any toast has focus or
-the pointer, its timeout is paused.
+As in the key table. F6 is the web reference's shortcut; the timeout pauses
+while a toast has focus or the pointer.
 
 #### Accessibility
 
-The region is named "Notifications"; each toast is `role="status"` so it is
-announced politely, and danger toasts are `role="alert"`. The text states the
-outcome in words and the glyph is `aria-hidden`. Every toast has Dismiss and
-the timeout is at least 8 seconds, extended for toasts with an action; an
-action is never the only way to reach what it does. Contrast: text 8.65:1 on
-the canvas, the overlay border 4.69:1, status text on its tint from 5.31:1
-(neutral) to 6.59:1, on-fill text 4.58:1 on the danger fill, which is itself
-4.14:1 against the canvas.
+The text states the outcome in words; the glyph is `aria-hidden`. Every toast
+has Dismiss; the timeout, at least 8 seconds, is extended for toasts with an
+action, and an action is never the only way to reach what it does. Text
+meets 4.5:1 on the canvas, on its tint and on the danger fill; borders, and
+the danger fill against the canvas, 3:1.
 
 #### Portability
 
-A fixed region, tints, 1px borders and text glyphs. Hosts with a notification
-daemon send the text and urgency instead of drawing a toast; the danger fill
-maps to the critical urgency. Toolkits with a native toast overlay use it and
-record that the danger fill is not available.
+Hosts with a notification daemon send the text and urgency instead of
+drawing a toast. Toolkits with a native toast overlay use it and record that
+the danger fill is not available.
 
 #### Non-examples
 
-A toast that slides in from an edge. A rounded, shadowed pill. A toast with
-no Dismiss that vanishes after two seconds. A toast that takes focus on
-appearance. Stacking more than three with no count. A form error shown as a
-toast. Colour-only status without the glyph and worded text.
+A toast that slides in. A rounded, shadowed pill. No Dismiss and gone in two
+seconds. Taking focus on appearance. More than three stacked with no count. A
+form error as a toast. Colour-only status without the glyph and worded text.
 
 ### Progress (`progress`)
 
@@ -6096,25 +5836,21 @@ A native progress element with a label and value; determinate fills with the pri
 
 #### Purpose
 
-Shows how far a known task has gone, or that an unbounded one is running.
-It reports; it never blocks. A task that can be cancelled has a button beside
-the bar. A short wait with no bar is the loading indicator.
+Shows how far a known task has gone, or that an unbounded one is running. It
+reports; it never blocks. A cancellable task has a button beside the bar. A
+short wait with no bar is the loading indicator.
 
 #### Anatomy
 
-The header row with the label in {color.text.bright} and the value in
-{color.text.default}; the bar, a native progress element whose track is
-{color.interaction.pressed.bg} behind a 1px {color.border.control} and whose
-fill is {color.action.primary.bg}; an optional detail line in
-{color.text.muted}.
+Parts as listed in the anatomy.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | fill {color.action.primary.bg} on the track; the value text | the native value; the percentage text |
-| busy | the whole track shows static 45° stripes of {color.action.primary.bg} on {color.interaction.pressed.bg}; no value text | `aria-busy`; `aria-valuetext`; the stripe pattern; no animation |
-| error | fill → {color.status.danger.fill}; the label gains the ✕ glyph in {color.status.danger.text}; the detail line says what failed | glyph; worded detail |
+| default | {color.action.primary.bg} fill on the track; the value text | the native value; the percentage text |
+| busy | static 45° stripes of {color.action.primary.bg} on {color.interaction.pressed.bg} across the track; no value text | `aria-busy`; `aria-valuetext`; the stripe pattern; no animation |
+| error | fill → {color.status.danger.fill}; the label gains ✕ in {color.status.danger.text}; the detail line says what failed | glyph; worded detail |
 | reduced-motion | identical to default and busy: nothing animates in any state | `prefers-reduced-motion` |
 
 Indeterminate work is the busy state; the determinate variant enters it while
@@ -6122,32 +5858,29 @@ the total is unknown and leaves it once known.
 
 #### Keyboard
 
-None. The progress element is not focusable and receives no key. A cancel
-button next to the bar is an ordinary button with its own tab stop.
+None; a cancel button beside the bar has its own tab stop.
 
 #### Accessibility
 
-The label is a real `<label for>` on the progress element, so its name is
-programmatic; the value is in the native `value` and repeated in text.
-Indeterminate bars set `aria-valuetext` ("Preparing"), and the container sets
-`aria-busy` for the duration. Completion and failure are announced through a
-polite live region, not by the bar. Contrast: label 10.37:1, value 8.65:1,
-detail 5.81:1, track boundary 4.45:1, error fill 3.36:1 against the track.
-The primary fill against the track measures 1.51:1 and is waived because the
-value is stated in text; a host that must meet 3:1 graphically raises the
-track to {color.surface.canvas}.
+The value is in the native `value` and repeated in text. Indeterminate bars
+set `aria-valuetext` ("Preparing"); the container sets `aria-busy` for the
+duration. Completion and failure are announced through a polite live region,
+not by the bar. Text meets 4.5:1; the track boundary and error fill 3:1. The
+primary fill against the track is waived because the value is stated in
+text; a host that must meet 3:1 graphically raises the track to
+{color.surface.canvas}.
 
 #### Portability
 
-A track, a fill and a hatched pattern. Toolkits with a native bar map the
-fill to the primary colour and disable pulse animation; toolkits without
-gradients draw the stripes with a hatched brush or alternating characters.
+A toolkit with a native bar maps the fill to the primary colour and disables
+pulse animation; one without gradients draws the stripes with a hatched brush
+or alternating characters.
 
 #### Non-examples
 
-A spinner. Animated or "barber-pole" stripes. A shimmering skeleton in place
-of a bar. A circular ring. A rounded pill-shaped bar. Colour-only failure
-without the glyph and text. A bar with no label. A bar that blocks input.
+A spinner. Animated or barber-pole stripes. A shimmering skeleton instead of
+a bar. A circular ring. A rounded pill bar. Colour-only failure without the
+glyph and text. A bar with no label. A bar that blocks input.
 
 ### Loading indicator (`loading-indicator`)
 
@@ -6162,56 +5895,49 @@ A static ⋯ glyph with a worded label inside an aria-busy container; inline nex
 
 #### Purpose
 
-Marks the moment between a request and its result when there is nothing to
-measure: a list that is being fetched, a field that is being validated. The
-theme has no spinner; the same static ⋯ glyph that a loading control shows
-appears here beside a worded label, and the container says it is busy.
+Marks the wait between a request and its result when there is nothing to
+measure: a list being fetched, a field being validated. There is no spinner;
+the static ⋯ a loading control shows appears here beside a worded label.
 
 #### Anatomy
 
-The busy container; the glyph in {color.text.muted}; the label in
-{color.text.default}. Inline, the two follow the text they qualify; as a
-block, they sit centred on {color.surface.default} inside a
-{color.border.divider} edge where the content will appear.
+Inline, glyph and label follow the text they qualify; as a block they sit
+centred, inside a {color.border.divider} edge, where the content will appear.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | the static ⋯ and the label | `aria-busy="true"`; the glyph; the worded label |
-| reduced-motion | identical: there is nothing to reduce | `prefers-reduced-motion` |
+| reduced-motion | identical: nothing to reduce | `prefers-reduced-motion` |
 
-The indicator has no hover, focus or disabled state; it is not a control.
+Not a control: no hover, focus or disabled state.
 
 #### Keyboard
 
-None. The indicator is never focusable. When loading replaces content that
-had focus, focus moves to the container's heading or to the indicator's
-parent region, never to the indicator itself, and returns to the result when
-it arrives.
+Never focusable. When loading replaces content that had focus, focus moves to
+the container's heading or parent region, never the indicator, and returns to
+the result when it arrives.
 
 #### Accessibility
 
-The container is `role="status"` with `aria-busy="true"` while loading, so
-assistive technology can wait for the subtree to settle and announce the
-label once. The glyph is `aria-hidden`; the label is a real sentence with the
-object named ("Loading fonts") and is visible in both variants; a host that
-must hide it inline keeps it visually hidden, never absent. Because nothing moves, there is no
-`prefers-reduced-motion` branch to get wrong. Contrast: label 8.65:1 on the
-canvas and 8.43:1 on the panel surface; glyph 5.81:1 and 5.66:1.
+`aria-busy` lets assistive technology wait for the subtree to settle and
+announce the label once. The label names the object ("Loading fonts"); a host
+that must hide it inline keeps it visually hidden, never absent. Nothing
+moves, so there is no reduced-motion branch to get wrong. Label and glyph meet
+4.5:1.
 
 #### Portability
 
-Text only. Toolkits with a spinner widget do not use it; the glyph and label
-are a plain label. Hosts that insist on an activity indicator record the
-deviation and keep it under the 150 ms motion budget with a reduced-motion
-branch.
+Text only; a toolkit's spinner widget is not used. A host that insists on an
+activity indicator records the deviation and keeps it within the 150 ms
+motion budget with a reduced-motion branch.
 
 #### Non-examples
 
-A spinner or rotating ring. Animated dots. A shimmering skeleton. A full-page
-overlay that blocks input for a fetch. A glyph with no label. An indicator
-that takes focus. A dimmed container at reduced opacity.
+A spinner or rotating ring. Animated dots. A shimmering skeleton. A
+full-page overlay blocking input for a fetch. A glyph with no label. An
+indicator that takes focus. A dimmed, reduced-opacity container.
 
 ### Tooltip (`tooltip`)
 
@@ -6231,62 +5957,52 @@ A short description of a control shown on hover and focus; role tooltip linked b
 
 #### Purpose
 
-A few words that explain a control without being its name: what an icon
-button does, which shortcut opens it, why it is disabled. It is a description
-only. Anything a person must read to use the control belongs in the control
-or its label, and anything interactive is a popover.
+Describes a control without being its name: what an icon button does, its
+shortcut, why it is disabled. Anything needed to use the control belongs in
+the control or its label; anything interactive is a popover.
 
 #### Anatomy
 
-The trigger and the popup. The popup is {color.surface.raised} behind a 1px
-{color.border.overlay}, text in {color.text.default}, optional shortcut in a
-`kbd` with {color.text.bright} inside a 1px {color.border.control}; no arrow,
-no shadow, no radius. The demonstration renders it in flow below the trigger.
+Parts as listed in the anatomy; no arrow, shadow or radius.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | trigger at rest; the popup shown for the demonstration | `aria-describedby` on the trigger |
-| hover | trigger background → {color.action.tertiary.hover-bg}; the popup appears after 300 ms | cursor: pointer; the popup itself |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the trigger; the popup appears at once | the ring; the popup |
-| open | the popup visible, 1px {color.border.overlay} on {color.surface.raised} | the popup is present in the accessibility tree |
-| closed | the popup absent; the trigger unchanged | `hidden`; the description is still read from the DOM |
+| default | trigger at rest; popup shown for the demonstration | `aria-describedby` on the trigger |
+| hover | trigger background → {color.action.tertiary.hover-bg}; popup after 300 ms | cursor: pointer; the popup |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the trigger; popup at once | the ring; the popup |
+| open | popup visible, 1px {color.border.overlay} on {color.surface.raised} | popup in the accessibility tree |
+| closed | popup absent; trigger unchanged | `hidden`; the description is still read from the DOM |
 
-The popup itself has no hover, pressed or focus state: it is not
-interactive.
+The popup has no hover, pressed or focus state; it is not interactive.
 
 #### Keyboard
 
-Focus on the trigger shows the tooltip without delay; moving focus away
-hides it. Escape hides it and does nothing else, so a dialog behind the
-trigger does not close. The popup never receives focus and contains no
-focusable element.
+As in the key table. Escape does nothing else, so a dialog behind the
+trigger stays open. The popup never receives focus and contains nothing
+focusable.
 
 #### Accessibility
 
-The trigger points at the popup with `aria-describedby`, so the description
-is available whether or not the popup is shown; the popup is `role="tooltip"`.
-It opens on hover and on focus, stays open while the pointer is over the
-trigger or the popup (WCAG 1.4.13: hoverable, dismissible, persistent), and
-closes on Escape. The trigger has its own accessible name; the tooltip never
-supplies it. Touch has no hover: the description is available through a
-long-press or is shown inline. Contrast: text 8.43:1 on the raised surface,
-shortcut 10.10:1, border 4.57:1.
+The popup stays open while the pointer is over the trigger or the popup
+(WCAG 1.4.13: hoverable, dismissible, persistent). The trigger has its own
+accessible name; the tooltip never supplies it. Touch has no hover: offer the
+description by long-press or inline. Text meets 4.5:1; the popup border and
+the shortcut border 3:1.
 
 #### Portability
 
-A box with a border and text; placement is the host's positioning primitive.
-Toolkits with a native tooltip use it with the tokens for border and
-background and record any radius they cannot remove.
+A bordered box of text; placement is the host's positioning primitive. A
+toolkit with a native tooltip uses it with the border and background tokens
+and records any radius it cannot remove.
 
 #### Non-examples
 
-A rounded bubble with an arrow. A tooltip with a shadow or a fade longer
-than 150 ms. A tooltip as the only accessible name of an icon button. A
-tooltip with a link or a button inside. One that opens on focus but not on
-hover, or on hover with no delay. A title attribute. A tooltip that follows
-the pointer.
+A rounded bubble with an arrow. A shadow, or a fade longer than 150 ms. The
+tooltip as an icon button's only accessible name. A link or button inside.
+Opening on focus but not hover, or on hover with no delay. A `title`
+attribute. Following the pointer.
 
 ### Dialog (`dialog`)
 
@@ -6320,21 +6036,16 @@ A native dialog on the overlay surface behind a 1px overlay border and the backd
 
 #### Purpose
 
-A question or a small task that must be answered before the page continues:
-confirm a destructive action, name a new profile, sign in again. It takes
-the whole screen's attention, so it is short, has a clear title, and always
-offers a way out. The demonstration renders the dialog open in flow, with a
-wrapper standing in for the backdrop; a host always uses `showModal()`.
+A question or small task the page cannot continue without: confirm a
+destructive action, name a new profile, sign in again. It takes the whole
+screen's attention, so it is short, clearly titled and always offers a way
+out.
 
 #### Anatomy
 
-The backdrop, {color.surface.backdrop} over the page; the dialog on
-{color.surface.overlay} behind a 1px {color.border.overlay}; the header with
-the title in {color.text.bright} and Close; the body in {color.text.default};
-the actions row. Confirmation semantics do not prescribe action tone (D-015):
-ordinary confirmations use primary. A destructive confirmation uses the filled destructive button,
-{color.action.destructive.filled-bg} with {color.action.destructive.filled-text};
-the form dialog holds a labelled text field on {color.surface.input}.
+Confirmations take no fixed tone (D-015): an ordinary one uses primary, a
+destructive one the filled destructive button. The form variant holds a
+labelled text field on {color.surface.input}.
 
 #### States
 
@@ -6342,50 +6053,42 @@ the form dialog holds a labelled text field on {color.surface.input}.
 | --- | --- | --- |
 | default | the dialog open on its backdrop | `open`; the page behind is inert |
 | open | as default; opacity 0 → 1 within 150 ms on capable hosts | `open`; focus inside the dialog |
-| closed | nothing: the dialog and its backdrop are absent | no `open`; focus back on the opener |
-| focus-trapped | the dialog itself carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles | Tab never leaves; the note text |
-| hover | Close background → {color.action.tertiary.hover-bg}; other buttons take their tone's hover | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive uses {color.action.destructive.filled-text} (D-015) | the ring |
-| reduced-motion | no opacity transition; the dialog is simply present or absent | `prefers-reduced-motion` |
+| closed | dialog and backdrop absent | no `open`; focus back on the opener |
+| focus-trapped | when it holds focus, the dialog carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px; the note says Tab cycles | Tab never leaves; the note text |
+| hover | Close → {color.action.tertiary.hover-bg}; other buttons take their tone's hover | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive {color.action.destructive.filled-text} (D-015) | the ring |
+| reduced-motion | no opacity transition; present or absent | `prefers-reduced-motion` |
 
 A dialog is never disabled; a busy dialog disables its confirm button and
 shows the ⋯ glyph on it.
 
 #### Keyboard
 
-Tab and Shift+Tab cycle inside the dialog; nothing behind it is reachable.
-Escape closes and cancels, and focus returns to the opener. Enter submits a
-form dialog; elsewhere it only activates the focused button, so a
-destructive confirm is never triggered by Enter on the dialog itself. On
-open, focus goes to the first focusable element, or to the dialog when the
-first element is destructive; on close, back to the opener.
+As in the key table. Enter on the dialog itself never triggers a destructive
+confirm. On open, focus goes to the first focusable element, or to the
+dialog when that element is destructive.
 
 #### Accessibility
 
-The dialog is named by its title through `aria-labelledby` and described by
-its first paragraph through `aria-describedby`. Confirmations use
-`role="alertdialog"`. `showModal()` makes the rest of the page inert and
-supplies the top layer; the theme never re-implements the trap on a
-non-modal dialog. The backdrop is decorative and not a click target for
-cancel unless Close is also present. Contrast: text 7.92:1 and title 9.49:1
-on the overlay surface, the overlay border 4.30:1, secondary buttons 6.84:1
-on hover, destructive confirm text 4.58:1 on its fill, the container ring
-9.49:1.
+Title and first paragraph link through `aria-labelledby` and
+`aria-describedby`. The theme never re-implements the trap
+on a non-modal dialog. The backdrop is decorative and cancels on click only
+when Close is also present. Text meets 4.5:1; the overlay border and rings
+3:1.
 
 #### Portability
 
-A box, a border, a dimmed backdrop and the button tones. Toolkits with a
-native modal window use it with the overlay border on the frame and record
-that the backdrop is the host's. Toolkits without a top layer draw the
-backdrop as a full-window overlay under the dialog.
+A toolkit with a native modal window uses it with the overlay border on the
+frame and records that the backdrop is the host's; one without a top layer
+draws the backdrop as a full-window overlay under the dialog.
 
 #### Non-examples
 
-A glowing or shadowed card. Rounded corners. A dialog that slides or scales
-in. `<dialog>` shown with `show()` and a hand-written focus trap. A dialog
-with no title, or with the title only in the accessible name. A destructive
-confirm as the default Enter action. A backdrop that closes the dialog with
-no Close button. A dialog stacked on a dialog.
+A glowing or shadowed card. Rounded corners. Sliding or scaling in.
+`<dialog>` shown with `show()` and a hand-written trap. No title, or the
+title only in the accessible name. A destructive confirm as the default
+Enter action. A backdrop that closes the dialog with no Close button. A
+dialog stacked on a dialog.
 
 ### Drawer (`drawer`)
 
@@ -6411,20 +6114,13 @@ A full-height modal panel anchored to the start or end edge; a native dialog on
 
 #### Purpose
 
-A panel that opens from the side to hold navigation or a task on narrow
-screens, or a secondary form on wide ones. It is a modal dialog with a
-different shape: full height, anchored to the start or end edge, with a
-single visible border on the edge that faces the page. Below 900px the
-sidebar collapses into a drawer; above it, a drawer holds tasks that need
-more room than a dialog.
+A modal dialog shaped as a full-height side panel, for navigation or a task.
+Below 900px the sidebar collapses into a drawer; above it, a drawer holds
+tasks that need more room than a dialog.
 
 #### Anatomy
 
-The backdrop, {color.surface.backdrop} over the page; the panel on
-{color.surface.overlay} with a 1px {color.border.overlay} on its inner edge;
-the header with the title in {color.text.bright} and Close; the body, rows
-divided by {color.border.divider}. The demonstration renders the panel inside
-a stage of fixed height standing in for the viewport.
+Parts as listed in the anatomy; the overlay border is the only visible edge.
 
 #### States
 
@@ -6432,44 +6128,38 @@ a stage of fixed height standing in for the viewport.
 | --- | --- | --- |
 | default | the panel open at its edge on the backdrop | `open`; the page behind is inert |
 | open | as default; opacity 0 → 1 within 150 ms on capable hosts; never a slide | `open`; focus inside the panel |
-| closed | nothing: the panel and the backdrop are absent | no `open`; focus back on the opener |
-| focus-trapped | the panel carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles | Tab never leaves; the note text |
-| reduced-motion | no opacity transition; the panel is simply present or absent | `prefers-reduced-motion` |
+| closed | panel and backdrop absent | no `open`; focus back on the opener |
+| focus-trapped | while it holds focus, the panel carries the 2px solid {color.interaction.focus.ring-container} ring at −3px; the note says Tab cycles | Tab never leaves; the note text |
+| reduced-motion | no opacity transition; present or absent | `prefers-reduced-motion` |
 
-Items inside the drawer take the states of the list or navigation they
-belong to; Close takes the tertiary button's hover and ring.
+Items take the states of their list or navigation; Close takes the tertiary
+button's hover and ring.
 
 #### Keyboard
 
-Tab and Shift+Tab cycle inside the panel; the page behind is inert. Escape
-closes and returns focus to the opener. Enter or Space on a navigation item
-navigates and closes. On open, focus goes to the first focusable element,
-which is the first item or Close.
+As in the key table. On open, focus goes to the first focusable element, the
+first item or Close.
 
 #### Accessibility
 
-The panel is named by its title through `aria-labelledby`. `showModal()`
-supplies the top layer and inertness; the theme never re-implements the trap
-on a non-modal element or on a plain aside. The backdrop is decorative; a
-click on it may close the drawer only because Close is also present. Both
-edges use logical properties, so the panel and its border mirror in RTL with
-no extra rules. Contrast: text 7.92:1 and title 9.49:1 on the overlay
-surface, the border 4.30:1, the ring 4.30:1, hovered items 11.41:1 on the
-strong hover fill.
+Named by its title through `aria-labelledby`. Never re-implement the trap on
+a non-modal element or a plain aside. The backdrop is decorative; a click on
+it may close the drawer only because Close is also present. Logical
+properties mirror the panel and its border in RTL. Text meets 4.5:1; the
+border and ring 3:1.
 
 #### Portability
 
-A full-height box with one border and a dimmed backdrop. Toolkits without a
-top layer draw the backdrop as a full-window overlay under the panel;
-toolkits with a native sidebar keep it non-modal and record that it is a
-sidebar, not a drawer.
+Toolkits without a top layer draw the backdrop as a full-window overlay under
+the panel; toolkits with a native sidebar keep it non-modal and record that it
+is a sidebar, not a drawer.
 
 #### Non-examples
 
-A panel that slides in from the edge. A drawer with a shadow or a rounded
-inner corner. A drawer that is a plain aside with a hand-written focus trap.
-A bottom sheet with a drag handle. A drawer with no Close button. A drawer
-that stays open under a dialog. A translucent panel over page content.
+A panel that slides in. A shadow or a rounded inner corner. A plain aside
+with a hand-written focus trap. A bottom sheet with a drag handle. No Close
+button. A drawer that stays open under a dialog. A translucent panel over page
+content.
 
 ### Empty state (`empty-state`)
 
@@ -6489,18 +6179,13 @@ What a container shows when it has nothing to list; a glyph, a heading in the br
 
 #### Purpose
 
-A region with nothing in it says so, and says what would fill it. It
-replaces a blank pane, an empty table body or a list with no rows after a
-filter, and it offers the one action that changes that when there is one.
-A failure is the error state; a wait is the loading indicator.
+Replaces a blank pane, an empty table body or a filtered-out list: it says
+what is empty and offers the one action that changes it, when there is one. A
+failure is the error state; a wait is the loading indicator.
 
 #### Anatomy
 
-The block on {color.surface.default} inside a 1px {color.border.divider},
-content centred; the glyph in {color.icon.decorative}; the heading in
-{color.text.bright}; the sentence in {color.text.muted}; the optional
-secondary action in {color.action.secondary.text} with a 1px
-{color.action.secondary.border}.
+Parts as listed in the anatomy.
 
 #### States
 
@@ -6508,37 +6193,33 @@ secondary action in {color.action.secondary.text} with a 1px
 | --- | --- | --- |
 | default | glyph, heading and sentence centred; the action, when present, below them | the worded heading; the action is a real button |
 
-The block has no states of its own; the action takes the secondary
-button's hover and ring.
+No states of its own; the action takes the secondary button's hover and ring.
 
 #### Keyboard
 
-Only the action is in the tab order. When a filter empties a list that had
-focus inside it, focus moves to the heading of the region, not into the
-empty state, so the person hears where they are.
+As in the key table. When a filter empties a list that had focus inside it,
+focus moves to the region's heading, not into the empty state, so the person
+hears where they are.
 
 #### Accessibility
 
-The heading is a real heading at the level the region uses, so the empty
-state appears in the outline; the sentence follows it in the reading order.
-The glyph is `aria-hidden`. When content becomes empty after an action
-(filter, delete), a polite live region announces the heading text. The
-action is never the only route: filters can also be cleared where they were
-set. Contrast: heading 10.10:1, sentence 5.66:1, action text 10.10:1 and its
-border 4.33:1 on the panel surface.
+The heading is a real heading at the region's level, so the empty state
+appears in the outline; the sentence follows it in reading order. When
+content becomes empty after an action (filter, delete), a polite live region
+announces the heading text. The action is never the only route: filters can
+also be cleared where they were set. Text meets 4.5:1; the action border 3:1.
 
 #### Portability
 
-Text and one optional button. Toolkits with a status page use it with the
-glyph as text; toolkits with only a placeholder string add the action as a
-separate button below the view.
+A toolkit with only a placeholder string adds the action as a separate button
+below the view.
 
 #### Non-examples
 
-An illustration or mascot. A primary (filled) call to action. A blank pane.
-A greyed-out table header with no message. A message that only says "No
-data". A heading in the accent red. An empty state that appears while
-loading. Centred text in a rounded card with a shadow.
+An illustration or mascot. A primary (filled) call to action. A blank pane. A
+greyed-out table header with no message. Only "No data". A heading in the
+accent red. An empty state shown while loading. Centred text in a rounded,
+shadowed card.
 
 ### Skeleton (`skeleton`)
 
@@ -6556,43 +6237,47 @@ Static layout placeholders with a named loading status. Family: feedback. Priori
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-color-border-divider | `color.border.divider` | `#2b0e0d` | use-and-report (D-008) |
 | dependency.role-color-surface-raised | `color.surface.raised` | `#160b0b` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
 | dependency.role-space-16 | `space.16` | `16px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 
 #### Purpose
 
-Reserve approximate layout space while a named region loads. Decorative blocks are hidden from accessibility APIs. A separate status describes loading. The skeleton is static and never shimmers.
+Reserves approximate layout space while a named region loads. Static; it
+never shimmers.
 
 #### Anatomy
 
-- **status:** Text names what is loading.
-- **blocks:** Decorative square placeholders retain approximate dimensions.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Static decorative blocks. | Named loading status. |
-| loading | Raised surface blocks; no opacity fade. | aria-busy on the region. |
-| reduced-motion | Same static presentation. | No information depends on movement. |
+| default | static decorative blocks | named loading status |
+| loading | raised-surface blocks; no opacity fade | `aria-busy` on the region |
+| reduced-motion | the same static presentation | no information depends on movement |
 
 #### Keyboard
 
-- **Tab:** No new tab stops or focus capture.
+Adds no tab stop and captures no focus.
 
 #### Accessibility
 
-Apply aria-busy to the region being updated and provide a concise status. Decorative blocks are aria-hidden. Do not remove the focused control merely to show a skeleton. Replacement content must keep a sensible reading order.
+`aria-busy` goes on the region being updated, with a concise status;
+blocks are `aria-hidden`. Never remove the focused control just to show a
+skeleton. Replacement content keeps a sensible reading order.
 
 #### Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 #### Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls. Colour-only status. Drag-only operations. Hidden
+required instructions. Stolen focus. An invented service success.
 
 ### Popover (`popover`)
 
@@ -6605,50 +6290,55 @@ A non-modal supporting panel with light dismissal and ordinary tab order. Family
 | root.border | `color.border.control` | `#a3676b` | use-and-report (D-007) |
 | heading.text | `color.text.bright` | `#ffa2a7` | use |
 | secondary.text | `color.text.muted` | `#bd787d` | use |
-| control.bg | `color.surface.input` | `#000000` | use |
+| control.bg | `color.action.secondary.bg` | `rgb(0 0 0 / 0%)` | use |
+| control.text | `color.action.secondary.text` | `#ffa2a7` | use |
+| control.border | `color.action.secondary.border` | `#a3676b` | use |
+| control.bg-hover | `color.action.secondary.hover-bg` | `#630f0d` | use |
+| control.bg-active | `color.action.secondary.pressed-bg` | `#420f0c` | use |
+| control.border-active | `color.border.active` | `#e53935` | use |
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-color-border-overlay | `color.border.overlay` | `#e53935` | use-and-report (D-008) |
 | dependency.role-color-surface-overlay | `color.surface.overlay` | `#241010` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
 | dependency.role-space-16 | `space.16` | `16px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Disclose a non-modal supporting panel near its trigger. Interactive content follows ordinary tab order. Escape and outside activation dismiss; focus is not trapped. Use the native Popover API when available with an equivalent documented fallback.
+Supporting content beside its trigger that never blocks the page.
 
 #### Anatomy
 
-- **trigger:** Native button with expanded state and panel relationship.
-- **panel:** Named supporting content and optional visible close action.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Named trigger. | Button semantics and accessible name. |
+| default | Named trigger. Its buttons are the secondary button (button.md). | Button semantics and accessible name. |
 | open | Square overlay surface and border. | aria-expanded=true; panel is reachable. |
 | closed | Panel hidden. | aria-expanded=false; hidden controls leave focus order. |
 | focus-visible | Dashed focus ring. | Native keyboard focus. |
 
 #### Keyboard
 
-- **Enter / Space:** Toggle from the trigger.
-- **Tab / Shift+Tab:** Move through ordinary controls without trapping focus.
-- **Escape:** Close and restore the trigger.
+As in the key table.
 
 #### Accessibility
 
-Keep essential instructions outside collapsed panels. Use a visible label or aria-label for the panel. Do not add aria-modal or a focus trap. Native automatic dismissal and the fallback both synchronize expanded state.
+Keep essential instructions outside collapsed panels. Name the panel with a
+visible label or `aria-label`. No `aria-modal` and no focus trap. Native
+automatic dismissal and the fallback both synchronise the expanded state.
 
 #### Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 #### Non-examples
 
@@ -6665,7 +6355,12 @@ A specific failure explanation with an explicit recovery request. Family: feedba
 | root.border | `color.border.control` | `#a3676b` | use-and-report (D-007) |
 | heading.text | `color.text.bright` | `#ffa2a7` | use |
 | secondary.text | `color.text.muted` | `#bd787d` | use |
-| control.bg | `color.surface.input` | `#000000` | use |
+| control.bg | `color.action.secondary.bg` | `rgb(0 0 0 / 0%)` | use |
+| control.text | `color.action.secondary.text` | `#ffa2a7` | use |
+| control.border | `color.action.secondary.border` | `#a3676b` | use |
+| control.bg-hover | `color.action.secondary.hover-bg` | `#630f0d` | use |
+| control.bg-active | `color.action.secondary.pressed-bg` | `#420f0c` | use |
+| control.border-active | `color.border.active` | `#e53935` | use |
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-border-width-emphasis | `border.width.emphasis` | `2px` | use |
@@ -6676,25 +6371,25 @@ A specific failure explanation with an explicit recovery request. Family: feedba
 | dependency.role-color-text-disabled | `color.text.disabled` | `#8a5559` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Explain a failed operation and offer a bounded recovery action. Retrying emits a request; the component does not claim that a service recovered. The host updates content when the actual operation completes.
+Explains a failed operation and asks for an explicit recovery; it never
+claims the service recovered.
 
 #### Anatomy
 
-- **message:** Heading, explanation and text error glyph.
-- **recovery:** Native retry action, disabled while the host request is pending.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Danger border and text heading. | Specific written explanation and error glyph. |
+| default | Danger border and text heading. Its buttons are the secondary button (button.md). | Specific written explanation and error glyph. |
 | error | Same explicit failure treatment. | Failure text remains available. |
 | loading | Busy status accompanies the existing explanation. | aria-busy and host-provided pending text. |
 | disabled | Disabled roles at full opacity. | Native retry button is disabled. |
@@ -6702,12 +6397,13 @@ Explain a failed operation and offer a bounded recovery action. Retrying emits a
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Reach the recovery action.
-- **Enter / Space:** Request a retry without moving focus.
+As in the key table.
 
 #### Accessibility
 
-Do not rely only on color or a glyph. Give the retry action a specific name. Announce a newly occurring error in an appropriate host status region, without repeatedly interrupting reading. Keep focus unless recovery requires an explicit next step.
+Never rely on colour or the glyph alone. Give the retry action a specific
+name. Announce a new error in a host status region without repeatedly
+interrupting reading. Keep focus unless recovery needs an explicit next step.
 
 #### Portability
 
@@ -6715,7 +6411,8 @@ Follows the shared component defaults in `spec/portability.md` (section "Shared
 
 #### Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls, colour-only status, drag-only operations, hidden required
+instructions, stolen focus or an invented service success.
 
 ## Developer interfaces
 
@@ -6765,95 +6462,74 @@ The editor surface, gutter, caret, current line, selection, bracket match and mo
 
 #### Purpose
 
-The reference rendering of source code: the surface, gutter, caret, current
-line, selection, bracket match, indent guides, rendered whitespace, fold
-markers and the seventeen monochrome syntax roles. It is the contract a
-real editor's theme API is mapped onto; this component never edits.
+The reference rendering of source code: the contract a real editor's theme
+API is mapped onto. It never edits.
 
 #### Anatomy
 
-Root `.code-editor`; parts `.code-editor-<part>`: `-pre` (the `<pre>`),
-`-line`, `-ln` (line number), `-text`, `-indent`, `-ws` (rendered
-whitespace), `-caret`, `-sel` (selection range), `-bracket`, `-fold`, and
-the gutter fold glyph `-fold-gutter`. Syntax spans are `.code-editor-<role>`:
-`-kw` keyword, `-str` string, `-cm` comment, `-num` number, `-const`
-constant, `-fn` function, `-var` variable, `-type` type, `-op` operator,
-`-punct` punctuation, `-prop` property, `-heading` heading, `-tag` tag,
-`-attr` attribute, `-esc` escape, `-invalid` invalid, `-deprecated`
-deprecated. Line numbers are {color.code.line-number} on
-{color.code.gutter-bg}, separated from the text by a 1px
-{color.code.gutter-rule}; indent guides are 1px {color.code.indent-guide};
-rendered whitespace is {color.code.whitespace}. Every colour is a role
-variable, so the profile switch on the specimen recolours the sample without
-touching the markup.
+Root `.code-editor`; parts `.code-editor-<part>`: `-pre`, `-line`, `-ln`
+(line number), `-text`, `-indent`, `-ws` (rendered whitespace), `-caret`,
+`-sel` (selection range), `-bracket`, `-fold`, `-fold-gutter`. Syntax spans
+are `.code-editor-<role>`: `-kw` keyword, `-str` string, `-cm` comment,
+`-num` number, `-const` constant, `-fn` function, `-var` variable, `-type`,
+`-op` operator, `-punct` punctuation, `-prop` property, `-heading`, `-tag`,
+`-attr` attribute, `-esc` escape, `-invalid`, `-deprecated`.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | code on {color.code.bg}; comments italic; invalid text wavy-underlined in {color.code.syntax.invalid}; deprecated text struck through | italic, wavy underline, line-through |
-| focus-visible | container ring 2px {color.interaction.focus.ring-container} at −3px; a 1px {color.code.caret} bar; the caret line filled {color.code.current-line} across gutter and text; its number in {color.code.line-number-active} | the ring; the caret bar |
-| selected | the range filled {color.code.selection-bg}; syntax colours kept | the range is announced through the host's selection; the fill spans line ends |
-| selected+container-inactive | the same range in {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no caret, no ring | lightness drop between the two fills |
-| current | both characters of the matched pair outlined 1px solid {color.code.bracket-match} | the outline is a box, not a colour change |
-| read-only | gutter drops to {color.surface.sunken} behind the same line numbers; the gutter rule becomes dotted; no caret is drawn | `aria-readonly`; dotted rule; missing caret |
+| focus-visible | 2px {color.interaction.focus.ring-container} ring at −3px; 1px {color.code.caret} bar; caret line filled {color.code.current-line} across gutter and text, its number {color.code.line-number-active} | the ring; the caret bar |
+| selected | range filled {color.code.selection-bg}; syntax colours kept | the host's selection is announced; the fill spans line ends |
+| selected+container-inactive | same range in {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no caret, no ring | lightness drop between the two fills |
+| current | both characters of the matched pair outlined 1px solid {color.code.bracket-match} | an outline box, not a colour change |
+| read-only | gutter on {color.surface.sunken}, same line numbers; dotted gutter rule; no caret | `aria-readonly`; dotted rule; no caret |
 
-Precedence: selection is drawn under the text, the current line under the
-selection, the bracket outline and the caret above everything. The caret
-never blinks in the reference; a host that blinks it keeps the user's
-cursor-blink setting and stops under reduced motion.
+Precedence: selection under the text, current line under the selection,
+bracket outline and caret above everything. The caret never blinks in the
+reference; a host that blinks it follows the user's cursor-blink setting and
+stops under reduced motion.
 
 #### Keyboard
 
-The host editor owns every binding. The theme states only what it draws in
-response: the caret and current line while focused, the selection fill for
-the host's selection, the outline for the host's bracket match. The reference
-markup is one Tab stop and, being read-only, consumes no key. A host that
-captures Tab for indentation must offer an escape route (Escape, then Tab) and
-announce it; the theme does not provide one.
+As in the key table. The theme only draws what the host's keys produce; the
+read-only reference consumes no key. A host that captures Tab offers Escape,
+then Tab, and announces it.
 
 #### Accessibility
 
-Syntax colour is decoration: no meaning is carried by colour alone. Invalid
-text has the wavy underline, deprecated text the line-through, comments the
-italic. Selection is a fill and focus is a ring, drawn together and never
-substituted for one another. Every syntax role reaches 4.5:1 on
-{color.code.bg} (the lowest is {color.code.syntax.comment} at 5.10:1) and
-{color.text.default} reaches 7.02:1 inside the selection fill. D-029 lifted
-the keyword, tag, property and heading reds so they stay at 4.5:1 or more
-inside {color.code.selection-bg} (4.51–4.52:1); comment and type text still
-drop below it there (4.13 and 4.24:1). That is a recorded limitation of the
-selection value and is not to be fixed by recolouring the tokens locally. The reference editor
-stays monochrome; a host that wants hue differentiation maps the opt-in
-{color.code.hued.string}, {color.code.hued.number}, {color.code.hued.type} and
-the other `code.hued.*` roles (D-030), which reach 5.74:1 or more inside the
-selection. Line
-numbers are metadata people read and use {color.text.subtle}, not a graphic
-colour; indent guides, rendered whitespace and the gutter rule are decorative.
-In forced-colours mode the caret, selection and bracket outline take the
-system `Highlight`, and the syntax spans keep their text styles.
+Syntax colour is decoration; meaning never rides on colour alone (italic
+comments, wavy-underlined invalid text, struck-through deprecated text).
+Selection is a fill and focus a ring, drawn together, never substituting for
+each other. Every syntax role meets 4.5:1 on {color.code.bg}. Inside
+{color.code.selection-bg}, D-029 keeps keyword, tag, property and heading at
+4.5:1; comment and type text fall below it, a recorded limitation of the
+selection value, never fixed by recolouring tokens locally. The reference
+stays monochrome; a host that wants hue maps {color.code.hued.string} and the
+other opt-in `code.hued.*` roles (D-030), which meet 4.5:1 inside the
+selection. Line numbers are text people read and meet the text floor; indent
+guides, rendered whitespace and the gutter rule are decorative. In forced
+colours the caret, selection and bracket outline take `Highlight`; syntax
+spans keep their text styles.
 
 #### Portability
 
-A real editor is a host surface: CodeMirror, Monaco, GtkSourceView,
-KSyntaxHighlighting, an `.icls` scheme or a terminal editor each expose a
-theme API, and the port maps the roles here onto that API without touching
-caret behaviour, keyboard handling or selection semantics. Where a host has no
-bracket-match outline it may use the bold weight and records the deviation;
-where a host cannot draw a 1px caret it uses its own caret in
-{color.code.caret}. The `heritage-ansi` and `extended` profiles change only
-role values; the mapping does not change.
+The port maps these roles onto the host's theme API without touching caret
+behaviour, keyboard handling or selection semantics. No bracket-match
+outline: bold weight, deviation recorded. No 1px caret: the host's own caret
+in {color.code.caret}. The `heritage-ansi` and `extended` profiles change
+role values only, never the mapping.
 
 #### Non-examples
 
-Rainbow syntax in the reference editor, or any hue outside the three bounded
-ones (the opt-in `code.hued.*` roles of D-030 carry them for hosts that want
-hue differentiation). A blinking or animated caret in the reference.
-A selection that recolours the text to white and loses the syntax roles. A
-current-line highlight brighter than the selection. A bracket match drawn as
-a background fill, which reads as a selection. Line numbers in the decorative
-`#7d1310`. A glow, gradient or rounded corner on the editor box. Removing the
-host's focus indicator without drawing the container ring.
+Rainbow syntax in the reference, or any hue beyond the three bounded ones
+(hosts opt into `code.hued.*`, D-030). A blinking or animated caret in the
+reference. A selection that turns text white and drops the syntax roles. A
+current line brighter than the selection. A bracket match as a background
+fill, which reads as a selection. Line numbers in a decorative colour. A glow,
+gradient or rounded corner on the box. Removing the host's focus indicator
+without drawing the container ring.
 
 ### Diagnostics (`diagnostics`)
 
@@ -6888,7 +6564,7 @@ Inline problem markers in code (underline patterns, an error line and an overvie
 | row.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | row.bg-selected | `color.interaction.selection.bg` | `#531310` | use |
 | row.text-selected | `color.interaction.selection.text` | `#f4eeee` | use |
-| row.ring-selected | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| row.ring-selected | `color.interaction.focus.ring` | `#e53935` | use |
 | header.text | `color.text.bright` | `#ffa2a7` | use |
 | status.text | `color.status.danger.text` | `#f73f35` | use |
 | empty.text | `color.text.muted` | `#bd787d` | use |
@@ -6896,20 +6572,19 @@ Inline problem markers in code (underline patterns, an error line and an overvie
 
 #### Purpose
 
-How problems appear on code and in the list that indexes them. Six kinds are
-distinguished by pattern and glyph as well as colour: error, warning, info,
-hint, unused and deprecated. The panel is the keyboard route to every marker.
+How problems appear on code and in the list that indexes them. Six kinds,
+each told apart by pattern and glyph as well as colour. The panel is the
+keyboard route to every marker.
 
 #### Anatomy
 
-Root `.diagnostics` with the variant class `.diagnostics-inline` or
-`.diagnostics-panel`. Inline parts: `.diagnostics-code` (the `<pre>`),
-`-line`, `-ln`, `-text`, `-mark` (the stripe cell), and the ranges
-`.diagnostics-error`, `-warning`, `-info`, `-hint`, `-unused`, `-deprecated`;
-`.diagnostics-line-error` marks the row filled {color.diagnostic.error.bg};
-`.diagnostics-target` is the range that belongs to the selected row. Panel
-parts: `-header`, `-title`, `-count`, `-status`, `-list`, `-row`, `-glyph`
-(with `-glyph-error` and so on), `-message`, `-loc`, `-rule`, `-empty`.
+Root `.diagnostics` with `.diagnostics-inline` or `.diagnostics-panel`.
+Inline: `.diagnostics-code` (the `<pre>`), `-line`, `-ln`, `-text`, `-mark`
+(the stripe cell) and the ranges `.diagnostics-error`, `-warning`, `-info`,
+`-hint`, `-unused`, `-deprecated`; `.diagnostics-line-error` is the filled
+row; `.diagnostics-target` is the range of the selected row. Panel:
+`-header`, `-title`, `-count`, `-status`, `-list`, `-row`, `-glyph` (with
+`-glyph-error` and so on), `-message`, `-loc`, `-rule`, `-empty`.
 Patterns: error and warning wavy, info and hint dotted, unused dotted in
 {color.diagnostic.unused.text}, deprecated line-through in
 {color.code.syntax.deprecated}. Glyphs: `✕` error in
@@ -6922,57 +6597,46 @@ The stripe mark repeats the glyph in the stripe colour
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | ranges decorated as above on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default} with 1px {color.border.divider} between them | underline pattern; glyph |
-| hover | panel row background → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface) | cursor: default on rows |
-| focus-visible | the active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: the container ring 2px {color.interaction.focus.ring-container} at −3px | the ring |
+| default | ranges decorated on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default}, 1px {color.border.divider} between | underline pattern; glyph |
+| hover | panel row → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface) | cursor: default on rows |
+| focus-visible | active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: 2px {color.interaction.focus.ring-container} at −3px | the ring |
 | selected | row filled {color.interaction.selection.bg}, text and glyph {color.interaction.selection.text}; the matching inline range filled {color.code.selection-bg} under its underline | `aria-selected`; the glyph stays; the fill spans the row |
-| selected+focus-visible | the selection fill and a 1px dashed ring in {color.interaction.focus.ring-container} | both at once |
-| error | the provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the inline stripe shows the same `✕` at its top | glyph; live announcement |
-| empty | no problems: rows and stripe marks hidden; `✓ No problems` in {color.text.muted} with the glyph in {color.status.success.text}; inline decorations removed | glyph; the absence of decoration |
+| selected+focus-visible | the selection fill and 1px dashed {color.interaction.focus.ring} at −2px | both at once |
+| error | provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the stripe shows the same `✕` at its top | glyph; live announcement |
+| empty | rows, stripe marks and inline decorations removed; `✓ No problems` in {color.text.muted}, glyph in {color.status.success.text} | glyph; the absence of decoration |
 
 Precedence: selected > hover; focus-visible is drawn on top. A selected row
-recolours its glyph to the on-selection text so the shape, not the hue,
+recolours its glyph to the on-selection text, so the shape, not the hue,
 carries the severity.
 
 #### Keyboard
 
-The panel follows the APG listbox pattern with `aria-activedescendant`:
-the list is one Tab stop, Up and Down move the active row, Home and End jump,
-type-ahead matches message text, Enter opens the location. Selection follows
-focus. Inline markers add no keys; next-problem and previous-problem
-navigation and the hover card are host bindings and host surfaces.
+As in the key table; next and previous problem and the hover card belong to
+the host.
 
 #### Accessibility
 
-Never colour-only: every severity has its underline pattern in code and its
-glyph in the panel, and the glyph is part of the option's accessible name
-("Error: frmae is not defined, title.js line 6"). The error row background
-is an addition to the wavy underline, not a replacement. Contrast:
-{color.diagnostic.error.text} reaches 4.88:1 on the error row and 5.26:1 on
-the panel; every underline reaches 3:1 on its actual background including
-the selected range (the error underline measures 3.81:1 on the code
-selection fill); {color.diagnostic.unused.text} reaches 5.81:1
-so unused code is still readable. `aria-selected` and `aria-activedescendant`
-carry the state; the status line is `role=status`, announced once. In
-forced-colours mode the underline patterns persist because they are
-`text-decoration`, not backgrounds.
+Never colour-only: the underline pattern in code, the glyph in the panel, and
+the glyph is part of the option's accessible name ("Error: frmae is not
+defined, title.js line 6"). The error row fill adds to the wavy underline,
+never replaces it. Text, including unused code, meets 4.5:1; every underline
+meets 3:1 on its actual background, the selected range included. The status
+line is announced once. In forced-colours mode the patterns persist because
+they are `text-decoration`, not backgrounds.
 
 #### Portability
 
-Underline styles are native in Pango, Qt, JetBrains and most terminal
-emulators; where wavy is unavailable the port uses a plain underline plus the
-glyph and records the deviation. Hosts that draw their own overview ruler map
-the stripe colours; hosts without one omit the stripe and keep the glyphs.
-The listbox maps to any single-selection list widget.
+Where wavy is unavailable the port uses a plain underline plus the glyph and
+records the deviation. Hosts with their own overview ruler map the stripe
+colours; hosts without one omit the stripe and keep the glyphs.
 
 #### Non-examples
 
-Red-only errors without the `✕` glyph or the wavy pattern. A wavy underline
-for every severity, which leaves the pattern meaningless. Purple or cyan for
-info and hint. A hover on a panel row that changes only the text colour. A
-selected row whose glyph keeps its severity colour on the red fill (2.47:1).
-A panel row with a rounded highlight or a left accent bar instead of the fill.
-Removing the error line background to "calm" the editor.
+Red-only errors without `✕` or the wavy pattern. Wavy for every severity.
+Purple or cyan for info and hint. A row hover that changes only text colour.
+A selected row whose glyph keeps its severity colour on the fill. A rounded
+highlight or left accent bar instead of the row fill. Removing the error line
+fill to "calm" the editor.
 
 ### Diff view (`diff-view`)
 
@@ -7005,90 +6669,74 @@ Unified and split diffs as native tables; added, removed and modified rows keep
 | row.ring | `color.interaction.focus.ring` | `#e53935` | use |
 | row.bg-selected | `color.interaction.selection.bg` | `#531310` | use |
 | row.text-selected | `color.interaction.selection.text` | `#f4eeee` | use |
-| row.ring-selected | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| row.ring-selected | `color.interaction.focus.ring` | `#e53935` | use |
 
 #### Purpose
 
-How changed text is shown: line rows with a fill and a textual marker,
-word-level changes as underlines that leave text contrast untouched, hunk
-headers, collapsible unchanged regions, and merge conflicts in a double
-border. The `+`, `−` and `~` markers are content, present in every state and
-every profile.
+The `+`, `−` and `~` markers are content, present in every state and every
+profile; word-level underlines leave the text contrast untouched.
 
 #### Anatomy
 
-Root `.diff-view` (the table) with the variant class `.diff-view-unified`,
-`-split`, `-word-level` or `-conflict`. Row classes: `.diff-view-row`,
-`-row-context`, `-row-added`, `-row-removed`, `-row-modified`, `-row-hunk`,
-`-row-fold`, `-row-conflict` with `-row-conflict-start`, `-row-conflict-mid`
-and `-row-conflict-end` for the marker lines. Cells: `.diff-view-ln`,
-`-marker`, `-text`, `-fold-cell`, and `-range` for the `@@` span; the split
-variant adds `-side-old` and `-side-new` on cells and, on a `-row-pair`,
-`-cell-removed` and `-cell-added` per side (an empty `-cell-blank` faces an
-added line); the conflict variant adds `-row-ours` and `-row-theirs`. Word-level spans: `.diff-view-word-added` (2px underline in
-{color.diff.added.emphasis}) and `.diff-view-word-removed` (underline plus
-line-through in {color.diff.removed.emphasis}). The fold button is
-`.diff-view-fold` with an inline SVG chevron `.diff-view-chevron` and two
-labels, `-fold-collapsed` and `-fold-expanded`; the folded rows are a
-`<tbody class="diff-view-folded" hidden>`. Line numbers
-use {color.text.muted} rather than {color.code.line-number} because the
-modified fill would drop the subtle step to 4.45:1.
+Root `.diff-view` with `.diff-view-unified`, `-split`, `-word-level` or
+`-conflict`. Rows: `.diff-view-row`, `-row-context`, `-row-added`,
+`-row-removed`, `-row-modified`, `-row-hunk`, `-row-fold`, `-row-conflict`
+(marker lines `-row-conflict-start`, `-mid`, `-end`). Cells: `.diff-view-ln`,
+`-marker`, `-text`, `-fold-cell`, `-range` (the `@@` span). Split adds
+`-side-old` and `-side-new`, and on a `-row-pair` `-cell-removed` and
+`-cell-added` (an empty `-cell-blank` faces an added line); conflict adds
+`-row-ours` and `-row-theirs`. Word spans: `.diff-view-word-added` (2px
+underline in {color.diff.added.emphasis}) and `.diff-view-word-removed`
+(underline plus line-through in {color.diff.removed.emphasis}). Fold:
+`.diff-view-fold` with SVG chevron `.diff-view-chevron` and labels
+`-fold-collapsed` and `-fold-expanded`; folded rows are `<tbody
+class="diff-view-folded" hidden>`. Line numbers use {color.text.muted}, not
+{color.code.line-number}, which falls below 4.5:1 on the modified fill.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | added rows {color.diff.added.bg} with `+` in {color.diff.added.gutter}; removed {color.diff.removed.bg} with `−` in {color.diff.removed.gutter}; modified {color.diff.modified.bg} with `~` in {color.diff.modified.gutter}; hunk rows {color.diff.header-bg}; conflicts in a 3px double {color.diff.conflict-border} | the markers; the double border |
-| hover | the row's number and marker cells → {color.interaction.hover.bg}; the text cell keeps its fill | cursor: default; only on hover-capable pointers |
-| selected | the whole row filled {color.interaction.selection.bg} with {color.interaction.selection.text}; the marker stays | `aria-current` (or `:target` for a permalinked line); the marker glyph |
-| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px around the row; on a selected row the ring is {color.interaction.focus.ring-container} | the ring |
-| expanded | the folded `<tbody>` is shown; the chevron points down; the button reads "Hide 12 unchanged lines" | `aria-expanded="true"`; the rows appear |
-| collapsed | the folded `<tbody>` is hidden; the chevron points to the inline end; "… 12 unchanged lines" | `aria-expanded="false"`; the ellipsis |
+| default | added {color.diff.added.bg}, `+` in {color.diff.added.gutter}; removed {color.diff.removed.bg}, `−` in {color.diff.removed.gutter}; modified {color.diff.modified.bg}, `~` in {color.diff.modified.gutter}; hunks {color.diff.header-bg}; conflicts in a 3px double {color.diff.conflict-border} | the markers; the double border |
+| hover | number and marker cells → {color.interaction.hover.bg}; the text cell keeps its fill | cursor: default; hover-capable pointers only |
+| selected | whole row {color.interaction.selection.bg} with {color.interaction.selection.text}; the marker stays | `aria-current` (or `:target` for a permalinked line); the marker glyph |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px around the row, including a selected row | the ring |
+| expanded | folded `<tbody>` shown; chevron down; "Hide 12 unchanged lines" | `aria-expanded="true"`; the rows appear |
+| collapsed | folded `<tbody>` hidden; chevron to the inline end; "… 12 unchanged lines" | `aria-expanded="false"`; the ellipsis |
 
 Precedence: selected > hover; focus-visible is always drawn. A selected row
-loses its diff fill but never its marker, which is why the marker is content.
+loses its diff fill, never its marker.
 
 #### Keyboard
 
-A plain table has no row focus. The official web distribution places it in a
-named, focusable scroll region so keyboard users can inspect wide lines without
-page overflow. The region uses the canonical container focus ring. Within the
-table, the fold buttons are the only stops and
-toggle with Enter or Space, the chevron turning within the motion budget.
-Hosts that expose the diff as a grid own row navigation and draw the ring on
-the focused row; the theme adds no binding of its own.
+A plain table has no row focus. The web distribution wraps it in a named,
+focusable scroll region with the container focus ring, so wide lines can be
+read without page overflow. The chevron turns within the motion budget.
 
 #### Accessibility
 
-The caption names both files. Every changed row carries its marker in a cell
-of its own, so a screen reader announces `+` or `−` before the line and a
-monochrome print keeps the distinction. Word-level changes use
-`text-decoration` (underline, or underline and line-through), never a fill,
-so the row text stays at 7.56:1 or better on every diff fill. The `−` marker
-measures 4.24:1 on the removed fill: it is bold, sits on its own fill and is
-a glyph, so it is held to the 3:1 graphics floor and recorded here. Folded
-hunks use `aria-expanded` and `aria-controls` on a real button; the hidden
-rows are `hidden`, not visually clipped, so they are not read while
-collapsed. Conflict markers are the literal `<<<<<<<`, `=======` and
-`>>>>>>>` lines in {color.text.bright} on {color.diff.header-bg}, inside the
-double border.
+Each marker sits in its own cell, so a screen reader announces `+` or `−`
+before the line and monochrome print keeps the distinction. Word-level
+changes use `text-decoration`, never a fill, so row text keeps 4.5:1 on
+every diff fill. The `−` marker is a bold glyph on its own fill and is held
+to the 3:1 graphics floor. Folded rows are `hidden`, not visually clipped,
+so they are not read while collapsed. Conflict markers are the literal
+`<<<<<<<`, `=======` and `>>>>>>>` lines.
 
 #### Portability
 
-A table with cell backgrounds, borders and text decoration is expressible in
-every toolkit. Hosts without double borders draw two 1px lines and record it;
-hosts without line-through keep the underline and the `−` marker. The three
-extension hues are confined to the `diff` group here and change with the
-profile; the markers do not.
+Cell backgrounds, borders and text decoration exist in every toolkit. Without
+double borders, draw two 1px lines and record it; without line-through, keep
+the underline and the `−` marker. The three extension hues are confined to
+the `diff` group and change with the profile; the markers do not.
 
 #### Non-examples
 
-Red and green fills with no `+`/`−` marker. Word-level changes drawn as a
-bright fill that pushes the text below 4.5:1. A removed line rendered in
-`text.disabled` or struck through as a whole. Collapsed hunks that are only
-visually clipped and still read out. Conflict blocks in purple. Hover that
-recolours the code text. Round-cornered hunk cards floating on the page. A
-selected row that drops the marker because "the colour says it".
+Red and green fills without `+`/`−`. Word-level changes as a bright fill
+that pushes text below 4.5:1. A removed line in `text.disabled` or struck
+through whole. Collapsed hunks only visually clipped and still read out.
+Purple conflict blocks. Hover that recolours the code text. Round-cornered
+hunk cards. A selected row that drops the marker.
 
 ### Terminal (`terminal`)
 
@@ -7133,100 +6781,78 @@ Terminal text with the readable heritage sixteen ANSI slots (D-029, D-032), the
 
 #### Purpose
 
-The reference for terminal text: the surface, the default foreground, the
-cursor, the selection, the six attributes and the sixteen slots the
-workstation froze in `Xresources`. The slots are the origin of the theme:
-the `heritage-ansi` profile carries them exactly, and the `default` profile
-carries the readable heritage sixteen (D-029), the same hues with the dim
-slots lifted so text in any slot reads, except slot 6, which is coral (D-032). What a program does with a slot is
-that program's choice; the theme makes every slot but the dim tier safe for
-text rather than steering programs to particular slots.
+The reference for terminal text. The sixteen slots, frozen in `Xresources`,
+are the theme's origin: `heritage-ansi` carries them exactly; `default`
+lifts the dim slots to readable values of the same hues (D-029) and makes
+slot 6 coral (D-032). Programs choose their slots; the theme makes every slot
+but the dim tier safe for text instead of steering them.
 
 #### Anatomy
 
-Root `.terminal` (the `<pre>`) with a variant class `.terminal-transcript`,
-`.terminal-ansi-grid` or `.terminal-attributes`. Parts `.terminal-<part>`:
-`-line`, `-prompt` with `-prompt-path`, `-prompt-branch` and `-prompt-arrow`,
-`-cursor`, `-sel`, `-label`, `-fail` (the `✕`), and the attributes `-bold`,
-`-dim`, `-italic`, `-underline`, `-inverse`, `-strike`. Slot classes are
-`.terminal-fg-0` … `.terminal-fg-15` and `.terminal-bg-0` … `.terminal-bg-15`,
-each a single role variable {color.terminal.ansi.0} … {color.terminal.ansi.15},
-so the profile switch on the specimen recolours the grid without touching
-the markup. The foreground is {color.terminal.fg} on {color.terminal.bg};
-the prompt path segment is {color.terminal.prompt-text} on
-{color.terminal.prompt-bg} and the branch segment {color.terminal.bg} on
-{color.terminal.ansi.3}, the two agnoster backgrounds the workstation used.
-{color.terminal.prompt-bg} is the heritage dark red in every profile, so the
-prompt looks the same whatever slot 4 carries (D-032).
+Root `.terminal` plus `.terminal-transcript`, `.terminal-ansi-grid` or
+`.terminal-attributes`; parts `.terminal-line`, `-prompt` (`-prompt-path`,
+`-prompt-branch`, `-prompt-arrow`), `-cursor`, `-sel`, `-label`, `-fail`,
+`-bold`, `-dim`, `-italic`, `-underline`, `-inverse`, `-strike`. Each slot
+class reads one role variable ({color.terminal.ansi.0} …
+{color.terminal.ansi.15}), so a profile switch recolours without touching
+markup. {color.terminal.prompt-bg} is the heritage dark red in every profile,
+whatever slot 4 carries (D-032).
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | text on {color.terminal.bg}; the cursor cell hollow, a 1px {color.terminal.cursor} outline; no ring | the hollow cursor |
-| focus-visible | container ring 2px {color.interaction.focus.ring-container} at −3px; the cursor solid {color.terminal.cursor} with {color.terminal.bg} text | the ring; the cursor fills |
-| selected | the run filled {color.terminal.selection-bg} with {color.terminal.selection-text}; slot colours inside the run give way to the selection text | the fill spans whole cells; the emulator exposes the selection |
-| busy | a command is running: the cursor is a solid static block at the end of the output; the transcript is `aria-busy` | `aria-busy`; the cursor shape; no blink |
-| current | the cursor line filled {color.code.current-line} across its width; the cursor as in focus | the row fill; the cursor cell |
+| default | text on {color.terminal.bg}; cursor hollow, 1px {color.terminal.cursor} outline; no ring | the hollow cursor |
+| focus-visible | 2px {color.interaction.focus.ring-container} container ring at −3px; cursor solid {color.terminal.cursor} with {color.terminal.bg} text | the ring; the cursor fills |
+| selected | run filled {color.terminal.selection-bg} with {color.terminal.selection-text}; slot colours inside give way to the selection text | whole-cell fill; the emulator exposes the selection |
+| busy | command running: solid static block cursor at the end of the output; transcript `aria-busy` | `aria-busy`; cursor shape; no blink |
+| current | cursor line filled {color.code.current-line} across its width; cursor as in focus | row fill; cursor cell |
 
-The cursor never blinks in the reference. A host keeps the user's own blink
-setting and stops blinking under reduced motion; the theme never turns it on.
+The reference cursor never blinks. A host keeps the user's blink setting and
+stops it under reduced motion; the theme never turns it on.
 
 #### Keyboard
 
-The emulator and the shell own every key, including Tab, Escape and the
-selection modifiers. The reference transcript is a single focus stop that
-consumes nothing. The theme draws the ring when the host reports focus, the
-fill when the host reports a selection, and the block cursor where the host
-puts it.
+As in the key table. The reference transcript consumes no key; the theme
+draws the ring, selection and block cursor where the host reports them.
 
 #### Accessibility
 
-The transcript is `role=log` so new output is announced politely; the grid
-and the attribute sheet are plain `<pre>` elements with a label. In the
-`default` profile slots 1–7 and 9–15 reach 4.5:1 on the terminal background
-(4.55:1–10.37:1, D-029); slot 6 is coral, so highlighted names stand apart
-from the rose text (D-032). Slot 8 is the dim tier at 3.01:1 and slot 0 is the
-background itself; the grid marks both with a `✕` after the number so the
-exception is visible, not implied. The `heritage-ansi` profile keeps the
-historical values, where ten slots fail (1.86:1–4.45:1); the grid's crosses
-follow the default profile, so under `heritage-ansi` its sample text shows
-those failures directly. The `extended` overlay proposes a semantic sixteen
-that all reach 4.5:1. The site's profile control shows the grid under each. The background
-row is legible only with a foreground the program chooses: the default
-foreground passes only on slot 0, while the terminal background passes on
-every slot except 0 and 8, which is why the row is shown and not declared as
-a contract. Two escape families bypass the slots entirely and
-are outside the theme: bold-as-bright, which substitutes slots 8–15 for 0–7
-and must be off for the slots to hold, and 256-colour or 24-bit sequences,
-which carry their own values. Attributes are attributes: dim uses
-{color.text.muted} (5.81:1) rather than a slot in the reference, but most
-emulators draw dim by mixing a slot's colour halfway into the background, so
-dimmed slot 6 falls to about 2.7:1. The theme does not brighten slots to make up for it; a host setting
-that changes dim text alone may (D-032). Inverse swaps foreground and
-background (8.65:1), and bold, italic, underline and strikethrough are text
-styles a screen reader can expose.
+In `default`, slots 1–7 and 9–15 meet 4.5:1 on the terminal background
+(D-029); coral slot 6 sets highlighted names apart from rose text (D-032).
+Slot 8 (dim tier) and slot 0 (the background) do not; the grid marks both
+with `✕`. The crosses follow `default`, so under `heritage-ansi` (ten slots
+fail) the sample text shows the failures. The `extended` overlay proposes a
+semantic sixteen that all meet 4.5:1. The background row is not a contract:
+the default foreground passes only on slot 0, the terminal background on
+every slot but 0 and 8. Bold-as-bright and 256-colour or 24-bit sequences
+bypass the slots and are outside the theme. Most emulators dim by mixing a
+slot halfway into the background (dimmed slot 6 falls under 3:1); the theme
+does not brighten slots to compensate, a host setting for dim text alone may
+(D-032). Bold, italic, underline and strikethrough are styles a screen reader
+can expose.
 
 #### Portability
 
-Every emulator with a sixteen-slot palette can hold these values byte for
-byte; the port's evidence records whether bold-as-bright is off and whether
-the cursor and selection keys exist. A port carries the profile's slots as
-they are; it may recommend `LS_COLORS` or a prompt configuration (a prompt
-draws its path segment in {color.terminal.prompt-bg} and
-{color.terminal.prompt-text} as 24-bit colours, so the slots do not change
-it) but never changes the slots to compensate. The
-cursor shape (block, bar, underline) is the user's setting; the theme only
-supplies its colour.
+Hosts that set the palette (Orca, Ghostty, Warp, CE Devbox's shell palette)
+share one; the prompt is the one deliberate heritage-style exception, set in
+24-bit {color.terminal.prompt-bg} and {color.terminal.prompt-text} whatever
+the slots carry. CE Devbox's shell palette and its Agnoster directory and
+virtualenv segments follow in that repository (D-029, D-032).
+
+Any sixteen-slot emulator holds these values byte for byte; port evidence
+records whether bold-as-bright is off and whether cursor and selection keys
+exist. A port carries the slots unchanged; it may recommend `LS_COLORS` or a
+prompt configuration but never changes slots to compensate. Cursor shape is the
+user's; the theme supplies only its colour.
 
 #### Non-examples
 
-Normalising the heritage slots so every one reaches 4.5:1 and calling it
-`heritage-ansi`. A blinking cursor in the reference. A cursor that is a
-glowing bar. Bold rendered as bright, which silently swaps the slots. A
-purple or cyan slot borrowed from another scheme. Wrapping the transcript at
-narrow widths and breaking the prompt segments. A selection drawn as a ring
-instead of a fill. Rounded prompt segments or a gradient prompt.
+Normalising the heritage slots to 4.5:1 and calling it `heritage-ansi`. A
+blinking cursor in the reference. A glowing bar cursor. Bold rendered as
+bright. A purple or cyan slot borrowed from another scheme. Wrapping the
+transcript and breaking the prompt segments. A selection drawn as a ring
+instead of a fill. Rounded or gradient prompt segments.
 
 ### Editor search (`editor-search`)
 
@@ -7241,6 +6867,13 @@ Literal search and match navigation over escaped read-only source text. Family:
 | secondary.text | `color.text.muted` | `#bd787d` | use |
 | control.bg | `color.surface.input` | `#000000` | use |
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
+| button.bg | `color.action.secondary.bg` | `rgb(0 0 0 / 0%)` | use |
+| button.text | `color.action.secondary.text` | `#ffa2a7` | use |
+| button.border | `color.action.secondary.border` | `#a3676b` | use |
+| button.bg-hover | `color.action.secondary.hover-bg` | `#630f0d` | use |
+| button.bg-active | `color.action.secondary.pressed-bg` | `#420f0c` | use |
+| button.border-active | `color.border.active` | `#e53935` | use |
+| button.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-color-code-search-current-bg | `color.code.search-current-bg` | `#ffa2a7` | use |
 | dependency.role-color-code-search-current-text | `color.code.search-current-text` | `#0c0909` | use |
@@ -7249,36 +6882,32 @@ Literal search and match navigation over escaped read-only source text. Family:
 | dependency.role-color-surface-code | `color.surface.code` | `#000000` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Find literal text in a read-only code sample. Search, previous and next expose exact match counts and the current match. The component does not execute regexes, mutate source text or provide a code editor backend.
+Finds literal text in a read-only code sample. Searching a list or a site is
+the search-field.
 
 #### Anatomy
 
-- **query:** Labelled search input.
-- **navigation:** Previous and next actions, disabled without matches.
-- **source:** Escaped text with native mark elements.
-- **status:** Current and total match counts.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Plain escaped source. | Readable preformatted text. |
+| default | Plain escaped source. Button controls are the secondary button (button.md); inputs keep the input look. | Readable preformatted text. |
 | filled | Match fill; current match has its own marker. | Exact current and total counts. |
 | no-results | No highlighted matches. | Explicit zero-results status. |
 | focus-visible | Dashed control ring. | Native keyboard focus. |
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Reach query and match navigation.
-- **Enter / Shift+Enter:** Move to next or previous match.
-- **Escape:** Clear the query and retain focus.
+As in the key table.
 
 #### Accessibility
 
@@ -7331,71 +6960,50 @@ A two-column settings screen composed from the sidebar-nav, fieldset, switch, se
 
 #### Purpose
 
-A settings screen that proves the form components compose without new
-tokens: a section list on the left, one fieldset of preferences on the
-right, and a footer of actions. It exists to show the pieces together under
-every state and at every width, not to prescribe a product.
+Proves the form components compose without new tokens, in every state and
+at every width; it prescribes no product.
 
 #### Anatomy
 
-The region landmark; the sidebar-nav with the open section marked by
-`aria-current` and the 2px {color.border.selected-indicator}; the form
-landmark with its h2 in {color.text.bright} and lead in {color.text.muted};
-one fieldset with a {color.border.divider} edge holding two switches (Hide
-the bar, Smart gaps), a wallpaper select, the bar-label radio-group (中文 /
-English), the inner-gap text-field with a `px` suffix and the bar-module
-checkbox group; a footer rule and the Apply (primary) and Reset (secondary)
-buttons. Every part is the component's own markup and classes.
+Parts as listed in the anatomy; each uses its component's own markup and
+classes.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | rest tokens of every component on {color.surface.default}; the open section carries the indicator bar | `aria-current` |
-| focus-visible | the dashed {color.interaction.focus.ring} on the control holding focus (shown on the first switch); the other controls stay at rest | the ring |
-| invalid | the inner-gap field takes the 2px {color.status.danger.border} and shows its ✕ message; the other controls stay at rest | border width 1 → 2px; glyph; `aria-invalid` |
+| default | every component's rest tokens on {color.surface.default}; the open section carries the indicator bar | `aria-current` |
+| focus-visible | the dashed {color.interaction.focus.ring} on the focused control (shown on the first switch); others at rest | the ring |
+| invalid | the inner-gap field takes the 2px {color.status.danger.border} and its ✕ message; others at rest | border width 1 → 2px; glyph; `aria-invalid` |
 | busy | Apply shows the static ⋯ glyph in {color.action.primary.text}; the form carries `aria-busy`; nothing shrinks or animates | glyph; `aria-busy`; cursor: progress |
 
 The composed components keep their own hover, checked, disabled and
-read-only treatments; this specimen declares only the states the screen adds
-to them.
+read-only treatments; only the states the screen adds are declared here.
 
 #### Keyboard
 
-Landmarks first: a screen reader's landmark list offers the region, the
-navigation and the form by name. Tab walks the section links, then every
-control in reading order, then Apply and Reset. The radio-group and the
-select move with arrows inside one stop; the numeric field steps with Up and
-Down; switches and checkboxes toggle with Space. Nothing traps focus and
-nothing changes on hover alone.
+As in the key table. Nothing traps focus and nothing changes on hover alone.
 
 #### Accessibility
 
-The region is named by the h2 through `aria-labelledby`; the nav has its own
-label so two navigation landmarks on a page stay distinguishable; the open
-section is `aria-current="page"`. The form is named by the same h2 and
-carries `aria-busy="true"` while Apply is in progress, so the pending state
-is announced without a live region. Every control has a programmatic label;
-every message is linked by `aria-describedby`. Contrast: title 10.10:1 and
-lead 5.66:1 on the panel surface, control boundaries 4.33:1, the indicator
-bar 4.57:1, the danger border 4.69:1 on the input surface.
+The nav has its own label, so two navigation landmarks on a page stay
+distinguishable; the open section is `aria-current="page"`. `aria-busy` on the form announces the pending Apply without
+a live region. Every control has a programmatic label; every message is
+linked by `aria-describedby`. Text meets 4.5:1; control boundaries, the
+indicator bar and the danger border 3:1.
 
 #### Portability
 
-Three landmarks, native controls and a container query; nothing here needs a
-script. A host without container queries collapses the sidebar at the 600px
-viewport breakpoint. The 56rem reference width, the sidebar width and the
-two-column grid belong to this specimen and are not rules; the specimen
-proves composition, not a product. Toolkits port each contained component
-through its own mapping and place them with their native layout.
+The sidebar width is specimen layout too, not a rule. Toolkits port each
+contained component through its own mapping and place them with their native
+layout.
 
 #### Non-examples
 
 A rounded, shadowed settings card. A Material-style app bar above the form.
-Toggle switches with rounded pills or animated thumbs. Section links drawn
-as filled tabs instead of the indicator bar. A red form background to show
-that something is invalid. Applying while the controls are dimmed with
-opacity. A spinner replacing the Apply label.
+Pill switches or animated thumbs. Section links as filled tabs instead of
+the indicator bar. A red form background for invalid. Dimming the controls
+with opacity while applying. A spinner replacing the Apply label.
 
 ### Admin form (`admin-form`)
 
@@ -7444,79 +7052,58 @@ A create-or-edit record screen composed from breadcrumbs, a wizard step list, al
 
 #### Purpose
 
-A record screen that proves the advanced form components compose with the
-navigation and feedback components: a trail, a heading, a step list, a
-notice, a grid of fields and a row of actions, then the same screen at its
-review step. It exists to show validation, saving and inertness across a
-whole form, not to prescribe a product.
+A record screen proving that the advanced form components compose with the
+navigation and feedback components, then the same screen at its review step.
+It shows validation, saving and inertness across a whole form; it does not
+prescribe a product.
 
 #### Anatomy
 
-The region landmark; the breadcrumbs (Records / Workstations / New); the h2
-in {color.text.bright}; the wizard step list with the current step on the
-2px {color.border.selected-indicator}; an info alert on
-{color.status.info.tint}; the form landmark holding the name and hostname
-text-fields, the role select, the commissioned-on date-picker, the SSH-key
-file-input, the notes textarea with its count and the enable checkbox; the
-footer rule and the Back, Save draft and Continue buttons. The review
-variant replaces the fields with a table whose row headers are the field
-names in {color.text.muted} and whose last column is a tertiary Edit button.
-Every part is the component's own markup and classes.
+Parts as listed in the anatomy; each is the contained component's own markup
+and classes.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | rest tokens of every component on {color.surface.default}; the current step carries the indicator bar, future steps are disabled | `aria-current="step"` |
-| invalid | the name and hostname fields take the 2px {color.status.danger.border} and show their ✕ messages; the current step's marker becomes ✕; a danger alert on {color.status.danger.tint} summarising the two fields replaces the notice; the other fields stay at rest | border width 1 → 2px; glyphs; `aria-invalid`; `role="alert"` |
-| busy | Continue shows the static ⋯ glyph in {color.action.primary.text}; the form carries `aria-busy`; nothing shrinks or animates | glyph; `aria-busy`; cursor: progress |
-| disabled | every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover anywhere | `disabled` on the wrapping fieldset; cursor: not-allowed; never opacity |
+| default | every component's rest tokens on {color.surface.default}; the current step carries the indicator bar, future steps are disabled | `aria-current="step"` |
+| invalid | name and hostname take the 2px {color.status.danger.border} and ✕ messages; the current step's marker becomes ✕; a danger summary on {color.status.danger.tint} naming the two fields replaces the notice; other fields stay at rest | border 1 → 2px; glyphs; `aria-invalid`; `role="alert"` |
+| busy | Continue shows the static ⋯ in {color.action.primary.text}; nothing shrinks or animates | glyph; `aria-busy` on the form; cursor: progress |
+| disabled | every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover | `disabled` on the wrapping fieldset; cursor: not-allowed; never opacity |
 
-The composed components keep their own hover, focus-visible, required,
-placeholder-shown and read-only treatments; this specimen declares only the
-states the whole form adds to them.
+Contained components keep their own hover, focus-visible, required,
+placeholder-shown and read-only states; this table adds only the form-level
+ones.
 
 #### Keyboard
 
-Landmarks first: the region, the Breadcrumb navigation and the form are
-offered by name. Tab walks the trail, the reachable steps, the fields in
-reading order and the three buttons; the file-input's hidden native input is
-the stop and its visible button label is drawn with the ring. The select and
-the date field move with arrows inside one stop. In the review variant the
-Edit buttons are ordinary stops inside the table. Nothing traps focus.
+The region, the Breadcrumb navigation and the form are offered as landmarks
+by name. In the review variant the Edit buttons are ordinary stops inside the
+table. Nothing traps focus.
 
 #### Accessibility
 
-The region and the form are both named by the h2. Complete steps read ", complete"
-through a visually hidden suffix; future steps are disabled, not hidden.
-The notice is `role="status"` and the invalid summary is `role="alert"`, so
-the summary is announced once on submit while each field's message stays
-linked by `aria-describedby`; `aria-invalid` is set only after submit. While
-saving the form carries `aria-busy` and, once inert, sits inside a disabled
-fieldset so every control reports its state natively. The review table has
-a caption, column headers and row headers; each Edit button names its field
-through a visually hidden suffix. Contrast: notice title 6.5:1 or better on
-its tint, messages 5.26:1 on the panel surface, the invalid boundary 4.69:1
-on the input surface, disabled text 3.24:1 (exempt).
+The h2 names both the region and the form. Complete steps read ", complete"
+through a visually hidden suffix; future steps are disabled, not hidden. The
+summary alert is announced once on submit; each field's message stays linked
+by `aria-describedby`. Inside the disabled fieldset every control reports its
+state natively. The review table has a caption, column headers and row
+headers; each Edit button names its field through a visually hidden suffix.
+Text meets 4.5:1 and the invalid boundary 3:1; disabled text is exempt (house
+floor 3:1).
 
 #### Portability
 
-Landmarks, native controls, one container query and three root hooks
-(`data-state-invalid`, `data-state-busy`, `data-state-disabled`); no script
-is needed to render any state. Hosts without container queries stack the
-footer at the 600px viewport breakpoint. The 56rem reference width and the
-two-column field grid are layout of this specimen and not rules; the
-specimen proves composition, not a product. Toolkits port each contained
+No script is needed to render any state. Toolkits port each contained
 component through its own mapping.
 
 #### Non-examples
 
-A rounded card with a drop shadow around the form. A Material stepper with
-circular numbered badges and a connecting line. A red banner across the
-whole form instead of the summary alert plus field messages. Fields whose
-borders glow red. A spinner replacing the Continue label. Saving while the
-fields fade to half opacity. Placing the actions in a sticky footer bar with
-a shadow.
+A rounded card with a drop shadow. A Material stepper with numbered circles
+and a connecting line. A red banner across the whole form instead of the
+summary alert plus field messages. Field borders that glow red. A spinner
+replacing the Continue label. Fields fading to half opacity while saving. A
+sticky footer bar with a shadow.
 
 ### Filterable table (`filterable-table`)
 
@@ -7569,78 +7156,57 @@ A list screen composed from a toolbar with search and filter, removable chips, a
 
 #### Purpose
 
-A list screen that proves the navigation, display and feedback components
-compose around one data-table: find, filter, select, page. It exists to
-show the states of a whole list screen, including nothing matching and
-still loading, not to prescribe a product.
+Proves that navigation, display and feedback components compose around one
+data-table (find, filter, select, page), including nothing matching and still
+loading. It shows a whole list screen's states; it does not prescribe a
+product.
 
 #### Anatomy
 
-The region landmark; the toolbar on {color.surface.chrome} with the
-search-field, the Filter menu button, the Columns toggle, a separator and the
-primary New button; a row of removable chips (priority: R1, maturity:
-stable); the scroller around the data-table, whose Name header carries
-`aria-sort`, whose rows carry `aria-selected` and a checkbox, and whose last
-column is a status badge (✓ Tested on {color.status.success.fill}, i
-Demonstrated on {color.status.info.fill}); the count in {color.text.muted}
-and the compact pagination. The empty variant adds the empty-state block;
-the loading variant marks the table `aria-busy`. Every part is the
-component's own markup and classes.
+Parts as listed in the anatomy; badges carry ✓ (Tested) and i
+(Demonstrated). Every part is the composed component's own markup and
+classes.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | rest tokens of every component; Name sorted ascending with its ▲ glyph; Prev disabled | `aria-sort`; the glyph |
-| hover | the pointed row takes {color.interaction.hover.bg}; the toolbar controls and chips keep their own hover on their own pointer events only | cursor |
-| focus-visible | the dashed {color.interaction.focus.ring} on the row holding focus (shown on the third row); the toolbar and chips stay at rest | the ring |
-| selected | two rows take {color.interaction.selection.bg} with {color.interaction.selection.text} and a checked box; the select-all reports mixed with the – glyph | `aria-selected`; ✓ and – glyphs; `aria-checked="mixed"` |
-| no-results | the body is the "No components match" row, the count reads 0 of 43, the search field's status line announces it; the chips stay so the cause is visible | text; `role="status"` |
+| default | each component at rest; Name sorted ascending with ▲; Prev disabled | `aria-sort`; the glyph |
+| hover | the pointed row takes {color.interaction.hover.bg}; toolbar controls and chips hover only on their own pointer events | cursor |
+| focus-visible | dashed {color.interaction.focus.ring} on the focused row (the third in the specimen); toolbar and chips at rest | the ring |
+| selected | two rows in {color.interaction.selection.bg} with {color.interaction.selection.text} and a checked box; select-all mixed with – | `aria-selected`; ✓ and – glyphs; `aria-checked="mixed"` |
+| no-results | the body is the "No components match" row; count reads 0 of 43; the search status line announces it; chips stay so the cause is visible | text; `role="status"` |
 
 The composed components keep their own pressed, sorted, disabled, loading
-and open treatments; this specimen declares only the states the whole
-screen adds to them.
+and open treatments; only the states the whole screen adds are declared here.
 
 #### Keyboard
 
-Landmarks first: the region, the toolbar's search landmark and the
-pagination navigation are offered by name. The toolbar is one stop with
-arrow movement between the search field, Filter, Columns and New (the
-toolbar contract); Escape clears the search. Each chip's Remove button is
-its own stop. The table follows the data-table contract: the first row is
-the stop, arrows move between rows, Space on a row's checkbox toggles it,
-Enter on a header sorts. Next is the last stop; a disabled Prev is not
-focusable.
+As in the key table, following the toolbar and data-table contracts. The
+region, the search landmark and the pagination navigation are offered by
+name. A disabled Prev is not focusable.
 
 #### Accessibility
 
-The search field's visible label is replaced by a visually hidden one so the
-toolbar stays one row; its status line is visually hidden too and announces
-"No components match" through `role="status"`. The count is a second status
-region and changes once per filter. Rows are named by their Name cell
-through `aria-labelledby` on the row checkbox; the select-all is a
-checkbox-role button whose mixed state carries the – glyph. Badges carry
-their glyphs so status survives without colour. Contrast: toolbar text
-8.60:1 on the chrome surface, boundaries 4.42:1, headers 10.10:1, badges
-7.08:1 and 7.13:1 on their fills, the ring 7.48:1 on the selection fill.
+The search field's label and its status line are visually hidden so the
+toolbar stays one row; the status line announces "No components match"
+through `role="status"`. The count is a second status region and changes once
+per filter. Rows are named by their Name cell through `aria-labelledby` on
+the row checkbox. Badge glyphs keep status readable without colour. Text and
+badges meet 4.5:1; boundaries and the ring on the selection fill meet 3:1.
 
 #### Portability
 
-Native table semantics, a toolbar, a menu button and a status region; the
-roving tabindex and the menu need the host's script, every state renders
-without one from the root hooks `data-state-selected` and
-`data-state-no-results` and the table's own `aria-busy`. Hosts without
-container queries wrap the toolbar at the 600px viewport breakpoint. The
-56rem width and the 44rem table minimum are layout of this specimen and not
-rules; the specimen proves composition, not a product.
+Every state renders without script from the root hooks
+`data-state-selected` and `data-state-no-results` and the table's own
+`aria-busy`.
 
 #### Non-examples
 
-A rounded search pill with a magnifier inside a shadowed toolbar. Filter
-chips drawn as pills with a coloured fill per category. Zebra-striped rows.
-A selected row shown by a coloured left bar and no fill. A blue Material
-checkbox. A skeleton shimmer while loading. An infinite scroll with no count
-and no pages.
+A rounded search pill with a magnifier in a shadowed toolbar. Chips as pills
+with a coloured fill per category. Zebra-striped rows. A selected row shown by
+a coloured left bar and no fill. A blue Material checkbox. A skeleton shimmer
+while loading. Infinite scroll with no count and no pages.
 
 ### i3 window frame (`i3-window-frame`)
 
@@ -7658,7 +7224,7 @@ The workstation frame; an i3 bar with workspaces and Chinese i3status labels abo
 | workspace.selected-text | `color.interaction.selection.text` | `#f4eeee` | use |
 | workspace.bg-hover | `color.interaction.hover.bg` | `#1c0a09` | use |
 | workspace.ring | `color.interaction.focus.ring` | `#e53935` | use |
-| workspace.ring-on-selection | `color.interaction.focus.ring-container` | `#ffa2a7` | use |
+| workspace.ring-on-selection | `color.interaction.focus.ring` | `#e53935` | use |
 | workspace.urgent-bg | `color.status.danger.fill` | `#dc282e` | use |
 | workspace.urgent-text | `color.status.danger.on-fill` | `#f9faf9` | use |
 | status.separator | `color.text.muted` | `#bd787d` | use |
@@ -7683,83 +7249,55 @@ The workstation frame; an i3 bar with workspaces and Chinese i3status labels abo
 
 #### Purpose
 
-The frame the palette was tuned in: an i3 bar, tiled windows with 1px
-pixel borders, 14/−2 gaps, a tabbed container and one floating window. It
-proves that the terminal and code-editor components sit inside window
-chrome drawn from the same roles, and it records the workstation's geometry
-as reference metrics. It is a specimen of composition, not a desktop.
+The frame the palette was tuned in. It proves that the terminal and
+code-editor components sit in window chrome drawn from the same roles, and it
+records the workstation's geometry as reference metrics. A specimen of
+composition, not a desktop: only i3 and sway ports draw this frame.
 
 #### Anatomy
 
-The region on {color.surface.desktop}; the 28px bar on
-{color.surface.chrome} with the workspace tablist (the visible workspace on
-{color.interaction.selection.bg}) and the i3status group in Chinese with
-its clock in {color.text.bright}; the workspace grid with the reference
-gaps; each window a focusable group behind a 1px {color.border.default}
-frame, {color.border.active} when focused, with a 23px title bar in
-{color.text.muted} on {color.surface.chrome} that turns {color.text.bright}
-on {color.surface.chrome-alt} when focused; the terminal or code-editor as
-the client with its own boundary given up to the frame. Tabbed: the titles
-form a tablist whose visible tab carries the 2px
-{color.border.selected-indicator}. Floating: the editor sits above the
-terminal behind {color.border.overlay} with {shadow.floating}, the only
-shadow in the theme.
+Parts as listed in the anatomy.
 
 #### States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | the terminal window focused: {color.border.active} frame and the bright title; the editor at rest; workspace 1 filled | the title text; `aria-selected` |
-| focus-visible | the 2px {color.interaction.focus.ring-container} ring at −3px inside the focused window or container; the client draws no second ring | the ring |
-| selected | workspace 2 takes the selection fill with {color.interaction.selection.text}; workspace 1 drops to rest | `aria-selected` |
-| container-inactive | no window has focus: every frame {color.border.default}, every title {color.text.muted} on {color.surface.chrome}, the tab indicator {color.border.selected-indicator-inactive}, no caret | lightness drop; no caret |
-| error | workspace 3 is urgent: {color.status.danger.fill} with {color.status.danger.on-fill} and a trailing ! | the ! mark; "urgent" read to assistive technology |
+| default | terminal window focused: {color.border.active} frame, bright title; editor at rest; workspace 1 filled | the title text; `aria-selected` |
+| focus-visible | 2px {color.interaction.focus.ring-container} ring at −3px inside the focused window or container; the client draws no second ring | the ring |
+| selected | workspace 2 takes the selection fill with {color.interaction.selection.text}, 1px dashed {color.interaction.focus.ring} at −2px when focused; workspace 1 at rest | `aria-selected` |
+| container-inactive | no window focused: every frame {color.border.default}, every title {color.text.muted} on {color.surface.chrome}, tab indicator {color.border.selected-indicator-inactive}, no caret | lightness drop; no caret |
+| error | workspace 3 urgent: {color.status.danger.fill} with {color.status.danger.on-fill} and a trailing ! | the ! mark; "urgent" read to assistive technology |
 
 The clients keep their own states (the terminal's busy cursor, the editor's
-selection and read-only gutter); this specimen declares only the states the
-frame adds around them.
+selection and read-only gutter); only the states the frame adds are declared
+here.
 
 #### Keyboard
 
-The workspace tablist is one stop with arrow movement; Enter or Space shows
-a workspace. Each window is a focusable group so the frame itself can hold
-focus, as i3 focuses a container; Tab then enters the client, whose own
-contract applies (the terminal log, the read-only editor textbox). In the
-tabbed variant the tab list is one stop and only the visible panel's client
-follows. Mod+h j k l and Mod+1..9 belong to the window manager and are
-documented, not reimplemented. Nothing traps focus.
+As in the key table. A window group can hold focus itself, as i3 focuses a
+container. Nothing traps focus.
 
 #### Accessibility
 
-The region names its workspace and layout. The bar is a group holding a
-named tablist and a status group in `lang="zh"`, whose Nerd Font glyphs
-are `aria-hidden` so only the labels are read. Every window is a named
-group; the focused one says so in its name and the floating one too.
-Urgency carries the ! mark and a visually hidden "urgent". Contrast:
-workspace names 8.60:1 and the clock 10.31:1 on the bar, focused titles
-10.01:1, rest titles 5.77:1, the focused frame 4.97:1 and the ring 10.37:1
-on the window surface, the urgent fill 4.12:1 against the bar with 4.58:1
-text on it.
+The region names its workspace and layout. The workspace tablist is named;
+the status group is `lang="zh"`;
+its Nerd Font glyphs are `aria-hidden`, so only the labels are read. Every
+window is a named group; the focused and the floating window say so in their
+names. Urgency carries the ! mark and a visually hidden "urgent". Text meets
+4.5:1; frames, the ring and the urgent fill 3:1.
 
 #### Portability
 
-Groups, a tablist and the clients' own roles; every state renders from the
-root hooks without a script. The i3 geometry — bar 28px, titles 23px, gaps
-14px inner and −2px outer — is reproduced with private variables on this
-specimen's root only. Those numbers are reference metrics of the
-workstation, recorded so a port of the i3 configuration matches it; they
-are not tokens and not a rule for any other application, which keeps its
-own window manager, bar and gaps. The specimen proves composition, not a
-product; only i3 and sway ports draw this frame.
+The geometry is recorded so a port of the i3 configuration matches the
+workstation; any other application keeps its own window manager, bar and
+gaps.
 
 #### Non-examples
 
-A window with rounded corners or a title bar gradient. A focused window
-that glows or blurs its neighbours. A shadow under a tiled window; the only
-shadow is the floating one. Gaps of 14/−2 forced into an unrelated
-application's layout. A workspace indicator drawn as a red underline
-instead of the selection fill. Traffic-light close buttons in the title
-bar. A translucent bar.
+Rounded corners or a title-bar gradient. A focused window that glows or
+blurs its neighbours. A shadow under a tiled window. 14/−2 gaps forced into
+an unrelated application. A red underline instead of the selection fill for
+the workspace. Traffic-light buttons in the title bar. A translucent bar.
 
 ### File browser (`file-browser`)
 
@@ -7774,33 +7312,39 @@ Location navigation and a filterable native file table with bounded host actions
 | secondary.text | `color.text.muted` | `#bd787d` | use |
 | control.bg | `color.surface.input` | `#000000` | use |
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
+| button.bg | `color.action.secondary.bg` | `rgb(0 0 0 / 0%)` | use |
+| button.text | `color.action.secondary.text` | `#ffa2a7` | use |
+| button.border | `color.action.secondary.border` | `#a3676b` | use |
+| button.bg-hover | `color.action.secondary.hover-bg` | `#630f0d` | use |
+| button.bg-active | `color.action.secondary.pressed-bg` | `#420f0c` | use |
+| button.border-active | `color.border.active` | `#e53935` | use |
+| button.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-border-width-emphasis | `border.width.emphasis` | `2px` | use |
 | dependency.role-color-border-divider | `color.border.divider` | `#2b0e0d` | use-and-report (D-008) |
 | dependency.role-color-border-selected-indicator | `color.border.selected-indicator` | `#e53935` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
 | dependency.role-space-16 | `space.16` | `16px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Compose hierarchical location navigation with a filterable file table. Opening an entry emits its stable identity. The caller owns file access, upload, deletion and permissions. The supplied names and sizes are synthetic local examples.
+Finds a file by location and name; every file operation belongs to the
+caller.
 
 #### Anatomy
 
-- **locations:** Tree navigation selects a location filter.
-- **query:** Labelled native search filters visible rows.
-- **table:** Native rows show names, kinds and sizes with explicit Open actions.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Locations and native file rows. | Explicit names, kinds and sizes. |
+| default | Locations and native file rows. Button controls are the secondary button (button.md); inputs keep the input look. | Explicit names, kinds and sizes. |
 | selected | Selected location follows the tree contract. | aria-selected plus location filter. |
 | empty | No file rows. | Explicit zero-files text. |
 | no-results | Filtered rows are hidden. | Matching count and retained search query. |
@@ -7808,17 +7352,19 @@ Compose hierarchical location navigation with a filterable file table. Opening a
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Move among tree navigation, search and row actions.
-- **Arrow keys:** Use the tree contract inside navigation.
-- **Enter / Space:** Request opening the chosen file through an event.
+As in the key table.
 
 #### Accessibility
 
-Keep the complete nested tree behavior and semantic table headers. Filtering does not move focus. Announce counts, and keep the search field available after zero results. File actions must not imply access beyond the host's actual permissions.
+Keep the complete nested tree behaviour and semantic table headers.
+Filtering does not move focus. Announce counts, and keep the search field
+available after zero results. File actions never imply access beyond the
+host's actual permissions.
 
 #### Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 #### Non-examples
 
@@ -7835,50 +7381,56 @@ Named operational metrics, a complete chart and an actionable native records tab
 | root.border | `color.border.control` | `#a3676b` | use-and-report (D-007) |
 | heading.text | `color.text.bright` | `#ffa2a7` | use |
 | secondary.text | `color.text.muted` | `#bd787d` | use |
-| control.bg | `color.surface.input` | `#000000` | use |
+| control.bg | `color.action.secondary.bg` | `rgb(0 0 0 / 0%)` | use |
+| control.text | `color.action.secondary.text` | `#ffa2a7` | use |
+| control.border | `color.action.secondary.border` | `#a3676b` | use |
+| control.bg-hover | `color.action.secondary.hover-bg` | `#630f0d` | use |
+| control.bg-active | `color.action.secondary.pressed-bg` | `#420f0c` | use |
+| control.border-active | `color.border.active` | `#e53935` | use |
 | control.focus | `color.interaction.focus.ring` | `#e53935` | use |
 | dependency.role-border-width-default | `border.width.default` | `1px` | use |
 | dependency.role-color-border-divider | `color.border.divider` | `#2b0e0d` | use-and-report (D-008) |
 | dependency.role-color-surface-chrome | `color.surface.chrome` | `#090707` | use |
 | dependency.role-density-comfortable-control-height | `density.comfortable.control-height` | `32px` | use |
 | dependency.role-density-compact-control-height | `density.compact.control-height` | `24px` | use |
+| dependency.role-focus-offset | `focus.offset` | `-2px` | use |
 | dependency.role-font-size-h2 | `font.size.h2` | `16px` | use |
 | dependency.role-radius-none | `radius.none` | `0px` | use |
 | dependency.role-space-12 | `space.12` | `12px` | use |
-| dependency.role-space-2 | `space.2` | `2px` | use |
 | dependency.role-space-8 | `space.8` | `8px` | use |
 
 #### Purpose
 
-Compose a small operational overview from named metrics, a complete chart and a records table. All figures are caller data. Synthetic fixtures are labelled; the component does not fetch data or infer business health.
+A small operational overview of caller data; it fetches nothing and infers no
+business health.
 
 #### Anatomy
 
-- **metrics:** Terms and values pair each metric name with its number.
-- **activity:** Chart retains its full textual data table.
-- **records:** Native rows include named actions and explicit status words.
+Parts as listed in the anatomy.
 
 #### States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Square metric panels and readable tables. | Metric names, exact values and status text. |
-| loading | Busy boundary with existing content retained. | aria-busy and host-provided loading status. |
-| empty | Explicit absence of records. | Empty message; metric zero differs from unknown. |
+| default | Square metric panels, readable tables. Its buttons are the secondary button (button.md). | Metric names, exact values, status text. |
+| loading | Busy boundary; existing content kept. | `aria-busy` and host-provided loading status. |
+| empty | Explicit absence of records. | Empty message; a zero metric differs from an unknown one. |
 | focus-visible | Dashed action outline. | Native keyboard focus. |
 
 #### Keyboard
 
-- **Tab / Shift+Tab:** Visit record actions and any scrollable data region.
-- **Enter / Space:** Request the chosen record through an event.
+As in the key table; nothing else is bound.
 
 #### Accessibility
 
-Keep metrics as term/value pairs, tables labelled and all chart data visible. Do not use a color-only health score. Busy status does not manufacture a completed refresh. The host decides how unknown metrics are described, rather than silently displaying zero.
+Metrics stay term/value pairs, tables are labelled and all chart data stays
+visible. No colour-only health score. Busy status never implies a completed
+refresh. The host words unknown metrics; never show them silently as zero.
 
 #### Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 #### Non-examples
 
@@ -7888,7 +7440,7 @@ Unlabelled controls, color-only status, drag-only operations, hidden required in
 
 | Component | Family | Priority | Specified | Demonstrated | Test implemented |
 | --- | --- | --- | --- | --- | --- |
-| `admin-form` | composed | R1 | yes | yes | — |
+| `admin-form` | composed | R1 | yes | yes | yes |
 | `alert` | feedback | R1 | yes | yes | — |
 | `avatar` | display | R2 | yes | yes | — |
 | `badge` | display | R1 | yes | yes | — |
@@ -7899,7 +7451,7 @@ Unlabelled controls, color-only status, drag-only operations, hidden required in
 | `chart` | display | R2 | yes | yes | — |
 | `checkbox` | forms-basic | R1 | yes | yes | yes |
 | `chip` | display | R1 | yes | yes | — |
-| `code-editor` | developer | R1 | yes | yes | — |
+| `code-editor` | developer | R1 | yes | yes | yes |
 | `combobox` | forms-advanced | R1 | yes | yes | — |
 | `command-palette` | navigation | R2 | yes | yes | — |
 | `compact-dashboard` | composed | R2 | yes | yes | — |
@@ -8041,122 +7593,114 @@ A token moves from `proposed` to `approved` only by an `accepted` decision refer
 in its `$extensions["io.github.j3w1.theme"].approval.decision`. Agents may open
 `proposed` entries; only the owner changes a status.
 
-Each entry has a Decision and a Status line (status, date, who decided, and
-what later entries changed), plus Why, Consequences and Alternatives where they
-apply.
+Each entry has a Decision (what was chosen, with `Rule:` naming the section
+that holds the rule), a Why (the reason and the rejected alternatives worth
+remembering) and a Status line (status, date, who decided, and what later
+entries changed). Computed ratios are in `exports/contrast.md`. Entries are
+ordered by topic.
+
+### Decisions by topic
+
+#### Governance and process
 
 | # | Title | Status | Date | Decided by |
 | --- | --- | --- | --- | --- |
 | D-000 | Responsibility split: tokens, spec, ports, evidence | accepted | 2026-09-05 | owner (design package) |
-| D-001 | Controlled three-hue extension for status, diagnostics and diffs | accepted | 2026-09-06 | owner |
 | D-002 | v0.1.0 ships the full R1 component inventory | accepted | 2026-09-06 | owner |
-| D-003 | Text-role corrections with new in-hue values | accepted | 2026-09-06 | owner |
 | D-004 | Public repository; MIT code, CC BY 4.0 prose | accepted | 2026-09-06 | owner |
 | D-005 | Default profile id is `default` | proposed | 2026-09-06 | — |
-| D-006 | Focus-ring rule, including invalid + focus | proposed | 2026-09-06 | — |
-| D-007 | `border.control` uses `#A3676B` | proposed | 2026-09-06 | — |
-| D-008 | Fold site hairlines into `border.divider`; `surface.sunken`; unified overlay border | proposed | 2026-09-06 | — |
-| D-009 | Density modes `compact` and `comfortable` as tokens | proposed | 2026-09-06 | — |
 | D-010 | The site deploys from `main` | proposed | 2026-09-06 | — |
 | D-011 | Reference screenshots are cropped before publication | proposed | 2026-09-06 | — |
 | D-012 | Exports are committed and drift-checked | proposed | 2026-09-06 | — |
 | D-013 | Consumption eligibility is separate from approval | proposed | 2026-09-07 | — |
-| D-014 | Automatic inline literal color previews | proposed | 2026-09-07 | — |
-| D-015 | Clarify component mappings exposed by consumption acceptance | proposed | 2026-09-07 | — |
-| D-016 | Pinned release comparison report and historical rendering | proposed | 2026-09-08 | — |
-| D-017 | Private framework parity evidence | proposed | 2026-09-08 | — |
-| D-018 | Declared port capabilities and fresh import evidence | proposed | 2026-09-08 | — |
-| D-019 | One-way namespaced Figma Variables bridge | proposed | 2026-09-08 | — |
-| D-020 | Bounded local validation and recovery workflow | proposed | 2026-09-08 | — |
-| D-021 | Local form composition with versioned data | proposed | 2026-09-08 | — |
-| D-022 | Local visual selection before agent implementation distribution | proposed | 2026-09-08 | — |
+| D-028 | Merge gates and the deployment gate are different suites | accepted | 2026-09-11 | owner (explicit verification-split instruction) |
+| D-031 | Select the checks a change needs; shard the deployment matrix | accepted | 2026-09-26 | owner (explicit CI renovation request, plan approval) |
+
+#### Colour foundation
+
+| # | Title | Status | Date | Decided by |
+| --- | --- | --- | --- | --- |
+| D-001 | Controlled three-hue extension for status, diagnostics and diffs | accepted | 2026-09-06 | owner |
+| D-003 | Text-role corrections with new in-hue values | accepted | 2026-09-06 | owner |
+| D-007 | `border.control` uses `#A3676B` | proposed | 2026-09-06 | — |
+| D-008 | Fold site hairlines into `border.divider`; `surface.sunken`; unified overlay border | proposed | 2026-09-06 | — |
 | D-023 | True Black / Rose canonical foundation | accepted | 2026-09-08 | owner (explicit selection of candidate I) |
-| D-024 | Distinguish links from body text and headings | accepted | 2026-09-08 | owner (explicit preview correction) |
-| D-025 | Theme interactive controls throughout the portal and demo | accepted | 2026-09-09 | owner (explicit native-control replacement request) |
 | D-026 | Primary action fill darkens off heritage ANSI 12 | accepted | 2026-09-11 | owner (explicit acceptance after visual review) |
 | D-027 | Recede the interactive chrome | accepted | 2026-09-11 | owner (explicit acceptance after visual review) |
-| D-028 | Merge gates and the deployment gate are different suites | accepted | 2026-09-11 | owner (explicit verification-split instruction) |
 | D-029 | Readable terminal and code reds | accepted | 2026-09-26 | owner (explicit selection of values and release in planning) |
 | D-030 | Hued syntax roles for opt-in code highlighting | accepted | 2026-09-26 | owner (explicit request for a more colourful Codex, selection of the extended hues) |
-| D-031 | Select the checks a change needs; shard the deployment matrix | accepted | 2026-09-26 | owner (explicit CI renovation request, plan approval) |
 | D-032 | Coral slot 6 and a fixed prompt background | accepted | 2026-09-26 | owner (explicit selection of coral and the PowerShell prompt look) |
-| D-033 | Rose prose, semantic content headings and inherited bold | accepted | 2026-09-28 | owner (explicit implementation plan) |
-| D-034 | Versioned Windows native and Windhawk adapters | accepted | 2026-09-28 | owner (explicit implementation plan) |
 | D-035 | An accent surface for the user's own content | accepted | 2026-10-06 | owner (Telegram acceptance: own and other people's messages too similar; chose #3d0c0a from a side-by-side comparison) |
 | D-036 | A translucent text-selection tint | accepted | 2026-10-06 | owner (Telegram acceptance: Android text selection barely visible; chose 50% from a side-by-side comparison) |
 
-### D-000 Responsibility split
+#### Typography and density
 
-**Decision.** Token files own literal values and aliases; the specification owns
-meaning, permitted uses and constraints; port mappings own native keys; evidence
-records own what was actually tested. README, the site and pictures summarise
-them and never replace them.
-
-**Consequences.** A disagreement between spec and tokens is a defect to fix, not
-a choice. Images never override token values. Historical source is evidence of
-origin, not an override of the adopted accessible design.
-
-**Status.** accepted · 2026-09-05 · owner (design package `ARCHITECTURE.md`).
-
-### D-001 Controlled three-hue extension
+| # | Title | Status | Date | Decided by |
+| --- | --- | --- | --- | --- |
+| D-009 | Density modes `compact` and `comfortable` as tokens | proposed | 2026-09-06 | — |
+| D-033 | Rose prose, semantic content headings and inherited bold | accepted | 2026-09-28 | owner (explicit implementation plan) |
+| D-037 | Display and title type sizes | accepted | 2026-10-14 | owner (G2 authority review) |
+| D-038 | Compact is the default density | accepted | 2026-10-14 | owner (explicit instruction at the G1 design review) |
 
-**Decision.** `default` adds three desaturated, warm-shifted hues: amber
-`#C9973F` (warning, modified), green `#86A46F` (success, added), blue `#7E9EBB`
-(info); dark tints `#1F1A0C`, `#0F1A0E`, `#0F141C`. They appear only in
-`status`, `diagnostic` and `diff` (plus `code`, `terminal` and `chart` in
-`extended`), never in `surface`, `text`, `border`, `interaction` or `action`. No
-purple, cyan or magenta. Every status role also has a glyph, underline pattern
-or border style. `default` syntax stays monochrome; `extended` stays `proposed`.
+#### Interaction and components
 
-**Why.** Lightness alone cannot separate diagnostics, diffs and status (a
-200-line diff cannot be scanned by glyph); the owner's PhpStorm scheme already
-uses such hues.
+| # | Title | Status | Date | Decided by |
+| --- | --- | --- | --- | --- |
+| D-006 | Focus-ring rule, including invalid + focus | proposed | 2026-09-06 | — |
+| D-014 | Automatic inline literal color previews | proposed | 2026-09-07 | — |
+| D-015 | Clarify component mappings exposed by consumption acceptance | proposed | 2026-09-07 | — |
+| D-024 | Distinguish links from body text and headings | accepted | 2026-09-08 | owner (explicit preview correction) |
+| D-025 | Theme interactive controls throughout the portal and demo | accepted | 2026-09-09 | owner (explicit native-control replacement request) |
 
-**Consequences.** Contrast on canvas / surface / raised: amber 7.54 / 7.34 /
-6.90, green 7.13 / 6.95 / 6.53, blue 7.08 / 6.90 / 6.48.
+#### Site, tools and distribution
 
-**Status.** accepted · 2026-09-06 · owner. Superseded in part by D-030 (opt-in
-`code.hued.*`; `code.syntax.*` stays monochrome).
+| # | Title | Status | Date | Decided by |
+| --- | --- | --- | --- | --- |
+| D-016 | Pinned release comparison report and historical rendering | proposed | 2026-09-08 | — |
+| D-017 | Private framework parity evidence | proposed | 2026-09-08 | — |
+| D-019 | One-way namespaced Figma Variables bridge | proposed | 2026-09-08 | — |
+| D-020 | Bounded local validation and recovery workflow | proposed | 2026-09-08 | — |
+| D-021 | Local form composition with versioned data | proposed | 2026-09-08 | — |
+| D-022 | Local visual selection before agent implementation distribution | proposed | 2026-09-08 | — |
 
-### D-002 v0.1.0 inventory
+#### Ports
 
-**Decision.** The first public release holds every `R1` inventory component
-(about 47 across all nine families) plus four composed specimens (settings
-panel, administrative form, filterable table, i3 window frame), each *specified*
-and *demonstrated*. Ten core components are also *tested*: button, link,
-text-field, select, checkbox, radio-group, tabs, dialog, menu, table.
+| # | Title | Status | Date | Decided by |
+| --- | --- | --- | --- | --- |
+| D-018 | Declared port capabilities and fresh import evidence | proposed | 2026-09-08 | — |
+| D-034 | Versioned Windows native and Windhawk adapters | accepted | 2026-09-28 | owner (explicit implementation plan) |
 
-**Consequences.** `R2` items and the form-builder specimen wait for v0.2.
+### D-000 Responsibility split
 
-**Status.** accepted · 2026-09-06 · owner.
+**Decision.** Token files own literal values and aliases; the specification
+owns meaning, permitted uses and constraints; port mappings own native keys;
+evidence records own what was tested. README, the site and pictures only
+summarise them. Rule: `AGENTS.md`, Source of truth.
 
-### D-003 Text-role corrections
+**Why.** With one owner per fact, a disagreement between spec and tokens is a
+defect to fix, not a choice, and neither images nor historical sources can
+override the adopted accessible design.
 
-**Decision.** `text.subtle` = `#AD7175` (5.10 / 4.96 / 4.67) for metadata,
-comments and line numbers. `text.disabled` = `#8A5559` (3.33 / 3.24 / 3.05;
-exempt under WCAG 1.4.3, at least 3:1 by house policy). `#A3676B` stays as
-`border.control`, `icon.decorative`, `status.neutral.fill` and `chart.series.4`
-(non-text, at least 3:1); `#7D1310` only as `border.disabled`, `code.whitespace`
-and minor grid lines, never text.
+**Status.** accepted · 2026-09-05 · owner (design package `ARCHITECTURE.md`).
 
-**Why.** `#A3676B` (the site's `--quiet`) measures 4.45:1 on `#0C0909` and
-`#7D1310` (`--inactive`) 1.86:1, yet the site used `#7D1310` for line numbers;
-its suggested `#A8403A` measures only 3.27:1.
+### D-002 v0.1.0 inventory
 
-**Consequences.** `heritage-ansi` keeps the original assignments, flagged
-`$deprecated`.
+**Decision.** The first public release holds every `R1` inventory component
+plus four composed specimens (settings panel, administrative form, filterable
+table, i3 window frame), each specified and demonstrated. Ten core components
+are also tested: button, link, text-field, select, checkbox, radio-group,
+tabs, dialog, menu, table. `R2` items and the form-builder specimen wait for
+v0.2.
 
 **Status.** accepted · 2026-09-06 · owner.
 
 ### D-004 Visibility and licensing
 
-**Decision.** The repository is public. MIT: code, tokens, schemas, scripts,
-tests, site source, generated JSON/CSS exports. CC BY 4.0: specification prose,
-specimens, generated Markdown exports. Screenshots under `references/`: all
-rights reserved, reference only.
-
-**Consequences.** Fonts, vendor template material and private business data are
-never committed; CI scans for them. See `LICENSE.md`.
+**Decision.** The repository is public: MIT for code, tokens, schemas and
+generated JSON/CSS; CC BY 4.0 for specification prose, specimens and generated
+Markdown; screenshots under `references/` are reference only, all rights
+reserved. Fonts, vendor template material and private business data are never
+committed; CI scans for them. Rule: `LICENSE.md`.
 
 **Status.** accepted · 2026-09-06 · owner.
 
@@ -8167,62 +7711,11 @@ renaming it later is a MAJOR version change.
 
 **Status.** proposed · 2026-09-06.
 
-### D-006 Focus-ring rule
-
-**Decision.** Controls and rows: `outline: 1px dashed
-{color.interaction.focus.ring}` (`#E53935`), `outline-offset: -2px`. Focusable
-containers (panes, windows, dialogs, cards): `outline: 2px solid
-{color.interaction.focus.ring-container}` (`#FFA2A7`), `outline-offset: -3px`.
-On any fill (selection, action, status) the ring takes the on-fill text colour;
-on invalid + focus, where the 2px danger border is already red, it takes
-`#FFA2A7` at `outline-offset: -4px`. `:focus:not(:focus-visible)` draws nothing;
-forced-colors mode uses `Highlight`. Selection is a fill, focus a ring.
-
-**Why.** `#E53935` on `#911410` measures 2.15:1.
-
-**Status.** proposed · 2026-09-06. Clarified by D-015 (declared component ring
-mappings on fills). Since D-027 a selected row (`#531310`, 3.38:1) takes the
-ordinary ring.
-
-### D-007 Control boundary colour
-
-**Decision.** `border.control` = `#A3676B` (4.45 / 4.33 / 4.07).
-
-**Why.** Control boundaries need 3:1 against their surface (WCAG 1.4.11);
-`#531310` (1.39) and `#9E231F` (2.56) fail.
-
-**Alternatives.** `#C81A1A` (3.42): too loud for every input at rest.
-
-**Status.** proposed · 2026-09-06.
-
-### D-008 Hairlines, sunken surface, overlay border
-
-**Decision.** The site's six near-identical hairlines (`#290D0C`, `#24100F`,
-`#321110`, `#38100F`, `#190B0B`, `#2B0E0D`) fold into `border.divider` =
-`#2B0E0D`. `#0A0707` becomes `surface.sunken`. Every floating layer (dialog,
-drawer, menu, popover, toast) takes a 1px `border.overlay` = `#E53935`.
-
-**Consequences.** The dunst frame `#AE1914` survives only in `heritage-ansi`.
-
-**Status.** proposed · 2026-09-06.
-
-### D-009 Density modes
-
-**Decision.** Density modes are tokens, set with `data-density` on any subtree.
-`compact` matches the site: control 24px, row 28px, UI type 12/16, icon 16, list
-gap 2. `comfortable`: control 32px, row 36px, UI type 13/18, icon 16, list gap
-4.
-
-**Consequences.** Both meet the 24×24 CSS-pixel target minimum; `compact` needs
-4px between adjacent targets.
-
-**Status.** proposed · 2026-09-06.
-
 ### D-010 Deployment source
 
-**Decision.** The site deploys from `main` through GitHub Actions after the full
-pipeline passes. The page header prints the version and build commit and links
-to the latest tag. Consumers still pin tags or commits.
+**Decision.** The site deploys from `main` through GitHub Actions after the
+full pipeline passes. The page header prints the version and build commit and
+links to the latest tag. Consumers still pin tags or commits.
 
 **Status.** proposed · 2026-09-06.
 
@@ -8230,756 +7723,626 @@ to the latest tag. Consumers still pin tags or commits.
 
 **Decision.** Crop the title bar (or redact the name) before committing a
 screenshot under `references/`, and disclose the redaction in its provenance
-record. If the owner prefers, screenshots stay out of the repository, described
-only in `references/catalogue.json`.
+record. If the owner prefers, screenshots stay out of the repository,
+described only in `references/catalogue.json`.
 
-**Why.** The four PhpStorm screenshots show a private project name in the title
-bar.
+**Why.** The four PhpStorm screenshots show a private project name in the
+title bar.
 
 **Status.** proposed · 2026-09-06.
 
 ### D-012 Committed exports
 
-**Decision.** `exports/`, `site/src/styles/tokens.generated.css`,
-`schemas/json/` and the README marker blocks are generated and committed; `npm
-run check` fails CI on drift or orphan files. No timestamps or commit hashes, so
-two runs are byte-identical. `dist/` is never committed.
+**Decision.** Generated files (`exports/`, `site/src/styles/tokens.generated.css`,
+`schemas/json/`, the README marker blocks) are committed and byte-identical
+across runs, with no timestamps or commit hashes; `npm run check` fails CI on
+drift or orphans. `dist/` is never committed. Rule: `AGENTS.md`, Source of
+truth.
 
 **Status.** proposed · 2026-09-06.
 
 ### D-013 Consumption eligibility is separate from approval
 
-**Decision.** In an approved default profile, pending roles may be used at a
-pinned revision with their pending decision IDs (dependencies included)
-disclosed. Proposed profiles are preview-only and blocked for delivery; heritage
-profiles are historical-only; deprecated or heritage roles cannot be newly
-mapped in an approved profile, and no substitute is implied. Observed/approved
-roles are usable within their documented scope; primitives are inspection-only.
-Release version, profile status, role status, deprecation and eligibility are
-separate facts; the generator emits the policy and eligibility metadata.
-
-**Why.** Issue #4 found conflicting instructions to use and to prohibit pending
-roles in the approved default profile.
+**Decision.** Eligibility is a separate fact from approval. In the approved
+default profile, pending roles may be used at a pinned revision when their
+pending decision IDs, dependencies included, are disclosed. Proposed profiles
+are preview-only, heritage profiles historical-only, and deprecated or
+heritage roles cannot be newly mapped. Nothing pending is approved. Rule:
+`agents/consume.md`, Pick a profile (generated policy).
 
-**Consequences.** Governs consumption only: no pending value is approved, and
-D-005 through D-012 are unchanged.
-
-**Alternatives.** Block pending roles until individually approved.
+**Why.** Issue #4 found conflicting instructions to use and to prohibit
+pending roles in the approved default profile. Rejected: blocking them until
+each is approved.
 
 **Status.** proposed · 2026-09-07 (formal log status remains owner-controlled).
 Owner direction, 2026-09-07, in Phase 1 planning: "Use and report", and "Block
 new use" for deprecated roles; implementation authorized.
 
-### D-014 Automatic inline literal color previews
+### D-028 Merge gates and the deployment gate are different suites
 
-**Decision.** Every visible CSS hex literal on the spec page gets one generated
-preview; the literal stays exact and is data, never inferred from a token or
-screenshot. The preview is 16px with its theme-derived 1px boundary, circular at
-rest; on CSS `:hover` it scales to 17.4px with radius zero (fast duration token
-and ease-out on transform and border-radius; none under reduced motion). Alpha
-shows over a checkerboard of theme tokens. Only this preview may use rounded
-geometry, patterned gradient backgrounds and border-radius animation. Text,
-copying, keyboard order and no-JS access stay intact. Syntax specimens `#f00`,
-`#f008`, `#ff0000`, `#ff000080`, `#000000`, `#ffffff` (literal data, not roles)
-also test copy fidelity and transparent, dark and light previews in the browser
-suite.
+**Decision.** The full browser and packed-consumer matrix gates deployment,
+not merging: it runs on `main` before `deploy` and on demand through the
+workflow dispatch. A subset never writes evidence; it uses the plain list
+reporter, because the evidence reporter would publish a matrix that only
+looked complete. Packed consumers run with the browser suite, and
+`scripts/ui-verification-report.mjs` requires their complete protocol on all
+three engines. No mandatory local gate: `npm run test:all` is recommended,
+never verified (`AGENTS.md`, The check loop).
+
+**Why.** Accepting D-026 and D-027 cost 29.5 minutes of CI before merge, 84%
+of it the browser matrix. A browser failure stops publication, not a correct
+merge; a local receipt proves only that something wrote it. Rejected:
+sharding before merge (partial evidence files) and packed consumers on the
+merge path.
 
-**Why.** Issue #1 asks for circular previews and a transparency checkerboard,
-against the square and no-gradient rules.
+**Status.** accepted · 2026-09-11 · owner: merges gate on a few minutes of
+checks, the full matrix gates deployment, a local full run stays recommended.
+Superseded in part by D-031 (path-selected pull-request checks, a sharded
+deployment matrix with one evidence report, `release-gate` as the only required
+check); the rules above still hold.
 
-**Consequences.** Literal-data presentation only: no new palette, semantic role
-or geometry rule.
+### D-031 Select the checks a change needs; shard the deployment matrix
 
-**Status.** proposed · 2026-09-07 (formal log status remains owner-controlled).
-Owner direction, 2026-09-07: the narrow exception explicitly approved,
-implementation authorized.
+**Decision.** CI is `select` → checks → `release-gate`. The rules stay here:
+no spec section or guide owns CI, and `scripts/ci/select.mjs` and `AGENTS.md`
+carry only parts.
 
-#### Follow the pointer hovering effect
+- `select` reads the changed paths and `scripts/ci/proofs.json`; a path gets
+  cheaper only when a rule claims it. Unclaimed paths and control files
+  (workflows, the selector and registry, `package.json`, the lockfile, the
+  Playwright configs) run every check. On a pull request the base commit's
+  control list also applies, so a change cannot make itself cheaper. A file a
+  browser spec imports runs that spec and counts as a site change.
+- A pull request runs only the selected checks, unit tests and build in
+  parallel; browser subsets write no evidence (D-028).
+- A push to `main` that changes the site runs the whole matrix in shards
+  (desktop in four parts; projects read from the Playwright config), with
+  packed consumers in parallel. Blob reports merge once into the evidence
+  reporter, which refuses a missing shard or configured test; then the
+  verification report and deployment. No site change, no deployment. Changed
+  paths count from the last commit that reached Pages.
+- `release-gate`, the only required check, recomputes the plan from Git with
+  the same code and checks each job ran as planned and passed.
+- `fullyParallel`, two workers per CI job, zero retries. The page axe scan is
+  two tests (colour contrast; every other rule) covering exactly the tagged
+  rules. Only an unnarrowed `playwright test`, or the merge of every shard,
+  writes evidence.
 
-Part of this exception only; the tooltip and focus contracts are unchanged.
-Mouse and pen pointers open a non-interactive popup with the exact value; touch
-and unknown pointers do not. CSS `:hover` alone drives the morph; neither uses
-the `hover` or `any-hover` media features, which can report no hover despite
-mouse input. The popup follows the pointer inside the circle at an 8px gap,
-flips when necessary and stays within an 8px viewport gutter, bounded by the
-viewport. It closes at once when the pointer leaves the circle, on an outside
-press, Escape or loss of window focus, and after page or nested-container
-scrolling unless the same circle is still under the last pointer position. It
-cannot capture input or hold itself open and adds no keyboard stop; token tables
-and the keyboard-accessible token inspector keep the persistent information and
-links. Tracking has no animation or easing, even under reduced motion. Circles
-and literal text stay visible without JavaScript.
+**Why.** `main` ran every check whatever changed: a terminal-kit-only change
+took 63 minutes to deploy, and the browser suite ran on one worker for 24.7
+minutes. Merged blob reports remove D-028's objection to sharding. Rejected: a
+self-hosted runner (fork pull requests could run code on it), reusing
+pull-request evidence on `main` (the build stamps the commit), Playwright's
+internal shard weights (not public).
 
-### D-015 Clarify component mappings exposed by consumption acceptance
+**Status.** accepted · 2026-09-26 · owner, who found thirty-minute runs on
+`main` unacceptable and asked for classified checks modelled on theselfish.one.
+Supersedes D-028 in part.
 
-**Decision.** Keep current component appearance and all token values. Ordinary
-confirmation uses the primary tone; destructive tone is for destructive actions,
-whatever the confirmation's semantic role. A pressed primary button keeps
-`color.action.primary.border`, secondary and tertiary use `color.border.active`,
-destructive keeps its declared border; the generic metadata is corrected to
-match. Controls keep their documented ring mappings (primary and
-checked/selected fills: `color.interaction.focus.ring-container` where declared;
-destructive fills: their on-fill text role). The global wording points to them,
-keeping ring geometry, forced-colors behavior and every contrast floor.
+### D-001 Controlled three-hue extension
 
-**Why.** Phase 2's independently reviewed composed acceptance preserved these
-three contradictions; Phase 3 controls must not present an arbitrary
-interpretation as canonical.
+**Decision.** `default` adds three desaturated, warm-shifted hues: amber
+`#C9973F` (warning, modified), green `#86A46F` (success, added), blue
+`#7E9EBB` (info), with dark tints `#1F1A0C`, `#0F1A0E`, `#0F141C`. They serve
+status, diagnostics and diffs only (plus code, terminal and chart in
+`extended`). Rule: `spec/foundations.md`, Status, diagnostics and diffs.
 
-**Consequences.** No profile or pending-token approval; historical acceptance
-reports stay historical evidence.
+**Why.** Lightness alone cannot separate diagnostics, diffs and status (a
+200-line diff cannot be scanned by glyph); the owner's PhpStorm scheme already
+uses such hues.
 
-**Alternatives.** Enforce the generic prose everywhere, or mark affected
-workbench configurations unresolved.
+**Status.** accepted · 2026-09-06 · owner. Superseded in part by D-030 (opt-in
+`code.hued.*`; `code.syntax.*` stays monochrome).
 
-**Status.** proposed · 2026-09-07. The owner directed application on 2026-09-07;
-formal status remains owner-managed.
+### D-003 Text-role corrections
 
-### D-016 Pinned release comparison report and historical rendering
+**Decision.** `text.subtle` = `#AD7175` for metadata, comments and line
+numbers; `text.disabled` = `#8A5559`. `#A3676B` and `#7D1310` keep only
+non-text roles; `heritage-ansi` keeps the original assignments, flagged
+`$deprecated`. Rule: `spec/foundations.md`, Text ladder.
 
-**Decision.** A report (schema version 1) records both immutable revisions,
-profile and input digests, separate semantic change categories, explicit
-dependency evidence and unsupported historical inputs. Reports and historical
-specimen renderings are build artifacts in `dist/releases/`; canonical exports
-keep their contract. History is read from Git, never executed as a build or
-imported as a module. The shared specimen renderer draws each side's maintained
-markup and styles (documented renderer version, matched conditions): a
-reconstructed reference, not evidence that an old site's JavaScript or an
-external port ran. Browser captures are run evidence with environment and
-artifact hashes; missing evidence stays not run. A rename needs an explicit
-mapping naming both revisions; equal values do not establish one.
+**Why.** `#A3676B` (the site's `--quiet`) falls just short of the text floor
+and `#7D1310` (`--inactive`) far short, yet the site used `#7D1310` for line
+numbers; its suggested `#A8403A` failed too.
 
-**Why.** Run metadata must stay out of deterministic exports, and missing
-historical fields must not be read by today's rules.
+**Status.** accepted · 2026-09-06 · owner.
 
-**Consequences.** No design values, eligibility rules or verification statuses
-change.
+### D-007 Control boundary colour
 
-**Alternatives.** A raw file diff (no semantic categories) or running historical
-applications (a wider trust boundary).
+**Decision.** `border.control` = `#A3676B`.
 
-**Status.** proposed · 2026-09-08. Issue #2 authorizes derived release
-diagnostics; formal status and all theme approvals remain owner-managed.
+**Why.** Control boundaries need 3:1 against their surface (WCAG 1.4.11):
+`#531310` and `#9E231F` fail, and `#C81A1A` is too loud for every input at
+rest.
 
-### D-017 Private framework parity evidence
+**Status.** proposed · 2026-09-06.
 
-**Decision.** An independently authored private harness takes an
-operator-supplied licensed target and an explicit license review, copies only
-declared template inputs into a new private fixture directory, uses synthetic
-examples and records exact theme, template, framework, dependency and fixture
-identities. The target and its application behavior stay outside its write scope; browser captures, copied
-vendor inputs and detailed results stay private; missing prerequisites give
-not-run output.
+### D-008 Hairlines, sunken surface, overlay border
 
-**Consequences.** A successful diagnostic run is not a verified port or a claim
-of complete visual parity.
+**Decision.** The site's six near-identical hairlines fold into
+`border.divider` = `#2B0E0D`; `#0A0707` becomes `surface.sunken`; every
+floating layer takes a 1px `border.overlay` = `#E53935`. The dunst frame
+`#AE1914` survives only in `heritage-ansi`. Rule: `spec/foundations.md`,
+Borders.
 
-**Alternatives.** A public vendor copy (breaks the license boundary) or a
-generic mock presented as template evidence.
+**Status.** proposed · 2026-09-06.
 
-**Status.** proposed · 2026-09-08. Issue #3 authorizes the harness; approval
-statuses and license boundaries are unchanged.
+### D-023 True Black / Rose canonical foundation
 
-### D-018 Declared port capabilities and fresh import evidence
+**Decision.** Seven surface roles change: canvas, sunken, input,
+`surface.code` and `surface.terminal` take the existing pure black; chrome
+takes `#090707` and default panels `#100c0c`, as new primitives
+`color.primitive.ink.14` and `ink.28`. Everything else stays as reviewed, the
+historical profile keeps its surfaces, and the A–I candidate reviews stay
+local evidence. It approves nothing else and ships in 1.0.0 as a major change.
+Rule: `spec/foundations.md`, Surfaces.
 
-**Decision.** Optional `capabilities.json` refines each mapped/unmapped role
-into mapped, inherited, unsupported, out-of-scope or not-implemented, with a
-surface and reason; legacy unmapped reasons stay unclassified, never guessed.
-Import verification is separate from mapping state and declared status: verified
-output needs a recorded real-import protocol bound to current target metadata,
-canonical tokens, mappings, capabilities and artifact bytes. Relevant changes
-make evidence stale; failed or missing checks cannot pass. One generated
-catalogue feeds summaries, drill-downs and task kits; private parity records
-never enter it automatically.
-
-**Alternatives.** A hand-maintained support matrix, or a parse treated as an
-import.
+**Why.** The owner explicitly selected the reviewed candidate I: "use the True
+Black / Rose theme and make it permanent for j3w1/theme".
 
-**Status.** proposed · 2026-09-08. Issue #14 authorizes a derived mapping
-explorer; it creates no port, changes no host capability and approves no
-profile.
+**Status.** accepted · 2026-09-08 · owner, who also authorized the remaining
+Phase 6 implementation. Superseded in part only: D-024 (`text.link`), D-026
+(`action.primary.bg`), D-027 (`surface.raised`, `interaction.selection.bg`,
+`text.placeholder`).
 
-### D-019 One-way namespaced Figma Variables bridge
+### D-026 Primary action fill darkens off heritage ANSI 12
 
-**Decision.** An explicit pinned revision supplies colors and scalar
-spacing/radius values, one way. Aliases keep their dependency structure;
-dependency-only primitives are hidden from property pickers; unsupported types
-and non-approved profiles are reported. One collection and one mode avoid
-assuming paid mode capabilities. Dry-run is read-only, apply explicit; import
-receipts identify owned IDs and their last observed values; conflicts and manual
-edits stop an update or rollback. The bridge never stores ownership in
-unsupported plugin data, overwrites unrelated variables or writes back to the
-repository.
+**Decision.** `color.action.primary.bg` aliases the existing
+`color.primitive.red.200` (`#7d1310`) instead of `red.300`; pressed `#630f0d`
+stays below it and hover `#911410` above. No colour is minted. The decorative
+pair `primary fill against the panel` stays waived (the label identifies the
+button); no waiver is added or widened. Rule: `spec/foundations.md`, Actions.
 
-**Alternatives.** Manual duplicate maintenance, a paid-only REST workflow, or
-flattening aliases/composites.
+**Why.** The owner asked for a slightly darker fill on primary actions.
+`red.300` is also heritage ANSI 12, which `schemas/roles.mjs` pins, so it
+could not darken without repainting the terminal's bright red. Rejected: a new
+primitive, or a darker portal button alone (a value outside `tokens/`).
 
-**Status.** proposed · 2026-09-08. Issue #15 authorizes this bounded adapter;
-approval and eligibility follow the canonical source.
+**Status.** accepted · 2026-09-11 · owner (accepted as implemented after
+review). Supersedes D-023 only for `action.primary.bg` (`#871f19`, kept "exactly
+as reviewed" under its red actions clause).
 
-### D-020 Bounded local validation and recovery workflow
+### D-027 Recede the interactive chrome
 
-**Decision.** One executable pattern: editing, invalid, review, busy, success.
-Validation runs on explicit submission, keeps values and shows linked errors;
-typing does not rewrite live announcements. Review can return to a field;
-confirm enters busy, a separate local simulation-completion event enters
-success, and no request is made. The workstation example's reserved name and
-hostname are local fixture conflicts, not business policy. The contract pins
-constituent component content digests and reports automated evidence apart from
-manual screen-reader acceptance.
+**Decision.** Four roles move to existing palette values; no colour is minted
+and no waiver is added or widened.
 
-**Alternatives.** A color-only invalid snapshot, validation on every keystroke,
-or a submit click treated as a successful save.
+- `surface.raised`: `ink.30` (`#160b0b`), so an open list reads as depth.
+- `interaction.selection.bg`: `red.100` (`#531310`); the 2px
+  `border.selected-indicator` and the check glyph carry selection, not the
+  fill.
+- `text.placeholder`: `rose.350` (`#a3676b`), over the text floor on
+  `surface.input` without a waiver.
+- Links hover on `interaction.hover.bg`; menu items keep
+  `interaction.hover.bg-strong`.
 
-**Status.** proposed · 2026-09-08. Issue #16 authorizes one pattern from
-existing admin-form, field, alert and button rules, without new palette roles.
+A selected row now takes the ordinary ring; primary and danger fills keep the
+recoloured one. Rule: `spec/foundations.md`, Interaction states, rule 1.
+D-006 stays as written.
 
-### D-021 Local form composition with versioned data
+**Why.** The owner found the open list, selected row, placeholder and link
+hover louder than the content they sit against. Rejected: darkening only the
+pointed-at components, or adding intermediate primitives.
 
-**Decision.** Five canonical field kinds can be added, edited, removed and
-reordered with buttons. Definitions, preview values and validation state are
-separate. JSON imports have closed fields, bounded size/counts and unique stable
-IDs; a failed import changes nothing. Content identity pins the supplying theme
-and component contracts; downloads hold definitions, never entered values.
-Rendering and validation reuse D-020.
+**Status.** accepted · 2026-09-11 · owner (accepted as implemented after
+review). Supersedes D-023 only for `surface.raised` (`#241010`),
+`interaction.selection.bg` (`#911410`) and `text.placeholder` (`#bd787d`).
 
-**Consequences.** A draft reference component, not a backend platform or native
-port.
+### D-029 Readable terminal and code reds
 
-**Alternatives.** Arbitrary HTML/schema execution, a conditional workflow
-engine, or a second field implementation.
+**Decision.** `default` carries a readable heritage sixteen: each slot below
+the text floor keeps its hue and saturation and gains HSL lightness, in the
+heritage light-to-dark order. Slot 8 (bright black) stays the dim tier. Slots
+0, 2, 3, 5, 7 and 11 already passed.
 
-**Status.** proposed · 2026-09-08. Issue #19 authorizes the deferred
-form-builder demonstration.
+| slot | heritage | default profile |
+| --- | --- | --- |
+| 1 | `#c81a1a` | `#e84b4b` |
+| 4 | `#8c1212` | `#e53131` |
+| 6 | `#9e474a` | `#bb696c` |
+| 8 | `#7d1310` | `#b71c17` (dim tier) |
+| 9 | `#ab1612` | `#ea3833` |
+| 10 | `#ad2721` | `#dc4f49` |
+| 12 | `#871f19` | `#db433a` |
+| 13 | `#e82132` | `#ed5360` |
+| 14 | `#e0292f` | `#e6565a` |
+| 15 | `#a3676b` | `#b17e81` |
+
+Syntax reds lift: `code.syntax.keyword` and `tag` to `#f7463c`
+(`color.primitive.red.860`), `property`, `heading` and `invalid` to `#e95551`
+(`color.primitive.red.810`). Interface reds are unchanged. New role
+`color.terminal.prompt-text` colours the prompt's path segment. Rule:
+`spec/foundations.md`, Code and terminal.
 
-### D-022 Local visual selection before agent implementation distribution
+**Why.** In Orca, Claude Code and Codex the owner found the reds right but too
+dim: Claude Code's inline code uses slot 12, code-block keywords and Codex git
+branches slot 4, both far under 3:1. Ten of the sixteen slots failed the text
+floor, and programs, not the theme, pick the slot. Rejected: the heritage
+slots, the `extended` palette (the owner keeps the red and rose families), a
+gentle lift leaving slots 4 and 12 near 3:1, and an OKLCH lift (gamut clipping
+drifts toward raspberry).
 
-**Decision.** Before canonicalization a local harness compares exactly three
-explicit token overlays with Current, using shared specimen rendering and an
-original Vue composition. Overlays, reports and review builds stay ignored,
-never public profiles or delivery artifacts. The existing alias resolver and
-unrounded contrast engine judge candidates without changing canonical values,
-historical ANSI slots or waivers. Numbers and browser evidence approve nothing:
-the owner selects a concrete candidate before foundation freeze, mass
-productization or deployment. See `docs/phase6-visual-review.md`.
+**Status.** accepted · 2026-09-26 · owner, who chose the values, asked for the
+change and approved this entry by selecting them. Superseded in part by D-032:
+slot 6 is coral `#ff7a66`, not `#bb696c`; the prompt gets
+`color.terminal.prompt-bg` (heritage `#8c1212`) with `#ffa2a7` text in
+`default`.
 
-**Why.** Agents need installable or copyable components and compositions with
-complete dependencies and pinned contracts, shared by the future package,
-documentation portal and Vue application.
+### D-030 Hued syntax roles for opt-in code highlighting
 
-**Alternatives.** Productizing the old palette first, unapproved preview
-profiles, or appearance-only snippets.
+**Decision.** `default` gains opt-in `color.code.hued.*` roles carrying the
+`extended` code hues; keywords, tags, comments, variables and punctuation keep
+`code.syntax`. Consumers keep `code.syntax.*` unless a host opts in by mapping
+`code.hued.*`, as the Codex port does. This extends D-001's code allowance to
+these roles only; `extended` stays proposed. Rule: `spec/foundations.md`, Code
+and terminal.
 
-**Status.** proposed · 2026-09-08. Issue #37 and the owner's implementation
-instruction authorize three local candidates; design approval remains
-owner-managed. The selection is D-023.
+**Why.** The owner found Codex's code "too boring and single-coloured"; D-001
+allowed code hues only in the proposed `extended` overlay, which is blocked
+for delivery. Approving all of `extended` would reassign terminal slots too.
 
-### D-023 True Black / Rose canonical foundation
+**Status.** accepted · 2026-09-26 · owner, who chose the extended hues.
 
-**Decision.** Seven surface assignments change: canvas, sunken, input, code and
-terminal use the existing pure black primitive; chrome uses `#090707`; default
-panels use `#100c0c`. The two new values become `color.primitive.ink.14` and
-`color.primitive.ink.28`, keeping luminance order and all historical primitives.
-Everything else stays exactly as reviewed (rose/white foreground, red actions,
-focus, borders, selections, status and chart roles); raised/overlay stay
-`#241010`, alternate chrome `#1c0a09`. The historical profile keeps its previous
-surfaces.
+### D-032 Coral slot 6 and a fixed prompt background
 
-**Why.** The owner explicitly selected the reviewed candidate I: "use the True
-Black / Rose theme and make it permanent for j3w1/theme".
+**Decision.**
 
-**Consequences.** Approves these surfaces only, not other pending decisions, new
-colors or accessibility waivers. The rejected A/B/C, revised D/E/F and final
-G/H/I reviews are historical local evidence, not public profiles. Foundation for
-the Phase 6 package, copy distributions, static portal and Vue showcase; ships
-in 1.0.0 under the major-version rule, existing pins immutable.
+- Slot 6 is coral `#ff7a66` (`color.primitive.coral.700`): warm and vivid,
+  apart from the rose text, without taking amber's code role. Brightening it
+  so that dimmed coral passes is ruled out.
+- New role `color.terminal.prompt-bg` is heritage `#8c1212`
+  (`color.primitive.ansi.4`) in every profile. `color.terminal.prompt-text` is
+  bright rose `#ffa2a7` in `default` and `extended`, `#f4eeee` in
+  `heritage-ansi`.
 
-**Status.** accepted · 2026-09-08 · owner, who also authorized the remaining
-Phase 6 implementation. Superseded in part only: D-024 (`text.link`), D-026
-(`action.primary.bg`), D-027 (`surface.raised`, `interaction.selection.bg`,
-`text.placeholder`).
+Rule: `spec/components/terminal.md`, Accessibility and Portability.
 
-### D-024 Distinguish links from body text and headings
+**Why.** Claude Code highlights fenced code with fixed ANSI slots: PowerShell
+cmdlets took slot 6 (`#bb696c`, nearly the rose text), and dimmed types fell
+far under the floor. Agnoster's directory segment sits on slot 4, which D-029
+brightened, so its slot-7 text fell under 3:1; the owner's PowerShell shows
+`#ffa2a7` on `#8c1212`, the look to keep. Rejected: peach `#ffab91`, blush
+`#ffc2c5` or amber `#e0a84a` for slot 6; dark text on the bright slot 4; the
+heritage palette in SSH shells (palettes should match across hosts).
 
-**Decision.** `color.text.link` maps to the existing strong red `#f73f35`,
-keeping the persistent red underline and near-white hover text on the strong
-dark-red hover fill. Visited links keep color and underline; current-page and
-selected navigation keep their on-fill roles; body and heading colors are
-unchanged.
+**Status.** accepted · 2026-09-26 · owner, who saw both problems in real use and
+chose the values. Supersedes D-029 in part.
 
-**Why.** In the implementation preview the owner asked for links more
-distinguishable from normal text, using different colors.
+### D-035 An accent surface for the user's own content
 
-**Consequences.** No new primitive, status hue, contrast exception or focus
-rule; the historical profile keeps the old link; ships in the same unreleased
-1.0.0.
+First recorded as D-034 and renumbered before merge, because PR #69 held D-033
+and D-034.
+
+**Decision.** New role `color.surface.accent` for the user's own content set
+apart from neighbouring surfaces, such as outgoing chat messages, valued at a
+new primitive `color.primitive.red.40` (`#3d0c0a`). Secondary text on it uses
+`text.muted`, because `text.subtle` misses the floor there. Rule:
+`spec/foundations.md`, Surfaces; port use in `spec/portability.md`, Native
+ports.
+
+**Why.** In live acceptance on Android and Windows the owner found their own
+messages too hard to tell from other people's (`#241010` against `#160b0b`,
+ΔE 7.4). Reusing `#2b0e0d` (ΔE 12.6) was still too subtle; from four options
+rendered in real colours (`#241010`, `#2b0e0d`, `#330b09`, `#3d0c0a`) the
+owner chose the deepest, just under the ceiling red links set. Not chosen:
+`#330b09` (ΔE 18.6, though it keeps `text.subtle` readable); incoming on
+`surface.default` (nearly merges with the wallpaper); `status.danger.tint`
+(the wrong meaning).
 
-**Alternatives.** Bright rose (the heading color) or blue/purple (an unrelated
-hue).
+**Status.** accepted · 2026-10-06 · owner, who saw the problem in real use,
+rejected the first value after a second look, and chose `#3d0c0a` from the
+side-by-side comparison.
 
-**Status.** accepted · 2026-09-08 · owner, correcting D-023 for links only.
-D-027 later moves link hover to `interaction.hover.bg`.
+### D-036 A translucent text-selection tint
 
-### D-025 Theme interactive controls throughout the portal and demo
+First recorded as D-035 and renumbered before merge (see D-035).
+
+**Decision.** New role `color.interaction.text-selection.tint` for hosts that
+keep the text colour inside a selection, valued at a new primitive
+`color.primitive.alpha.red-50`: the text-selection red `red.350` (`#911410`)
+at 50%. Being translucent, it also suits hosts that paint the fill over their
+content. Rule: `spec/foundations.md`, Interaction states; limits in
+`spec/accessibility.md`, Limitations; port use in `spec/portability.md`,
+Native ports.
+
+**Why.** On Android the owner found selected text barely visible in the
+message field: the 12% `interaction.marquee` was ΔE 5.2 from the field. The
+first fix, opaque `interaction.selection.bg`, hid content on pinned Telegram
+paths that paint the fill after it (rich-editor tables, captions and media
+blocks; the rich-message translation preview, found by review r10) and was ΔE
+10.2 on the outgoing bubble. The owner compared it with the tint at 40, 50 and
+60% in the message field, both bubbles and a rich-editor photo, and chose 50%.
+Rejected: 40% (ΔE 17.8 on the accent surface, near the 18.6 rejected for
+bubbles); 60% (links lower still, media dimmer); opaque `text-selection.bg`
+(rose text falls under the floor, because Android cannot recolour it). Review
+r11 found the over-the-text limit after the owner's choice.
 
-**Decision.** The maintained select renders its single-choice popup and
-multiple-choice list in theme-owned DOM with the existing selection, surface,
-text, border and focus roles; the native select remains the form-value and
-constraint source and the no-JavaScript fallback. It follows the select-only
-combobox and multiple listbox keyboard patterns, keeps labels, disabled
-options/fieldsets, native input/change events, defaults and form reset, and
-documents its tested scope. The same enhancement serves existing application
-controls, the portal, the Vue demo, consumption docs and copy closures; input,
-button, checkbox, radio, range and file chrome is themed too. Date inputs get a
-theme-owned text editor and calendar, time inputs text entry and theme-owned
-step buttons; native inputs keep constraints and values. Browser-owned system dialogs and
-no-JavaScript fallbacks stay native, without platform hacks; native ports keep
-their mappings. The command field fills its dialog width below its label.
+**Status.** accepted · 2026-10-06 · owner, who saw the problem in real use and
+chose 50% from the side-by-side comparison after the review rejected the opaque
+fill.
 
-**Why.** Seeing native blue selections in the work board and agent-kit picker,
-the owner explicitly instructed: "replace mostly all native components like
-`<select>` we must use all j3w1 themed", and asked for a properly proportioned
-command-search field.
+### D-009 Density modes
 
-**Consequences.** Supersedes the select spec's ban on replacing the host popup
-(web implementations) and the date/time specs' host-popup descriptions (enhanced
-web implementations). Ships in 1.1.0; 1.0.0 pins stay immutable. No new hues,
-focus rules, accessibility waivers or license changes.
+**Decision.** Density modes are tokens, set with `data-density` on any
+subtree: `compact` matches the site, `comfortable` suits everyday
+applications. Rule: `spec/foundations.md`, Spacing and density.
 
-**Alternatives.** Advisory option CSS (the blue selection stays) or one-off
-dropdowns (duplicated behavior).
+**Status.** proposed · 2026-09-06.
 
-**Status.** accepted · 2026-09-09 · owner.
+### D-033 Rose prose, semantic content headings and inherited bold
 
-### D-026 Primary action fill darkens off heritage ANSI 12
+**Decision.** Interface, body and long-form prose use rose `#e99499`;
+`text.prose` aliases `text.default`, and `text.bright` `#ffa2a7` stays for
+brighter UI labels. New `text.heading` (content titles and H1–H6) and
+`text.highlight` use the existing paper `#f4eeee`. Bold changes weight only
+and inherits its semantic foreground.
+Primary action labels are bright rose in every state; on-fill text keeps paper
+`#f9faf9` where contrast needs it. Version 4.0.0 ships it; historical ANSI
+slots, decision records, waivers and contrast floors are unchanged. Rule:
+`spec/foundations.md`, Text ladder and Typography semantics; audit in
+`docs/rose-typography-migration.md`.
+
+**Why.** White prose and white bold overwhelmed the rose identity, and prose
+was an ambiguous alias for white. Headings are distinguished by typography,
+not by turning lower headings into body text. Rejected: Obsidian-only
+overrides, white bold and rose lower headings.
 
-**Decision.** `color.action.primary.bg` aliases the existing
-`color.primitive.red.200` (`#7d1310`) instead of `color.primitive.red.300`; no
-colour is minted.
+**Status.** accepted · 2026-09-28 · owner, explicit instruction and implementation
+plan approval. Supersedes earlier near-white prose descriptions and bright/red
+content-heading assignments; updates D-026's primary foreground only.
 
-**Why.** The owner asked for a slightly darker fill on primary actions such as
-the portal's `Explore components` button. `color.primitive.red.300` is also
-`color.primitive.ansi.12` and `color.terminal.ansi.12`, and `schemas/roles.mjs`
-pins every `color.primitive.ansi.<i>` to its heritage value, so it cannot darken
-without repainting the terminal's bright red.
+### D-037 Display and title type sizes
 
-**Consequences.** Label contrast rises from 8.17:1 to 9.28:1, the ring over the
-fill from 4.90:1 to 5.57:1. Pressed `#630f0d` stays below, hover `#911410`
-above. The decorative waiver `primary fill against the panel` goes from 2.07:1
-to 1.83:1 (the label identifies the button); no waiver is added or widened.
+**Decision.** Two type roles join the scale: `font.size.display` with
+`font.line-height.display` (32/40) for page heroes and metric figures, and
+`font.size.title` with `font.line-height.title` (24/32) for page titles above
+h1. Portal pages use them instead of literal sizes; components keep h1–h3.
+Rule: `spec/foundations.md`, Typography.
 
-**Alternatives.** A new primitive at the exact value, or a darker portal button
-only (a value outside `tokens/`, against the confirmation-only rule in
-`theme.json`).
+**Why.** The portal set 48, 32, 24, 22 and 18px outside the token scale. The
+owner chose token sizes over shrinking every heading to h1 (planning,
+2026-10-14), or page-local literal sizes.
 
-**Status.** accepted · 2026-09-11 · owner (accepted as implemented after
-review). Supersedes D-023 only for `action.primary.bg` (`#871f19`, kept "exactly
-as reviewed" under its red actions clause).
+**Status.** accepted · 2026-10-14 · owner (G2 authority review). The owner
+asked for display type tokens in planning.
 
-### D-027 Recede the interactive chrome
+### D-038 Compact is the default density
 
-**Decision.** Four roles move to existing palette values; no colour is minted.
-`surface.raised`: `ink.30` (`#160b0b`), was `ink.52`; an open list reads as
-depth, distinct from `surface.default` (`#100c0c`). `interaction.selection.bg`:
-`red.100` (`#531310`), was `red.350`; text on it rises from 7.92:1 to 12.47:1.
-`text.placeholder`: `rose.350` (`#a3676b`), was `rose.600`; 4.71:1 on
-`surface.input`, over the 4.5:1 floor without a waiver. Links hover on
-`interaction.hover.bg`, not `interaction.hover.bg-strong`, which menu items
-keep.
-
-**Why.** The owner found the open list, selected row, placeholder and link hover
-louder than the content they sit against.
-
-**Consequences.** The fill never carried selection (2.00:1 at `#911410` against
-the raised surface, under the 3:1 non-text minimum); the unchanged 2px
-`border.selected-indicator` and check glyph do, per `spec/foundations.md`. The
-report still has 954 pairs, 17 waived, none failing; no waiver is added or
-widened. The ring measures 3.38:1 on `#531310` (2.15:1 on `#911410` was D-006's
-reason to recolour), so a selected row takes the ordinary 1px dashed ring, not
-the 2px solid container ring; `action.primary.bg` (2.52:1) and
-`status.danger.fill` (1.13:1) keep the recoloured ring. `spec/foundations.md`
-was corrected (its stale 2.15:1 reason); D-006 stays as written. `tests/foundation-selection.test.js`
-guards the set.
-
-**Alternatives.** Darken only the pointed-at components, or add intermediate
-primitives.
+**Decision.** `compact` is the default density for components, the site and
+copied bundles: the density variables carry the compact values wherever no
+`data-density` is set. `comfortable` stays available as an opt-in on any
+subtree. The site chrome is compact.
 
-**Status.** accepted · 2026-09-11 · owner (accepted as implemented after
-review). Supersedes D-023 only for `surface.raised` (`#241010`),
-`interaction.selection.bg` (`#911410`) and `text.placeholder` (`#bd787d`).
+**Why.** The owner, reviewing the redesigned site: "keep components compacted
+by default, j3w1/theme default is compacted components", and "if it is not
+stated that default is compaction, then standardize it in j3w1/theme". Before
+this, only `[data-density]` blocks defined the variables, so unset subtrees fell
+back to per-component values that were the comfortable ones.
 
-### D-028 Merge gates and the deployment gate are different suites
+**Status.** accepted · 2026-10-14 · owner (explicit instruction at the G1
+design review). Builds on D-009 (proposed), which defines the two modes.
 
-**Decision.** The full browser and packed-consumer matrix gates deployment, not
-merging; it runs on `main` before `deploy` and on demand through the workflow
-dispatch. A subset never writes evidence: it uses the plain list reporter,
-because the evidence reporter would mark unselected tests not run and publish a
-matrix that only looked complete. Packed consumers move with the browser suite,
-which republishes their evidence against the deployed package;
-`scripts/ui-verification-report.mjs` requires the complete protocol on all three
-engines. No mandatory local gate: `npm run test:all` is recommended, never
-verified; the practice is recorded in `AGENTS.md`.
-
-**Why.** Accepting D-026 and D-027 cost 29.5 minutes of CI before merge (sources
-0.6 minutes, build 0.7, packed consumers 3.3, browser matrix 24.9: 84% of the
-wait), pure latency on a public repository. A browser failure stops publication,
-not a correct merge; a local receipt proves only that something wrote it.
-
-**Consequences.** As first recorded, pull requests merged on `validate`, `build`
-and a new `smoke` job (desktop project; page, portal, button and text-field
-specs; plain list reporter): the built site loads under its base path, renders
-from the tokens and takes a keyboard. `smoke` is never a coverage claim.
-
-**Alternatives.** Sharding before merge (about six minutes, bounded by the
-largest spec file, partial evidence files) or consumers on the merge path (three
-more minutes).
+### D-006 Focus-ring rule
 
-**Status.** accepted · 2026-09-11 · owner: merges gate on a few minutes of
-checks, the full matrix gates deployment, a local full run stays recommended.
-Superseded in part by D-031 (path-selected pull-request checks, a sharded
-deployment matrix with one evidence report, `release-gate` as the only required
-check); the rules above still hold.
+**Decision.** Two rings: controls and rows take a 1px dashed
+`interaction.focus.ring`, focusable containers a 2px solid
+`interaction.focus.ring-container`. On a fill the ring takes the on-fill text
+colour; on invalid + focus it takes `ring-container` at the invalid offset;
+forced colours use `Highlight`. Selection is a fill, focus a ring. Rule:
+`spec/foundations.md`, Interaction states, rules 1–2.
 
-### D-029 Readable terminal and code reds
+**Why.** The red ring vanishes on red fills: `#E53935` on `#911410` falls
+under 3:1.
 
-**Decision.** `default` carries a readable heritage sixteen: each slot below the
-text floor keeps its hue and saturation with its HSL lightness raised, in the
-heritage light-to-dark order. Slot 8 (bright black) stays the deliberately dim
-tier at about 3:1, the dark-red decorative and background slot.
+**Status.** proposed · 2026-09-06. Clarified by D-015 (declared component ring
+mappings on fills). Since D-027 a selected row (`#531310`, 3.38:1) takes the
+ordinary ring.
 
-| slot | heritage | default profile | contrast on `#0c0909` |
-| --- | --- | --- | --- |
-| 1 | `#c81a1a` | `#e84b4b` | 3.42 → 5.23 |
-| 4 | `#8c1212` | `#e53131` | 2.09 → 4.55 |
-| 6 | `#9e474a` | `#bb696c` | 3.26 → 5.05 |
-| 8 | `#7d1310` | `#b71c17` | 1.86 → 3.01 (dim tier) |
-| 9 | `#ab1612` | `#ea3833` | 2.70 → 4.83 |
-| 10 | `#ad2721` | `#dc4f49` | 2.92 → 4.97 |
-| 12 | `#871f19` | `#db433a` | 2.12 → 4.61 |
-| 13 | `#e82132` | `#ed5360` | 4.43 → 5.67 |
-| 14 | `#e0292f` | `#e6565a` | 4.28 → 5.52 |
-| 15 | `#a3676b` | `#b17e81` | 4.45 → 5.83 |
-
-Slots 0, 2, 3, 5, 7 and 11 already passed. New values live in
-`color.primitive.ansi-readable.*`; `color.primitive.ansi.*` keeps the heritage
-values byte for byte, and `heritage-ansi` pins changed roles back to them.
-Syntax reds lift slightly: `code.syntax.keyword` and `tag` `#f73f35` → `#f7463c`
-(`color.primitive.red.860`), `property`, `heading` and `invalid` `#e53935` →
-`#e95551` (`color.primitive.red.810`): 5.56:1 on the code background, 4.52 and
-4.51 in an editor selection (were 4.38 and 3.81). Interface reds are unchanged.
-New role `color.terminal.prompt-text` colours the prompt's path segment: the
-terminal background in `default` (4.55:1 on slot 4), the historical light
-selection text in `heritage-ansi`.
+### D-014 Automatic inline literal color previews
 
-**Why.** In Orca, Claude Code and Codex the owner found the reds right but too
-dim: Claude Code's inline code such as `scriptblock` uses slot 12 (`#871f19`,
-2.12:1), code-block keywords and Codex git branches slot 4 (`#8c1212`, 2.09:1).
-Ten of the sixteen slots failed the 4.5:1 text floor, and programs, not the
-theme, pick the slot.
+**Decision.** Every visible CSS hex literal on the spec page gets one
+generated preview. The literal stays exact and is data, never inferred from a
+token or screenshot. Only this preview may be round, patterned or animate its
+radius. The browser suite tests copy fidelity and transparent, dark and light
+previews with the syntax specimens `#f00`, `#f008`, `#ff0000`, `#ff000080`,
+`#000000`, `#ffffff` (literal data, not roles). Rule: `spec/identity.md`, What
+"modern" means here.
 
-**Consequences.** Terminal ports regenerate; CE Devbox's shell palette and the
-Agnoster prompt's directory text follow in their own repositories.
-`heritage-ansi` stays the exact historical record.
+**Why.** Issue #1 asks for circular previews and a transparency checkerboard,
+against the square and no-gradient rules.
 
-**Alternatives.** All rejected: the heritage slots (the owner: unreadable), the
-`extended` palette (the owner keeps the red and rose families), a gentle lift
-leaving slots 4 and 12 near 3:1, an OKLCH lift (gamut clipping drifts toward
-raspberry).
+**Status.** proposed · 2026-09-07 (formal log status remains owner-controlled).
+Owner direction, 2026-09-07: the narrow exception explicitly approved,
+implementation authorized.
 
-**Status.** accepted · 2026-09-26 · owner, who chose the values, asked for the
-change and approved this entry by selecting them. Superseded in part by D-032:
-slot 6 is coral `#ff7a66`, not `#bb696c`; the prompt gets
-`color.terminal.prompt-bg` (heritage `#8c1212`) with `#ffa2a7` text in
-`default`.
+#### Follow the pointer hovering effect
 
-### D-030 Hued syntax roles for opt-in code highlighting
+Part of this exception only; the rules are in `spec/identity.md`, What
+"modern" means here.
 
-**Decision.** `default` gains opt-in `color.code.hued.*` roles with the
-`extended` code hues: strings green `#86a46f`; numbers, constants, functions,
-attributes and escapes amber `#c9973f`; types and properties blue `#7e9ebb`;
-operators bright rose `#ffa2a7`. Keywords, tags, comments, variables and
-punctuation keep `code.syntax`. Every hued role reaches 7.08:1 or more on the
-code background (operators 10.37:1) and 5.74:1 or more in an editor selection.
+### D-015 Clarify component mappings exposed by consumption acceptance
 
-**Why.** The owner found Codex's code "too boring and single-coloured"; D-001
-allowed code hues only in the proposed `extended` overlay, which is blocked for
-delivery.
+**Decision.** Keep every appearance and token value, and settle three
+contradictions found by Phase 2's composed acceptance. Ordinary confirmation
+uses the primary tone; the destructive tone is for destructive actions. A
+pressed primary button keeps `color.action.primary.border`, secondary and
+tertiary take `color.border.active`, destructive keeps its declared border.
+Filled controls keep their declared ring mappings. Nothing pending is
+approved. Rule: `spec/foundations.md`, Interaction states, rule 2, and each
+component's mapping.
 
-**Consequences.** The reference editor and other consumers keep `code.syntax.*`;
-a host opts in by mapping `code.hued.*`, as the Codex port (`ports/codex/`, once
-the terminal kit's Codex theme) does. This extends D-001's code-group allowance to these
-roles; `extended` stays proposed.
+**Why.** Phase 3 controls must not present an arbitrary interpretation as
+canonical. Rejected: enforcing the generic prose everywhere, or marking the
+affected workbench configurations unresolved.
 
-**Alternatives.** Keep Codex monochrome (rejected by the owner), approve all of
-`extended` (it reassigns terminal slots too), or replace `code.syntax.*`.
+**Status.** proposed · 2026-09-07. The owner directed application on 2026-09-07;
+formal status remains owner-managed.
 
-**Status.** accepted · 2026-09-26 · owner, who chose the extended hues.
+### D-024 Distinguish links from body text and headings
 
-### D-031 Select the checks a change needs; shard the deployment matrix
+**Decision.** `color.text.link` maps to the existing strong red `#f73f35`,
+keeping the red underline and the near-white hover text; visited links keep
+colour and underline, and the historical profile keeps the old link. No new
+primitive, hue, contrast exception or focus rule. Rule: `spec/foundations.md`,
+Text ladder.
 
-**Decision.** CI is `select` → checks → `release-gate`.
+**Why.** In the implementation preview the owner asked for links more
+distinguishable from normal text. Rejected: bright rose (then the heading
+colour) and blue or purple (an unrelated hue).
 
-- `select` reads the changed paths and `scripts/ci/proofs.json`; a path gets
-  cheaper only when a rule claims it. Unclaimed paths and control files
-  (workflows, the selector and registry, `package.json`, the lockfile, the
-  Playwright configs) run every check: a broad rule is a floor, never a verdict.
-  On a pull request the base commit's control list also applies, so a change
-  cannot make itself cheaper; review protects the selector. A file a browser
-  spec imports runs that spec and counts as a site change.
-- Unit tests and the build run in parallel. A pull request runs only the
-  selected checks; browser subsets use the plain list reporter and write no
-  evidence (D-028).
-- A push to `main` that changes the site runs the whole matrix: browser projects
-  split into jobs (desktop in four parts; projects read from the Playwright
-  config) with blob reports merged once into the evidence reporter, and packed
-  consumers in parallel. The merge needs every shard passed and reported; a
-  check refuses evidence missing any configured test in any project. Then the
-  verification report and deployment; no site change, no deployment. Changed
-  paths count from the last commit that reached Pages, so a failed deploy is
-  counted again.
-- `release-gate`, the only required check, recomputes the plan from Git with the
-  same code, refuses a mismatch, and checks each job ran exactly as planned and
-  passed.
-- `fullyParallel`, two workers per CI job, zero retries. The page axe scan is
-  two tests (colour contrast; every other rule) from a tag-based run, together
-  exactly the tagged rules. Only `playwright test` with nothing narrowing or
-  listing it, or the merge of every shard, writes evidence; the counting check
-  runs no reporter and proves the evidence file unchanged.
+**Status.** accepted · 2026-09-08 · owner, correcting D-023 for links only.
+D-027 later moves link hover to `interaction.hover.bg`.
 
-**Why.** `main` ran every check whatever changed: a terminal-kit-only change,
-which the site never reads, took 63 minutes to deploy; the browser suite ran on
-one worker for 24.7 minutes (one axe scan 3.6 minutes); `npm test` spent 139 of
-its 141 seconds in terminal-kit suites.
+### D-025 Theme interactive controls throughout the portal and demo
 
-**Consequences.** D-028's objection to sharding (partial evidence files) no
-longer applies: shards write blob reports and one merge writes one report. A
-change needing more cannot merge on `validate`, `build` and `smoke` alone.
+**Decision.** The maintained select renders its single- and multiple-choice
+lists in theme-owned DOM with the existing roles, following the select-only
+combobox and multiple listbox patterns; the native select stays the form-value
+and constraint source and the no-JavaScript fallback. The same enhancement
+serves application controls, the portal, the Vue demo and copy bundles, and
+themes input, button, checkbox, radio, range and file chrome; date and time
+inputs get theme-owned editors. Browser system dialogs stay native; native
+ports keep their mappings. The command field fills its dialog width below its
+label. This supersedes, for enhanced web implementations, the select spec's
+ban on replacing the host popup and the date/time host-popup descriptions.
+Ships in 1.1.0. Rule: `spec/components/select.md`, `date-picker.md`,
+`time-picker.md`; `docs/ui-consumption.md`.
 
-**Alternatives.** A self-hosted runner as on theselfish.one (fork pull requests
-could run code on it), reusing pull-request evidence on `main` (not possible
-today: the build stamps the commit), Playwright's internal shard weights (not
-public).
+**Why.** Seeing native blue selections in the work board and agent-kit picker,
+the owner instructed: "replace mostly all native components like `<select>` we
+must use all j3w1 themed", and asked for a properly proportioned
+command-search field. Rejected: advisory option CSS (keeps the blue
+selection) and one-off dropdowns (duplicate behaviour).
 
-**Status.** accepted · 2026-09-26 · owner, who found thirty-minute runs on
-`main` unacceptable and asked for classified checks modelled on theselfish.one.
-Supersedes D-028 in part.
+**Status.** accepted · 2026-09-09 · owner.
 
-### D-032 Coral slot 6 and a fixed prompt background
+### D-016 Pinned release comparison report and historical rendering
 
-**Decision.**
+**Decision.** A release comparison report (schema version 1) records both
+immutable revisions, profile and input digests, separate semantic change
+categories, dependency evidence and unsupported historical inputs. Reports
+and historical specimen renderings are build artifacts in `dist/releases/`.
+History is read from Git, never executed or imported; the shared renderer
+draws each side's maintained markup and styles, a reconstruction rather than
+evidence that old JavaScript or a port ran. Browser captures are run evidence;
+missing evidence stays not run. A rename needs an explicit mapping naming
+both revisions. No design value, eligibility rule or verification status
+changes. The rules stay here: no spec section covers release comparison.
+
+**Why.** Run metadata must stay out of deterministic exports, and today's
+rules must not read missing historical fields. Rejected: a raw file diff (no
+semantic categories) and running historical applications (a wider trust
+boundary).
 
-- Slot 6 is coral `#ff7a66` (`color.primitive.coral.700`, 7.77:1 on the terminal
-  background): warm and vivid, apart from the rose text, without taking amber's
-  code role.
-- Dim text is not fixed in the slots: emulators mix dim colours halfway into the
-  background, so dimmed coral is about 2.7:1. A dim-only host setting may help;
-  brightening slot 6 to compensate is ruled out.
-- New role `color.terminal.prompt-bg`, the prompt's path-segment background, is
-  heritage `#8c1212` (`color.primitive.ansi.4`) in every profile.
-  `color.terminal.prompt-text` is bright rose `#ffa2a7` in `default` (4.97:1)
-  and the proposed `extended`, and `#f4eeee` in `heritage-ansi` (8.28:1).
-  Prompts set both as 24-bit colours, whatever the slots carry.
-- Hosts that set the palette (Orca, Ghostty, Warp, CE Devbox's shell palette)
-  all use the same one; the prompt is the one deliberate heritage-style
-  exception.
+**Status.** proposed · 2026-09-08. Issue #2 authorizes derived release
+diagnostics; formal status and all theme approvals remain owner-managed.
 
-**Why.** Claude Code highlights fenced code with fixed ANSI slots: PowerShell
-cmdlets such as `Invoke-RestMethod` took slot 6 (`#bb696c`, nearly the hue of
-the rose text `#e99499`), and types such as `[scriptblock]` slot 6 dimmed
-(2.07:1). Agnoster's directory segment sits on slot 4, which D-029 made
-`#e53131`, so its text (slot 7, `#ffa2a7`) fell to 2.28:1 in Orca; the owner's
-PowerShell, on the old palette, shows `#ffa2a7` on `#8c1212` (4.97:1), the look
-to keep.
-
-**Consequences.** Terminal ports regenerate. CE Devbox maps Agnoster's directory
-and virtualenv segments to the prompt roles in its own repository.
-`heritage-ansi` values are unchanged; it gains `prompt-bg` at its slot-4 value.
-
-**Alternatives.** Peach `#ffab91`, blush `#ffc2c5` or amber `#e0a84a` for slot
-6; dark text on the bright slot 4, as D-029 first proposed (rejected by the
-owner after seeing it); the heritage palette in SSH shells (rejected: palettes
-should match across hosts).
+### D-017 Private framework parity evidence
 
-**Status.** accepted · 2026-09-26 · owner, who saw both problems in real use and
-chose the values. Supersedes D-029 in part.
+**Decision.** An independently authored private harness takes an
+operator-supplied licensed target and an explicit licence review, copies only
+declared template inputs into a new private fixture, uses synthetic examples,
+and records exact theme, template, framework, dependency and fixture
+identities. It never writes to the target; captures, copied vendor inputs and
+detailed results stay private; missing prerequisites give not-run output. A
+successful run is not a verified port or a claim of visual parity. The rules
+stay here: no spec section covers the harness.
 
-### D-033 Rose prose, semantic content headings and inherited bold
+**Why.** Rejected: a public vendor copy (breaks the licence boundary) and a
+generic mock (would pose as template evidence).
 
-**Decision.** Ordinary interface, body and long-form prose use rose `#e99499`.
-`text.prose` aliases `text.default`. `text.bright` remains `#ffa2a7` for brighter
-UI labels. New `text.heading` and `text.highlight` use existing paper `#f4eeee`:
-the former for content titles and H1–H6, the latter for deliberate exceptional
-highlights. Application/window chrome titles use rose default or bright.
-Bold changes weight only and inherits its semantic foreground. It is never a
-reason to choose white. Selection remains an explicit near-white exception.
-Primary action labels use bright rose across rest, hover and pressed states;
-danger/on-fill text retains paper `#f9faf9` where contrast requires it.
+**Status.** proposed · 2026-09-08. Issue #3 authorizes the harness; approval
+statuses and license boundaries are unchanged.
 
-**Why.** White prose and white bold overwhelmed the intended rose identity.
-Headings are distinguished by typography, not by turning lower headings into
-ordinary body text. Prose must no longer be an ambiguous alias for white.
+### D-019 One-way namespaced Figma Variables bridge
 
-**Consequences.** Version 4.0.0 changes the canonical semantics, site and ports.
-The audit and migration are in `docs/rose-typography-migration.md`. Historical
-ANSI slots and historical decision records remain unchanged. Contrasts are
-tested per state; no waiver or contrast floor changes.
+**Decision.** A one-way bridge from a pinned revision to Figma Variables:
+colours and scalar spacing and radius values with their aliases, in one
+collection and one mode. Dry-run is read-only and apply explicit; receipts
+kept outside Figma guard every update and rollback. Rule:
+`spec/figma-bridge.md`.
 
-**Alternatives.** Obsidian-only overrides, white bold, and rose lower headings
-were rejected by the owner in favor of one canonical hierarchy.
+**Why.** Rejected: manual duplicate maintenance, a paid-only REST workflow,
+and flattening aliases or composites.
 
-**Status.** accepted · 2026-09-28 · owner, explicit instruction and implementation
-plan approval. Supersedes earlier near-white prose descriptions and bright/red
-content-heading assignments; updates D-026's primary foreground only.
+**Status.** proposed · 2026-09-08. Issue #15 authorizes this bounded adapter;
+approval and eligibility follow the canonical source.
 
-### D-034 Versioned Windows native and Windhawk adapters
+### D-020 Bounded local validation and recovery workflow
 
-**Decision.** A Windows port uses native settings where sufficient and pinned
-Windhawk 2.0 alpha 6 stylers solely as rendering adapters for canonical semantic
-tokens. This is a bounded exception to the unsupported-injection prohibition in
-portability. No binary patching, shell replacement, paid tool or third-party
-theme is permitted. Unknown shell versions/structures fail closed. Full lifecycle
-support includes pinned install/update, verification, original-state restore,
-transaction rollback and removal of owned theme assets. User shortcuts, window
-management, existing layouts and desktop icons are preserved; cursors and black
-wallpaper are included. Native limitations are disclosed, not silently patched.
+**Decision.** One executable validation and recovery pattern (editing,
+invalid, review, busy, success) built from the existing admin-form, field,
+alert and button rules: validation on explicit submission, values kept, a
+separate simulated completion, no request. Rule: `spec/form-patterns.md`.
 
-**Why.** Native settings cannot represent the full black/rose shell identity.
-The owner explicitly accepted the pinned prerelease to use its upstream CLI.
+**Why.** Rejected: a colour-only invalid snapshot, validation on every
+keystroke, and a submit click treated as a successful save.
 
-**Alternatives.** Native-only styling lacks shell coverage; private storage edits
-and UI automation are less reproducible; binary theme patching was rejected.
+**Status.** proposed · 2026-09-08. Issue #16 authorizes one pattern from
+existing admin-form, field, alert and button rules, without new palette roles.
 
-**Status.** accepted · 2026-09-28 · owner, explicit implementation plan approval.
+### D-021 Local form composition with versioned data
 
-### D-035 An accent surface for the user's own content
+**Decision.** A local form builder for five canonical field kinds, added,
+edited, removed and reordered with buttons. Definitions, preview values and
+validation state stay separate; JSON import is bounded and download holds
+definitions only. Rendering and validation reuse D-020. A draft reference
+component, not a backend platform or native port. Rule:
+`spec/components/form-builder.md`.
 
-Numbering: D-033 and D-034 belong to PR #69, which was not merged when this was
-written. This decision was first recorded as D-034 and renumbered before merge.
+**Why.** Rejected: arbitrary HTML or schema execution, a conditional workflow
+engine, and a second field implementation.
 
-**Decision.**
+**Status.** proposed · 2026-09-08. Issue #19 authorizes the deferred
+form-builder demonstration.
 
-- New role `color.surface.accent`: the user's own content, set apart from
-  neighbouring surfaces, such as outgoing chat messages.
-- Its value is a new primitive, `color.primitive.red.40` (`#3d0c0a`): the
-  deepest of the reds compared side by side, chosen by the owner, with
-  `text.link` at 4.55:1.
-- Text on it: `text.default` 7.30, `text.bright` 8.74, `text.muted` 4.90,
-  `text.link` 4.55.
-- `text.subtle` does not reach 4.5:1 on it (4.30). Secondary text on the accent
-  surface therefore uses `text.muted`.
-- The Telegram port sets outgoing bubbles to it. Incoming bubbles stay
-  `surface.raised`. Bubble timestamps on both sides use `text.muted`, so they
-  match. Outgoing and incoming bubbles are ΔE 24.0 apart (CIE76).
-
-**Why.** In live acceptance on Android and Windows, the owner found their own
-messages too hard to tell from other people's. Outgoing bubbles used
-`surface.overlay` (`#241010`), incoming bubbles `surface.raised` (`#160b0b`):
-ΔE 7.4.
-- **First round.** The role reused the existing `#2b0e0d` (ΔE 12.6). The owner
-  still saw too little difference on both clients.
-- **Second round.** The owner compared four options rendered in real colours
-  (#241010, #2b0e0d, #330b09 and #3d0c0a, with real text, timestamps and links)
-  and chose the deepest red.
-- **The ceiling.** Red links cap how bright an outgoing bubble can be. At this
-  hue they still pass at `#3f0c0a` (4.51:1), and fall to 4.48:1 at `#400c0a`
-  and 4.44:1 at `#420c0a`. `#3d0c0a` keeps a small margin below that limit.
-
-**Alternatives.**
-- **Keep `#2b0e0d`** (ΔE 12.6), with no new colour: too subtle in real use.
-- **`#330b09`** (ΔE 18.6), which keeps `text.subtle` timestamps at 4.52:1: not
-  chosen.
-- **Incoming on `surface.default`** (ΔE 10.2): incoming bubbles nearly merge
-  with the wallpaper (ΔE 1.8).
-- **Reusing `status.danger.tint` directly:** rejected, the wrong meaning.
-
-**Consequences.**
-- **Palette.** It gains one colour.
-- **Ports.** Every port classifies the role. Only Telegram maps it. Claude
-  Code's `userMessageBackground` keeps `interaction.selection.bg`; adopting the
-  new role there is a separate change.
-- **Rule.** `text.subtle` is not used on `surface.accent`.
+### D-022 Local visual selection before agent implementation distribution
 
-**Status.** accepted · 2026-10-06 · owner, who saw the problem in real use,
-rejected the first value after a second look, and chose `#3d0c0a` from the
-side-by-side comparison.
+**Decision.** Before canonicalisation a local harness compares exactly three
+explicit token overlays with Current, using the shared specimen rendering and
+an original Vue composition. Overlays, reports and review builds stay
+ignored, never public profiles. Numbers and browser evidence approve nothing:
+the owner selects a candidate. Rule: `docs/phase6-visual-review.md`.
 
-### D-036 A translucent text-selection tint
+**Why.** Agents need installable or copyable components with complete
+dependencies and pinned contracts, shared by the package, the portal and the
+Vue application. Rejected: productising the old palette first, unapproved
+preview profiles, and appearance-only snippets.
 
-Numbering: first recorded as D-035 and renumbered before merge (see D-035).
+**Status.** proposed · 2026-09-08. Issue #37 and the owner's implementation
+instruction authorize three local candidates; design approval remains
+owner-managed. The selection is D-023.
 
-**Decision.**
+### D-018 Declared port capabilities and fresh import evidence
 
-- New role `color.interaction.text-selection.tint`: text selection on hosts
-  that keep the text colour inside a selection. It is translucent, so it also
-  suits hosts that paint the fill over their content.
-- Its value is a new primitive, `color.primitive.alpha.red-50`: the existing
-  text-selection red `red.350` (`#911410`) at 50%.
-- Over the canvas, the raised and the accent surface, it is ΔE 36.5, 35.1 and
-  21.5 from the surface (CIE76). These are Android's 8-bit composites
-  (`#490a08`, `#54100e`, `#67100d`).
-- Text drawn on the tint stays at 4.5:1 or above: `text.default` 6.89, 6.29
-  and 5.53. Links do not: `text.link` measures 4.30, 3.92 and 3.45 while
-  selected.
-- **What the canonical contrast pairs cover.** They composite over the canvas
-  only, with float alpha (`#480a08`): default text 6.91, bright 8.28. The
-  raised and accent figures are enforced by the Telegram port's tests.
-- **Links are not a declared pair.** Waivers are for decorative graphics only,
-  so the link limit (4.31 over the canvas) is recorded in the limits below and
-  in `spec/accessibility.md` instead.
-- Hosts that recolour selected text use `text-selection.bg` with
-  `text-selection.text`. The Telegram port gives Android text selection the
-  tint. Desktop keeps `selection.bg` with near-white selected text.
-
-**Why.** In live acceptance on Android, the owner found selected text barely
-visible in the message field. Android's text-selection keys had the 12%
-`interaction.marquee`: ΔE 5.2 from the field.
-- **First fix.** The opaque `interaction.selection.bg` (`#531310`). The
-  independent review (r10) found pinned Telegram paths that paint the selection
-  fill *after* their content: the rich editor's tables, captions and media
-  blocks, and the rich-message translation preview. An opaque fill hides them.
-  It was also ΔE 10.2 on the outgoing bubble, below the 12.6 the owner found too
-  subtle for bubbles (D-035).
-- **Translucent fills.** A translucent fill keeps that content visible. The
-  only translucent roles were the 12% marquee and black scrims.
-- **The comparison.** The owner compared the opaque fill and the tint at 40, 50
-  and 60%, rendered in the message field, both bubbles and a rich-editor photo,
-  and chose 50%.
-
-**Alternatives.**
-- **Opaque `selection.bg`:** hides content on those paths, and is faint on the
-  accent surface.
-- **40%:** ΔE 17.8 on the accent surface, close to the 18.6 rejected for
-  bubbles.
-- **60%:** links fall to 3.24:1, and media dims more.
-- **Opaque `text-selection.bg`:** rose text falls to 3.96:1, because Android
-  cannot recolour it.
-
-**Consequences.**
-- **Palette.** It gains one translucent value of an existing colour.
-- **Ports.** Every port classifies the role. Only Telegram maps it.
-- **Obsidian.** Obsidian also keeps the text colour inside a selection: rose
-  text measures 3.96:1 on its `text-selection.bg` (its IMPLEMENTATION.md), so
-  the tint fits it. Adopting it changes the Obsidian artifact and needs its own
-  import check, so that is a separate change.
-- **Contrast.** Two global pairs measure default and bright text on the tint
-  over the canvas.
-- **Limits, while a selection lasts on Android:**
-  - links are below 4.5:1 (3.45 to 4.30);
-  - where a host paints the fill over the text (Telegram's rich-editor tables
-    and captions, and the rich-message translation preview), selected text
-    measures 2.96 to 3.43:1. No strength meets both this and the accent-surface
-    floor: 40% gives 4.34 and 3.68. The owner's comparison did not show this
-    case; it was found by review r11 after the choice;
-  - in code blocks, keyword, string and comment colours are 3.13 to 4.24:1,
-    number and constant colours 4.40:1 in outgoing blocks only, and inside an outgoing code block the selection stands
-    ΔE 18.3 from the block.
-
-  A selection is short-lived, as with editor selections in
-  `spec/accessibility.md`.
+**Decision.** Ports declare per-role capabilities in an optional
+`capabilities.json`, and a `verified` port needs a fresh real import bound to
+its current inputs. Rule: `spec/portability.md`, Native ports.
 
-**Status.** accepted · 2026-10-06 · owner, who saw the problem in real use and
-chose 50% from the side-by-side comparison after the review rejected the opaque
-fill.
+**Why.** Rejected: a hand-maintained support matrix, and a parse treated as an
+import.
+
+**Status.** proposed · 2026-09-08. Issue #14 authorizes a derived mapping
+explorer; it creates no port, changes no host capability and approves no
+profile.
+
+### D-034 Versioned Windows native and Windhawk adapters
+
+**Decision.** A Windows port uses native settings where sufficient and pinned
+Windhawk 2.0 alpha 6 stylers solely as rendering adapters for canonical
+semantic tokens: a bounded exception to the ban on unsupported injection. No
+binary patching, shell replacement, paid tool or third-party theme; unknown
+shell versions or structures fail closed. Its lifecycle (pinned install and
+update, verification, original-state restore, rollback, removal of owned
+assets) preserves user shortcuts, window management, layouts and desktop
+icons. Rule: `spec/portability.md`, Scope of a port; `ports/windows/README.md`.
+
+**Why.** Native settings cannot represent the full black/rose shell identity,
+and the owner accepted the pinned prerelease to use its upstream CLI.
+Rejected: private storage edits and UI automation (less reproducible), and
+binary theme patching.
+
+**Status.** accepted · 2026-09-28 · owner, explicit implementation plan approval.
 
 ## References
 
diff --git a/exports/token-usage.json b/exports/token-usage.json
index 4c4daa771..2f639fd8d 100644
--- a/exports/token-usage.json
+++ b/exports/token-usage.json
@@ -41,20 +41,20 @@
           ],
           "uses": [
             {"kind":"part","component":"avatar","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
-            {"kind":"part","component":"button-group","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
+            {"kind":"part","component":"button-group","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-border-width-default","line":36}},
             {"kind":"part","component":"chart","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-default","line":34}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-border-width-default","line":33}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-default","line":41}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-border-width-default","line":38}},
             {"kind":"part","component":"description-list","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-border-width-default","line":30}},
             {"kind":"part","component":"disclosure","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
-            {"kind":"part","component":"error-state","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-default","line":33}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-default","line":34}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-border-width-default","line":39}},
+            {"kind":"part","component":"error-state","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-default","line":38}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-default","line":41}},
             {"kind":"part","component":"kbd","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-border-width-default","line":29}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-default","line":33}},
-            {"kind":"part","component":"popover","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-default","line":40}},
+            {"kind":"part","component":"popover","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-border-width-default","line":37}},
             {"kind":"part","component":"range","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
-            {"kind":"part","component":"repeater","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
+            {"kind":"part","component":"repeater","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-border-width-default","line":39}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
             {"kind":"part","component":"skeleton","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
             {"kind":"part","component":"timeline","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-border-width-default","line":30}},
@@ -139,12 +139,12 @@
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/border.width.emphasis","line":67}}
           ],
           "uses": [
-            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":35}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":42}},
             {"kind":"part","component":"disclosure","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":33}},
-            {"kind":"part","component":"error-state","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":34}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":35}},
+            {"kind":"part","component":"error-state","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":39}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":42}},
             {"kind":"part","component":"kbd","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":30}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":34}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":41}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":33}},
             {"kind":"part","component":"timeline","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":31}},
             {"kind":"part","component":"tree","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":36}},
@@ -176,7 +176,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/lg",
-            "line": 459
+            "line": 517
           },
           "provenance": null,
           "aliases": [],
@@ -186,11 +186,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/breakpoint.lg","line":134}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/breakpoint.lg","line":75}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/breakpoint.lg","line":75}},
-            {"port":"obsidian","reason":"breakpoint.lg: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/breakpoint.lg","line":694}},
+            {"port":"obsidian","reason":"breakpoint.lg: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/breakpoint.lg","line":698}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/breakpoint.lg","line":81}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/breakpoint.lg","line":1587}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/breakpoint.lg","line":1591}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/breakpoint.lg","line":68}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/breakpoint.lg","line":2505}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/breakpoint.lg","line":2509}}
           ],
           "uses": [],
           "contrast": []
@@ -211,7 +211,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/md",
-            "line": 453
+            "line": 511
           },
           "provenance": null,
           "aliases": [],
@@ -221,11 +221,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/breakpoint.md","line":135}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/breakpoint.md","line":76}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/breakpoint.md","line":76}},
-            {"port":"obsidian","reason":"breakpoint.md: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/breakpoint.md","line":693}},
+            {"port":"obsidian","reason":"breakpoint.md: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/breakpoint.md","line":697}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/breakpoint.md","line":82}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/breakpoint.md","line":1586}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/breakpoint.md","line":1590}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/breakpoint.md","line":69}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/breakpoint.md","line":2504}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/breakpoint.md","line":2508}}
           ],
           "uses": [],
           "contrast": []
@@ -246,7 +246,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/sm",
-            "line": 447
+            "line": 505
           },
           "provenance": null,
           "aliases": [],
@@ -256,11 +256,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/breakpoint.sm","line":136}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/breakpoint.sm","line":77}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/breakpoint.sm","line":77}},
-            {"port":"obsidian","reason":"breakpoint.sm: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/breakpoint.sm","line":692}},
+            {"port":"obsidian","reason":"breakpoint.sm: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/breakpoint.sm","line":696}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/breakpoint.sm","line":83}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/breakpoint.sm","line":1585}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/breakpoint.sm","line":1589}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/breakpoint.sm","line":70}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/breakpoint.sm","line":2503}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/breakpoint.sm","line":2507}}
           ],
           "uses": [],
           "contrast": []
@@ -281,7 +281,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/xs",
-            "line": 440
+            "line": 498
           },
           "provenance": null,
           "aliases": [],
@@ -291,11 +291,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/breakpoint.xs","line":137}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/breakpoint.xs","line":78}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/breakpoint.xs","line":78}},
-            {"port":"obsidian","reason":"breakpoint.xs: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/breakpoint.xs","line":691}},
+            {"port":"obsidian","reason":"breakpoint.xs: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/breakpoint.xs","line":695}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/breakpoint.xs","line":84}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/breakpoint.xs","line":1584}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/breakpoint.xs","line":1588}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/breakpoint.xs","line":71}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/breakpoint.xs","line":2502}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/breakpoint.xs","line":2506}}
           ],
           "uses": [],
           "contrast": []
@@ -373,7 +373,7 @@
             {"port":"claude-code","reason":"Interface colour role that no Claude Code theme key takes.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.action.destructive.filled-bg","line":139}},
             {"port":"codex","reason":"Interface colour role; a Codex tmTheme colours code only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.action.destructive.filled-bg","line":80}},
             {"port":"ghostty","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.action.destructive.filled-bg","line":80}},
-            {"port":"obsidian","reason":"Native desktop warning/confirmation fills and their hover/mobile-tap variants consume background-modifier-error/error-hover, owned by status.danger.fill; mobile warning uses interactive-normal. No independent filled-bg assignment is claimed.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.action.destructive.filled-bg","line":706}},
+            {"port":"obsidian","reason":"Native desktop warning/confirmation fills and their hover/mobile-tap variants consume background-modifier-error/error-hover, owned by status.danger.fill; mobile warning uses interactive-normal. No independent filled-bg assignment is claimed.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.action.destructive.filled-bg","line":710}},
             {"port":"orca","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.action.destructive.filled-bg","line":86}},
             {"port":"telegram","reason":"color.action.destructive.filled-bg has no separate native hook in this projection; related controls share the declared canonical role instead.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/color.action.destructive.filled-bg","line":1418}},
             {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.action.destructive.filled-bg","line":73}},
@@ -687,7 +687,7 @@
             {"kind":"part","component":"file-input","part":"progress.stripe","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/progress.stripe","line":53}},
             {"kind":"part","component":"filterable-table","part":"check.checked-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/check.checked-bg","line":60}},
             {"kind":"part","component":"filterable-table","part":"new.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/new.bg","line":43}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-bg","line":35}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-bg","line":42}},
             {"kind":"part","component":"progress","part":"stripe.a","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/tokens/stripe.a","line":32}},
             {"kind":"part","component":"progress","part":"value.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/tokens/value.bg","line":30}},
             {"kind":"part","component":"radio-group","part":"box.bg-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-checked","line":35}},
@@ -942,7 +942,7 @@
             {"kind":"part","component":"button","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.bg-hover","line":33}},
             {"kind":"part","component":"checkbox","part":"box.bg-checked-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg-checked-hover","line":38}},
             {"kind":"part","component":"dialog","part":"primary.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/primary.bg-hover","line":46}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-hover-bg","line":36}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-hover-bg","line":43}},
             {"kind":"part","component":"radio-group","part":"box.bg-checked-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-checked-hover","line":36}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-action-primary-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-action-primary-hover-bg","line":35}},
             {"kind":"part","component":"switch","part":"track.bg-checked-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.bg-checked-hover","line":37}},
@@ -1129,7 +1129,7 @@
             {"kind":"part","component":"dialog","part":"primary.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/primary.text","line":45}},
             {"kind":"part","component":"filterable-table","part":"check.glyph","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/check.glyph","line":61}},
             {"kind":"part","component":"filterable-table","part":"new.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/new.text","line":44}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-text","line":37}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-text","line":44}},
             {"kind":"part","component":"radio-group","part":"box.dot","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.dot","line":37}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-action-primary-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-action-primary-text","line":36}},
             {"kind":"part","component":"settings-panel","part":"apply.busy-glyph","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/apply.busy-glyph","line":50}},
@@ -1243,9 +1243,18 @@
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/12","line":79}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/2","line":69}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/7","line":74}},
+            {"kind":"part","component":"button-group","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"button","part":"secondary.bg","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.bg","line":36}},
+            {"kind":"part","component":"command-palette","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.bg","line":34}},
+            {"kind":"part","component":"compact-dashboard","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg","line":31}},
+            {"kind":"part","component":"editor-search","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.bg","line":32}},
+            {"kind":"part","component":"error-state","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg","line":31}},
+            {"kind":"part","component":"file-browser","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.bg","line":34}},
             {"kind":"part","component":"file-input","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg","line":31}},
             {"kind":"part","component":"icon-button","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.bg","line":24}},
+            {"kind":"part","component":"multiselect","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.bg","line":33}},
+            {"kind":"part","component":"popover","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg","line":30}},
+            {"kind":"part","component":"repeater","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.bg","line":32}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--interactive-normal","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.action.secondary.bg/0","line":192}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-notification-center-styler | Button#VerbButton > ContentPresenter@CommonStates | Background@Normal","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.action.secondary.bg/1","line":2022}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-notification-center-styler | Button#VerbButton | Background","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.action.secondary.bg/0","line":2021}},
@@ -1307,10 +1316,19 @@
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/5","line":64}},
             {"kind":"contrast","component":"wizard","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/6","line":68}},
             {"kind":"part","component":"admin-form","part":"back.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/back.border","line":62}},
+            {"kind":"part","component":"button-group","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.border","line":31}},
             {"kind":"part","component":"button","part":"secondary.border","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.border","line":38}},
+            {"kind":"part","component":"command-palette","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.border","line":36}},
+            {"kind":"part","component":"compact-dashboard","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.border","line":33}},
             {"kind":"part","component":"dialog","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/button.border","line":42}},
+            {"kind":"part","component":"editor-search","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.border","line":34}},
             {"kind":"part","component":"empty-state","part":"action.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.border","line":29}},
+            {"kind":"part","component":"error-state","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.border","line":33}},
+            {"kind":"part","component":"file-browser","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.border","line":36}},
             {"kind":"part","component":"file-input","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.border","line":33}},
+            {"kind":"part","component":"multiselect","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.border","line":35}},
+            {"kind":"part","component":"popover","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.border","line":32}},
+            {"kind":"part","component":"repeater","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.border","line":34}},
             {"kind":"part","component":"settings-panel","part":"reset.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/reset.border","line":52}},
             {"kind":"part","component":"wizard","part":"back.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/back.border","line":51}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark button:not(.clickable-icon) | border-color","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.action.secondary.border/0","line":384}},
@@ -1369,12 +1387,30 @@
             {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.action.secondary.hover-bg","line":86}}
           ],
           "uses": [
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/5","line":72}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
+            {"kind":"part","component":"button-group","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg-hover","line":32}},
             {"kind":"part","component":"button","part":"secondary.bg-hover","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.bg-hover","line":39}},
+            {"kind":"part","component":"command-palette","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.bg-hover","line":37}},
+            {"kind":"part","component":"compact-dashboard","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg-hover","line":34}},
             {"kind":"part","component":"dialog","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/button.bg-hover","line":43}},
+            {"kind":"part","component":"editor-search","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.bg-hover","line":35}},
             {"kind":"part","component":"empty-state","part":"action.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.bg-hover","line":30}},
+            {"kind":"part","component":"error-state","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg-hover","line":34}},
+            {"kind":"part","component":"file-browser","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.bg-hover","line":37}},
             {"kind":"part","component":"file-input","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-hover","line":34}},
+            {"kind":"part","component":"multiselect","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.bg-hover","line":36}},
+            {"kind":"part","component":"popover","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg-hover","line":33}},
+            {"kind":"part","component":"repeater","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.bg-hover","line":35}},
             {"kind":"part","component":"wizard","part":"back.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/back.bg-hover","line":52}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--interactive-hover","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.action.secondary.hover-bg/0","line":195}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-notification-center-styler | Button#VerbButton > ContentPresenter@CommonStates | Background@PointerOver","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.action.secondary.hover-bg/0","line":2045}},
@@ -1382,6 +1418,15 @@
             {"kind":"state","component":"file-input","part":"bg","state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/hover/bg","line":58}}
           ],
           "contrast": [
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"file-input hover fg","state":"hover","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"secondary text on the hover fill","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"fg":"color.interaction.focus.ring","bg":"color.action.secondary.hover-bg","label":"ring on the secondary hover fill","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/5","line":72}}
@@ -1422,8 +1467,17 @@
           ],
           "uses": [
             {"kind":"contrast","component":"button","part":null,"state":"active","variant":null,"surface":"color.action.secondary.pressed-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}},
+            {"kind":"part","component":"button-group","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg-active","line":33}},
             {"kind":"part","component":"button","part":"secondary.bg-active","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.bg-active","line":40}},
+            {"kind":"part","component":"command-palette","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.bg-active","line":38}},
+            {"kind":"part","component":"compact-dashboard","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg-active","line":35}},
+            {"kind":"part","component":"editor-search","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.bg-active","line":36}},
+            {"kind":"part","component":"error-state","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg-active","line":35}},
+            {"kind":"part","component":"file-browser","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.bg-active","line":38}},
             {"kind":"part","component":"file-input","part":"button.bg-pressed","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-pressed","line":35}},
+            {"kind":"part","component":"multiselect","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.bg-active","line":37}},
+            {"kind":"part","component":"popover","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg-active","line":34}},
+            {"kind":"part","component":"repeater","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.bg-active","line":36}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-notification-center-styler | Button#VerbButton > ContentPresenter@CommonStates | Background@Pressed","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.action.secondary.pressed-bg/0","line":2049}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-settings-styler | Button > ContentPresenter@CommonStates | Background@Pressed","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.action.secondary.pressed-bg/1","line":2050}}
           ],
@@ -1464,18 +1518,45 @@
             {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.action.secondary.text","line":88}}
           ],
           "uses": [
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
             {"kind":"contrast","component":"button","part":null,"state":"active","variant":null,"surface":"color.action.secondary.pressed-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/1","line":68}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
             {"kind":"contrast","component":"dialog","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/2","line":64}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"kind":"contrast","component":"wizard","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/5","line":67}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/21","line":25}},
             {"kind":"part","component":"admin-form","part":"back.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/back.text","line":61}},
+            {"kind":"part","component":"button-group","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.text","line":30}},
             {"kind":"part","component":"button","part":"secondary.text","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.text","line":37}},
+            {"kind":"part","component":"command-palette","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.text","line":35}},
+            {"kind":"part","component":"compact-dashboard","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.text","line":32}},
             {"kind":"part","component":"dialog","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/button.text","line":41}},
+            {"kind":"part","component":"editor-search","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.text","line":33}},
             {"kind":"part","component":"empty-state","part":"action.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.text","line":28}},
+            {"kind":"part","component":"error-state","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.text","line":32}},
+            {"kind":"part","component":"file-browser","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.text","line":35}},
             {"kind":"part","component":"file-input","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.text","line":32}},
+            {"kind":"part","component":"multiselect","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.text","line":34}},
+            {"kind":"part","component":"popover","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.text","line":31}},
+            {"kind":"part","component":"repeater","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.text","line":33}},
             {"kind":"part","component":"settings-panel","part":"reset.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/reset.text","line":51}},
             {"kind":"part","component":"wizard","part":"back.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/back.text","line":50}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark button:not(.clickable-icon) | --text-color","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.action.secondary.text/0","line":387}},
@@ -1494,6 +1575,15 @@
           ],
           "contrast": [
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.bg","label":"secondary text at rest","state":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/1","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"file-input hover fg","state":"hover","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"secondary text on the hover fill","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.pressed-bg","label":"secondary text while pressed","state":"active","source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}},
@@ -1503,6 +1593,15 @@
             {"fg":"color.action.secondary.text","bg":"color.surface.canvas","label":"file-input invalid fg","state":"invalid","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.action.secondary.text","bg":"color.surface.canvas","label":"secondary action text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/21","line":25}},
             {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"action text on the panel surface","state":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"fg":"color.action.secondary.text","bg":"color.surface.overlay","label":"secondary button text on the overlay surface","state":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/2","line":64}}
           ]
         },
@@ -1698,24 +1797,33 @@
           ],
           "uses": [
             {"kind":"contrast","component":"button","part":null,"state":"active","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/10","line":77}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/42","line":46}},
+            {"kind":"part","component":"button-group","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.border-active","line":34}},
             {"kind":"part","component":"button","part":"secondary.border-active","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.border-active","line":53}},
             {"kind":"part","component":"button","part":"tertiary.border-active","state":null,"variant":"tertiary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/tertiary.border-active","line":54}},
             {"kind":"part","component":"combobox","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.border-focus","line":38}},
+            {"kind":"part","component":"command-palette","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.border-active","line":39}},
+            {"kind":"part","component":"compact-dashboard","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.border-active","line":36}},
             {"kind":"part","component":"data-table","part":"resize.handle-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/resize.handle-hover","line":52}},
             {"kind":"part","component":"date-picker","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-focus","line":34}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-border-active","line":34}},
+            {"kind":"part","component":"editor-search","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.border-active","line":37}},
+            {"kind":"part","component":"error-state","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.border-active","line":36}},
+            {"kind":"part","component":"file-browser","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.border-active","line":39}},
             {"kind":"part","component":"i3-window-frame","part":"window.border-focused","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/window.border-focused","line":51}},
             {"kind":"part","component":"icon-button","part":"root.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.border-active","line":28}},
             {"kind":"part","component":"menu","part":"button.border-open","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/button.border-open","line":41}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-active","line":38}},
+            {"kind":"part","component":"multiselect","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.border-active","line":38}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-active","line":45}},
             {"kind":"part","component":"number-field","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.border-focus","line":33}},
+            {"kind":"part","component":"popover","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.border-active","line":35}},
+            {"kind":"part","component":"repeater","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.border-active","line":37}},
             {"kind":"part","component":"search-field","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.border-focus","line":34}},
             {"kind":"part","component":"select","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.border-focus","line":36}},
             {"kind":"part","component":"text-field","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border-focus","line":45}},
             {"kind":"part","component":"textarea","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border-focus","line":36}},
-            {"kind":"part","component":"time-picker","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-focus","line":30}},
+            {"kind":"part","component":"time-picker","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-focus","line":31}},
             {"kind":"part","component":"timeline","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-color-border-active","line":32}},
             {"kind":"part","component":"toolbar","part":"toggled.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/toggled.border","line":37}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--background-modifier-border-hover","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.border.active/0","line":109}},
@@ -1868,7 +1976,7 @@
             {"kind":"state","component":"select","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible/border","line":57}},
             {"kind":"state","component":"text-field","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible/border","line":70}},
             {"kind":"state","component":"textarea","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible/border","line":59}},
-            {"kind":"state","component":"time-picker","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/border","line":53}},
+            {"kind":"state","component":"time-picker","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/border","line":55}},
             {"kind":"state","component":"toolbar","part":"border","state":"toggled","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/toggled/border","line":45}}
           ],
           "contrast": [
@@ -1876,7 +1984,7 @@
             {"fg":"color.border.active","bg":"color.interaction.pressed.bg","label":"icon-button active border","state":"active","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/active","line":42}},
             {"fg":"color.border.active","bg":"color.interaction.pressed.bg","label":"menu open border","state":"open","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/open","line":60}},
             {"fg":"color.border.active","bg":"color.interaction.pressed.bg","label":"toolbar toggled border","state":"toggled","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/toggled","line":45}},
-            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"active border on input","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/42","line":46}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"combobox focus-visible border","state":"focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"date-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/focus-visible","line":65}},
@@ -1885,7 +1993,7 @@
             {"fg":"color.border.active","bg":"color.surface.input","label":"select focus-visible border","state":"focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible","line":57}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"text-field focus-visible border","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"textarea focus-visible border","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}}
+            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}}
           ]
         },
         "color.border.control": {
@@ -1928,27 +2036,27 @@
           ],
           "uses": [
             {"kind":"contrast","component":"avatar","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/2","line":49}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
             {"kind":"contrast","component":"chart","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/2","line":54}},
             {"kind":"contrast","component":"checkbox","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/2","line":62}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/1","line":67}},
             {"kind":"contrast","component":"description-list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/2","line":49}},
             {"kind":"contrast","component":"dialog","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/10","line":72}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/8","line":88}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
             {"kind":"contrast","component":"radio-group","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/4","line":63}},
             {"kind":"contrast","component":"skeleton","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/2","line":50}},
             {"kind":"contrast","component":"switch","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/3","line":57}},
@@ -2005,7 +2113,7 @@
             {"kind":"part","component":"terminal","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/tokens/root.border","line":34}},
             {"kind":"part","component":"text-field","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border","line":43}},
             {"kind":"part","component":"textarea","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border","line":34}},
-            {"kind":"part","component":"time-picker","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border","line":28}},
+            {"kind":"part","component":"time-picker","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border","line":29}},
             {"kind":"part","component":"timeline","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/root.border","line":25}},
             {"kind":"part","component":"tooltip","part":"shortcut.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/tokens/shortcut.border","line":32}},
             {"kind":"part","component":"tree","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/root.border","line":30}},
@@ -2143,7 +2251,7 @@
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-taskbar-styler | Rectangle#HorizontalTrackRect, Rectangle#ProgressBarTrack | Fill","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.border.control/80","line":1041}},
             {"kind":"state","component":"admin-form","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default/border","line":66}},
             {"kind":"state","component":"avatar","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default/border","line":41}},
-            {"kind":"state","component":"button-group","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/border","line":46}},
+            {"kind":"state","component":"button-group","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/border","line":51}},
             {"kind":"state","component":"card","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover/border","line":45}},
             {"kind":"state","component":"chart","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default/border","line":46}},
             {"kind":"state","component":"checkbox","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/default/border","line":51}},
@@ -2155,39 +2263,39 @@
             {"kind":"state","component":"chip","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/hover/border","line":49}},
             {"kind":"state","component":"code-editor","part":"border","state":"default","variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/default/border","line":70}},
             {"kind":"state","component":"combobox","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/default/border","line":65}},
-            {"kind":"state","component":"command-palette","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/border","line":53}},
-            {"kind":"state","component":"compact-dashboard","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"command-palette","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/border","line":60}},
+            {"kind":"state","component":"compact-dashboard","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/border","line":52}},
             {"kind":"state","component":"date-picker","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/default/border","line":59}},
             {"kind":"state","component":"date-picker","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/hover/border","line":63}},
             {"kind":"state","component":"description-list","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/stateTokens/default/border","line":41}},
             {"kind":"state","component":"diagnostics","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/default/border","line":65}},
             {"kind":"state","component":"diff-view","part":"border","state":"default","variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/default/border","line":63}},
             {"kind":"state","component":"disclosure","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default/border","line":48}},
-            {"kind":"state","component":"editor-search","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/border","line":48}},
-            {"kind":"state","component":"error-state","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/border","line":50}},
-            {"kind":"state","component":"file-browser","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/border","line":49}},
+            {"kind":"state","component":"editor-search","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/border","line":55}},
+            {"kind":"state","component":"error-state","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/border","line":55}},
+            {"kind":"state","component":"file-browser","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/border","line":56}},
             {"kind":"state","component":"form-builder","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default/border","line":24}},
-            {"kind":"state","component":"kbd","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/border","line":39}},
+            {"kind":"state","component":"kbd","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/border","line":40}},
             {"kind":"state","component":"list","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/default/border","line":50}},
             {"kind":"state","component":"menu","part":"border","state":"closed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed/border","line":61}},
             {"kind":"state","component":"menu","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/border","line":59}},
-            {"kind":"state","component":"multiselect","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/border","line":65}},
+            {"kind":"state","component":"multiselect","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/border","line":72}},
             {"kind":"state","component":"number-field","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/default/border","line":53}},
             {"kind":"state","component":"number-field","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/hover/border","line":54}},
-            {"kind":"state","component":"popover","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/border","line":46}},
+            {"kind":"state","component":"popover","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/border","line":51}},
             {"kind":"state","component":"progress","part":"border","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/stateTokens/default/border","line":39}},
             {"kind":"state","component":"radio-group","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/default/border","line":49}},
             {"kind":"state","component":"radio-group","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/focus-visible/border","line":51}},
             {"kind":"state","component":"radio-group","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/hover/border","line":50}},
             {"kind":"state","component":"radio-group","part":"border","state":"required","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/required/border","line":55}},
-            {"kind":"state","component":"range","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/border","line":46}},
-            {"kind":"state","component":"repeater","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"range","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"repeater","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/border","line":54}},
             {"kind":"state","component":"search-field","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/default/border","line":52}},
             {"kind":"state","component":"search-field","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/hover/border","line":53}},
             {"kind":"state","component":"search-field","part":"border","state":"loading","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/loading/border","line":56}},
             {"kind":"state","component":"search-field","part":"border","state":"no-results","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/no-results/border","line":57}},
             {"kind":"state","component":"search-field","part":"border","state":"placeholder-shown","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/placeholder-shown/border","line":55}},
-            {"kind":"state","component":"segmented-control","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/border","line":66}},
+            {"kind":"state","component":"segmented-control","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/border","line":65}},
             {"kind":"state","component":"select","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/default/border","line":55}},
             {"kind":"state","component":"select","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/hover/border","line":56}},
             {"kind":"state","component":"select","part":"border","state":"required","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/required/border","line":58}},
@@ -2203,8 +2311,8 @@
             {"kind":"state","component":"textarea","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/default/border","line":57}},
             {"kind":"state","component":"textarea","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover/border","line":58}},
             {"kind":"state","component":"textarea","part":"border","state":"placeholder-shown","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown/border","line":60}},
-            {"kind":"state","component":"time-picker","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/border","line":45}},
-            {"kind":"state","component":"time-picker","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/border","line":49}},
+            {"kind":"state","component":"time-picker","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"time-picker","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/border","line":51}},
             {"kind":"state","component":"timeline","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default/border","line":42}},
             {"kind":"state","component":"tree","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/stateTokens/default/border","line":52}}
           ],
@@ -2222,57 +2330,57 @@
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"switch hover border","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"text-field hover border","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"textarea hover border","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.border.control","bg":"color.surface.canvas","label":"progress default border","state":"default","source":{"file":"spec/components/progress.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.border.control","bg":"color.surface.chrome","label":"search box and filter button boundaries on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"avatar default border","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chart default border","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked box edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/checkbox.md","pointer":"/contrast/2","line":62}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked radio edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip and checkbox boundaries","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/8","line":88}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip default border","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip focus-visible border","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control border on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/41","line":45}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control boundaries on the panel surface","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/4","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/2","line":49}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/2","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"description-list default border","state":"default","source":{"file":"spec/components/description-list.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"diagnostics default border","state":"default","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/default","line":65}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"disclosure default border","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"form-builder default border","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"list default border","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu closed border","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu focus-visible border","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"on track edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/switch.md","pointer":"/contrast/3","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"skeleton default border","state":"default","source":{"file":"spec/components/skeleton.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"timeline default border","state":"default","source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"tree default border","state":"default","source":{"file":"spec/components/tree.md","pointer":"/stateTokens/default","line":50}},
@@ -2301,7 +2409,7 @@
             {"fg":"color.border.control","bg":"color.surface.input","label":"text-field placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/placeholder-shown","line":71}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea default border","state":"default","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/default","line":57}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown","line":60}},
-            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
+            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
             {"fg":"color.border.control","bg":"color.surface.overlay","label":"form field boundary on the overlay surface","state":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/10","line":72}},
             {"fg":"color.border.control","bg":"color.surface.raised","label":"shortcut key border on the tooltip","state":null,"source":{"file":"spec/components/tooltip.md","pointer":"/contrast/1","line":44}},
             {"fg":"color.border.control","bg":"color.terminal.bg","label":"terminal default border","state":"default","source":{"file":"spec/components/terminal.md","pointer":"/stateTokens/default","line":67}}
@@ -2343,7 +2451,7 @@
             {"kind":"contrast","component":"card","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/4","line":54}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/5","line":71}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/11","line":91}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/5","line":64}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/6","line":65}},
             {"kind":"contrast","component":"toolbar","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/1","line":48}},
@@ -2386,7 +2494,7 @@
             {"fg":"color.border.default","bg":"color.surface.default","label":"panel edge (decorative)","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/6","line":65}},
             {"fg":"color.border.default","bg":"color.surface.default","label":"panel edge and toolbar separator (decorative)","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/11","line":91}},
             {"fg":"color.border.default","bg":"color.surface.default","label":"resize handle at rest (decorative; keyboard resizing is a header action)","state":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/5","line":71}},
-            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
             {"fg":"color.border.default","bg":"color.surface.input","label":"kbd hint edge (decorative)","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/5","line":64}}
           ]
         },
@@ -2440,32 +2548,32 @@
             {"kind":"contrast","component":"switch","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/8","line":62}},
             {"kind":"contrast","component":"text-field","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"kind":"part","component":"admin-form","part":"disabled.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/disabled.border","line":53}},
-            {"kind":"part","component":"button-group","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-border-disabled","line":32}},
+            {"kind":"part","component":"button-group","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-border-disabled","line":37}},
             {"kind":"part","component":"button","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.border-disabled","line":58}},
             {"kind":"part","component":"checkbox","part":"box.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.border-disabled","line":43}},
             {"kind":"part","component":"chip","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.border-disabled","line":39}},
             {"kind":"part","component":"combobox","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.border-disabled","line":42}},
             {"kind":"part","component":"date-picker","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-disabled","line":38}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-border-disabled","line":35}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-border-disabled","line":35}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-border-disabled","line":40}},
             {"kind":"part","component":"field","part":"control.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.border-disabled","line":29}},
             {"kind":"part","component":"fieldset","part":"field.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.border-disabled","line":28}},
             {"kind":"part","component":"file-input","part":"button.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.border-disabled","line":39}},
             {"kind":"part","component":"icon-button","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.border-disabled","line":36}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-disabled","line":39}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-disabled","line":46}},
             {"kind":"part","component":"number-field","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.border-disabled","line":37}},
             {"kind":"part","component":"radio-group","part":"box.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.border-disabled","line":41}},
             {"kind":"part","component":"range","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-color-border-disabled","line":33}},
-            {"kind":"part","component":"repeater","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-border-disabled","line":33}},
+            {"kind":"part","component":"repeater","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-border-disabled","line":40}},
             {"kind":"part","component":"search-field","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.border-disabled","line":36}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-border-disabled","line":37}},
             {"kind":"part","component":"select","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.border-disabled","line":40}},
             {"kind":"part","component":"switch","part":"track.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.border-disabled","line":40}},
             {"kind":"part","component":"text-field","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border-disabled","line":49}},
             {"kind":"part","component":"textarea","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border-disabled","line":40}},
-            {"kind":"part","component":"time-picker","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-disabled","line":33}},
+            {"kind":"part","component":"time-picker","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-disabled","line":35}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark button:not(.clickable-icon)[aria-disabled=\"true\"] | border-color","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.border.disabled/1","line":421}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark button:not(.clickable-icon)[disabled] | border-color","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.border.disabled/0","line":420}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"calculator.resource.ButtonBorderBrushDisabled","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.border.disabled/31","line":1745}},
@@ -2542,7 +2650,7 @@
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/8","line":62}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled boundaries (exempt)","state":"disabled","source":{"file":"spec/components/admin-form.md","pointer":"/contrast/13","line":83}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled chip border (exempt)","state":"disabled","source":{"file":"spec/components/chip.md","pointer":"/contrast/2","line":56}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled field border (exempt)","state":"disabled","source":{"file":"spec/components/fieldset.md","pointer":"/contrast/5","line":39}}
@@ -2608,7 +2716,7 @@
             {"kind":"part","component":"admin-form","part":"footer.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/footer.border","line":57}},
             {"kind":"part","component":"admin-form","part":"review.row-rule","state":null,"variant":"review","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/review.row-rule","line":56}},
             {"kind":"part","component":"combobox","part":"group.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/group.border","line":60}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-border-divider","line":34}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-border-divider","line":39}},
             {"kind":"part","component":"data-table","part":"row.divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/row.divider","line":41}},
             {"kind":"part","component":"date-picker","part":"root.border-readonly","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-readonly","line":40}},
             {"kind":"part","component":"description-list","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-color-border-divider","line":31}},
@@ -2617,7 +2725,7 @@
             {"kind":"part","component":"drawer","part":"body.divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/body.divider","line":34}},
             {"kind":"part","component":"empty-state","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/root.border","line":24}},
             {"kind":"part","component":"fieldset","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/root.border","line":20}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-divider","line":36}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-divider","line":43}},
             {"kind":"part","component":"file-input","part":"list.divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/list.divider","line":47}},
             {"kind":"part","component":"filterable-table","part":"row.rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.rule","line":52}},
             {"kind":"part","component":"filterable-table","part":"toolbar.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/toolbar.border","line":34}},
@@ -2816,15 +2924,15 @@
             {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.border.overlay","line":96}}
           ],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
             {"kind":"part","component":"combobox","part":"listbox.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/listbox.border","line":52}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-overlay","line":36}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-overlay","line":43}},
             {"kind":"part","component":"date-picker","part":"calendar.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/calendar.border","line":51}},
             {"kind":"part","component":"dialog","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/root.border","line":33}},
             {"kind":"part","component":"drawer","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/root.border","line":29}},
             {"kind":"part","component":"i3-window-frame","part":"floating.border","state":null,"variant":"floating","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/floating.border","line":59}},
             {"kind":"part","component":"menu","part":"surface.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/surface.border","line":44}},
-            {"kind":"part","component":"popover","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-border-overlay","line":33}},
+            {"kind":"part","component":"popover","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-border-overlay","line":38}},
             {"kind":"part","component":"skip-link","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/tokens/root.border","line":23}},
             {"kind":"part","component":"toast","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/root.border","line":30}},
             {"kind":"part","component":"tooltip","part":"popup.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/tokens/popup.border","line":29}},
@@ -2905,7 +3013,7 @@
             {"fg":"color.border.overlay","bg":"color.surface.canvas","label":"toast default border","state":"default","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/default","line":57}},
             {"fg":"color.border.overlay","bg":"color.surface.canvas","label":"toast reduced-motion border","state":"reduced-motion","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/reduced-motion","line":61}},
             {"fg":"color.border.overlay","bg":"color.surface.canvas","label":"toast stacked border","state":"stacked","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked","line":60}},
-            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
             {"fg":"color.border.overlay","bg":"color.surface.overlay","label":"dialog default border","state":"default","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/default","line":55}},
             {"fg":"color.border.overlay","bg":"color.surface.overlay","label":"dialog focus-trapped border","state":"focus-trapped","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped","line":57}},
             {"fg":"color.border.overlay","bg":"color.surface.overlay","label":"dialog open border","state":"open","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/open","line":56}},
@@ -2957,12 +3065,12 @@
           ],
           "uses": [
             {"kind":"contrast","component":"admin-form","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/contrast/9","line":79}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/0","line":46}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/3","line":62}},
             {"kind":"part","component":"admin-form","part":"step.current-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/step.current-indicator","line":34}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":37}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":37}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":44}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":44}},
             {"kind":"part","component":"i3-window-frame","part":"tab.indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/tab.indicator","line":57}},
             {"kind":"part","component":"icon-button","part":"root.border-toggled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.border-toggled","line":32}},
             {"kind":"part","component":"link","part":"root.indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.indicator","line":33}},
@@ -2987,7 +3095,7 @@
           "contrast": [
             {"fg":"color.border.selected-indicator","bg":"color.surface.canvas","label":"link current border","state":"current","source":{"file":"spec/components/link.md","pointer":"/stateTokens/current","line":40}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.canvas","label":"wizard current border","state":"current","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/current","line":58}},
-            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
+            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.default","label":"current-section indicator bar","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/3","line":62}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.default","label":"current-step indicator bar","state":null,"source":{"file":"spec/components/admin-form.md","pointer":"/contrast/9","line":79}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.default","label":"sidebar-nav current border","state":"current","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/current","line":55}},
@@ -3030,7 +3138,7 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.border.selected-indicator-inactive","line":2360}}
           ],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
             {"kind":"contrast","component":"tabs","part":null,"state":"selected+container-inactive","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/contrast/0","line":51}},
             {"kind":"part","component":"i3-window-frame","part":"tab.indicator-inactive","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/tab.indicator-inactive","line":58}},
             {"kind":"part","component":"sidebar-nav","part":"link.indicator-inactive","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/link.indicator-inactive","line":42}},
@@ -3038,7 +3146,7 @@
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark:not(.is-focused) .workspace-tab-header-container .workspace-tab-header.is-active | border-bottom-color","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.border.selected-indicator-inactive/0","line":381}}
           ],
           "contrast": [
-            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
+            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
             {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.default","label":"inactive indicator (decorative; the selected tab keeps aria-selected and bright text)","state":"selected+container-inactive","source":{"file":"spec/components/tabs.md","pointer":"/contrast/0","line":51}}
           ]
         },
@@ -3286,7 +3394,7 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.chart.series-2","line":2460}}
           ],
           "uses": [
-            {"kind":"part","component":"chart","part":"series.primary","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/series.primary","line":35}},
+            {"kind":"part","component":"chart","part":"series.primary","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/series.primary","line":36}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"rate_limit_fill","port":"claude-code","source":{"file":"ports/claude-code/mapping.json","pointer":"/mappings/color.chart.series-2/0","line":15}}
           ],
           "contrast": []
@@ -3409,10 +3517,10 @@
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/12","line":89}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/13","line":90}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/14","line":91}},
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/5","line":82}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/6","line":83}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}},
@@ -3450,8 +3558,8 @@
             {"fg":"color.border.control","bg":"color.code.bg","label":"diff-view default border","state":"default","source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.code.bracket-match","bg":"color.code.bg","label":"bracket-match outline on the editor surface","state":"current","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/1","line":78}},
             {"fg":"color.code.bracket-match","bg":"color.code.bg","label":"code-editor current border","state":"current","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/current","line":74}},
-            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
-            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
+            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}},
+            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
             {"fg":"color.code.line-number","bg":"color.code.bg","label":"line numbers on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/45","line":49}},
             {"fg":"color.code.syntax.attribute","bg":"color.code.bg","label":"attribute and escape","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/13","line":90}},
             {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/47","line":51}},
@@ -3470,7 +3578,7 @@
             {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}},
             {"fg":"color.code.syntax.variable","bg":"color.code.bg","label":"code-editor current fg","state":"current","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/current","line":74}},
             {"fg":"color.code.syntax.variable","bg":"color.code.bg","label":"code-editor default fg","state":"default","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/default","line":70}},
-            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
+            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}},
             {"fg":"color.diagnostic.error.stripe","bg":"color.code.bg","label":"error stripe mark","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/11","line":84}},
             {"fg":"color.diagnostic.error.underline","bg":"color.code.bg","label":"error underline","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/3","line":76}},
             {"fg":"color.diagnostic.hint.underline","bg":"color.code.bg","label":"hint underline","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/8","line":81}},
@@ -3484,7 +3592,7 @@
             {"fg":"color.text.default","bg":"color.code.bg","label":"code text","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/0","line":73}},
             {"fg":"color.text.default","bg":"color.code.bg","label":"diff-view default fg","state":"default","source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.text.default","bg":"color.code.bg","label":"diff-view focus-visible fg","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/focus-visible","line":66}},
-            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"fg":"color.text.muted","bg":"color.code.bg","label":"line numbers on a context row","state":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/5","line":75}}
           ]
         },
@@ -3577,7 +3685,7 @@
             {"kind":"part","component":"search-field","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/input.caret","line":41}},
             {"kind":"part","component":"text-field","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/input.caret","line":55}},
             {"kind":"part","component":"textarea","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/input.caret","line":47}},
-            {"kind":"part","component":"time-picker","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.caret","line":37}},
+            {"kind":"part","component":"time-picker","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.caret","line":39}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--caret-color","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.code.caret/0","line":230}}
           ],
           "contrast": [
@@ -3718,13 +3826,13 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.gutter-rule","line":2399}}
           ],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}},
             {"kind":"part","component":"code-editor","part":"gutter.rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/gutter.rule","line":38}},
             {"kind":"part","component":"diagnostics","part":"code.gutter-rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/code.gutter-rule","line":37}},
             {"kind":"part","component":"diff-view","part":"line-number.rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/line-number.rule","line":40}}
           ],
           "contrast": [
-            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}}
+            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}}
           ]
         },
         "color.code.hued.attribute": {
@@ -3938,8 +4046,7 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.hued.number","line":2425}}
           ],
           "uses": [
-            {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"Number.foreground","port":"codex","source":{"file":"ports/codex/mapping.json","pointer":"/mappings/color.code.hued.number/0","line":17}},
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
+            {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"Number.foreground","port":"codex","source":{"file":"ports/codex/mapping.json","pointer":"/mappings/color.code.hued.number/0","line":17}}
           ],
           "contrast": []
         },
@@ -4069,7 +4176,7 @@
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"String.foreground","port":"codex","source":{"file":"ports/codex/mapping.json","pointer":"/mappings/color.code.hued.string/0","line":26}},
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
+            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":140}}
           ],
           "contrast": []
         },
@@ -4112,8 +4219,7 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.hued.type","line":2430}}
           ],
           "uses": [
-            {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"Type.foreground","port":"codex","source":{"file":"ports/codex/mapping.json","pointer":"/mappings/color.code.hued.type/0","line":29}},
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
+            {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"Type.foreground","port":"codex","source":{"file":"ports/codex/mapping.json","pointer":"/mappings/color.code.hued.type/0","line":29}}
           ],
           "contrast": []
         },
@@ -4151,13 +4257,13 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.indent-guide","line":2405}}
           ],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
             {"kind":"part","component":"code-editor","part":"indent.guide","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/indent.guide","line":48}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--indentation-guide-color-active","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.code.indent-guide/1","line":237}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--indentation-guide-color","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.code.indent-guide/0","line":236}}
           ],
           "contrast": [
-            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}}
+            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}}
           ]
         },
         "color.code.line-number": {
@@ -4291,7 +4397,7 @@
           ],
           "uses": [
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.search-current-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-bg","line":33}}
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-bg","line":40}}
           ],
           "contrast": [
             {"fg":"color.code.search-current-text","bg":"color.code.search-current-bg","label":"current search match text","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}}
@@ -4333,7 +4439,7 @@
           ],
           "uses": [
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.search-current-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-text","line":34}}
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-text","line":41}}
           ],
           "contrast": [
             {"fg":"color.code.search-current-text","bg":"color.code.search-current-bg","label":"current search match text","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}}
@@ -4373,7 +4479,7 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.search-match-bg","line":2401}}
           ],
           "uses": [
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-match-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-match-bg","line":35}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-match-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-match-bg","line":42}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--text-highlight-bg","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.code.search-match-bg/0","line":233}}
           ],
           "contrast": []
@@ -4413,6 +4519,8 @@
             {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
             {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
             {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/5","line":78}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}},
             {"kind":"part","component":"code-editor","part":"selection.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/selection.bg","line":44}},
@@ -4423,9 +4531,11 @@
             {"kind":"state","component":"code-editor","part":"bg","state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/selected/bg","line":72}}
           ],
           "contrast": [
-            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
-            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
-            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
+            {"fg":"color.code.syntax.comment","bg":"color.code.selection-bg","label":"comment syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
+            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
+            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
+            {"fg":"color.code.syntax.type","bg":"color.code.selection-bg","label":"type syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
             {"fg":"color.code.syntax.variable","bg":"color.code.selection-bg","label":"code-editor selected fg","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/selected","line":72}},
             {"fg":"color.diagnostic.warning.underline","bg":"color.code.selection-bg","label":"warning underline inside the selected range","state":"selected","source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/5","line":78}},
             {"fg":"color.text.muted","bg":"color.code.selection-bg","label":"muted text on editor selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}}
@@ -4510,6 +4620,7 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.syntax.comment","line":2409}}
           ],
           "uses": [
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/47","line":51}},
             {"kind":"part","component":"code-editor","part":"syntax.comment","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.comment","line":54}},
@@ -4519,7 +4630,8 @@
           ],
           "contrast": [
             {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/47","line":51}},
-            {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}}
+            {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}},
+            {"fg":"color.code.syntax.comment","bg":"color.code.selection-bg","label":"comment syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}}
           ]
         },
         "color.code.syntax.constant": {
@@ -4812,7 +4924,7 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.syntax.keyword","line":2407}}
           ],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/5","line":82}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/49","line":53}},
             {"kind":"part","component":"code-editor","part":"syntax.keyword","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.keyword","line":52}},
@@ -4823,7 +4935,7 @@
           "contrast": [
             {"fg":"color.code.syntax.keyword","bg":"color.code.bg","label":"keyword on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/49","line":53}},
             {"fg":"color.code.syntax.keyword","bg":"color.code.bg","label":"keyword","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/5","line":82}},
-            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}}
+            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}}
           ]
         },
         "color.code.syntax.number": {
@@ -4946,14 +5058,14 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.syntax.property","line":2417}}
           ],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/11","line":88}},
             {"kind":"part","component":"code-editor","part":"syntax.property","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.property","line":62}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--code-property","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.code.syntax.property/0","line":258}}
           ],
           "contrast": [
             {"fg":"color.code.syntax.property","bg":"color.code.bg","label":"property, heading and invalid text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/11","line":88}},
-            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}}
+            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}}
           ]
         },
         "color.code.syntax.punctuation": {
@@ -5028,7 +5140,7 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.syntax.string","line":2408}}
           ],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/6","line":83}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/48","line":52}},
             {"kind":"part","component":"code-editor","part":"syntax.string","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.string","line":53}},
@@ -5038,7 +5150,7 @@
           "contrast": [
             {"fg":"color.code.syntax.string","bg":"color.code.bg","label":"string on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/48","line":52}},
             {"fg":"color.code.syntax.string","bg":"color.code.bg","label":"string","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/6","line":83}},
-            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}}
+            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}}
           ]
         },
         "color.code.syntax.tag": {
@@ -5123,13 +5235,15 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.syntax.type","line":2414}}
           ],
           "uses": [
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/50","line":54}},
             {"kind":"part","component":"code-editor","part":"syntax.type","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.type","line":59}}
           ],
           "contrast": [
             {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/50","line":54}},
-            {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}}
+            {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}},
+            {"fg":"color.code.syntax.type","bg":"color.code.selection-bg","label":"type syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}}
           ]
         },
         "color.code.syntax.variable": {
@@ -5216,11 +5330,11 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.code.whitespace","line":2406}}
           ],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}},
             {"kind":"part","component":"code-editor","part":"whitespace.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/whitespace.text","line":49}}
           ],
           "contrast": [
-            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}}
+            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}}
           ]
         },
         "color.diagnostic.error.bg": {
@@ -6251,7 +6365,7 @@
           ],
           "uses": [
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/3","line":38}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
             {"kind":"contrast","component":"menu","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"sidebar-nav","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/1","line":62}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/62","line":66}},
@@ -6264,7 +6378,7 @@
           ],
           "contrast": [
             {"fg":"color.icon.decorative","bg":"color.surface.canvas","label":"decorative icon on canvas (graphic)","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/62","line":66}},
-            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
+            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
             {"fg":"color.icon.decorative","bg":"color.surface.default","label":"glyph (decorative)","state":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/3","line":38}},
             {"fg":"color.icon.decorative","bg":"color.surface.default","label":"group chevron (decorative; aria-expanded carries the state)","state":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/1","line":62}},
             {"fg":"color.icon.decorative","bg":"color.surface.raised","label":"submenu chevron (decorative; aria-haspopup carries the meaning)","state":null,"source":{"file":"spec/components/menu.md","pointer":"/contrast/3","line":68}}
@@ -6386,33 +6500,33 @@
             {"kind":"contrast","component":"text-field","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"kind":"part","component":"admin-form","part":"disabled.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/disabled.bg","line":51}},
-            {"kind":"part","component":"button-group","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":33}},
+            {"kind":"part","component":"button-group","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":38}},
             {"kind":"part","component":"button","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.bg-disabled","line":57}},
             {"kind":"part","component":"checkbox","part":"box.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg-disabled","line":42}},
             {"kind":"part","component":"chip","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.bg-disabled","line":40}},
             {"kind":"part","component":"combobox","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.bg-disabled","line":43}},
             {"kind":"part","component":"date-picker","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.bg-disabled","line":39}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":36}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":36}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":41}},
             {"kind":"part","component":"field","part":"control.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.bg-disabled","line":28}},
             {"kind":"part","component":"fieldset","part":"field.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.bg-disabled","line":27}},
             {"kind":"part","component":"file-input","part":"button.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-disabled","line":40}},
             {"kind":"part","component":"icon-button","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.bg-disabled","line":35}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":40}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":47}},
             {"kind":"part","component":"number-field","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.bg-disabled","line":38}},
             {"kind":"part","component":"radio-group","part":"box.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-disabled","line":40}},
             {"kind":"part","component":"range","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":34}},
-            {"kind":"part","component":"repeater","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":34}},
+            {"kind":"part","component":"repeater","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":41}},
             {"kind":"part","component":"search-field","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.bg-disabled","line":37}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":38}},
             {"kind":"part","component":"select","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.bg-disabled","line":41}},
             {"kind":"part","component":"switch","part":"track.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.bg-disabled","line":39}},
             {"kind":"part","component":"text-field","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.bg-disabled","line":50}},
             {"kind":"part","component":"textarea","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.bg-disabled","line":41}},
-            {"kind":"part","component":"time-picker","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-disabled","line":34}},
+            {"kind":"part","component":"time-picker","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-disabled","line":36}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark button:not(.clickable-icon)[aria-disabled=\"true\"] | background-color","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.interaction.disabled.bg/1","line":417}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark button:not(.clickable-icon)[disabled] | background-color","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.interaction.disabled.bg/0","line":416}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"android:chats_tabUnreadUnactiveBackground","port":"telegram","source":{"file":"ports/telegram/mapping.json","pointer":"/mappings/color.interaction.disabled.bg/0","line":1008}},
@@ -6529,7 +6643,7 @@
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/8","line":62}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled boundaries (exempt)","state":"disabled","source":{"file":"spec/components/admin-form.md","pointer":"/contrast/13","line":83}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled chip border (exempt)","state":"disabled","source":{"file":"spec/components/chip.md","pointer":"/contrast/2","line":56}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled field border (exempt)","state":"disabled","source":{"file":"spec/components/fieldset.md","pointer":"/contrast/5","line":39}},
@@ -6549,7 +6663,7 @@
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/select.md","pointer":"/contrast/6","line":68}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/2","line":78}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
-            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
+            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled thumb (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/6","line":60}}
           ]
         },
@@ -6635,9 +6749,13 @@
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.diff.added.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/16","line":86}},
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.diff.modified.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/18","line":88}},
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.diff.removed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/17","line":87}},
+            {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/3","line":51}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
-            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
+            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"kind":"contrast","component":"pagination","part":null,"state":"current","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
+            {"kind":"contrast","component":"sidebar-nav","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
             {"kind":"contrast","component":"skip-link","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/contrast/0","line":29}},
             {"kind":"contrast","component":"table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/37","line":41}},
@@ -6645,54 +6763,72 @@
             {"kind":"part","component":"alert","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/tokens/close.ring","line":51}},
             {"kind":"part","component":"avatar","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/control.focus","line":30}},
             {"kind":"part","component":"breadcrumbs","part":"link.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/link.ring","line":33}},
-            {"kind":"part","component":"button-group","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.focus","line":30}},
+            {"kind":"part","component":"button-group","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.focus","line":35}},
             {"kind":"part","component":"button","part":"secondary.ring","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.ring","line":41}},
+            {"kind":"part","component":"card","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.ring","line":42}},
             {"kind":"part","component":"chart","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/control.focus","line":30}},
             {"kind":"part","component":"checkbox","part":"box.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.ring","line":36}},
             {"kind":"part","component":"chip","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.ring","line":37}},
+            {"kind":"part","component":"chip","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.ring","line":43}},
+            {"kind":"part","component":"combobox","part":"option.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.ring-selected","line":58}},
             {"kind":"part","component":"combobox","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.ring","line":39}},
+            {"kind":"part","component":"command-palette","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.focus","line":40}},
             {"kind":"part","component":"command-palette","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/control.focus","line":33}},
-            {"kind":"part","component":"compact-dashboard","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.focus","line":32}},
+            {"kind":"part","component":"compact-dashboard","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.focus","line":37}},
             {"kind":"part","component":"data-table","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/row.ring","line":43}},
+            {"kind":"part","component":"data-table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"date-picker","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"description-list","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/control.focus","line":29}},
+            {"kind":"part","component":"diagnostics","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.ring-selected","line":59}},
             {"kind":"part","component":"diagnostics","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.ring","line":56}},
             {"kind":"part","component":"dialog","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/close.ring","line":40}},
+            {"kind":"part","component":"diff-view","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.ring-selected","line":61}},
             {"kind":"part","component":"diff-view","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.ring","line":58}},
             {"kind":"part","component":"disclosure","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"drawer","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/close.ring","line":40}},
+            {"kind":"part","component":"editor-search","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.focus","line":38}},
             {"kind":"part","component":"editor-search","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"empty-state","part":"action.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.ring","line":31}},
-            {"kind":"part","component":"error-state","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.focus","line":32}},
+            {"kind":"part","component":"error-state","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.focus","line":37}},
+            {"kind":"part","component":"file-browser","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.focus","line":40}},
             {"kind":"part","component":"file-browser","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/control.focus","line":33}},
             {"kind":"part","component":"file-input","part":"button.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.ring","line":36}},
             {"kind":"part","component":"filterable-table","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.ring","line":54}},
+            {"kind":"part","component":"i3-window-frame","part":"workspace.ring-on-selection","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.ring-on-selection","line":42}},
             {"kind":"part","component":"i3-window-frame","part":"workspace.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.ring","line":41}},
+            {"kind":"part","component":"icon-button","part":"root.ring-toggled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.ring-toggled","line":33}},
             {"kind":"part","component":"icon-button","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.ring","line":29}},
             {"kind":"part","component":"kbd","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/control.focus","line":28}},
             {"kind":"part","component":"link","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.ring","line":30}},
             {"kind":"part","component":"list","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/row.ring","line":40}},
+            {"kind":"part","component":"list","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/selected.ring","line":44}},
+            {"kind":"part","component":"menu","part":"active.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/active.ring","line":51}},
             {"kind":"part","component":"menu","part":"button.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/button.ring","line":42}},
+            {"kind":"part","component":"multiselect","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.focus","line":39}},
             {"kind":"part","component":"multiselect","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/control.focus","line":32}},
             {"kind":"part","component":"number-field","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.ring","line":34}},
+            {"kind":"part","component":"pagination","part":"current.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/current.ring","line":36}},
             {"kind":"part","component":"pagination","part":"link.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/link.ring","line":32}},
-            {"kind":"part","component":"popover","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.focus","line":31}},
+            {"kind":"part","component":"popover","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.focus","line":36}},
             {"kind":"part","component":"radio-group","part":"box.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.ring","line":34}},
             {"kind":"part","component":"range","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/control.focus","line":30}},
+            {"kind":"part","component":"repeater","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.focus","line":38}},
             {"kind":"part","component":"repeater","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"search-field","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"segmented-control","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"select","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.ring","line":37}},
             {"kind":"part","component":"settings-panel","part":"control.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/control.ring","line":42}},
             {"kind":"part","component":"sidebar-nav","part":"link.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/link.ring","line":40}},
+            {"kind":"part","component":"sidebar-nav","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"skeleton","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/control.focus","line":30}},
             {"kind":"part","component":"skip-link","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/tokens/root.ring","line":24}},
             {"kind":"part","component":"switch","part":"track.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.ring","line":35}},
+            {"kind":"part","component":"table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/tokens/selected.ring","line":49}},
             {"kind":"part","component":"table","part":"sort.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/tokens/sort.ring","line":43}},
             {"kind":"part","component":"tabs","part":"tab.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.ring","line":40}},
             {"kind":"part","component":"text-field","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.ring","line":46}},
             {"kind":"part","component":"textarea","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.ring","line":37}},
-            {"kind":"part","component":"time-picker","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.ring","line":31}},
+            {"kind":"part","component":"time-picker","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.ring","line":32}},
             {"kind":"part","component":"timeline","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/control.focus","line":29}},
             {"kind":"part","component":"toast","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/close.ring","line":53}},
             {"kind":"part","component":"toolbar","part":"button.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.ring","line":34}},
@@ -6726,20 +6862,28 @@
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-start-menu-styler | web .suggestion[aria-selected=\"true\"]:focus-visible, .suggestion.leftPill:not([aria-selected=\"false\"]):focus-visible, .suggContainer[aria-selected=\"true\"]:focus-visible, .suggContainer.leftPill:not([aria-selected=\"false\"]):focus-visible, .suggContainer:has(.suggestion[aria-selected=\"true\"]):focus-visible, .suggContainer:has(.suggestion.leftPill:not([aria-selected=\"false\"])):focus-visible | outline-color","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.interaction.focus.ring/8","line":1973}},
             {"kind":"state","component":"alert","part":"outline","state":"focus-visible","variant":null,"surface":"color.status.info.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/stateTokens/focus-visible/outline","line":55}},
             {"kind":"state","component":"breadcrumbs","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/focus-visible/outline","line":41}},
+            {"kind":"state","component":"card","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible/outline","line":48}},
             {"kind":"state","component":"checkbox","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/focus-visible/outline","line":53}},
             {"kind":"state","component":"chip","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible/outline","line":50}},
+            {"kind":"state","component":"chip","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible/outline","line":52}},
             {"kind":"state","component":"combobox","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible/outline","line":67}},
+            {"kind":"state","component":"combobox","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected/outline","line":69}},
             {"kind":"state","component":"data-table","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible/outline","line":58}},
+            {"kind":"state","component":"data-table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":60}},
             {"kind":"state","component":"date-picker","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/focus-visible/outline","line":68}},
             {"kind":"state","component":"diagnostics","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible/outline","line":67}},
+            {"kind":"state","component":"diagnostics","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible/outline","line":69}},
             {"kind":"state","component":"dialog","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
             {"kind":"state","component":"diff-view","part":"outline","state":"focus-visible","variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/focus-visible/outline","line":66}},
             {"kind":"state","component":"file-input","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
             {"kind":"state","component":"filterable-table","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible/outline","line":76}},
             {"kind":"state","component":"icon-button","part":"outline","state":"focus-visible","variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/focus-visible/outline","line":41}},
+            {"kind":"state","component":"icon-button","part":"outline","state":"toggled+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible/outline","line":44}},
             {"kind":"state","component":"link","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/focus-visible/outline","line":38}},
             {"kind":"state","component":"list","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible/outline","line":52}},
+            {"kind":"state","component":"list","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible/outline","line":54}},
             {"kind":"state","component":"menu","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
+            {"kind":"state","component":"menu","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected/outline","line":63}},
             {"kind":"state","component":"number-field","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/focus-visible/outline","line":55}},
             {"kind":"state","component":"pagination","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible/outline","line":43}},
             {"kind":"state","component":"radio-group","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/focus-visible/outline","line":51}},
@@ -6749,11 +6893,12 @@
             {"kind":"state","component":"sidebar-nav","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/focus-visible/outline","line":54}},
             {"kind":"state","component":"skip-link","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/stateTokens/focus-visible/outline","line":27}},
             {"kind":"state","component":"switch","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/stateTokens/focus-visible/outline","line":50}},
+            {"kind":"state","component":"table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":59}},
             {"kind":"state","component":"tabs","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/stateTokens/focus-visible/outline","line":46}},
             {"kind":"state","component":"tabs","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/stateTokens/selected+focus-visible/outline","line":48}},
             {"kind":"state","component":"text-field","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible/outline","line":70}},
             {"kind":"state","component":"textarea","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
-            {"kind":"state","component":"time-picker","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/outline","line":54}},
+            {"kind":"state","component":"time-picker","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/outline","line":56}},
             {"kind":"state","component":"toast","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
             {"kind":"state","component":"toolbar","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible/outline","line":44}},
             {"kind":"state","component":"tooltip","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/stateTokens/focus-visible/outline","line":40}},
@@ -6766,7 +6911,20 @@
             {"fg":"color.interaction.focus.ring","bg":"color.diff.added.bg","label":"ring on an added row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/16","line":86}},
             {"fg":"color.interaction.focus.ring","bg":"color.diff.modified.bg","label":"ring on a modified row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/18","line":88}},
             {"fg":"color.interaction.focus.ring","bg":"color.diff.removed.bg","label":"ring on a removed row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/17","line":87}},
-            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg-strong","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected workspace when focused","state":"selected","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.status.info.tint","label":"alert focus-visible outline","state":"focus-visible","source":{"file":"spec/components/alert.md","pointer":"/stateTokens/focus-visible","line":55}},
             {"fg":"color.interaction.focus.ring","bg":"color.status.info.tint","label":"ring on the info tint","state":"focus-visible","source":{"file":"spec/components/alert.md","pointer":"/contrast/14","line":71}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"file-input focus-visible outline","state":"focus-visible","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible","line":59}},
@@ -6775,7 +6933,7 @@
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"toast focus-visible outline","state":"focus-visible","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"tooltip focus-visible outline","state":"focus-visible","source":{"file":"spec/components/tooltip.md","pointer":"/stateTokens/focus-visible","line":40}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"wizard focus-visible outline","state":"focus-visible","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/focus-visible","line":57}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"toolbar focus-visible outline","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.default","label":"breadcrumbs focus-visible outline","state":"focus-visible","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/focus-visible","line":41}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.default","label":"chip focus-visible outline","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
@@ -6801,7 +6959,7 @@
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"switch focus-visible outline","state":"focus-visible","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/focus-visible","line":50}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"text-field focus-visible outline","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"textarea focus-visible outline","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.overlay","label":"dialog focus-visible outline","state":"focus-visible","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.overlay","label":"ring on the overlay surface","state":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/3","line":51}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.raised","label":"ring on the raised surface","state":"focus-visible","source":{"file":"spec/components/skip-link.md","pointer":"/contrast/0","line":29}},
@@ -6844,46 +7002,31 @@
           ],
           "uses": [
             {"kind":"contrast","component":"dialog","part":null,"state":"focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/7","line":69}},
-            {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
-            {"kind":"contrast","component":"pagination","part":null,"state":"current","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
-            {"kind":"contrast","component":"sidebar-nav","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"kind":"contrast","component":"wizard","part":null,"state":"focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/8","line":70}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/39","line":43}},
             {"kind":"part","component":"button","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"card","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/root.ring","line":36}},
-            {"kind":"part","component":"card","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.ring","line":42}},
             {"kind":"part","component":"checkbox","part":"box.ring-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.ring-checked","line":40}},
-            {"kind":"part","component":"chip","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.ring","line":43}},
             {"kind":"part","component":"code-editor","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/root.ring","line":36}},
-            {"kind":"part","component":"combobox","part":"option.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.ring-selected","line":58}},
             {"kind":"part","component":"combobox","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.ring-invalid","line":40}},
-            {"kind":"part","component":"data-table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"date-picker","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.ring-invalid","line":36}},
-            {"kind":"part","component":"diagnostics","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.ring-selected","line":59}},
             {"kind":"part","component":"dialog","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/root.ring","line":34}},
-            {"kind":"part","component":"diff-view","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.ring-selected","line":61}},
             {"kind":"part","component":"drawer","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/root.ring","line":30}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":36}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":43}},
             {"kind":"part","component":"filterable-table","part":"row.ring-on-selection","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.ring-on-selection","line":57}},
             {"kind":"part","component":"i3-window-frame","part":"window.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/window.ring","line":52}},
-            {"kind":"part","component":"i3-window-frame","part":"workspace.ring-on-selection","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.ring-on-selection","line":42}},
-            {"kind":"part","component":"icon-button","part":"root.ring-toggled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.ring-toggled","line":33}},
-            {"kind":"part","component":"list","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/selected.ring","line":44}},
-            {"kind":"part","component":"menu","part":"active.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/active.ring","line":51}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":41}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":48}},
             {"kind":"part","component":"number-field","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.ring-invalid","line":35}},
-            {"kind":"part","component":"pagination","part":"current.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/current.ring","line":36}},
             {"kind":"part","component":"radio-group","part":"box.ring-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.ring-checked","line":38}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":39}},
             {"kind":"part","component":"select","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.ring-invalid","line":38}},
-            {"kind":"part","component":"sidebar-nav","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"switch","part":"track.ring-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.ring-checked","line":38}},
-            {"kind":"part","component":"table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/tokens/selected.ring","line":49}},
             {"kind":"part","component":"terminal","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"text-field","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.ring-invalid","line":47}},
             {"kind":"part","component":"textarea","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.ring-invalid","line":38}},
+            {"kind":"part","component":"time-picker","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.ring-invalid","line":33}},
             {"kind":"part","component":"wizard","part":"next.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/next.ring","line":49}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark .checkbox-container.is-enabled | --background-modifier-border-focus","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.interaction.focus.ring-container/1","line":391}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark button.mod-cta | --background-modifier-border-focus","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.interaction.focus.ring-container/0","line":390}},
@@ -6898,31 +7041,24 @@
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-notification-center-styler | JumpViewUI.JumpListListViewItem | FocusVisualSecondaryBrush","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.interaction.focus.ring-container/8","line":2178}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-notification-center-styler | JumpViewUI.SystemItemListViewItem | FocusVisualSecondaryBrush","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.interaction.focus.ring-container/7","line":2177}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-start-menu-styler | web .previewContainer:focus-visible | outline-color","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.interaction.focus.ring-container/4","line":2174}},
+            {"kind":"prose","component":"diagnostics","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"body","line":142}},
             {"kind":"state","component":"button","part":"outline","state":"focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/stateTokens/focus-visible/outline","line":63}},
             {"kind":"state","component":"card","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible/outline","line":46}},
-            {"kind":"state","component":"card","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible/outline","line":48}},
             {"kind":"state","component":"checkbox","part":"outline","state":"checked+focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/checked+focus-visible/outline","line":56}},
-            {"kind":"state","component":"chip","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible/outline","line":52}},
             {"kind":"state","component":"code-editor","part":"outline","state":"focus-visible","variant":null,"surface":"color.code.current-line","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/focus-visible/outline","line":71}},
             {"kind":"state","component":"combobox","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":71}},
-            {"kind":"state","component":"combobox","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected/outline","line":69}},
-            {"kind":"state","component":"data-table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":60}},
             {"kind":"state","component":"date-picker","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":77}},
-            {"kind":"state","component":"diagnostics","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible/outline","line":69}},
             {"kind":"state","component":"dialog","part":"outline","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped/outline","line":57}},
             {"kind":"state","component":"drawer","part":"outline","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/focus-trapped/outline","line":45}},
             {"kind":"state","component":"i3-window-frame","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible/outline","line":66}},
-            {"kind":"state","component":"icon-button","part":"outline","state":"toggled+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible/outline","line":44}},
-            {"kind":"state","component":"list","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible/outline","line":54}},
-            {"kind":"state","component":"menu","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected/outline","line":63}},
             {"kind":"state","component":"number-field","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":57}},
             {"kind":"state","component":"radio-group","part":"outline","state":"checked+focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/checked+focus-visible/outline","line":53}},
             {"kind":"state","component":"select","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":60}},
             {"kind":"state","component":"switch","part":"outline","state":"checked+focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/stateTokens/checked+focus-visible/outline","line":52}},
-            {"kind":"state","component":"table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":59}},
             {"kind":"state","component":"terminal","part":"outline","state":"focus-visible","variant":null,"surface":"color.terminal.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/stateTokens/focus-visible/outline","line":68}},
             {"kind":"state","component":"text-field","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":73}},
-            {"kind":"state","component":"textarea","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":62}}
+            {"kind":"state","component":"textarea","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":62}},
+            {"kind":"state","component":"time-picker","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":65}}
           ],
           "contrast": [
             {"fg":"color.interaction.focus.ring-container","bg":"color.action.primary.bg","label":"button focus-visible outline","state":"focus-visible","source":{"file":"spec/components/button.md","pointer":"/stateTokens/focus-visible","line":63}},
@@ -6932,21 +7068,9 @@
             {"fg":"color.interaction.focus.ring-container","bg":"color.action.primary.bg","label":"ring on the primary fill","state":"focus-visible","source":{"file":"spec/components/dialog.md","pointer":"/contrast/7","line":69}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.action.primary.bg","label":"switch checked+focus-visible outline","state":"checked+focus-visible","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/checked+focus-visible","line":52}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.code.current-line","label":"code-editor focus-visible outline","state":"focus-visible","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/focus-visible","line":71}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"container focus ring on selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/39","line":43}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected row","state":"selected","source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible outline","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.default","label":"card focus-visible outline","state":"focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible","line":46}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"combobox invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible","line":71}},
@@ -6955,6 +7079,7 @@
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"select invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/invalid+focus-visible","line":60}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"text-field invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"textarea invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"time-picker invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.overlay","label":"dialog focus-trapped outline","state":"focus-trapped","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped","line":57}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.overlay","label":"drawer focus-trapped outline","state":"focus-trapped","source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/focus-trapped","line":45}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.terminal.bg","label":"terminal focus-visible outline","state":"focus-visible","source":{"file":"spec/components/terminal.md","pointer":"/stateTokens/focus-visible","line":68}}
@@ -6996,9 +7121,11 @@
             {"kind":"contrast","component":"card","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/3","line":53}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/19","line":92}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/20","line":93}},
+            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
             {"kind":"contrast","component":"list","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"switch","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
             {"kind":"part","component":"breadcrumbs","part":"ellipsis.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/ellipsis.bg-hover","line":37}},
+            {"kind":"part","component":"breadcrumbs","part":"link.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/link.bg-hover","line":32}},
             {"kind":"part","component":"card","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/root.bg-hover","line":34}},
             {"kind":"part","component":"checkbox","part":"box.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg-hover","line":35}},
             {"kind":"part","component":"chip","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.bg-hover","line":35}},
@@ -7009,9 +7136,10 @@
             {"kind":"part","component":"diff-view","part":"row.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.bg-hover","line":57}},
             {"kind":"part","component":"filterable-table","part":"row.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.bg-hover","line":53}},
             {"kind":"part","component":"i3-window-frame","part":"workspace.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.bg-hover","line":40}},
+            {"kind":"part","component":"link","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.bg-hover","line":29}},
             {"kind":"part","component":"list","part":"row.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/row.bg-hover","line":38}},
             {"kind":"part","component":"menu","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/button.bg-hover","line":39}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-hover-bg","line":42}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-hover-bg","line":49}},
             {"kind":"part","component":"number-field","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.bg-hover","line":32}},
             {"kind":"part","component":"pagination","part":"link.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/link.bg-hover","line":30}},
             {"kind":"part","component":"radio-group","part":"box.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-hover","line":33}},
@@ -7025,7 +7153,8 @@
             {"kind":"part","component":"tabs","part":"tab.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.bg-hover","line":36}},
             {"kind":"part","component":"text-field","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.bg-hover","line":44}},
             {"kind":"part","component":"textarea","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.bg-hover","line":35}},
-            {"kind":"part","component":"time-picker","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-hover","line":29}},
+            {"kind":"part","component":"time-picker","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-hover","line":30}},
+            {"kind":"part","component":"toast","part":"action.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/action.bg-hover","line":49}},
             {"kind":"part","component":"toolbar","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.bg-hover","line":32}},
             {"kind":"part","component":"wizard","part":"step.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.bg-hover","line":31}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--background-modifier-hover","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.interaction.hover.bg/0","line":161}},
@@ -7105,6 +7234,7 @@
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-start-menu-styler | Microsoft.UI.Xaml.Controls.DropDownButton > Grid@CommonStates | Background@PointerOver","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.interaction.hover.bg/1","line":1213}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-start-menu-styler | web .suggestion:hover, .suggContainer:hover, .scope-tile > div:hover, button:hover, .button:hover, .actionButton:hover, .contextMenu li:hover | background-color","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.interaction.hover.bg/31","line":1243}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-taskbar-styler | Windows.UI.Xaml.Controls.Primitives.ListViewItemPresenter | PointerOverBackground","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.interaction.hover.bg/58","line":1270}},
+            {"kind":"state","component":"breadcrumbs","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/bg","line":40}},
             {"kind":"state","component":"card","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover/bg","line":45}},
             {"kind":"state","component":"checkbox","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/hover/bg","line":52}},
             {"kind":"state","component":"chip","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/hover/bg","line":49}},
@@ -7113,6 +7243,7 @@
             {"kind":"state","component":"diagnostics","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/hover/bg","line":66}},
             {"kind":"state","component":"diff-view","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/hover/bg","line":64}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/hover/bg","line":75}},
+            {"kind":"state","component":"link","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/bg","line":37}},
             {"kind":"state","component":"list","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/hover/bg","line":51}},
             {"kind":"state","component":"number-field","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/hover/bg","line":54}},
             {"kind":"state","component":"pagination","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/hover/bg","line":42}},
@@ -7125,7 +7256,8 @@
             {"kind":"state","component":"tabs","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/stateTokens/hover/bg","line":45}},
             {"kind":"state","component":"text-field","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover/bg","line":69}},
             {"kind":"state","component":"textarea","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover/bg","line":58}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/bg","line":48}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/bg","line":50}},
+            {"kind":"state","component":"toast","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/bg","line":58}},
             {"kind":"state","component":"toolbar","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/hover/bg","line":43}},
             {"kind":"state","component":"wizard","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/hover/bg","line":56}}
           ],
@@ -7141,8 +7273,9 @@
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"switch hover border","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"text-field hover border","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"textarea hover border","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.diagnostic.error.text","bg":"color.interaction.hover.bg","label":"error glyph on hover","state":"hover","source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/20","line":93}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
             {"fg":"color.text.bright","bg":"color.interaction.hover.bg","label":"title on the hover fill","state":"hover","source":{"file":"spec/components/card.md","pointer":"/contrast/2","line":52}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"card hover fg","state":"hover","source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover","line":45}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"chip hover fg","state":"hover","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/hover","line":49}},
@@ -7163,9 +7296,12 @@
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"text-field hover fg","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"textarea hover fg","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"thumb on the hovered off track","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"toolbar hover fg","state":"hover","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/hover","line":43}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"wizard hover fg","state":"hover","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/hover","line":56}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.text.muted","bg":"color.interaction.hover.bg","label":"metadata column on the hover fill","state":"hover","source":{"file":"spec/components/list.md","pointer":"/contrast/1","line":58}},
             {"fg":"color.text.muted","bg":"color.interaction.hover.bg","label":"metadata on the hover fill","state":"hover","source":{"file":"spec/components/card.md","pointer":"/contrast/3","line":53}}
           ]
@@ -7202,16 +7338,12 @@
           ],
           "uses": [
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/4","line":52}},
-            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/16","line":20}},
-            {"kind":"part","component":"breadcrumbs","part":"link.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/link.bg-hover","line":32}},
             {"kind":"part","component":"chip","part":"remove.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/remove.bg-hover","line":46}},
             {"kind":"part","component":"combobox","part":"option.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.bg-hover","line":54}},
             {"kind":"part","component":"diff-view","part":"fold.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/fold.bg-hover","line":56}},
             {"kind":"part","component":"drawer","part":"item.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/item.bg-hover","line":36}},
-            {"kind":"part","component":"link","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.bg-hover","line":29}},
             {"kind":"part","component":"menu","part":"item.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/item.bg-hover","line":46}},
-            {"kind":"part","component":"toast","part":"action.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/action.bg-hover","line":49}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark .menu | --background-modifier-hover","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.interaction.hover.bg-strong/0","line":375}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"desktop:groupCallMenuBgOver","port":"telegram","source":{"file":"ports/telegram/mapping.json","pointer":"/mappings/color.interaction.hover.bg-strong/2","line":988}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"desktop:mediaviewMenuBgOver","port":"telegram","source":{"file":"ports/telegram/mapping.json","pointer":"/mappings/color.interaction.hover.bg-strong/1","line":987}},
@@ -7244,21 +7376,14 @@
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-notification-center-styler | JumpViewUI.SystemItemListViewItem > Grid#LayoutRoot@CommonStates > Border#BackgroundBorder | Background@PointerOver","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.interaction.hover.bg-strong/24","line":2013}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-settings-styler | Windows.UI.Xaml.Controls.Primitives.ListViewItemPresenter | PointerOverBackground","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.interaction.hover.bg-strong/23","line":2012}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-settings-styler.resource.ListViewItemBackgroundPointerOver","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.interaction.hover.bg-strong/22","line":2011}},
-            {"kind":"state","component":"breadcrumbs","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/bg","line":40}},
             {"kind":"state","component":"combobox","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover/bg","line":66}},
-            {"kind":"state","component":"link","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/bg","line":37}},
-            {"kind":"state","component":"menu","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover/bg","line":58}},
-            {"kind":"state","component":"toast","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/bg","line":58}}
+            {"kind":"state","component":"menu","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover/bg","line":58}}
           ],
           "contrast": [
-            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg-strong","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"combobox hover fg","state":"hover","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover","line":66}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"hovered item","state":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/4","line":52}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover text on strong hover fill","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/16","line":20}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"menu hover fg","state":"hover","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}}
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"menu hover fg","state":"hover","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover","line":58}}
           ]
         },
         "color.interaction.marquee": {
@@ -7806,7 +7931,8 @@
             {"kind":"contrast","component":"date-picker","part":null,"state":null,"variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/6","line":111}},
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/1","line":47}},
             {"kind":"contrast","component":"pagination","part":null,"state":"current","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/3","line":65}},
@@ -7816,7 +7942,7 @@
             {"kind":"part","component":"card","part":"selected.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.bg","line":40}},
             {"kind":"part","component":"chip","part":"selected.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.bg","line":41}},
             {"kind":"part","component":"combobox","part":"option.bg-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.bg-selected","line":56}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-bg","line":38}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-bg","line":45}},
             {"kind":"part","component":"data-table","part":"selected.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.bg","line":44}},
             {"kind":"part","component":"date-picker","part":"calendar.selected-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/calendar.selected-bg","line":53}},
             {"kind":"part","component":"diagnostics","part":"row.bg-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.bg-selected","line":57}},
@@ -7962,21 +8088,22 @@
             {"kind":"state","component":"table","part":"bg","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible/bg","line":59}}
           ],
           "contrast": [
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"container focus ring on selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/39","line":43}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected row","state":"selected","source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
-            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected workspace when focused","state":"selected","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
+            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
             {"fg":"color.interaction.selection.bg","bg":"color.surface.default","label":"toggled fill against the panel (decorative)","state":"toggled","source":{"file":"spec/components/icon-button.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.interaction.selection.text","bg":"color.interaction.selection.bg","label":"card selected fg","state":"selected","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected","line":47}},
             {"fg":"color.interaction.selection.text","bg":"color.interaction.selection.bg","label":"card selected+focus-visible fg","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
@@ -8149,7 +8276,7 @@
             {"kind":"part","component":"card","part":"selected.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.text","line":41}},
             {"kind":"part","component":"chip","part":"selected.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.text","line":42}},
             {"kind":"part","component":"combobox","part":"option.text-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.text-selected","line":57}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-text","line":39}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-text","line":46}},
             {"kind":"part","component":"data-table","part":"selected.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.text","line":45}},
             {"kind":"part","component":"date-picker","part":"calendar.selected-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/calendar.selected-text","line":54}},
             {"kind":"part","component":"diagnostics","part":"row.text-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.text-selected","line":58}},
@@ -8442,14 +8569,14 @@
           ],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Focus, hover, pressed and selection colours are derived by ChatGPT from the accent and contrast; only the accent is set.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":376}},
-            {"port":"claude-code","reason":"Interface colour role that no Claude Code theme key takes.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":453}},
-            {"port":"codex","reason":"Interface colour role; a Codex tmTheme colours code only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":399}},
-            {"port":"ghostty","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":399}},
-            {"port":"obsidian","reason":"Obsidian keeps the text colour inside a selection (rose 3.96:1 on --text-selection, IMPLEMENTATION.md), so the tint fits it; adopting it changes the Obsidian artifact and needs its own import check, so --text-selection keeps text-selection.bg for now.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":711}},
-            {"port":"orca","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":403}},
-            {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":394}},
-            {"port":"windows","reason":"The Windows adapters retain native selection foregrounds and their existing opaque selection or marquee mappings; no host requiring this tint is admitted.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":2520}}
+            {"port":"chatgpt","reason":"Focus, hover, pressed and selection colours are derived by ChatGPT from the accent and contrast; only the accent is set.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":380}},
+            {"port":"claude-code","reason":"Interface colour role that no Claude Code theme key takes.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":457}},
+            {"port":"codex","reason":"Interface colour role; a Codex tmTheme colours code only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":403}},
+            {"port":"ghostty","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":403}},
+            {"port":"obsidian","reason":"Obsidian keeps the text colour inside a selection (rose 3.96:1 on --text-selection, IMPLEMENTATION.md), so the tint fits it; adopting it changes the Obsidian artifact and needs its own import check, so --text-selection keeps text-selection.bg for now.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":715}},
+            {"port":"orca","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":407}},
+            {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":398}},
+            {"port":"windows","reason":"The Windows adapters retain native selection foregrounds and their existing opaque selection or marquee mappings; no host requiring this tint is admitted.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.interaction.text-selection.tint","line":2524}}
           ],
           "uses": [
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.interaction.text-selection.tint","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/74","line":78}},
@@ -8630,15 +8757,15 @@
             "color.interaction.text-selection.tint"
           ],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":377}},
-            {"port":"claude-code","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":454}},
-            {"port":"codex","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":400}},
-            {"port":"ghostty","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":400}},
-            {"port":"obsidian","reason":"Inspection-only primitive; Obsidian consumes semantic roles, never primitives.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":710}},
-            {"port":"orca","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":404}},
+            {"port":"chatgpt","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":381}},
+            {"port":"claude-code","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":458}},
+            {"port":"codex","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":404}},
+            {"port":"ghostty","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":404}},
+            {"port":"obsidian","reason":"Inspection-only primitive; Obsidian consumes semantic roles, never primitives.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":714}},
+            {"port":"orca","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":408}},
             {"port":"telegram","reason":"Primitives are blocked inspection values; Telegram consumes semantic roles only.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":1357}},
-            {"port":"warp","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":395}},
-            {"port":"windows","reason":"Primitive inspection value; Windows consumes canonical semantic roles only.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":2518}}
+            {"port":"warp","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":399}},
+            {"port":"windows","reason":"Primitive inspection value; Windows consumes canonical semantic roles only.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.primitive.alpha.red-50","line":2522}}
           ],
           "uses": [],
           "contrast": []
@@ -11130,15 +11257,15 @@
             "color.surface.accent"
           ],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":378}},
-            {"port":"claude-code","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":455}},
-            {"port":"codex","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":401}},
-            {"port":"ghostty","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":401}},
-            {"port":"obsidian","reason":"Inspection-only primitive; Obsidian consumes semantic roles, never primitives.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":709}},
-            {"port":"orca","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":405}},
+            {"port":"chatgpt","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":382}},
+            {"port":"claude-code","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":459}},
+            {"port":"codex","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":405}},
+            {"port":"ghostty","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":405}},
+            {"port":"obsidian","reason":"Inspection-only primitive; Obsidian consumes semantic roles, never primitives.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":713}},
+            {"port":"orca","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":409}},
             {"port":"telegram","reason":"Primitives are blocked inspection values; Telegram consumes semantic roles only.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":1311}},
-            {"port":"warp","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":396}},
-            {"port":"windows","reason":"Primitive inspection value; Windows consumes canonical semantic roles only.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":2517}}
+            {"port":"warp","reason":"Primitive; ports consume roles, never primitives.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":400}},
+            {"port":"windows","reason":"Primitive inspection value; Windows consumes canonical semantic roles only.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.primitive.red.40","line":2521}}
           ],
           "uses": [],
           "contrast": []
@@ -12257,10 +12384,10 @@
             {"kind":"part","component":"checkbox","part":"box.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.border-invalid","line":41}},
             {"kind":"part","component":"combobox","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.border-invalid","line":41}},
             {"kind":"part","component":"date-picker","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-invalid","line":37}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":37}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":42}},
             {"kind":"part","component":"field","part":"control.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.border-invalid","line":26}},
             {"kind":"part","component":"file-input","part":"button.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.border-invalid","line":37}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":43}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":50}},
             {"kind":"part","component":"number-field","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.border-invalid","line":36}},
             {"kind":"part","component":"radio-group","part":"box.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.border-invalid","line":39}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":43}},
@@ -12268,7 +12395,7 @@
             {"kind":"part","component":"settings-panel","part":"invalid.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/invalid.border","line":45}},
             {"kind":"part","component":"text-field","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border-invalid","line":48}},
             {"kind":"part","component":"textarea","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border-invalid","line":39}},
-            {"kind":"part","component":"time-picker","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-invalid","line":32}},
+            {"kind":"part","component":"time-picker","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-invalid","line":34}},
             {"kind":"part","component":"wizard","part":"step.indicator-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.indicator-invalid","line":38}},
             {"kind":"prose","component":"toast","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"body","line":118}},
             {"kind":"state","component":"admin-form","part":"border","state":"invalid","variant":null,"surface":"color.status.danger.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/invalid/border","line":67}},
@@ -12290,7 +12417,8 @@
             {"kind":"state","component":"text-field","part":"border","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible/border","line":73}},
             {"kind":"state","component":"textarea","part":"border","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid/border","line":61}},
             {"kind":"state","component":"textarea","part":"border","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/border","line":62}},
-            {"kind":"state","component":"time-picker","part":"border","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/border","line":58}},
+            {"kind":"state","component":"time-picker","part":"border","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/border","line":60}},
+            {"kind":"state","component":"time-picker","part":"border","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/border","line":64}},
             {"kind":"state","component":"wizard","part":"border","state":"invalid","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/invalid/border","line":59}}
           ],
           "contrast": [
@@ -12317,7 +12445,8 @@
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"text-field invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid border","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
-            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}}
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}}
           ]
         },
         "color.status.danger.fill": {
@@ -12354,7 +12483,7 @@
           ],
           "uses": [
             {"kind":"contrast","component":"badge","part":null,"state":"empty","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/badge.md","pointer":"/contrast/15","line":69}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
             {"kind":"contrast","component":"progress","part":null,"state":"error","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/4","line":46}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.status.danger.fill","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/14","line":77}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.status.danger.fill","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/16","line":79}},
@@ -12382,7 +12511,7 @@
             {"fg":"color.status.danger.border","bg":"color.status.danger.fill","label":"danger border on the danger fill (decorative)","state":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/16","line":79}},
             {"fg":"color.status.danger.fill","bg":"color.interaction.pressed.bg","label":"error fill against the track","state":"error","source":{"file":"spec/components/progress.md","pointer":"/contrast/4","line":46}},
             {"fg":"color.status.danger.fill","bg":"color.surface.canvas","label":"the danger fill is its own boundary against the canvas","state":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/15","line":78}},
-            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
+            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
             {"fg":"color.status.danger.fill","bg":"color.surface.default","label":"danger dot on the panel surface","state":"empty","source":{"file":"spec/components/badge.md","pointer":"/contrast/15","line":69}},
             {"fg":"color.status.danger.on-fill","bg":"color.status.danger.fill","label":"badge default fg","state":"default","source":{"file":"spec/components/badge.md","pointer":"/stateTokens/default","line":51}},
             {"fg":"color.status.danger.on-fill","bg":"color.status.danger.fill","label":"badge empty fg","state":"empty","source":{"file":"spec/components/badge.md","pointer":"/stateTokens/empty","line":52}},
@@ -12486,7 +12615,7 @@
             {"kind":"contrast","component":"settings-panel","part":null,"state":"invalid","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/2","line":61}},
             {"kind":"contrast","component":"text-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/0","line":76}},
             {"kind":"contrast","component":"textarea","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/0","line":65}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
             {"kind":"contrast","component":"wizard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/3","line":65}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.status.danger.tint","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/25","line":29}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/24","line":28}},
@@ -12500,12 +12629,12 @@
             {"kind":"part","component":"combobox","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/message.text","line":63}},
             {"kind":"part","component":"date-picker","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/message.text","line":49}},
             {"kind":"part","component":"diagnostics","part":"status.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/status.text","line":61}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":38}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":43}},
             {"kind":"part","component":"field","part":"label.required-mark","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/label.required-mark","line":23}},
             {"kind":"part","component":"field","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/message.text","line":31}},
             {"kind":"part","component":"file-input","part":"list.error","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/list.error","line":49}},
             {"kind":"part","component":"file-input","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/message.text","line":55}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":44}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":51}},
             {"kind":"part","component":"number-field","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/message.text","line":51}},
             {"kind":"part","component":"progress","part":"error.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/tokens/error.text","line":37}},
             {"kind":"part","component":"radio-group","part":"legend.required-mark","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/legend.required-mark","line":46}},
@@ -12519,7 +12648,7 @@
             {"kind":"part","component":"textarea","part":"count.text-over","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/count.text-over","line":54}},
             {"kind":"part","component":"textarea","part":"label.required-mark","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/label.required-mark","line":51}},
             {"kind":"part","component":"textarea","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/message.text","line":55}},
-            {"kind":"part","component":"time-picker","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/message.text","line":40}},
+            {"kind":"part","component":"time-picker","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/message.text","line":42}},
             {"kind":"part","component":"wizard","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/message.text","line":43}},
             {"kind":"part","component":"wizard","part":"step.marker-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.marker-invalid","line":37}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--callout-bug","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.status.danger.text/3","line":206}},
@@ -12573,7 +12702,7 @@
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"progress error fg","state":"error","source":{"file":"spec/components/progress.md","pointer":"/stateTokens/error","line":40}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/1","line":75}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/0","line":82}},
-            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
+            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"wizard invalid fg","state":"invalid","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/invalid","line":59}},
             {"fg":"color.status.danger.text","bg":"color.surface.default","label":"danger outline text","state":null,"source":{"file":"spec/components/badge.md","pointer":"/contrast/5","line":59}},
             {"fg":"color.status.danger.text","bg":"color.surface.default","label":"diagnostics error fg","state":"error","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/error","line":70}},
@@ -13721,7 +13850,7 @@
             {"port":"claude-code","reason":"Interface colour role that no Claude Code theme key takes.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.status.warning.tint","line":342}},
             {"port":"codex","reason":"Interface colour role; a Codex tmTheme colours code only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.status.warning.tint","line":278}},
             {"port":"ghostty","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.status.warning.tint","line":297}},
-            {"port":"obsidian","reason":"No consumer for background-modifier-warning/warning-hover in audited Obsidian 1.13.4/1.13.7; warning callouts compute their tint from callout-warning, not this exact tint role.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.status.warning.tint","line":707}},
+            {"port":"obsidian","reason":"No consumer for background-modifier-warning/warning-hover in audited Obsidian 1.13.4/1.13.7; warning callouts compute their tint from callout-warning, not this exact tint role.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.status.warning.tint","line":711}},
             {"port":"orca","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.status.warning.tint","line":303}},
             {"port":"telegram","reason":"color.status.warning.tint has no separate native hook in this projection; related controls share the declared canonical role instead.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/color.status.warning.tint","line":1425}},
             {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.status.warning.tint","line":291}},
@@ -13777,14 +13906,14 @@
           ],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT has one background and no separate surface for the user's own messages.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.surface.accent","line":379}},
-            {"port":"claude-code","reason":"Claude Code's userMessageBackground keeps color.interaction.selection.bg; adopting color.surface.accent there is a separate change for this port.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.surface.accent","line":456}},
-            {"port":"codex","reason":"Interface colour role; a Codex tmTheme colours code only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.surface.accent","line":402}},
-            {"port":"ghostty","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.surface.accent","line":402}},
-            {"port":"obsidian","reason":"Obsidian has no surface for the user's own messages.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.surface.accent","line":712}},
-            {"port":"orca","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.surface.accent","line":406}},
-            {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.surface.accent","line":397}},
-            {"port":"windows","reason":"Outgoing-message surfaces are outside the Windows visual adapter scope; native application content remains unchanged.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.surface.accent","line":2519}}
+            {"port":"chatgpt","reason":"ChatGPT has one background and no separate surface for the user's own messages.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.surface.accent","line":383}},
+            {"port":"claude-code","reason":"Claude Code's userMessageBackground keeps color.interaction.selection.bg; adopting color.surface.accent there is a separate change for this port.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.surface.accent","line":460}},
+            {"port":"codex","reason":"Interface colour role; a Codex tmTheme colours code only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.surface.accent","line":406}},
+            {"port":"ghostty","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.surface.accent","line":406}},
+            {"port":"obsidian","reason":"Obsidian has no surface for the user's own messages.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.surface.accent","line":716}},
+            {"port":"orca","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.surface.accent","line":410}},
+            {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.surface.accent","line":401}},
+            {"port":"windows","reason":"Outgoing-message surfaces are outside the Windows visual adapter scope; native application content remains unchanged.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.surface.accent","line":2523}}
           ],
           "uses": [
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.accent","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/70","line":74}},
@@ -13841,7 +13970,7 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.surface.backdrop","line":2351}}
           ],
           "uses": [
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-backdrop","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-backdrop","line":40}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-backdrop","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-backdrop","line":47}},
             {"kind":"part","component":"dialog","part":"backdrop.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/backdrop.bg","line":31}},
             {"kind":"part","component":"drawer","part":"backdrop.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/backdrop.bg","line":27}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--background-modifier-cover","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.surface.backdrop/0","line":51}},
@@ -13929,7 +14058,7 @@
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/3","line":66}},
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/4","line":67}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"kind":"contrast","component":"link","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/0","line":42}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/0","line":32}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/3","line":35}},
@@ -13938,8 +14067,8 @@
             {"kind":"contrast","component":"progress","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/1","line":43}},
             {"kind":"contrast","component":"text-field","part":null,"state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/4","line":80}},
             {"kind":"contrast","component":"textarea","part":null,"state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/4","line":69}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/0","line":63}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/1","line":64}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/15","line":78}},
@@ -14154,7 +14283,7 @@
             {"kind":"prose","component":"combobox","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"body","line":126}},
             {"kind":"prose","component":"empty-state","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"body","line":70}},
             {"kind":"prose","component":"field","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"body","line":72}},
-            {"kind":"prose","component":"time-picker","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"body","line":131}},
+            {"kind":"prose","component":"time-picker","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"body","line":138}},
             {"kind":"state","component":"date-picker","part":"bg","state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/read-only/bg","line":80}},
             {"kind":"state","component":"file-input","part":"bg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/default/bg","line":57}},
             {"kind":"state","component":"file-input","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible/bg","line":59}},
@@ -14217,7 +14346,7 @@
             {"fg":"color.diagnostic.warning.text","bg":"color.surface.canvas","label":"warning diagnostic text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/54","line":58}},
             {"fg":"color.icon.decorative","bg":"color.surface.canvas","label":"decorative icon on canvas (graphic)","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/62","line":66}},
             {"fg":"color.interaction.drop-target","bg":"color.surface.canvas","label":"drop-zone dashed border at rest","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/1","line":64}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"file-input focus-visible outline","state":"focus-visible","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"focus ring on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/37","line":41}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"link focus-visible outline","state":"focus-visible","source":{"file":"spec/components/link.md","pointer":"/stateTokens/focus-visible","line":38}},
@@ -14233,7 +14362,7 @@
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"progress error fg","state":"error","source":{"file":"spec/components/progress.md","pointer":"/stateTokens/error","line":40}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/1","line":75}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/0","line":82}},
-            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
+            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"wizard invalid fg","state":"invalid","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/invalid","line":59}},
             {"fg":"color.status.info.text","bg":"color.surface.canvas","label":"glyph on the plain toast","state":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/0","line":63}},
             {"fg":"color.status.info.text","bg":"color.surface.canvas","label":"info text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/33","line":37}},
@@ -14270,7 +14399,7 @@
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text and the range separator on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/1","line":85}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/2","line":76}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/1","line":38}},
-            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"muted text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/6","line":10}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"status, hint and help text on the canvas","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"toast stacked fg","state":"stacked","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked","line":60}},
@@ -14317,19 +14446,19 @@
           "uses": [
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
             {"kind":"contrast","component":"toolbar","part":null,"state":"disabled","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/0","line":47}},
             {"kind":"contrast","component":"toolbar","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/1","line":48}},
             {"kind":"contrast","component":"toolbar","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/2","line":49}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-surface-chrome","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-surface-chrome","line":35}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-surface-chrome","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-surface-chrome","line":40}},
             {"kind":"part","component":"filterable-table","part":"toolbar.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/toolbar.bg","line":33}},
             {"kind":"part","component":"i3-window-frame","part":"bar.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/bar.bg","line":34}},
             {"kind":"part","component":"i3-window-frame","part":"title.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/title.bg","line":53}},
@@ -14395,22 +14524,22 @@
             {"fg":"color.border.control","bg":"color.surface.chrome","label":"search box and filter button boundaries on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
             {"fg":"color.border.default","bg":"color.surface.chrome","label":"separator (decorative; role separator carries the grouping)","state":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/1","line":48}},
             {"fg":"color.border.divider","bg":"color.surface.chrome","label":"toolbar bottom edge (decorative)","state":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/2","line":49}},
-            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
-            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
-            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
+            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
+            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"toolbar focus-visible outline","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
-            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
-            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
+            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar controls on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar default fg","state":"default","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/default","line":42}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar focus-visible fg","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
             {"fg":"color.text.disabled","bg":"color.surface.chrome","label":"disabled button text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/toolbar.md","pointer":"/contrast/0","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame container-inactive fg","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/container-inactive","line":68}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame default fg","state":"default","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/default","line":65}},
-            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}}
+            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}}
           ]
         },
         "color.surface.chrome-alt": {
@@ -14446,7 +14575,7 @@
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.surface.chrome-alt","line":2349}}
           ],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
             {"kind":"part","component":"i3-window-frame","part":"title.bg-focused","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/title.bg-focused","line":55}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--file-header-background-focused","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.surface.chrome-alt/1","line":48}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--titlebar-background-focused","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.surface.chrome-alt/0","line":47}},
@@ -14480,7 +14609,7 @@
           ],
           "contrast": [
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible outline","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
             {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible fg","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}}
           ]
         },
@@ -14523,7 +14652,7 @@
             {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.surface.code","line":296}}
           ],
           "uses": [
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-surface-code","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-surface-code","line":37}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-surface-code","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-surface-code","line":44}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.CODE","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.surface.code/0","line":2057}}
           ],
           "contrast": []
@@ -14595,9 +14724,10 @@
             {"kind":"contrast","component":"badge","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/badge.md","pointer":"/contrast/9","line":63}},
             {"kind":"contrast","component":"breadcrumbs","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
             {"kind":"contrast","component":"breadcrumbs","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/1","line":46}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/4","line":71}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/0","line":67}},
             {"kind":"contrast","component":"card","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/0","line":50}},
@@ -14612,12 +14742,14 @@
             {"kind":"contrast","component":"checkbox","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/1","line":61}},
             {"kind":"contrast","component":"checkbox","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/4","line":64}},
             {"kind":"contrast","component":"chip","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
             {"kind":"contrast","component":"data-table","part":null,"state":"mixed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/2","line":68}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/0","line":66}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/3","line":69}},
@@ -14635,25 +14767,28 @@
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/0","line":35}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/2","line":37}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/3","line":38}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"field","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/2","line":39}},
             {"kind":"contrast","component":"field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/0","line":37}},
             {"kind":"contrast","component":"fieldset","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/3","line":37}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/0","line":34}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/2","line":36}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/10","line":90}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/11","line":91}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/12","line":92}},
@@ -14665,9 +14800,9 @@
             {"kind":"contrast","component":"form-builder","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/1","line":27}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/0","line":46}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/1","line":47}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
             {"kind":"contrast","component":"link","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/1","line":43}},
             {"kind":"contrast","component":"link","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/2","line":44}},
             {"kind":"contrast","component":"list","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/2","line":59}},
@@ -14675,31 +14810,34 @@
             {"kind":"contrast","component":"list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/3","line":60}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/2","line":34}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/3","line":63}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/4","line":64}},
             {"kind":"contrast","component":"pagination","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/1","line":47}},
             {"kind":"contrast","component":"pagination","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/2","line":48}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
             {"kind":"contrast","component":"radio-group","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
             {"kind":"contrast","component":"radio-group","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/5","line":62}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/4","line":61}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/4","line":63}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/4","line":66}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/5","line":67}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":"invalid","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/2","line":61}},
@@ -14886,14 +15024,14 @@
             {"kind":"state","component":"breadcrumbs","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/default/bg","line":39}},
             {"kind":"state","component":"breadcrumbs","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/focus-visible/bg","line":41}},
             {"kind":"state","component":"breadcrumbs","part":"bg","state":"truncated","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated/bg","line":43}},
-            {"kind":"state","component":"button-group","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/bg","line":45}},
+            {"kind":"state","component":"button-group","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/bg","line":50}},
             {"kind":"state","component":"card","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/default/bg","line":44}},
             {"kind":"state","component":"card","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible/bg","line":46}},
             {"kind":"state","component":"chart","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default/bg","line":45}},
             {"kind":"state","component":"chip","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default/bg","line":48}},
             {"kind":"state","component":"chip","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible/bg","line":50}},
-            {"kind":"state","component":"command-palette","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/bg","line":52}},
-            {"kind":"state","component":"compact-dashboard","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/bg","line":46}},
+            {"kind":"state","component":"command-palette","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/bg","line":59}},
+            {"kind":"state","component":"compact-dashboard","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/bg","line":51}},
             {"kind":"state","component":"data-table","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default/bg","line":56}},
             {"kind":"state","component":"data-table","part":"bg","state":"empty","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/empty/bg","line":63}},
             {"kind":"state","component":"data-table","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible/bg","line":58}},
@@ -14905,30 +15043,30 @@
             {"kind":"state","component":"diagnostics","part":"bg","state":"error","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/error/bg","line":70}},
             {"kind":"state","component":"diagnostics","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible/bg","line":67}},
             {"kind":"state","component":"disclosure","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default/bg","line":47}},
-            {"kind":"state","component":"editor-search","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/bg","line":47}},
+            {"kind":"state","component":"editor-search","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/bg","line":54}},
             {"kind":"state","component":"empty-state","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/stateTokens/default/bg","line":33}},
-            {"kind":"state","component":"error-state","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/bg","line":49}},
+            {"kind":"state","component":"error-state","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/bg","line":54}},
             {"kind":"state","component":"field","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/stateTokens/default/bg","line":33}},
             {"kind":"state","component":"field","part":"bg","state":"invalid","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/stateTokens/invalid/bg","line":35}},
             {"kind":"state","component":"field","part":"bg","state":"required","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/stateTokens/required/bg","line":34}},
             {"kind":"state","component":"fieldset","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/stateTokens/default/bg","line":32}},
-            {"kind":"state","component":"file-browser","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/bg","line":48}},
+            {"kind":"state","component":"file-browser","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/bg","line":55}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default/bg","line":74}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible/bg","line":76}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"no-results","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/no-results/bg","line":78}},
             {"kind":"state","component":"form-builder","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default/bg","line":24}},
-            {"kind":"state","component":"kbd","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/bg","line":38}},
+            {"kind":"state","component":"kbd","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/bg","line":39}},
             {"kind":"state","component":"list","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/default/bg","line":50}},
             {"kind":"state","component":"list","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible/bg","line":52}},
             {"kind":"state","component":"menu","part":"bg","state":"closed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed/bg","line":61}},
             {"kind":"state","component":"menu","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/bg","line":59}},
-            {"kind":"state","component":"multiselect","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/bg","line":64}},
+            {"kind":"state","component":"multiselect","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/bg","line":71}},
             {"kind":"state","component":"pagination","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default/bg","line":41}},
             {"kind":"state","component":"pagination","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible/bg","line":43}},
-            {"kind":"state","component":"popover","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/bg","line":45}},
-            {"kind":"state","component":"range","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/bg","line":45}},
-            {"kind":"state","component":"repeater","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/bg","line":46}},
-            {"kind":"state","component":"segmented-control","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/bg","line":65}},
+            {"kind":"state","component":"popover","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/bg","line":50}},
+            {"kind":"state","component":"range","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/bg","line":46}},
+            {"kind":"state","component":"repeater","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/bg","line":53}},
+            {"kind":"state","component":"segmented-control","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/bg","line":64}},
             {"kind":"state","component":"settings-panel","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/stateTokens/default/bg","line":54}},
             {"kind":"state","component":"sidebar-nav","part":"bg","state":"collapsed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/collapsed/bg","line":59}},
             {"kind":"state","component":"sidebar-nav","part":"bg","state":"current","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/current/bg","line":55}},
@@ -14956,54 +15094,63 @@
             {"fg":"color.action.secondary.border","bg":"color.surface.default","label":"Reset button boundary","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/5","line":64}},
             {"fg":"color.action.secondary.border","bg":"color.surface.default","label":"secondary border against the panel while hovered (the fill inside it measures 2.94:1)","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/4","line":71}},
             {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"action text on the panel surface","state":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"avatar default border","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chart default border","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked box edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/checkbox.md","pointer":"/contrast/2","line":62}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked radio edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip and checkbox boundaries","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/8","line":88}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip default border","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip focus-visible border","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control border on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/41","line":45}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control boundaries on the panel surface","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/4","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/2","line":49}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/2","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"description-list default border","state":"default","source":{"file":"spec/components/description-list.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"diagnostics default border","state":"default","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/default","line":65}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"disclosure default border","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"form-builder default border","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"list default border","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu closed border","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu focus-visible border","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"on track edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/switch.md","pointer":"/contrast/3","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"skeleton default border","state":"default","source":{"file":"spec/components/skeleton.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"timeline default border","state":"default","source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"tree default border","state":"default","source":{"file":"spec/components/tree.md","pointer":"/stateTokens/default","line":50}},
@@ -15104,14 +15251,14 @@
             {"fg":"color.text.default","bg":"color.surface.default","label":"avatar default fg","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"block label on the panel surface","state":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"breadcrumbs truncated fg","state":"truncated","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card default fg","state":"default","source":{"file":"spec/components/card.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card focus-visible fg","state":"focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chart default fg","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip default fg","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip focus-visible fg","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table default fg","state":"default","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default","line":56}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible","line":58}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"default text on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/1","line":5}},
@@ -15120,47 +15267,47 @@
             {"fg":"color.text.default","bg":"color.surface.default","label":"diagnostics focus-visible fg","state":"focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"disclosure default fg","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Editor text","state":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/0","line":26}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"field labels inside the group","state":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table default fg","state":"default","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default","line":74}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible","line":76}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"form-builder default fg","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list default fg","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list focus-visible fg","state":"focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible","line":52}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu closed fg","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu focus-visible fg","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/0","line":60}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination default fg","state":"default","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default","line":41}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination focus-visible fg","state":"focus-visible","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"panel text on the panel surface","state":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/2","line":64}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/0","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/0","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"settings-panel default fg","state":"default","source":{"file":"spec/components/settings-panel.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav collapsed fg","state":"collapsed","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/collapsed","line":59}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav default fg","state":"default","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/default","line":52}},
@@ -15217,21 +15364,21 @@
             {"fg":"color.text.muted","bg":"color.surface.default","label":"remove glyph at rest","state":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"separator on the panel surface","state":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/1","line":46}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/1","line":46}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/1","line":57}},
@@ -15275,17 +15422,17 @@
             {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.surface.desktop","line":298}}
           ],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
             {"kind":"part","component":"i3-window-frame","part":"area.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/area.bg","line":48}},
             {"kind":"part","component":"i3-window-frame","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/root.bg","line":32}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"native.desktop","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.surface.desktop/0","line":119}}
           ],
           "contrast": [
-            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
-            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
-            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}}
+            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
+            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}}
           ]
         },
         "color.surface.input": {
@@ -15342,19 +15489,16 @@
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/42","line":46}},
             {"kind":"part","component":"admin-form","part":"field.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/field.bg","line":43}},
             {"kind":"part","component":"avatar","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/control.bg","line":29}},
-            {"kind":"part","component":"button-group","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"chart","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"checkbox","part":"box.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg","line":33}},
             {"kind":"part","component":"combobox","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.bg","line":35}},
             {"kind":"part","component":"command-palette","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/control.bg","line":32}},
-            {"kind":"part","component":"compact-dashboard","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg","line":31}},
             {"kind":"part","component":"data-table","part":"checkbox.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/checkbox.bg","line":47}},
             {"kind":"part","component":"date-picker","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.bg","line":31}},
             {"kind":"part","component":"description-list","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/control.bg","line":28}},
             {"kind":"part","component":"dialog","part":"field.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/field.bg","line":50}},
             {"kind":"part","component":"disclosure","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/control.bg","line":30}},
             {"kind":"part","component":"editor-search","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/control.bg","line":30}},
-            {"kind":"part","component":"error-state","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg","line":31}},
             {"kind":"part","component":"field","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.bg","line":24}},
             {"kind":"part","component":"fieldset","part":"field.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.bg","line":25}},
             {"kind":"part","component":"file-browser","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/control.bg","line":32}},
@@ -15363,7 +15507,6 @@
             {"kind":"part","component":"kbd","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/control.bg","line":27}},
             {"kind":"part","component":"multiselect","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/control.bg","line":31}},
             {"kind":"part","component":"number-field","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.bg","line":30}},
-            {"kind":"part","component":"popover","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg","line":30}},
             {"kind":"part","component":"radio-group","part":"box.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg","line":31}},
             {"kind":"part","component":"range","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"repeater","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/control.bg","line":30}},
@@ -15375,7 +15518,7 @@
             {"kind":"part","component":"switch","part":"track.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.bg","line":32}},
             {"kind":"part","component":"text-field","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.bg","line":42}},
             {"kind":"part","component":"textarea","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.bg","line":33}},
-            {"kind":"part","component":"time-picker","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg","line":27}},
+            {"kind":"part","component":"time-picker","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg","line":28}},
             {"kind":"part","component":"timeline","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/control.bg","line":28}},
             {"kind":"part","component":"tree","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/control.bg","line":33}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--background-modifier-form-field-hover","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.surface.input/1","line":29}},
@@ -15495,9 +15638,10 @@
             {"kind":"state","component":"textarea","part":"bg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid/bg","line":61}},
             {"kind":"state","component":"textarea","part":"bg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/bg","line":62}},
             {"kind":"state","component":"textarea","part":"bg","state":"placeholder-shown","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown/bg","line":60}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/bg","line":44}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/bg","line":52}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/bg","line":57}}
+            {"kind":"state","component":"time-picker","part":"bg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/bg","line":46}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/bg","line":54}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/bg","line":59}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/bg","line":63}}
           ],
           "contrast": [
             {"fg":"color.action.tertiary.text","bg":"color.surface.input","label":"clear glyph on the input surface","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/2","line":61}},
@@ -15510,7 +15654,7 @@
             {"fg":"color.border.active","bg":"color.surface.input","label":"select focus-visible border","state":"focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible","line":57}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"text-field focus-visible border","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"textarea focus-visible border","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
+            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"admin-form default border","state":"default","source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default","line":66}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"checkbox boundary","state":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/1","line":67}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"checkbox default border","state":"default","source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/default","line":51}},
@@ -15536,7 +15680,7 @@
             {"fg":"color.border.control","bg":"color.surface.input","label":"text-field placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/placeholder-shown","line":71}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea default border","state":"default","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/default","line":57}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown","line":60}},
-            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
+            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
             {"fg":"color.border.default","bg":"color.surface.input","label":"kbd hint edge (decorative)","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/5","line":64}},
             {"fg":"color.border.divider","bg":"color.surface.input","label":"affix and stepper dividers (decorative)","state":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/7","line":67}},
             {"fg":"color.icon.default","bg":"color.surface.input","label":"chevron on the input surface","state":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/0","line":62}},
@@ -15547,6 +15691,7 @@
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"select invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/invalid+focus-visible","line":60}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"text-field invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"textarea invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"time-picker invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"checkbox focus-visible outline","state":"focus-visible","source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"combobox focus-visible outline","state":"focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"date-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/focus-visible","line":65}},
@@ -15558,7 +15703,7 @@
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"switch focus-visible outline","state":"focus-visible","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/focus-visible","line":50}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"text-field focus-visible outline","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"textarea focus-visible outline","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"checkbox invalid border","state":"invalid","source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/invalid","line":57}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"combobox invalid border","state":"invalid","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid","line":70}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"combobox invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible","line":71}},
@@ -15575,7 +15720,8 @@
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"text-field invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid border","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
-            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}},
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"admin-form default fg","state":"default","source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default","line":66}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"combobox default fg","state":"default","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/default","line":65}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"combobox focus-visible fg","state":"focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible","line":67}},
@@ -15610,9 +15756,10 @@
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid fg","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"thumb on the off track","state":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.muted","bg":"color.surface.input","label":"loading glyph and kbd hint on the input surface","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/1","line":60}},
             {"fg":"color.text.muted","bg":"color.surface.input","label":"unit affix on the input surface","state":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/0","line":60}},
             {"fg":"color.text.placeholder","bg":"color.surface.input","label":"placeholder on input","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/11","line":15}},
@@ -15663,10 +15810,10 @@
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/2","line":50}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/3","line":51}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/5","line":53}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":41}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":48}},
             {"kind":"part","component":"dialog","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/root.bg","line":32}},
             {"kind":"part","component":"drawer","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/root.bg","line":28}},
-            {"kind":"part","component":"popover","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":34}},
+            {"kind":"part","component":"popover","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":39}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--modal-background","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.surface.overlay/0","line":25}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"android:actionBarDefaultSubmenuBackground","port":"telegram","source":{"file":"ports/telegram/mapping.json","pointer":"/mappings/color.surface.overlay/2","line":165}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"android:chats_menuBackground","port":"telegram","source":{"file":"ports/telegram/mapping.json","pointer":"/mappings/color.surface.overlay/3","line":166}},
@@ -17429,8 +17576,8 @@
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/0","line":48}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/0","line":35}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/2","line":82}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"progress","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/0","line":42}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/0","line":59}},
@@ -17449,7 +17596,7 @@
             {"kind":"part","component":"breadcrumbs","part":"current.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/current.text","line":34}},
             {"kind":"part","component":"button-group","part":"heading.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/heading.text","line":27}},
             {"kind":"part","component":"card","part":"title.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/title.text","line":37}},
-            {"kind":"part","component":"chart","part":"header.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/header.text","line":36}},
+            {"kind":"part","component":"chart","part":"header.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/header.text","line":37}},
             {"kind":"part","component":"chart","part":"heading.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/heading.text","line":27}},
             {"kind":"part","component":"checkbox","part":"legend.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/legend.text","line":47}},
             {"kind":"part","component":"chip","part":"remove.text-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/remove.text-hover","line":45}},
@@ -17504,7 +17651,7 @@
             {"kind":"part","component":"tabs","part":"tab.text-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.text-selected","line":34}},
             {"kind":"part","component":"text-field","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/label.text","line":58}},
             {"kind":"part","component":"textarea","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/label.text","line":50}},
-            {"kind":"part","component":"time-picker","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/label.text","line":38}},
+            {"kind":"part","component":"time-picker","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/label.text","line":40}},
             {"kind":"part","component":"timeline","part":"heading.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/heading.text","line":26}},
             {"kind":"part","component":"toolbar","part":"toggled.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/toggled.text","line":38}},
             {"kind":"part","component":"tooltip","part":"shortcut.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/tokens/shortcut.text","line":31}},
@@ -17644,9 +17791,9 @@
             {"fg":"color.text.bright","bg":"color.surface.canvas","label":"link current fg","state":"current","source":{"file":"spec/components/link.md","pointer":"/stateTokens/current","line":40}},
             {"fg":"color.text.bright","bg":"color.surface.canvas","label":"wizard current fg","state":"current","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/current","line":58}},
             {"fg":"color.text.bright","bg":"color.surface.canvas","label":"wizard focus-visible fg","state":"focus-visible","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/focus-visible","line":57}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
             {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible fg","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.bright","bg":"color.surface.default","label":"breadcrumbs current fg","state":"current","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/current","line":42}},
             {"fg":"color.text.bright","bg":"color.surface.default","label":"column headers, empty-state heading and current page","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/2","line":82}},
             {"fg":"color.text.bright","bg":"color.surface.default","label":"data-table sorted fg","state":"sorted","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/sorted","line":61}},
@@ -17715,11 +17862,11 @@
             {"kind":"contrast","component":"alert","part":null,"state":null,"variant":null,"surface":"color.status.success.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/contrast/6","line":63}},
             {"kind":"contrast","component":"alert","part":null,"state":null,"variant":null,"surface":"color.status.warning.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/contrast/3","line":60}},
             {"kind":"contrast","component":"avatar","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/0","line":43}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
             {"kind":"contrast","component":"chart","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/0","line":48}},
             {"kind":"contrast","component":"checkbox","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/0","line":60}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
             {"kind":"contrast","component":"date-picker","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/5","line":108}},
             {"kind":"contrast","component":"description-list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/0","line":43}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/19","line":92}},
@@ -17731,21 +17878,21 @@
             {"kind":"contrast","component":"diff-view","part":null,"state":null,"variant":null,"surface":"color.diff.modified.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/2","line":72}},
             {"kind":"contrast","component":"diff-view","part":null,"state":null,"variant":null,"surface":"color.diff.removed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/1","line":71}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"kind":"contrast","component":"form-builder","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/0","line":26}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/1","line":63}},
             {"kind":"contrast","component":"skeleton","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/0","line":44}},
             {"kind":"contrast","component":"switch","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
@@ -17774,7 +17921,7 @@
             {"kind":"part","component":"button-group","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/root.text","line":25}},
             {"kind":"part","component":"card","part":"body.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/body.text","line":38}},
             {"kind":"part","component":"chart","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/root.text","line":25}},
-            {"kind":"part","component":"chart","part":"row.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/row.text","line":37}},
+            {"kind":"part","component":"chart","part":"row.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/row.text","line":38}},
             {"kind":"part","component":"checkbox","part":"text.default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/text.default","line":45}},
             {"kind":"part","component":"chip","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.text","line":34}},
             {"kind":"part","component":"combobox","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/input.text","line":44}},
@@ -17836,7 +17983,7 @@
             {"kind":"part","component":"tabs","part":"tab.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.text","line":33}},
             {"kind":"part","component":"text-field","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/input.text","line":52}},
             {"kind":"part","component":"textarea","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/input.text","line":44}},
-            {"kind":"part","component":"time-picker","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text","line":35}},
+            {"kind":"part","component":"time-picker","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text","line":37}},
             {"kind":"part","component":"timeline","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/root.text","line":24}},
             {"kind":"part","component":"toast","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/root.text","line":31}},
             {"kind":"part","component":"toolbar","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.text","line":31}},
@@ -18320,11 +18467,10 @@
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-taskbar-styler | TextBlock | Foreground","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.text.default/3","line":315}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-taskbar-styler | Windows.UI.Xaml.Controls.Primitives.ListViewItemPresenter | PointerOverForeground","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.text.default/237","line":549}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"yellow_FOR_SUBAGENTS_ONLY","port":"claude-code","source":{"file":"ports/claude-code/mapping.json","pointer":"/mappings/color.text.default/3","line":111}},
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}},
             {"kind":"state","component":"admin-form","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default/fg","line":66}},
             {"kind":"state","component":"avatar","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default/fg","line":39}},
             {"kind":"state","component":"breadcrumbs","part":"fg","state":"truncated","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated/fg","line":43}},
-            {"kind":"state","component":"button-group","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/fg","line":44}},
+            {"kind":"state","component":"button-group","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/fg","line":49}},
             {"kind":"state","component":"card","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/default/fg","line":44}},
             {"kind":"state","component":"card","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible/fg","line":46}},
             {"kind":"state","component":"card","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover/fg","line":45}},
@@ -18337,8 +18483,8 @@
             {"kind":"state","component":"combobox","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid/fg","line":70}},
             {"kind":"state","component":"combobox","part":"fg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible/fg","line":71}},
             {"kind":"state","component":"combobox","part":"fg","state":"open","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/open/fg","line":68}},
-            {"kind":"state","component":"command-palette","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/fg","line":51}},
-            {"kind":"state","component":"compact-dashboard","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"command-palette","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/fg","line":58}},
+            {"kind":"state","component":"compact-dashboard","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/fg","line":50}},
             {"kind":"state","component":"data-table","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default/fg","line":56}},
             {"kind":"state","component":"data-table","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible/fg","line":58}},
             {"kind":"state","component":"data-table","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/hover/fg","line":57}},
@@ -18364,15 +18510,15 @@
             {"kind":"state","component":"drawer","part":"fg","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/focus-trapped/fg","line":45}},
             {"kind":"state","component":"drawer","part":"fg","state":"open","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/open/fg","line":44}},
             {"kind":"state","component":"drawer","part":"fg","state":"reduced-motion","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/reduced-motion/fg","line":46}},
-            {"kind":"state","component":"editor-search","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/fg","line":46}},
-            {"kind":"state","component":"error-state","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/fg","line":48}},
-            {"kind":"state","component":"file-browser","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/fg","line":47}},
+            {"kind":"state","component":"editor-search","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/fg","line":53}},
+            {"kind":"state","component":"error-state","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/fg","line":53}},
+            {"kind":"state","component":"file-browser","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/fg","line":54}},
             {"kind":"state","component":"file-input","part":"fg","state":"drop-target","variant":null,"surface":"color.interaction.marquee","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/drop-target/fg","line":60}},
             {"kind":"state","component":"filterable-table","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default/fg","line":74}},
             {"kind":"state","component":"filterable-table","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible/fg","line":76}},
             {"kind":"state","component":"filterable-table","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/hover/fg","line":75}},
             {"kind":"state","component":"form-builder","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default/fg","line":24}},
-            {"kind":"state","component":"kbd","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/fg","line":37}},
+            {"kind":"state","component":"kbd","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/fg","line":38}},
             {"kind":"state","component":"list","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/default/fg","line":50}},
             {"kind":"state","component":"list","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible/fg","line":52}},
             {"kind":"state","component":"list","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/hover/fg","line":51}},
@@ -18382,7 +18528,7 @@
             {"kind":"state","component":"menu","part":"fg","state":"default","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/default/fg","line":57}},
             {"kind":"state","component":"menu","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/fg","line":59}},
             {"kind":"state","component":"menu","part":"fg","state":"open","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/open/fg","line":60}},
-            {"kind":"state","component":"multiselect","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/fg","line":63}},
+            {"kind":"state","component":"multiselect","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/fg","line":70}},
             {"kind":"state","component":"number-field","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/default/fg","line":53}},
             {"kind":"state","component":"number-field","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/focus-visible/fg","line":55}},
             {"kind":"state","component":"number-field","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/hover/fg","line":54}},
@@ -18392,16 +18538,16 @@
             {"kind":"state","component":"pagination","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default/fg","line":41}},
             {"kind":"state","component":"pagination","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible/fg","line":43}},
             {"kind":"state","component":"pagination","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/hover/fg","line":42}},
-            {"kind":"state","component":"popover","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/fg","line":44}},
+            {"kind":"state","component":"popover","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/fg","line":49}},
             {"kind":"state","component":"progress","part":"fg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/stateTokens/default/fg","line":39}},
-            {"kind":"state","component":"range","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/fg","line":44}},
-            {"kind":"state","component":"repeater","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"range","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"repeater","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/fg","line":52}},
             {"kind":"state","component":"search-field","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/default/fg","line":52}},
             {"kind":"state","component":"search-field","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/focus-visible/fg","line":54}},
             {"kind":"state","component":"search-field","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/hover/fg","line":53}},
             {"kind":"state","component":"search-field","part":"fg","state":"loading","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/loading/fg","line":56}},
             {"kind":"state","component":"search-field","part":"fg","state":"no-results","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/no-results/fg","line":57}},
-            {"kind":"state","component":"segmented-control","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/fg","line":64}},
+            {"kind":"state","component":"segmented-control","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/fg","line":63}},
             {"kind":"state","component":"select","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/default/fg","line":55}},
             {"kind":"state","component":"select","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible/fg","line":57}},
             {"kind":"state","component":"select","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/hover/fg","line":56}},
@@ -18434,10 +18580,11 @@
             {"kind":"state","component":"textarea","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid/fg","line":61}},
             {"kind":"state","component":"textarea","part":"fg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/fg","line":62}},
             {"kind":"state","component":"textarea","part":"fg","state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/read-only/fg","line":63}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/fg","line":43}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/fg","line":51}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/fg","line":47}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/fg","line":56}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/fg","line":53}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/fg","line":49}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/fg","line":58}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/fg","line":62}},
             {"kind":"state","component":"timeline","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default/fg","line":40}},
             {"kind":"state","component":"toast","part":"fg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/default/fg","line":57}},
             {"kind":"state","component":"toast","part":"fg","state":"reduced-motion","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/reduced-motion/fg","line":61}},
@@ -18481,7 +18628,7 @@
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"text-field hover fg","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"textarea hover fg","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"thumb on the hovered off track","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"toolbar hover fg","state":"hover","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/hover","line":43}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"wizard hover fg","state":"hover","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/hover","line":56}},
             {"fg":"color.text.default","bg":"color.interaction.marquee","label":"file-input drop-target fg","state":"drop-target","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/drop-target","line":60}},
@@ -18513,18 +18660,18 @@
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar controls on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar default fg","state":"default","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/default","line":42}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar focus-visible fg","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"avatar default fg","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"block label on the panel surface","state":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"breadcrumbs truncated fg","state":"truncated","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card default fg","state":"default","source":{"file":"spec/components/card.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card focus-visible fg","state":"focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chart default fg","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip default fg","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip focus-visible fg","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table default fg","state":"default","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default","line":56}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible","line":58}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"default text on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/1","line":5}},
@@ -18533,47 +18680,47 @@
             {"fg":"color.text.default","bg":"color.surface.default","label":"diagnostics focus-visible fg","state":"focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"disclosure default fg","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Editor text","state":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/0","line":26}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"field labels inside the group","state":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table default fg","state":"default","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default","line":74}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible","line":76}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"form-builder default fg","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list default fg","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list focus-visible fg","state":"focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible","line":52}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu closed fg","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu focus-visible fg","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/0","line":60}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination default fg","state":"default","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default","line":41}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination focus-visible fg","state":"focus-visible","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"panel text on the panel surface","state":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/2","line":64}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/0","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/0","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"settings-panel default fg","state":"default","source":{"file":"spec/components/settings-panel.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav collapsed fg","state":"collapsed","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/collapsed","line":59}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav default fg","state":"default","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/default","line":52}},
@@ -18620,9 +18767,10 @@
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid fg","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"thumb on the off track","state":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.overlay","label":"dialog default fg","state":"default","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/default","line":55}},
             {"fg":"color.text.default","bg":"color.surface.overlay","label":"dialog focus-trapped fg","state":"focus-trapped","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped","line":57}},
             {"fg":"color.text.default","bg":"color.surface.overlay","label":"dialog open fg","state":"open","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/open","line":56}},
@@ -18705,12 +18853,12 @@
             {"kind":"contrast","component":"tabs","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/contrast/1","line":52}},
             {"kind":"contrast","component":"text-field","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/2","line":78}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"toolbar","part":null,"state":"disabled","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/0","line":47}},
             {"kind":"contrast","component":"wizard","part":null,"state":"disabled","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/9","line":71}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/10","line":14}},
             {"kind":"part","component":"admin-form","part":"disabled.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/disabled.text","line":52}},
-            {"kind":"part","component":"button-group","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-text-disabled","line":34}},
+            {"kind":"part","component":"button-group","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-text-disabled","line":39}},
             {"kind":"part","component":"button","part":"root.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.text-disabled","line":56}},
             {"kind":"part","component":"checkbox","part":"box.glyph-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.glyph-disabled","line":44}},
             {"kind":"part","component":"checkbox","part":"text.disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/text.disabled","line":46}},
@@ -18718,7 +18866,7 @@
             {"kind":"part","component":"combobox","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/input.text-disabled","line":45}},
             {"kind":"part","component":"date-picker","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/input.text-disabled","line":43}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-text-disabled","line":37}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-text-disabled","line":39}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-text-disabled","line":44}},
             {"kind":"part","component":"field","part":"control.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.text-disabled","line":27}},
             {"kind":"part","component":"fieldset","part":"field.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.text-disabled","line":29}},
             {"kind":"part","component":"fieldset","part":"legend.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/legend.text-disabled","line":24}},
@@ -18727,13 +18875,13 @@
             {"kind":"part","component":"icon-button","part":"root.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.text-disabled","line":34}},
             {"kind":"part","component":"list","part":"row.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/row.text-disabled","line":41}},
             {"kind":"part","component":"menu","part":"item.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/item.text-disabled","line":48}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-text-disabled","line":45}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-text-disabled","line":52}},
             {"kind":"part","component":"number-field","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/input.text-disabled","line":42}},
             {"kind":"part","component":"pagination","part":"link.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/link.text-disabled","line":33}},
             {"kind":"part","component":"radio-group","part":"box.dot-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.dot-disabled","line":42}},
             {"kind":"part","component":"radio-group","part":"text.disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/text.disabled","line":44}},
             {"kind":"part","component":"range","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-color-text-disabled","line":35}},
-            {"kind":"part","component":"repeater","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-text-disabled","line":35}},
+            {"kind":"part","component":"repeater","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-text-disabled","line":42}},
             {"kind":"part","component":"search-field","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/input.text-disabled","line":39}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-text-disabled","line":45}},
             {"kind":"part","component":"select","part":"control.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/control.text-disabled","line":43}},
@@ -18742,7 +18890,7 @@
             {"kind":"part","component":"tabs","part":"tab.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.text-disabled","line":35}},
             {"kind":"part","component":"text-field","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/input.text-disabled","line":53}},
             {"kind":"part","component":"textarea","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/input.text-disabled","line":45}},
-            {"kind":"part","component":"time-picker","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text-disabled","line":36}},
+            {"kind":"part","component":"time-picker","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text-disabled","line":38}},
             {"kind":"part","component":"toolbar","part":"button.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.text-disabled","line":35}},
             {"kind":"part","component":"tree","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-color-text-disabled","line":40}},
             {"kind":"part","component":"wizard","part":"step.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.text-disabled","line":35}},
@@ -18869,7 +19017,7 @@
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/select.md","pointer":"/contrast/6","line":68}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/2","line":78}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
-            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
+            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled thumb (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/6","line":60}},
             {"fg":"color.text.disabled","bg":"color.surface.canvas","label":"disabled text on canvas (exempt; house floor 3:1)","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/10","line":14}},
             {"fg":"color.text.disabled","bg":"color.surface.canvas","label":"future step text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/wizard.md","pointer":"/contrast/9","line":71}},
@@ -18916,13 +19064,13 @@
           ],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.text.heading","line":374}},
-            {"port":"claude-code","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.text.heading","line":451}},
-            {"port":"codex","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.text.heading","line":397}},
-            {"port":"ghostty","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.text.heading","line":397}},
-            {"port":"orca","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.text.heading","line":401}},
-            {"port":"telegram","reason":"The pinned Telegram theme formats expose shared names and chrome titles, but no independent content-heading foreground; UI titles remain canonical bright rose under D-033.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/color.text.heading","line":1600}},
-            {"port":"warp","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.text.heading","line":392}}
+            {"port":"chatgpt","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.text.heading","line":378}},
+            {"port":"claude-code","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.text.heading","line":455}},
+            {"port":"codex","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.text.heading","line":401}},
+            {"port":"ghostty","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.text.heading","line":401}},
+            {"port":"orca","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.text.heading","line":405}},
+            {"port":"telegram","reason":"The pinned Telegram theme formats expose shared names and chrome titles, but no independent content-heading foreground; UI titles remain canonical bright rose under D-033.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/color.text.heading","line":1604}},
+            {"port":"warp","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.text.heading","line":396}}
           ],
           "uses": [
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/65","line":69}},
@@ -18971,13 +19119,13 @@
           ],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.text.highlight","line":375}},
-            {"port":"claude-code","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.text.highlight","line":452}},
-            {"port":"codex","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.text.highlight","line":398}},
-            {"port":"ghostty","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.text.highlight","line":398}},
-            {"port":"obsidian","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.text.highlight","line":708}},
-            {"port":"orca","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.text.highlight","line":402}},
-            {"port":"warp","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.text.highlight","line":393}}
+            {"port":"chatgpt","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/color.text.highlight","line":379}},
+            {"port":"claude-code","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/color.text.highlight","line":456}},
+            {"port":"codex","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/color.text.highlight","line":402}},
+            {"port":"ghostty","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.text.highlight","line":402}},
+            {"port":"obsidian","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.text.highlight","line":712}},
+            {"port":"orca","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.text.highlight","line":406}},
+            {"port":"warp","reason":"Host exposes no separately mapped content heading/highlight foreground in this port.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.text.highlight","line":397}}
           ],
           "uses": [
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/67","line":71}},
@@ -19019,7 +19167,7 @@
             {"port":"ghostty","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/color.text.inverse","line":317}},
             {"port":"obsidian","reason":"No inverse-surface widget is installed in this dark-only port.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/color.text.inverse","line":541}},
             {"port":"orca","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/color.text.inverse","line":323}},
-            {"port":"telegram","reason":"color.text.inverse has no separate native hook in this projection; related controls share the declared canonical role instead.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/color.text.inverse","line":1599}},
+            {"port":"telegram","reason":"color.text.inverse has no separate native hook in this projection; related controls share the declared canonical role instead.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/color.text.inverse","line":1603}},
             {"port":"warp","reason":"Interface colour role; a terminal theme file carries terminal colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/color.text.inverse","line":312}},
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/color.text.inverse","line":2358}}
           ],
@@ -19168,20 +19316,20 @@
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--text-accent-hover","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/color.text.link-hover/2","line":97}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"nativeExplorer.menuHoverText","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.text.link-hover/0","line":2017}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.LINK_HOVER","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.text.link-hover/1","line":2018}},
-            {"kind":"state","component":"breadcrumbs","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/fg","line":40}},
+            {"kind":"state","component":"breadcrumbs","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/fg","line":40}},
             {"kind":"state","component":"combobox","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover/fg","line":66}},
-            {"kind":"state","component":"link","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/fg","line":37}},
+            {"kind":"state","component":"link","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/fg","line":37}},
             {"kind":"state","component":"menu","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover/fg","line":58}},
-            {"kind":"state","component":"toast","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/fg","line":58}}
+            {"kind":"state","component":"toast","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/fg","line":58}}
           ],
           "contrast": [
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"combobox hover fg","state":"hover","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover","line":66}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"hovered item","state":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/4","line":52}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover text on strong hover fill","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/16","line":20}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"menu hover fg","state":"hover","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}}
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}}
           ]
         },
         "color.text.link-underline": {
@@ -19265,15 +19413,15 @@
             {"kind":"contrast","component":"admin-form","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/contrast/1","line":71}},
             {"kind":"contrast","component":"avatar","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/1","line":46}},
             {"kind":"contrast","component":"breadcrumbs","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
             {"kind":"contrast","component":"card","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/3","line":53}},
             {"kind":"contrast","component":"card","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/1","line":51}},
             {"kind":"contrast","component":"chart","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/1","line":51}},
             {"kind":"contrast","component":"chip","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"kind":"contrast","component":"combobox","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/2","line":76}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
             {"kind":"contrast","component":"date-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/1","line":85}},
             {"kind":"contrast","component":"description-list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/1","line":46}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/18","line":91}},
@@ -19285,33 +19433,33 @@
             {"kind":"contrast","component":"diff-view","part":null,"state":null,"variant":null,"surface":"color.diff.removed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/7","line":77}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/1","line":49}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
             {"kind":"contrast","component":"field","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/1","line":38}},
             {"kind":"contrast","component":"field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/0","line":37}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/2","line":36}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/3","line":83}},
             {"kind":"contrast","component":"form-builder","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/1","line":27}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
             {"kind":"contrast","component":"list","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/0","line":57}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/0","line":32}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/2","line":34}},
             {"kind":"contrast","component":"menu","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/contrast/0","line":65}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/4","line":64}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/0","line":60}},
             {"kind":"contrast","component":"pagination","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/2","line":48}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
             {"kind":"contrast","component":"progress","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/1","line":43}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/4","line":63}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/1","line":60}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/5","line":67}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/2","line":64}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/1","line":60}},
@@ -19321,7 +19469,7 @@
             {"kind":"contrast","component":"terminal","part":null,"state":null,"variant":null,"surface":"color.terminal.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/contrast/5","line":78}},
             {"kind":"contrast","component":"text-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/1","line":77}},
             {"kind":"contrast","component":"textarea","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/1","line":66}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"kind":"contrast","component":"timeline","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/1","line":47}},
             {"kind":"contrast","component":"tree","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/1","line":57}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}},
@@ -19401,7 +19549,7 @@
             {"kind":"part","component":"text-field","part":"loading.glyph","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/loading.glyph","line":66}},
             {"kind":"part","component":"textarea","part":"count.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/count.text","line":53}},
             {"kind":"part","component":"textarea","part":"help.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/help.text","line":52}},
-            {"kind":"part","component":"time-picker","part":"help.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/help.text","line":39}},
+            {"kind":"part","component":"time-picker","part":"help.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/help.text","line":41}},
             {"kind":"part","component":"timeline","part":"secondary.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/secondary.text","line":27}},
             {"kind":"part","component":"toast","part":"count.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/count.text","line":54}},
             {"kind":"part","component":"tree","part":"secondary.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/secondary.text","line":32}},
@@ -19573,7 +19721,7 @@
             {"kind":"state","component":"toast","part":"fg","state":"stacked","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked/fg","line":60}}
           ],
           "contrast": [
-            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"fg":"color.text.muted","bg":"color.code.bg","label":"line numbers on a context row","state":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/5","line":75}},
             {"fg":"color.text.muted","bg":"color.code.selection-bg","label":"muted text on editor selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}},
             {"fg":"color.text.muted","bg":"color.diff.added.bg","label":"line numbers on an added row","state":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/6","line":76}},
@@ -19588,13 +19736,13 @@
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text and the range separator on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/1","line":85}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/2","line":76}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/1","line":38}},
-            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"muted text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/6","line":10}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"status, hint and help text on the canvas","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"toast stacked fg","state":"stacked","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked","line":60}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame container-inactive fg","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/container-inactive","line":68}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame default fg","state":"default","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/default","line":65}},
-            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
+            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"block glyph on the panel surface","state":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/2","line":34}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"caption","state":null,"source":{"file":"spec/components/table.md","pointer":"/contrast/2","line":67}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"count, chip remove glyph and empty-state text","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/3","line":83}},
@@ -19621,21 +19769,21 @@
             {"fg":"color.text.muted","bg":"color.surface.default","label":"remove glyph at rest","state":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"separator on the panel surface","state":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/1","line":46}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/1","line":46}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/1","line":57}},
@@ -20049,8 +20197,7 @@
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"desktop:mediaviewFileSizeFg","port":"telegram","source":{"file":"ports/telegram/mapping.json","pointer":"/mappings/color.text.subtle/16","line":560}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"desktop:msgDateImgFg","port":"telegram","source":{"file":"ports/telegram/mapping.json","pointer":"/mappings/color.text.subtle/15","line":559}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"subtle","port":"claude-code","source":{"file":"ports/claude-code/mapping.json","pointer":"/mappings/color.text.subtle/1","line":128}},
-            {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windhawk.resource.TextFillColorTertiary","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.text.subtle/0","line":1142}},
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
+            {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windhawk.resource.TextFillColorTertiary","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/color.text.subtle/0","line":1142}}
           ],
           "contrast": [
             {"fg":"color.text.subtle","bg":"color.surface.canvas","label":"file sizes on the canvas","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/3","line":66}},
@@ -20076,7 +20223,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/control-height",
-            "line": 295
+            "line": 353
           },
           "provenance": null,
           "aliases": [],
@@ -20087,22 +20234,22 @@
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/density.comfortable.control-height","line":329}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/density.comfortable.control-height","line":329}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/density.comfortable.control-height","line":335}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.comfortable.control-height","line":1567}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.comfortable.control-height","line":1571}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/density.comfortable.control-height","line":324}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.comfortable.control-height","line":2489}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.comfortable.control-height","line":2493}}
           ],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":35}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":42}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":36}},
+            {"kind":"part","component":"button-group","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":40}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":49}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":41}},
             {"kind":"part","component":"disclosure","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":38}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":38}},
-            {"kind":"part","component":"error-state","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":40}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":38}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":46}},
-            {"kind":"part","component":"popover","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":35}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":45}},
+            {"kind":"part","component":"error-state","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":45}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":45}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":53}},
+            {"kind":"part","component":"popover","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":40}},
             {"kind":"part","component":"range","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":36}},
-            {"kind":"part","component":"repeater","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":36}},
+            {"kind":"part","component":"repeater","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":43}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":46}},
             {"kind":"part","component":"tree","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":41}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark .prompt input.prompt-input | min-height","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/density.comfortable.control-height/0","line":349}}
@@ -20125,7 +20272,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/control-padding-x",
-            "line": 307
+            "line": 365
           },
           "provenance": null,
           "aliases": [],
@@ -20135,11 +20282,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":384}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":330}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":330}},
-            {"port":"obsidian","reason":"density.comfortable.control-padding-x: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":678}},
+            {"port":"obsidian","reason":"density.comfortable.control-padding-x: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":682}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":336}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":1569}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":1573}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":325}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":2491}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.comfortable.control-padding-x","line":2495}}
           ],
           "uses": [],
           "contrast": []
@@ -20160,7 +20307,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/gap",
-            "line": 319
+            "line": 377
           },
           "provenance": null,
           "aliases": [],
@@ -20170,11 +20317,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":385}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":331}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":331}},
-            {"port":"obsidian","reason":"density.comfortable.gap: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":680}},
+            {"port":"obsidian","reason":"density.comfortable.gap: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":684}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":337}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":1571}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":1575}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":326}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":2493}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.comfortable.gap","line":2497}}
           ],
           "uses": [],
           "contrast": []
@@ -20195,7 +20342,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/icon",
-            "line": 313
+            "line": 371
           },
           "provenance": null,
           "aliases": [],
@@ -20205,11 +20352,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":386}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":332}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":332}},
-            {"port":"obsidian","reason":"density.comfortable.icon: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":679}},
+            {"port":"obsidian","reason":"density.comfortable.icon: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":683}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":338}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":1570}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":1574}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":327}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":2492}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.comfortable.icon","line":2496}}
           ],
           "uses": [],
           "contrast": []
@@ -20230,7 +20377,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/row-height",
-            "line": 301
+            "line": 359
           },
           "provenance": null,
           "aliases": [],
@@ -20240,11 +20387,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":387}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":333}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":333}},
-            {"port":"obsidian","reason":"density.comfortable.row-height: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":677}},
+            {"port":"obsidian","reason":"density.comfortable.row-height: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":681}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":339}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":1568}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":1572}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":328}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":2490}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.comfortable.row-height","line":2494}}
           ],
           "uses": [],
           "contrast": []
@@ -20265,7 +20412,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/control-height",
-            "line": 263
+            "line": 321
           },
           "provenance": null,
           "aliases": [],
@@ -20275,24 +20422,24 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/density.compact.control-height","line":388}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/density.compact.control-height","line":334}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/density.compact.control-height","line":334}},
-            {"port":"obsidian","reason":"density.compact.control-height: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.compact.control-height","line":674}},
+            {"port":"obsidian","reason":"density.compact.control-height: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.compact.control-height","line":678}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/density.compact.control-height","line":340}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.compact.control-height","line":1562}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.compact.control-height","line":1566}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/density.compact.control-height","line":329}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.compact.control-height","line":2484}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.compact.control-height","line":2488}}
           ],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":36}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":43}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":37}},
+            {"kind":"part","component":"button-group","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":41}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":50}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":42}},
             {"kind":"part","component":"disclosure","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":39}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":39}},
-            {"kind":"part","component":"error-state","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":41}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":39}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":47}},
-            {"kind":"part","component":"popover","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":36}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":46}},
+            {"kind":"part","component":"error-state","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":46}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":46}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":54}},
+            {"kind":"part","component":"popover","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":41}},
             {"kind":"part","component":"range","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":37}},
-            {"kind":"part","component":"repeater","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":37}},
+            {"kind":"part","component":"repeater","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":44}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":47}},
             {"kind":"part","component":"tree","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":42}}
           ],
@@ -20314,7 +20461,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/control-padding-x",
-            "line": 275
+            "line": 333
           },
           "provenance": null,
           "aliases": [],
@@ -20325,9 +20472,9 @@
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/density.compact.control-padding-x","line":335}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/density.compact.control-padding-x","line":335}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/density.compact.control-padding-x","line":341}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.compact.control-padding-x","line":1564}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.compact.control-padding-x","line":1568}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/density.compact.control-padding-x","line":330}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.compact.control-padding-x","line":2486}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.compact.control-padding-x","line":2490}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark .prompt .suggestion-item | padding-inline","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/density.compact.control-padding-x/1","line":346}},
@@ -20351,7 +20498,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/gap",
-            "line": 287
+            "line": 345
           },
           "provenance": null,
           "aliases": [],
@@ -20361,11 +20508,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/density.compact.gap","line":390}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/density.compact.gap","line":336}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/density.compact.gap","line":336}},
-            {"port":"obsidian","reason":"density.compact.gap: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.compact.gap","line":676}},
+            {"port":"obsidian","reason":"density.compact.gap: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.compact.gap","line":680}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/density.compact.gap","line":342}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.compact.gap","line":1566}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.compact.gap","line":1570}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/density.compact.gap","line":331}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.compact.gap","line":2488}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.compact.gap","line":2492}}
           ],
           "uses": [],
           "contrast": []
@@ -20386,7 +20533,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/icon",
-            "line": 281
+            "line": 339
           },
           "provenance": null,
           "aliases": [],
@@ -20396,11 +20543,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/density.compact.icon","line":391}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/density.compact.icon","line":337}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/density.compact.icon","line":337}},
-            {"port":"obsidian","reason":"density.compact.icon: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.compact.icon","line":675}},
+            {"port":"obsidian","reason":"density.compact.icon: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/density.compact.icon","line":679}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/density.compact.icon","line":343}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.compact.icon","line":1565}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.compact.icon","line":1569}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/density.compact.icon","line":332}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.compact.icon","line":2487}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.compact.icon","line":2491}}
           ],
           "uses": [],
           "contrast": []
@@ -20421,7 +20568,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/row-height",
-            "line": 269
+            "line": 327
           },
           "provenance": null,
           "aliases": [],
@@ -20432,9 +20579,9 @@
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/density.compact.row-height","line":338}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/density.compact.row-height","line":338}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/density.compact.row-height","line":344}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.compact.row-height","line":1563}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/density.compact.row-height","line":1567}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/density.compact.row-height","line":333}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.compact.row-height","line":2485}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/density.compact.row-height","line":2489}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark .prompt .suggestion-item | min-height","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/density.compact.row-height/0","line":358}}
@@ -20457,7 +20604,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/offset",
-            "line": 347
+            "line": 405
           },
           "provenance": null,
           "aliases": [],
@@ -20468,12 +20615,29 @@
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/focus.offset","line":339}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/focus.offset","line":339}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/focus.offset","line":345}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/focus.offset","line":1574}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/focus.offset","line":1578}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/focus.offset","line":334}}
           ],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-offset","line":48}},
+            {"kind":"part","component":"avatar","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-focus-offset","line":32}},
+            {"kind":"part","component":"button-group","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-focus-offset","line":42}},
+            {"kind":"part","component":"chart","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-focus-offset","line":35}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-focus-offset","line":51}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-focus-offset","line":43}},
+            {"kind":"part","component":"description-list","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-focus-offset","line":32}},
+            {"kind":"part","component":"disclosure","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-focus-offset","line":40}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-focus-offset","line":47}},
+            {"kind":"part","component":"error-state","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-focus-offset","line":47}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-focus-offset","line":47}},
+            {"kind":"part","component":"kbd","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-focus-offset","line":31}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-offset","line":55}},
+            {"kind":"part","component":"popover","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-focus-offset","line":42}},
+            {"kind":"part","component":"range","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-focus-offset","line":38}},
+            {"kind":"part","component":"repeater","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-focus-offset","line":45}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-focus-offset","line":48}},
+            {"kind":"part","component":"skeleton","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-focus-offset","line":34}},
+            {"kind":"part","component":"timeline","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-focus-offset","line":34}},
+            {"kind":"part","component":"tree","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-focus-offset","line":43}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark .prompt input.prompt-input:focus-visible | outline-offset","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/focus.offset/0","line":355}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"windows-11-start-menu-styler | web :focus-visible | outline-offset","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/focus.offset/0","line":2167}}
           ],
@@ -20495,7 +20659,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/offset-container",
-            "line": 355
+            "line": 413
           },
           "provenance": null,
           "aliases": [],
@@ -20505,9 +20669,9 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/focus.offset-container","line":394}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/focus.offset-container","line":340}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/focus.offset-container","line":340}},
-            {"port":"obsidian","reason":"focus.offset-container: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/focus.offset-container","line":682}},
+            {"port":"obsidian","reason":"focus.offset-container: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/focus.offset-container","line":686}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/focus.offset-container","line":346}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/focus.offset-container","line":1575}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/focus.offset-container","line":1579}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/focus.offset-container","line":335}}
           ],
           "uses": [
@@ -20531,7 +20695,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/offset-invalid",
-            "line": 363
+            "line": 421
           },
           "provenance": null,
           "aliases": [],
@@ -20541,11 +20705,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":395}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":341}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":341}},
-            {"port":"obsidian","reason":"focus.offset-invalid: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":683}},
+            {"port":"obsidian","reason":"focus.offset-invalid: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":687}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":347}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":1576}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":1580}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":336}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":2496}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/focus.offset-invalid","line":2500}}
           ],
           "uses": [],
           "contrast": []
@@ -20566,7 +20730,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/ring",
-            "line": 329
+            "line": 387
           },
           "provenance": null,
           "aliases": [
@@ -20580,12 +20744,12 @@
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/focus.ring","line":342}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/focus.ring","line":342}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/focus.ring","line":348}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/focus.ring","line":1572}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/focus.ring","line":1576}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/focus.ring","line":337}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/focus.ring","line":2494}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/focus.ring","line":2498}}
           ],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-focus-ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-ring","line":49}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-focus-ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-ring","line":56}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-focus-ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-focus-ring","line":49}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark .prompt input.prompt-input:focus-visible | outline","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/focus.ring/0","line":352}}
           ],
@@ -20607,7 +20771,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/ring-container",
-            "line": 338
+            "line": 396
           },
           "provenance": null,
           "aliases": [
@@ -20620,11 +20784,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/focus.ring-container","line":397}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/focus.ring-container","line":343}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/focus.ring-container","line":343}},
-            {"port":"obsidian","reason":"focus.ring-container: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/focus.ring-container","line":681}},
+            {"port":"obsidian","reason":"focus.ring-container: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/focus.ring-container","line":685}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/focus.ring-container","line":349}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/focus.ring-container","line":1573}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/focus.ring-container","line":1577}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/focus.ring-container","line":338}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/focus.ring-container","line":2495}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/focus.ring-container","line":2499}}
           ],
           "uses": [],
           "contrast": []
@@ -20694,7 +20858,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/letter-spacing/terminal",
-            "line": 250
+            "line": 308
           },
           "provenance": null,
           "aliases": [],
@@ -20704,11 +20868,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":399}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":345}},
             {"port":"ghostty","reason":"A Ghostty theme carries colours; Ghostty has no letter-spacing key.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":345}},
-            {"port":"obsidian","reason":"font.letter-spacing.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":673}},
+            {"port":"obsidian","reason":"font.letter-spacing.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":677}},
             {"port":"orca","reason":"Neither the Ghostty config nor Orca's import has a letter-spacing key.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":350}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":1561}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":1565}},
             {"port":"warp","reason":"The application's own terminal font setting.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":340}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":2483}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.letter-spacing.terminal","line":2487}}
           ],
           "uses": [],
           "contrast": []
@@ -20729,7 +20893,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/caption",
-            "line": 241
+            "line": 299
           },
           "provenance": null,
           "aliases": [],
@@ -20739,11 +20903,11 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.caption","line":400}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.caption","line":346}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.caption","line":346}},
-            {"port":"obsidian","reason":"font.line-height.caption: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.caption","line":672}},
+            {"port":"obsidian","reason":"font.line-height.caption: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.caption","line":676}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.caption","line":351}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.caption","line":1560}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.caption","line":1564}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.caption","line":341}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.caption","line":2482}}
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.caption","line":2486}}
           ],
           "uses": [],
           "contrast": []
@@ -20764,7 +20928,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/code",
-            "line": 211
+            "line": 241
           },
           "provenance": null,
           "aliases": [],
@@ -20774,9 +20938,9 @@
             {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.code","line":401}},
             {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.code","line":347}},
             {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.code","line":347}},
-            {"port":"obsidian","reason":"font.line-height.code: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.code","line":667}},
+            {"port":"obsidian","reason":"font.line-height.code: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.code","line":669}},
             {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.code","line":352}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.code","line":1555}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.code","line":1557}},
             {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.code","line":342}}
           ],
           "uses": [
@@ -20784,6 +20948,46 @@
           ],
           "contrast": []
         },
+        "font.line-height.display": {
+          "path": "font.line-height.display",
+          "group": "font",
+          "css": "40px",
+          "variable": "--font-line-height-display",
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/line-height/display",
+            "line": 253
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.display","line":327}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.display","line":402}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.display","line":348}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.display","line":348}},
+            {"port":"obsidian","reason":"font.line-height.display: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.display","line":671}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.display","line":353}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.display","line":1559}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.display","line":343}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.display","line":2484}}
+          ],
+          "uses": [],
+          "contrast": []
+        },
         "font.line-height.h1": {
           "path": "font.line-height.h1",
           "group": "font",
@@ -20800,20 +21004,20 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/h1",
-            "line": 223
+            "line": 281
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.h1","line":327}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.h1","line":402}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.h1","line":348}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.h1","line":348}},
-            {"port":"obsidian","reason":"font.line-height.h1: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.h1","line":669}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.h1","line":353}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.h1","line":1557}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.h1","line":343}}
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.h1","line":329}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.h1","line":404}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.h1","line":350}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.h1","line":350}},
+            {"port":"obsidian","reason":"font.line-height.h1: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.h1","line":673}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.h1","line":355}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.h1","line":1561}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.h1","line":345}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.H1_LINE","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/font.line-height.h1/0","line":2092}}
@@ -20836,20 +21040,20 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/h2",
-            "line": 229
+            "line": 287
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.h2","line":328}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.h2","line":403}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.h2","line":349}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.h2","line":349}},
-            {"port":"obsidian","reason":"font.line-height.h2: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.h2","line":670}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.h2","line":354}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.h2","line":1558}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.h2","line":344}}
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.h2","line":330}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.h2","line":405}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.h2","line":351}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.h2","line":351}},
+            {"port":"obsidian","reason":"font.line-height.h2: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.h2","line":674}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.h2","line":356}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.h2","line":1562}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.h2","line":346}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.H2_LINE","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/font.line-height.h2/0","line":2098}}
@@ -20872,20 +21076,20 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/h3",
-            "line": 235
+            "line": 293
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.h3","line":329}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.h3","line":404}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.h3","line":350}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.h3","line":350}},
-            {"port":"obsidian","reason":"font.line-height.h3: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.h3","line":671}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.h3","line":355}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.h3","line":1559}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.h3","line":345}}
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.h3","line":331}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.h3","line":406}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.h3","line":352}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.h3","line":352}},
+            {"port":"obsidian","reason":"font.line-height.h3: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.h3","line":675}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.h3","line":357}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.h3","line":1563}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.h3","line":347}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.H3_LINE","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/font.line-height.h3/0","line":2125}}
@@ -20908,20 +21112,20 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/reading",
-            "line": 205
+            "line": 235
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.reading","line":330}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.reading","line":405}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.reading","line":351}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.reading","line":351}},
-            {"port":"obsidian","reason":"font.line-height.reading: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.reading","line":666}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.reading","line":356}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.reading","line":1554}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.reading","line":346}}
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.reading","line":332}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.reading","line":407}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.reading","line":353}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.reading","line":353}},
+            {"port":"obsidian","reason":"font.line-height.reading: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.reading","line":668}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.reading","line":358}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.reading","line":1556}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.reading","line":348}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.READING_LINE","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/font.line-height.reading/0","line":2080}}
@@ -20944,21 +21148,61 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/terminal",
-            "line": 217
+            "line": 247
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":331}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":406}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":352}},
-            {"port":"ghostty","reason":"A Ghostty theme carries colours; adjust-cell-height has no exact conversion from a pixel line height.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":352}},
-            {"port":"obsidian","reason":"font.line-height.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":668}},
-            {"port":"orca","reason":"Ghostty's adjust-cell-height, which Orca imports, is relative to the font's own cell height; a pixel line height has no exact conversion. Orca keeps its line-height setting.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":357}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":1556}},
-            {"port":"warp","reason":"The application's own terminal font setting.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":347}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":2481}}
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":333}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":408}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":354}},
+            {"port":"ghostty","reason":"A Ghostty theme carries colours; adjust-cell-height has no exact conversion from a pixel line height.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":354}},
+            {"port":"obsidian","reason":"font.line-height.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":670}},
+            {"port":"orca","reason":"Ghostty's adjust-cell-height, which Orca imports, is relative to the font's own cell height; a pixel line height has no exact conversion. Orca keeps its line-height setting.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":359}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":1558}},
+            {"port":"warp","reason":"The application's own terminal font setting.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":349}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.terminal","line":2483}}
+          ],
+          "uses": [],
+          "contrast": []
+        },
+        "font.line-height.title": {
+          "path": "font.line-height.title",
+          "group": "font",
+          "css": "32px",
+          "variable": "--font-line-height-title",
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/line-height/title",
+            "line": 267
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.title","line":328}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.title","line":403}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.title","line":349}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.title","line":349}},
+            {"port":"obsidian","reason":"font.line-height.title: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.title","line":672}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.title","line":354}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.title","line":1560}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.title","line":344}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.title","line":2485}}
           ],
           "uses": [],
           "contrast": []
@@ -20979,21 +21223,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/ui-lg",
-            "line": 199
+            "line": 229
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":332}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":407}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":353}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":353}},
-            {"port":"obsidian","reason":"font.line-height.ui-lg: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":665}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":358}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":1553}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":348}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":2480}}
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":334}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":409}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":355}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":355}},
+            {"port":"obsidian","reason":"font.line-height.ui-lg: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":667}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":360}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":1555}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":350}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.ui-lg","line":2482}}
           ],
           "uses": [],
           "contrast": []
@@ -21014,24 +21258,24 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/ui-md",
-            "line": 193
+            "line": 223
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":333}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":408}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":354}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":354}},
-            {"port":"obsidian","reason":"font.line-height.ui-md: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":664}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":359}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":1552}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":349}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":2479}}
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":335}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":410}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":356}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":356}},
+            {"port":"obsidian","reason":"font.line-height.ui-md: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":666}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":361}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":1554}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":351}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.ui-md","line":2481}}
           ],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-md","line":50}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-md","line":57}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-line-height-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-line-height-ui-md","line":50}}
           ],
           "contrast": []
@@ -21052,24 +21296,24 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/ui-sm",
-            "line": 187
+            "line": 217
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":334}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":409}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":355}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":355}},
-            {"port":"obsidian","reason":"font.line-height.ui-sm: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":663}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":360}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":1551}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":350}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":2478}}
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":336}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":411}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":357}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":357}},
+            {"port":"obsidian","reason":"font.line-height.ui-sm: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":665}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":362}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":1553}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":352}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.line-height.ui-sm","line":2480}}
           ],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-sm","line":51}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-sm","line":58}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-line-height-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-line-height-ui-sm","line":51}}
           ],
           "contrast": []
@@ -21090,21 +21334,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/caption",
-            "line": 177
+            "line": 207
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.caption","line":335}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.caption","line":410}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.caption","line":356}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.caption","line":356}},
-            {"port":"obsidian","reason":"font.size.caption: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.caption","line":662}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.caption","line":361}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.caption","line":1550}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.caption","line":351}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.size.caption","line":2477}}
+            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.caption","line":337}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.caption","line":412}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.caption","line":358}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.caption","line":358}},
+            {"port":"obsidian","reason":"font.size.caption: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.caption","line":664}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.caption","line":363}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.caption","line":1552}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.caption","line":353}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.size.caption","line":2479}}
           ],
           "uses": [],
           "contrast": []
@@ -21131,13 +21375,13 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.code","line":411}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.code","line":357}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.code","line":357}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.code","line":413}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.code","line":359}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.code","line":359}},
             {"port":"obsidian","reason":"font.size.code: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.code","line":657}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.code","line":362}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.code","line":364}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.code","line":1545}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.code","line":352}}
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.code","line":354}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"Code font size","port":"chatgpt","source":{"file":"ports/chatgpt/mapping.json","pointer":"/mappings/font.size.code/0","line":16}},
@@ -21145,6 +21389,46 @@
           ],
           "contrast": []
         },
+        "font.size.display": {
+          "path": "font.size.display",
+          "group": "font",
+          "css": "32px",
+          "variable": "--font-size-display",
+          "description": "Page heroes and metric figures on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/size/display",
+            "line": 159
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [
+            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.display","line":338}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.display","line":414}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.display","line":360}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.display","line":360}},
+            {"port":"obsidian","reason":"font.size.display: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.display","line":659}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.display","line":365}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.display","line":1547}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.display","line":355}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.size.display","line":2477}}
+          ],
+          "uses": [],
+          "contrast": []
+        },
         "font.size.h1": {
           "path": "font.size.h1",
           "group": "font",
@@ -21161,20 +21445,20 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/h1",
-            "line": 159
+            "line": 189
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.h1","line":336}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.h1","line":412}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.h1","line":358}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.h1","line":358}},
-            {"port":"obsidian","reason":"font.size.h1: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.h1","line":659}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.h1","line":363}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.h1","line":1547}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.h1","line":353}}
+            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.h1","line":340}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.h1","line":416}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.h1","line":362}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.h1","line":362}},
+            {"port":"obsidian","reason":"font.size.h1: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.h1","line":661}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.h1","line":367}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.h1","line":1549}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.h1","line":357}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.H1_SIZE","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/font.size.h1/0","line":2089}}
@@ -21197,23 +21481,23 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/h2",
-            "line": 165
+            "line": 195
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.h2","line":337}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.h2","line":413}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.h2","line":359}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.h2","line":359}},
-            {"port":"obsidian","reason":"font.size.h2: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.h2","line":660}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.h2","line":364}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.h2","line":1548}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.h2","line":354}}
+            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.h2","line":341}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.h2","line":417}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.h2","line":363}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.h2","line":363}},
+            {"port":"obsidian","reason":"font.size.h2: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.h2","line":662}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.h2","line":368}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.h2","line":1550}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.h2","line":358}}
           ],
           "uses": [
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-font-size-h2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-font-size-h2","line":38}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-font-size-h2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-font-size-h2","line":44}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.H2_SIZE","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/font.size.h2/0","line":2095}}
           ],
           "contrast": []
@@ -21234,20 +21518,20 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/h3",
-            "line": 171
+            "line": 201
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.h3","line":338}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.h3","line":414}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.h3","line":360}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.h3","line":360}},
-            {"port":"obsidian","reason":"font.size.h3: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.h3","line":661}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.h3","line":365}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.h3","line":1549}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.h3","line":355}}
+            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.h3","line":342}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.h3","line":418}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.h3","line":364}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.h3","line":364}},
+            {"port":"obsidian","reason":"font.size.h3: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.h3","line":663}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.h3","line":369}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.h3","line":1551}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.h3","line":359}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.H3_SIZE","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/font.size.h3/0","line":2122}}
@@ -21276,13 +21560,13 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.reading","line":415}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.reading","line":361}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.reading","line":361}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.reading","line":419}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.reading","line":365}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.reading","line":365}},
             {"port":"obsidian","reason":"font.size.reading: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.reading","line":656}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.reading","line":366}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.reading","line":370}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.reading","line":1544}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.reading","line":356}}
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.reading","line":360}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.READING_SIZE","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/font.size.reading/0","line":2077}},
@@ -21312,13 +21596,13 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.terminal","line":339}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.terminal","line":416}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.terminal","line":362}},
-            {"port":"ghostty","reason":"A Ghostty theme carries colours; set font-size in your own config.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.terminal","line":362}},
+            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.terminal","line":343}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.terminal","line":420}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.terminal","line":366}},
+            {"port":"ghostty","reason":"A Ghostty theme carries colours; set font-size in your own config.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.terminal","line":366}},
             {"port":"obsidian","reason":"font.size.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.terminal","line":658}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.terminal","line":1546}},
-            {"port":"warp","reason":"The application's own terminal font setting.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.terminal","line":357}},
+            {"port":"warp","reason":"The application's own terminal font setting.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.terminal","line":361}},
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.size.terminal","line":2476}}
           ],
           "uses": [
@@ -21326,6 +21610,46 @@
           ],
           "contrast": []
         },
+        "font.size.title": {
+          "path": "font.size.title",
+          "group": "font",
+          "css": "24px",
+          "variable": "--font-size-title",
+          "description": "Page titles above h1 on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/size/title",
+            "line": 174
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [
+            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.title","line":339}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.title","line":415}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.title","line":361}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.title","line":361}},
+            {"port":"obsidian","reason":"font.size.title: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.title","line":660}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.title","line":366}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.title","line":1548}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.title","line":356}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.size.title","line":2478}}
+          ],
+          "uses": [],
+          "contrast": []
+        },
         "font.size.ui-lg": {
           "path": "font.size.ui-lg",
           "group": "font",
@@ -21348,14 +21672,14 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":340}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":417}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":363}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":363}},
+            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":344}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":421}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":367}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":367}},
             {"port":"obsidian","reason":"font.size.ui-lg: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":655}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":367}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":371}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":1543}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":358}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":362}},
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.size.ui-lg","line":2475}}
           ],
           "uses": [],
@@ -21383,18 +21707,18 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.ui-md","line":341}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.ui-md","line":418}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.ui-md","line":364}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.ui-md","line":364}},
+            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.ui-md","line":345}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.ui-md","line":422}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.ui-md","line":368}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.ui-md","line":368}},
             {"port":"obsidian","reason":"font.size.ui-md: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.ui-md","line":654}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.ui-md","line":368}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.ui-md","line":372}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.ui-md","line":1542}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.ui-md","line":359}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.ui-md","line":363}},
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.size.ui-md","line":2474}}
           ],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-md","line":52}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-md","line":59}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-size-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-size-ui-md","line":52}}
           ],
           "contrast": []
@@ -21421,18 +21745,18 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":342}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":419}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":365}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":365}},
+            {"port":"chatgpt","reason":"ChatGPT has only a UI size and a code size.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":346}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":423}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":369}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":369}},
             {"port":"obsidian","reason":"font.size.ui-sm: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":653}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":369}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":373}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":1541}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":360}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":364}},
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.size.ui-sm","line":2473}}
           ],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-sm","line":53}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-sm","line":60}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-size-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-size-ui-sm","line":53}}
           ],
           "contrast": []
@@ -21459,16 +21783,16 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.weight.bold","line":343}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.weight.bold","line":420}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.weight.bold","line":366}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.weight.bold","line":366}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.weight.bold","line":370}},
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.weight.bold","line":347}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.weight.bold","line":424}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.weight.bold","line":370}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.weight.bold","line":370}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.weight.bold","line":374}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.weight.bold","line":1540}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.weight.bold","line":361}}
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.weight.bold","line":365}}
           ],
           "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-font-weight-bold","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-font-weight-bold","line":32}},
+            {"kind":"part","component":"avatar","part":"dependency.role-font-weight-bold","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-font-weight-bold","line":33}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--font-bold","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/font.weight.bold/0","line":281}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.BOLD","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/font.weight.bold/0","line":2101}}
           ],
@@ -21496,13 +21820,13 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.weight.regular","line":344}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.weight.regular","line":421}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.weight.regular","line":367}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.weight.regular","line":367}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.weight.regular","line":371}},
+            {"port":"chatgpt","reason":"ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/font.weight.regular","line":348}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/font.weight.regular","line":425}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/font.weight.regular","line":371}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/font.weight.regular","line":371}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/font.weight.regular","line":375}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/font.weight.regular","line":1539}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.weight.regular","line":362}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/font.weight.regular","line":366}},
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/font.weight.regular","line":2472}}
           ],
           "uses": [
@@ -21526,21 +21850,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/size/lg",
-            "line": 482
+            "line": 540
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/icon.size.lg","line":345}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/icon.size.lg","line":422}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/icon.size.lg","line":368}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/icon.size.lg","line":368}},
-            {"port":"obsidian","reason":"icon.size.lg: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/icon.size.lg","line":697}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/icon.size.lg","line":372}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/icon.size.lg","line":1590}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/icon.size.lg","line":363}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/icon.size.lg","line":2508}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/icon.size.lg","line":349}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/icon.size.lg","line":426}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/icon.size.lg","line":372}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/icon.size.lg","line":372}},
+            {"port":"obsidian","reason":"icon.size.lg: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/icon.size.lg","line":701}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/icon.size.lg","line":376}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/icon.size.lg","line":1594}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/icon.size.lg","line":367}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/icon.size.lg","line":2512}}
           ],
           "uses": [],
           "contrast": []
@@ -21561,24 +21885,24 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/size/md",
-            "line": 476
+            "line": 534
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/icon.size.md","line":346}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/icon.size.md","line":423}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/icon.size.md","line":369}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/icon.size.md","line":369}},
-            {"port":"obsidian","reason":"icon.size.md: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/icon.size.md","line":696}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/icon.size.md","line":373}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/icon.size.md","line":1589}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/icon.size.md","line":364}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/icon.size.md","line":2507}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/icon.size.md","line":350}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/icon.size.md","line":427}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/icon.size.md","line":373}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/icon.size.md","line":373}},
+            {"port":"obsidian","reason":"icon.size.md: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/icon.size.md","line":700}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/icon.size.md","line":377}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/icon.size.md","line":1593}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/icon.size.md","line":368}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/icon.size.md","line":2511}}
           ],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-icon-size-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-icon-size-md","line":54}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-icon-size-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-icon-size-md","line":61}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-icon-size-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-icon-size-md","line":54}}
           ],
           "contrast": []
@@ -21599,21 +21923,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/size/sm",
-            "line": 470
+            "line": 528
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/icon.size.sm","line":347}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/icon.size.sm","line":424}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/icon.size.sm","line":370}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/icon.size.sm","line":370}},
-            {"port":"obsidian","reason":"icon.size.sm: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/icon.size.sm","line":695}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/icon.size.sm","line":374}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/icon.size.sm","line":1588}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/icon.size.sm","line":365}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/icon.size.sm","line":2506}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/icon.size.sm","line":351}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/icon.size.sm","line":428}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/icon.size.sm","line":374}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/icon.size.sm","line":374}},
+            {"port":"obsidian","reason":"icon.size.sm: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/icon.size.sm","line":699}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/icon.size.sm","line":378}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/icon.size.sm","line":1592}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/icon.size.sm","line":369}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/icon.size.sm","line":2510}}
           ],
           "uses": [],
           "contrast": []
@@ -21634,21 +21958,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/stroke",
-            "line": 489
+            "line": 547
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/icon.stroke","line":348}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/icon.stroke","line":425}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/icon.stroke","line":371}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/icon.stroke","line":371}},
-            {"port":"obsidian","reason":"icon.stroke: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/icon.stroke","line":698}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/icon.stroke","line":375}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/icon.stroke","line":1591}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/icon.stroke","line":366}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/icon.stroke","line":2509}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/icon.stroke","line":352}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/icon.stroke","line":429}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/icon.stroke","line":375}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/icon.stroke","line":375}},
+            {"port":"obsidian","reason":"icon.stroke: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/icon.stroke","line":702}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/icon.stroke","line":379}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/icon.stroke","line":1595}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/icon.stroke","line":370}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/icon.stroke","line":2513}}
           ],
           "uses": [],
           "contrast": []
@@ -21669,21 +21993,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/layout/app-max",
-            "line": 429
+            "line": 487
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/layout.app-max","line":349}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/layout.app-max","line":426}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/layout.app-max","line":372}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/layout.app-max","line":372}},
-            {"port":"obsidian","reason":"layout.app-max: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/layout.app-max","line":690}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/layout.app-max","line":376}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/layout.app-max","line":1583}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/layout.app-max","line":367}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/layout.app-max","line":2501}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/layout.app-max","line":353}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/layout.app-max","line":430}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/layout.app-max","line":376}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/layout.app-max","line":376}},
+            {"port":"obsidian","reason":"layout.app-max: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/layout.app-max","line":694}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/layout.app-max","line":380}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/layout.app-max","line":1587}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/layout.app-max","line":371}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/layout.app-max","line":2505}}
           ],
           "uses": [],
           "contrast": []
@@ -21704,20 +22028,20 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/layout/content-max",
-            "line": 421
+            "line": 479
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/layout.content-max","line":350}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/layout.content-max","line":427}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/layout.content-max","line":373}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/layout.content-max","line":373}},
-            {"port":"obsidian","reason":"layout.content-max: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/layout.content-max","line":689}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/layout.content-max","line":377}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/layout.content-max","line":1582}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/layout.content-max","line":368}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/layout.content-max","line":354}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/layout.content-max","line":431}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/layout.content-max","line":377}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/layout.content-max","line":377}},
+            {"port":"obsidian","reason":"layout.content-max: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/layout.content-max","line":693}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/layout.content-max","line":381}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/layout.content-max","line":1586}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/layout.content-max","line":372}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.CONTENT_MAX","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/layout.content-max/0","line":2131}}
@@ -21740,20 +22064,20 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/layout/measure",
-            "line": 416
+            "line": 474
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/layout.measure","line":351}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/layout.measure","line":428}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/layout.measure","line":374}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/layout.measure","line":374}},
-            {"port":"obsidian","reason":"layout.measure: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/layout.measure","line":688}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/layout.measure","line":378}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/layout.measure","line":1581}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/layout.measure","line":369}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/layout.measure","line":355}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/layout.measure","line":432}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/layout.measure","line":378}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/layout.measure","line":378}},
+            {"port":"obsidian","reason":"layout.measure: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/layout.measure","line":692}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/layout.measure","line":382}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/layout.measure","line":1585}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/layout.measure","line":373}}
           ],
           "uses": [
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.MEASURE","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/layout.measure/0","line":2128}}
@@ -21776,21 +22100,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/motion/duration/base",
-            "line": 381
+            "line": 439
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/motion.duration.base","line":352}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/motion.duration.base","line":429}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/motion.duration.base","line":375}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/motion.duration.base","line":375}},
-            {"port":"obsidian","reason":"motion.duration.base: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/motion.duration.base","line":685}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/motion.duration.base","line":379}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/motion.duration.base","line":1578}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/motion.duration.base","line":370}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/motion.duration.base","line":2498}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/motion.duration.base","line":356}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/motion.duration.base","line":433}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/motion.duration.base","line":379}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/motion.duration.base","line":379}},
+            {"port":"obsidian","reason":"motion.duration.base: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/motion.duration.base","line":689}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/motion.duration.base","line":383}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/motion.duration.base","line":1582}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/motion.duration.base","line":374}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/motion.duration.base","line":2502}}
           ],
           "uses": [],
           "contrast": []
@@ -21811,21 +22135,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/motion/duration/fast",
-            "line": 375
+            "line": 433
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/motion.duration.fast","line":353}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/motion.duration.fast","line":430}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/motion.duration.fast","line":376}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/motion.duration.fast","line":376}},
-            {"port":"obsidian","reason":"motion.duration.fast: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/motion.duration.fast","line":684}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/motion.duration.fast","line":380}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/motion.duration.fast","line":1577}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/motion.duration.fast","line":371}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/motion.duration.fast","line":2497}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/motion.duration.fast","line":357}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/motion.duration.fast","line":434}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/motion.duration.fast","line":380}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/motion.duration.fast","line":380}},
+            {"port":"obsidian","reason":"motion.duration.fast: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/motion.duration.fast","line":688}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/motion.duration.fast","line":384}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/motion.duration.fast","line":1581}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/motion.duration.fast","line":375}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/motion.duration.fast","line":2501}}
           ],
           "uses": [],
           "contrast": []
@@ -21846,21 +22170,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/motion/duration/slow",
-            "line": 387
+            "line": 445
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/motion.duration.slow","line":354}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/motion.duration.slow","line":431}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/motion.duration.slow","line":377}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/motion.duration.slow","line":377}},
-            {"port":"obsidian","reason":"motion.duration.slow: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/motion.duration.slow","line":686}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/motion.duration.slow","line":381}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/motion.duration.slow","line":1579}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/motion.duration.slow","line":372}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/motion.duration.slow","line":2499}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/motion.duration.slow","line":358}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/motion.duration.slow","line":435}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/motion.duration.slow","line":381}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/motion.duration.slow","line":381}},
+            {"port":"obsidian","reason":"motion.duration.slow: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/motion.duration.slow","line":690}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/motion.duration.slow","line":385}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/motion.duration.slow","line":1583}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/motion.duration.slow","line":376}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/motion.duration.slow","line":2503}}
           ],
           "uses": [],
           "contrast": []
@@ -21887,34 +22211,34 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"ChatGPT keeps its own geometry; this j3w1 value cannot be set.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/radius.none","line":355}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/radius.none","line":432}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/radius.none","line":378}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/radius.none","line":378}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/radius.none","line":382}},
+            {"port":"chatgpt","reason":"ChatGPT keeps its own geometry; this j3w1 value cannot be set.","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/radius.none","line":359}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/radius.none","line":436}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/radius.none","line":382}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/radius.none","line":382}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/radius.none","line":386}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/radius.none","line":1537}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/radius.none","line":373}}
-          ],
-          "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-radius-none","line":33}},
-            {"kind":"part","component":"button-group","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-radius-none","line":37}},
-            {"kind":"part","component":"chart","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-radius-none","line":38}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-radius-none","line":44}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-radius-none","line":39}},
-            {"kind":"part","component":"description-list","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-radius-none","line":32}},
-            {"kind":"part","component":"disclosure","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-radius-none","line":40}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-radius-none","line":40}},
-            {"kind":"part","component":"error-state","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-radius-none","line":42}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-radius-none","line":40}},
-            {"kind":"part","component":"kbd","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-radius-none","line":31}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-radius-none","line":55}},
-            {"kind":"part","component":"popover","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-radius-none","line":37}},
-            {"kind":"part","component":"range","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-radius-none","line":38}},
-            {"kind":"part","component":"repeater","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-radius-none","line":38}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/radius.none","line":377}}
+          ],
+          "uses": [
+            {"kind":"part","component":"avatar","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-radius-none","line":34}},
+            {"kind":"part","component":"button-group","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-radius-none","line":43}},
+            {"kind":"part","component":"chart","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-radius-none","line":39}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-radius-none","line":52}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-radius-none","line":45}},
+            {"kind":"part","component":"description-list","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-radius-none","line":33}},
+            {"kind":"part","component":"disclosure","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-radius-none","line":41}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-radius-none","line":48}},
+            {"kind":"part","component":"error-state","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-radius-none","line":48}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-radius-none","line":48}},
+            {"kind":"part","component":"kbd","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-radius-none","line":32}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-radius-none","line":62}},
+            {"kind":"part","component":"popover","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-radius-none","line":43}},
+            {"kind":"part","component":"range","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-radius-none","line":39}},
+            {"kind":"part","component":"repeater","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-radius-none","line":46}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-radius-none","line":55}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-radius-none","line":34}},
-            {"kind":"part","component":"timeline","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-radius-none","line":34}},
-            {"kind":"part","component":"tree","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-radius-none","line":43}},
+            {"kind":"part","component":"skeleton","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-radius-none","line":35}},
+            {"kind":"part","component":"timeline","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-radius-none","line":35}},
+            {"kind":"part","component":"tree","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-radius-none","line":44}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--button-radius","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/radius.none/6","line":306}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--callout-radius","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/radius.none/23","line":323}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"--checkbox-radius","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/radius.none/7","line":307}},
@@ -22073,7 +22397,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/shadow/floating",
-            "line": 398
+            "line": 456
           },
           "provenance": null,
           "aliases": [
@@ -22082,15 +22406,15 @@
           ],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/shadow.floating","line":356}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/shadow.floating","line":433}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/shadow.floating","line":379}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/shadow.floating","line":379}},
-            {"port":"obsidian","reason":"shadow.floating: terminal, diff, chart, hued syntax or desktop specimen semantics are outside this Markdown/application port.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/shadow.floating","line":687}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/shadow.floating","line":383}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/shadow.floating","line":1580}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/shadow.floating","line":374}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/shadow.floating","line":2500}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/shadow.floating","line":360}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/shadow.floating","line":437}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/shadow.floating","line":383}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/shadow.floating","line":383}},
+            {"port":"obsidian","reason":"shadow.floating: terminal, diff, chart, hued syntax or desktop specimen semantics are outside this Markdown/application port.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/shadow.floating","line":691}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/shadow.floating","line":387}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/shadow.floating","line":1584}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/shadow.floating","line":378}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/shadow.floating","line":2504}}
           ],
           "uses": [
             {"kind":"part","component":"i3-window-frame","part":"floating.shadow","state":null,"variant":"floating","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/floating.shadow","line":60}}
@@ -22121,14 +22445,14 @@
             "shadow.floating"
           ],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.0","line":357}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.0","line":434}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.0","line":380}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.0","line":380}},
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.0","line":361}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.0","line":438}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.0","line":384}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.0","line":384}},
             {"port":"obsidian","reason":"space.0: native spacing retained except the explicitly mapped compact prompt padding.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/space.0","line":644}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.0","line":384}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.0","line":388}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/space.0","line":1525}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.0","line":375}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.0","line":379}},
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/space.0","line":2468}}
           ],
           "uses": [],
@@ -22156,14 +22480,14 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.1","line":358}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.1","line":435}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.1","line":381}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.1","line":381}},
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.1","line":362}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.1","line":439}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.1","line":385}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.1","line":385}},
             {"port":"obsidian","reason":"space.1: native spacing retained except the explicitly mapped compact prompt padding.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/space.1","line":645}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.1","line":385}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.1","line":389}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/space.1","line":1526}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.1","line":376}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.1","line":380}},
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/space.1","line":2469}}
           ],
           "uses": [],
@@ -22191,35 +22515,35 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.12","line":359}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.12","line":436}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.12","line":382}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.12","line":382}},
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.12","line":363}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.12","line":440}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.12","line":386}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.12","line":386}},
             {"port":"obsidian","reason":"space.12: native spacing retained except the explicitly mapped compact prompt padding.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/space.12","line":648}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.12","line":386}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.12","line":390}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/space.12","line":1530}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.12","line":377}}
-          ],
-          "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-space-12","line":34}},
-            {"kind":"part","component":"button-group","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-12","line":38}},
-            {"kind":"part","component":"chart","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-12","line":39}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-12","line":45}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-12","line":40}},
-            {"kind":"part","component":"description-list","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-12","line":33}},
-            {"kind":"part","component":"disclosure","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-12","line":41}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-12","line":41}},
-            {"kind":"part","component":"error-state","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-12","line":43}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-12","line":41}},
-            {"kind":"part","component":"kbd","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-12","line":32}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-12","line":56}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-12","line":38}},
-            {"kind":"part","component":"range","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-12","line":39}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-12","line":39}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.12","line":381}}
+          ],
+          "uses": [
+            {"kind":"part","component":"avatar","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-space-12","line":35}},
+            {"kind":"part","component":"button-group","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-12","line":44}},
+            {"kind":"part","component":"chart","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-12","line":40}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-12","line":53}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-12","line":46}},
+            {"kind":"part","component":"description-list","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-12","line":34}},
+            {"kind":"part","component":"disclosure","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-12","line":42}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-12","line":49}},
+            {"kind":"part","component":"error-state","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-12","line":49}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-12","line":49}},
+            {"kind":"part","component":"kbd","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-12","line":33}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-12","line":63}},
+            {"kind":"part","component":"popover","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-12","line":44}},
+            {"kind":"part","component":"range","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-12","line":40}},
+            {"kind":"part","component":"repeater","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-12","line":47}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-12","line":56}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-12","line":35}},
-            {"kind":"part","component":"timeline","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-12","line":35}},
-            {"kind":"part","component":"tree","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-12","line":44}},
+            {"kind":"part","component":"skeleton","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-12","line":36}},
+            {"kind":"part","component":"timeline","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-12","line":36}},
+            {"kind":"part","component":"tree","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-12","line":45}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.SPACE12","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/space.12/0","line":2113}}
           ],
           "contrast": []
@@ -22246,22 +22570,22 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.16","line":360}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.16","line":437}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.16","line":383}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.16","line":383}},
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.16","line":364}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.16","line":441}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.16","line":387}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.16","line":387}},
             {"port":"obsidian","reason":"space.16: native spacing retained except the explicitly mapped compact prompt padding.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/space.16","line":649}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.16","line":387}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.16","line":391}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/space.16","line":1531}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.16","line":378}}
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.16","line":382}}
           ],
           "uses": [
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-16","line":46}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-16","line":42}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-16","line":39}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-16","line":54}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-16","line":50}},
+            {"kind":"part","component":"popover","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-16","line":45}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-16","line":57}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-16","line":36}},
-            {"kind":"part","component":"tree","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-16","line":45}},
+            {"kind":"part","component":"skeleton","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-16","line":37}},
+            {"kind":"part","component":"tree","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-16","line":46}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.SPACE16","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/space.16/0","line":2116}}
           ],
           "contrast": []
@@ -22288,35 +22612,19 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.2","line":361}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.2","line":438}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.2","line":384}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.2","line":384}},
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.2","line":365}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.2","line":442}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.2","line":388}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.2","line":388}},
             {"port":"obsidian","reason":"space.2: native spacing retained except the explicitly mapped compact prompt padding.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/space.2","line":646}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.2","line":388}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.2","line":392}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/space.2","line":1527}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.2","line":379}}
-          ],
-          "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-space-2","line":35}},
-            {"kind":"part","component":"button-group","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-2","line":39}},
-            {"kind":"part","component":"chart","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-2","line":47}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-2","line":41}},
-            {"kind":"part","component":"description-list","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-2","line":34}},
-            {"kind":"part","component":"disclosure","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-2","line":42}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-2","line":42}},
-            {"kind":"part","component":"error-state","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-2","line":44}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-2","line":43}},
-            {"kind":"part","component":"kbd","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-2","line":33}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-2","line":57}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"range","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-2","line":58}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-2","line":37}},
-            {"kind":"part","component":"timeline","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-2","line":36}},
-            {"kind":"part","component":"tree","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-2","line":46}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.2","line":383}}
+          ],
+          "uses": [
+            {"kind":"part","component":"kbd","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-2","line":34}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-2","line":64}},
+            {"kind":"part","component":"range","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-2","line":41}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.SPACE2","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/space.2/0","line":2104}}
           ],
           "contrast": []
@@ -22343,19 +22651,19 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.24","line":362}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.24","line":439}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.24","line":385}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.24","line":385}},
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.24","line":366}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.24","line":443}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.24","line":389}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.24","line":389}},
             {"port":"obsidian","reason":"space.24: native spacing retained except the explicitly mapped compact prompt padding.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/space.24","line":650}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.24","line":389}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.24","line":393}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/space.24","line":1532}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.24","line":380}}
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.24","line":384}}
           ],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-24","line":58}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-24","line":41}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-24","line":59}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-24","line":65}},
+            {"kind":"part","component":"repeater","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-24","line":48}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-24","line":58}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.SPACE24","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/space.24/0","line":2119}}
           ],
           "contrast": []
@@ -22382,14 +22690,14 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.32","line":363}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.32","line":440}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.32","line":386}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.32","line":386}},
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.32","line":367}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.32","line":444}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.32","line":390}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.32","line":390}},
             {"port":"obsidian","reason":"space.32: native spacing retained except the explicitly mapped compact prompt padding.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/space.32","line":651}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.32","line":390}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.32","line":394}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/space.32","line":1533}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.32","line":381}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.32","line":385}},
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/space.32","line":2470}}
           ],
           "uses": [
@@ -22419,20 +22727,20 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.4","line":364}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.4","line":441}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.4","line":387}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.4","line":387}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.4","line":391}},
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.4","line":368}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.4","line":445}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.4","line":391}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.4","line":391}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.4","line":395}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/space.4","line":1528}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.4","line":382}}
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.4","line":386}}
           ],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-4","line":40}},
+            {"kind":"part","component":"button-group","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-4","line":45}},
             {"kind":"part","component":"description-list","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-4","line":35}},
-            {"kind":"part","component":"kbd","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-4","line":34}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-4","line":59}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-4","line":60}},
+            {"kind":"part","component":"kbd","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-4","line":35}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-4","line":66}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-4","line":59}},
             {"kind":"part","component":"timeline","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-4","line":37}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark .prompt .suggestion-item | padding-block","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/space.4/1","line":342}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":".theme-dark .prompt input.prompt-input | padding-block","port":"obsidian","source":{"file":"ports/obsidian/mapping.json","pointer":"/mappings/space.4/0","line":341}},
@@ -22462,14 +22770,14 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.48","line":365}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.48","line":442}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.48","line":388}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.48","line":388}},
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.48","line":369}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.48","line":446}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.48","line":392}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.48","line":392}},
             {"port":"obsidian","reason":"space.48: native spacing retained except the explicitly mapped compact prompt padding.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/space.48","line":652}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.48","line":392}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.48","line":396}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/space.48","line":1534}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.48","line":383}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.48","line":387}},
             {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/space.48","line":2471}}
           ],
           "uses": [],
@@ -22497,30 +22805,30 @@
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.8","line":366}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.8","line":443}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.8","line":389}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.8","line":389}},
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/space.8","line":370}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/space.8","line":447}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/space.8","line":393}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/space.8","line":393}},
             {"port":"obsidian","reason":"space.8: native spacing retained except the explicitly mapped compact prompt padding.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/space.8","line":647}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.8","line":393}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/space.8","line":397}},
             {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/space.8","line":1529}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.8","line":384}}
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/space.8","line":388}}
           ],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-8","line":41}},
+            {"kind":"part","component":"button-group","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-8","line":46}},
             {"kind":"part","component":"chart","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-8","line":41}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-8","line":48}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-8","line":42}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-8","line":55}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-8","line":47}},
             {"kind":"part","component":"description-list","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-8","line":36}},
             {"kind":"part","component":"disclosure","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-8","line":43}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-8","line":43}},
-            {"kind":"part","component":"error-state","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-8","line":45}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-8","line":44}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-8","line":60}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-8","line":41}},
-            {"kind":"part","component":"range","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-8","line":41}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-8","line":42}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-8","line":61}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-8","line":50}},
+            {"kind":"part","component":"error-state","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-8","line":50}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-8","line":51}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-8","line":67}},
+            {"kind":"part","component":"popover","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-8","line":46}},
+            {"kind":"part","component":"range","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-8","line":42}},
+            {"kind":"part","component":"repeater","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-8","line":49}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-8","line":60}},
             {"kind":"part","component":"tree","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-8","line":47}},
             {"kind":"port","component":null,"part":null,"state":null,"variant":null,"surface":null,"nativeKey":"powertoys.markdown.SPACE8","port":"windows","source":{"file":"ports/windows/mapping.json","pointer":"/mappings/space.8/0","line":2110}}
           ],
@@ -22542,21 +22850,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/canvas",
-            "line": 500
+            "line": 558
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.canvas","line":367}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.canvas","line":444}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.canvas","line":390}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.canvas","line":390}},
-            {"port":"obsidian","reason":"z.canvas: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.canvas","line":699}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.canvas","line":394}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.canvas","line":1592}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.canvas","line":385}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.canvas","line":2510}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.canvas","line":371}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.canvas","line":448}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.canvas","line":394}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.canvas","line":394}},
+            {"port":"obsidian","reason":"z.canvas: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.canvas","line":703}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.canvas","line":398}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.canvas","line":1596}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.canvas","line":389}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.canvas","line":2514}}
           ],
           "uses": [],
           "contrast": []
@@ -22577,21 +22885,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/dialog",
-            "line": 512
+            "line": 570
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.dialog","line":368}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.dialog","line":445}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.dialog","line":391}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.dialog","line":391}},
-            {"port":"obsidian","reason":"z.dialog: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.dialog","line":703}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.dialog","line":395}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.dialog","line":1596}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.dialog","line":386}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.dialog","line":2514}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.dialog","line":372}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.dialog","line":449}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.dialog","line":395}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.dialog","line":395}},
+            {"port":"obsidian","reason":"z.dialog: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.dialog","line":707}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.dialog","line":399}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.dialog","line":1600}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.dialog","line":390}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.dialog","line":2518}}
           ],
           "uses": [
             {"kind":"part","component":"dialog","part":"root.z","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/root.z","line":35}}
@@ -22614,21 +22922,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/drawer",
-            "line": 509
+            "line": 567
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.drawer","line":369}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.drawer","line":446}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.drawer","line":392}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.drawer","line":392}},
-            {"port":"obsidian","reason":"z.drawer: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.drawer","line":702}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.drawer","line":396}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.drawer","line":1595}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.drawer","line":387}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.drawer","line":2513}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.drawer","line":373}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.drawer","line":450}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.drawer","line":396}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.drawer","line":396}},
+            {"port":"obsidian","reason":"z.drawer: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.drawer","line":706}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.drawer","line":400}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.drawer","line":1599}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.drawer","line":391}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.drawer","line":2517}}
           ],
           "uses": [
             {"kind":"part","component":"drawer","part":"root.z","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/root.z","line":31}}
@@ -22651,21 +22959,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/popover",
-            "line": 506
+            "line": 564
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.popover","line":370}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.popover","line":447}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.popover","line":393}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.popover","line":393}},
-            {"port":"obsidian","reason":"z.popover: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.popover","line":701}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.popover","line":397}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.popover","line":1594}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.popover","line":388}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.popover","line":2512}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.popover","line":374}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.popover","line":451}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.popover","line":397}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.popover","line":397}},
+            {"port":"obsidian","reason":"z.popover: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.popover","line":705}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.popover","line":401}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.popover","line":1598}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.popover","line":392}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.popover","line":2516}}
           ],
           "uses": [
             {"kind":"part","component":"tooltip","part":"popup.z","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/tokens/popup.z","line":36}}
@@ -22688,21 +22996,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/raised",
-            "line": 503
+            "line": 561
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.raised","line":371}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.raised","line":448}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.raised","line":394}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.raised","line":394}},
-            {"port":"obsidian","reason":"z.raised: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.raised","line":700}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.raised","line":398}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.raised","line":1593}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.raised","line":389}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.raised","line":2511}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.raised","line":375}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.raised","line":452}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.raised","line":398}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.raised","line":398}},
+            {"port":"obsidian","reason":"z.raised: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.raised","line":704}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.raised","line":402}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.raised","line":1597}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.raised","line":393}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.raised","line":2515}}
           ],
           "uses": [],
           "contrast": []
@@ -22723,21 +23031,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/skip-link",
-            "line": 518
+            "line": 576
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.skip-link","line":372}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.skip-link","line":449}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.skip-link","line":395}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.skip-link","line":395}},
-            {"port":"obsidian","reason":"z.skip-link: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.skip-link","line":705}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.skip-link","line":399}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.skip-link","line":1598}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.skip-link","line":390}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.skip-link","line":2516}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.skip-link","line":376}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.skip-link","line":453}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.skip-link","line":399}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.skip-link","line":399}},
+            {"port":"obsidian","reason":"z.skip-link: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.skip-link","line":709}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.skip-link","line":403}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.skip-link","line":1602}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.skip-link","line":394}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.skip-link","line":2520}}
           ],
           "uses": [],
           "contrast": []
@@ -22758,21 +23066,21 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/toast",
-            "line": 515
+            "line": 573
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [
-            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.toast","line":373}},
-            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.toast","line":450}},
-            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.toast","line":396}},
-            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.toast","line":396}},
-            {"port":"obsidian","reason":"z.toast: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.toast","line":704}},
-            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.toast","line":400}},
-            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.toast","line":1597}},
-            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.toast","line":391}},
-            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.toast","line":2515}}
+            {"port":"chatgpt","reason":"Not an appearance setting ChatGPT exposes (geometry, spacing, motion, layout or breakpoints).","source":{"file":"ports/chatgpt/mapping.json","pointer":"/unmapped/z.toast","line":377}},
+            {"port":"claude-code","reason":"Not a colour; a Claude Code theme carries colours only.","source":{"file":"ports/claude-code/mapping.json","pointer":"/unmapped/z.toast","line":454}},
+            {"port":"codex","reason":"Not a colour; a tmTheme carries colours only.","source":{"file":"ports/codex/mapping.json","pointer":"/unmapped/z.toast","line":400}},
+            {"port":"ghostty","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/ghostty/mapping.json","pointer":"/unmapped/z.toast","line":400}},
+            {"port":"obsidian","reason":"z.toast: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.","source":{"file":"ports/obsidian/mapping.json","pointer":"/unmapped/z.toast","line":708}},
+            {"port":"orca","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/orca/mapping.json","pointer":"/unmapped/z.toast","line":404}},
+            {"port":"telegram","reason":"Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.","source":{"file":"ports/telegram/mapping.json","pointer":"/unmapped/z.toast","line":1601}},
+            {"port":"warp","reason":"Not a colour; a terminal theme file carries colours only.","source":{"file":"ports/warp/mapping.json","pointer":"/unmapped/z.toast","line":395}},
+            {"port":"windows","reason":"Outside Windows visual adapter scope; preserve host semantics.","source":{"file":"ports/windows/mapping.json","pointer":"/unmapped/z.toast","line":2519}}
           ],
           "uses": [
             {"kind":"part","component":"toast","part":"stack.z","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/stack.z","line":55}}
@@ -22810,20 +23118,20 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"part","component":"avatar","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
-            {"kind":"part","component":"button-group","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
+            {"kind":"part","component":"button-group","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-border-width-default","line":36}},
             {"kind":"part","component":"chart","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-default","line":34}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-border-width-default","line":33}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-default","line":41}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-border-width-default","line":38}},
             {"kind":"part","component":"description-list","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-border-width-default","line":30}},
             {"kind":"part","component":"disclosure","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
-            {"kind":"part","component":"error-state","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-default","line":33}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-default","line":34}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-border-width-default","line":39}},
+            {"kind":"part","component":"error-state","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-default","line":38}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-default","line":41}},
             {"kind":"part","component":"kbd","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-border-width-default","line":29}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-default","line":33}},
-            {"kind":"part","component":"popover","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-default","line":40}},
+            {"kind":"part","component":"popover","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-border-width-default","line":37}},
             {"kind":"part","component":"range","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
-            {"kind":"part","component":"repeater","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
+            {"kind":"part","component":"repeater","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-border-width-default","line":39}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
             {"kind":"part","component":"skeleton","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
             {"kind":"part","component":"timeline","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-border-width-default","line":30}},
@@ -22856,12 +23164,12 @@
           ],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":35}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":42}},
             {"kind":"part","component":"disclosure","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":33}},
-            {"kind":"part","component":"error-state","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":34}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":35}},
+            {"kind":"part","component":"error-state","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":39}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":42}},
             {"kind":"part","component":"kbd","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":30}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":34}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":41}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":33}},
             {"kind":"part","component":"timeline","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":31}},
             {"kind":"part","component":"tree","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":36}}
@@ -22884,7 +23192,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/lg",
-            "line": 459
+            "line": 517
           },
           "provenance": null,
           "aliases": [],
@@ -22909,7 +23217,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/md",
-            "line": 453
+            "line": 511
           },
           "provenance": null,
           "aliases": [],
@@ -22934,7 +23242,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/sm",
-            "line": 447
+            "line": 505
           },
           "provenance": null,
           "aliases": [],
@@ -22959,7 +23267,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/xs",
-            "line": 440
+            "line": 498
           },
           "provenance": null,
           "aliases": [],
@@ -23269,7 +23577,7 @@
             {"kind":"part","component":"file-input","part":"progress.stripe","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/progress.stripe","line":53}},
             {"kind":"part","component":"filterable-table","part":"check.checked-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/check.checked-bg","line":60}},
             {"kind":"part","component":"filterable-table","part":"new.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/new.bg","line":43}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-bg","line":35}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-bg","line":42}},
             {"kind":"part","component":"progress","part":"stripe.a","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/tokens/stripe.a","line":32}},
             {"kind":"part","component":"progress","part":"value.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/tokens/value.bg","line":30}},
             {"kind":"part","component":"radio-group","part":"box.bg-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-checked","line":35}},
@@ -23392,7 +23700,7 @@
             {"kind":"part","component":"button","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.bg-hover","line":33}},
             {"kind":"part","component":"checkbox","part":"box.bg-checked-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg-checked-hover","line":38}},
             {"kind":"part","component":"dialog","part":"primary.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/primary.bg-hover","line":46}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-hover-bg","line":36}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-hover-bg","line":43}},
             {"kind":"part","component":"radio-group","part":"box.bg-checked-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-checked-hover","line":36}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-action-primary-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-action-primary-hover-bg","line":35}},
             {"kind":"part","component":"switch","part":"track.bg-checked-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.bg-checked-hover","line":37}},
@@ -23493,7 +23801,7 @@
             {"kind":"part","component":"dialog","part":"primary.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/primary.text","line":45}},
             {"kind":"part","component":"filterable-table","part":"check.glyph","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/check.glyph","line":61}},
             {"kind":"part","component":"filterable-table","part":"new.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/new.text","line":44}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-text","line":37}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-text","line":44}},
             {"kind":"part","component":"radio-group","part":"box.dot","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.dot","line":37}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-action-primary-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-action-primary-text","line":36}},
             {"kind":"part","component":"settings-panel","part":"apply.busy-glyph","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/apply.busy-glyph","line":50}},
@@ -23577,9 +23885,18 @@
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/12","line":79}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/2","line":69}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/7","line":74}},
+            {"kind":"part","component":"button-group","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"button","part":"secondary.bg","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.bg","line":36}},
+            {"kind":"part","component":"command-palette","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.bg","line":34}},
+            {"kind":"part","component":"compact-dashboard","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg","line":31}},
+            {"kind":"part","component":"editor-search","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.bg","line":32}},
+            {"kind":"part","component":"error-state","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg","line":31}},
+            {"kind":"part","component":"file-browser","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.bg","line":34}},
             {"kind":"part","component":"file-input","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg","line":31}},
             {"kind":"part","component":"icon-button","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.bg","line":24}},
+            {"kind":"part","component":"multiselect","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.bg","line":33}},
+            {"kind":"part","component":"popover","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg","line":30}},
+            {"kind":"part","component":"repeater","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.bg","line":32}},
             {"kind":"state","component":"icon-button","part":"bg","state":"default","variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/default/bg","line":39}},
             {"kind":"state","component":"icon-button","part":"bg","state":"focus-visible","variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/focus-visible/bg","line":41}}
           ],
@@ -23628,10 +23945,19 @@
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/5","line":64}},
             {"kind":"contrast","component":"wizard","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/6","line":68}},
             {"kind":"part","component":"admin-form","part":"back.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/back.border","line":62}},
+            {"kind":"part","component":"button-group","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.border","line":31}},
             {"kind":"part","component":"button","part":"secondary.border","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.border","line":38}},
+            {"kind":"part","component":"command-palette","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.border","line":36}},
+            {"kind":"part","component":"compact-dashboard","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.border","line":33}},
             {"kind":"part","component":"dialog","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/button.border","line":42}},
+            {"kind":"part","component":"editor-search","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.border","line":34}},
             {"kind":"part","component":"empty-state","part":"action.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.border","line":29}},
+            {"kind":"part","component":"error-state","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.border","line":33}},
+            {"kind":"part","component":"file-browser","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.border","line":36}},
             {"kind":"part","component":"file-input","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.border","line":33}},
+            {"kind":"part","component":"multiselect","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.border","line":35}},
+            {"kind":"part","component":"popover","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.border","line":32}},
+            {"kind":"part","component":"repeater","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.border","line":34}},
             {"kind":"part","component":"settings-panel","part":"reset.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/reset.border","line":52}},
             {"kind":"part","component":"wizard","part":"back.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/back.border","line":51}},
             {"kind":"state","component":"file-input","part":"border","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/default/border","line":57}},
@@ -23675,16 +24001,43 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/5","line":72}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
+            {"kind":"part","component":"button-group","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg-hover","line":32}},
             {"kind":"part","component":"button","part":"secondary.bg-hover","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.bg-hover","line":39}},
+            {"kind":"part","component":"command-palette","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.bg-hover","line":37}},
+            {"kind":"part","component":"compact-dashboard","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg-hover","line":34}},
             {"kind":"part","component":"dialog","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/button.bg-hover","line":43}},
+            {"kind":"part","component":"editor-search","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.bg-hover","line":35}},
             {"kind":"part","component":"empty-state","part":"action.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.bg-hover","line":30}},
+            {"kind":"part","component":"error-state","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg-hover","line":34}},
+            {"kind":"part","component":"file-browser","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.bg-hover","line":37}},
             {"kind":"part","component":"file-input","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-hover","line":34}},
+            {"kind":"part","component":"multiselect","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.bg-hover","line":36}},
+            {"kind":"part","component":"popover","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg-hover","line":33}},
+            {"kind":"part","component":"repeater","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.bg-hover","line":35}},
             {"kind":"part","component":"wizard","part":"back.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/back.bg-hover","line":52}},
             {"kind":"state","component":"file-input","part":"bg","state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/hover/bg","line":58}}
           ],
           "contrast": [
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"file-input hover fg","state":"hover","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"secondary text on the hover fill","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"fg":"color.interaction.focus.ring","bg":"color.action.secondary.hover-bg","label":"ring on the secondary hover fill","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/5","line":72}}
@@ -23716,8 +24069,17 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"button","part":null,"state":"active","variant":null,"surface":"color.action.secondary.pressed-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}},
+            {"kind":"part","component":"button-group","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg-active","line":33}},
             {"kind":"part","component":"button","part":"secondary.bg-active","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.bg-active","line":40}},
-            {"kind":"part","component":"file-input","part":"button.bg-pressed","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-pressed","line":35}}
+            {"kind":"part","component":"command-palette","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.bg-active","line":38}},
+            {"kind":"part","component":"compact-dashboard","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg-active","line":35}},
+            {"kind":"part","component":"editor-search","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.bg-active","line":36}},
+            {"kind":"part","component":"error-state","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg-active","line":35}},
+            {"kind":"part","component":"file-browser","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.bg-active","line":38}},
+            {"kind":"part","component":"file-input","part":"button.bg-pressed","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-pressed","line":35}},
+            {"kind":"part","component":"multiselect","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.bg-active","line":37}},
+            {"kind":"part","component":"popover","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg-active","line":34}},
+            {"kind":"part","component":"repeater","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.bg-active","line":36}}
           ],
           "contrast": [
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.pressed-bg","label":"secondary text while pressed","state":"active","source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}}
@@ -23748,18 +24110,45 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
             {"kind":"contrast","component":"button","part":null,"state":"active","variant":null,"surface":"color.action.secondary.pressed-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/1","line":68}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
             {"kind":"contrast","component":"dialog","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/2","line":64}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"kind":"contrast","component":"wizard","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/5","line":67}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/21","line":25}},
             {"kind":"part","component":"admin-form","part":"back.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/back.text","line":61}},
+            {"kind":"part","component":"button-group","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.text","line":30}},
             {"kind":"part","component":"button","part":"secondary.text","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.text","line":37}},
+            {"kind":"part","component":"command-palette","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.text","line":35}},
+            {"kind":"part","component":"compact-dashboard","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.text","line":32}},
             {"kind":"part","component":"dialog","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/button.text","line":41}},
+            {"kind":"part","component":"editor-search","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.text","line":33}},
             {"kind":"part","component":"empty-state","part":"action.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.text","line":28}},
+            {"kind":"part","component":"error-state","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.text","line":32}},
+            {"kind":"part","component":"file-browser","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.text","line":35}},
             {"kind":"part","component":"file-input","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.text","line":32}},
+            {"kind":"part","component":"multiselect","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.text","line":34}},
+            {"kind":"part","component":"popover","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.text","line":31}},
+            {"kind":"part","component":"repeater","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.text","line":33}},
             {"kind":"part","component":"settings-panel","part":"reset.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/reset.text","line":51}},
             {"kind":"part","component":"wizard","part":"back.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/back.text","line":50}},
             {"kind":"state","component":"file-input","part":"fg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/default/fg","line":57}},
@@ -23769,6 +24158,15 @@
           ],
           "contrast": [
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.bg","label":"secondary text at rest","state":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/1","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"file-input hover fg","state":"hover","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"secondary text on the hover fill","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.pressed-bg","label":"secondary text while pressed","state":"active","source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}},
@@ -23778,6 +24176,15 @@
             {"fg":"color.action.secondary.text","bg":"color.surface.canvas","label":"file-input invalid fg","state":"invalid","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.action.secondary.text","bg":"color.surface.canvas","label":"secondary action text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/21","line":25}},
             {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"action text on the panel surface","state":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"fg":"color.action.secondary.text","bg":"color.surface.overlay","label":"secondary button text on the overlay surface","state":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/2","line":64}}
           ]
         },
@@ -23947,24 +24354,33 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"button","part":null,"state":"active","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/10","line":77}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/42","line":46}},
+            {"kind":"part","component":"button-group","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.border-active","line":34}},
             {"kind":"part","component":"button","part":"secondary.border-active","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.border-active","line":53}},
             {"kind":"part","component":"button","part":"tertiary.border-active","state":null,"variant":"tertiary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/tertiary.border-active","line":54}},
             {"kind":"part","component":"combobox","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.border-focus","line":38}},
+            {"kind":"part","component":"command-palette","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.border-active","line":39}},
+            {"kind":"part","component":"compact-dashboard","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.border-active","line":36}},
             {"kind":"part","component":"data-table","part":"resize.handle-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/resize.handle-hover","line":52}},
             {"kind":"part","component":"date-picker","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-focus","line":34}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-border-active","line":34}},
+            {"kind":"part","component":"editor-search","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.border-active","line":37}},
+            {"kind":"part","component":"error-state","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.border-active","line":36}},
+            {"kind":"part","component":"file-browser","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.border-active","line":39}},
             {"kind":"part","component":"i3-window-frame","part":"window.border-focused","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/window.border-focused","line":51}},
             {"kind":"part","component":"icon-button","part":"root.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.border-active","line":28}},
             {"kind":"part","component":"menu","part":"button.border-open","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/button.border-open","line":41}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-active","line":38}},
+            {"kind":"part","component":"multiselect","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.border-active","line":38}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-active","line":45}},
             {"kind":"part","component":"number-field","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.border-focus","line":33}},
+            {"kind":"part","component":"popover","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.border-active","line":35}},
+            {"kind":"part","component":"repeater","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.border-active","line":37}},
             {"kind":"part","component":"search-field","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.border-focus","line":34}},
             {"kind":"part","component":"select","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.border-focus","line":36}},
             {"kind":"part","component":"text-field","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border-focus","line":45}},
             {"kind":"part","component":"textarea","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border-focus","line":36}},
-            {"kind":"part","component":"time-picker","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-focus","line":30}},
+            {"kind":"part","component":"time-picker","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-focus","line":31}},
             {"kind":"part","component":"timeline","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-color-border-active","line":32}},
             {"kind":"part","component":"toolbar","part":"toggled.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/toggled.border","line":37}},
             {"kind":"state","component":"combobox","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible/border","line":67}},
@@ -23976,7 +24392,7 @@
             {"kind":"state","component":"select","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible/border","line":57}},
             {"kind":"state","component":"text-field","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible/border","line":70}},
             {"kind":"state","component":"textarea","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible/border","line":59}},
-            {"kind":"state","component":"time-picker","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/border","line":53}},
+            {"kind":"state","component":"time-picker","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/border","line":55}},
             {"kind":"state","component":"toolbar","part":"border","state":"toggled","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/toggled/border","line":45}}
           ],
           "contrast": [
@@ -23984,7 +24400,7 @@
             {"fg":"color.border.active","bg":"color.interaction.pressed.bg","label":"icon-button active border","state":"active","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/active","line":42}},
             {"fg":"color.border.active","bg":"color.interaction.pressed.bg","label":"menu open border","state":"open","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/open","line":60}},
             {"fg":"color.border.active","bg":"color.interaction.pressed.bg","label":"toolbar toggled border","state":"toggled","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/toggled","line":45}},
-            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"active border on input","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/42","line":46}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"combobox focus-visible border","state":"focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"date-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/focus-visible","line":65}},
@@ -23993,7 +24409,7 @@
             {"fg":"color.border.active","bg":"color.surface.input","label":"select focus-visible border","state":"focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible","line":57}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"text-field focus-visible border","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"textarea focus-visible border","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}}
+            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}}
           ]
         },
         "color.border.control": {
@@ -24029,27 +24445,27 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"avatar","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/2","line":49}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
             {"kind":"contrast","component":"chart","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/2","line":54}},
             {"kind":"contrast","component":"checkbox","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/2","line":62}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/1","line":67}},
             {"kind":"contrast","component":"description-list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/2","line":49}},
             {"kind":"contrast","component":"dialog","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/10","line":72}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/8","line":88}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
             {"kind":"contrast","component":"radio-group","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/4","line":63}},
             {"kind":"contrast","component":"skeleton","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/2","line":50}},
             {"kind":"contrast","component":"switch","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/3","line":57}},
@@ -24106,13 +24522,13 @@
             {"kind":"part","component":"terminal","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/tokens/root.border","line":34}},
             {"kind":"part","component":"text-field","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border","line":43}},
             {"kind":"part","component":"textarea","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border","line":34}},
-            {"kind":"part","component":"time-picker","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border","line":28}},
+            {"kind":"part","component":"time-picker","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border","line":29}},
             {"kind":"part","component":"timeline","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/root.border","line":25}},
             {"kind":"part","component":"tooltip","part":"shortcut.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/tokens/shortcut.border","line":32}},
             {"kind":"part","component":"tree","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/root.border","line":30}},
             {"kind":"state","component":"admin-form","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default/border","line":66}},
             {"kind":"state","component":"avatar","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default/border","line":41}},
-            {"kind":"state","component":"button-group","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/border","line":46}},
+            {"kind":"state","component":"button-group","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/border","line":51}},
             {"kind":"state","component":"card","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover/border","line":45}},
             {"kind":"state","component":"chart","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default/border","line":46}},
             {"kind":"state","component":"checkbox","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/default/border","line":51}},
@@ -24124,39 +24540,39 @@
             {"kind":"state","component":"chip","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/hover/border","line":49}},
             {"kind":"state","component":"code-editor","part":"border","state":"default","variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/default/border","line":70}},
             {"kind":"state","component":"combobox","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/default/border","line":65}},
-            {"kind":"state","component":"command-palette","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/border","line":53}},
-            {"kind":"state","component":"compact-dashboard","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"command-palette","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/border","line":60}},
+            {"kind":"state","component":"compact-dashboard","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/border","line":52}},
             {"kind":"state","component":"date-picker","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/default/border","line":59}},
             {"kind":"state","component":"date-picker","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/hover/border","line":63}},
             {"kind":"state","component":"description-list","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/stateTokens/default/border","line":41}},
             {"kind":"state","component":"diagnostics","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/default/border","line":65}},
             {"kind":"state","component":"diff-view","part":"border","state":"default","variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/default/border","line":63}},
             {"kind":"state","component":"disclosure","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default/border","line":48}},
-            {"kind":"state","component":"editor-search","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/border","line":48}},
-            {"kind":"state","component":"error-state","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/border","line":50}},
-            {"kind":"state","component":"file-browser","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/border","line":49}},
+            {"kind":"state","component":"editor-search","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/border","line":55}},
+            {"kind":"state","component":"error-state","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/border","line":55}},
+            {"kind":"state","component":"file-browser","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/border","line":56}},
             {"kind":"state","component":"form-builder","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default/border","line":24}},
-            {"kind":"state","component":"kbd","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/border","line":39}},
+            {"kind":"state","component":"kbd","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/border","line":40}},
             {"kind":"state","component":"list","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/default/border","line":50}},
             {"kind":"state","component":"menu","part":"border","state":"closed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed/border","line":61}},
             {"kind":"state","component":"menu","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/border","line":59}},
-            {"kind":"state","component":"multiselect","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/border","line":65}},
+            {"kind":"state","component":"multiselect","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/border","line":72}},
             {"kind":"state","component":"number-field","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/default/border","line":53}},
             {"kind":"state","component":"number-field","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/hover/border","line":54}},
-            {"kind":"state","component":"popover","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/border","line":46}},
+            {"kind":"state","component":"popover","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/border","line":51}},
             {"kind":"state","component":"progress","part":"border","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/stateTokens/default/border","line":39}},
             {"kind":"state","component":"radio-group","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/default/border","line":49}},
             {"kind":"state","component":"radio-group","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/focus-visible/border","line":51}},
             {"kind":"state","component":"radio-group","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/hover/border","line":50}},
             {"kind":"state","component":"radio-group","part":"border","state":"required","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/required/border","line":55}},
-            {"kind":"state","component":"range","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/border","line":46}},
-            {"kind":"state","component":"repeater","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"range","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"repeater","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/border","line":54}},
             {"kind":"state","component":"search-field","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/default/border","line":52}},
             {"kind":"state","component":"search-field","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/hover/border","line":53}},
             {"kind":"state","component":"search-field","part":"border","state":"loading","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/loading/border","line":56}},
             {"kind":"state","component":"search-field","part":"border","state":"no-results","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/no-results/border","line":57}},
             {"kind":"state","component":"search-field","part":"border","state":"placeholder-shown","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/placeholder-shown/border","line":55}},
-            {"kind":"state","component":"segmented-control","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/border","line":66}},
+            {"kind":"state","component":"segmented-control","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/border","line":65}},
             {"kind":"state","component":"select","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/default/border","line":55}},
             {"kind":"state","component":"select","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/hover/border","line":56}},
             {"kind":"state","component":"select","part":"border","state":"required","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/required/border","line":58}},
@@ -24172,8 +24588,8 @@
             {"kind":"state","component":"textarea","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/default/border","line":57}},
             {"kind":"state","component":"textarea","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover/border","line":58}},
             {"kind":"state","component":"textarea","part":"border","state":"placeholder-shown","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown/border","line":60}},
-            {"kind":"state","component":"time-picker","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/border","line":45}},
-            {"kind":"state","component":"time-picker","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/border","line":49}},
+            {"kind":"state","component":"time-picker","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"time-picker","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/border","line":51}},
             {"kind":"state","component":"timeline","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default/border","line":42}},
             {"kind":"state","component":"tree","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/stateTokens/default/border","line":52}}
           ],
@@ -24191,57 +24607,57 @@
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"switch hover border","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"text-field hover border","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"textarea hover border","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.border.control","bg":"color.surface.canvas","label":"progress default border","state":"default","source":{"file":"spec/components/progress.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.border.control","bg":"color.surface.chrome","label":"search box and filter button boundaries on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"avatar default border","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chart default border","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked box edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/checkbox.md","pointer":"/contrast/2","line":62}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked radio edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip and checkbox boundaries","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/8","line":88}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip default border","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip focus-visible border","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control border on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/41","line":45}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control boundaries on the panel surface","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/4","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/2","line":49}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/2","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"description-list default border","state":"default","source":{"file":"spec/components/description-list.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"diagnostics default border","state":"default","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/default","line":65}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"disclosure default border","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"form-builder default border","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"list default border","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu closed border","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu focus-visible border","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"on track edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/switch.md","pointer":"/contrast/3","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"skeleton default border","state":"default","source":{"file":"spec/components/skeleton.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"timeline default border","state":"default","source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"tree default border","state":"default","source":{"file":"spec/components/tree.md","pointer":"/stateTokens/default","line":50}},
@@ -24270,7 +24686,7 @@
             {"fg":"color.border.control","bg":"color.surface.input","label":"text-field placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/placeholder-shown","line":71}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea default border","state":"default","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/default","line":57}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown","line":60}},
-            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
+            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
             {"fg":"color.border.control","bg":"color.surface.overlay","label":"form field boundary on the overlay surface","state":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/10","line":72}},
             {"fg":"color.border.control","bg":"color.surface.raised","label":"shortcut key border on the tooltip","state":null,"source":{"file":"spec/components/tooltip.md","pointer":"/contrast/1","line":44}},
             {"fg":"color.border.control","bg":"color.terminal.bg","label":"terminal default border","state":"default","source":{"file":"spec/components/terminal.md","pointer":"/stateTokens/default","line":67}}
@@ -24305,7 +24721,7 @@
             {"kind":"contrast","component":"card","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/4","line":54}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/5","line":71}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/11","line":91}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/5","line":64}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/6","line":65}},
             {"kind":"contrast","component":"toolbar","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/1","line":48}},
@@ -24332,7 +24748,7 @@
             {"fg":"color.border.default","bg":"color.surface.default","label":"panel edge (decorative)","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/6","line":65}},
             {"fg":"color.border.default","bg":"color.surface.default","label":"panel edge and toolbar separator (decorative)","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/11","line":91}},
             {"fg":"color.border.default","bg":"color.surface.default","label":"resize handle at rest (decorative; keyboard resizing is a header action)","state":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/5","line":71}},
-            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
             {"fg":"color.border.default","bg":"color.surface.input","label":"kbd hint edge (decorative)","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/5","line":64}}
           ]
         },
@@ -24378,32 +24794,32 @@
             {"kind":"contrast","component":"switch","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/8","line":62}},
             {"kind":"contrast","component":"text-field","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"kind":"part","component":"admin-form","part":"disabled.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/disabled.border","line":53}},
-            {"kind":"part","component":"button-group","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-border-disabled","line":32}},
+            {"kind":"part","component":"button-group","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-border-disabled","line":37}},
             {"kind":"part","component":"button","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.border-disabled","line":58}},
             {"kind":"part","component":"checkbox","part":"box.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.border-disabled","line":43}},
             {"kind":"part","component":"chip","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.border-disabled","line":39}},
             {"kind":"part","component":"combobox","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.border-disabled","line":42}},
             {"kind":"part","component":"date-picker","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-disabled","line":38}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-border-disabled","line":35}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-border-disabled","line":35}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-border-disabled","line":40}},
             {"kind":"part","component":"field","part":"control.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.border-disabled","line":29}},
             {"kind":"part","component":"fieldset","part":"field.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.border-disabled","line":28}},
             {"kind":"part","component":"file-input","part":"button.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.border-disabled","line":39}},
             {"kind":"part","component":"icon-button","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.border-disabled","line":36}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-disabled","line":39}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-disabled","line":46}},
             {"kind":"part","component":"number-field","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.border-disabled","line":37}},
             {"kind":"part","component":"radio-group","part":"box.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.border-disabled","line":41}},
             {"kind":"part","component":"range","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-color-border-disabled","line":33}},
-            {"kind":"part","component":"repeater","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-border-disabled","line":33}},
+            {"kind":"part","component":"repeater","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-border-disabled","line":40}},
             {"kind":"part","component":"search-field","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.border-disabled","line":36}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-border-disabled","line":37}},
             {"kind":"part","component":"select","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.border-disabled","line":40}},
             {"kind":"part","component":"switch","part":"track.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.border-disabled","line":40}},
             {"kind":"part","component":"text-field","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border-disabled","line":49}},
             {"kind":"part","component":"textarea","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border-disabled","line":40}},
-            {"kind":"part","component":"time-picker","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-disabled","line":33}}
+            {"kind":"part","component":"time-picker","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-disabled","line":35}}
           ],
           "contrast": [
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/button.md","pointer":"/contrast/18","line":85}},
@@ -24420,7 +24836,7 @@
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/8","line":62}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled boundaries (exempt)","state":"disabled","source":{"file":"spec/components/admin-form.md","pointer":"/contrast/13","line":83}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled chip border (exempt)","state":"disabled","source":{"file":"spec/components/chip.md","pointer":"/contrast/2","line":56}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled field border (exempt)","state":"disabled","source":{"file":"spec/components/fieldset.md","pointer":"/contrast/5","line":39}}
@@ -24481,7 +24897,7 @@
             {"kind":"part","component":"admin-form","part":"footer.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/footer.border","line":57}},
             {"kind":"part","component":"admin-form","part":"review.row-rule","state":null,"variant":"review","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/review.row-rule","line":56}},
             {"kind":"part","component":"combobox","part":"group.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/group.border","line":60}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-border-divider","line":34}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-border-divider","line":39}},
             {"kind":"part","component":"data-table","part":"row.divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/row.divider","line":41}},
             {"kind":"part","component":"date-picker","part":"root.border-readonly","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-readonly","line":40}},
             {"kind":"part","component":"description-list","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-color-border-divider","line":31}},
@@ -24490,7 +24906,7 @@
             {"kind":"part","component":"drawer","part":"body.divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/body.divider","line":34}},
             {"kind":"part","component":"empty-state","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/root.border","line":24}},
             {"kind":"part","component":"fieldset","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/root.border","line":20}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-divider","line":36}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-divider","line":43}},
             {"kind":"part","component":"file-input","part":"list.divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/list.divider","line":47}},
             {"kind":"part","component":"filterable-table","part":"row.rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.rule","line":52}},
             {"kind":"part","component":"filterable-table","part":"toolbar.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/toolbar.border","line":34}},
@@ -24565,15 +24981,15 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
             {"kind":"part","component":"combobox","part":"listbox.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/listbox.border","line":52}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-overlay","line":36}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-overlay","line":43}},
             {"kind":"part","component":"date-picker","part":"calendar.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/calendar.border","line":51}},
             {"kind":"part","component":"dialog","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/root.border","line":33}},
             {"kind":"part","component":"drawer","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/root.border","line":29}},
             {"kind":"part","component":"i3-window-frame","part":"floating.border","state":null,"variant":"floating","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/floating.border","line":59}},
             {"kind":"part","component":"menu","part":"surface.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/surface.border","line":44}},
-            {"kind":"part","component":"popover","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-border-overlay","line":33}},
+            {"kind":"part","component":"popover","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-border-overlay","line":38}},
             {"kind":"part","component":"skip-link","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/tokens/root.border","line":23}},
             {"kind":"part","component":"toast","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/root.border","line":30}},
             {"kind":"part","component":"tooltip","part":"popup.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/tokens/popup.border","line":29}},
@@ -24600,7 +25016,7 @@
             {"fg":"color.border.overlay","bg":"color.surface.canvas","label":"toast default border","state":"default","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/default","line":57}},
             {"fg":"color.border.overlay","bg":"color.surface.canvas","label":"toast reduced-motion border","state":"reduced-motion","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/reduced-motion","line":61}},
             {"fg":"color.border.overlay","bg":"color.surface.canvas","label":"toast stacked border","state":"stacked","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked","line":60}},
-            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
             {"fg":"color.border.overlay","bg":"color.surface.overlay","label":"dialog default border","state":"default","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/default","line":55}},
             {"fg":"color.border.overlay","bg":"color.surface.overlay","label":"dialog focus-trapped border","state":"focus-trapped","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped","line":57}},
             {"fg":"color.border.overlay","bg":"color.surface.overlay","label":"dialog open border","state":"open","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/open","line":56}},
@@ -24644,12 +25060,12 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"admin-form","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/contrast/9","line":79}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/0","line":46}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/3","line":62}},
             {"kind":"part","component":"admin-form","part":"step.current-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/step.current-indicator","line":34}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":37}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":37}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":44}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":44}},
             {"kind":"part","component":"i3-window-frame","part":"tab.indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/tab.indicator","line":57}},
             {"kind":"part","component":"icon-button","part":"root.border-toggled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.border-toggled","line":32}},
             {"kind":"part","component":"link","part":"root.indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.indicator","line":33}},
@@ -24667,7 +25083,7 @@
           "contrast": [
             {"fg":"color.border.selected-indicator","bg":"color.surface.canvas","label":"link current border","state":"current","source":{"file":"spec/components/link.md","pointer":"/stateTokens/current","line":40}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.canvas","label":"wizard current border","state":"current","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/current","line":58}},
-            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
+            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.default","label":"current-section indicator bar","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/3","line":62}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.default","label":"current-step indicator bar","state":null,"source":{"file":"spec/components/admin-form.md","pointer":"/contrast/9","line":79}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.default","label":"sidebar-nav current border","state":"current","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/current","line":55}},
@@ -24701,14 +25117,14 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
             {"kind":"contrast","component":"tabs","part":null,"state":"selected+container-inactive","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/contrast/0","line":51}},
             {"kind":"part","component":"i3-window-frame","part":"tab.indicator-inactive","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/tab.indicator-inactive","line":58}},
             {"kind":"part","component":"sidebar-nav","part":"link.indicator-inactive","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/link.indicator-inactive","line":42}},
             {"kind":"part","component":"tabs","part":"tab.indicator-inactive","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.indicator-inactive","line":39}}
           ],
           "contrast": [
-            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
+            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
             {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.default","label":"inactive indicator (decorative; the selected tab keeps aria-selected and bright text)","state":"selected+container-inactive","source":{"file":"spec/components/tabs.md","pointer":"/contrast/0","line":51}}
           ]
         },
@@ -24897,7 +25313,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"chart","part":"series.primary","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/series.primary","line":35}}
+            {"kind":"part","component":"chart","part":"series.primary","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/series.primary","line":36}}
           ],
           "contrast": []
         },
@@ -24990,10 +25406,10 @@
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/12","line":89}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/13","line":90}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/14","line":91}},
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/5","line":82}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/6","line":83}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}},
@@ -25030,8 +25446,8 @@
             {"fg":"color.border.control","bg":"color.code.bg","label":"diff-view default border","state":"default","source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.code.bracket-match","bg":"color.code.bg","label":"bracket-match outline on the editor surface","state":"current","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/1","line":78}},
             {"fg":"color.code.bracket-match","bg":"color.code.bg","label":"code-editor current border","state":"current","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/current","line":74}},
-            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
-            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
+            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}},
+            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
             {"fg":"color.code.line-number","bg":"color.code.bg","label":"line numbers on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/45","line":49}},
             {"fg":"color.code.syntax.attribute","bg":"color.code.bg","label":"attribute and escape","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/13","line":90}},
             {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/47","line":51}},
@@ -25050,7 +25466,7 @@
             {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}},
             {"fg":"color.code.syntax.variable","bg":"color.code.bg","label":"code-editor current fg","state":"current","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/current","line":74}},
             {"fg":"color.code.syntax.variable","bg":"color.code.bg","label":"code-editor default fg","state":"default","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/default","line":70}},
-            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
+            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}},
             {"fg":"color.diagnostic.error.stripe","bg":"color.code.bg","label":"error stripe mark","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/11","line":84}},
             {"fg":"color.diagnostic.error.underline","bg":"color.code.bg","label":"error underline","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/3","line":76}},
             {"fg":"color.diagnostic.hint.underline","bg":"color.code.bg","label":"hint underline","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/8","line":81}},
@@ -25064,7 +25480,7 @@
             {"fg":"color.text.default","bg":"color.code.bg","label":"code text","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/0","line":73}},
             {"fg":"color.text.default","bg":"color.code.bg","label":"diff-view default fg","state":"default","source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.text.default","bg":"color.code.bg","label":"diff-view focus-visible fg","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/focus-visible","line":66}},
-            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"fg":"color.text.muted","bg":"color.code.bg","label":"line numbers on a context row","state":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/5","line":75}}
           ]
         },
@@ -25138,7 +25554,7 @@
             {"kind":"part","component":"search-field","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/input.caret","line":41}},
             {"kind":"part","component":"text-field","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/input.caret","line":55}},
             {"kind":"part","component":"textarea","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/input.caret","line":47}},
-            {"kind":"part","component":"time-picker","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.caret","line":37}}
+            {"kind":"part","component":"time-picker","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.caret","line":39}}
           ],
           "contrast": [
             {"fg":"color.code.caret","bg":"color.code.current-line","label":"caret on current line","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/46","line":50}},
@@ -25248,13 +25664,13 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}},
             {"kind":"part","component":"code-editor","part":"gutter.rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/gutter.rule","line":38}},
             {"kind":"part","component":"diagnostics","part":"code.gutter-rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/code.gutter-rule","line":37}},
             {"kind":"part","component":"diff-view","part":"line-number.rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/line-number.rule","line":40}}
           ],
           "contrast": [
-            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}}
+            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}}
           ]
         },
         "color.code.hued.attribute": {
@@ -25414,9 +25830,7 @@
           ],
           "usedByAliases": [],
           "unmappedPorts": [],
-          "uses": [
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
-          ],
+          "uses": [],
           "contrast": []
         },
         "color.code.hued.operator": {
@@ -25513,7 +25927,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
+            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":140}}
           ],
           "contrast": []
         },
@@ -25546,9 +25960,7 @@
           ],
           "usedByAliases": [],
           "unmappedPorts": [],
-          "uses": [
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
-          ],
+          "uses": [],
           "contrast": []
         },
         "color.code.indent-guide": {
@@ -25576,11 +25988,11 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
             {"kind":"part","component":"code-editor","part":"indent.guide","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/indent.guide","line":48}}
           ],
           "contrast": [
-            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}}
+            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}}
           ]
         },
         "color.code.line-number": {
@@ -25681,7 +26093,7 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.search-current-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-bg","line":33}}
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-bg","line":40}}
           ],
           "contrast": [
             {"fg":"color.code.search-current-text","bg":"color.code.search-current-bg","label":"current search match text","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}}
@@ -25713,7 +26125,7 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.search-current-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-text","line":34}}
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-text","line":41}}
           ],
           "contrast": [
             {"fg":"color.code.search-current-text","bg":"color.code.search-current-bg","label":"current search match text","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}}
@@ -25744,7 +26156,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-match-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-match-bg","line":35}}
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-match-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-match-bg","line":42}}
           ],
           "contrast": []
         },
@@ -25776,6 +26188,8 @@
             {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
             {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
             {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/5","line":78}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}},
             {"kind":"part","component":"code-editor","part":"selection.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/selection.bg","line":44}},
@@ -25783,9 +26197,11 @@
             {"kind":"state","component":"code-editor","part":"bg","state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/selected/bg","line":72}}
           ],
           "contrast": [
-            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
-            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
-            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
+            {"fg":"color.code.syntax.comment","bg":"color.code.selection-bg","label":"comment syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
+            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
+            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
+            {"fg":"color.code.syntax.type","bg":"color.code.selection-bg","label":"type syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
             {"fg":"color.code.syntax.variable","bg":"color.code.selection-bg","label":"code-editor selected fg","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/selected","line":72}},
             {"fg":"color.diagnostic.warning.underline","bg":"color.code.selection-bg","label":"warning underline inside the selected range","state":"selected","source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/5","line":78}},
             {"fg":"color.text.muted","bg":"color.code.selection-bg","label":"muted text on editor selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}}
@@ -25850,13 +26266,15 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/47","line":51}},
             {"kind":"part","component":"code-editor","part":"syntax.comment","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.comment","line":54}}
           ],
           "contrast": [
             {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/47","line":51}},
-            {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}}
+            {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}},
+            {"fg":"color.code.syntax.comment","bg":"color.code.selection-bg","label":"comment syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}}
           ]
         },
         "color.code.syntax.constant": {
@@ -26075,7 +26493,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/5","line":82}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/49","line":53}},
             {"kind":"part","component":"code-editor","part":"syntax.keyword","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.keyword","line":52}}
@@ -26083,7 +26501,7 @@
           "contrast": [
             {"fg":"color.code.syntax.keyword","bg":"color.code.bg","label":"keyword on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/49","line":53}},
             {"fg":"color.code.syntax.keyword","bg":"color.code.bg","label":"keyword","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/5","line":82}},
-            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}}
+            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}}
           ]
         },
         "color.code.syntax.number": {
@@ -26176,13 +26594,13 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/11","line":88}},
             {"kind":"part","component":"code-editor","part":"syntax.property","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.property","line":62}}
           ],
           "contrast": [
             {"fg":"color.code.syntax.property","bg":"color.code.bg","label":"property, heading and invalid text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/11","line":88}},
-            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}}
+            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}}
           ]
         },
         "color.code.syntax.punctuation": {
@@ -26241,7 +26659,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/6","line":83}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/48","line":52}},
             {"kind":"part","component":"code-editor","part":"syntax.string","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.string","line":53}}
@@ -26249,7 +26667,7 @@
           "contrast": [
             {"fg":"color.code.syntax.string","bg":"color.code.bg","label":"string on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/48","line":52}},
             {"fg":"color.code.syntax.string","bg":"color.code.bg","label":"string","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/6","line":83}},
-            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}}
+            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}}
           ]
         },
         "color.code.syntax.tag": {
@@ -26311,13 +26729,15 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/50","line":54}},
             {"kind":"part","component":"code-editor","part":"syntax.type","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.type","line":59}}
           ],
           "contrast": [
             {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/50","line":54}},
-            {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}}
+            {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}},
+            {"fg":"color.code.syntax.type","bg":"color.code.selection-bg","label":"type syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}}
           ]
         },
         "color.code.syntax.variable": {
@@ -26385,11 +26805,11 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}},
             {"kind":"part","component":"code-editor","part":"whitespace.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/whitespace.text","line":49}}
           ],
           "contrast": [
-            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}}
+            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}}
           ]
         },
         "color.diagnostic.error.bg": {
@@ -27198,7 +27618,7 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/3","line":38}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
             {"kind":"contrast","component":"menu","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"sidebar-nav","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/1","line":62}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/62","line":66}},
@@ -27211,7 +27631,7 @@
           ],
           "contrast": [
             {"fg":"color.icon.decorative","bg":"color.surface.canvas","label":"decorative icon on canvas (graphic)","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/62","line":66}},
-            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
+            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
             {"fg":"color.icon.decorative","bg":"color.surface.default","label":"glyph (decorative)","state":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/3","line":38}},
             {"fg":"color.icon.decorative","bg":"color.surface.default","label":"group chevron (decorative; aria-expanded carries the state)","state":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/1","line":62}},
             {"fg":"color.icon.decorative","bg":"color.surface.raised","label":"submenu chevron (decorative; aria-haspopup carries the meaning)","state":null,"source":{"file":"spec/components/menu.md","pointer":"/contrast/3","line":68}}
@@ -27315,33 +27735,33 @@
             {"kind":"contrast","component":"text-field","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"kind":"part","component":"admin-form","part":"disabled.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/disabled.bg","line":51}},
-            {"kind":"part","component":"button-group","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":33}},
+            {"kind":"part","component":"button-group","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":38}},
             {"kind":"part","component":"button","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.bg-disabled","line":57}},
             {"kind":"part","component":"checkbox","part":"box.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg-disabled","line":42}},
             {"kind":"part","component":"chip","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.bg-disabled","line":40}},
             {"kind":"part","component":"combobox","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.bg-disabled","line":43}},
             {"kind":"part","component":"date-picker","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.bg-disabled","line":39}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":36}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":36}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":41}},
             {"kind":"part","component":"field","part":"control.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.bg-disabled","line":28}},
             {"kind":"part","component":"fieldset","part":"field.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.bg-disabled","line":27}},
             {"kind":"part","component":"file-input","part":"button.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-disabled","line":40}},
             {"kind":"part","component":"icon-button","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.bg-disabled","line":35}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":40}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":47}},
             {"kind":"part","component":"number-field","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.bg-disabled","line":38}},
             {"kind":"part","component":"radio-group","part":"box.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-disabled","line":40}},
             {"kind":"part","component":"range","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":34}},
-            {"kind":"part","component":"repeater","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":34}},
+            {"kind":"part","component":"repeater","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":41}},
             {"kind":"part","component":"search-field","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.bg-disabled","line":37}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":38}},
             {"kind":"part","component":"select","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.bg-disabled","line":41}},
             {"kind":"part","component":"switch","part":"track.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.bg-disabled","line":39}},
             {"kind":"part","component":"text-field","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.bg-disabled","line":50}},
             {"kind":"part","component":"textarea","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.bg-disabled","line":41}},
-            {"kind":"part","component":"time-picker","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-disabled","line":34}}
+            {"kind":"part","component":"time-picker","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-disabled","line":36}}
           ],
           "contrast": [
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/button.md","pointer":"/contrast/18","line":85}},
@@ -27358,7 +27778,7 @@
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/8","line":62}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled boundaries (exempt)","state":"disabled","source":{"file":"spec/components/admin-form.md","pointer":"/contrast/13","line":83}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled chip border (exempt)","state":"disabled","source":{"file":"spec/components/chip.md","pointer":"/contrast/2","line":56}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled field border (exempt)","state":"disabled","source":{"file":"spec/components/fieldset.md","pointer":"/contrast/5","line":39}},
@@ -27378,7 +27798,7 @@
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/select.md","pointer":"/contrast/6","line":68}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/2","line":78}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
-            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
+            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled thumb (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/6","line":60}}
           ]
         },
@@ -27448,9 +27868,13 @@
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.diff.added.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/16","line":86}},
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.diff.modified.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/18","line":88}},
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.diff.removed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/17","line":87}},
+            {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/3","line":51}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
-            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
+            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"kind":"contrast","component":"pagination","part":null,"state":"current","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
+            {"kind":"contrast","component":"sidebar-nav","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
             {"kind":"contrast","component":"skip-link","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/contrast/0","line":29}},
             {"kind":"contrast","component":"table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/37","line":41}},
@@ -27458,54 +27882,72 @@
             {"kind":"part","component":"alert","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/tokens/close.ring","line":51}},
             {"kind":"part","component":"avatar","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/control.focus","line":30}},
             {"kind":"part","component":"breadcrumbs","part":"link.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/link.ring","line":33}},
-            {"kind":"part","component":"button-group","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.focus","line":30}},
+            {"kind":"part","component":"button-group","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.focus","line":35}},
             {"kind":"part","component":"button","part":"secondary.ring","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.ring","line":41}},
+            {"kind":"part","component":"card","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.ring","line":42}},
             {"kind":"part","component":"chart","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/control.focus","line":30}},
             {"kind":"part","component":"checkbox","part":"box.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.ring","line":36}},
             {"kind":"part","component":"chip","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.ring","line":37}},
+            {"kind":"part","component":"chip","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.ring","line":43}},
+            {"kind":"part","component":"combobox","part":"option.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.ring-selected","line":58}},
             {"kind":"part","component":"combobox","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.ring","line":39}},
+            {"kind":"part","component":"command-palette","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.focus","line":40}},
             {"kind":"part","component":"command-palette","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/control.focus","line":33}},
-            {"kind":"part","component":"compact-dashboard","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.focus","line":32}},
+            {"kind":"part","component":"compact-dashboard","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.focus","line":37}},
             {"kind":"part","component":"data-table","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/row.ring","line":43}},
+            {"kind":"part","component":"data-table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"date-picker","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"description-list","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/control.focus","line":29}},
+            {"kind":"part","component":"diagnostics","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.ring-selected","line":59}},
             {"kind":"part","component":"diagnostics","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.ring","line":56}},
             {"kind":"part","component":"dialog","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/close.ring","line":40}},
+            {"kind":"part","component":"diff-view","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.ring-selected","line":61}},
             {"kind":"part","component":"diff-view","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.ring","line":58}},
             {"kind":"part","component":"disclosure","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"drawer","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/close.ring","line":40}},
+            {"kind":"part","component":"editor-search","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.focus","line":38}},
             {"kind":"part","component":"editor-search","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"empty-state","part":"action.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.ring","line":31}},
-            {"kind":"part","component":"error-state","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.focus","line":32}},
+            {"kind":"part","component":"error-state","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.focus","line":37}},
+            {"kind":"part","component":"file-browser","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.focus","line":40}},
             {"kind":"part","component":"file-browser","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/control.focus","line":33}},
             {"kind":"part","component":"file-input","part":"button.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.ring","line":36}},
             {"kind":"part","component":"filterable-table","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.ring","line":54}},
+            {"kind":"part","component":"i3-window-frame","part":"workspace.ring-on-selection","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.ring-on-selection","line":42}},
             {"kind":"part","component":"i3-window-frame","part":"workspace.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.ring","line":41}},
+            {"kind":"part","component":"icon-button","part":"root.ring-toggled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.ring-toggled","line":33}},
             {"kind":"part","component":"icon-button","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.ring","line":29}},
             {"kind":"part","component":"kbd","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/control.focus","line":28}},
             {"kind":"part","component":"link","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.ring","line":30}},
             {"kind":"part","component":"list","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/row.ring","line":40}},
+            {"kind":"part","component":"list","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/selected.ring","line":44}},
+            {"kind":"part","component":"menu","part":"active.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/active.ring","line":51}},
             {"kind":"part","component":"menu","part":"button.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/button.ring","line":42}},
+            {"kind":"part","component":"multiselect","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.focus","line":39}},
             {"kind":"part","component":"multiselect","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/control.focus","line":32}},
             {"kind":"part","component":"number-field","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.ring","line":34}},
+            {"kind":"part","component":"pagination","part":"current.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/current.ring","line":36}},
             {"kind":"part","component":"pagination","part":"link.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/link.ring","line":32}},
-            {"kind":"part","component":"popover","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.focus","line":31}},
+            {"kind":"part","component":"popover","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.focus","line":36}},
             {"kind":"part","component":"radio-group","part":"box.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.ring","line":34}},
             {"kind":"part","component":"range","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/control.focus","line":30}},
+            {"kind":"part","component":"repeater","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.focus","line":38}},
             {"kind":"part","component":"repeater","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"search-field","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"segmented-control","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"select","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.ring","line":37}},
             {"kind":"part","component":"settings-panel","part":"control.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/control.ring","line":42}},
             {"kind":"part","component":"sidebar-nav","part":"link.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/link.ring","line":40}},
+            {"kind":"part","component":"sidebar-nav","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"skeleton","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/control.focus","line":30}},
             {"kind":"part","component":"skip-link","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/tokens/root.ring","line":24}},
             {"kind":"part","component":"switch","part":"track.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.ring","line":35}},
+            {"kind":"part","component":"table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/tokens/selected.ring","line":49}},
             {"kind":"part","component":"table","part":"sort.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/tokens/sort.ring","line":43}},
             {"kind":"part","component":"tabs","part":"tab.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.ring","line":40}},
             {"kind":"part","component":"text-field","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.ring","line":46}},
             {"kind":"part","component":"textarea","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.ring","line":37}},
-            {"kind":"part","component":"time-picker","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.ring","line":31}},
+            {"kind":"part","component":"time-picker","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.ring","line":32}},
             {"kind":"part","component":"timeline","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/control.focus","line":29}},
             {"kind":"part","component":"toast","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/close.ring","line":53}},
             {"kind":"part","component":"toolbar","part":"button.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.ring","line":34}},
@@ -27514,20 +27956,28 @@
             {"kind":"part","component":"wizard","part":"step.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.ring","line":32}},
             {"kind":"state","component":"alert","part":"outline","state":"focus-visible","variant":null,"surface":"color.status.info.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/stateTokens/focus-visible/outline","line":55}},
             {"kind":"state","component":"breadcrumbs","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/focus-visible/outline","line":41}},
+            {"kind":"state","component":"card","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible/outline","line":48}},
             {"kind":"state","component":"checkbox","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/focus-visible/outline","line":53}},
             {"kind":"state","component":"chip","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible/outline","line":50}},
+            {"kind":"state","component":"chip","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible/outline","line":52}},
             {"kind":"state","component":"combobox","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible/outline","line":67}},
+            {"kind":"state","component":"combobox","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected/outline","line":69}},
             {"kind":"state","component":"data-table","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible/outline","line":58}},
+            {"kind":"state","component":"data-table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":60}},
             {"kind":"state","component":"date-picker","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/focus-visible/outline","line":68}},
             {"kind":"state","component":"diagnostics","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible/outline","line":67}},
+            {"kind":"state","component":"diagnostics","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible/outline","line":69}},
             {"kind":"state","component":"dialog","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
             {"kind":"state","component":"diff-view","part":"outline","state":"focus-visible","variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/focus-visible/outline","line":66}},
             {"kind":"state","component":"file-input","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
             {"kind":"state","component":"filterable-table","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible/outline","line":76}},
             {"kind":"state","component":"icon-button","part":"outline","state":"focus-visible","variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/focus-visible/outline","line":41}},
+            {"kind":"state","component":"icon-button","part":"outline","state":"toggled+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible/outline","line":44}},
             {"kind":"state","component":"link","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/focus-visible/outline","line":38}},
             {"kind":"state","component":"list","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible/outline","line":52}},
+            {"kind":"state","component":"list","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible/outline","line":54}},
             {"kind":"state","component":"menu","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
+            {"kind":"state","component":"menu","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected/outline","line":63}},
             {"kind":"state","component":"number-field","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/focus-visible/outline","line":55}},
             {"kind":"state","component":"pagination","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible/outline","line":43}},
             {"kind":"state","component":"radio-group","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/focus-visible/outline","line":51}},
@@ -27537,11 +27987,12 @@
             {"kind":"state","component":"sidebar-nav","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/focus-visible/outline","line":54}},
             {"kind":"state","component":"skip-link","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/stateTokens/focus-visible/outline","line":27}},
             {"kind":"state","component":"switch","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/stateTokens/focus-visible/outline","line":50}},
+            {"kind":"state","component":"table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":59}},
             {"kind":"state","component":"tabs","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/stateTokens/focus-visible/outline","line":46}},
             {"kind":"state","component":"tabs","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/stateTokens/selected+focus-visible/outline","line":48}},
             {"kind":"state","component":"text-field","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible/outline","line":70}},
             {"kind":"state","component":"textarea","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
-            {"kind":"state","component":"time-picker","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/outline","line":54}},
+            {"kind":"state","component":"time-picker","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/outline","line":56}},
             {"kind":"state","component":"toast","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
             {"kind":"state","component":"toolbar","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible/outline","line":44}},
             {"kind":"state","component":"tooltip","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/stateTokens/focus-visible/outline","line":40}},
@@ -27554,7 +28005,20 @@
             {"fg":"color.interaction.focus.ring","bg":"color.diff.added.bg","label":"ring on an added row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/16","line":86}},
             {"fg":"color.interaction.focus.ring","bg":"color.diff.modified.bg","label":"ring on a modified row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/18","line":88}},
             {"fg":"color.interaction.focus.ring","bg":"color.diff.removed.bg","label":"ring on a removed row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/17","line":87}},
-            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg-strong","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected workspace when focused","state":"selected","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.status.info.tint","label":"alert focus-visible outline","state":"focus-visible","source":{"file":"spec/components/alert.md","pointer":"/stateTokens/focus-visible","line":55}},
             {"fg":"color.interaction.focus.ring","bg":"color.status.info.tint","label":"ring on the info tint","state":"focus-visible","source":{"file":"spec/components/alert.md","pointer":"/contrast/14","line":71}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"file-input focus-visible outline","state":"focus-visible","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible","line":59}},
@@ -27563,7 +28027,7 @@
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"toast focus-visible outline","state":"focus-visible","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"tooltip focus-visible outline","state":"focus-visible","source":{"file":"spec/components/tooltip.md","pointer":"/stateTokens/focus-visible","line":40}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"wizard focus-visible outline","state":"focus-visible","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/focus-visible","line":57}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"toolbar focus-visible outline","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.default","label":"breadcrumbs focus-visible outline","state":"focus-visible","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/focus-visible","line":41}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.default","label":"chip focus-visible outline","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
@@ -27589,7 +28053,7 @@
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"switch focus-visible outline","state":"focus-visible","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/focus-visible","line":50}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"text-field focus-visible outline","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"textarea focus-visible outline","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.overlay","label":"dialog focus-visible outline","state":"focus-visible","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.overlay","label":"ring on the overlay surface","state":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/3","line":51}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.raised","label":"ring on the raised surface","state":"focus-visible","source":{"file":"spec/components/skip-link.md","pointer":"/contrast/0","line":29}},
@@ -27624,72 +28088,50 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"dialog","part":null,"state":"focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/7","line":69}},
-            {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
-            {"kind":"contrast","component":"pagination","part":null,"state":"current","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
-            {"kind":"contrast","component":"sidebar-nav","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"kind":"contrast","component":"wizard","part":null,"state":"focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/8","line":70}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/39","line":43}},
             {"kind":"part","component":"button","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"card","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/root.ring","line":36}},
-            {"kind":"part","component":"card","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.ring","line":42}},
             {"kind":"part","component":"checkbox","part":"box.ring-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.ring-checked","line":40}},
-            {"kind":"part","component":"chip","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.ring","line":43}},
             {"kind":"part","component":"code-editor","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/root.ring","line":36}},
-            {"kind":"part","component":"combobox","part":"option.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.ring-selected","line":58}},
             {"kind":"part","component":"combobox","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.ring-invalid","line":40}},
-            {"kind":"part","component":"data-table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"date-picker","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.ring-invalid","line":36}},
-            {"kind":"part","component":"diagnostics","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.ring-selected","line":59}},
             {"kind":"part","component":"dialog","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/root.ring","line":34}},
-            {"kind":"part","component":"diff-view","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.ring-selected","line":61}},
             {"kind":"part","component":"drawer","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/root.ring","line":30}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":36}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":43}},
             {"kind":"part","component":"filterable-table","part":"row.ring-on-selection","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.ring-on-selection","line":57}},
             {"kind":"part","component":"i3-window-frame","part":"window.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/window.ring","line":52}},
-            {"kind":"part","component":"i3-window-frame","part":"workspace.ring-on-selection","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.ring-on-selection","line":42}},
-            {"kind":"part","component":"icon-button","part":"root.ring-toggled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.ring-toggled","line":33}},
-            {"kind":"part","component":"list","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/selected.ring","line":44}},
-            {"kind":"part","component":"menu","part":"active.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/active.ring","line":51}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":41}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":48}},
             {"kind":"part","component":"number-field","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.ring-invalid","line":35}},
-            {"kind":"part","component":"pagination","part":"current.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/current.ring","line":36}},
             {"kind":"part","component":"radio-group","part":"box.ring-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.ring-checked","line":38}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":39}},
             {"kind":"part","component":"select","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.ring-invalid","line":38}},
-            {"kind":"part","component":"sidebar-nav","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"switch","part":"track.ring-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.ring-checked","line":38}},
-            {"kind":"part","component":"table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/tokens/selected.ring","line":49}},
             {"kind":"part","component":"terminal","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"text-field","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.ring-invalid","line":47}},
             {"kind":"part","component":"textarea","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.ring-invalid","line":38}},
+            {"kind":"part","component":"time-picker","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.ring-invalid","line":33}},
             {"kind":"part","component":"wizard","part":"next.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/next.ring","line":49}},
+            {"kind":"prose","component":"diagnostics","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"body","line":142}},
             {"kind":"state","component":"button","part":"outline","state":"focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/stateTokens/focus-visible/outline","line":63}},
             {"kind":"state","component":"card","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible/outline","line":46}},
-            {"kind":"state","component":"card","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible/outline","line":48}},
             {"kind":"state","component":"checkbox","part":"outline","state":"checked+focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/checked+focus-visible/outline","line":56}},
-            {"kind":"state","component":"chip","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible/outline","line":52}},
             {"kind":"state","component":"code-editor","part":"outline","state":"focus-visible","variant":null,"surface":"color.code.current-line","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/focus-visible/outline","line":71}},
             {"kind":"state","component":"combobox","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":71}},
-            {"kind":"state","component":"combobox","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected/outline","line":69}},
-            {"kind":"state","component":"data-table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":60}},
             {"kind":"state","component":"date-picker","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":77}},
-            {"kind":"state","component":"diagnostics","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible/outline","line":69}},
             {"kind":"state","component":"dialog","part":"outline","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped/outline","line":57}},
             {"kind":"state","component":"drawer","part":"outline","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/focus-trapped/outline","line":45}},
             {"kind":"state","component":"i3-window-frame","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible/outline","line":66}},
-            {"kind":"state","component":"icon-button","part":"outline","state":"toggled+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible/outline","line":44}},
-            {"kind":"state","component":"list","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible/outline","line":54}},
-            {"kind":"state","component":"menu","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected/outline","line":63}},
             {"kind":"state","component":"number-field","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":57}},
             {"kind":"state","component":"radio-group","part":"outline","state":"checked+focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/checked+focus-visible/outline","line":53}},
             {"kind":"state","component":"select","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":60}},
             {"kind":"state","component":"switch","part":"outline","state":"checked+focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/stateTokens/checked+focus-visible/outline","line":52}},
-            {"kind":"state","component":"table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":59}},
             {"kind":"state","component":"terminal","part":"outline","state":"focus-visible","variant":null,"surface":"color.terminal.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/stateTokens/focus-visible/outline","line":68}},
             {"kind":"state","component":"text-field","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":73}},
-            {"kind":"state","component":"textarea","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":62}}
+            {"kind":"state","component":"textarea","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":62}},
+            {"kind":"state","component":"time-picker","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":65}}
           ],
           "contrast": [
             {"fg":"color.interaction.focus.ring-container","bg":"color.action.primary.bg","label":"button focus-visible outline","state":"focus-visible","source":{"file":"spec/components/button.md","pointer":"/stateTokens/focus-visible","line":63}},
@@ -27699,21 +28141,9 @@
             {"fg":"color.interaction.focus.ring-container","bg":"color.action.primary.bg","label":"ring on the primary fill","state":"focus-visible","source":{"file":"spec/components/dialog.md","pointer":"/contrast/7","line":69}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.action.primary.bg","label":"switch checked+focus-visible outline","state":"checked+focus-visible","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/checked+focus-visible","line":52}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.code.current-line","label":"code-editor focus-visible outline","state":"focus-visible","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/focus-visible","line":71}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"container focus ring on selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/39","line":43}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected row","state":"selected","source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible outline","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.default","label":"card focus-visible outline","state":"focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible","line":46}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"combobox invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible","line":71}},
@@ -27722,6 +28152,7 @@
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"select invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/invalid+focus-visible","line":60}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"text-field invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"textarea invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"time-picker invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.overlay","label":"dialog focus-trapped outline","state":"focus-trapped","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped","line":57}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.overlay","label":"drawer focus-trapped outline","state":"focus-trapped","source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/focus-trapped","line":45}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.terminal.bg","label":"terminal focus-visible outline","state":"focus-visible","source":{"file":"spec/components/terminal.md","pointer":"/stateTokens/focus-visible","line":68}}
@@ -27756,9 +28187,11 @@
             {"kind":"contrast","component":"card","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/3","line":53}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/19","line":92}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/20","line":93}},
+            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
             {"kind":"contrast","component":"list","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"switch","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
             {"kind":"part","component":"breadcrumbs","part":"ellipsis.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/ellipsis.bg-hover","line":37}},
+            {"kind":"part","component":"breadcrumbs","part":"link.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/link.bg-hover","line":32}},
             {"kind":"part","component":"card","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/root.bg-hover","line":34}},
             {"kind":"part","component":"checkbox","part":"box.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg-hover","line":35}},
             {"kind":"part","component":"chip","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.bg-hover","line":35}},
@@ -27769,9 +28202,10 @@
             {"kind":"part","component":"diff-view","part":"row.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.bg-hover","line":57}},
             {"kind":"part","component":"filterable-table","part":"row.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.bg-hover","line":53}},
             {"kind":"part","component":"i3-window-frame","part":"workspace.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.bg-hover","line":40}},
+            {"kind":"part","component":"link","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.bg-hover","line":29}},
             {"kind":"part","component":"list","part":"row.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/row.bg-hover","line":38}},
             {"kind":"part","component":"menu","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/button.bg-hover","line":39}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-hover-bg","line":42}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-hover-bg","line":49}},
             {"kind":"part","component":"number-field","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.bg-hover","line":32}},
             {"kind":"part","component":"pagination","part":"link.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/link.bg-hover","line":30}},
             {"kind":"part","component":"radio-group","part":"box.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-hover","line":33}},
@@ -27785,9 +28219,11 @@
             {"kind":"part","component":"tabs","part":"tab.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.bg-hover","line":36}},
             {"kind":"part","component":"text-field","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.bg-hover","line":44}},
             {"kind":"part","component":"textarea","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.bg-hover","line":35}},
-            {"kind":"part","component":"time-picker","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-hover","line":29}},
+            {"kind":"part","component":"time-picker","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-hover","line":30}},
+            {"kind":"part","component":"toast","part":"action.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/action.bg-hover","line":49}},
             {"kind":"part","component":"toolbar","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.bg-hover","line":32}},
             {"kind":"part","component":"wizard","part":"step.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.bg-hover","line":31}},
+            {"kind":"state","component":"breadcrumbs","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/bg","line":40}},
             {"kind":"state","component":"card","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover/bg","line":45}},
             {"kind":"state","component":"checkbox","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/hover/bg","line":52}},
             {"kind":"state","component":"chip","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/hover/bg","line":49}},
@@ -27796,6 +28232,7 @@
             {"kind":"state","component":"diagnostics","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/hover/bg","line":66}},
             {"kind":"state","component":"diff-view","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/hover/bg","line":64}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/hover/bg","line":75}},
+            {"kind":"state","component":"link","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/bg","line":37}},
             {"kind":"state","component":"list","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/hover/bg","line":51}},
             {"kind":"state","component":"number-field","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/hover/bg","line":54}},
             {"kind":"state","component":"pagination","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/hover/bg","line":42}},
@@ -27808,7 +28245,8 @@
             {"kind":"state","component":"tabs","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/stateTokens/hover/bg","line":45}},
             {"kind":"state","component":"text-field","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover/bg","line":69}},
             {"kind":"state","component":"textarea","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover/bg","line":58}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/bg","line":48}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/bg","line":50}},
+            {"kind":"state","component":"toast","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/bg","line":58}},
             {"kind":"state","component":"toolbar","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/hover/bg","line":43}},
             {"kind":"state","component":"wizard","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/hover/bg","line":56}}
           ],
@@ -27824,8 +28262,9 @@
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"switch hover border","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"text-field hover border","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"textarea hover border","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.diagnostic.error.text","bg":"color.interaction.hover.bg","label":"error glyph on hover","state":"hover","source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/20","line":93}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
             {"fg":"color.text.bright","bg":"color.interaction.hover.bg","label":"title on the hover fill","state":"hover","source":{"file":"spec/components/card.md","pointer":"/contrast/2","line":52}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"card hover fg","state":"hover","source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover","line":45}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"chip hover fg","state":"hover","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/hover","line":49}},
@@ -27846,9 +28285,12 @@
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"text-field hover fg","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"textarea hover fg","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"thumb on the hovered off track","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"toolbar hover fg","state":"hover","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/hover","line":43}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"wizard hover fg","state":"hover","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/hover","line":56}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.text.muted","bg":"color.interaction.hover.bg","label":"metadata column on the hover fill","state":"hover","source":{"file":"spec/components/list.md","pointer":"/contrast/1","line":58}},
             {"fg":"color.text.muted","bg":"color.interaction.hover.bg","label":"metadata on the hover fill","state":"hover","source":{"file":"spec/components/card.md","pointer":"/contrast/3","line":53}}
           ]
@@ -27879,31 +28321,20 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/4","line":52}},
-            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/16","line":20}},
-            {"kind":"part","component":"breadcrumbs","part":"link.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/link.bg-hover","line":32}},
             {"kind":"part","component":"chip","part":"remove.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/remove.bg-hover","line":46}},
             {"kind":"part","component":"combobox","part":"option.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.bg-hover","line":54}},
             {"kind":"part","component":"diff-view","part":"fold.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/fold.bg-hover","line":56}},
             {"kind":"part","component":"drawer","part":"item.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/item.bg-hover","line":36}},
-            {"kind":"part","component":"link","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.bg-hover","line":29}},
             {"kind":"part","component":"menu","part":"item.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/item.bg-hover","line":46}},
-            {"kind":"part","component":"toast","part":"action.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/action.bg-hover","line":49}},
-            {"kind":"state","component":"breadcrumbs","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/bg","line":40}},
             {"kind":"state","component":"combobox","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover/bg","line":66}},
-            {"kind":"state","component":"link","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/bg","line":37}},
-            {"kind":"state","component":"menu","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover/bg","line":58}},
-            {"kind":"state","component":"toast","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/bg","line":58}}
+            {"kind":"state","component":"menu","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover/bg","line":58}}
           ],
           "contrast": [
-            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg-strong","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"combobox hover fg","state":"hover","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover","line":66}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"hovered item","state":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/4","line":52}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover text on strong hover fill","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/16","line":20}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"menu hover fg","state":"hover","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}}
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"menu hover fg","state":"hover","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover","line":58}}
           ]
         },
         "color.interaction.marquee": {
@@ -28115,7 +28546,8 @@
             {"kind":"contrast","component":"date-picker","part":null,"state":null,"variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/6","line":111}},
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/1","line":47}},
             {"kind":"contrast","component":"pagination","part":null,"state":"current","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/3","line":65}},
@@ -28125,7 +28557,7 @@
             {"kind":"part","component":"card","part":"selected.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.bg","line":40}},
             {"kind":"part","component":"chip","part":"selected.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.bg","line":41}},
             {"kind":"part","component":"combobox","part":"option.bg-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.bg-selected","line":56}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-bg","line":38}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-bg","line":45}},
             {"kind":"part","component":"data-table","part":"selected.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.bg","line":44}},
             {"kind":"part","component":"date-picker","part":"calendar.selected-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/calendar.selected-bg","line":53}},
             {"kind":"part","component":"diagnostics","part":"row.bg-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.bg-selected","line":57}},
@@ -28164,21 +28596,22 @@
             {"kind":"state","component":"table","part":"bg","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible/bg","line":59}}
           ],
           "contrast": [
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"container focus ring on selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/39","line":43}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected row","state":"selected","source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
-            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected workspace when focused","state":"selected","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
+            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
             {"fg":"color.interaction.selection.bg","bg":"color.surface.default","label":"toggled fill against the panel (decorative)","state":"toggled","source":{"file":"spec/components/icon-button.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.interaction.selection.text","bg":"color.interaction.selection.bg","label":"card selected fg","state":"selected","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected","line":47}},
             {"fg":"color.interaction.selection.text","bg":"color.interaction.selection.bg","label":"card selected+focus-visible fg","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
@@ -28323,7 +28756,7 @@
             {"kind":"part","component":"card","part":"selected.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.text","line":41}},
             {"kind":"part","component":"chip","part":"selected.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.text","line":42}},
             {"kind":"part","component":"combobox","part":"option.text-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.text-selected","line":57}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-text","line":39}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-text","line":46}},
             {"kind":"part","component":"data-table","part":"selected.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.text","line":45}},
             {"kind":"part","component":"date-picker","part":"calendar.selected-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/calendar.selected-text","line":54}},
             {"kind":"part","component":"diagnostics","part":"row.text-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.text-selected","line":58}},
@@ -31457,10 +31890,10 @@
             {"kind":"part","component":"checkbox","part":"box.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.border-invalid","line":41}},
             {"kind":"part","component":"combobox","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.border-invalid","line":41}},
             {"kind":"part","component":"date-picker","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-invalid","line":37}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":37}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":42}},
             {"kind":"part","component":"field","part":"control.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.border-invalid","line":26}},
             {"kind":"part","component":"file-input","part":"button.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.border-invalid","line":37}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":43}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":50}},
             {"kind":"part","component":"number-field","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.border-invalid","line":36}},
             {"kind":"part","component":"radio-group","part":"box.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.border-invalid","line":39}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":43}},
@@ -31468,7 +31901,7 @@
             {"kind":"part","component":"settings-panel","part":"invalid.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/invalid.border","line":45}},
             {"kind":"part","component":"text-field","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border-invalid","line":48}},
             {"kind":"part","component":"textarea","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border-invalid","line":39}},
-            {"kind":"part","component":"time-picker","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-invalid","line":32}},
+            {"kind":"part","component":"time-picker","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-invalid","line":34}},
             {"kind":"part","component":"wizard","part":"step.indicator-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.indicator-invalid","line":38}},
             {"kind":"prose","component":"toast","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"body","line":118}},
             {"kind":"state","component":"admin-form","part":"border","state":"invalid","variant":null,"surface":"color.status.danger.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/invalid/border","line":67}},
@@ -31490,7 +31923,8 @@
             {"kind":"state","component":"text-field","part":"border","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible/border","line":73}},
             {"kind":"state","component":"textarea","part":"border","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid/border","line":61}},
             {"kind":"state","component":"textarea","part":"border","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/border","line":62}},
-            {"kind":"state","component":"time-picker","part":"border","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/border","line":58}},
+            {"kind":"state","component":"time-picker","part":"border","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/border","line":60}},
+            {"kind":"state","component":"time-picker","part":"border","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/border","line":64}},
             {"kind":"state","component":"wizard","part":"border","state":"invalid","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/invalid/border","line":59}}
           ],
           "contrast": [
@@ -31517,7 +31951,8 @@
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"text-field invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid border","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
-            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}}
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}}
           ]
         },
         "color.status.danger.fill": {
@@ -31546,7 +31981,7 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"badge","part":null,"state":"empty","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/badge.md","pointer":"/contrast/15","line":69}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
             {"kind":"contrast","component":"progress","part":null,"state":"error","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/4","line":46}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.status.danger.fill","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/14","line":77}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.status.danger.fill","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/16","line":79}},
@@ -31564,7 +31999,7 @@
             {"fg":"color.status.danger.border","bg":"color.status.danger.fill","label":"danger border on the danger fill (decorative)","state":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/16","line":79}},
             {"fg":"color.status.danger.fill","bg":"color.interaction.pressed.bg","label":"error fill against the track","state":"error","source":{"file":"spec/components/progress.md","pointer":"/contrast/4","line":46}},
             {"fg":"color.status.danger.fill","bg":"color.surface.canvas","label":"the danger fill is its own boundary against the canvas","state":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/15","line":78}},
-            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
+            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
             {"fg":"color.status.danger.fill","bg":"color.surface.default","label":"danger dot on the panel surface","state":"empty","source":{"file":"spec/components/badge.md","pointer":"/contrast/15","line":69}},
             {"fg":"color.status.danger.on-fill","bg":"color.status.danger.fill","label":"badge default fg","state":"default","source":{"file":"spec/components/badge.md","pointer":"/stateTokens/default","line":51}},
             {"fg":"color.status.danger.on-fill","bg":"color.status.danger.fill","label":"badge empty fg","state":"empty","source":{"file":"spec/components/badge.md","pointer":"/stateTokens/empty","line":52}},
@@ -31652,7 +32087,7 @@
             {"kind":"contrast","component":"settings-panel","part":null,"state":"invalid","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/2","line":61}},
             {"kind":"contrast","component":"text-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/0","line":76}},
             {"kind":"contrast","component":"textarea","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/0","line":65}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
             {"kind":"contrast","component":"wizard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/3","line":65}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.status.danger.tint","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/25","line":29}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/24","line":28}},
@@ -31666,12 +32101,12 @@
             {"kind":"part","component":"combobox","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/message.text","line":63}},
             {"kind":"part","component":"date-picker","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/message.text","line":49}},
             {"kind":"part","component":"diagnostics","part":"status.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/status.text","line":61}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":38}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":43}},
             {"kind":"part","component":"field","part":"label.required-mark","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/label.required-mark","line":23}},
             {"kind":"part","component":"field","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/message.text","line":31}},
             {"kind":"part","component":"file-input","part":"list.error","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/list.error","line":49}},
             {"kind":"part","component":"file-input","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/message.text","line":55}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":44}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":51}},
             {"kind":"part","component":"number-field","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/message.text","line":51}},
             {"kind":"part","component":"progress","part":"error.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/tokens/error.text","line":37}},
             {"kind":"part","component":"radio-group","part":"legend.required-mark","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/legend.required-mark","line":46}},
@@ -31685,7 +32120,7 @@
             {"kind":"part","component":"textarea","part":"count.text-over","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/count.text-over","line":54}},
             {"kind":"part","component":"textarea","part":"label.required-mark","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/label.required-mark","line":51}},
             {"kind":"part","component":"textarea","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/message.text","line":55}},
-            {"kind":"part","component":"time-picker","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/message.text","line":40}},
+            {"kind":"part","component":"time-picker","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/message.text","line":42}},
             {"kind":"part","component":"wizard","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/message.text","line":43}},
             {"kind":"part","component":"wizard","part":"step.marker-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.marker-invalid","line":37}},
             {"kind":"state","component":"admin-form","part":"fg","state":"invalid","variant":null,"surface":"color.status.danger.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/invalid/fg","line":67}},
@@ -31705,7 +32140,7 @@
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"progress error fg","state":"error","source":{"file":"spec/components/progress.md","pointer":"/stateTokens/error","line":40}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/1","line":75}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/0","line":82}},
-            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
+            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"wizard invalid fg","state":"invalid","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/invalid","line":59}},
             {"fg":"color.status.danger.text","bg":"color.surface.default","label":"danger outline text","state":null,"source":{"file":"spec/components/badge.md","pointer":"/contrast/5","line":59}},
             {"fg":"color.status.danger.text","bg":"color.surface.default","label":"diagnostics error fg","state":"error","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/error","line":70}},
@@ -32732,7 +33167,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-backdrop","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-backdrop","line":40}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-backdrop","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-backdrop","line":47}},
             {"kind":"part","component":"dialog","part":"backdrop.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/backdrop.bg","line":31}},
             {"kind":"part","component":"drawer","part":"backdrop.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/backdrop.bg","line":27}}
           ],
@@ -32777,7 +33212,7 @@
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/3","line":66}},
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/4","line":67}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"kind":"contrast","component":"link","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/0","line":42}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/0","line":32}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/3","line":35}},
@@ -32786,8 +33221,8 @@
             {"kind":"contrast","component":"progress","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/1","line":43}},
             {"kind":"contrast","component":"text-field","part":null,"state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/4","line":80}},
             {"kind":"contrast","component":"textarea","part":null,"state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/4","line":69}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/0","line":63}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/1","line":64}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/15","line":78}},
@@ -32829,7 +33264,7 @@
             {"kind":"prose","component":"combobox","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"body","line":126}},
             {"kind":"prose","component":"empty-state","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"body","line":70}},
             {"kind":"prose","component":"field","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"body","line":72}},
-            {"kind":"prose","component":"time-picker","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"body","line":131}},
+            {"kind":"prose","component":"time-picker","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"body","line":138}},
             {"kind":"state","component":"date-picker","part":"bg","state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/read-only/bg","line":80}},
             {"kind":"state","component":"file-input","part":"bg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/default/bg","line":57}},
             {"kind":"state","component":"file-input","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible/bg","line":59}},
@@ -32892,7 +33327,7 @@
             {"fg":"color.diagnostic.warning.text","bg":"color.surface.canvas","label":"warning diagnostic text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/54","line":58}},
             {"fg":"color.icon.decorative","bg":"color.surface.canvas","label":"decorative icon on canvas (graphic)","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/62","line":66}},
             {"fg":"color.interaction.drop-target","bg":"color.surface.canvas","label":"drop-zone dashed border at rest","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/1","line":64}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"file-input focus-visible outline","state":"focus-visible","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"focus ring on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/37","line":41}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"link focus-visible outline","state":"focus-visible","source":{"file":"spec/components/link.md","pointer":"/stateTokens/focus-visible","line":38}},
@@ -32908,7 +33343,7 @@
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"progress error fg","state":"error","source":{"file":"spec/components/progress.md","pointer":"/stateTokens/error","line":40}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/1","line":75}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/0","line":82}},
-            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
+            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"wizard invalid fg","state":"invalid","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/invalid","line":59}},
             {"fg":"color.status.info.text","bg":"color.surface.canvas","label":"glyph on the plain toast","state":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/0","line":63}},
             {"fg":"color.status.info.text","bg":"color.surface.canvas","label":"info text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/33","line":37}},
@@ -32945,7 +33380,7 @@
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text and the range separator on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/1","line":85}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/2","line":76}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/1","line":38}},
-            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"muted text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/6","line":10}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"status, hint and help text on the canvas","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"toast stacked fg","state":"stacked","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked","line":60}},
@@ -32983,19 +33418,19 @@
           "uses": [
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
             {"kind":"contrast","component":"toolbar","part":null,"state":"disabled","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/0","line":47}},
             {"kind":"contrast","component":"toolbar","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/1","line":48}},
             {"kind":"contrast","component":"toolbar","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/2","line":49}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-surface-chrome","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-surface-chrome","line":35}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-surface-chrome","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-surface-chrome","line":40}},
             {"kind":"part","component":"filterable-table","part":"toolbar.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/toolbar.bg","line":33}},
             {"kind":"part","component":"i3-window-frame","part":"bar.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/bar.bg","line":34}},
             {"kind":"part","component":"i3-window-frame","part":"title.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/title.bg","line":53}},
@@ -33009,22 +33444,22 @@
             {"fg":"color.border.control","bg":"color.surface.chrome","label":"search box and filter button boundaries on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
             {"fg":"color.border.default","bg":"color.surface.chrome","label":"separator (decorative; role separator carries the grouping)","state":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/1","line":48}},
             {"fg":"color.border.divider","bg":"color.surface.chrome","label":"toolbar bottom edge (decorative)","state":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/2","line":49}},
-            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
-            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
-            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
+            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
+            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"toolbar focus-visible outline","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
-            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
-            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
+            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar controls on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar default fg","state":"default","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/default","line":42}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar focus-visible fg","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
             {"fg":"color.text.disabled","bg":"color.surface.chrome","label":"disabled button text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/toolbar.md","pointer":"/contrast/0","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame container-inactive fg","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/container-inactive","line":68}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame default fg","state":"default","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/default","line":65}},
-            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}}
+            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}}
           ]
         },
         "color.surface.chrome-alt": {
@@ -33052,13 +33487,13 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
             {"kind":"part","component":"i3-window-frame","part":"title.bg-focused","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/title.bg-focused","line":55}},
             {"kind":"state","component":"i3-window-frame","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible/bg","line":66}}
           ],
           "contrast": [
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible outline","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
             {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible fg","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}}
           ]
         },
@@ -33089,7 +33524,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-surface-code","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-surface-code","line":37}}
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-surface-code","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-surface-code","line":44}}
           ],
           "contrast": []
         },
@@ -33151,9 +33586,10 @@
             {"kind":"contrast","component":"badge","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/badge.md","pointer":"/contrast/9","line":63}},
             {"kind":"contrast","component":"breadcrumbs","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
             {"kind":"contrast","component":"breadcrumbs","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/1","line":46}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/4","line":71}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/0","line":67}},
             {"kind":"contrast","component":"card","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/0","line":50}},
@@ -33168,12 +33604,14 @@
             {"kind":"contrast","component":"checkbox","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/1","line":61}},
             {"kind":"contrast","component":"checkbox","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/4","line":64}},
             {"kind":"contrast","component":"chip","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
             {"kind":"contrast","component":"data-table","part":null,"state":"mixed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/2","line":68}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/0","line":66}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/3","line":69}},
@@ -33191,25 +33629,28 @@
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/0","line":35}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/2","line":37}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/3","line":38}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"field","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/2","line":39}},
             {"kind":"contrast","component":"field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/0","line":37}},
             {"kind":"contrast","component":"fieldset","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/3","line":37}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/0","line":34}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/2","line":36}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/10","line":90}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/11","line":91}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/12","line":92}},
@@ -33221,9 +33662,9 @@
             {"kind":"contrast","component":"form-builder","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/1","line":27}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/0","line":46}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/1","line":47}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
             {"kind":"contrast","component":"link","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/1","line":43}},
             {"kind":"contrast","component":"link","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/2","line":44}},
             {"kind":"contrast","component":"list","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/2","line":59}},
@@ -33231,31 +33672,34 @@
             {"kind":"contrast","component":"list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/3","line":60}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/2","line":34}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/3","line":63}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/4","line":64}},
             {"kind":"contrast","component":"pagination","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/1","line":47}},
             {"kind":"contrast","component":"pagination","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/2","line":48}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
             {"kind":"contrast","component":"radio-group","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
             {"kind":"contrast","component":"radio-group","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/5","line":62}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/4","line":61}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/4","line":63}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/4","line":66}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/5","line":67}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":"invalid","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/2","line":61}},
@@ -33362,14 +33806,14 @@
             {"kind":"state","component":"breadcrumbs","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/default/bg","line":39}},
             {"kind":"state","component":"breadcrumbs","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/focus-visible/bg","line":41}},
             {"kind":"state","component":"breadcrumbs","part":"bg","state":"truncated","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated/bg","line":43}},
-            {"kind":"state","component":"button-group","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/bg","line":45}},
+            {"kind":"state","component":"button-group","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/bg","line":50}},
             {"kind":"state","component":"card","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/default/bg","line":44}},
             {"kind":"state","component":"card","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible/bg","line":46}},
             {"kind":"state","component":"chart","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default/bg","line":45}},
             {"kind":"state","component":"chip","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default/bg","line":48}},
             {"kind":"state","component":"chip","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible/bg","line":50}},
-            {"kind":"state","component":"command-palette","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/bg","line":52}},
-            {"kind":"state","component":"compact-dashboard","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/bg","line":46}},
+            {"kind":"state","component":"command-palette","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/bg","line":59}},
+            {"kind":"state","component":"compact-dashboard","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/bg","line":51}},
             {"kind":"state","component":"data-table","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default/bg","line":56}},
             {"kind":"state","component":"data-table","part":"bg","state":"empty","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/empty/bg","line":63}},
             {"kind":"state","component":"data-table","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible/bg","line":58}},
@@ -33381,30 +33825,30 @@
             {"kind":"state","component":"diagnostics","part":"bg","state":"error","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/error/bg","line":70}},
             {"kind":"state","component":"diagnostics","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible/bg","line":67}},
             {"kind":"state","component":"disclosure","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default/bg","line":47}},
-            {"kind":"state","component":"editor-search","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/bg","line":47}},
+            {"kind":"state","component":"editor-search","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/bg","line":54}},
             {"kind":"state","component":"empty-state","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/stateTokens/default/bg","line":33}},
-            {"kind":"state","component":"error-state","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/bg","line":49}},
+            {"kind":"state","component":"error-state","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/bg","line":54}},
             {"kind":"state","component":"field","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/stateTokens/default/bg","line":33}},
             {"kind":"state","component":"field","part":"bg","state":"invalid","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/stateTokens/invalid/bg","line":35}},
             {"kind":"state","component":"field","part":"bg","state":"required","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/stateTokens/required/bg","line":34}},
             {"kind":"state","component":"fieldset","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/stateTokens/default/bg","line":32}},
-            {"kind":"state","component":"file-browser","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/bg","line":48}},
+            {"kind":"state","component":"file-browser","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/bg","line":55}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default/bg","line":74}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible/bg","line":76}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"no-results","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/no-results/bg","line":78}},
             {"kind":"state","component":"form-builder","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default/bg","line":24}},
-            {"kind":"state","component":"kbd","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/bg","line":38}},
+            {"kind":"state","component":"kbd","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/bg","line":39}},
             {"kind":"state","component":"list","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/default/bg","line":50}},
             {"kind":"state","component":"list","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible/bg","line":52}},
             {"kind":"state","component":"menu","part":"bg","state":"closed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed/bg","line":61}},
             {"kind":"state","component":"menu","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/bg","line":59}},
-            {"kind":"state","component":"multiselect","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/bg","line":64}},
+            {"kind":"state","component":"multiselect","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/bg","line":71}},
             {"kind":"state","component":"pagination","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default/bg","line":41}},
             {"kind":"state","component":"pagination","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible/bg","line":43}},
-            {"kind":"state","component":"popover","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/bg","line":45}},
-            {"kind":"state","component":"range","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/bg","line":45}},
-            {"kind":"state","component":"repeater","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/bg","line":46}},
-            {"kind":"state","component":"segmented-control","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/bg","line":65}},
+            {"kind":"state","component":"popover","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/bg","line":50}},
+            {"kind":"state","component":"range","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/bg","line":46}},
+            {"kind":"state","component":"repeater","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/bg","line":53}},
+            {"kind":"state","component":"segmented-control","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/bg","line":64}},
             {"kind":"state","component":"settings-panel","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/stateTokens/default/bg","line":54}},
             {"kind":"state","component":"sidebar-nav","part":"bg","state":"collapsed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/collapsed/bg","line":59}},
             {"kind":"state","component":"sidebar-nav","part":"bg","state":"current","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/current/bg","line":55}},
@@ -33432,54 +33876,63 @@
             {"fg":"color.action.secondary.border","bg":"color.surface.default","label":"Reset button boundary","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/5","line":64}},
             {"fg":"color.action.secondary.border","bg":"color.surface.default","label":"secondary border against the panel while hovered (the fill inside it measures 2.94:1)","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/4","line":71}},
             {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"action text on the panel surface","state":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"avatar default border","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chart default border","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked box edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/checkbox.md","pointer":"/contrast/2","line":62}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked radio edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip and checkbox boundaries","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/8","line":88}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip default border","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip focus-visible border","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control border on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/41","line":45}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control boundaries on the panel surface","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/4","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/2","line":49}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/2","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"description-list default border","state":"default","source":{"file":"spec/components/description-list.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"diagnostics default border","state":"default","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/default","line":65}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"disclosure default border","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"form-builder default border","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"list default border","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu closed border","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu focus-visible border","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"on track edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/switch.md","pointer":"/contrast/3","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"skeleton default border","state":"default","source":{"file":"spec/components/skeleton.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"timeline default border","state":"default","source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"tree default border","state":"default","source":{"file":"spec/components/tree.md","pointer":"/stateTokens/default","line":50}},
@@ -33580,14 +34033,14 @@
             {"fg":"color.text.default","bg":"color.surface.default","label":"avatar default fg","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"block label on the panel surface","state":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"breadcrumbs truncated fg","state":"truncated","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card default fg","state":"default","source":{"file":"spec/components/card.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card focus-visible fg","state":"focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chart default fg","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip default fg","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip focus-visible fg","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table default fg","state":"default","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default","line":56}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible","line":58}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"default text on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/1","line":5}},
@@ -33596,47 +34049,47 @@
             {"fg":"color.text.default","bg":"color.surface.default","label":"diagnostics focus-visible fg","state":"focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"disclosure default fg","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Editor text","state":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/0","line":26}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"field labels inside the group","state":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table default fg","state":"default","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default","line":74}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible","line":76}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"form-builder default fg","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list default fg","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list focus-visible fg","state":"focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible","line":52}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu closed fg","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu focus-visible fg","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/0","line":60}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination default fg","state":"default","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default","line":41}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination focus-visible fg","state":"focus-visible","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"panel text on the panel surface","state":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/2","line":64}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/0","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/0","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"settings-panel default fg","state":"default","source":{"file":"spec/components/settings-panel.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav collapsed fg","state":"collapsed","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/collapsed","line":59}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav default fg","state":"default","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/default","line":52}},
@@ -33693,21 +34146,21 @@
             {"fg":"color.text.muted","bg":"color.surface.default","label":"remove glyph at rest","state":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"separator on the panel surface","state":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/1","line":46}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/1","line":46}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/1","line":57}},
@@ -33742,16 +34195,16 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
             {"kind":"part","component":"i3-window-frame","part":"area.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/area.bg","line":48}},
             {"kind":"part","component":"i3-window-frame","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/root.bg","line":32}}
           ],
           "contrast": [
-            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
-            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
-            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}}
+            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
+            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}}
           ]
         },
         "color.surface.input": {
@@ -33798,19 +34251,16 @@
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/42","line":46}},
             {"kind":"part","component":"admin-form","part":"field.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/field.bg","line":43}},
             {"kind":"part","component":"avatar","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/control.bg","line":29}},
-            {"kind":"part","component":"button-group","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"chart","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"checkbox","part":"box.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg","line":33}},
             {"kind":"part","component":"combobox","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.bg","line":35}},
             {"kind":"part","component":"command-palette","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/control.bg","line":32}},
-            {"kind":"part","component":"compact-dashboard","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg","line":31}},
             {"kind":"part","component":"data-table","part":"checkbox.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/checkbox.bg","line":47}},
             {"kind":"part","component":"date-picker","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.bg","line":31}},
             {"kind":"part","component":"description-list","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/control.bg","line":28}},
             {"kind":"part","component":"dialog","part":"field.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/field.bg","line":50}},
             {"kind":"part","component":"disclosure","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/control.bg","line":30}},
             {"kind":"part","component":"editor-search","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/control.bg","line":30}},
-            {"kind":"part","component":"error-state","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg","line":31}},
             {"kind":"part","component":"field","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.bg","line":24}},
             {"kind":"part","component":"fieldset","part":"field.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.bg","line":25}},
             {"kind":"part","component":"file-browser","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/control.bg","line":32}},
@@ -33819,7 +34269,6 @@
             {"kind":"part","component":"kbd","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/control.bg","line":27}},
             {"kind":"part","component":"multiselect","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/control.bg","line":31}},
             {"kind":"part","component":"number-field","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.bg","line":30}},
-            {"kind":"part","component":"popover","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg","line":30}},
             {"kind":"part","component":"radio-group","part":"box.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg","line":31}},
             {"kind":"part","component":"range","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"repeater","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/control.bg","line":30}},
@@ -33831,7 +34280,7 @@
             {"kind":"part","component":"switch","part":"track.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.bg","line":32}},
             {"kind":"part","component":"text-field","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.bg","line":42}},
             {"kind":"part","component":"textarea","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.bg","line":33}},
-            {"kind":"part","component":"time-picker","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg","line":27}},
+            {"kind":"part","component":"time-picker","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg","line":28}},
             {"kind":"part","component":"timeline","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/control.bg","line":28}},
             {"kind":"part","component":"tree","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/control.bg","line":33}},
             {"kind":"state","component":"admin-form","part":"bg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default/bg","line":66}},
@@ -33879,9 +34328,10 @@
             {"kind":"state","component":"textarea","part":"bg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid/bg","line":61}},
             {"kind":"state","component":"textarea","part":"bg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/bg","line":62}},
             {"kind":"state","component":"textarea","part":"bg","state":"placeholder-shown","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown/bg","line":60}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/bg","line":44}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/bg","line":52}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/bg","line":57}}
+            {"kind":"state","component":"time-picker","part":"bg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/bg","line":46}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/bg","line":54}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/bg","line":59}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/bg","line":63}}
           ],
           "contrast": [
             {"fg":"color.action.tertiary.text","bg":"color.surface.input","label":"clear glyph on the input surface","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/2","line":61}},
@@ -33894,7 +34344,7 @@
             {"fg":"color.border.active","bg":"color.surface.input","label":"select focus-visible border","state":"focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible","line":57}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"text-field focus-visible border","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"textarea focus-visible border","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
+            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"admin-form default border","state":"default","source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default","line":66}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"checkbox boundary","state":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/1","line":67}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"checkbox default border","state":"default","source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/default","line":51}},
@@ -33920,7 +34370,7 @@
             {"fg":"color.border.control","bg":"color.surface.input","label":"text-field placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/placeholder-shown","line":71}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea default border","state":"default","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/default","line":57}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown","line":60}},
-            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
+            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
             {"fg":"color.border.default","bg":"color.surface.input","label":"kbd hint edge (decorative)","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/5","line":64}},
             {"fg":"color.border.divider","bg":"color.surface.input","label":"affix and stepper dividers (decorative)","state":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/7","line":67}},
             {"fg":"color.icon.default","bg":"color.surface.input","label":"chevron on the input surface","state":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/0","line":62}},
@@ -33931,6 +34381,7 @@
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"select invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/invalid+focus-visible","line":60}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"text-field invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"textarea invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"time-picker invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"checkbox focus-visible outline","state":"focus-visible","source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"combobox focus-visible outline","state":"focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"date-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/focus-visible","line":65}},
@@ -33942,7 +34393,7 @@
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"switch focus-visible outline","state":"focus-visible","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/focus-visible","line":50}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"text-field focus-visible outline","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"textarea focus-visible outline","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"checkbox invalid border","state":"invalid","source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/invalid","line":57}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"combobox invalid border","state":"invalid","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid","line":70}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"combobox invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible","line":71}},
@@ -33959,7 +34410,8 @@
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"text-field invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid border","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
-            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}},
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"admin-form default fg","state":"default","source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default","line":66}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"combobox default fg","state":"default","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/default","line":65}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"combobox focus-visible fg","state":"focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible","line":67}},
@@ -33994,9 +34446,10 @@
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid fg","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"thumb on the off track","state":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.muted","bg":"color.surface.input","label":"loading glyph and kbd hint on the input surface","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/1","line":60}},
             {"fg":"color.text.muted","bg":"color.surface.input","label":"unit affix on the input surface","state":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/0","line":60}},
             {"fg":"color.text.placeholder","bg":"color.surface.input","label":"placeholder on input","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/11","line":15}},
@@ -34041,10 +34494,10 @@
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/2","line":50}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/3","line":51}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/5","line":53}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":41}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":48}},
             {"kind":"part","component":"dialog","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/root.bg","line":32}},
             {"kind":"part","component":"drawer","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/root.bg","line":28}},
-            {"kind":"part","component":"popover","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":34}},
+            {"kind":"part","component":"popover","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":39}},
             {"kind":"state","component":"dialog","part":"bg","state":"default","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/default/bg","line":55}},
             {"kind":"state","component":"dialog","part":"bg","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped/bg","line":57}},
             {"kind":"state","component":"dialog","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-visible/bg","line":59}},
@@ -35216,8 +35669,8 @@
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/0","line":48}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/0","line":35}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/2","line":82}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"progress","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/0","line":42}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/0","line":59}},
@@ -35236,7 +35689,7 @@
             {"kind":"part","component":"breadcrumbs","part":"current.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/current.text","line":34}},
             {"kind":"part","component":"button-group","part":"heading.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/heading.text","line":27}},
             {"kind":"part","component":"card","part":"title.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/title.text","line":37}},
-            {"kind":"part","component":"chart","part":"header.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/header.text","line":36}},
+            {"kind":"part","component":"chart","part":"header.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/header.text","line":37}},
             {"kind":"part","component":"chart","part":"heading.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/heading.text","line":27}},
             {"kind":"part","component":"checkbox","part":"legend.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/legend.text","line":47}},
             {"kind":"part","component":"chip","part":"remove.text-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/remove.text-hover","line":45}},
@@ -35291,7 +35744,7 @@
             {"kind":"part","component":"tabs","part":"tab.text-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.text-selected","line":34}},
             {"kind":"part","component":"text-field","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/label.text","line":58}},
             {"kind":"part","component":"textarea","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/label.text","line":50}},
-            {"kind":"part","component":"time-picker","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/label.text","line":38}},
+            {"kind":"part","component":"time-picker","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/label.text","line":40}},
             {"kind":"part","component":"timeline","part":"heading.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/heading.text","line":26}},
             {"kind":"part","component":"toolbar","part":"toggled.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/toggled.text","line":38}},
             {"kind":"part","component":"tooltip","part":"shortcut.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/tokens/shortcut.text","line":31}},
@@ -35327,9 +35780,9 @@
             {"fg":"color.text.bright","bg":"color.surface.canvas","label":"link current fg","state":"current","source":{"file":"spec/components/link.md","pointer":"/stateTokens/current","line":40}},
             {"fg":"color.text.bright","bg":"color.surface.canvas","label":"wizard current fg","state":"current","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/current","line":58}},
             {"fg":"color.text.bright","bg":"color.surface.canvas","label":"wizard focus-visible fg","state":"focus-visible","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/focus-visible","line":57}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
             {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible fg","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.bright","bg":"color.surface.default","label":"breadcrumbs current fg","state":"current","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/current","line":42}},
             {"fg":"color.text.bright","bg":"color.surface.default","label":"column headers, empty-state heading and current page","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/2","line":82}},
             {"fg":"color.text.bright","bg":"color.surface.default","label":"data-table sorted fg","state":"sorted","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/sorted","line":61}},
@@ -35393,11 +35846,11 @@
             {"kind":"contrast","component":"alert","part":null,"state":null,"variant":null,"surface":"color.status.success.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/contrast/6","line":63}},
             {"kind":"contrast","component":"alert","part":null,"state":null,"variant":null,"surface":"color.status.warning.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/contrast/3","line":60}},
             {"kind":"contrast","component":"avatar","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/0","line":43}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
             {"kind":"contrast","component":"chart","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/0","line":48}},
             {"kind":"contrast","component":"checkbox","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/0","line":60}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
             {"kind":"contrast","component":"date-picker","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/5","line":108}},
             {"kind":"contrast","component":"description-list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/0","line":43}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/19","line":92}},
@@ -35409,21 +35862,21 @@
             {"kind":"contrast","component":"diff-view","part":null,"state":null,"variant":null,"surface":"color.diff.modified.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/2","line":72}},
             {"kind":"contrast","component":"diff-view","part":null,"state":null,"variant":null,"surface":"color.diff.removed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/1","line":71}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"kind":"contrast","component":"form-builder","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/0","line":26}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/1","line":63}},
             {"kind":"contrast","component":"skeleton","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/0","line":44}},
             {"kind":"contrast","component":"switch","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
@@ -35452,7 +35905,7 @@
             {"kind":"part","component":"button-group","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/root.text","line":25}},
             {"kind":"part","component":"card","part":"body.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/body.text","line":38}},
             {"kind":"part","component":"chart","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/root.text","line":25}},
-            {"kind":"part","component":"chart","part":"row.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/row.text","line":37}},
+            {"kind":"part","component":"chart","part":"row.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/row.text","line":38}},
             {"kind":"part","component":"checkbox","part":"text.default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/text.default","line":45}},
             {"kind":"part","component":"chip","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.text","line":34}},
             {"kind":"part","component":"combobox","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/input.text","line":44}},
@@ -35514,7 +35967,7 @@
             {"kind":"part","component":"tabs","part":"tab.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.text","line":33}},
             {"kind":"part","component":"text-field","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/input.text","line":52}},
             {"kind":"part","component":"textarea","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/input.text","line":44}},
-            {"kind":"part","component":"time-picker","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text","line":35}},
+            {"kind":"part","component":"time-picker","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text","line":37}},
             {"kind":"part","component":"timeline","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/root.text","line":24}},
             {"kind":"part","component":"toast","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/root.text","line":31}},
             {"kind":"part","component":"toolbar","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.text","line":31}},
@@ -35522,11 +35975,10 @@
             {"kind":"part","component":"tree","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/root.text","line":29}},
             {"kind":"part","component":"wizard","part":"step.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.text","line":30}},
             {"kind":"part","component":"wizard","part":"text.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/text.text","line":42}},
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}},
             {"kind":"state","component":"admin-form","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default/fg","line":66}},
             {"kind":"state","component":"avatar","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default/fg","line":39}},
             {"kind":"state","component":"breadcrumbs","part":"fg","state":"truncated","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated/fg","line":43}},
-            {"kind":"state","component":"button-group","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/fg","line":44}},
+            {"kind":"state","component":"button-group","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/fg","line":49}},
             {"kind":"state","component":"card","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/default/fg","line":44}},
             {"kind":"state","component":"card","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible/fg","line":46}},
             {"kind":"state","component":"card","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover/fg","line":45}},
@@ -35539,8 +35991,8 @@
             {"kind":"state","component":"combobox","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid/fg","line":70}},
             {"kind":"state","component":"combobox","part":"fg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible/fg","line":71}},
             {"kind":"state","component":"combobox","part":"fg","state":"open","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/open/fg","line":68}},
-            {"kind":"state","component":"command-palette","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/fg","line":51}},
-            {"kind":"state","component":"compact-dashboard","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"command-palette","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/fg","line":58}},
+            {"kind":"state","component":"compact-dashboard","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/fg","line":50}},
             {"kind":"state","component":"data-table","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default/fg","line":56}},
             {"kind":"state","component":"data-table","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible/fg","line":58}},
             {"kind":"state","component":"data-table","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/hover/fg","line":57}},
@@ -35566,15 +36018,15 @@
             {"kind":"state","component":"drawer","part":"fg","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/focus-trapped/fg","line":45}},
             {"kind":"state","component":"drawer","part":"fg","state":"open","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/open/fg","line":44}},
             {"kind":"state","component":"drawer","part":"fg","state":"reduced-motion","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/reduced-motion/fg","line":46}},
-            {"kind":"state","component":"editor-search","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/fg","line":46}},
-            {"kind":"state","component":"error-state","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/fg","line":48}},
-            {"kind":"state","component":"file-browser","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/fg","line":47}},
+            {"kind":"state","component":"editor-search","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/fg","line":53}},
+            {"kind":"state","component":"error-state","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/fg","line":53}},
+            {"kind":"state","component":"file-browser","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/fg","line":54}},
             {"kind":"state","component":"file-input","part":"fg","state":"drop-target","variant":null,"surface":"color.interaction.marquee","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/drop-target/fg","line":60}},
             {"kind":"state","component":"filterable-table","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default/fg","line":74}},
             {"kind":"state","component":"filterable-table","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible/fg","line":76}},
             {"kind":"state","component":"filterable-table","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/hover/fg","line":75}},
             {"kind":"state","component":"form-builder","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default/fg","line":24}},
-            {"kind":"state","component":"kbd","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/fg","line":37}},
+            {"kind":"state","component":"kbd","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/fg","line":38}},
             {"kind":"state","component":"list","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/default/fg","line":50}},
             {"kind":"state","component":"list","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible/fg","line":52}},
             {"kind":"state","component":"list","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/hover/fg","line":51}},
@@ -35584,7 +36036,7 @@
             {"kind":"state","component":"menu","part":"fg","state":"default","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/default/fg","line":57}},
             {"kind":"state","component":"menu","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/fg","line":59}},
             {"kind":"state","component":"menu","part":"fg","state":"open","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/open/fg","line":60}},
-            {"kind":"state","component":"multiselect","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/fg","line":63}},
+            {"kind":"state","component":"multiselect","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/fg","line":70}},
             {"kind":"state","component":"number-field","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/default/fg","line":53}},
             {"kind":"state","component":"number-field","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/focus-visible/fg","line":55}},
             {"kind":"state","component":"number-field","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/hover/fg","line":54}},
@@ -35594,16 +36046,16 @@
             {"kind":"state","component":"pagination","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default/fg","line":41}},
             {"kind":"state","component":"pagination","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible/fg","line":43}},
             {"kind":"state","component":"pagination","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/hover/fg","line":42}},
-            {"kind":"state","component":"popover","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/fg","line":44}},
+            {"kind":"state","component":"popover","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/fg","line":49}},
             {"kind":"state","component":"progress","part":"fg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/stateTokens/default/fg","line":39}},
-            {"kind":"state","component":"range","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/fg","line":44}},
-            {"kind":"state","component":"repeater","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"range","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"repeater","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/fg","line":52}},
             {"kind":"state","component":"search-field","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/default/fg","line":52}},
             {"kind":"state","component":"search-field","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/focus-visible/fg","line":54}},
             {"kind":"state","component":"search-field","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/hover/fg","line":53}},
             {"kind":"state","component":"search-field","part":"fg","state":"loading","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/loading/fg","line":56}},
             {"kind":"state","component":"search-field","part":"fg","state":"no-results","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/no-results/fg","line":57}},
-            {"kind":"state","component":"segmented-control","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/fg","line":64}},
+            {"kind":"state","component":"segmented-control","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/fg","line":63}},
             {"kind":"state","component":"select","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/default/fg","line":55}},
             {"kind":"state","component":"select","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible/fg","line":57}},
             {"kind":"state","component":"select","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/hover/fg","line":56}},
@@ -35636,10 +36088,11 @@
             {"kind":"state","component":"textarea","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid/fg","line":61}},
             {"kind":"state","component":"textarea","part":"fg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/fg","line":62}},
             {"kind":"state","component":"textarea","part":"fg","state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/read-only/fg","line":63}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/fg","line":43}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/fg","line":51}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/fg","line":47}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/fg","line":56}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/fg","line":53}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/fg","line":49}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/fg","line":58}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/fg","line":62}},
             {"kind":"state","component":"timeline","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default/fg","line":40}},
             {"kind":"state","component":"toast","part":"fg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/default/fg","line":57}},
             {"kind":"state","component":"toast","part":"fg","state":"reduced-motion","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/reduced-motion/fg","line":61}},
@@ -35683,7 +36136,7 @@
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"text-field hover fg","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"textarea hover fg","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"thumb on the hovered off track","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"toolbar hover fg","state":"hover","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/hover","line":43}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"wizard hover fg","state":"hover","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/hover","line":56}},
             {"fg":"color.text.default","bg":"color.interaction.marquee","label":"file-input drop-target fg","state":"drop-target","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/drop-target","line":60}},
@@ -35715,18 +36168,18 @@
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar controls on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar default fg","state":"default","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/default","line":42}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar focus-visible fg","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"avatar default fg","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"block label on the panel surface","state":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"breadcrumbs truncated fg","state":"truncated","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card default fg","state":"default","source":{"file":"spec/components/card.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card focus-visible fg","state":"focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chart default fg","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip default fg","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip focus-visible fg","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table default fg","state":"default","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default","line":56}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible","line":58}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"default text on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/1","line":5}},
@@ -35735,47 +36188,47 @@
             {"fg":"color.text.default","bg":"color.surface.default","label":"diagnostics focus-visible fg","state":"focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"disclosure default fg","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Editor text","state":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/0","line":26}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"field labels inside the group","state":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table default fg","state":"default","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default","line":74}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible","line":76}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"form-builder default fg","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list default fg","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list focus-visible fg","state":"focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible","line":52}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu closed fg","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu focus-visible fg","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/0","line":60}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination default fg","state":"default","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default","line":41}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination focus-visible fg","state":"focus-visible","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"panel text on the panel surface","state":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/2","line":64}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/0","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/0","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"settings-panel default fg","state":"default","source":{"file":"spec/components/settings-panel.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav collapsed fg","state":"collapsed","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/collapsed","line":59}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav default fg","state":"default","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/default","line":52}},
@@ -35822,9 +36275,10 @@
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid fg","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"thumb on the off track","state":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.overlay","label":"dialog default fg","state":"default","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/default","line":55}},
             {"fg":"color.text.default","bg":"color.surface.overlay","label":"dialog focus-trapped fg","state":"focus-trapped","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped","line":57}},
             {"fg":"color.text.default","bg":"color.surface.overlay","label":"dialog open fg","state":"open","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/open","line":56}},
@@ -35900,12 +36354,12 @@
             {"kind":"contrast","component":"tabs","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/contrast/1","line":52}},
             {"kind":"contrast","component":"text-field","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/2","line":78}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"toolbar","part":null,"state":"disabled","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/0","line":47}},
             {"kind":"contrast","component":"wizard","part":null,"state":"disabled","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/9","line":71}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/10","line":14}},
             {"kind":"part","component":"admin-form","part":"disabled.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/disabled.text","line":52}},
-            {"kind":"part","component":"button-group","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-text-disabled","line":34}},
+            {"kind":"part","component":"button-group","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-text-disabled","line":39}},
             {"kind":"part","component":"button","part":"root.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.text-disabled","line":56}},
             {"kind":"part","component":"checkbox","part":"box.glyph-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.glyph-disabled","line":44}},
             {"kind":"part","component":"checkbox","part":"text.disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/text.disabled","line":46}},
@@ -35913,7 +36367,7 @@
             {"kind":"part","component":"combobox","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/input.text-disabled","line":45}},
             {"kind":"part","component":"date-picker","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/input.text-disabled","line":43}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-text-disabled","line":37}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-text-disabled","line":39}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-text-disabled","line":44}},
             {"kind":"part","component":"field","part":"control.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.text-disabled","line":27}},
             {"kind":"part","component":"fieldset","part":"field.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.text-disabled","line":29}},
             {"kind":"part","component":"fieldset","part":"legend.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/legend.text-disabled","line":24}},
@@ -35922,13 +36376,13 @@
             {"kind":"part","component":"icon-button","part":"root.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.text-disabled","line":34}},
             {"kind":"part","component":"list","part":"row.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/row.text-disabled","line":41}},
             {"kind":"part","component":"menu","part":"item.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/item.text-disabled","line":48}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-text-disabled","line":45}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-text-disabled","line":52}},
             {"kind":"part","component":"number-field","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/input.text-disabled","line":42}},
             {"kind":"part","component":"pagination","part":"link.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/link.text-disabled","line":33}},
             {"kind":"part","component":"radio-group","part":"box.dot-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.dot-disabled","line":42}},
             {"kind":"part","component":"radio-group","part":"text.disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/text.disabled","line":44}},
             {"kind":"part","component":"range","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-color-text-disabled","line":35}},
-            {"kind":"part","component":"repeater","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-text-disabled","line":35}},
+            {"kind":"part","component":"repeater","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-text-disabled","line":42}},
             {"kind":"part","component":"search-field","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/input.text-disabled","line":39}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-text-disabled","line":45}},
             {"kind":"part","component":"select","part":"control.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/control.text-disabled","line":43}},
@@ -35937,7 +36391,7 @@
             {"kind":"part","component":"tabs","part":"tab.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.text-disabled","line":35}},
             {"kind":"part","component":"text-field","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/input.text-disabled","line":53}},
             {"kind":"part","component":"textarea","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/input.text-disabled","line":45}},
-            {"kind":"part","component":"time-picker","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text-disabled","line":36}},
+            {"kind":"part","component":"time-picker","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text-disabled","line":38}},
             {"kind":"part","component":"toolbar","part":"button.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.text-disabled","line":35}},
             {"kind":"part","component":"tree","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-color-text-disabled","line":40}},
             {"kind":"part","component":"wizard","part":"step.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.text-disabled","line":35}}
@@ -35959,7 +36413,7 @@
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/select.md","pointer":"/contrast/6","line":68}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/2","line":78}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
-            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
+            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled thumb (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/6","line":60}},
             {"fg":"color.text.disabled","bg":"color.surface.canvas","label":"disabled text on canvas (exempt; house floor 3:1)","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/10","line":14}},
             {"fg":"color.text.disabled","bg":"color.surface.canvas","label":"future step text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/wizard.md","pointer":"/contrast/9","line":71}},
@@ -36178,20 +36632,20 @@
             {"kind":"part","component":"link","part":"root.text-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.text-hover","line":28}},
             {"kind":"part","component":"menu","part":"item.text-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/item.text-hover","line":47}},
             {"kind":"part","component":"toast","part":"action.text-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/action.text-hover","line":50}},
-            {"kind":"state","component":"breadcrumbs","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/fg","line":40}},
+            {"kind":"state","component":"breadcrumbs","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/fg","line":40}},
             {"kind":"state","component":"combobox","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover/fg","line":66}},
-            {"kind":"state","component":"link","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/fg","line":37}},
+            {"kind":"state","component":"link","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/fg","line":37}},
             {"kind":"state","component":"menu","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover/fg","line":58}},
-            {"kind":"state","component":"toast","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/fg","line":58}}
+            {"kind":"state","component":"toast","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/fg","line":58}}
           ],
           "contrast": [
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"combobox hover fg","state":"hover","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover","line":66}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"hovered item","state":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/4","line":52}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover text on strong hover fill","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/16","line":20}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"menu hover fg","state":"hover","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}}
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}}
           ]
         },
         "color.text.link-underline": {
@@ -36259,15 +36713,15 @@
             {"kind":"contrast","component":"admin-form","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/contrast/1","line":71}},
             {"kind":"contrast","component":"avatar","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/1","line":46}},
             {"kind":"contrast","component":"breadcrumbs","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
             {"kind":"contrast","component":"card","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/3","line":53}},
             {"kind":"contrast","component":"card","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/1","line":51}},
             {"kind":"contrast","component":"chart","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/1","line":51}},
             {"kind":"contrast","component":"chip","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"kind":"contrast","component":"combobox","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/2","line":76}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
             {"kind":"contrast","component":"date-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/1","line":85}},
             {"kind":"contrast","component":"description-list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/1","line":46}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/18","line":91}},
@@ -36279,33 +36733,33 @@
             {"kind":"contrast","component":"diff-view","part":null,"state":null,"variant":null,"surface":"color.diff.removed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/7","line":77}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/1","line":49}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
             {"kind":"contrast","component":"field","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/1","line":38}},
             {"kind":"contrast","component":"field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/0","line":37}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/2","line":36}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/3","line":83}},
             {"kind":"contrast","component":"form-builder","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/1","line":27}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
             {"kind":"contrast","component":"list","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/0","line":57}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/0","line":32}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/2","line":34}},
             {"kind":"contrast","component":"menu","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/contrast/0","line":65}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/4","line":64}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/0","line":60}},
             {"kind":"contrast","component":"pagination","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/2","line":48}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
             {"kind":"contrast","component":"progress","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/1","line":43}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/4","line":63}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/1","line":60}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/5","line":67}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/2","line":64}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/1","line":60}},
@@ -36315,7 +36769,7 @@
             {"kind":"contrast","component":"terminal","part":null,"state":null,"variant":null,"surface":"color.terminal.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/contrast/5","line":78}},
             {"kind":"contrast","component":"text-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/1","line":77}},
             {"kind":"contrast","component":"textarea","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/1","line":66}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"kind":"contrast","component":"timeline","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/1","line":47}},
             {"kind":"contrast","component":"tree","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/1","line":57}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}},
@@ -36395,7 +36849,7 @@
             {"kind":"part","component":"text-field","part":"loading.glyph","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/loading.glyph","line":66}},
             {"kind":"part","component":"textarea","part":"count.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/count.text","line":53}},
             {"kind":"part","component":"textarea","part":"help.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/help.text","line":52}},
-            {"kind":"part","component":"time-picker","part":"help.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/help.text","line":39}},
+            {"kind":"part","component":"time-picker","part":"help.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/help.text","line":41}},
             {"kind":"part","component":"timeline","part":"secondary.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/secondary.text","line":27}},
             {"kind":"part","component":"toast","part":"count.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/count.text","line":54}},
             {"kind":"part","component":"tree","part":"secondary.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/secondary.text","line":32}},
@@ -36412,7 +36866,7 @@
             {"kind":"state","component":"toast","part":"fg","state":"stacked","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked/fg","line":60}}
           ],
           "contrast": [
-            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"fg":"color.text.muted","bg":"color.code.bg","label":"line numbers on a context row","state":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/5","line":75}},
             {"fg":"color.text.muted","bg":"color.code.selection-bg","label":"muted text on editor selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}},
             {"fg":"color.text.muted","bg":"color.diff.added.bg","label":"line numbers on an added row","state":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/6","line":76}},
@@ -36427,13 +36881,13 @@
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text and the range separator on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/1","line":85}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/2","line":76}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/1","line":38}},
-            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"muted text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/6","line":10}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"status, hint and help text on the canvas","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"toast stacked fg","state":"stacked","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked","line":60}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame container-inactive fg","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/container-inactive","line":68}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame default fg","state":"default","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/default","line":65}},
-            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
+            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"block glyph on the panel surface","state":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/2","line":34}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"caption","state":null,"source":{"file":"spec/components/table.md","pointer":"/contrast/2","line":67}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"count, chip remove glyph and empty-state text","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/3","line":83}},
@@ -36460,21 +36914,21 @@
             {"fg":"color.text.muted","bg":"color.surface.default","label":"remove glyph at rest","state":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"separator on the panel surface","state":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/1","line":46}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/1","line":46}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/1","line":57}},
@@ -36736,8 +37190,7 @@
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/9","line":13}},
             {"kind":"part","component":"combobox","part":"group.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/group.text","line":59}},
             {"kind":"part","component":"diagnostics","part":"hint.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/hint.text","line":49}},
-            {"kind":"part","component":"file-input","part":"list.size","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/list.size","line":48}},
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
+            {"kind":"part","component":"file-input","part":"list.size","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/list.size","line":48}}
           ],
           "contrast": [
             {"fg":"color.text.subtle","bg":"color.surface.canvas","label":"file sizes on the canvas","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/3","line":66}},
@@ -36763,24 +37216,24 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/control-height",
-            "line": 295
+            "line": 353
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":35}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":42}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":36}},
+            {"kind":"part","component":"button-group","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":40}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":49}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":41}},
             {"kind":"part","component":"disclosure","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":38}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":38}},
-            {"kind":"part","component":"error-state","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":40}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":38}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":46}},
-            {"kind":"part","component":"popover","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":35}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":45}},
+            {"kind":"part","component":"error-state","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":45}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":45}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":53}},
+            {"kind":"part","component":"popover","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":40}},
             {"kind":"part","component":"range","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":36}},
-            {"kind":"part","component":"repeater","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":36}},
+            {"kind":"part","component":"repeater","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":43}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":46}},
             {"kind":"part","component":"tree","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":41}}
           ],
@@ -36802,7 +37255,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/control-padding-x",
-            "line": 307
+            "line": 365
           },
           "provenance": null,
           "aliases": [],
@@ -36827,7 +37280,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/gap",
-            "line": 319
+            "line": 377
           },
           "provenance": null,
           "aliases": [],
@@ -36852,7 +37305,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/icon",
-            "line": 313
+            "line": 371
           },
           "provenance": null,
           "aliases": [],
@@ -36877,7 +37330,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/row-height",
-            "line": 301
+            "line": 359
           },
           "provenance": null,
           "aliases": [],
@@ -36902,24 +37355,24 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/control-height",
-            "line": 263
+            "line": 321
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":36}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":43}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":37}},
+            {"kind":"part","component":"button-group","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":41}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":50}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":42}},
             {"kind":"part","component":"disclosure","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":39}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":39}},
-            {"kind":"part","component":"error-state","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":41}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":39}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":47}},
-            {"kind":"part","component":"popover","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":36}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":46}},
+            {"kind":"part","component":"error-state","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":46}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":46}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":54}},
+            {"kind":"part","component":"popover","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":41}},
             {"kind":"part","component":"range","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":37}},
-            {"kind":"part","component":"repeater","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":37}},
+            {"kind":"part","component":"repeater","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":44}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":47}},
             {"kind":"part","component":"tree","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":42}}
           ],
@@ -36941,7 +37394,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/control-padding-x",
-            "line": 275
+            "line": 333
           },
           "provenance": null,
           "aliases": [],
@@ -36966,7 +37419,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/gap",
-            "line": 287
+            "line": 345
           },
           "provenance": null,
           "aliases": [],
@@ -36991,7 +37444,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/icon",
-            "line": 281
+            "line": 339
           },
           "provenance": null,
           "aliases": [],
@@ -37016,7 +37469,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/row-height",
-            "line": 269
+            "line": 327
           },
           "provenance": null,
           "aliases": [],
@@ -37041,15 +37494,32 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/offset",
-            "line": 347
+            "line": 405
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-offset","line":48}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-focus-offset","line":48}}
+            {"kind":"part","component":"avatar","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-focus-offset","line":32}},
+            {"kind":"part","component":"button-group","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-focus-offset","line":42}},
+            {"kind":"part","component":"chart","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-focus-offset","line":35}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-focus-offset","line":51}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-focus-offset","line":43}},
+            {"kind":"part","component":"description-list","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-focus-offset","line":32}},
+            {"kind":"part","component":"disclosure","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-focus-offset","line":40}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-focus-offset","line":47}},
+            {"kind":"part","component":"error-state","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-focus-offset","line":47}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-focus-offset","line":47}},
+            {"kind":"part","component":"kbd","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-focus-offset","line":31}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-offset","line":55}},
+            {"kind":"part","component":"popover","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-focus-offset","line":42}},
+            {"kind":"part","component":"range","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-focus-offset","line":38}},
+            {"kind":"part","component":"repeater","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-focus-offset","line":45}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-focus-offset","line":48}},
+            {"kind":"part","component":"skeleton","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-focus-offset","line":34}},
+            {"kind":"part","component":"timeline","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-focus-offset","line":34}},
+            {"kind":"part","component":"tree","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-focus-offset","line":43}}
           ],
           "contrast": []
         },
@@ -37069,7 +37539,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/offset-container",
-            "line": 355
+            "line": 413
           },
           "provenance": null,
           "aliases": [],
@@ -37094,7 +37564,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/offset-invalid",
-            "line": 363
+            "line": 421
           },
           "provenance": null,
           "aliases": [],
@@ -37119,7 +37589,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/ring",
-            "line": 329
+            "line": 387
           },
           "provenance": null,
           "aliases": [
@@ -37129,7 +37599,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-focus-ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-ring","line":49}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-focus-ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-ring","line":56}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-focus-ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-focus-ring","line":49}}
           ],
           "contrast": []
@@ -37150,7 +37620,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/ring-container",
-            "line": 338
+            "line": 396
           },
           "provenance": null,
           "aliases": [
@@ -37203,7 +37673,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/letter-spacing/terminal",
-            "line": 250
+            "line": 308
           },
           "provenance": null,
           "aliases": [],
@@ -37228,7 +37698,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/caption",
-            "line": 241
+            "line": 299
           },
           "provenance": null,
           "aliases": [],
@@ -37253,7 +37723,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/code",
-            "line": 211
+            "line": 241
           },
           "provenance": null,
           "aliases": [],
@@ -37262,6 +37732,36 @@
           "uses": [],
           "contrast": []
         },
+        "font.line-height.display": {
+          "path": "font.line-height.display",
+          "group": "font",
+          "css": "40px",
+          "variable": "--font-line-height-display",
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "historical-only",
+            "reason": "Historical fidelity only; preserve all documented limitations and deprecations.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/line-height/display",
+            "line": 253
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [],
+          "uses": [],
+          "contrast": []
+        },
         "font.line-height.h1": {
           "path": "font.line-height.h1",
           "group": "font",
@@ -37278,7 +37778,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/h1",
-            "line": 223
+            "line": 281
           },
           "provenance": null,
           "aliases": [],
@@ -37303,7 +37803,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/h2",
-            "line": 229
+            "line": 287
           },
           "provenance": null,
           "aliases": [],
@@ -37328,7 +37828,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/h3",
-            "line": 235
+            "line": 293
           },
           "provenance": null,
           "aliases": [],
@@ -37353,7 +37853,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/reading",
-            "line": 205
+            "line": 235
           },
           "provenance": null,
           "aliases": [],
@@ -37378,7 +37878,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/terminal",
-            "line": 217
+            "line": 247
           },
           "provenance": null,
           "aliases": [],
@@ -37387,6 +37887,36 @@
           "uses": [],
           "contrast": []
         },
+        "font.line-height.title": {
+          "path": "font.line-height.title",
+          "group": "font",
+          "css": "32px",
+          "variable": "--font-line-height-title",
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "historical-only",
+            "reason": "Historical fidelity only; preserve all documented limitations and deprecations.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/line-height/title",
+            "line": 267
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [],
+          "uses": [],
+          "contrast": []
+        },
         "font.line-height.ui-lg": {
           "path": "font.line-height.ui-lg",
           "group": "font",
@@ -37403,7 +37933,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/ui-lg",
-            "line": 199
+            "line": 229
           },
           "provenance": null,
           "aliases": [],
@@ -37428,14 +37958,14 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/ui-md",
-            "line": 193
+            "line": 223
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-md","line":50}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-md","line":57}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-line-height-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-line-height-ui-md","line":50}}
           ],
           "contrast": []
@@ -37456,14 +37986,14 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/ui-sm",
-            "line": 187
+            "line": 217
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-sm","line":51}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-sm","line":58}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-line-height-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-line-height-ui-sm","line":51}}
           ],
           "contrast": []
@@ -37484,7 +38014,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/caption",
-            "line": 177
+            "line": 207
           },
           "provenance": null,
           "aliases": [],
@@ -37518,6 +38048,36 @@
           "uses": [],
           "contrast": []
         },
+        "font.size.display": {
+          "path": "font.size.display",
+          "group": "font",
+          "css": "32px",
+          "variable": "--font-size-display",
+          "description": "Page heroes and metric figures on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "historical-only",
+            "reason": "Historical fidelity only; preserve all documented limitations and deprecations.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/size/display",
+            "line": 159
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [],
+          "uses": [],
+          "contrast": []
+        },
         "font.size.h1": {
           "path": "font.size.h1",
           "group": "font",
@@ -37534,7 +38094,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/h1",
-            "line": 159
+            "line": 189
           },
           "provenance": null,
           "aliases": [],
@@ -37559,14 +38119,14 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/h2",
-            "line": 165
+            "line": 195
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-font-size-h2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-font-size-h2","line":38}}
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-font-size-h2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-font-size-h2","line":44}}
           ],
           "contrast": []
         },
@@ -37586,7 +38146,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/h3",
-            "line": 171
+            "line": 201
           },
           "provenance": null,
           "aliases": [],
@@ -37645,6 +38205,36 @@
           "uses": [],
           "contrast": []
         },
+        "font.size.title": {
+          "path": "font.size.title",
+          "group": "font",
+          "css": "24px",
+          "variable": "--font-size-title",
+          "description": "Page titles above h1 on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "historical-only",
+            "reason": "Historical fidelity only; preserve all documented limitations and deprecations.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/size/title",
+            "line": 174
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [],
+          "uses": [],
+          "contrast": []
+        },
         "font.size.ui-lg": {
           "path": "font.size.ui-lg",
           "group": "font",
@@ -37693,7 +38283,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-md","line":52}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-md","line":59}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-size-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-size-ui-md","line":52}}
           ],
           "contrast": []
@@ -37721,7 +38311,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-sm","line":53}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-sm","line":60}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-size-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-size-ui-sm","line":53}}
           ],
           "contrast": []
@@ -37749,7 +38339,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-font-weight-bold","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-font-weight-bold","line":32}}
+            {"kind":"part","component":"avatar","part":"dependency.role-font-weight-bold","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-font-weight-bold","line":33}}
           ],
           "contrast": []
         },
@@ -37794,7 +38384,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/size/lg",
-            "line": 482
+            "line": 540
           },
           "provenance": null,
           "aliases": [],
@@ -37819,14 +38409,14 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/size/md",
-            "line": 476
+            "line": 534
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-icon-size-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-icon-size-md","line":54}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-icon-size-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-icon-size-md","line":61}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-icon-size-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-icon-size-md","line":54}}
           ],
           "contrast": []
@@ -37847,7 +38437,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/size/sm",
-            "line": 470
+            "line": 528
           },
           "provenance": null,
           "aliases": [],
@@ -37872,7 +38462,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/stroke",
-            "line": 489
+            "line": 547
           },
           "provenance": null,
           "aliases": [],
@@ -37897,7 +38487,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/layout/app-max",
-            "line": 429
+            "line": 487
           },
           "provenance": null,
           "aliases": [],
@@ -37922,7 +38512,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/layout/content-max",
-            "line": 421
+            "line": 479
           },
           "provenance": null,
           "aliases": [],
@@ -37947,7 +38537,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/layout/measure",
-            "line": 416
+            "line": 474
           },
           "provenance": null,
           "aliases": [],
@@ -37972,7 +38562,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/motion/duration/base",
-            "line": 381
+            "line": 439
           },
           "provenance": null,
           "aliases": [],
@@ -37997,7 +38587,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/motion/duration/fast",
-            "line": 375
+            "line": 433
           },
           "provenance": null,
           "aliases": [],
@@ -38022,7 +38612,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/motion/duration/slow",
-            "line": 387
+            "line": 445
           },
           "provenance": null,
           "aliases": [],
@@ -38054,25 +38644,25 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-radius-none","line":33}},
-            {"kind":"part","component":"button-group","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-radius-none","line":37}},
-            {"kind":"part","component":"chart","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-radius-none","line":38}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-radius-none","line":44}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-radius-none","line":39}},
-            {"kind":"part","component":"description-list","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-radius-none","line":32}},
-            {"kind":"part","component":"disclosure","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-radius-none","line":40}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-radius-none","line":40}},
-            {"kind":"part","component":"error-state","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-radius-none","line":42}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-radius-none","line":40}},
-            {"kind":"part","component":"kbd","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-radius-none","line":31}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-radius-none","line":55}},
-            {"kind":"part","component":"popover","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-radius-none","line":37}},
-            {"kind":"part","component":"range","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-radius-none","line":38}},
-            {"kind":"part","component":"repeater","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-radius-none","line":38}},
+            {"kind":"part","component":"avatar","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-radius-none","line":34}},
+            {"kind":"part","component":"button-group","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-radius-none","line":43}},
+            {"kind":"part","component":"chart","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-radius-none","line":39}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-radius-none","line":52}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-radius-none","line":45}},
+            {"kind":"part","component":"description-list","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-radius-none","line":33}},
+            {"kind":"part","component":"disclosure","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-radius-none","line":41}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-radius-none","line":48}},
+            {"kind":"part","component":"error-state","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-radius-none","line":48}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-radius-none","line":48}},
+            {"kind":"part","component":"kbd","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-radius-none","line":32}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-radius-none","line":62}},
+            {"kind":"part","component":"popover","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-radius-none","line":43}},
+            {"kind":"part","component":"range","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-radius-none","line":39}},
+            {"kind":"part","component":"repeater","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-radius-none","line":46}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-radius-none","line":55}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-radius-none","line":34}},
-            {"kind":"part","component":"timeline","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-radius-none","line":34}},
-            {"kind":"part","component":"tree","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-radius-none","line":43}}
+            {"kind":"part","component":"skeleton","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-radius-none","line":35}},
+            {"kind":"part","component":"timeline","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-radius-none","line":35}},
+            {"kind":"part","component":"tree","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-radius-none","line":44}}
           ],
           "contrast": []
         },
@@ -38092,7 +38682,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/shadow/floating",
-            "line": 398
+            "line": 456
           },
           "provenance": null,
           "aliases": [
@@ -38181,25 +38771,25 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-space-12","line":34}},
-            {"kind":"part","component":"button-group","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-12","line":38}},
-            {"kind":"part","component":"chart","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-12","line":39}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-12","line":45}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-12","line":40}},
-            {"kind":"part","component":"description-list","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-12","line":33}},
-            {"kind":"part","component":"disclosure","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-12","line":41}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-12","line":41}},
-            {"kind":"part","component":"error-state","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-12","line":43}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-12","line":41}},
-            {"kind":"part","component":"kbd","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-12","line":32}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-12","line":56}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-12","line":38}},
-            {"kind":"part","component":"range","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-12","line":39}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-12","line":39}},
+            {"kind":"part","component":"avatar","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-space-12","line":35}},
+            {"kind":"part","component":"button-group","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-12","line":44}},
+            {"kind":"part","component":"chart","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-12","line":40}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-12","line":53}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-12","line":46}},
+            {"kind":"part","component":"description-list","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-12","line":34}},
+            {"kind":"part","component":"disclosure","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-12","line":42}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-12","line":49}},
+            {"kind":"part","component":"error-state","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-12","line":49}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-12","line":49}},
+            {"kind":"part","component":"kbd","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-12","line":33}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-12","line":63}},
+            {"kind":"part","component":"popover","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-12","line":44}},
+            {"kind":"part","component":"range","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-12","line":40}},
+            {"kind":"part","component":"repeater","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-12","line":47}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-12","line":56}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-12","line":35}},
-            {"kind":"part","component":"timeline","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-12","line":35}},
-            {"kind":"part","component":"tree","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-12","line":44}}
+            {"kind":"part","component":"skeleton","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-12","line":36}},
+            {"kind":"part","component":"timeline","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-12","line":36}},
+            {"kind":"part","component":"tree","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-12","line":45}}
           ],
           "contrast": []
         },
@@ -38226,12 +38816,12 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-16","line":46}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-16","line":42}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-16","line":39}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-16","line":54}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-16","line":50}},
+            {"kind":"part","component":"popover","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-16","line":45}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-16","line":57}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-16","line":36}},
-            {"kind":"part","component":"tree","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-16","line":45}}
+            {"kind":"part","component":"skeleton","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-16","line":37}},
+            {"kind":"part","component":"tree","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-16","line":46}}
           ],
           "contrast": []
         },
@@ -38258,25 +38848,9 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-space-2","line":35}},
-            {"kind":"part","component":"button-group","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-2","line":39}},
-            {"kind":"part","component":"chart","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-2","line":47}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-2","line":41}},
-            {"kind":"part","component":"description-list","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-2","line":34}},
-            {"kind":"part","component":"disclosure","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-2","line":42}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-2","line":42}},
-            {"kind":"part","component":"error-state","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-2","line":44}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-2","line":43}},
-            {"kind":"part","component":"kbd","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-2","line":33}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-2","line":57}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"range","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-2","line":58}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-2","line":37}},
-            {"kind":"part","component":"timeline","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-2","line":36}},
-            {"kind":"part","component":"tree","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-2","line":46}}
+            {"kind":"part","component":"kbd","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-2","line":34}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-2","line":64}},
+            {"kind":"part","component":"range","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-2","line":41}}
           ],
           "contrast": []
         },
@@ -38303,9 +38877,9 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-24","line":58}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-24","line":41}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-24","line":59}}
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-24","line":65}},
+            {"kind":"part","component":"repeater","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-24","line":48}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-24","line":58}}
           ],
           "contrast": []
         },
@@ -38359,11 +38933,11 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-4","line":40}},
+            {"kind":"part","component":"button-group","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-4","line":45}},
             {"kind":"part","component":"description-list","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-4","line":35}},
-            {"kind":"part","component":"kbd","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-4","line":34}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-4","line":59}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-4","line":60}},
+            {"kind":"part","component":"kbd","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-4","line":35}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-4","line":66}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-4","line":59}},
             {"kind":"part","component":"timeline","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-4","line":37}}
           ],
           "contrast": []
@@ -38416,20 +38990,20 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-8","line":41}},
+            {"kind":"part","component":"button-group","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-8","line":46}},
             {"kind":"part","component":"chart","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-8","line":41}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-8","line":48}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-8","line":42}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-8","line":55}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-8","line":47}},
             {"kind":"part","component":"description-list","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-8","line":36}},
             {"kind":"part","component":"disclosure","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-8","line":43}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-8","line":43}},
-            {"kind":"part","component":"error-state","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-8","line":45}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-8","line":44}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-8","line":60}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-8","line":41}},
-            {"kind":"part","component":"range","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-8","line":41}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-8","line":42}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-8","line":61}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-8","line":50}},
+            {"kind":"part","component":"error-state","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-8","line":50}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-8","line":51}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-8","line":67}},
+            {"kind":"part","component":"popover","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-8","line":46}},
+            {"kind":"part","component":"range","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-8","line":42}},
+            {"kind":"part","component":"repeater","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-8","line":49}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-8","line":60}},
             {"kind":"part","component":"tree","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-8","line":47}}
           ],
           "contrast": []
@@ -38450,7 +39024,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/canvas",
-            "line": 500
+            "line": 558
           },
           "provenance": null,
           "aliases": [],
@@ -38475,7 +39049,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/dialog",
-            "line": 512
+            "line": 570
           },
           "provenance": null,
           "aliases": [],
@@ -38502,7 +39076,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/drawer",
-            "line": 509
+            "line": 567
           },
           "provenance": null,
           "aliases": [],
@@ -38529,7 +39103,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/popover",
-            "line": 506
+            "line": 564
           },
           "provenance": null,
           "aliases": [],
@@ -38556,7 +39130,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/raised",
-            "line": 503
+            "line": 561
           },
           "provenance": null,
           "aliases": [],
@@ -38581,7 +39155,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/skip-link",
-            "line": 518
+            "line": 576
           },
           "provenance": null,
           "aliases": [],
@@ -38606,7 +39180,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/toast",
-            "line": 515
+            "line": 573
           },
           "provenance": null,
           "aliases": [],
@@ -38648,20 +39222,20 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"part","component":"avatar","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
-            {"kind":"part","component":"button-group","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
+            {"kind":"part","component":"button-group","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-border-width-default","line":36}},
             {"kind":"part","component":"chart","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-default","line":34}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-border-width-default","line":33}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-default","line":41}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-border-width-default","line":38}},
             {"kind":"part","component":"description-list","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-border-width-default","line":30}},
             {"kind":"part","component":"disclosure","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
-            {"kind":"part","component":"error-state","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-default","line":33}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-default","line":34}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-border-width-default","line":39}},
+            {"kind":"part","component":"error-state","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-default","line":38}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-default","line":41}},
             {"kind":"part","component":"kbd","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-border-width-default","line":29}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-default","line":33}},
-            {"kind":"part","component":"popover","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-default","line":40}},
+            {"kind":"part","component":"popover","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-border-width-default","line":37}},
             {"kind":"part","component":"range","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
-            {"kind":"part","component":"repeater","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
+            {"kind":"part","component":"repeater","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-border-width-default","line":39}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-border-width-default","line":32}},
             {"kind":"part","component":"skeleton","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-border-width-default","line":31}},
             {"kind":"part","component":"timeline","part":"dependency.role-border-width-default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-border-width-default","line":30}},
@@ -38694,12 +39268,12 @@
           ],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":35}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":42}},
             {"kind":"part","component":"disclosure","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":33}},
-            {"kind":"part","component":"error-state","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":34}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":35}},
+            {"kind":"part","component":"error-state","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":39}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":42}},
             {"kind":"part","component":"kbd","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":30}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":34}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":41}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":33}},
             {"kind":"part","component":"timeline","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":31}},
             {"kind":"part","component":"tree","part":"dependency.role-border-width-emphasis","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-border-width-emphasis","line":36}}
@@ -38722,7 +39296,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/lg",
-            "line": 459
+            "line": 517
           },
           "provenance": null,
           "aliases": [],
@@ -38747,7 +39321,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/md",
-            "line": 453
+            "line": 511
           },
           "provenance": null,
           "aliases": [],
@@ -38772,7 +39346,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/sm",
-            "line": 447
+            "line": 505
           },
           "provenance": null,
           "aliases": [],
@@ -38797,7 +39371,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/breakpoint/xs",
-            "line": 440
+            "line": 498
           },
           "provenance": null,
           "aliases": [],
@@ -39107,7 +39681,7 @@
             {"kind":"part","component":"file-input","part":"progress.stripe","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/progress.stripe","line":53}},
             {"kind":"part","component":"filterable-table","part":"check.checked-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/check.checked-bg","line":60}},
             {"kind":"part","component":"filterable-table","part":"new.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/new.bg","line":43}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-bg","line":35}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-bg","line":42}},
             {"kind":"part","component":"progress","part":"stripe.a","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/tokens/stripe.a","line":32}},
             {"kind":"part","component":"progress","part":"value.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/tokens/value.bg","line":30}},
             {"kind":"part","component":"radio-group","part":"box.bg-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-checked","line":35}},
@@ -39230,7 +39804,7 @@
             {"kind":"part","component":"button","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.bg-hover","line":33}},
             {"kind":"part","component":"checkbox","part":"box.bg-checked-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg-checked-hover","line":38}},
             {"kind":"part","component":"dialog","part":"primary.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/primary.bg-hover","line":46}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-hover-bg","line":36}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-hover-bg","line":43}},
             {"kind":"part","component":"radio-group","part":"box.bg-checked-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-checked-hover","line":36}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-action-primary-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-action-primary-hover-bg","line":35}},
             {"kind":"part","component":"switch","part":"track.bg-checked-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.bg-checked-hover","line":37}},
@@ -39331,7 +39905,7 @@
             {"kind":"part","component":"dialog","part":"primary.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/primary.text","line":45}},
             {"kind":"part","component":"filterable-table","part":"check.glyph","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/check.glyph","line":61}},
             {"kind":"part","component":"filterable-table","part":"new.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/new.text","line":44}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-text","line":37}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-action-primary-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-action-primary-text","line":44}},
             {"kind":"part","component":"radio-group","part":"box.dot","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.dot","line":37}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-action-primary-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-action-primary-text","line":36}},
             {"kind":"part","component":"settings-panel","part":"apply.busy-glyph","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/apply.busy-glyph","line":50}},
@@ -39415,9 +39989,18 @@
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/12","line":79}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/2","line":69}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/7","line":74}},
+            {"kind":"part","component":"button-group","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"button","part":"secondary.bg","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.bg","line":36}},
+            {"kind":"part","component":"command-palette","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.bg","line":34}},
+            {"kind":"part","component":"compact-dashboard","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg","line":31}},
+            {"kind":"part","component":"editor-search","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.bg","line":32}},
+            {"kind":"part","component":"error-state","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg","line":31}},
+            {"kind":"part","component":"file-browser","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.bg","line":34}},
             {"kind":"part","component":"file-input","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg","line":31}},
             {"kind":"part","component":"icon-button","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.bg","line":24}},
+            {"kind":"part","component":"multiselect","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.bg","line":33}},
+            {"kind":"part","component":"popover","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg","line":30}},
+            {"kind":"part","component":"repeater","part":"button.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.bg","line":32}},
             {"kind":"state","component":"icon-button","part":"bg","state":"default","variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/default/bg","line":39}},
             {"kind":"state","component":"icon-button","part":"bg","state":"focus-visible","variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/focus-visible/bg","line":41}}
           ],
@@ -39466,10 +40049,19 @@
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/5","line":64}},
             {"kind":"contrast","component":"wizard","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/6","line":68}},
             {"kind":"part","component":"admin-form","part":"back.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/back.border","line":62}},
+            {"kind":"part","component":"button-group","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.border","line":31}},
             {"kind":"part","component":"button","part":"secondary.border","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.border","line":38}},
+            {"kind":"part","component":"command-palette","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.border","line":36}},
+            {"kind":"part","component":"compact-dashboard","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.border","line":33}},
             {"kind":"part","component":"dialog","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/button.border","line":42}},
+            {"kind":"part","component":"editor-search","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.border","line":34}},
             {"kind":"part","component":"empty-state","part":"action.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.border","line":29}},
+            {"kind":"part","component":"error-state","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.border","line":33}},
+            {"kind":"part","component":"file-browser","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.border","line":36}},
             {"kind":"part","component":"file-input","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.border","line":33}},
+            {"kind":"part","component":"multiselect","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.border","line":35}},
+            {"kind":"part","component":"popover","part":"control.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.border","line":32}},
+            {"kind":"part","component":"repeater","part":"button.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.border","line":34}},
             {"kind":"part","component":"settings-panel","part":"reset.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/reset.border","line":52}},
             {"kind":"part","component":"wizard","part":"back.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/back.border","line":51}},
             {"kind":"state","component":"file-input","part":"border","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/default/border","line":57}},
@@ -39513,16 +40105,43 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/5","line":72}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
+            {"kind":"part","component":"button-group","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg-hover","line":32}},
             {"kind":"part","component":"button","part":"secondary.bg-hover","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.bg-hover","line":39}},
+            {"kind":"part","component":"command-palette","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.bg-hover","line":37}},
+            {"kind":"part","component":"compact-dashboard","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg-hover","line":34}},
             {"kind":"part","component":"dialog","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/button.bg-hover","line":43}},
+            {"kind":"part","component":"editor-search","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.bg-hover","line":35}},
             {"kind":"part","component":"empty-state","part":"action.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.bg-hover","line":30}},
+            {"kind":"part","component":"error-state","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg-hover","line":34}},
+            {"kind":"part","component":"file-browser","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.bg-hover","line":37}},
             {"kind":"part","component":"file-input","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-hover","line":34}},
+            {"kind":"part","component":"multiselect","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.bg-hover","line":36}},
+            {"kind":"part","component":"popover","part":"control.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg-hover","line":33}},
+            {"kind":"part","component":"repeater","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.bg-hover","line":35}},
             {"kind":"part","component":"wizard","part":"back.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/back.bg-hover","line":52}},
             {"kind":"state","component":"file-input","part":"bg","state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/hover/bg","line":58}}
           ],
           "contrast": [
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"file-input hover fg","state":"hover","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"secondary text on the hover fill","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"fg":"color.interaction.focus.ring","bg":"color.action.secondary.hover-bg","label":"ring on the secondary hover fill","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/5","line":72}}
@@ -39554,8 +40173,17 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"button","part":null,"state":"active","variant":null,"surface":"color.action.secondary.pressed-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}},
+            {"kind":"part","component":"button-group","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg-active","line":33}},
             {"kind":"part","component":"button","part":"secondary.bg-active","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.bg-active","line":40}},
-            {"kind":"part","component":"file-input","part":"button.bg-pressed","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-pressed","line":35}}
+            {"kind":"part","component":"command-palette","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.bg-active","line":38}},
+            {"kind":"part","component":"compact-dashboard","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg-active","line":35}},
+            {"kind":"part","component":"editor-search","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.bg-active","line":36}},
+            {"kind":"part","component":"error-state","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg-active","line":35}},
+            {"kind":"part","component":"file-browser","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.bg-active","line":38}},
+            {"kind":"part","component":"file-input","part":"button.bg-pressed","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-pressed","line":35}},
+            {"kind":"part","component":"multiselect","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.bg-active","line":37}},
+            {"kind":"part","component":"popover","part":"control.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg-active","line":34}},
+            {"kind":"part","component":"repeater","part":"button.bg-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.bg-active","line":36}}
           ],
           "contrast": [
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.pressed-bg","label":"secondary text while pressed","state":"active","source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}}
@@ -39586,18 +40214,45 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
             {"kind":"contrast","component":"button","part":null,"state":"active","variant":null,"surface":"color.action.secondary.pressed-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/1","line":68}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
             {"kind":"contrast","component":"dialog","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/2","line":64}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.action.secondary.hover-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"kind":"contrast","component":"wizard","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/5","line":67}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/21","line":25}},
             {"kind":"part","component":"admin-form","part":"back.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/back.text","line":61}},
+            {"kind":"part","component":"button-group","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.text","line":30}},
             {"kind":"part","component":"button","part":"secondary.text","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.text","line":37}},
+            {"kind":"part","component":"command-palette","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.text","line":35}},
+            {"kind":"part","component":"compact-dashboard","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.text","line":32}},
             {"kind":"part","component":"dialog","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/button.text","line":41}},
+            {"kind":"part","component":"editor-search","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.text","line":33}},
             {"kind":"part","component":"empty-state","part":"action.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.text","line":28}},
+            {"kind":"part","component":"error-state","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.text","line":32}},
+            {"kind":"part","component":"file-browser","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.text","line":35}},
             {"kind":"part","component":"file-input","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.text","line":32}},
+            {"kind":"part","component":"multiselect","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.text","line":34}},
+            {"kind":"part","component":"popover","part":"control.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.text","line":31}},
+            {"kind":"part","component":"repeater","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.text","line":33}},
             {"kind":"part","component":"settings-panel","part":"reset.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/reset.text","line":51}},
             {"kind":"part","component":"wizard","part":"back.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/back.text","line":50}},
             {"kind":"state","component":"file-input","part":"fg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/default/fg","line":57}},
@@ -39607,6 +40262,15 @@
           ],
           "contrast": [
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.bg","label":"secondary text at rest","state":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/1","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/4","line":76}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/4","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/4","line":71}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/4","line":72}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/4","line":88}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/4","line":67}},
+            {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"Button label on hover","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/4","line":70}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"file-input hover fg","state":"hover","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.hover-bg","label":"secondary text on the hover fill","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/3","line":70}},
             {"fg":"color.action.secondary.text","bg":"color.action.secondary.pressed-bg","label":"secondary text while pressed","state":"active","source":{"file":"spec/components/button.md","pointer":"/contrast/6","line":73}},
@@ -39616,6 +40280,15 @@
             {"fg":"color.action.secondary.text","bg":"color.surface.canvas","label":"file-input invalid fg","state":"invalid","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.action.secondary.text","bg":"color.surface.canvas","label":"secondary action text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/21","line":25}},
             {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"action text on the panel surface","state":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"fg":"color.action.secondary.text","bg":"color.surface.overlay","label":"secondary button text on the overlay surface","state":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/2","line":64}}
           ]
         },
@@ -39785,24 +40458,33 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"button","part":null,"state":"active","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/10","line":77}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/42","line":46}},
+            {"kind":"part","component":"button-group","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.border-active","line":34}},
             {"kind":"part","component":"button","part":"secondary.border-active","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.border-active","line":53}},
             {"kind":"part","component":"button","part":"tertiary.border-active","state":null,"variant":"tertiary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/tertiary.border-active","line":54}},
             {"kind":"part","component":"combobox","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.border-focus","line":38}},
+            {"kind":"part","component":"command-palette","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.border-active","line":39}},
+            {"kind":"part","component":"compact-dashboard","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.border-active","line":36}},
             {"kind":"part","component":"data-table","part":"resize.handle-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/resize.handle-hover","line":52}},
             {"kind":"part","component":"date-picker","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-focus","line":34}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-border-active","line":34}},
+            {"kind":"part","component":"editor-search","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.border-active","line":37}},
+            {"kind":"part","component":"error-state","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.border-active","line":36}},
+            {"kind":"part","component":"file-browser","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.border-active","line":39}},
             {"kind":"part","component":"i3-window-frame","part":"window.border-focused","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/window.border-focused","line":51}},
             {"kind":"part","component":"icon-button","part":"root.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.border-active","line":28}},
             {"kind":"part","component":"menu","part":"button.border-open","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/button.border-open","line":41}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-active","line":38}},
+            {"kind":"part","component":"multiselect","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.border-active","line":38}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-active","line":45}},
             {"kind":"part","component":"number-field","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.border-focus","line":33}},
+            {"kind":"part","component":"popover","part":"control.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.border-active","line":35}},
+            {"kind":"part","component":"repeater","part":"button.border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.border-active","line":37}},
             {"kind":"part","component":"search-field","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.border-focus","line":34}},
             {"kind":"part","component":"select","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.border-focus","line":36}},
             {"kind":"part","component":"text-field","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border-focus","line":45}},
             {"kind":"part","component":"textarea","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border-focus","line":36}},
-            {"kind":"part","component":"time-picker","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-focus","line":30}},
+            {"kind":"part","component":"time-picker","part":"root.border-focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-focus","line":31}},
             {"kind":"part","component":"timeline","part":"dependency.role-color-border-active","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-color-border-active","line":32}},
             {"kind":"part","component":"toolbar","part":"toggled.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/toggled.border","line":37}},
             {"kind":"state","component":"combobox","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible/border","line":67}},
@@ -39814,7 +40496,7 @@
             {"kind":"state","component":"select","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible/border","line":57}},
             {"kind":"state","component":"text-field","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible/border","line":70}},
             {"kind":"state","component":"textarea","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible/border","line":59}},
-            {"kind":"state","component":"time-picker","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/border","line":53}},
+            {"kind":"state","component":"time-picker","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/border","line":55}},
             {"kind":"state","component":"toolbar","part":"border","state":"toggled","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/toggled/border","line":45}}
           ],
           "contrast": [
@@ -39822,7 +40504,7 @@
             {"fg":"color.border.active","bg":"color.interaction.pressed.bg","label":"icon-button active border","state":"active","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/active","line":42}},
             {"fg":"color.border.active","bg":"color.interaction.pressed.bg","label":"menu open border","state":"open","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/open","line":60}},
             {"fg":"color.border.active","bg":"color.interaction.pressed.bg","label":"toolbar toggled border","state":"toggled","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/toggled","line":45}},
-            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"active border on input","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/42","line":46}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"combobox focus-visible border","state":"focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"date-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/focus-visible","line":65}},
@@ -39831,7 +40513,7 @@
             {"fg":"color.border.active","bg":"color.surface.input","label":"select focus-visible border","state":"focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible","line":57}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"text-field focus-visible border","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"textarea focus-visible border","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}}
+            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}}
           ]
         },
         "color.border.control": {
@@ -39867,27 +40549,27 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"avatar","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/2","line":49}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
             {"kind":"contrast","component":"chart","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/2","line":54}},
             {"kind":"contrast","component":"checkbox","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/2","line":62}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/1","line":67}},
             {"kind":"contrast","component":"description-list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/2","line":49}},
             {"kind":"contrast","component":"dialog","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/10","line":72}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/8","line":88}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
             {"kind":"contrast","component":"radio-group","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/4","line":63}},
             {"kind":"contrast","component":"skeleton","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/2","line":50}},
             {"kind":"contrast","component":"switch","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/3","line":57}},
@@ -39944,13 +40626,13 @@
             {"kind":"part","component":"terminal","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/tokens/root.border","line":34}},
             {"kind":"part","component":"text-field","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border","line":43}},
             {"kind":"part","component":"textarea","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border","line":34}},
-            {"kind":"part","component":"time-picker","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border","line":28}},
+            {"kind":"part","component":"time-picker","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border","line":29}},
             {"kind":"part","component":"timeline","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/root.border","line":25}},
             {"kind":"part","component":"tooltip","part":"shortcut.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/tokens/shortcut.border","line":32}},
             {"kind":"part","component":"tree","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/root.border","line":30}},
             {"kind":"state","component":"admin-form","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default/border","line":66}},
             {"kind":"state","component":"avatar","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default/border","line":41}},
-            {"kind":"state","component":"button-group","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/border","line":46}},
+            {"kind":"state","component":"button-group","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/border","line":51}},
             {"kind":"state","component":"card","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover/border","line":45}},
             {"kind":"state","component":"chart","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default/border","line":46}},
             {"kind":"state","component":"checkbox","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/default/border","line":51}},
@@ -39962,39 +40644,39 @@
             {"kind":"state","component":"chip","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/hover/border","line":49}},
             {"kind":"state","component":"code-editor","part":"border","state":"default","variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/default/border","line":70}},
             {"kind":"state","component":"combobox","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/default/border","line":65}},
-            {"kind":"state","component":"command-palette","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/border","line":53}},
-            {"kind":"state","component":"compact-dashboard","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"command-palette","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/border","line":60}},
+            {"kind":"state","component":"compact-dashboard","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/border","line":52}},
             {"kind":"state","component":"date-picker","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/default/border","line":59}},
             {"kind":"state","component":"date-picker","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/hover/border","line":63}},
             {"kind":"state","component":"description-list","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/stateTokens/default/border","line":41}},
             {"kind":"state","component":"diagnostics","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/default/border","line":65}},
             {"kind":"state","component":"diff-view","part":"border","state":"default","variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/default/border","line":63}},
             {"kind":"state","component":"disclosure","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default/border","line":48}},
-            {"kind":"state","component":"editor-search","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/border","line":48}},
-            {"kind":"state","component":"error-state","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/border","line":50}},
-            {"kind":"state","component":"file-browser","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/border","line":49}},
+            {"kind":"state","component":"editor-search","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/border","line":55}},
+            {"kind":"state","component":"error-state","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/border","line":55}},
+            {"kind":"state","component":"file-browser","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/border","line":56}},
             {"kind":"state","component":"form-builder","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default/border","line":24}},
-            {"kind":"state","component":"kbd","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/border","line":39}},
+            {"kind":"state","component":"kbd","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/border","line":40}},
             {"kind":"state","component":"list","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/default/border","line":50}},
             {"kind":"state","component":"menu","part":"border","state":"closed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed/border","line":61}},
             {"kind":"state","component":"menu","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/border","line":59}},
-            {"kind":"state","component":"multiselect","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/border","line":65}},
+            {"kind":"state","component":"multiselect","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/border","line":72}},
             {"kind":"state","component":"number-field","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/default/border","line":53}},
             {"kind":"state","component":"number-field","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/hover/border","line":54}},
-            {"kind":"state","component":"popover","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/border","line":46}},
+            {"kind":"state","component":"popover","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/border","line":51}},
             {"kind":"state","component":"progress","part":"border","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/stateTokens/default/border","line":39}},
             {"kind":"state","component":"radio-group","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/default/border","line":49}},
             {"kind":"state","component":"radio-group","part":"border","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/focus-visible/border","line":51}},
             {"kind":"state","component":"radio-group","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/hover/border","line":50}},
             {"kind":"state","component":"radio-group","part":"border","state":"required","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/required/border","line":55}},
-            {"kind":"state","component":"range","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/border","line":46}},
-            {"kind":"state","component":"repeater","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"range","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"repeater","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/border","line":54}},
             {"kind":"state","component":"search-field","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/default/border","line":52}},
             {"kind":"state","component":"search-field","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/hover/border","line":53}},
             {"kind":"state","component":"search-field","part":"border","state":"loading","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/loading/border","line":56}},
             {"kind":"state","component":"search-field","part":"border","state":"no-results","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/no-results/border","line":57}},
             {"kind":"state","component":"search-field","part":"border","state":"placeholder-shown","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/placeholder-shown/border","line":55}},
-            {"kind":"state","component":"segmented-control","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/border","line":66}},
+            {"kind":"state","component":"segmented-control","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/border","line":65}},
             {"kind":"state","component":"select","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/default/border","line":55}},
             {"kind":"state","component":"select","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/hover/border","line":56}},
             {"kind":"state","component":"select","part":"border","state":"required","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/required/border","line":58}},
@@ -40010,8 +40692,8 @@
             {"kind":"state","component":"textarea","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/default/border","line":57}},
             {"kind":"state","component":"textarea","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover/border","line":58}},
             {"kind":"state","component":"textarea","part":"border","state":"placeholder-shown","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown/border","line":60}},
-            {"kind":"state","component":"time-picker","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/border","line":45}},
-            {"kind":"state","component":"time-picker","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/border","line":49}},
+            {"kind":"state","component":"time-picker","part":"border","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/border","line":47}},
+            {"kind":"state","component":"time-picker","part":"border","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/border","line":51}},
             {"kind":"state","component":"timeline","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default/border","line":42}},
             {"kind":"state","component":"tree","part":"border","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/stateTokens/default/border","line":52}}
           ],
@@ -40029,57 +40711,57 @@
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"switch hover border","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"text-field hover border","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"textarea hover border","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.border.control","bg":"color.surface.canvas","label":"progress default border","state":"default","source":{"file":"spec/components/progress.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.border.control","bg":"color.surface.chrome","label":"search box and filter button boundaries on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"avatar default border","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chart default border","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked box edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/checkbox.md","pointer":"/contrast/2","line":62}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked radio edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip and checkbox boundaries","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/8","line":88}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip default border","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip focus-visible border","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control border on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/41","line":45}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control boundaries on the panel surface","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/4","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/2","line":49}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/2","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"description-list default border","state":"default","source":{"file":"spec/components/description-list.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"diagnostics default border","state":"default","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/default","line":65}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"disclosure default border","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"form-builder default border","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"list default border","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu closed border","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu focus-visible border","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"on track edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/switch.md","pointer":"/contrast/3","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"skeleton default border","state":"default","source":{"file":"spec/components/skeleton.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"timeline default border","state":"default","source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"tree default border","state":"default","source":{"file":"spec/components/tree.md","pointer":"/stateTokens/default","line":50}},
@@ -40108,7 +40790,7 @@
             {"fg":"color.border.control","bg":"color.surface.input","label":"text-field placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/placeholder-shown","line":71}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea default border","state":"default","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/default","line":57}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown","line":60}},
-            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
+            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
             {"fg":"color.border.control","bg":"color.surface.overlay","label":"form field boundary on the overlay surface","state":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/10","line":72}},
             {"fg":"color.border.control","bg":"color.surface.raised","label":"shortcut key border on the tooltip","state":null,"source":{"file":"spec/components/tooltip.md","pointer":"/contrast/1","line":44}},
             {"fg":"color.border.control","bg":"color.terminal.bg","label":"terminal default border","state":"default","source":{"file":"spec/components/terminal.md","pointer":"/stateTokens/default","line":67}}
@@ -40143,7 +40825,7 @@
             {"kind":"contrast","component":"card","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/4","line":54}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/5","line":71}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/11","line":91}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/5","line":64}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/6","line":65}},
             {"kind":"contrast","component":"toolbar","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/1","line":48}},
@@ -40170,7 +40852,7 @@
             {"fg":"color.border.default","bg":"color.surface.default","label":"panel edge (decorative)","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/6","line":65}},
             {"fg":"color.border.default","bg":"color.surface.default","label":"panel edge and toolbar separator (decorative)","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/11","line":91}},
             {"fg":"color.border.default","bg":"color.surface.default","label":"resize handle at rest (decorative; keyboard resizing is a header action)","state":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/5","line":71}},
-            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
             {"fg":"color.border.default","bg":"color.surface.input","label":"kbd hint edge (decorative)","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/5","line":64}}
           ]
         },
@@ -40216,32 +40898,32 @@
             {"kind":"contrast","component":"switch","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/8","line":62}},
             {"kind":"contrast","component":"text-field","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"kind":"part","component":"admin-form","part":"disabled.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/disabled.border","line":53}},
-            {"kind":"part","component":"button-group","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-border-disabled","line":32}},
+            {"kind":"part","component":"button-group","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-border-disabled","line":37}},
             {"kind":"part","component":"button","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.border-disabled","line":58}},
             {"kind":"part","component":"checkbox","part":"box.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.border-disabled","line":43}},
             {"kind":"part","component":"chip","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.border-disabled","line":39}},
             {"kind":"part","component":"combobox","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.border-disabled","line":42}},
             {"kind":"part","component":"date-picker","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-disabled","line":38}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-border-disabled","line":35}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-border-disabled","line":35}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-border-disabled","line":40}},
             {"kind":"part","component":"field","part":"control.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.border-disabled","line":29}},
             {"kind":"part","component":"fieldset","part":"field.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.border-disabled","line":28}},
             {"kind":"part","component":"file-input","part":"button.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.border-disabled","line":39}},
             {"kind":"part","component":"icon-button","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.border-disabled","line":36}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-disabled","line":39}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-border-disabled","line":46}},
             {"kind":"part","component":"number-field","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.border-disabled","line":37}},
             {"kind":"part","component":"radio-group","part":"box.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.border-disabled","line":41}},
             {"kind":"part","component":"range","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-color-border-disabled","line":33}},
-            {"kind":"part","component":"repeater","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-border-disabled","line":33}},
+            {"kind":"part","component":"repeater","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-border-disabled","line":40}},
             {"kind":"part","component":"search-field","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.border-disabled","line":36}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-border-disabled","line":37}},
             {"kind":"part","component":"select","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.border-disabled","line":40}},
             {"kind":"part","component":"switch","part":"track.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.border-disabled","line":40}},
             {"kind":"part","component":"text-field","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border-disabled","line":49}},
             {"kind":"part","component":"textarea","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border-disabled","line":40}},
-            {"kind":"part","component":"time-picker","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-disabled","line":33}}
+            {"kind":"part","component":"time-picker","part":"root.border-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-disabled","line":35}}
           ],
           "contrast": [
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/button.md","pointer":"/contrast/18","line":85}},
@@ -40258,7 +40940,7 @@
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/8","line":62}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled boundaries (exempt)","state":"disabled","source":{"file":"spec/components/admin-form.md","pointer":"/contrast/13","line":83}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled chip border (exempt)","state":"disabled","source":{"file":"spec/components/chip.md","pointer":"/contrast/2","line":56}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled field border (exempt)","state":"disabled","source":{"file":"spec/components/fieldset.md","pointer":"/contrast/5","line":39}}
@@ -40319,7 +41001,7 @@
             {"kind":"part","component":"admin-form","part":"footer.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/footer.border","line":57}},
             {"kind":"part","component":"admin-form","part":"review.row-rule","state":null,"variant":"review","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/review.row-rule","line":56}},
             {"kind":"part","component":"combobox","part":"group.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/group.border","line":60}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-border-divider","line":34}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-border-divider","line":39}},
             {"kind":"part","component":"data-table","part":"row.divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/row.divider","line":41}},
             {"kind":"part","component":"date-picker","part":"root.border-readonly","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-readonly","line":40}},
             {"kind":"part","component":"description-list","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-color-border-divider","line":31}},
@@ -40328,7 +41010,7 @@
             {"kind":"part","component":"drawer","part":"body.divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/body.divider","line":34}},
             {"kind":"part","component":"empty-state","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/root.border","line":24}},
             {"kind":"part","component":"fieldset","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/root.border","line":20}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-divider","line":36}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-divider","line":43}},
             {"kind":"part","component":"file-input","part":"list.divider","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/list.divider","line":47}},
             {"kind":"part","component":"filterable-table","part":"row.rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.rule","line":52}},
             {"kind":"part","component":"filterable-table","part":"toolbar.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/toolbar.border","line":34}},
@@ -40408,15 +41090,15 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
             {"kind":"part","component":"combobox","part":"listbox.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/listbox.border","line":52}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-overlay","line":36}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-overlay","line":43}},
             {"kind":"part","component":"date-picker","part":"calendar.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/calendar.border","line":51}},
             {"kind":"part","component":"dialog","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/root.border","line":33}},
             {"kind":"part","component":"drawer","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/root.border","line":29}},
             {"kind":"part","component":"i3-window-frame","part":"floating.border","state":null,"variant":"floating","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/floating.border","line":59}},
             {"kind":"part","component":"menu","part":"surface.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/surface.border","line":44}},
-            {"kind":"part","component":"popover","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-border-overlay","line":33}},
+            {"kind":"part","component":"popover","part":"dependency.role-color-border-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-border-overlay","line":38}},
             {"kind":"part","component":"skip-link","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/tokens/root.border","line":23}},
             {"kind":"part","component":"toast","part":"root.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/root.border","line":30}},
             {"kind":"part","component":"tooltip","part":"popup.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/tokens/popup.border","line":29}},
@@ -40443,7 +41125,7 @@
             {"fg":"color.border.overlay","bg":"color.surface.canvas","label":"toast default border","state":"default","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/default","line":57}},
             {"fg":"color.border.overlay","bg":"color.surface.canvas","label":"toast reduced-motion border","state":"reduced-motion","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/reduced-motion","line":61}},
             {"fg":"color.border.overlay","bg":"color.surface.canvas","label":"toast stacked border","state":"stacked","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked","line":60}},
-            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
             {"fg":"color.border.overlay","bg":"color.surface.overlay","label":"dialog default border","state":"default","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/default","line":55}},
             {"fg":"color.border.overlay","bg":"color.surface.overlay","label":"dialog focus-trapped border","state":"focus-trapped","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped","line":57}},
             {"fg":"color.border.overlay","bg":"color.surface.overlay","label":"dialog open border","state":"open","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/open","line":56}},
@@ -40487,12 +41169,12 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"admin-form","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/contrast/9","line":79}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/0","line":46}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/3","line":62}},
             {"kind":"part","component":"admin-form","part":"step.current-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/step.current-indicator","line":34}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":37}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":37}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":44}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-color-border-selected-indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-color-border-selected-indicator","line":44}},
             {"kind":"part","component":"i3-window-frame","part":"tab.indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/tab.indicator","line":57}},
             {"kind":"part","component":"icon-button","part":"root.border-toggled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.border-toggled","line":32}},
             {"kind":"part","component":"link","part":"root.indicator","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.indicator","line":33}},
@@ -40510,7 +41192,7 @@
           "contrast": [
             {"fg":"color.border.selected-indicator","bg":"color.surface.canvas","label":"link current border","state":"current","source":{"file":"spec/components/link.md","pointer":"/stateTokens/current","line":40}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.canvas","label":"wizard current border","state":"current","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/current","line":58}},
-            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
+            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.default","label":"current-section indicator bar","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/3","line":62}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.default","label":"current-step indicator bar","state":null,"source":{"file":"spec/components/admin-form.md","pointer":"/contrast/9","line":79}},
             {"fg":"color.border.selected-indicator","bg":"color.surface.default","label":"sidebar-nav current border","state":"current","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/current","line":55}},
@@ -40544,14 +41226,14 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
             {"kind":"contrast","component":"tabs","part":null,"state":"selected+container-inactive","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/contrast/0","line":51}},
             {"kind":"part","component":"i3-window-frame","part":"tab.indicator-inactive","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/tab.indicator-inactive","line":58}},
             {"kind":"part","component":"sidebar-nav","part":"link.indicator-inactive","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/link.indicator-inactive","line":42}},
             {"kind":"part","component":"tabs","part":"tab.indicator-inactive","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.indicator-inactive","line":39}}
           ],
           "contrast": [
-            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
+            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
             {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.default","label":"inactive indicator (decorative; the selected tab keeps aria-selected and bright text)","state":"selected+container-inactive","source":{"file":"spec/components/tabs.md","pointer":"/contrast/0","line":51}}
           ]
         },
@@ -40747,7 +41429,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"chart","part":"series.primary","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/series.primary","line":35}}
+            {"kind":"part","component":"chart","part":"series.primary","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/series.primary","line":36}}
           ],
           "contrast": []
         },
@@ -40854,10 +41536,10 @@
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/12","line":89}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/13","line":90}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/14","line":91}},
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/5","line":82}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/6","line":83}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}},
@@ -40894,8 +41576,8 @@
             {"fg":"color.border.control","bg":"color.code.bg","label":"diff-view default border","state":"default","source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.code.bracket-match","bg":"color.code.bg","label":"bracket-match outline on the editor surface","state":"current","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/1","line":78}},
             {"fg":"color.code.bracket-match","bg":"color.code.bg","label":"code-editor current border","state":"current","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/current","line":74}},
-            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
-            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
+            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}},
+            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
             {"fg":"color.code.line-number","bg":"color.code.bg","label":"line numbers on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/45","line":49}},
             {"fg":"color.code.syntax.attribute","bg":"color.code.bg","label":"attribute and escape","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/13","line":90}},
             {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/47","line":51}},
@@ -40914,7 +41596,7 @@
             {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}},
             {"fg":"color.code.syntax.variable","bg":"color.code.bg","label":"code-editor current fg","state":"current","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/current","line":74}},
             {"fg":"color.code.syntax.variable","bg":"color.code.bg","label":"code-editor default fg","state":"default","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/default","line":70}},
-            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
+            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}},
             {"fg":"color.diagnostic.error.stripe","bg":"color.code.bg","label":"error stripe mark","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/11","line":84}},
             {"fg":"color.diagnostic.error.underline","bg":"color.code.bg","label":"error underline","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/3","line":76}},
             {"fg":"color.diagnostic.hint.underline","bg":"color.code.bg","label":"hint underline","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/8","line":81}},
@@ -40928,7 +41610,7 @@
             {"fg":"color.text.default","bg":"color.code.bg","label":"code text","state":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/0","line":73}},
             {"fg":"color.text.default","bg":"color.code.bg","label":"diff-view default fg","state":"default","source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.text.default","bg":"color.code.bg","label":"diff-view focus-visible fg","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/focus-visible","line":66}},
-            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"fg":"color.text.muted","bg":"color.code.bg","label":"line numbers on a context row","state":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/5","line":75}}
           ]
         },
@@ -41002,7 +41684,7 @@
             {"kind":"part","component":"search-field","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/input.caret","line":41}},
             {"kind":"part","component":"text-field","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/input.caret","line":55}},
             {"kind":"part","component":"textarea","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/input.caret","line":47}},
-            {"kind":"part","component":"time-picker","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.caret","line":37}}
+            {"kind":"part","component":"time-picker","part":"input.caret","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.caret","line":39}}
           ],
           "contrast": [
             {"fg":"color.code.caret","bg":"color.code.current-line","label":"caret on current line","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/46","line":50}},
@@ -41112,13 +41794,13 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}},
             {"kind":"part","component":"code-editor","part":"gutter.rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/gutter.rule","line":38}},
             {"kind":"part","component":"diagnostics","part":"code.gutter-rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/code.gutter-rule","line":37}},
             {"kind":"part","component":"diff-view","part":"line-number.rule","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/line-number.rule","line":40}}
           ],
           "contrast": [
-            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}}
+            {"fg":"color.code.gutter-rule","bg":"color.code.bg","label":"gutter rule (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/23","line":100}}
           ]
         },
         "color.code.hued.attribute": {
@@ -41278,9 +41960,7 @@
           ],
           "usedByAliases": [],
           "unmappedPorts": [],
-          "uses": [
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
-          ],
+          "uses": [],
           "contrast": []
         },
         "color.code.hued.operator": {
@@ -41377,7 +42057,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
+            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":140}}
           ],
           "contrast": []
         },
@@ -41410,9 +42090,7 @@
           ],
           "usedByAliases": [],
           "unmappedPorts": [],
-          "uses": [
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
-          ],
+          "uses": [],
           "contrast": []
         },
         "color.code.indent-guide": {
@@ -41440,11 +42118,11 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}},
             {"kind":"part","component":"code-editor","part":"indent.guide","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/indent.guide","line":48}}
           ],
           "contrast": [
-            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}}
+            {"fg":"color.code.indent-guide","bg":"color.code.bg","label":"indent guide (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/21","line":98}}
           ]
         },
         "color.code.line-number": {
@@ -41548,7 +42226,7 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.search-current-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-bg","line":33}}
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-bg","line":40}}
           ],
           "contrast": [
             {"fg":"color.code.search-current-text","bg":"color.code.search-current-bg","label":"current search match text","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}}
@@ -41580,7 +42258,7 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.search-current-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-text","line":34}}
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-current-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-current-text","line":41}}
           ],
           "contrast": [
             {"fg":"color.code.search-current-text","bg":"color.code.search-current-bg","label":"current search match text","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/52","line":56}}
@@ -41611,7 +42289,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-match-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-match-bg","line":35}}
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-code-search-match-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-code-search-match-bg","line":42}}
           ],
           "contrast": []
         },
@@ -41643,6 +42321,8 @@
             {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
             {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
             {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/5","line":78}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}},
             {"kind":"part","component":"code-editor","part":"selection.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/selection.bg","line":44}},
@@ -41650,9 +42330,11 @@
             {"kind":"state","component":"code-editor","part":"bg","state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/selected/bg","line":72}}
           ],
           "contrast": [
-            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
-            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
-            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
+            {"fg":"color.code.syntax.comment","bg":"color.code.selection-bg","label":"comment syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
+            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
+            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
+            {"fg":"color.code.syntax.type","bg":"color.code.selection-bg","label":"type syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
             {"fg":"color.code.syntax.variable","bg":"color.code.selection-bg","label":"code-editor selected fg","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/selected","line":72}},
             {"fg":"color.diagnostic.warning.underline","bg":"color.code.selection-bg","label":"warning underline inside the selected range","state":"selected","source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/5","line":78}},
             {"fg":"color.text.muted","bg":"color.code.selection-bg","label":"muted text on editor selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}}
@@ -41727,13 +42409,15 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/47","line":51}},
             {"kind":"part","component":"code-editor","part":"syntax.comment","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.comment","line":54}}
           ],
           "contrast": [
             {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/47","line":51}},
-            {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}}
+            {"fg":"color.code.syntax.comment","bg":"color.code.bg","label":"comment","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/7","line":84}},
+            {"fg":"color.code.syntax.comment","bg":"color.code.selection-bg","label":"comment syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}}
           ]
         },
         "color.code.syntax.constant": {
@@ -41980,7 +42664,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/5","line":82}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/49","line":53}},
             {"kind":"part","component":"code-editor","part":"syntax.keyword","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.keyword","line":52}}
@@ -41988,7 +42672,7 @@
           "contrast": [
             {"fg":"color.code.syntax.keyword","bg":"color.code.bg","label":"keyword on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/49","line":53}},
             {"fg":"color.code.syntax.keyword","bg":"color.code.bg","label":"keyword","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/5","line":82}},
-            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}}
+            {"fg":"color.code.syntax.keyword","bg":"color.code.selection-bg","label":"keyword and tag text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}}
           ]
         },
         "color.code.syntax.number": {
@@ -42098,13 +42782,13 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/11","line":88}},
             {"kind":"part","component":"code-editor","part":"syntax.property","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.property","line":62}}
           ],
           "contrast": [
             {"fg":"color.code.syntax.property","bg":"color.code.bg","label":"property, heading and invalid text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/11","line":88}},
-            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}}
+            {"fg":"color.code.syntax.property","bg":"color.code.selection-bg","label":"property, heading and invalid text inside the selection (D-029)","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/19","line":96}}
           ]
         },
         "color.code.syntax.punctuation": {
@@ -42175,7 +42859,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/6","line":83}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/48","line":52}},
             {"kind":"part","component":"code-editor","part":"syntax.string","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.string","line":53}}
@@ -42183,7 +42867,7 @@
           "contrast": [
             {"fg":"color.code.syntax.string","bg":"color.code.bg","label":"string on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/48","line":52}},
             {"fg":"color.code.syntax.string","bg":"color.code.bg","label":"string","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/6","line":83}},
-            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/15","line":92}}
+            {"fg":"color.code.syntax.string","bg":"color.code.selection-bg","label":"muted string text inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/17","line":94}}
           ]
         },
         "color.code.syntax.tag": {
@@ -42255,13 +42939,15 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
+            {"kind":"contrast","component":"code-editor","part":null,"state":"selected","variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}},
             {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/50","line":54}},
             {"kind":"part","component":"code-editor","part":"syntax.type","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/syntax.type","line":59}}
           ],
           "contrast": [
             {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type on code background","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/50","line":54}},
-            {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}}
+            {"fg":"color.code.syntax.type","bg":"color.code.bg","label":"type","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/10","line":87}},
+            {"fg":"color.code.syntax.type","bg":"color.code.selection-bg","label":"type syntax decoration inside the selection","state":"selected","source":{"file":"spec/components/code-editor.md","pointer":"/contrast/16","line":93}}
           ]
         },
         "color.code.syntax.variable": {
@@ -42327,11 +43013,11 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}},
             {"kind":"part","component":"code-editor","part":"whitespace.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/whitespace.text","line":49}}
           ],
           "contrast": [
-            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}}
+            {"fg":"color.code.whitespace","bg":"color.code.bg","label":"rendered whitespace (decorative)","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/22","line":99}}
           ]
         },
         "color.diagnostic.error.bg": {
@@ -43140,7 +43826,7 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/3","line":38}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
             {"kind":"contrast","component":"menu","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"sidebar-nav","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/1","line":62}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/62","line":66}},
@@ -43153,7 +43839,7 @@
           ],
           "contrast": [
             {"fg":"color.icon.decorative","bg":"color.surface.canvas","label":"decorative icon on canvas (graphic)","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/62","line":66}},
-            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
+            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
             {"fg":"color.icon.decorative","bg":"color.surface.default","label":"glyph (decorative)","state":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/3","line":38}},
             {"fg":"color.icon.decorative","bg":"color.surface.default","label":"group chevron (decorative; aria-expanded carries the state)","state":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/1","line":62}},
             {"fg":"color.icon.decorative","bg":"color.surface.raised","label":"submenu chevron (decorative; aria-haspopup carries the meaning)","state":null,"source":{"file":"spec/components/menu.md","pointer":"/contrast/3","line":68}}
@@ -43257,33 +43943,33 @@
             {"kind":"contrast","component":"text-field","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"kind":"part","component":"admin-form","part":"disabled.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/disabled.bg","line":51}},
-            {"kind":"part","component":"button-group","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":33}},
+            {"kind":"part","component":"button-group","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":38}},
             {"kind":"part","component":"button","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.bg-disabled","line":57}},
             {"kind":"part","component":"checkbox","part":"box.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg-disabled","line":42}},
             {"kind":"part","component":"chip","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.bg-disabled","line":40}},
             {"kind":"part","component":"combobox","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.bg-disabled","line":43}},
             {"kind":"part","component":"date-picker","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.bg-disabled","line":39}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":36}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":36}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":41}},
             {"kind":"part","component":"field","part":"control.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.bg-disabled","line":28}},
             {"kind":"part","component":"fieldset","part":"field.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.bg-disabled","line":27}},
             {"kind":"part","component":"file-input","part":"button.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.bg-disabled","line":40}},
             {"kind":"part","component":"icon-button","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.bg-disabled","line":35}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":40}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":47}},
             {"kind":"part","component":"number-field","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.bg-disabled","line":38}},
             {"kind":"part","component":"radio-group","part":"box.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-disabled","line":40}},
             {"kind":"part","component":"range","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":34}},
-            {"kind":"part","component":"repeater","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":34}},
+            {"kind":"part","component":"repeater","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":41}},
             {"kind":"part","component":"search-field","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.bg-disabled","line":37}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-interaction-disabled-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-interaction-disabled-bg","line":38}},
             {"kind":"part","component":"select","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.bg-disabled","line":41}},
             {"kind":"part","component":"switch","part":"track.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.bg-disabled","line":39}},
             {"kind":"part","component":"text-field","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.bg-disabled","line":50}},
             {"kind":"part","component":"textarea","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.bg-disabled","line":41}},
-            {"kind":"part","component":"time-picker","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-disabled","line":34}}
+            {"kind":"part","component":"time-picker","part":"root.bg-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-disabled","line":36}}
           ],
           "contrast": [
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/button.md","pointer":"/contrast/18","line":85}},
@@ -43300,7 +43986,7 @@
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/8","line":62}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/3","line":68}},
-            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":72}},
+            {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled border (exempt)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/3","line":79}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled boundaries (exempt)","state":"disabled","source":{"file":"spec/components/admin-form.md","pointer":"/contrast/13","line":83}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled chip border (exempt)","state":"disabled","source":{"file":"spec/components/chip.md","pointer":"/contrast/2","line":56}},
             {"fg":"color.border.disabled","bg":"color.interaction.disabled.bg","label":"disabled field border (exempt)","state":"disabled","source":{"file":"spec/components/fieldset.md","pointer":"/contrast/5","line":39}},
@@ -43320,7 +44006,7 @@
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/select.md","pointer":"/contrast/6","line":68}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/2","line":78}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
-            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
+            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled thumb (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/6","line":60}}
           ]
         },
@@ -43390,9 +44076,13 @@
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.diff.added.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/16","line":86}},
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.diff.modified.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/18","line":88}},
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.diff.removed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/17","line":87}},
+            {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/3","line":51}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
-            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
+            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"kind":"contrast","component":"pagination","part":null,"state":"current","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
+            {"kind":"contrast","component":"sidebar-nav","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
             {"kind":"contrast","component":"skip-link","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/contrast/0","line":29}},
             {"kind":"contrast","component":"table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/37","line":41}},
@@ -43400,54 +44090,72 @@
             {"kind":"part","component":"alert","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/tokens/close.ring","line":51}},
             {"kind":"part","component":"avatar","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/control.focus","line":30}},
             {"kind":"part","component":"breadcrumbs","part":"link.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/link.ring","line":33}},
-            {"kind":"part","component":"button-group","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.focus","line":30}},
+            {"kind":"part","component":"button-group","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.focus","line":35}},
             {"kind":"part","component":"button","part":"secondary.ring","state":null,"variant":"secondary","surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/secondary.ring","line":41}},
+            {"kind":"part","component":"card","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.ring","line":42}},
             {"kind":"part","component":"chart","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/control.focus","line":30}},
             {"kind":"part","component":"checkbox","part":"box.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.ring","line":36}},
             {"kind":"part","component":"chip","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.ring","line":37}},
+            {"kind":"part","component":"chip","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.ring","line":43}},
+            {"kind":"part","component":"combobox","part":"option.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.ring-selected","line":58}},
             {"kind":"part","component":"combobox","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.ring","line":39}},
+            {"kind":"part","component":"command-palette","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/button.focus","line":40}},
             {"kind":"part","component":"command-palette","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/control.focus","line":33}},
-            {"kind":"part","component":"compact-dashboard","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.focus","line":32}},
+            {"kind":"part","component":"compact-dashboard","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.focus","line":37}},
             {"kind":"part","component":"data-table","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/row.ring","line":43}},
+            {"kind":"part","component":"data-table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"date-picker","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"description-list","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/control.focus","line":29}},
+            {"kind":"part","component":"diagnostics","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.ring-selected","line":59}},
             {"kind":"part","component":"diagnostics","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.ring","line":56}},
             {"kind":"part","component":"dialog","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/close.ring","line":40}},
+            {"kind":"part","component":"diff-view","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.ring-selected","line":61}},
             {"kind":"part","component":"diff-view","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.ring","line":58}},
             {"kind":"part","component":"disclosure","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"drawer","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/close.ring","line":40}},
+            {"kind":"part","component":"editor-search","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/button.focus","line":38}},
             {"kind":"part","component":"editor-search","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"empty-state","part":"action.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/tokens/action.ring","line":31}},
-            {"kind":"part","component":"error-state","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.focus","line":32}},
+            {"kind":"part","component":"error-state","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.focus","line":37}},
+            {"kind":"part","component":"file-browser","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/button.focus","line":40}},
             {"kind":"part","component":"file-browser","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/control.focus","line":33}},
             {"kind":"part","component":"file-input","part":"button.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.ring","line":36}},
             {"kind":"part","component":"filterable-table","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.ring","line":54}},
+            {"kind":"part","component":"i3-window-frame","part":"workspace.ring-on-selection","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.ring-on-selection","line":42}},
             {"kind":"part","component":"i3-window-frame","part":"workspace.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.ring","line":41}},
+            {"kind":"part","component":"icon-button","part":"root.ring-toggled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.ring-toggled","line":33}},
             {"kind":"part","component":"icon-button","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.ring","line":29}},
             {"kind":"part","component":"kbd","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/control.focus","line":28}},
             {"kind":"part","component":"link","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.ring","line":30}},
             {"kind":"part","component":"list","part":"row.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/row.ring","line":40}},
+            {"kind":"part","component":"list","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/selected.ring","line":44}},
+            {"kind":"part","component":"menu","part":"active.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/active.ring","line":51}},
             {"kind":"part","component":"menu","part":"button.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/button.ring","line":42}},
+            {"kind":"part","component":"multiselect","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/button.focus","line":39}},
             {"kind":"part","component":"multiselect","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/control.focus","line":32}},
             {"kind":"part","component":"number-field","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.ring","line":34}},
+            {"kind":"part","component":"pagination","part":"current.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/current.ring","line":36}},
             {"kind":"part","component":"pagination","part":"link.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/link.ring","line":32}},
-            {"kind":"part","component":"popover","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.focus","line":31}},
+            {"kind":"part","component":"popover","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.focus","line":36}},
             {"kind":"part","component":"radio-group","part":"box.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.ring","line":34}},
             {"kind":"part","component":"range","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/control.focus","line":30}},
+            {"kind":"part","component":"repeater","part":"button.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/button.focus","line":38}},
             {"kind":"part","component":"repeater","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"search-field","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"segmented-control","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/control.focus","line":31}},
             {"kind":"part","component":"select","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.ring","line":37}},
             {"kind":"part","component":"settings-panel","part":"control.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/control.ring","line":42}},
             {"kind":"part","component":"sidebar-nav","part":"link.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/link.ring","line":40}},
+            {"kind":"part","component":"sidebar-nav","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"skeleton","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/control.focus","line":30}},
             {"kind":"part","component":"skip-link","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/tokens/root.ring","line":24}},
             {"kind":"part","component":"switch","part":"track.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.ring","line":35}},
+            {"kind":"part","component":"table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/tokens/selected.ring","line":49}},
             {"kind":"part","component":"table","part":"sort.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/tokens/sort.ring","line":43}},
             {"kind":"part","component":"tabs","part":"tab.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.ring","line":40}},
             {"kind":"part","component":"text-field","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.ring","line":46}},
             {"kind":"part","component":"textarea","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.ring","line":37}},
-            {"kind":"part","component":"time-picker","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.ring","line":31}},
+            {"kind":"part","component":"time-picker","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.ring","line":32}},
             {"kind":"part","component":"timeline","part":"control.focus","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/control.focus","line":29}},
             {"kind":"part","component":"toast","part":"close.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/close.ring","line":53}},
             {"kind":"part","component":"toolbar","part":"button.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.ring","line":34}},
@@ -43456,20 +44164,28 @@
             {"kind":"part","component":"wizard","part":"step.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.ring","line":32}},
             {"kind":"state","component":"alert","part":"outline","state":"focus-visible","variant":null,"surface":"color.status.info.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/stateTokens/focus-visible/outline","line":55}},
             {"kind":"state","component":"breadcrumbs","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/focus-visible/outline","line":41}},
+            {"kind":"state","component":"card","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible/outline","line":48}},
             {"kind":"state","component":"checkbox","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/focus-visible/outline","line":53}},
             {"kind":"state","component":"chip","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible/outline","line":50}},
+            {"kind":"state","component":"chip","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible/outline","line":52}},
             {"kind":"state","component":"combobox","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible/outline","line":67}},
+            {"kind":"state","component":"combobox","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected/outline","line":69}},
             {"kind":"state","component":"data-table","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible/outline","line":58}},
+            {"kind":"state","component":"data-table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":60}},
             {"kind":"state","component":"date-picker","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/focus-visible/outline","line":68}},
             {"kind":"state","component":"diagnostics","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible/outline","line":67}},
+            {"kind":"state","component":"diagnostics","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible/outline","line":69}},
             {"kind":"state","component":"dialog","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
             {"kind":"state","component":"diff-view","part":"outline","state":"focus-visible","variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/focus-visible/outline","line":66}},
             {"kind":"state","component":"file-input","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
             {"kind":"state","component":"filterable-table","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible/outline","line":76}},
             {"kind":"state","component":"icon-button","part":"outline","state":"focus-visible","variant":null,"surface":"color.action.secondary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/focus-visible/outline","line":41}},
+            {"kind":"state","component":"icon-button","part":"outline","state":"toggled+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible/outline","line":44}},
             {"kind":"state","component":"link","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/focus-visible/outline","line":38}},
             {"kind":"state","component":"list","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible/outline","line":52}},
+            {"kind":"state","component":"list","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible/outline","line":54}},
             {"kind":"state","component":"menu","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
+            {"kind":"state","component":"menu","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected/outline","line":63}},
             {"kind":"state","component":"number-field","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/focus-visible/outline","line":55}},
             {"kind":"state","component":"pagination","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible/outline","line":43}},
             {"kind":"state","component":"radio-group","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/focus-visible/outline","line":51}},
@@ -43479,11 +44195,12 @@
             {"kind":"state","component":"sidebar-nav","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/focus-visible/outline","line":54}},
             {"kind":"state","component":"skip-link","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/skip-link.md","pointer":"/stateTokens/focus-visible/outline","line":27}},
             {"kind":"state","component":"switch","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/stateTokens/focus-visible/outline","line":50}},
+            {"kind":"state","component":"table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":59}},
             {"kind":"state","component":"tabs","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/stateTokens/focus-visible/outline","line":46}},
             {"kind":"state","component":"tabs","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/stateTokens/selected+focus-visible/outline","line":48}},
             {"kind":"state","component":"text-field","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible/outline","line":70}},
             {"kind":"state","component":"textarea","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
-            {"kind":"state","component":"time-picker","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/outline","line":54}},
+            {"kind":"state","component":"time-picker","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/outline","line":56}},
             {"kind":"state","component":"toast","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/focus-visible/outline","line":59}},
             {"kind":"state","component":"toolbar","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible/outline","line":44}},
             {"kind":"state","component":"tooltip","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/stateTokens/focus-visible/outline","line":40}},
@@ -43496,7 +44213,20 @@
             {"fg":"color.interaction.focus.ring","bg":"color.diff.added.bg","label":"ring on an added row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/16","line":86}},
             {"fg":"color.interaction.focus.ring","bg":"color.diff.modified.bg","label":"ring on a modified row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/18","line":88}},
             {"fg":"color.interaction.focus.ring","bg":"color.diff.removed.bg","label":"ring on a removed row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/17","line":87}},
-            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg-strong","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected workspace when focused","state":"selected","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.status.info.tint","label":"alert focus-visible outline","state":"focus-visible","source":{"file":"spec/components/alert.md","pointer":"/stateTokens/focus-visible","line":55}},
             {"fg":"color.interaction.focus.ring","bg":"color.status.info.tint","label":"ring on the info tint","state":"focus-visible","source":{"file":"spec/components/alert.md","pointer":"/contrast/14","line":71}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"file-input focus-visible outline","state":"focus-visible","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible","line":59}},
@@ -43505,7 +44235,7 @@
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"toast focus-visible outline","state":"focus-visible","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"tooltip focus-visible outline","state":"focus-visible","source":{"file":"spec/components/tooltip.md","pointer":"/stateTokens/focus-visible","line":40}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"wizard focus-visible outline","state":"focus-visible","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/focus-visible","line":57}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"toolbar focus-visible outline","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.default","label":"breadcrumbs focus-visible outline","state":"focus-visible","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/focus-visible","line":41}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.default","label":"chip focus-visible outline","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
@@ -43531,7 +44261,7 @@
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"switch focus-visible outline","state":"focus-visible","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/focus-visible","line":50}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"text-field focus-visible outline","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"textarea focus-visible outline","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.overlay","label":"dialog focus-visible outline","state":"focus-visible","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.overlay","label":"ring on the overlay surface","state":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/3","line":51}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.raised","label":"ring on the raised surface","state":"focus-visible","source":{"file":"spec/components/skip-link.md","pointer":"/contrast/0","line":29}},
@@ -43566,72 +44296,50 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"dialog","part":null,"state":"focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/contrast/7","line":69}},
-            {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
-            {"kind":"contrast","component":"pagination","part":null,"state":"current","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
-            {"kind":"contrast","component":"sidebar-nav","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"kind":"contrast","component":"wizard","part":null,"state":"focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/8","line":70}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/39","line":43}},
             {"kind":"part","component":"button","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"card","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/root.ring","line":36}},
-            {"kind":"part","component":"card","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.ring","line":42}},
             {"kind":"part","component":"checkbox","part":"box.ring-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.ring-checked","line":40}},
-            {"kind":"part","component":"chip","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.ring","line":43}},
             {"kind":"part","component":"code-editor","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/tokens/root.ring","line":36}},
-            {"kind":"part","component":"combobox","part":"option.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.ring-selected","line":58}},
             {"kind":"part","component":"combobox","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.ring-invalid","line":40}},
-            {"kind":"part","component":"data-table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"date-picker","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.ring-invalid","line":36}},
-            {"kind":"part","component":"diagnostics","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.ring-selected","line":59}},
             {"kind":"part","component":"dialog","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/root.ring","line":34}},
-            {"kind":"part","component":"diff-view","part":"row.ring-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.ring-selected","line":61}},
             {"kind":"part","component":"drawer","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/root.ring","line":30}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":36}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":43}},
             {"kind":"part","component":"filterable-table","part":"row.ring-on-selection","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.ring-on-selection","line":57}},
             {"kind":"part","component":"i3-window-frame","part":"window.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/window.ring","line":52}},
-            {"kind":"part","component":"i3-window-frame","part":"workspace.ring-on-selection","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.ring-on-selection","line":42}},
-            {"kind":"part","component":"icon-button","part":"root.ring-toggled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.ring-toggled","line":33}},
-            {"kind":"part","component":"list","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/selected.ring","line":44}},
-            {"kind":"part","component":"menu","part":"active.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/active.ring","line":51}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":41}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":48}},
             {"kind":"part","component":"number-field","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.ring-invalid","line":35}},
-            {"kind":"part","component":"pagination","part":"current.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/current.ring","line":36}},
             {"kind":"part","component":"radio-group","part":"box.ring-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.ring-checked","line":38}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-interaction-focus-ring-container","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-interaction-focus-ring-container","line":39}},
             {"kind":"part","component":"select","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/root.ring-invalid","line":38}},
-            {"kind":"part","component":"sidebar-nav","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/tokens/selected.ring","line":46}},
             {"kind":"part","component":"switch","part":"track.ring-checked","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.ring-checked","line":38}},
-            {"kind":"part","component":"table","part":"selected.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/tokens/selected.ring","line":49}},
             {"kind":"part","component":"terminal","part":"root.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/tokens/root.ring","line":35}},
             {"kind":"part","component":"text-field","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.ring-invalid","line":47}},
             {"kind":"part","component":"textarea","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.ring-invalid","line":38}},
+            {"kind":"part","component":"time-picker","part":"root.ring-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.ring-invalid","line":33}},
             {"kind":"part","component":"wizard","part":"next.ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/next.ring","line":49}},
+            {"kind":"prose","component":"diagnostics","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"body","line":142}},
             {"kind":"state","component":"button","part":"outline","state":"focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/stateTokens/focus-visible/outline","line":63}},
             {"kind":"state","component":"card","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible/outline","line":46}},
-            {"kind":"state","component":"card","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible/outline","line":48}},
             {"kind":"state","component":"checkbox","part":"outline","state":"checked+focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/checked+focus-visible/outline","line":56}},
-            {"kind":"state","component":"chip","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible/outline","line":52}},
             {"kind":"state","component":"code-editor","part":"outline","state":"focus-visible","variant":null,"surface":"color.code.current-line","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/focus-visible/outline","line":71}},
             {"kind":"state","component":"combobox","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":71}},
-            {"kind":"state","component":"combobox","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected/outline","line":69}},
-            {"kind":"state","component":"data-table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":60}},
             {"kind":"state","component":"date-picker","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":77}},
-            {"kind":"state","component":"diagnostics","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible/outline","line":69}},
             {"kind":"state","component":"dialog","part":"outline","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped/outline","line":57}},
             {"kind":"state","component":"drawer","part":"outline","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/focus-trapped/outline","line":45}},
             {"kind":"state","component":"i3-window-frame","part":"outline","state":"focus-visible","variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible/outline","line":66}},
-            {"kind":"state","component":"icon-button","part":"outline","state":"toggled+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible/outline","line":44}},
-            {"kind":"state","component":"list","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible/outline","line":54}},
-            {"kind":"state","component":"menu","part":"outline","state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected/outline","line":63}},
             {"kind":"state","component":"number-field","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":57}},
             {"kind":"state","component":"radio-group","part":"outline","state":"checked+focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/stateTokens/checked+focus-visible/outline","line":53}},
             {"kind":"state","component":"select","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":60}},
             {"kind":"state","component":"switch","part":"outline","state":"checked+focus-visible","variant":null,"surface":"color.action.primary.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/stateTokens/checked+focus-visible/outline","line":52}},
-            {"kind":"state","component":"table","part":"outline","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible/outline","line":59}},
             {"kind":"state","component":"terminal","part":"outline","state":"focus-visible","variant":null,"surface":"color.terminal.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/stateTokens/focus-visible/outline","line":68}},
             {"kind":"state","component":"text-field","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":73}},
-            {"kind":"state","component":"textarea","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":62}}
+            {"kind":"state","component":"textarea","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":62}},
+            {"kind":"state","component":"time-picker","part":"outline","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/outline","line":65}}
           ],
           "contrast": [
             {"fg":"color.interaction.focus.ring-container","bg":"color.action.primary.bg","label":"button focus-visible outline","state":"focus-visible","source":{"file":"spec/components/button.md","pointer":"/stateTokens/focus-visible","line":63}},
@@ -43641,21 +44349,9 @@
             {"fg":"color.interaction.focus.ring-container","bg":"color.action.primary.bg","label":"ring on the primary fill","state":"focus-visible","source":{"file":"spec/components/dialog.md","pointer":"/contrast/7","line":69}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.action.primary.bg","label":"switch checked+focus-visible outline","state":"checked+focus-visible","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/checked+focus-visible","line":52}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.code.current-line","label":"code-editor focus-visible outline","state":"focus-visible","source":{"file":"spec/components/code-editor.md","pointer":"/stateTokens/focus-visible","line":71}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"container focus ring on selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/39","line":43}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected row","state":"selected","source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible outline","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.default","label":"card focus-visible outline","state":"focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible","line":46}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"combobox invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible","line":71}},
@@ -43664,6 +44360,7 @@
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"select invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/invalid+focus-visible","line":60}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"text-field invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"textarea invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"time-picker invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.overlay","label":"dialog focus-trapped outline","state":"focus-trapped","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped","line":57}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.overlay","label":"drawer focus-trapped outline","state":"focus-trapped","source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/focus-trapped","line":45}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.terminal.bg","label":"terminal focus-visible outline","state":"focus-visible","source":{"file":"spec/components/terminal.md","pointer":"/stateTokens/focus-visible","line":68}}
@@ -43698,9 +44395,11 @@
             {"kind":"contrast","component":"card","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/3","line":53}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/19","line":92}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/20","line":93}},
+            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
             {"kind":"contrast","component":"list","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"switch","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
             {"kind":"part","component":"breadcrumbs","part":"ellipsis.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/ellipsis.bg-hover","line":37}},
+            {"kind":"part","component":"breadcrumbs","part":"link.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/link.bg-hover","line":32}},
             {"kind":"part","component":"card","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/root.bg-hover","line":34}},
             {"kind":"part","component":"checkbox","part":"box.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg-hover","line":35}},
             {"kind":"part","component":"chip","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.bg-hover","line":35}},
@@ -43711,9 +44410,10 @@
             {"kind":"part","component":"diff-view","part":"row.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/row.bg-hover","line":57}},
             {"kind":"part","component":"filterable-table","part":"row.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/row.bg-hover","line":53}},
             {"kind":"part","component":"i3-window-frame","part":"workspace.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/workspace.bg-hover","line":40}},
+            {"kind":"part","component":"link","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.bg-hover","line":29}},
             {"kind":"part","component":"list","part":"row.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/row.bg-hover","line":38}},
             {"kind":"part","component":"menu","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/button.bg-hover","line":39}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-hover-bg","line":42}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-interaction-hover-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-interaction-hover-bg","line":49}},
             {"kind":"part","component":"number-field","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.bg-hover","line":32}},
             {"kind":"part","component":"pagination","part":"link.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/link.bg-hover","line":30}},
             {"kind":"part","component":"radio-group","part":"box.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg-hover","line":33}},
@@ -43727,9 +44427,11 @@
             {"kind":"part","component":"tabs","part":"tab.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.bg-hover","line":36}},
             {"kind":"part","component":"text-field","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.bg-hover","line":44}},
             {"kind":"part","component":"textarea","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.bg-hover","line":35}},
-            {"kind":"part","component":"time-picker","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-hover","line":29}},
+            {"kind":"part","component":"time-picker","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg-hover","line":30}},
+            {"kind":"part","component":"toast","part":"action.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/action.bg-hover","line":49}},
             {"kind":"part","component":"toolbar","part":"button.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.bg-hover","line":32}},
             {"kind":"part","component":"wizard","part":"step.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.bg-hover","line":31}},
+            {"kind":"state","component":"breadcrumbs","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/bg","line":40}},
             {"kind":"state","component":"card","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover/bg","line":45}},
             {"kind":"state","component":"checkbox","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/hover/bg","line":52}},
             {"kind":"state","component":"chip","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/hover/bg","line":49}},
@@ -43738,6 +44440,7 @@
             {"kind":"state","component":"diagnostics","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/hover/bg","line":66}},
             {"kind":"state","component":"diff-view","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/stateTokens/hover/bg","line":64}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/hover/bg","line":75}},
+            {"kind":"state","component":"link","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/bg","line":37}},
             {"kind":"state","component":"list","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/hover/bg","line":51}},
             {"kind":"state","component":"number-field","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/hover/bg","line":54}},
             {"kind":"state","component":"pagination","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/hover/bg","line":42}},
@@ -43750,7 +44453,8 @@
             {"kind":"state","component":"tabs","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/stateTokens/hover/bg","line":45}},
             {"kind":"state","component":"text-field","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover/bg","line":69}},
             {"kind":"state","component":"textarea","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover/bg","line":58}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/bg","line":48}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/bg","line":50}},
+            {"kind":"state","component":"toast","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/bg","line":58}},
             {"kind":"state","component":"toolbar","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/hover/bg","line":43}},
             {"kind":"state","component":"wizard","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/hover/bg","line":56}}
           ],
@@ -43766,8 +44470,9 @@
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"switch hover border","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"text-field hover border","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"textarea hover border","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.border.control","bg":"color.interaction.hover.bg","label":"time-picker hover border","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.diagnostic.error.text","bg":"color.interaction.hover.bg","label":"error glyph on hover","state":"hover","source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/20","line":93}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
             {"fg":"color.text.bright","bg":"color.interaction.hover.bg","label":"title on the hover fill","state":"hover","source":{"file":"spec/components/card.md","pointer":"/contrast/2","line":52}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"card hover fg","state":"hover","source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover","line":45}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"chip hover fg","state":"hover","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/hover","line":49}},
@@ -43788,9 +44493,12 @@
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"text-field hover fg","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"textarea hover fg","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"thumb on the hovered off track","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"toolbar hover fg","state":"hover","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/hover","line":43}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"wizard hover fg","state":"hover","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/hover","line":56}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.text.muted","bg":"color.interaction.hover.bg","label":"metadata column on the hover fill","state":"hover","source":{"file":"spec/components/list.md","pointer":"/contrast/1","line":58}},
             {"fg":"color.text.muted","bg":"color.interaction.hover.bg","label":"metadata on the hover fill","state":"hover","source":{"file":"spec/components/card.md","pointer":"/contrast/3","line":53}}
           ]
@@ -43821,31 +44529,20 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/4","line":52}},
-            {"kind":"contrast","component":"link","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/16","line":20}},
-            {"kind":"part","component":"breadcrumbs","part":"link.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/link.bg-hover","line":32}},
             {"kind":"part","component":"chip","part":"remove.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/remove.bg-hover","line":46}},
             {"kind":"part","component":"combobox","part":"option.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.bg-hover","line":54}},
             {"kind":"part","component":"diff-view","part":"fold.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/tokens/fold.bg-hover","line":56}},
             {"kind":"part","component":"drawer","part":"item.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/item.bg-hover","line":36}},
-            {"kind":"part","component":"link","part":"root.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.bg-hover","line":29}},
             {"kind":"part","component":"menu","part":"item.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/item.bg-hover","line":46}},
-            {"kind":"part","component":"toast","part":"action.bg-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/action.bg-hover","line":49}},
-            {"kind":"state","component":"breadcrumbs","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/bg","line":40}},
             {"kind":"state","component":"combobox","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover/bg","line":66}},
-            {"kind":"state","component":"link","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/bg","line":37}},
-            {"kind":"state","component":"menu","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover/bg","line":58}},
-            {"kind":"state","component":"toast","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/bg","line":58}}
+            {"kind":"state","component":"menu","part":"bg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover/bg","line":58}}
           ],
           "contrast": [
-            {"fg":"color.interaction.focus.ring","bg":"color.interaction.hover.bg-strong","label":"ring on the hover fill","state":"hover","source":{"file":"spec/components/link.md","pointer":"/contrast/4","line":46}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"combobox hover fg","state":"hover","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover","line":66}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"hovered item","state":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/4","line":52}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover text on strong hover fill","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/16","line":20}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"menu hover fg","state":"hover","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}}
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"menu hover fg","state":"hover","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover","line":58}}
           ]
         },
         "color.interaction.marquee": {
@@ -44057,7 +44754,8 @@
             {"kind":"contrast","component":"date-picker","part":null,"state":null,"variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/6","line":111}},
             {"kind":"contrast","component":"diff-view","part":null,"state":"focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"selected","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/1","line":47}},
             {"kind":"contrast","component":"pagination","part":null,"state":"current","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/3","line":65}},
@@ -44067,7 +44765,7 @@
             {"kind":"part","component":"card","part":"selected.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.bg","line":40}},
             {"kind":"part","component":"chip","part":"selected.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.bg","line":41}},
             {"kind":"part","component":"combobox","part":"option.bg-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.bg-selected","line":56}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-bg","line":38}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-bg","line":45}},
             {"kind":"part","component":"data-table","part":"selected.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.bg","line":44}},
             {"kind":"part","component":"date-picker","part":"calendar.selected-bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/calendar.selected-bg","line":53}},
             {"kind":"part","component":"diagnostics","part":"row.bg-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.bg-selected","line":57}},
@@ -44106,21 +44804,22 @@
             {"kind":"state","component":"table","part":"bg","state":"selected+focus-visible","variant":null,"surface":"color.interaction.selection.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible/bg","line":59}}
           ],
           "contrast": [
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"container focus ring on selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/39","line":43}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on a selected row","state":"selected","source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/7","line":87}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
-            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"card selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"chip selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/selected+focus-visible","line":52}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"combobox selected outline","state":"selected","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/selected","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"data-table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/selected+focus-visible","line":60}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"diagnostics selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/selected+focus-visible","line":69}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"icon-button toggled+focus-visible outline","state":"toggled+focus-visible","source":{"file":"spec/components/icon-button.md","pointer":"/stateTokens/toggled+focus-visible","line":44}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"list selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/selected+focus-visible","line":54}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"menu selected outline","state":"selected","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/selected","line":63}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected item when focused","state":"selected","source":{"file":"spec/components/sidebar-nav.md","pointer":"/contrast/0","line":61}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on a selected workspace when focused","state":"selected","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the current page when focused","state":"current","source":{"file":"spec/components/pagination.md","pointer":"/contrast/0","line":46}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"ring on the selected row","state":"focus-visible","source":{"file":"spec/components/diff-view.md","pointer":"/contrast/19","line":89}},
+            {"fg":"color.interaction.focus.ring","bg":"color.interaction.selection.bg","label":"table selected+focus-visible outline","state":"selected+focus-visible","source":{"file":"spec/components/table.md","pointer":"/stateTokens/selected+focus-visible","line":59}},
+            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
             {"fg":"color.interaction.selection.bg","bg":"color.surface.default","label":"toggled fill against the panel (decorative)","state":"toggled","source":{"file":"spec/components/icon-button.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.interaction.selection.text","bg":"color.interaction.selection.bg","label":"card selected fg","state":"selected","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected","line":47}},
             {"fg":"color.interaction.selection.text","bg":"color.interaction.selection.bg","label":"card selected+focus-visible fg","state":"selected+focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/selected+focus-visible","line":48}},
@@ -44265,7 +44964,7 @@
             {"kind":"part","component":"card","part":"selected.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/selected.text","line":41}},
             {"kind":"part","component":"chip","part":"selected.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/selected.text","line":42}},
             {"kind":"part","component":"combobox","part":"option.text-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/option.text-selected","line":57}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-text","line":39}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-interaction-selection-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-interaction-selection-text","line":46}},
             {"kind":"part","component":"data-table","part":"selected.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/selected.text","line":45}},
             {"kind":"part","component":"date-picker","part":"calendar.selected-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/calendar.selected-text","line":54}},
             {"kind":"part","component":"diagnostics","part":"row.text-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/row.text-selected","line":58}},
@@ -47373,10 +48072,10 @@
             {"kind":"part","component":"checkbox","part":"box.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.border-invalid","line":41}},
             {"kind":"part","component":"combobox","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.border-invalid","line":41}},
             {"kind":"part","component":"date-picker","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.border-invalid","line":37}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":37}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":42}},
             {"kind":"part","component":"field","part":"control.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.border-invalid","line":26}},
             {"kind":"part","component":"file-input","part":"button.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/button.border-invalid","line":37}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":43}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":50}},
             {"kind":"part","component":"number-field","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.border-invalid","line":36}},
             {"kind":"part","component":"radio-group","part":"box.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.border-invalid","line":39}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-status-danger-border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-status-danger-border","line":43}},
@@ -47384,7 +48083,7 @@
             {"kind":"part","component":"settings-panel","part":"invalid.border","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/tokens/invalid.border","line":45}},
             {"kind":"part","component":"text-field","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.border-invalid","line":48}},
             {"kind":"part","component":"textarea","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.border-invalid","line":39}},
-            {"kind":"part","component":"time-picker","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-invalid","line":32}},
+            {"kind":"part","component":"time-picker","part":"root.border-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.border-invalid","line":34}},
             {"kind":"part","component":"wizard","part":"step.indicator-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.indicator-invalid","line":38}},
             {"kind":"prose","component":"toast","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"body","line":118}},
             {"kind":"state","component":"admin-form","part":"border","state":"invalid","variant":null,"surface":"color.status.danger.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/invalid/border","line":67}},
@@ -47406,7 +48105,8 @@
             {"kind":"state","component":"text-field","part":"border","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible/border","line":73}},
             {"kind":"state","component":"textarea","part":"border","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid/border","line":61}},
             {"kind":"state","component":"textarea","part":"border","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/border","line":62}},
-            {"kind":"state","component":"time-picker","part":"border","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/border","line":58}},
+            {"kind":"state","component":"time-picker","part":"border","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/border","line":60}},
+            {"kind":"state","component":"time-picker","part":"border","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/border","line":64}},
             {"kind":"state","component":"wizard","part":"border","state":"invalid","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/invalid/border","line":59}}
           ],
           "contrast": [
@@ -47433,7 +48133,8 @@
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"text-field invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid border","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
-            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}}
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}}
           ]
         },
         "color.status.danger.fill": {
@@ -47462,7 +48163,7 @@
           "unmappedPorts": [],
           "uses": [
             {"kind":"contrast","component":"badge","part":null,"state":"empty","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/badge.md","pointer":"/contrast/15","line":69}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
             {"kind":"contrast","component":"progress","part":null,"state":"error","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/4","line":46}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.status.danger.fill","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/14","line":77}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.status.danger.fill","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/16","line":79}},
@@ -47480,7 +48181,7 @@
             {"fg":"color.status.danger.border","bg":"color.status.danger.fill","label":"danger border on the danger fill (decorative)","state":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/16","line":79}},
             {"fg":"color.status.danger.fill","bg":"color.interaction.pressed.bg","label":"error fill against the track","state":"error","source":{"file":"spec/components/progress.md","pointer":"/contrast/4","line":46}},
             {"fg":"color.status.danger.fill","bg":"color.surface.canvas","label":"the danger fill is its own boundary against the canvas","state":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/15","line":78}},
-            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
+            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
             {"fg":"color.status.danger.fill","bg":"color.surface.default","label":"danger dot on the panel surface","state":"empty","source":{"file":"spec/components/badge.md","pointer":"/contrast/15","line":69}},
             {"fg":"color.status.danger.on-fill","bg":"color.status.danger.fill","label":"badge default fg","state":"default","source":{"file":"spec/components/badge.md","pointer":"/stateTokens/default","line":51}},
             {"fg":"color.status.danger.on-fill","bg":"color.status.danger.fill","label":"badge empty fg","state":"empty","source":{"file":"spec/components/badge.md","pointer":"/stateTokens/empty","line":52}},
@@ -47568,7 +48269,7 @@
             {"kind":"contrast","component":"settings-panel","part":null,"state":"invalid","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/2","line":61}},
             {"kind":"contrast","component":"text-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/0","line":76}},
             {"kind":"contrast","component":"textarea","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/0","line":65}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
             {"kind":"contrast","component":"wizard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/3","line":65}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.status.danger.tint","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/25","line":29}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/24","line":28}},
@@ -47582,12 +48283,12 @@
             {"kind":"part","component":"combobox","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/message.text","line":63}},
             {"kind":"part","component":"date-picker","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/message.text","line":49}},
             {"kind":"part","component":"diagnostics","part":"status.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/status.text","line":61}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":38}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":43}},
             {"kind":"part","component":"field","part":"label.required-mark","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/label.required-mark","line":23}},
             {"kind":"part","component":"field","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/message.text","line":31}},
             {"kind":"part","component":"file-input","part":"list.error","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/list.error","line":49}},
             {"kind":"part","component":"file-input","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/message.text","line":55}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":44}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-status-danger-text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-status-danger-text","line":51}},
             {"kind":"part","component":"number-field","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/message.text","line":51}},
             {"kind":"part","component":"progress","part":"error.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/tokens/error.text","line":37}},
             {"kind":"part","component":"radio-group","part":"legend.required-mark","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/legend.required-mark","line":46}},
@@ -47601,7 +48302,7 @@
             {"kind":"part","component":"textarea","part":"count.text-over","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/count.text-over","line":54}},
             {"kind":"part","component":"textarea","part":"label.required-mark","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/label.required-mark","line":51}},
             {"kind":"part","component":"textarea","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/message.text","line":55}},
-            {"kind":"part","component":"time-picker","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/message.text","line":40}},
+            {"kind":"part","component":"time-picker","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/message.text","line":42}},
             {"kind":"part","component":"wizard","part":"message.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/message.text","line":43}},
             {"kind":"part","component":"wizard","part":"step.marker-invalid","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.marker-invalid","line":37}},
             {"kind":"state","component":"admin-form","part":"fg","state":"invalid","variant":null,"surface":"color.status.danger.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/invalid/fg","line":67}},
@@ -47621,7 +48322,7 @@
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"progress error fg","state":"error","source":{"file":"spec/components/progress.md","pointer":"/stateTokens/error","line":40}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/1","line":75}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/0","line":82}},
-            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
+            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"wizard invalid fg","state":"invalid","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/invalid","line":59}},
             {"fg":"color.status.danger.text","bg":"color.surface.default","label":"danger outline text","state":null,"source":{"file":"spec/components/badge.md","pointer":"/contrast/5","line":59}},
             {"fg":"color.status.danger.text","bg":"color.surface.default","label":"diagnostics error fg","state":"error","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/error","line":70}},
@@ -48644,7 +49345,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-backdrop","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-backdrop","line":40}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-backdrop","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-backdrop","line":47}},
             {"kind":"part","component":"dialog","part":"backdrop.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/backdrop.bg","line":31}},
             {"kind":"part","component":"drawer","part":"backdrop.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/backdrop.bg","line":27}}
           ],
@@ -48692,7 +49393,7 @@
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/3","line":66}},
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/4","line":67}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"kind":"contrast","component":"link","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/0","line":42}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/0","line":32}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/3","line":35}},
@@ -48701,8 +49402,8 @@
             {"kind":"contrast","component":"progress","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/1","line":43}},
             {"kind":"contrast","component":"text-field","part":null,"state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/4","line":80}},
             {"kind":"contrast","component":"textarea","part":null,"state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/4","line":69}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/0","line":63}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/1","line":64}},
             {"kind":"contrast","component":"toast","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/15","line":78}},
@@ -48744,7 +49445,7 @@
             {"kind":"prose","component":"combobox","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"body","line":126}},
             {"kind":"prose","component":"empty-state","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"body","line":70}},
             {"kind":"prose","component":"field","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"body","line":72}},
-            {"kind":"prose","component":"time-picker","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"body","line":131}},
+            {"kind":"prose","component":"time-picker","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"body","line":138}},
             {"kind":"state","component":"date-picker","part":"bg","state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/read-only/bg","line":80}},
             {"kind":"state","component":"file-input","part":"bg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/default/bg","line":57}},
             {"kind":"state","component":"file-input","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible/bg","line":59}},
@@ -48807,7 +49508,7 @@
             {"fg":"color.diagnostic.warning.text","bg":"color.surface.canvas","label":"warning diagnostic text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/54","line":58}},
             {"fg":"color.icon.decorative","bg":"color.surface.canvas","label":"decorative icon on canvas (graphic)","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/62","line":66}},
             {"fg":"color.interaction.drop-target","bg":"color.surface.canvas","label":"drop-zone dashed border at rest","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/1","line":64}},
-            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.canvas","label":"container ring on the window surface","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"file-input focus-visible outline","state":"focus-visible","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/focus-visible","line":59}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"focus ring on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/37","line":41}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.canvas","label":"link focus-visible outline","state":"focus-visible","source":{"file":"spec/components/link.md","pointer":"/stateTokens/focus-visible","line":38}},
@@ -48823,7 +49524,7 @@
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"progress error fg","state":"error","source":{"file":"spec/components/progress.md","pointer":"/stateTokens/error","line":40}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/1","line":75}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/0","line":82}},
-            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":60}},
+            {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"validation message on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.status.danger.text","bg":"color.surface.canvas","label":"wizard invalid fg","state":"invalid","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/invalid","line":59}},
             {"fg":"color.status.info.text","bg":"color.surface.canvas","label":"glyph on the plain toast","state":null,"source":{"file":"spec/components/toast.md","pointer":"/contrast/0","line":63}},
             {"fg":"color.status.info.text","bg":"color.surface.canvas","label":"info text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/33","line":37}},
@@ -48860,7 +49561,7 @@
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text and the range separator on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/1","line":85}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/2","line":76}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/1","line":38}},
-            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"muted text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/6","line":10}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"status, hint and help text on the canvas","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"toast stacked fg","state":"stacked","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked","line":60}},
@@ -48901,19 +49602,19 @@
           "uses": [
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"container-inactive","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":"error","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
             {"kind":"contrast","component":"toolbar","part":null,"state":"disabled","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/0","line":47}},
             {"kind":"contrast","component":"toolbar","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/1","line":48}},
             {"kind":"contrast","component":"toolbar","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/2","line":49}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-surface-chrome","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-surface-chrome","line":35}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-color-surface-chrome","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-color-surface-chrome","line":40}},
             {"kind":"part","component":"filterable-table","part":"toolbar.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/tokens/toolbar.bg","line":33}},
             {"kind":"part","component":"i3-window-frame","part":"bar.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/bar.bg","line":34}},
             {"kind":"part","component":"i3-window-frame","part":"title.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/title.bg","line":53}},
@@ -48927,22 +49628,22 @@
             {"fg":"color.border.control","bg":"color.surface.chrome","label":"search box and filter button boundaries on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/1","line":81}},
             {"fg":"color.border.default","bg":"color.surface.chrome","label":"separator (decorative; role separator carries the grouping)","state":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/1","line":48}},
             {"fg":"color.border.divider","bg":"color.surface.chrome","label":"toolbar bottom edge (decorative)","state":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/2","line":49}},
-            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
-            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
-            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/6","line":77}},
+            {"fg":"color.border.selected-indicator-inactive","bg":"color.surface.chrome","label":"inactive tab indicator","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
+            {"fg":"color.border.selected-indicator","bg":"color.surface.chrome","label":"visible-tab indicator on the title row","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
+            {"fg":"color.icon.decorative","bg":"color.surface.chrome","label":"status glyphs (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/14","line":85}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"ring on a workspace or tab","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/7","line":78}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.chrome","label":"toolbar focus-visible outline","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
-            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
-            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/8","line":79}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"fg":"color.interaction.selection.bg","bg":"color.surface.chrome","label":"visible-workspace fill against the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/10","line":81}},
+            {"fg":"color.status.danger.fill","bg":"color.surface.chrome","label":"urgent fill against the bar","state":"error","source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/9","line":80}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar controls on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar default fg","state":"default","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/default","line":42}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar focus-visible fg","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
             {"fg":"color.text.disabled","bg":"color.surface.chrome","label":"disabled button text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/toolbar.md","pointer":"/contrast/0","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame container-inactive fg","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/container-inactive","line":68}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame default fg","state":"default","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/default","line":65}},
-            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}}
+            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}}
           ]
         },
         "color.surface.chrome-alt": {
@@ -48970,13 +49671,13 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
             {"kind":"part","component":"i3-window-frame","part":"title.bg-focused","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/title.bg-focused","line":55}},
             {"kind":"state","component":"i3-window-frame","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible/bg","line":66}}
           ],
           "contrast": [
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible outline","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
             {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible fg","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}}
           ]
         },
@@ -49010,7 +49711,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"editor-search","part":"dependency.role-color-surface-code","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-surface-code","line":37}}
+            {"kind":"part","component":"editor-search","part":"dependency.role-color-surface-code","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-color-surface-code","line":44}}
           ],
           "contrast": []
         },
@@ -49075,9 +49776,10 @@
             {"kind":"contrast","component":"badge","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/badge.md","pointer":"/contrast/9","line":63}},
             {"kind":"contrast","component":"breadcrumbs","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
             {"kind":"contrast","component":"breadcrumbs","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/1","line":46}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
             {"kind":"contrast","component":"button","part":null,"state":"hover","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/4","line":71}},
             {"kind":"contrast","component":"button","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/contrast/0","line":67}},
             {"kind":"contrast","component":"card","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/0","line":50}},
@@ -49092,12 +49794,14 @@
             {"kind":"contrast","component":"checkbox","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/1","line":61}},
             {"kind":"contrast","component":"checkbox","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/4","line":64}},
             {"kind":"contrast","component":"chip","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
             {"kind":"contrast","component":"data-table","part":null,"state":"mixed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/2","line":68}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/0","line":66}},
             {"kind":"contrast","component":"data-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/3","line":69}},
@@ -49115,25 +49819,28 @@
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/0","line":35}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/2","line":37}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/3","line":38}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
             {"kind":"contrast","component":"field","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/2","line":39}},
             {"kind":"contrast","component":"field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/0","line":37}},
             {"kind":"contrast","component":"fieldset","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/3","line":37}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/0","line":34}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/2","line":36}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/10","line":90}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/11","line":91}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/12","line":92}},
@@ -49145,9 +49852,9 @@
             {"kind":"contrast","component":"form-builder","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/1","line":27}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/0","line":46}},
             {"kind":"contrast","component":"icon-button","part":null,"state":"toggled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/contrast/1","line":47}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
             {"kind":"contrast","component":"link","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/1","line":43}},
             {"kind":"contrast","component":"link","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/contrast/2","line":44}},
             {"kind":"contrast","component":"list","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/2","line":59}},
@@ -49155,31 +49862,34 @@
             {"kind":"contrast","component":"list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/3","line":60}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/2","line":34}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/3","line":63}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/4","line":64}},
             {"kind":"contrast","component":"pagination","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/1","line":47}},
             {"kind":"contrast","component":"pagination","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/2","line":48}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
             {"kind":"contrast","component":"radio-group","part":null,"state":"checked","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
             {"kind":"contrast","component":"radio-group","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/5","line":62}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/4","line":61}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/4","line":63}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/4","line":66}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/5","line":67}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":"invalid","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/2","line":61}},
@@ -49286,14 +49996,14 @@
             {"kind":"state","component":"breadcrumbs","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/default/bg","line":39}},
             {"kind":"state","component":"breadcrumbs","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/focus-visible/bg","line":41}},
             {"kind":"state","component":"breadcrumbs","part":"bg","state":"truncated","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated/bg","line":43}},
-            {"kind":"state","component":"button-group","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/bg","line":45}},
+            {"kind":"state","component":"button-group","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/bg","line":50}},
             {"kind":"state","component":"card","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/default/bg","line":44}},
             {"kind":"state","component":"card","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible/bg","line":46}},
             {"kind":"state","component":"chart","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default/bg","line":45}},
             {"kind":"state","component":"chip","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default/bg","line":48}},
             {"kind":"state","component":"chip","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible/bg","line":50}},
-            {"kind":"state","component":"command-palette","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/bg","line":52}},
-            {"kind":"state","component":"compact-dashboard","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/bg","line":46}},
+            {"kind":"state","component":"command-palette","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/bg","line":59}},
+            {"kind":"state","component":"compact-dashboard","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/bg","line":51}},
             {"kind":"state","component":"data-table","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default/bg","line":56}},
             {"kind":"state","component":"data-table","part":"bg","state":"empty","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/empty/bg","line":63}},
             {"kind":"state","component":"data-table","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible/bg","line":58}},
@@ -49305,30 +50015,30 @@
             {"kind":"state","component":"diagnostics","part":"bg","state":"error","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/error/bg","line":70}},
             {"kind":"state","component":"diagnostics","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible/bg","line":67}},
             {"kind":"state","component":"disclosure","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default/bg","line":47}},
-            {"kind":"state","component":"editor-search","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/bg","line":47}},
+            {"kind":"state","component":"editor-search","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/bg","line":54}},
             {"kind":"state","component":"empty-state","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/stateTokens/default/bg","line":33}},
-            {"kind":"state","component":"error-state","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/bg","line":49}},
+            {"kind":"state","component":"error-state","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/bg","line":54}},
             {"kind":"state","component":"field","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/stateTokens/default/bg","line":33}},
             {"kind":"state","component":"field","part":"bg","state":"invalid","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/stateTokens/invalid/bg","line":35}},
             {"kind":"state","component":"field","part":"bg","state":"required","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/stateTokens/required/bg","line":34}},
             {"kind":"state","component":"fieldset","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/stateTokens/default/bg","line":32}},
-            {"kind":"state","component":"file-browser","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/bg","line":48}},
+            {"kind":"state","component":"file-browser","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/bg","line":55}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default/bg","line":74}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible/bg","line":76}},
             {"kind":"state","component":"filterable-table","part":"bg","state":"no-results","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/no-results/bg","line":78}},
             {"kind":"state","component":"form-builder","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default/bg","line":24}},
-            {"kind":"state","component":"kbd","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/bg","line":38}},
+            {"kind":"state","component":"kbd","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/bg","line":39}},
             {"kind":"state","component":"list","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/default/bg","line":50}},
             {"kind":"state","component":"list","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible/bg","line":52}},
             {"kind":"state","component":"menu","part":"bg","state":"closed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed/bg","line":61}},
             {"kind":"state","component":"menu","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/bg","line":59}},
-            {"kind":"state","component":"multiselect","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/bg","line":64}},
+            {"kind":"state","component":"multiselect","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/bg","line":71}},
             {"kind":"state","component":"pagination","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default/bg","line":41}},
             {"kind":"state","component":"pagination","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible/bg","line":43}},
-            {"kind":"state","component":"popover","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/bg","line":45}},
-            {"kind":"state","component":"range","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/bg","line":45}},
-            {"kind":"state","component":"repeater","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/bg","line":46}},
-            {"kind":"state","component":"segmented-control","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/bg","line":65}},
+            {"kind":"state","component":"popover","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/bg","line":50}},
+            {"kind":"state","component":"range","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/bg","line":46}},
+            {"kind":"state","component":"repeater","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/bg","line":53}},
+            {"kind":"state","component":"segmented-control","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/bg","line":64}},
             {"kind":"state","component":"settings-panel","part":"bg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/stateTokens/default/bg","line":54}},
             {"kind":"state","component":"sidebar-nav","part":"bg","state":"collapsed","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/collapsed/bg","line":59}},
             {"kind":"state","component":"sidebar-nav","part":"bg","state":"current","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/current/bg","line":55}},
@@ -49356,54 +50066,63 @@
             {"fg":"color.action.secondary.border","bg":"color.surface.default","label":"Reset button boundary","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/5","line":64}},
             {"fg":"color.action.secondary.border","bg":"color.surface.default","label":"secondary border against the panel while hovered (the fill inside it measures 2.94:1)","state":"hover","source":{"file":"spec/components/button.md","pointer":"/contrast/4","line":71}},
             {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"action text on the panel surface","state":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/1","line":36}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/3","line":73}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/3","line":65}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/3","line":68}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/3","line":69}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/3","line":85}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/3","line":64}},
+            {"fg":"color.action.secondary.text","bg":"color.surface.default","label":"Button label","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/3","line":67}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"avatar default border","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"button-group default border","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chart default border","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked box edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/checkbox.md","pointer":"/contrast/2","line":62}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"checked radio edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/radio-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip and checkbox boundaries","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/8","line":88}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip default border","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"chip focus-visible border","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"command-palette default border","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"compact-dashboard default border","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control border on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/41","line":45}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"control boundaries on the panel surface","state":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/4","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/2","line":49}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":54}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/2","line":59}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":61}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/2","line":68}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/2","line":49}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":56}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":58}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":47}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":73}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":54}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":55}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":74}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/2","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/2","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/2","line":48}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/2","line":80}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/2","line":59}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/2","line":55}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/2","line":62}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/2","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"Control boundary","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/2","line":60}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"description-list default border","state":"default","source":{"file":"spec/components/description-list.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"diagnostics default border","state":"default","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/default","line":65}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"disclosure default border","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"editor-search default border","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"error-state default border","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"file-browser default border","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"form-builder default border","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"kbd default border","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"list default border","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu closed border","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"menu focus-visible border","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"multiselect default border","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"on track edge against the panel (the border stays border.control)","state":"checked","source":{"file":"spec/components/switch.md","pointer":"/contrast/3","line":57}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"popover default border","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"range default border","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"repeater default border","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.border.control","bg":"color.surface.default","label":"segmented-control default border","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"skeleton default border","state":"default","source":{"file":"spec/components/skeleton.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"timeline default border","state":"default","source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default","line":40}},
             {"fg":"color.border.control","bg":"color.surface.default","label":"tree default border","state":"default","source":{"file":"spec/components/tree.md","pointer":"/stateTokens/default","line":50}},
@@ -49504,14 +50223,14 @@
             {"fg":"color.text.default","bg":"color.surface.default","label":"avatar default fg","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"block label on the panel surface","state":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"breadcrumbs truncated fg","state":"truncated","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card default fg","state":"default","source":{"file":"spec/components/card.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card focus-visible fg","state":"focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chart default fg","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip default fg","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip focus-visible fg","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table default fg","state":"default","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default","line":56}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible","line":58}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"default text on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/1","line":5}},
@@ -49520,47 +50239,47 @@
             {"fg":"color.text.default","bg":"color.surface.default","label":"diagnostics focus-visible fg","state":"focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"disclosure default fg","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Editor text","state":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/0","line":26}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"field labels inside the group","state":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table default fg","state":"default","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default","line":74}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible","line":76}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"form-builder default fg","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list default fg","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list focus-visible fg","state":"focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible","line":52}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu closed fg","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu focus-visible fg","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/0","line":60}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination default fg","state":"default","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default","line":41}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination focus-visible fg","state":"focus-visible","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"panel text on the panel surface","state":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/2","line":64}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/0","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/0","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"settings-panel default fg","state":"default","source":{"file":"spec/components/settings-panel.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav collapsed fg","state":"collapsed","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/collapsed","line":59}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav default fg","state":"default","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/default","line":52}},
@@ -49617,21 +50336,21 @@
             {"fg":"color.text.muted","bg":"color.surface.default","label":"remove glyph at rest","state":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"separator on the panel surface","state":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/1","line":46}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/1","line":46}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/1","line":57}},
@@ -49666,16 +50385,16 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
             {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.desktop","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}},
             {"kind":"part","component":"i3-window-frame","part":"area.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/area.bg","line":48}},
             {"kind":"part","component":"i3-window-frame","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/tokens/root.bg","line":32}}
           ],
           "contrast": [
-            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
-            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/11","line":82}},
-            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}}
+            {"fg":"color.border.active","bg":"color.surface.desktop","label":"focused window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/4","line":75}},
+            {"fg":"color.border.default","bg":"color.surface.desktop","label":"unfocused window frames (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
+            {"fg":"color.border.overlay","bg":"color.surface.desktop","label":"floating window frame on the desktop","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/5","line":76}}
           ]
         },
         "color.surface.input": {
@@ -49725,19 +50444,16 @@
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/42","line":46}},
             {"kind":"part","component":"admin-form","part":"field.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/field.bg","line":43}},
             {"kind":"part","component":"avatar","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/control.bg","line":29}},
-            {"kind":"part","component":"button-group","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"chart","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"checkbox","part":"box.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.bg","line":33}},
             {"kind":"part","component":"combobox","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/root.bg","line":35}},
             {"kind":"part","component":"command-palette","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/control.bg","line":32}},
-            {"kind":"part","component":"compact-dashboard","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/control.bg","line":31}},
             {"kind":"part","component":"data-table","part":"checkbox.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/tokens/checkbox.bg","line":47}},
             {"kind":"part","component":"date-picker","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/root.bg","line":31}},
             {"kind":"part","component":"description-list","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/control.bg","line":28}},
             {"kind":"part","component":"dialog","part":"field.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/field.bg","line":50}},
             {"kind":"part","component":"disclosure","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/control.bg","line":30}},
             {"kind":"part","component":"editor-search","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/control.bg","line":30}},
-            {"kind":"part","component":"error-state","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/control.bg","line":31}},
             {"kind":"part","component":"field","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.bg","line":24}},
             {"kind":"part","component":"fieldset","part":"field.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.bg","line":25}},
             {"kind":"part","component":"file-browser","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/control.bg","line":32}},
@@ -49746,7 +50462,6 @@
             {"kind":"part","component":"kbd","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/control.bg","line":27}},
             {"kind":"part","component":"multiselect","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/control.bg","line":31}},
             {"kind":"part","component":"number-field","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/root.bg","line":30}},
-            {"kind":"part","component":"popover","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/control.bg","line":30}},
             {"kind":"part","component":"radio-group","part":"box.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.bg","line":31}},
             {"kind":"part","component":"range","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/control.bg","line":29}},
             {"kind":"part","component":"repeater","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/control.bg","line":30}},
@@ -49758,7 +50473,7 @@
             {"kind":"part","component":"switch","part":"track.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/tokens/track.bg","line":32}},
             {"kind":"part","component":"text-field","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/root.bg","line":42}},
             {"kind":"part","component":"textarea","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/root.bg","line":33}},
-            {"kind":"part","component":"time-picker","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg","line":27}},
+            {"kind":"part","component":"time-picker","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/root.bg","line":28}},
             {"kind":"part","component":"timeline","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/control.bg","line":28}},
             {"kind":"part","component":"tree","part":"control.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/control.bg","line":33}},
             {"kind":"state","component":"admin-form","part":"bg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default/bg","line":66}},
@@ -49806,9 +50521,10 @@
             {"kind":"state","component":"textarea","part":"bg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid/bg","line":61}},
             {"kind":"state","component":"textarea","part":"bg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/bg","line":62}},
             {"kind":"state","component":"textarea","part":"bg","state":"placeholder-shown","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown/bg","line":60}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/bg","line":44}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/bg","line":52}},
-            {"kind":"state","component":"time-picker","part":"bg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/bg","line":57}}
+            {"kind":"state","component":"time-picker","part":"bg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/bg","line":46}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/bg","line":54}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/bg","line":59}},
+            {"kind":"state","component":"time-picker","part":"bg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/bg","line":63}}
           ],
           "contrast": [
             {"fg":"color.action.tertiary.text","bg":"color.surface.input","label":"clear glyph on the input surface","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/2","line":61}},
@@ -49821,7 +50537,7 @@
             {"fg":"color.border.active","bg":"color.surface.input","label":"select focus-visible border","state":"focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible","line":57}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"text-field focus-visible border","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.border.active","bg":"color.surface.input","label":"textarea focus-visible border","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
+            {"fg":"color.border.active","bg":"color.surface.input","label":"time-picker focus-visible border","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"admin-form default border","state":"default","source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default","line":66}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"checkbox boundary","state":null,"source":{"file":"spec/components/data-table.md","pointer":"/contrast/1","line":67}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"checkbox default border","state":"default","source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/default","line":51}},
@@ -49847,7 +50563,7 @@
             {"fg":"color.border.control","bg":"color.surface.input","label":"text-field placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/placeholder-shown","line":71}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea default border","state":"default","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/default","line":57}},
             {"fg":"color.border.control","bg":"color.surface.input","label":"textarea placeholder-shown border","state":"placeholder-shown","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/placeholder-shown","line":60}},
-            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
+            {"fg":"color.border.control","bg":"color.surface.input","label":"time-picker default border","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
             {"fg":"color.border.default","bg":"color.surface.input","label":"kbd hint edge (decorative)","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/5","line":64}},
             {"fg":"color.border.divider","bg":"color.surface.input","label":"affix and stepper dividers (decorative)","state":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/7","line":67}},
             {"fg":"color.icon.default","bg":"color.surface.input","label":"chevron on the input surface","state":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/0","line":62}},
@@ -49858,6 +50574,7 @@
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"select invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/select.md","pointer":"/stateTokens/invalid+focus-visible","line":60}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"text-field invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"textarea invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
+            {"fg":"color.interaction.focus.ring-container","bg":"color.surface.input","label":"time-picker invalid+focus-visible outline","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"checkbox focus-visible outline","state":"focus-visible","source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"combobox focus-visible outline","state":"focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"date-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/date-picker.md","pointer":"/stateTokens/focus-visible","line":65}},
@@ -49869,7 +50586,7 @@
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"switch focus-visible outline","state":"focus-visible","source":{"file":"spec/components/switch.md","pointer":"/stateTokens/focus-visible","line":50}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"text-field focus-visible outline","state":"focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/focus-visible","line":70}},
             {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"textarea focus-visible outline","state":"focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
+            {"fg":"color.interaction.focus.ring","bg":"color.surface.input","label":"time-picker focus-visible outline","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"checkbox invalid border","state":"invalid","source":{"file":"spec/components/checkbox.md","pointer":"/stateTokens/invalid","line":57}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"combobox invalid border","state":"invalid","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid","line":70}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"combobox invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible","line":71}},
@@ -49886,7 +50603,8 @@
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"text-field invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/invalid+focus-visible","line":73}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid border","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.status.danger.border","bg":"color.surface.input","label":"textarea invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
-            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}},
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid border","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.status.danger.border","bg":"color.surface.input","label":"time-picker invalid+focus-visible border","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"admin-form default fg","state":"default","source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default","line":66}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"combobox default fg","state":"default","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/default","line":65}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"combobox focus-visible fg","state":"focus-visible","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/focus-visible","line":67}},
@@ -49921,9 +50639,10 @@
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid fg","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"thumb on the off track","state":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.muted","bg":"color.surface.input","label":"loading glyph and kbd hint on the input surface","state":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/1","line":60}},
             {"fg":"color.text.muted","bg":"color.surface.input","label":"unit affix on the input surface","state":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/0","line":60}},
             {"fg":"color.text.placeholder","bg":"color.surface.input","label":"placeholder on input","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/11","line":15}},
@@ -49968,10 +50687,10 @@
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/2","line":50}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/3","line":51}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/5","line":53}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":41}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":48}},
             {"kind":"part","component":"dialog","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/tokens/root.bg","line":32}},
             {"kind":"part","component":"drawer","part":"root.bg","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/tokens/root.bg","line":28}},
-            {"kind":"part","component":"popover","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":34}},
+            {"kind":"part","component":"popover","part":"dependency.role-color-surface-overlay","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-color-surface-overlay","line":39}},
             {"kind":"state","component":"dialog","part":"bg","state":"default","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/default/bg","line":55}},
             {"kind":"state","component":"dialog","part":"bg","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped/bg","line":57}},
             {"kind":"state","component":"dialog","part":"bg","state":"focus-visible","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-visible/bg","line":59}},
@@ -51231,8 +51950,8 @@
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/0","line":48}},
             {"kind":"contrast","component":"empty-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/empty-state.md","pointer":"/contrast/0","line":35}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/2","line":82}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome-alt","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"progress","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/0","line":42}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/0","line":59}},
@@ -51251,7 +51970,7 @@
             {"kind":"part","component":"breadcrumbs","part":"current.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/tokens/current.text","line":34}},
             {"kind":"part","component":"button-group","part":"heading.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/heading.text","line":27}},
             {"kind":"part","component":"card","part":"title.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/title.text","line":37}},
-            {"kind":"part","component":"chart","part":"header.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/header.text","line":36}},
+            {"kind":"part","component":"chart","part":"header.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/header.text","line":37}},
             {"kind":"part","component":"chart","part":"heading.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/heading.text","line":27}},
             {"kind":"part","component":"checkbox","part":"legend.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/legend.text","line":47}},
             {"kind":"part","component":"chip","part":"remove.text-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/remove.text-hover","line":45}},
@@ -51306,7 +52025,7 @@
             {"kind":"part","component":"tabs","part":"tab.text-selected","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.text-selected","line":34}},
             {"kind":"part","component":"text-field","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/label.text","line":58}},
             {"kind":"part","component":"textarea","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/label.text","line":50}},
-            {"kind":"part","component":"time-picker","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/label.text","line":38}},
+            {"kind":"part","component":"time-picker","part":"label.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/label.text","line":40}},
             {"kind":"part","component":"timeline","part":"heading.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/heading.text","line":26}},
             {"kind":"part","component":"toolbar","part":"toggled.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/toggled.text","line":38}},
             {"kind":"part","component":"tooltip","part":"shortcut.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tooltip.md","pointer":"/tokens/shortcut.text","line":31}},
@@ -51342,9 +52061,9 @@
             {"fg":"color.text.bright","bg":"color.surface.canvas","label":"link current fg","state":"current","source":{"file":"spec/components/link.md","pointer":"/stateTokens/current","line":40}},
             {"fg":"color.text.bright","bg":"color.surface.canvas","label":"wizard current fg","state":"current","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/current","line":58}},
             {"fg":"color.text.bright","bg":"color.surface.canvas","label":"wizard focus-visible fg","state":"focus-visible","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/focus-visible","line":57}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"focused title","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/3","line":74}},
             {"fg":"color.text.bright","bg":"color.surface.chrome-alt","label":"i3-window-frame focus-visible fg","state":"focus-visible","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/focus-visible","line":66}},
-            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"fg":"color.text.bright","bg":"color.surface.chrome","label":"clock on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.bright","bg":"color.surface.default","label":"breadcrumbs current fg","state":"current","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/current","line":42}},
             {"fg":"color.text.bright","bg":"color.surface.default","label":"column headers, empty-state heading and current page","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/2","line":82}},
             {"fg":"color.text.bright","bg":"color.surface.default","label":"data-table sorted fg","state":"sorted","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/sorted","line":61}},
@@ -51408,11 +52127,11 @@
             {"kind":"contrast","component":"alert","part":null,"state":null,"variant":null,"surface":"color.status.success.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/contrast/6","line":63}},
             {"kind":"contrast","component":"alert","part":null,"state":null,"variant":null,"surface":"color.status.warning.tint","nativeKey":null,"port":null,"source":{"file":"spec/components/alert.md","pointer":"/contrast/3","line":60}},
             {"kind":"contrast","component":"avatar","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/0","line":43}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
             {"kind":"contrast","component":"chart","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/0","line":48}},
             {"kind":"contrast","component":"checkbox","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/0","line":60}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
             {"kind":"contrast","component":"date-picker","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/5","line":108}},
             {"kind":"contrast","component":"description-list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/0","line":43}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/19","line":92}},
@@ -51424,21 +52143,21 @@
             {"kind":"contrast","component":"diff-view","part":null,"state":null,"variant":null,"surface":"color.diff.modified.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/2","line":72}},
             {"kind":"contrast","component":"diff-view","part":null,"state":null,"variant":null,"surface":"color.diff.removed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/1","line":71}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"kind":"contrast","component":"form-builder","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/0","line":26}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
             {"kind":"contrast","component":"radio-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/1","line":63}},
             {"kind":"contrast","component":"skeleton","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/0","line":44}},
             {"kind":"contrast","component":"switch","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
@@ -51467,7 +52186,7 @@
             {"kind":"part","component":"button-group","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/root.text","line":25}},
             {"kind":"part","component":"card","part":"body.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/tokens/body.text","line":38}},
             {"kind":"part","component":"chart","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/root.text","line":25}},
-            {"kind":"part","component":"chart","part":"row.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/row.text","line":37}},
+            {"kind":"part","component":"chart","part":"row.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/row.text","line":38}},
             {"kind":"part","component":"checkbox","part":"text.default","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/text.default","line":45}},
             {"kind":"part","component":"chip","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/tokens/root.text","line":34}},
             {"kind":"part","component":"combobox","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/input.text","line":44}},
@@ -51529,7 +52248,7 @@
             {"kind":"part","component":"tabs","part":"tab.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.text","line":33}},
             {"kind":"part","component":"text-field","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/input.text","line":52}},
             {"kind":"part","component":"textarea","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/input.text","line":44}},
-            {"kind":"part","component":"time-picker","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text","line":35}},
+            {"kind":"part","component":"time-picker","part":"input.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text","line":37}},
             {"kind":"part","component":"timeline","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/root.text","line":24}},
             {"kind":"part","component":"toast","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/root.text","line":31}},
             {"kind":"part","component":"toolbar","part":"button.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.text","line":31}},
@@ -51537,11 +52256,10 @@
             {"kind":"part","component":"tree","part":"root.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/root.text","line":29}},
             {"kind":"part","component":"wizard","part":"step.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.text","line":30}},
             {"kind":"part","component":"wizard","part":"text.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/text.text","line":42}},
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}},
             {"kind":"state","component":"admin-form","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/stateTokens/default/fg","line":66}},
             {"kind":"state","component":"avatar","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default/fg","line":39}},
             {"kind":"state","component":"breadcrumbs","part":"fg","state":"truncated","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated/fg","line":43}},
-            {"kind":"state","component":"button-group","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/fg","line":44}},
+            {"kind":"state","component":"button-group","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default/fg","line":49}},
             {"kind":"state","component":"card","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/default/fg","line":44}},
             {"kind":"state","component":"card","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible/fg","line":46}},
             {"kind":"state","component":"card","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/stateTokens/hover/fg","line":45}},
@@ -51554,8 +52272,8 @@
             {"kind":"state","component":"combobox","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid/fg","line":70}},
             {"kind":"state","component":"combobox","part":"fg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/invalid+focus-visible/fg","line":71}},
             {"kind":"state","component":"combobox","part":"fg","state":"open","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/open/fg","line":68}},
-            {"kind":"state","component":"command-palette","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/fg","line":51}},
-            {"kind":"state","component":"compact-dashboard","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"command-palette","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default/fg","line":58}},
+            {"kind":"state","component":"compact-dashboard","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default/fg","line":50}},
             {"kind":"state","component":"data-table","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default/fg","line":56}},
             {"kind":"state","component":"data-table","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible/fg","line":58}},
             {"kind":"state","component":"data-table","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/hover/fg","line":57}},
@@ -51581,15 +52299,15 @@
             {"kind":"state","component":"drawer","part":"fg","state":"focus-trapped","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/focus-trapped/fg","line":45}},
             {"kind":"state","component":"drawer","part":"fg","state":"open","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/open/fg","line":44}},
             {"kind":"state","component":"drawer","part":"fg","state":"reduced-motion","variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/stateTokens/reduced-motion/fg","line":46}},
-            {"kind":"state","component":"editor-search","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/fg","line":46}},
-            {"kind":"state","component":"error-state","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/fg","line":48}},
-            {"kind":"state","component":"file-browser","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/fg","line":47}},
+            {"kind":"state","component":"editor-search","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default/fg","line":53}},
+            {"kind":"state","component":"error-state","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default/fg","line":53}},
+            {"kind":"state","component":"file-browser","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default/fg","line":54}},
             {"kind":"state","component":"file-input","part":"fg","state":"drop-target","variant":null,"surface":"color.interaction.marquee","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/drop-target/fg","line":60}},
             {"kind":"state","component":"filterable-table","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default/fg","line":74}},
             {"kind":"state","component":"filterable-table","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible/fg","line":76}},
             {"kind":"state","component":"filterable-table","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/hover/fg","line":75}},
             {"kind":"state","component":"form-builder","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default/fg","line":24}},
-            {"kind":"state","component":"kbd","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/fg","line":37}},
+            {"kind":"state","component":"kbd","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default/fg","line":38}},
             {"kind":"state","component":"list","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/default/fg","line":50}},
             {"kind":"state","component":"list","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible/fg","line":52}},
             {"kind":"state","component":"list","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/stateTokens/hover/fg","line":51}},
@@ -51599,7 +52317,7 @@
             {"kind":"state","component":"menu","part":"fg","state":"default","variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/default/fg","line":57}},
             {"kind":"state","component":"menu","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible/fg","line":59}},
             {"kind":"state","component":"menu","part":"fg","state":"open","variant":null,"surface":"color.interaction.pressed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/open/fg","line":60}},
-            {"kind":"state","component":"multiselect","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/fg","line":63}},
+            {"kind":"state","component":"multiselect","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default/fg","line":70}},
             {"kind":"state","component":"number-field","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/default/fg","line":53}},
             {"kind":"state","component":"number-field","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/focus-visible/fg","line":55}},
             {"kind":"state","component":"number-field","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/stateTokens/hover/fg","line":54}},
@@ -51609,16 +52327,16 @@
             {"kind":"state","component":"pagination","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default/fg","line":41}},
             {"kind":"state","component":"pagination","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible/fg","line":43}},
             {"kind":"state","component":"pagination","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/hover/fg","line":42}},
-            {"kind":"state","component":"popover","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/fg","line":44}},
+            {"kind":"state","component":"popover","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default/fg","line":49}},
             {"kind":"state","component":"progress","part":"fg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/stateTokens/default/fg","line":39}},
-            {"kind":"state","component":"range","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/fg","line":44}},
-            {"kind":"state","component":"repeater","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"range","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"repeater","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default/fg","line":52}},
             {"kind":"state","component":"search-field","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/default/fg","line":52}},
             {"kind":"state","component":"search-field","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/focus-visible/fg","line":54}},
             {"kind":"state","component":"search-field","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/hover/fg","line":53}},
             {"kind":"state","component":"search-field","part":"fg","state":"loading","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/loading/fg","line":56}},
             {"kind":"state","component":"search-field","part":"fg","state":"no-results","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/stateTokens/no-results/fg","line":57}},
-            {"kind":"state","component":"segmented-control","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/fg","line":64}},
+            {"kind":"state","component":"segmented-control","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default/fg","line":63}},
             {"kind":"state","component":"select","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/default/fg","line":55}},
             {"kind":"state","component":"select","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/focus-visible/fg","line":57}},
             {"kind":"state","component":"select","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/stateTokens/hover/fg","line":56}},
@@ -51651,10 +52369,11 @@
             {"kind":"state","component":"textarea","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid/fg","line":61}},
             {"kind":"state","component":"textarea","part":"fg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible/fg","line":62}},
             {"kind":"state","component":"textarea","part":"fg","state":"read-only","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/read-only/fg","line":63}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/fg","line":43}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/fg","line":51}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/fg","line":47}},
-            {"kind":"state","component":"time-picker","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/fg","line":56}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"default","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default/fg","line":45}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible/fg","line":53}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover/fg","line":49}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"invalid","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid/fg","line":58}},
+            {"kind":"state","component":"time-picker","part":"fg","state":"invalid+focus-visible","variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible/fg","line":62}},
             {"kind":"state","component":"timeline","part":"fg","state":"default","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/stateTokens/default/fg","line":40}},
             {"kind":"state","component":"toast","part":"fg","state":"default","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/default/fg","line":57}},
             {"kind":"state","component":"toast","part":"fg","state":"reduced-motion","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/reduced-motion/fg","line":61}},
@@ -51698,7 +52417,7 @@
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"text-field hover fg","state":"hover","source":{"file":"spec/components/text-field.md","pointer":"/stateTokens/hover","line":69}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"textarea hover fg","state":"hover","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/hover","line":58}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"thumb on the hovered off track","state":"hover","source":{"file":"spec/components/switch.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":47}},
+            {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"time-picker hover fg","state":"hover","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/hover","line":49}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"toolbar hover fg","state":"hover","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/hover","line":43}},
             {"fg":"color.text.default","bg":"color.interaction.hover.bg","label":"wizard hover fg","state":"hover","source":{"file":"spec/components/wizard.md","pointer":"/stateTokens/hover","line":56}},
             {"fg":"color.text.default","bg":"color.interaction.marquee","label":"file-input drop-target fg","state":"drop-target","source":{"file":"spec/components/file-input.md","pointer":"/stateTokens/drop-target","line":60}},
@@ -51730,18 +52449,18 @@
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar controls on the chrome surface","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/0","line":80}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar default fg","state":"default","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/default","line":42}},
             {"fg":"color.text.default","bg":"color.surface.chrome","label":"toolbar focus-visible fg","state":"focus-visible","source":{"file":"spec/components/toolbar.md","pointer":"/stateTokens/focus-visible","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/0","line":71}},
+            {"fg":"color.text.default","bg":"color.surface.chrome","label":"workspace names and status text on the bar","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/1","line":72}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"avatar default fg","state":"default","source":{"file":"spec/components/avatar.md","pointer":"/stateTokens/default","line":39}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"block label on the panel surface","state":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/1","line":33}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"breadcrumbs truncated fg","state":"truncated","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/truncated","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"button-group default fg","state":"default","source":{"file":"spec/components/button-group.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card default fg","state":"default","source":{"file":"spec/components/card.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"card focus-visible fg","state":"focus-visible","source":{"file":"spec/components/card.md","pointer":"/stateTokens/focus-visible","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chart default fg","state":"default","source":{"file":"spec/components/chart.md","pointer":"/stateTokens/default","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip default fg","state":"default","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/default","line":48}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"chip focus-visible fg","state":"focus-visible","source":{"file":"spec/components/chip.md","pointer":"/stateTokens/focus-visible","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"command-palette default fg","state":"default","source":{"file":"spec/components/command-palette.md","pointer":"/stateTokens/default","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"compact-dashboard default fg","state":"default","source":{"file":"spec/components/compact-dashboard.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table default fg","state":"default","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/default","line":56}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"data-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/data-table.md","pointer":"/stateTokens/focus-visible","line":58}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"default text on default surface","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/1","line":5}},
@@ -51750,47 +52469,47 @@
             {"fg":"color.text.default","bg":"color.surface.default","label":"diagnostics focus-visible fg","state":"focus-visible","source":{"file":"spec/components/diagnostics.md","pointer":"/stateTokens/focus-visible","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"disclosure default fg","state":"default","source":{"file":"spec/components/disclosure.md","pointer":"/stateTokens/default","line":46}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Editor text","state":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/0","line":26}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":46}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"editor-search default fg","state":"default","source":{"file":"spec/components/editor-search.md","pointer":"/stateTokens/default","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"error-state default fg","state":"default","source":{"file":"spec/components/error-state.md","pointer":"/stateTokens/default","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"field labels inside the group","state":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/1","line":35}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":47}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"file-browser default fg","state":"default","source":{"file":"spec/components/file-browser.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table default fg","state":"default","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/default","line":74}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"filterable-table focus-visible fg","state":"focus-visible","source":{"file":"spec/components/filterable-table.md","pointer":"/stateTokens/focus-visible","line":76}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"form-builder default fg","state":"default","source":{"file":"spec/components/form-builder.md","pointer":"/stateTokens/default","line":24}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":37}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"kbd default fg","state":"default","source":{"file":"spec/components/kbd.md","pointer":"/stateTokens/default","line":38}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list default fg","state":"default","source":{"file":"spec/components/list.md","pointer":"/stateTokens/default","line":50}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"list focus-visible fg","state":"focus-visible","source":{"file":"spec/components/list.md","pointer":"/stateTokens/focus-visible","line":52}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu closed fg","state":"closed","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/closed","line":61}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"menu focus-visible fg","state":"focus-visible","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/focus-visible","line":59}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":63}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"multiselect default fg","state":"default","source":{"file":"spec/components/multiselect.md","pointer":"/stateTokens/default","line":70}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/checkbox.md","pointer":"/contrast/0","line":60}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"option text on the panel surface","state":null,"source":{"file":"spec/components/radio-group.md","pointer":"/contrast/0","line":57}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination default fg","state":"default","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/default","line":41}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"pagination focus-visible fg","state":"focus-visible","source":{"file":"spec/components/pagination.md","pointer":"/stateTokens/focus-visible","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"panel text on the panel surface","state":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/2","line":64}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":44}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"popover default fg","state":"default","source":{"file":"spec/components/popover.md","pointer":"/stateTokens/default","line":49}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/0","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":48}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/0","line":53}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":55}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/0","line":62}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/0","line":43}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":50}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":52}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":41}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":67}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":48}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":49}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":68}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/0","line":57}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/0","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/0","line":42}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/0","line":74}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/0","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/0","line":49}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/0","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/0","line":67}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/0","line":44}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"Primary content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":44}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":45}},
-            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":64}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"range default fg","state":"default","source":{"file":"spec/components/range.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"repeater default fg","state":"default","source":{"file":"spec/components/repeater.md","pointer":"/stateTokens/default","line":52}},
+            {"fg":"color.text.default","bg":"color.surface.default","label":"segmented-control default fg","state":"default","source":{"file":"spec/components/segmented-control.md","pointer":"/stateTokens/default","line":63}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"settings-panel default fg","state":"default","source":{"file":"spec/components/settings-panel.md","pointer":"/stateTokens/default","line":54}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav collapsed fg","state":"collapsed","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/collapsed","line":59}},
             {"fg":"color.text.default","bg":"color.surface.default","label":"sidebar-nav default fg","state":"default","source":{"file":"spec/components/sidebar-nav.md","pointer":"/stateTokens/default","line":52}},
@@ -51837,9 +52556,10 @@
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid fg","state":"invalid","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid","line":61}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"textarea invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/textarea.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.input","label":"thumb on the off track","state":null,"source":{"file":"spec/components/switch.md","pointer":"/contrast/0","line":54}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":43}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":51}},
-            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":56}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker default fg","state":"default","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/default","line":45}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker focus-visible fg","state":"focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/focus-visible","line":53}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid fg","state":"invalid","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid","line":58}},
+            {"fg":"color.text.default","bg":"color.surface.input","label":"time-picker invalid+focus-visible fg","state":"invalid+focus-visible","source":{"file":"spec/components/time-picker.md","pointer":"/stateTokens/invalid+focus-visible","line":62}},
             {"fg":"color.text.default","bg":"color.surface.overlay","label":"dialog default fg","state":"default","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/default","line":55}},
             {"fg":"color.text.default","bg":"color.surface.overlay","label":"dialog focus-trapped fg","state":"focus-trapped","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/focus-trapped","line":57}},
             {"fg":"color.text.default","bg":"color.surface.overlay","label":"dialog open fg","state":"open","source":{"file":"spec/components/dialog.md","pointer":"/stateTokens/open","line":56}},
@@ -51915,12 +52635,12 @@
             {"kind":"contrast","component":"tabs","part":null,"state":"disabled","variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/contrast/1","line":52}},
             {"kind":"contrast","component":"text-field","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/2","line":78}},
             {"kind":"contrast","component":"textarea","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":"disabled","variant":null,"surface":"color.interaction.disabled.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
             {"kind":"contrast","component":"toolbar","part":null,"state":"disabled","variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/contrast/0","line":47}},
             {"kind":"contrast","component":"wizard","part":null,"state":"disabled","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/contrast/9","line":71}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/10","line":14}},
             {"kind":"part","component":"admin-form","part":"disabled.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/tokens/disabled.text","line":52}},
-            {"kind":"part","component":"button-group","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-text-disabled","line":34}},
+            {"kind":"part","component":"button-group","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-color-text-disabled","line":39}},
             {"kind":"part","component":"button","part":"root.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button.md","pointer":"/tokens/root.text-disabled","line":56}},
             {"kind":"part","component":"checkbox","part":"box.glyph-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/box.glyph-disabled","line":44}},
             {"kind":"part","component":"checkbox","part":"text.disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/checkbox.md","pointer":"/tokens/text.disabled","line":46}},
@@ -51928,7 +52648,7 @@
             {"kind":"part","component":"combobox","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/input.text-disabled","line":45}},
             {"kind":"part","component":"date-picker","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/tokens/input.text-disabled","line":43}},
             {"kind":"part","component":"disclosure","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-color-text-disabled","line":37}},
-            {"kind":"part","component":"error-state","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-text-disabled","line":39}},
+            {"kind":"part","component":"error-state","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-color-text-disabled","line":44}},
             {"kind":"part","component":"field","part":"control.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/tokens/control.text-disabled","line":27}},
             {"kind":"part","component":"fieldset","part":"field.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/field.text-disabled","line":29}},
             {"kind":"part","component":"fieldset","part":"legend.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/tokens/legend.text-disabled","line":24}},
@@ -51937,13 +52657,13 @@
             {"kind":"part","component":"icon-button","part":"root.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/icon-button.md","pointer":"/tokens/root.text-disabled","line":34}},
             {"kind":"part","component":"list","part":"row.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/tokens/row.text-disabled","line":41}},
             {"kind":"part","component":"menu","part":"item.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/item.text-disabled","line":48}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-text-disabled","line":45}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-color-text-disabled","line":52}},
             {"kind":"part","component":"number-field","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/tokens/input.text-disabled","line":42}},
             {"kind":"part","component":"pagination","part":"link.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/tokens/link.text-disabled","line":33}},
             {"kind":"part","component":"radio-group","part":"box.dot-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/box.dot-disabled","line":42}},
             {"kind":"part","component":"radio-group","part":"text.disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/radio-group.md","pointer":"/tokens/text.disabled","line":44}},
             {"kind":"part","component":"range","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-color-text-disabled","line":35}},
-            {"kind":"part","component":"repeater","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-text-disabled","line":35}},
+            {"kind":"part","component":"repeater","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-color-text-disabled","line":42}},
             {"kind":"part","component":"search-field","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/tokens/input.text-disabled","line":39}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-color-text-disabled","line":45}},
             {"kind":"part","component":"select","part":"control.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/tokens/control.text-disabled","line":43}},
@@ -51952,7 +52672,7 @@
             {"kind":"part","component":"tabs","part":"tab.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tabs.md","pointer":"/tokens/tab.text-disabled","line":35}},
             {"kind":"part","component":"text-field","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/input.text-disabled","line":53}},
             {"kind":"part","component":"textarea","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/input.text-disabled","line":45}},
-            {"kind":"part","component":"time-picker","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text-disabled","line":36}},
+            {"kind":"part","component":"time-picker","part":"input.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/input.text-disabled","line":38}},
             {"kind":"part","component":"toolbar","part":"button.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toolbar.md","pointer":"/tokens/button.text-disabled","line":35}},
             {"kind":"part","component":"tree","part":"dependency.role-color-text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-color-text-disabled","line":40}},
             {"kind":"part","component":"wizard","part":"step.text-disabled","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/wizard.md","pointer":"/tokens/step.text-disabled","line":35}}
@@ -51974,7 +52694,7 @@
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/select.md","pointer":"/contrast/6","line":68}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/text-field.md","pointer":"/contrast/2","line":78}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/textarea.md","pointer":"/contrast/2","line":67}},
-            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":66}},
+            {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/time-picker.md","pointer":"/contrast/2","line":73}},
             {"fg":"color.text.disabled","bg":"color.interaction.disabled.bg","label":"disabled thumb (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/switch.md","pointer":"/contrast/6","line":60}},
             {"fg":"color.text.disabled","bg":"color.surface.canvas","label":"disabled text on canvas (exempt; house floor 3:1)","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/10","line":14}},
             {"fg":"color.text.disabled","bg":"color.surface.canvas","label":"future step text (exempt; house floor 3:1)","state":"disabled","source":{"file":"spec/components/wizard.md","pointer":"/contrast/9","line":71}},
@@ -52196,20 +52916,20 @@
             {"kind":"part","component":"link","part":"root.text-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/tokens/root.text-hover","line":28}},
             {"kind":"part","component":"menu","part":"item.text-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/tokens/item.text-hover","line":47}},
             {"kind":"part","component":"toast","part":"action.text-hover","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/action.text-hover","line":50}},
-            {"kind":"state","component":"breadcrumbs","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/fg","line":40}},
+            {"kind":"state","component":"breadcrumbs","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover/fg","line":40}},
             {"kind":"state","component":"combobox","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover/fg","line":66}},
-            {"kind":"state","component":"link","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/fg","line":37}},
+            {"kind":"state","component":"link","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover/fg","line":37}},
             {"kind":"state","component":"menu","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover/fg","line":58}},
-            {"kind":"state","component":"toast","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg-strong","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/fg","line":58}}
+            {"kind":"state","component":"toast","part":"fg","state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover/fg","line":58}}
           ],
           "contrast": [
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"combobox hover fg","state":"hover","source":{"file":"spec/components/combobox.md","pointer":"/stateTokens/hover","line":66}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"hovered item","state":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/4","line":52}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"link hover text on strong hover fill","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/16","line":20}},
             {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"menu hover fg","state":"hover","source":{"file":"spec/components/menu.md","pointer":"/stateTokens/hover","line":58}},
-            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg-strong","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}}
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"breadcrumbs hover fg","state":"hover","source":{"file":"spec/components/breadcrumbs.md","pointer":"/stateTokens/hover","line":40}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"link hover fg","state":"hover","source":{"file":"spec/components/link.md","pointer":"/stateTokens/hover","line":37}},
+            {"fg":"color.text.link-hover","bg":"color.interaction.hover.bg","label":"toast hover fg","state":"hover","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/hover","line":58}}
           ]
         },
         "color.text.link-underline": {
@@ -52277,15 +52997,15 @@
             {"kind":"contrast","component":"admin-form","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/admin-form.md","pointer":"/contrast/1","line":71}},
             {"kind":"contrast","component":"avatar","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/1","line":46}},
             {"kind":"contrast","component":"breadcrumbs","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
-            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
+            {"kind":"contrast","component":"button-group","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
             {"kind":"contrast","component":"card","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/3","line":53}},
             {"kind":"contrast","component":"card","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/card.md","pointer":"/contrast/1","line":51}},
             {"kind":"contrast","component":"chart","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/1","line":51}},
             {"kind":"contrast","component":"chip","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
-            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"kind":"contrast","component":"code-editor","part":null,"state":null,"variant":null,"surface":"color.code.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"kind":"contrast","component":"combobox","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/2","line":76}},
-            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"command-palette","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"kind":"contrast","component":"compact-dashboard","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
             {"kind":"contrast","component":"date-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/1","line":85}},
             {"kind":"contrast","component":"description-list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/1","line":46}},
             {"kind":"contrast","component":"diagnostics","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/contrast/18","line":91}},
@@ -52297,33 +53017,33 @@
             {"kind":"contrast","component":"diff-view","part":null,"state":null,"variant":null,"surface":"color.diff.removed.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/7","line":77}},
             {"kind":"contrast","component":"disclosure","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
             {"kind":"contrast","component":"drawer","part":null,"state":null,"variant":null,"surface":"color.surface.overlay","nativeKey":null,"port":null,"source":{"file":"spec/components/drawer.md","pointer":"/contrast/1","line":49}},
-            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
+            {"kind":"contrast","component":"editor-search","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"kind":"contrast","component":"error-state","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
             {"kind":"contrast","component":"field","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/1","line":38}},
             {"kind":"contrast","component":"field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/0","line":37}},
             {"kind":"contrast","component":"fieldset","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/fieldset.md","pointer":"/contrast/2","line":36}},
-            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
+            {"kind":"contrast","component":"file-browser","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
             {"kind":"contrast","component":"file-input","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"kind":"contrast","component":"filterable-table","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/3","line":83}},
             {"kind":"contrast","component":"form-builder","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/form-builder.md","pointer":"/contrast/1","line":27}},
-            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
-            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
+            {"kind":"contrast","component":"i3-window-frame","part":null,"state":null,"variant":null,"surface":"color.surface.chrome","nativeKey":null,"port":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
+            {"kind":"contrast","component":"kbd","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
             {"kind":"contrast","component":"list","part":null,"state":"hover","variant":null,"surface":"color.interaction.hover.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/1","line":58}},
             {"kind":"contrast","component":"list","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/list.md","pointer":"/contrast/0","line":57}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/0","line":32}},
             {"kind":"contrast","component":"loading-indicator","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/2","line":34}},
             {"kind":"contrast","component":"menu","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/menu.md","pointer":"/contrast/0","line":65}},
-            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
+            {"kind":"contrast","component":"multiselect","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/4","line":64}},
             {"kind":"contrast","component":"number-field","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/number-field.md","pointer":"/contrast/0","line":60}},
             {"kind":"contrast","component":"pagination","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/pagination.md","pointer":"/contrast/2","line":48}},
-            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
+            {"kind":"contrast","component":"popover","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
             {"kind":"contrast","component":"progress","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/progress.md","pointer":"/contrast/1","line":43}},
-            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"range","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"kind":"contrast","component":"repeater","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/4","line":63}},
             {"kind":"contrast","component":"search-field","part":null,"state":null,"variant":null,"surface":"color.surface.input","nativeKey":null,"port":null,"source":{"file":"spec/components/search-field.md","pointer":"/contrast/1","line":60}},
-            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
+            {"kind":"contrast","component":"segmented-control","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/5","line":67}},
             {"kind":"contrast","component":"select","part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/components/select.md","pointer":"/contrast/2","line":64}},
             {"kind":"contrast","component":"settings-panel","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/settings-panel.md","pointer":"/contrast/1","line":60}},
@@ -52333,7 +53053,7 @@
             {"kind":"contrast","component":"terminal","part":null,"state":null,"variant":null,"surface":"color.terminal.bg","nativeKey":null,"port":null,"source":{"file":"spec/components/terminal.md","pointer":"/contrast/5","line":78}},
             {"kind":"contrast","component":"text-field","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/contrast/1","line":77}},
             {"kind":"contrast","component":"textarea","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/contrast/1","line":66}},
-            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"kind":"contrast","component":"time-picker","part":null,"state":null,"variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"kind":"contrast","component":"timeline","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/1","line":47}},
             {"kind":"contrast","component":"tree","part":null,"state":null,"variant":null,"surface":"color.surface.default","nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/1","line":57}},
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.code.selection-bg","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}},
@@ -52413,7 +53133,7 @@
             {"kind":"part","component":"text-field","part":"loading.glyph","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/text-field.md","pointer":"/tokens/loading.glyph","line":66}},
             {"kind":"part","component":"textarea","part":"count.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/count.text","line":53}},
             {"kind":"part","component":"textarea","part":"help.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/textarea.md","pointer":"/tokens/help.text","line":52}},
-            {"kind":"part","component":"time-picker","part":"help.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/help.text","line":39}},
+            {"kind":"part","component":"time-picker","part":"help.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/time-picker.md","pointer":"/tokens/help.text","line":41}},
             {"kind":"part","component":"timeline","part":"secondary.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/secondary.text","line":27}},
             {"kind":"part","component":"toast","part":"count.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/tokens/count.text","line":54}},
             {"kind":"part","component":"tree","part":"secondary.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/secondary.text","line":32}},
@@ -52430,7 +53150,7 @@
             {"kind":"state","component":"toast","part":"fg","state":"stacked","variant":null,"surface":"color.surface.canvas","nativeKey":null,"port":null,"source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked/fg","line":60}}
           ],
           "contrast": [
-            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/18","line":95}},
+            {"fg":"color.text.muted","bg":"color.code.bg","label":"fold marker text","state":null,"source":{"file":"spec/components/code-editor.md","pointer":"/contrast/20","line":97}},
             {"fg":"color.text.muted","bg":"color.code.bg","label":"line numbers on a context row","state":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/5","line":75}},
             {"fg":"color.text.muted","bg":"color.code.selection-bg","label":"muted text on editor selection","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/51","line":55}},
             {"fg":"color.text.muted","bg":"color.diff.added.bg","label":"line numbers on an added row","state":null,"source":{"file":"spec/components/diff-view.md","pointer":"/contrast/6","line":76}},
@@ -52445,13 +53165,13 @@
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text and the range separator on the canvas","state":null,"source":{"file":"spec/components/date-picker.md","pointer":"/contrast/1","line":85}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/combobox.md","pointer":"/contrast/2","line":76}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/field.md","pointer":"/contrast/1","line":38}},
-            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":63}},
+            {"fg":"color.text.muted","bg":"color.surface.canvas","label":"help text on the canvas","state":null,"source":{"file":"spec/components/time-picker.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"muted text on canvas","state":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/6","line":10}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"status, hint and help text on the canvas","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/2","line":65}},
             {"fg":"color.text.muted","bg":"color.surface.canvas","label":"toast stacked fg","state":"stacked","source":{"file":"spec/components/toast.md","pointer":"/stateTokens/stacked","line":60}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame container-inactive fg","state":"container-inactive","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/container-inactive","line":68}},
             {"fg":"color.text.muted","bg":"color.surface.chrome","label":"i3-window-frame default fg","state":"default","source":{"file":"spec/components/i3-window-frame.md","pointer":"/stateTokens/default","line":65}},
-            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/12","line":83}},
+            {"fg":"color.text.muted","bg":"color.surface.chrome","label":"status block separators (decorative)","state":null,"source":{"file":"spec/components/i3-window-frame.md","pointer":"/contrast/13","line":84}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"block glyph on the panel surface","state":null,"source":{"file":"spec/components/loading-indicator.md","pointer":"/contrast/2","line":34}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"caption","state":null,"source":{"file":"spec/components/table.md","pointer":"/contrast/2","line":67}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"count, chip remove glyph and empty-state text","state":null,"source":{"file":"spec/components/filterable-table.md","pointer":"/contrast/3","line":83}},
@@ -52478,21 +53198,21 @@
             {"fg":"color.text.muted","bg":"color.surface.default","label":"remove glyph at rest","state":null,"source":{"file":"spec/components/chip.md","pointer":"/contrast/0","line":54}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"separator on the panel surface","state":null,"source":{"file":"spec/components/breadcrumbs.md","pointer":"/contrast/0","line":45}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/avatar.md","pointer":"/contrast/1","line":46}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":51}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/button-group.md","pointer":"/contrast/1","line":56}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/chart.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":58}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/command-palette.md","pointer":"/contrast/1","line":65}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/contrast/1","line":57}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/description-list.md","pointer":"/contrast/1","line":46}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/disclosure.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":53}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":55}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":54}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":44}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":70}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":51}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":52}},
-            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":71}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/editor-search.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/error-state.md","pointer":"/contrast/1","line":60}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/file-browser.md","pointer":"/contrast/1","line":61}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/kbd.md","pointer":"/contrast/1","line":45}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/multiselect.md","pointer":"/contrast/1","line":77}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/popover.md","pointer":"/contrast/1","line":56}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/range.md","pointer":"/contrast/1","line":52}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/repeater.md","pointer":"/contrast/1","line":59}},
+            {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/contrast/1","line":70}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/skeleton.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/timeline.md","pointer":"/contrast/1","line":47}},
             {"fg":"color.text.muted","bg":"color.surface.default","label":"Supporting content","state":null,"source":{"file":"spec/components/tree.md","pointer":"/contrast/1","line":57}},
@@ -52757,8 +53477,7 @@
             {"kind":"contrast","component":null,"part":null,"state":null,"variant":null,"surface":"color.surface.raised","nativeKey":null,"port":null,"source":{"file":"spec/contrast.json","pointer":"/pairs/9","line":13}},
             {"kind":"part","component":"combobox","part":"group.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/combobox.md","pointer":"/tokens/group.text","line":59}},
             {"kind":"part","component":"diagnostics","part":"hint.text","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/diagnostics.md","pointer":"/tokens/hint.text","line":49}},
-            {"kind":"part","component":"file-input","part":"list.size","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/list.size","line":48}},
-            {"kind":"prose","component":"code-editor","part":null,"state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/code-editor.md","pointer":"body","line":138}}
+            {"kind":"part","component":"file-input","part":"list.size","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-input.md","pointer":"/tokens/list.size","line":48}}
           ],
           "contrast": [
             {"fg":"color.text.subtle","bg":"color.surface.canvas","label":"file sizes on the canvas","state":null,"source":{"file":"spec/components/file-input.md","pointer":"/contrast/3","line":66}},
@@ -52784,24 +53503,24 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/control-height",
-            "line": 295
+            "line": 353
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":35}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":42}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":36}},
+            {"kind":"part","component":"button-group","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":40}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":49}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":41}},
             {"kind":"part","component":"disclosure","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":38}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":38}},
-            {"kind":"part","component":"error-state","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":40}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":38}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":46}},
-            {"kind":"part","component":"popover","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":35}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":45}},
+            {"kind":"part","component":"error-state","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":45}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":45}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":53}},
+            {"kind":"part","component":"popover","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":40}},
             {"kind":"part","component":"range","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":36}},
-            {"kind":"part","component":"repeater","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":36}},
+            {"kind":"part","component":"repeater","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":43}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":46}},
             {"kind":"part","component":"tree","part":"dependency.role-density-comfortable-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-density-comfortable-control-height","line":41}}
           ],
@@ -52823,7 +53542,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/control-padding-x",
-            "line": 307
+            "line": 365
           },
           "provenance": null,
           "aliases": [],
@@ -52848,7 +53567,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/gap",
-            "line": 319
+            "line": 377
           },
           "provenance": null,
           "aliases": [],
@@ -52873,7 +53592,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/icon",
-            "line": 313
+            "line": 371
           },
           "provenance": null,
           "aliases": [],
@@ -52898,7 +53617,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/comfortable/row-height",
-            "line": 301
+            "line": 359
           },
           "provenance": null,
           "aliases": [],
@@ -52923,24 +53642,24 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/control-height",
-            "line": 263
+            "line": 321
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":36}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":43}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":37}},
+            {"kind":"part","component":"button-group","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":41}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":50}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":42}},
             {"kind":"part","component":"disclosure","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":39}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":39}},
-            {"kind":"part","component":"error-state","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":41}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":39}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":47}},
-            {"kind":"part","component":"popover","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":36}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":46}},
+            {"kind":"part","component":"error-state","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":46}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":46}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":54}},
+            {"kind":"part","component":"popover","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":41}},
             {"kind":"part","component":"range","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":37}},
-            {"kind":"part","component":"repeater","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":37}},
+            {"kind":"part","component":"repeater","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":44}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":47}},
             {"kind":"part","component":"tree","part":"dependency.role-density-compact-control-height","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-density-compact-control-height","line":42}}
           ],
@@ -52962,7 +53681,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/control-padding-x",
-            "line": 275
+            "line": 333
           },
           "provenance": null,
           "aliases": [],
@@ -52987,7 +53706,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/gap",
-            "line": 287
+            "line": 345
           },
           "provenance": null,
           "aliases": [],
@@ -53012,7 +53731,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/icon",
-            "line": 281
+            "line": 339
           },
           "provenance": null,
           "aliases": [],
@@ -53037,7 +53756,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/density/compact/row-height",
-            "line": 269
+            "line": 327
           },
           "provenance": null,
           "aliases": [],
@@ -53062,15 +53781,32 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/offset",
-            "line": 347
+            "line": 405
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-offset","line":48}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-focus-offset","line":48}}
+            {"kind":"part","component":"avatar","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-focus-offset","line":32}},
+            {"kind":"part","component":"button-group","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-focus-offset","line":42}},
+            {"kind":"part","component":"chart","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-focus-offset","line":35}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-focus-offset","line":51}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-focus-offset","line":43}},
+            {"kind":"part","component":"description-list","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-focus-offset","line":32}},
+            {"kind":"part","component":"disclosure","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-focus-offset","line":40}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-focus-offset","line":47}},
+            {"kind":"part","component":"error-state","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-focus-offset","line":47}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-focus-offset","line":47}},
+            {"kind":"part","component":"kbd","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-focus-offset","line":31}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-offset","line":55}},
+            {"kind":"part","component":"popover","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-focus-offset","line":42}},
+            {"kind":"part","component":"range","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-focus-offset","line":38}},
+            {"kind":"part","component":"repeater","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-focus-offset","line":45}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-focus-offset","line":48}},
+            {"kind":"part","component":"skeleton","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-focus-offset","line":34}},
+            {"kind":"part","component":"timeline","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-focus-offset","line":34}},
+            {"kind":"part","component":"tree","part":"dependency.role-focus-offset","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-focus-offset","line":43}}
           ],
           "contrast": []
         },
@@ -53090,7 +53826,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/offset-container",
-            "line": 355
+            "line": 413
           },
           "provenance": null,
           "aliases": [],
@@ -53115,7 +53851,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/offset-invalid",
-            "line": 363
+            "line": 421
           },
           "provenance": null,
           "aliases": [],
@@ -53140,7 +53876,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/ring",
-            "line": 329
+            "line": 387
           },
           "provenance": null,
           "aliases": [
@@ -53150,7 +53886,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-focus-ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-ring","line":49}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-focus-ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-focus-ring","line":56}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-focus-ring","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-focus-ring","line":49}}
           ],
           "contrast": []
@@ -53171,7 +53907,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/focus/ring-container",
-            "line": 338
+            "line": 396
           },
           "provenance": null,
           "aliases": [
@@ -53224,7 +53960,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/letter-spacing/terminal",
-            "line": 250
+            "line": 308
           },
           "provenance": null,
           "aliases": [],
@@ -53249,7 +53985,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/caption",
-            "line": 241
+            "line": 299
           },
           "provenance": null,
           "aliases": [],
@@ -53274,7 +54010,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/code",
-            "line": 211
+            "line": 241
           },
           "provenance": null,
           "aliases": [],
@@ -53283,6 +54019,36 @@
           "uses": [],
           "contrast": []
         },
+        "font.line-height.display": {
+          "path": "font.line-height.display",
+          "group": "font",
+          "css": "40px",
+          "variable": "--font-line-height-display",
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "blocked",
+            "reason": "Proposed profile: preview only, not downstream delivery.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/line-height/display",
+            "line": 253
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [],
+          "uses": [],
+          "contrast": []
+        },
         "font.line-height.h1": {
           "path": "font.line-height.h1",
           "group": "font",
@@ -53299,7 +54065,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/h1",
-            "line": 223
+            "line": 281
           },
           "provenance": null,
           "aliases": [],
@@ -53324,7 +54090,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/h2",
-            "line": 229
+            "line": 287
           },
           "provenance": null,
           "aliases": [],
@@ -53349,7 +54115,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/h3",
-            "line": 235
+            "line": 293
           },
           "provenance": null,
           "aliases": [],
@@ -53374,7 +54140,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/reading",
-            "line": 205
+            "line": 235
           },
           "provenance": null,
           "aliases": [],
@@ -53399,7 +54165,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/terminal",
-            "line": 217
+            "line": 247
           },
           "provenance": null,
           "aliases": [],
@@ -53408,6 +54174,36 @@
           "uses": [],
           "contrast": []
         },
+        "font.line-height.title": {
+          "path": "font.line-height.title",
+          "group": "font",
+          "css": "32px",
+          "variable": "--font-line-height-title",
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "blocked",
+            "reason": "Proposed profile: preview only, not downstream delivery.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/line-height/title",
+            "line": 267
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [],
+          "uses": [],
+          "contrast": []
+        },
         "font.line-height.ui-lg": {
           "path": "font.line-height.ui-lg",
           "group": "font",
@@ -53424,7 +54220,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/ui-lg",
-            "line": 199
+            "line": 229
           },
           "provenance": null,
           "aliases": [],
@@ -53449,14 +54245,14 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/ui-md",
-            "line": 193
+            "line": 223
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-md","line":50}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-md","line":57}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-line-height-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-line-height-ui-md","line":50}}
           ],
           "contrast": []
@@ -53477,14 +54273,14 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/line-height/ui-sm",
-            "line": 187
+            "line": 217
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-sm","line":51}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-line-height-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-line-height-ui-sm","line":58}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-line-height-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-line-height-ui-sm","line":51}}
           ],
           "contrast": []
@@ -53505,7 +54301,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/caption",
-            "line": 177
+            "line": 207
           },
           "provenance": null,
           "aliases": [],
@@ -53539,6 +54335,36 @@
           "uses": [],
           "contrast": []
         },
+        "font.size.display": {
+          "path": "font.size.display",
+          "group": "font",
+          "css": "32px",
+          "variable": "--font-size-display",
+          "description": "Page heroes and metric figures on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "blocked",
+            "reason": "Proposed profile: preview only, not downstream delivery.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/size/display",
+            "line": 159
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [],
+          "uses": [],
+          "contrast": []
+        },
         "font.size.h1": {
           "path": "font.size.h1",
           "group": "font",
@@ -53555,7 +54381,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/h1",
-            "line": 159
+            "line": 189
           },
           "provenance": null,
           "aliases": [],
@@ -53580,14 +54406,14 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/h2",
-            "line": 165
+            "line": 195
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-font-size-h2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-font-size-h2","line":38}}
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-font-size-h2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-font-size-h2","line":44}}
           ],
           "contrast": []
         },
@@ -53607,7 +54433,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/font/size/h3",
-            "line": 171
+            "line": 201
           },
           "provenance": null,
           "aliases": [],
@@ -53666,6 +54492,36 @@
           "uses": [],
           "contrast": []
         },
+        "font.size.title": {
+          "path": "font.size.title",
+          "group": "font",
+          "css": "24px",
+          "variable": "--font-size-title",
+          "description": "Page titles above h1 on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "eligibility": {
+            "action": "blocked",
+            "reason": "Proposed profile: preview only, not downstream delivery.",
+            "decisionIds": []
+          },
+          "source": {
+            "file": "tokens/foundations.tokens.json",
+            "pointer": "/font/size/title",
+            "line": 174
+          },
+          "provenance": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          },
+          "aliases": [],
+          "usedByAliases": [],
+          "unmappedPorts": [],
+          "uses": [],
+          "contrast": []
+        },
         "font.size.ui-lg": {
           "path": "font.size.ui-lg",
           "group": "font",
@@ -53714,7 +54570,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-md","line":52}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-md","line":59}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-size-ui-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-size-ui-md","line":52}}
           ],
           "contrast": []
@@ -53742,7 +54598,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-sm","line":53}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-font-size-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-font-size-ui-sm","line":60}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-font-size-ui-sm","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-font-size-ui-sm","line":53}}
           ],
           "contrast": []
@@ -53770,7 +54626,7 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-font-weight-bold","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-font-weight-bold","line":32}}
+            {"kind":"part","component":"avatar","part":"dependency.role-font-weight-bold","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-font-weight-bold","line":33}}
           ],
           "contrast": []
         },
@@ -53815,7 +54671,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/size/lg",
-            "line": 482
+            "line": 540
           },
           "provenance": null,
           "aliases": [],
@@ -53840,14 +54696,14 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/size/md",
-            "line": 476
+            "line": 534
           },
           "provenance": null,
           "aliases": [],
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-icon-size-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-icon-size-md","line":54}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-icon-size-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-icon-size-md","line":61}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-icon-size-md","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-icon-size-md","line":54}}
           ],
           "contrast": []
@@ -53868,7 +54724,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/size/sm",
-            "line": 470
+            "line": 528
           },
           "provenance": null,
           "aliases": [],
@@ -53893,7 +54749,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/icon/stroke",
-            "line": 489
+            "line": 547
           },
           "provenance": null,
           "aliases": [],
@@ -53918,7 +54774,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/layout/app-max",
-            "line": 429
+            "line": 487
           },
           "provenance": null,
           "aliases": [],
@@ -53943,7 +54799,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/layout/content-max",
-            "line": 421
+            "line": 479
           },
           "provenance": null,
           "aliases": [],
@@ -53968,7 +54824,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/layout/measure",
-            "line": 416
+            "line": 474
           },
           "provenance": null,
           "aliases": [],
@@ -53993,7 +54849,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/motion/duration/base",
-            "line": 381
+            "line": 439
           },
           "provenance": null,
           "aliases": [],
@@ -54018,7 +54874,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/motion/duration/fast",
-            "line": 375
+            "line": 433
           },
           "provenance": null,
           "aliases": [],
@@ -54043,7 +54899,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/motion/duration/slow",
-            "line": 387
+            "line": 445
           },
           "provenance": null,
           "aliases": [],
@@ -54075,25 +54931,25 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-radius-none","line":33}},
-            {"kind":"part","component":"button-group","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-radius-none","line":37}},
-            {"kind":"part","component":"chart","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-radius-none","line":38}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-radius-none","line":44}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-radius-none","line":39}},
-            {"kind":"part","component":"description-list","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-radius-none","line":32}},
-            {"kind":"part","component":"disclosure","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-radius-none","line":40}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-radius-none","line":40}},
-            {"kind":"part","component":"error-state","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-radius-none","line":42}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-radius-none","line":40}},
-            {"kind":"part","component":"kbd","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-radius-none","line":31}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-radius-none","line":55}},
-            {"kind":"part","component":"popover","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-radius-none","line":37}},
-            {"kind":"part","component":"range","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-radius-none","line":38}},
-            {"kind":"part","component":"repeater","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-radius-none","line":38}},
+            {"kind":"part","component":"avatar","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-radius-none","line":34}},
+            {"kind":"part","component":"button-group","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-radius-none","line":43}},
+            {"kind":"part","component":"chart","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-radius-none","line":39}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-radius-none","line":52}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-radius-none","line":45}},
+            {"kind":"part","component":"description-list","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-radius-none","line":33}},
+            {"kind":"part","component":"disclosure","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-radius-none","line":41}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-radius-none","line":48}},
+            {"kind":"part","component":"error-state","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-radius-none","line":48}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-radius-none","line":48}},
+            {"kind":"part","component":"kbd","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-radius-none","line":32}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-radius-none","line":62}},
+            {"kind":"part","component":"popover","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-radius-none","line":43}},
+            {"kind":"part","component":"range","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-radius-none","line":39}},
+            {"kind":"part","component":"repeater","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-radius-none","line":46}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-radius-none","line":55}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-radius-none","line":34}},
-            {"kind":"part","component":"timeline","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-radius-none","line":34}},
-            {"kind":"part","component":"tree","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-radius-none","line":43}}
+            {"kind":"part","component":"skeleton","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-radius-none","line":35}},
+            {"kind":"part","component":"timeline","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-radius-none","line":35}},
+            {"kind":"part","component":"tree","part":"dependency.role-radius-none","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-radius-none","line":44}}
           ],
           "contrast": []
         },
@@ -54113,7 +54969,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/shadow/floating",
-            "line": 398
+            "line": 456
           },
           "provenance": null,
           "aliases": [
@@ -54202,25 +55058,25 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-space-12","line":34}},
-            {"kind":"part","component":"button-group","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-12","line":38}},
-            {"kind":"part","component":"chart","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-12","line":39}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-12","line":45}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-12","line":40}},
-            {"kind":"part","component":"description-list","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-12","line":33}},
-            {"kind":"part","component":"disclosure","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-12","line":41}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-12","line":41}},
-            {"kind":"part","component":"error-state","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-12","line":43}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-12","line":41}},
-            {"kind":"part","component":"kbd","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-12","line":32}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-12","line":56}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-12","line":38}},
-            {"kind":"part","component":"range","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-12","line":39}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-12","line":39}},
+            {"kind":"part","component":"avatar","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-space-12","line":35}},
+            {"kind":"part","component":"button-group","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-12","line":44}},
+            {"kind":"part","component":"chart","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-12","line":40}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-12","line":53}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-12","line":46}},
+            {"kind":"part","component":"description-list","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-12","line":34}},
+            {"kind":"part","component":"disclosure","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-12","line":42}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-12","line":49}},
+            {"kind":"part","component":"error-state","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-12","line":49}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-12","line":49}},
+            {"kind":"part","component":"kbd","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-12","line":33}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-12","line":63}},
+            {"kind":"part","component":"popover","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-12","line":44}},
+            {"kind":"part","component":"range","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-12","line":40}},
+            {"kind":"part","component":"repeater","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-12","line":47}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-12","line":56}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-12","line":35}},
-            {"kind":"part","component":"timeline","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-12","line":35}},
-            {"kind":"part","component":"tree","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-12","line":44}}
+            {"kind":"part","component":"skeleton","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-12","line":36}},
+            {"kind":"part","component":"timeline","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-12","line":36}},
+            {"kind":"part","component":"tree","part":"dependency.role-space-12","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-12","line":45}}
           ],
           "contrast": []
         },
@@ -54247,12 +55103,12 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-16","line":46}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-16","line":42}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-16","line":39}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-16","line":54}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-16","line":50}},
+            {"kind":"part","component":"popover","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-16","line":45}},
             {"kind":"part","component":"segmented-control","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-16","line":57}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-16","line":36}},
-            {"kind":"part","component":"tree","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-16","line":45}}
+            {"kind":"part","component":"skeleton","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-16","line":37}},
+            {"kind":"part","component":"tree","part":"dependency.role-space-16","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-16","line":46}}
           ],
           "contrast": []
         },
@@ -54279,25 +55135,9 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"avatar","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/avatar.md","pointer":"/tokens/dependency.role-space-2","line":35}},
-            {"kind":"part","component":"button-group","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-2","line":39}},
-            {"kind":"part","component":"chart","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-2","line":47}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-2","line":41}},
-            {"kind":"part","component":"description-list","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-2","line":34}},
-            {"kind":"part","component":"disclosure","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-2","line":42}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-2","line":42}},
-            {"kind":"part","component":"error-state","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-2","line":44}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-2","line":43}},
-            {"kind":"part","component":"kbd","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-2","line":33}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-2","line":57}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"range","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-2","line":40}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-2","line":58}},
-            {"kind":"part","component":"skeleton","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/skeleton.md","pointer":"/tokens/dependency.role-space-2","line":37}},
-            {"kind":"part","component":"timeline","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-2","line":36}},
-            {"kind":"part","component":"tree","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-2","line":46}}
+            {"kind":"part","component":"kbd","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-2","line":34}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-2","line":64}},
+            {"kind":"part","component":"range","part":"dependency.role-space-2","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-2","line":41}}
           ],
           "contrast": []
         },
@@ -54324,9 +55164,9 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-24","line":58}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-24","line":41}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-24","line":59}}
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-24","line":65}},
+            {"kind":"part","component":"repeater","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-24","line":48}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-space-24","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-24","line":58}}
           ],
           "contrast": []
         },
@@ -54380,11 +55220,11 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-4","line":40}},
+            {"kind":"part","component":"button-group","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-4","line":45}},
             {"kind":"part","component":"description-list","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-4","line":35}},
-            {"kind":"part","component":"kbd","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-4","line":34}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-4","line":59}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-4","line":60}},
+            {"kind":"part","component":"kbd","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/kbd.md","pointer":"/tokens/dependency.role-space-4","line":35}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-4","line":66}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-4","line":59}},
             {"kind":"part","component":"timeline","part":"dependency.role-space-4","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/timeline.md","pointer":"/tokens/dependency.role-space-4","line":37}}
           ],
           "contrast": []
@@ -54437,20 +55277,20 @@
           "usedByAliases": [],
           "unmappedPorts": [],
           "uses": [
-            {"kind":"part","component":"button-group","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-8","line":41}},
+            {"kind":"part","component":"button-group","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/button-group.md","pointer":"/tokens/dependency.role-space-8","line":46}},
             {"kind":"part","component":"chart","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/chart.md","pointer":"/tokens/dependency.role-space-8","line":41}},
-            {"kind":"part","component":"command-palette","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-8","line":48}},
-            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-8","line":42}},
+            {"kind":"part","component":"command-palette","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/command-palette.md","pointer":"/tokens/dependency.role-space-8","line":55}},
+            {"kind":"part","component":"compact-dashboard","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/compact-dashboard.md","pointer":"/tokens/dependency.role-space-8","line":47}},
             {"kind":"part","component":"description-list","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/description-list.md","pointer":"/tokens/dependency.role-space-8","line":36}},
             {"kind":"part","component":"disclosure","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/disclosure.md","pointer":"/tokens/dependency.role-space-8","line":43}},
-            {"kind":"part","component":"editor-search","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-8","line":43}},
-            {"kind":"part","component":"error-state","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-8","line":45}},
-            {"kind":"part","component":"file-browser","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-8","line":44}},
-            {"kind":"part","component":"multiselect","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-8","line":60}},
-            {"kind":"part","component":"popover","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-8","line":41}},
-            {"kind":"part","component":"range","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-8","line":41}},
-            {"kind":"part","component":"repeater","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-8","line":42}},
-            {"kind":"part","component":"segmented-control","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-8","line":61}},
+            {"kind":"part","component":"editor-search","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/editor-search.md","pointer":"/tokens/dependency.role-space-8","line":50}},
+            {"kind":"part","component":"error-state","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/error-state.md","pointer":"/tokens/dependency.role-space-8","line":50}},
+            {"kind":"part","component":"file-browser","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/file-browser.md","pointer":"/tokens/dependency.role-space-8","line":51}},
+            {"kind":"part","component":"multiselect","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/multiselect.md","pointer":"/tokens/dependency.role-space-8","line":67}},
+            {"kind":"part","component":"popover","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/popover.md","pointer":"/tokens/dependency.role-space-8","line":46}},
+            {"kind":"part","component":"range","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/range.md","pointer":"/tokens/dependency.role-space-8","line":42}},
+            {"kind":"part","component":"repeater","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/repeater.md","pointer":"/tokens/dependency.role-space-8","line":49}},
+            {"kind":"part","component":"segmented-control","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/segmented-control.md","pointer":"/tokens/dependency.role-space-8","line":60}},
             {"kind":"part","component":"tree","part":"dependency.role-space-8","state":null,"variant":null,"surface":null,"nativeKey":null,"port":null,"source":{"file":"spec/components/tree.md","pointer":"/tokens/dependency.role-space-8","line":47}}
           ],
           "contrast": []
@@ -54471,7 +55311,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/canvas",
-            "line": 500
+            "line": 558
           },
           "provenance": null,
           "aliases": [],
@@ -54496,7 +55336,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/dialog",
-            "line": 512
+            "line": 570
           },
           "provenance": null,
           "aliases": [],
@@ -54523,7 +55363,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/drawer",
-            "line": 509
+            "line": 567
           },
           "provenance": null,
           "aliases": [],
@@ -54550,7 +55390,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/popover",
-            "line": 506
+            "line": 564
           },
           "provenance": null,
           "aliases": [],
@@ -54577,7 +55417,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/raised",
-            "line": 503
+            "line": 561
           },
           "provenance": null,
           "aliases": [],
@@ -54602,7 +55442,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/skip-link",
-            "line": 518
+            "line": 576
           },
           "provenance": null,
           "aliases": [],
@@ -54627,7 +55467,7 @@
           "source": {
             "file": "tokens/foundations.tokens.json",
             "pointer": "/z/toast",
-            "line": 515
+            "line": 573
           },
           "provenance": null,
           "aliases": [],
diff --git a/exports/tokens.css b/exports/tokens.css
index 0d0600c1b..c42ff00ae 100644
--- a/exports/tokens.css
+++ b/exports/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
diff --git a/exports/tokens.resolved.json b/exports/tokens.resolved.json
index 0c68c73b6..101fbd04e 100644
--- a/exports/tokens.resolved.json
+++ b/exports/tokens.resolved.json
@@ -7090,6 +7090,42 @@
             "decisionIds": []
           }
         },
+        "font.size.display": {
+          "type": "dimension",
+          "value": {
+            "value": 32,
+            "unit": "px"
+          },
+          "css": "32px",
+          "aliasOf": null,
+          "description": "Page heroes and metric figures on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
+        },
+        "font.size.title": {
+          "type": "dimension",
+          "value": {
+            "value": 24,
+            "unit": "px"
+          },
+          "css": "24px",
+          "aliasOf": null,
+          "description": "Page titles above h1 on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
+        },
         "font.size.h1": {
           "type": "dimension",
           "value": {
@@ -7270,6 +7306,42 @@
             "decisionIds": []
           }
         },
+        "font.line-height.display": {
+          "type": "dimension",
+          "value": {
+            "value": 40,
+            "unit": "px"
+          },
+          "css": "40px",
+          "aliasOf": null,
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
+        },
+        "font.line-height.title": {
+          "type": "dimension",
+          "value": {
+            "value": 32,
+            "unit": "px"
+          },
+          "css": "32px",
+          "aliasOf": null,
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
+        },
         "font.line-height.h1": {
           "type": "dimension",
           "value": {
@@ -15132,6 +15204,42 @@
             "decisionIds": []
           }
         },
+        "font.size.display": {
+          "type": "dimension",
+          "value": {
+            "value": 32,
+            "unit": "px"
+          },
+          "css": "32px",
+          "aliasOf": null,
+          "description": "Page heroes and metric figures on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "historical-only",
+            "reason": "Historical fidelity only; preserve all documented limitations and deprecations.",
+            "decisionIds": []
+          }
+        },
+        "font.size.title": {
+          "type": "dimension",
+          "value": {
+            "value": 24,
+            "unit": "px"
+          },
+          "css": "24px",
+          "aliasOf": null,
+          "description": "Page titles above h1 on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "historical-only",
+            "reason": "Historical fidelity only; preserve all documented limitations and deprecations.",
+            "decisionIds": []
+          }
+        },
         "font.size.h1": {
           "type": "dimension",
           "value": {
@@ -15312,6 +15420,42 @@
             "decisionIds": []
           }
         },
+        "font.line-height.display": {
+          "type": "dimension",
+          "value": {
+            "value": 40,
+            "unit": "px"
+          },
+          "css": "40px",
+          "aliasOf": null,
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "historical-only",
+            "reason": "Historical fidelity only; preserve all documented limitations and deprecations.",
+            "decisionIds": []
+          }
+        },
+        "font.line-height.title": {
+          "type": "dimension",
+          "value": {
+            "value": 32,
+            "unit": "px"
+          },
+          "css": "32px",
+          "aliasOf": null,
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "historical-only",
+            "reason": "Historical fidelity only; preserve all documented limitations and deprecations.",
+            "decisionIds": []
+          }
+        },
         "font.line-height.h1": {
           "type": "dimension",
           "value": {
@@ -23234,6 +23378,42 @@
             "decisionIds": []
           }
         },
+        "font.size.display": {
+          "type": "dimension",
+          "value": {
+            "value": 32,
+            "unit": "px"
+          },
+          "css": "32px",
+          "aliasOf": null,
+          "description": "Page heroes and metric figures on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "blocked",
+            "reason": "Proposed profile: preview only, not downstream delivery.",
+            "decisionIds": []
+          }
+        },
+        "font.size.title": {
+          "type": "dimension",
+          "value": {
+            "value": 24,
+            "unit": "px"
+          },
+          "css": "24px",
+          "aliasOf": null,
+          "description": "Page titles above h1 on the portal (D-037).",
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "blocked",
+            "reason": "Proposed profile: preview only, not downstream delivery.",
+            "decisionIds": []
+          }
+        },
         "font.size.h1": {
           "type": "dimension",
           "value": {
@@ -23414,6 +23594,42 @@
             "decisionIds": []
           }
         },
+        "font.line-height.display": {
+          "type": "dimension",
+          "value": {
+            "value": 40,
+            "unit": "px"
+          },
+          "css": "40px",
+          "aliasOf": null,
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "blocked",
+            "reason": "Proposed profile: preview only, not downstream delivery.",
+            "decisionIds": []
+          }
+        },
+        "font.line-height.title": {
+          "type": "dimension",
+          "value": {
+            "value": 32,
+            "unit": "px"
+          },
+          "css": "32px",
+          "aliasOf": null,
+          "description": null,
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-037",
+          "eligibility": {
+            "action": "blocked",
+            "reason": "Proposed profile: preview only, not downstream delivery.",
+            "decisionIds": []
+          }
+        },
         "font.line-height.h1": {
           "type": "dimension",
           "value": {
diff --git a/package.json b/package.json
index 3e1d292d9..963654156 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "4.0.0",
   "private": true,
   "type": "module",
-  "description": "j3w1 UI Theme Spec: canonical design tokens, component rules, a generated single-page visual specification, and machine exports for agents. The repository owns the theme; j3w1.github.io demonstrates it.",
+  "description": "j3w1 UI Theme Spec: canonical design tokens, component rules, a generated visual specification (a reference hub with detail pages), and machine exports for agents. The repository owns the theme; j3w1.github.io demonstrates it.",
   "engines": {
     "node": "24.x",
     "npm": ">=10"
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 42883d217..4e95cd775 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -2,62 +2,72 @@
 
 # Consuming j3w1 components
 
-Use `@j3w1/ui` in web applications that support Custom Elements. Its native
+`@j3w1/ui` serves web applications that support Custom Elements. Native
 children stay real HTML, so labels, form ownership, validation, fieldsets and
-reset keep browser semantics. The canonical design contract stays in `tokens/`
-and `spec/`.
-
-An empty `<j3w1-text-field>` does not invent a label or an input. Start from the
-complete maintained markup on the component's page.
+reset keep browser semantics. The design contract stays in `tokens/` and
+`spec/`. An empty `<j3w1-text-field>` invents no label or input: start from
+the maintained markup on the component's page.
 
 ## Install and pin
 
-- **1.0.0** makes True Black / Rose the default; it is a major upgrade from
-  0.1.0. Read `docs/true-black-rose-migration.md` before you replace old tokens.
-- **2.0.0** is also major: D-029 lifts the dim terminal slots and two code syntax
-  reds, and D-030 adds opt-in `code.hued.*` syntax roles. Component behaviour is
-  unchanged. Read the 2.0.0 changelog entry before you upgrade from 1.x.
-- **3.0.0** is major too: D-032 makes terminal slot 6 coral `#ff7a66`, gives the
-  prompt its own background role, changes the prompt text to bright rose
-  `#ffa2a7` and removes `color.primitive.ansi-readable.6`. Component behaviour
-  is unchanged. Read the 3.0.0 changelog entry before you upgrade.
-
-Keep the exact package version and your package-manager lockfile in source
-control.
+Keep the exact package version and your lockfile in source control.
 
+<!-- ui-install:start -->
 ```sh
-npm install --save-exact @j3w1/ui@3.1.0
+npm install --save-exact @j3w1/ui@4.0.0
 ```
+<!-- ui-install:end -->
 
-That command needs npm publication, which is an owner release action. Before
-publication:
-
-1. Download the release tarball.
-2. Check it against its published digest.
-3. Install the local file:
+That needs npm publication, an owner release action; do not assume it
+happened. Until then, download the release tarball, check it against its
+published digest and install the file:
 
+<!-- ui-tarball:start -->
 ```sh
-npm install --save-exact ./j3w1-ui-3.1.0.tgz
+npm install --save-exact ./j3w1-ui-4.0.0.tgz
 ```
+<!-- ui-tarball:end -->
 
-The repository builds this same artifact with `npm run ui:build` and
-`npm run ui:pack`. Never use a branch URL in place of a release pin. Do not
-assume the package is published just because this guide exists.
+`npm run ui:build` and `npm run ui:pack` build the same artifact here. Never
+pin a branch URL.
 
 ## Load one component
 
-**Choices.** Version 1.1.0 adds theme-owned single and multiple choices (D-025).
-
-- Use `j3w1-select` when the open list must use j3w1 colors. A bare native
-  select is only the no-JavaScript fallback.
-- The component keeps its native select for FormData, required validation,
-  defaults, disabled fieldsets and reset. The visible control is a select-only
-  combobox or a multiselectable listbox.
-- Use the separate `j3w1-combobox` when users need to type and filter
-  suggestions.
+```js
+import '@j3w1/ui/tokens.css';
+import '@j3w1/ui/styles/text-field.css';
+import '@j3w1/ui/register/text-field';
+```
 
-For existing application markup, the supported enhancement applies the same
-renderer without moving the native controls or changing their names:
+Load the token CSS once, then copy the component's maintained markup. A
+registration entry loads the nested registrations it needs, and a stylesheet
+carries its full style closure. `@j3w1/ui/register` and `@j3w1/ui/styles.css`
+load the whole catalogue, for a gallery; ordinary apps import per component.
+
+- Class imports such as `@j3w1/ui/components/text-field` have no registration
+  side effects and are safe during SSR; register in the browser.
+- Registering the same module twice is safe; a foreign class already
+  registered under the same name is rejected. Use one package version per
+  document.
+- Compact is the default density (D-038); set `data-density="comfortable"` on
+  the document or a containing element to opt in to the larger mode.
+- No font binaries are bundled; the stack falls back to locally installed
+  monospace fonts.
+- Component CSS is scoped to its tag: load it after broad resets and avoid
+  later selectors that restyle every button or input. Customise only through
+  the semantic token variables, layout and documented classes. Scope any
+  deliberate host override and record it in your integration; a new literal
+  colour is a deviation, not a theme variant. Keep focus,
+  selection, contrast and forced-colours behaviour.
+
+### Themed choices, dates and native controls
+
+`j3w1-select` renders its open list in theme colours (D-025) as a select-only
+combobox or a multiselectable listbox; its native select stays the source of
+FormData, validation, defaults, disabled fieldsets and reset, and the
+no-JavaScript fallback. Use `j3w1-combobox` when users type to filter. To
+enhance existing application markup without moving native controls or
+changing their names:
 
 ```js
 import '@j3w1/ui/tokens.css';
@@ -69,230 +79,129 @@ const controls = enhanceControls(document.querySelector('#application'));
 controls.destroy();
 ```
 
-- It watches inserted and removed controls inside that root only.
-- Vue and other frameworks keep owning their native selects and option values;
-  normal value bindings and change handlers keep working.
-- In Vue, call it after mount and destroy it in `onBeforeUnmount`. The official
-  demo does this.
-- Complete `select` copy bundles include the same renderer. Do not hand-roll a
-  different dropdown in each application.
-
-Single-choice keys: Enter/Space or arrows open; arrows and Home/End move; typing
-finds an option; Enter/Space commits; Escape/Tab close.
-
-Multiple-choice keys: arrows move; Space or click toggles; Shift with arrows
-selects a range; Ctrl/Command+A selects or clears all enabled options.
-
-The open list, selected fill, check mark, focus boundary and error message are
-theme-rendered. The visible control gets the original accessible label and
-descriptions.
-
-**Dates and times.** Date and time inputs also get a themed editor.
-
-- Dates: explicit YYYY-MM-DD entry and a calendar. Arrows navigate, Home/End
-  move within a week, PageUp/Down change month, Enter/Space choose, Escape
-  closes. The calendar follows the native min, max and step constraints.
-- Times: HH:MM or HH:MM:SS entry, plus buttons that apply the native step;
-  step="any" disables stepping.
-- Labels, native constraints, defaults, reset and read-only/disabled states stay
-  connected to the original inputs, which remain the no-JavaScript fallback.
-- If an engine exposes date/time inputs as text, the enhancement supplies ISO
-  parsing, range/step validation and time stepping itself. The same form value,
-  visible validation and reset contract applies there.
-
-**Other controls.** Within the enhanced root, the stylesheet also themes
-ordinary checkbox, radio, range and file-button chrome, and removes browser
-number spinners; use the Number field's explicit step controls instead.
-Browser-owned file and system dialogs stay host UI.
-
-**Testing.** The native form element stays queryable for data integration, but
-browser tests should use the visible combobox/listbox: Playwright `selectOption` on
-the hidden native select does not test the rendered menu. Click real options and
-use the keyboard.
-
-**One component.**
-
-```js
-import '@j3w1/ui/tokens.css';
-import '@j3w1/ui/styles/text-field.css';
-import '@j3w1/ui/register/text-field';
-```
-
-1. Copy the maintained text-field markup from its component page.
-2. Load token CSS once in your app.
-
-The registration entry loads the nested registrations it needs, and the
-stylesheet includes its full style dependency closure.
-`@j3w1/ui/register` and `@j3w1/ui/styles.css` load the entire catalogue; use them
-for a complete gallery and prefer per-component imports in ordinary apps.
-
-Class imports such as `@j3w1/ui/components/text-field` have no registration side
-effects and are safe during SSR; register in the browser. Importing the same
-registration module again is safe. A foreign class already registered under the
-same name is rejected. Use one package version per document.
+- It watches controls inserted into or removed from that root only.
+  Frameworks keep owning their native selects,
+  value bindings and change handlers; in Vue, call it after mount and destroy
+  it in `onBeforeUnmount`. Complete `select` copy bundles include the same
+  renderer; do not hand-roll another dropdown.
+- Date and time inputs get a themed editor (ISO entry, a calendar, step
+  buttons) bound to the native constraints, defaults and reset; the original
+  inputs stay the no-JavaScript fallback. Where an engine exposes them as
+  text, the enhancement validates ISO values, range and step itself. Keys are
+  on each component page.
+- Checkbox, radio, range and file-button chrome is themed; number spinners are
+  removed in favour of the Number field's step controls. Browser-owned file
+  and system dialogs stay host UI.
+- Test the visible combobox or listbox: Playwright `selectOption` on the
+  hidden native select does not exercise the rendered menu.
 
 ## Vue 3 JavaScript SFCs
 
-1. Tell the Vue compiler that `j3w1-*` tags are Custom Elements in your Vite
-   config:
-
-   ```js
-   import { defineConfig } from 'vite';
-   import vue from '@vitejs/plugin-vue';
-   export default defineConfig({
-     plugins: [vue({ template: { compilerOptions: {
-       isCustomElement: tag => tag.startsWith('j3w1-'),
-     } } })],
-   });
-   ```
+Declare `j3w1-*` tags as Custom Elements in the Vite config, import
+registration in the browser entry or the SFC, and put the maintained native
+markup in the template:
 
-2. Import registration in your browser entry or in the SFC that uses the
-   component.
-3. Put the maintained native markup in the template.
-
-Bindings:
-
-- Native forms: `@submit.prevent` and `new FormData(event.target)`.
-- Custom events: `@j3w1-change="onChange"`; read the payload from `event.detail`.
-- Objects and arrays: `.prop`, for example `:data.prop="series"`.
-- A ref exposes the typed custom-element methods after mount.
-- When Vue owns the value, use the native input's `v-model`. Do not assume a
-  custom wrapper implements Vue's component `modelValue` convention.
+```js
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+export default defineConfig({
+  plugins: [vue({ template: { compilerOptions: {
+    isCustomElement: tag => tag.startsWith('j3w1-'),
+  } } })],
+});
+```
 
-The full JavaScript SFC demo in `apps/demo` is an independently written package
-consumer.
+Submit with `@submit.prevent` and `new FormData(event.target)`; listen with
+`@j3w1-change="onChange"` and read `event.detail`; pass objects and arrays as
+properties (`:data.prop="series"`); bind values with the native input's
+`v-model`, not a component `modelValue`. A ref exposes the element's methods
+after mount. `apps/demo` is an independent package consumer.
 
 ## React, Astro and plain HTML
 
-**React 19** supports Custom Elements.
-
-- Use native JSX children, and `defaultValue` for an uncontrolled native input.
-- Use a ref for complex properties and imperative APIs.
-- `addEventListener('j3w1-change', handler)` works consistently; remove the
-  listener in the effect cleanup.
-- A native form's `onSubmit` receives the real form.
-
-**Astro** renders the maintained markup statically.
+**React 19.** Use native JSX children and `defaultValue` for an uncontrolled
+input, a ref for complex properties and methods, and
+`addEventListener('j3w1-change', handler)` removed in the effect cleanup. A
+native form's `onSubmit` receives the real form.
 
-- Import the CSS in frontmatter.
-- Import registration in a browser `<script>`. Never register Custom Elements in
-  server frontmatter.
-- Essential labels and content are visible before JavaScript runs. Complex
-  interactive controls document their JavaScript limits.
+**Astro.** Import CSS in frontmatter and registration in a browser `<script>`,
+never in server frontmatter.
 
-**Plain HTML.** Use the copy distribution's `index.html`, or serve the package's
-`dist` directory and load its relative ESM registration module with
-`<script type="module">`. Serve it over HTTP; loading module files from a `file:`
-URL is not supported. A complete copy bundle has no bare runtime imports and no
-dependency on the documentation website.
+**Plain HTML.** Use the copy bundle's `index.html`, or serve the package's
+`dist` directory over HTTP and load its relative ESM registration module with
+`<script type="module">`; `file:` URLs are not supported. A complete copy
+bundle has no bare runtime imports and does not depend on this website.
 
 ## Attributes, properties and events
 
-- Boolean attributes work by presence: `disabled="false"` still disables a
-  control. Remove the attribute or set `.disabled = false`.
-- Attributes hold strings. Arrays, objects and native `File` instances go in
-  properties. The generated API table and declarations list each component's
-  properties and methods.
-- Native input attributes set defaults. Setting `.value` or `.checked` changes
-  the current state without faking a user event. Native `form.reset()` restores
-  defaults.
-- A radio group's value names the checked native option. Multiple selections
-  expose arrays where the API declares them.
-- Native input and change events keep their original behavior.
-- Documented `j3w1-*` events are bubbling, composed, cancelable `CustomEvent`s
-  with a structured `detail`. Canceling one controls a default action only when
-  its API says so; canceling a reporting event does not undo a value change.
+- Boolean attributes work by presence: `disabled="false"` still disables.
+  Remove the attribute or set `.disabled = false`.
+- Arrays, objects and `File` instances go in properties; the generated API
+  table lists them.
+- Setting `.value` or `.checked` changes state without faking a user event;
+  native `form.reset()` restores the defaults.
+- Native input and change events behave as usual. Documented `j3w1-*` events
+  are bubbling, composed, cancelable `CustomEvent`s with a structured
+  `detail`; cancelling one stops a default action only where its API says so,
+  and never undoes a value change it reports.
 
 ## Forms and validation
 
-- Keep the native control's `name`, value, label and form relationships intact.
-- `FormData` includes successful native controls; unchecked checkboxes and
-  disabled fields are left out. A switch uses its documented native hidden value.
-- Required, min/max, pattern and custom validity are your choices; the package
-  infers no business validation. Use `checkValidity()` or `reportValidity()`, and
-  keep the canonical error-summary and focus-recovery rules for multi-field forms.
-- File input exposes the selected local files and never uploads them.
-- Authentication, persistence, authorization, network retries and domain policy
-  belong to your app. The demo labels its local simulations. Developer views
-  never run code.
+- Keep each native control's `name`, label and form relationships. `FormData`
+  holds successful native controls only. Validation rules, uploads,
+  persistence and authorisation are your app's; use `checkValidity()` or
+  `reportValidity()`.
 
 ## Composition, lifecycle and styling
 
-The package uses light DOM, so native semantics and static content survive.
-Native children are the composition surface; there are no hidden Shadow DOM
-slots to guess.
-
-- Keep the canonical class names and ARIA relationships from the maintained
-  examples.
-- Give every instance unique IDs, and update all `for`, `aria-*` and fragment
-  references together.
-- Disconnecting an instance removes its listeners, timers and open overlays;
-  reconnecting reattaches behavior.
-- If your framework replaces the native children of a connected instance, call
-  `refresh()` after the DOM update. Do not let a framework and a widget both
-  own or reorder the same child collection.
-
-Density and fonts:
-
-- Set `data-density="compact"` or `data-density="comfortable"` on the document
-  or a containing element. Tokens include both modes.
-- The default font stack falls back to locally installed monospace fonts. No
-  font binaries are bundled; get any optional font from its publisher under its
-  own license.
-
-Styling:
-
-- Component CSS is scoped to its custom tag. Load it after broad application
-  resets, and avoid later selectors that restyle every button or input.
-- Customize only with the canonical semantic token variables, layout and
-  documented classes. New literal colors or changed design meaning are a
-  deviation, not an official theme variant.
-- Keep focus, selection, contrast and forced-colors behavior. Scope any
-  deliberate host override and record it in your integration.
+- Light DOM: native children are the composition surface. Give every instance
+  unique IDs and update each `for`, `aria-*` and fragment reference with
+  them. Call `refresh()` after your framework replaces the children of a
+  connected instance, and never let a framework and a widget both own the
+  same children. Disconnecting removes listeners, timers and open overlays;
+  reconnecting reattaches them.
 
 ## Copy a complete bundle
 
+<!-- ui-copy:start -->
 ```sh
-npx --package=@j3w1/ui@3.1.0 j3w1-ui copy dialog --out ./vendor/j3w1/dialog
-npx --package=@j3w1/ui@3.1.0 j3w1-ui kit --components text-field,button,dialog --out ./vendor/j3w1/task
+npx --package=@j3w1/ui@4.0.0 j3w1-ui copy dialog --out ./vendor/j3w1/dialog
+npx --package=@j3w1/ui@4.0.0 j3w1-ui kit --components text-field,button,dialog --out ./vendor/j3w1/task
 ```
+<!-- ui-copy:end -->
 
-- Installed from a tarball: run the installed `j3w1-ui` binary instead of npx.
-- The CLI checks all source bytes before it writes. It rejects unknown components
-  and symlink destinations, and refuses existing destinations.
-- Keep `element.html`, `component.css`, `tokens.css`, the whole `runtime/`
-  closure, the manifest and the licence notices together.
-- Multi-component kits put each complete bundle in its own named directory. Do
-  not flatten files whose names collide.
-
-The package manifest keeps declared implementation apart from run evidence.
-`index.json` is the compact discovery index; `contracts/<id>.json` and
-`examples/<id>.json` keep small tasks bounded. Canonical exports keep
-eligibility, decision disclosures and the mapping/lock workflow, so existing
-canonical-mapping integrations keep working. Record official package use
-separately, with its exact package identity.
+From a tarball install, run the installed `j3w1-ui` binary instead of npx.
+The CLI checks every source byte before writing and refuses unknown
+components, symlinks and existing destinations. Keep `element.html`,
+`component.css`, `tokens.css`, the whole `runtime/` closure, the manifest and
+the licence notices together; a kit gives each bundle its own directory.
+`index.json` is the discovery index, and `contracts/<id>.json` and
+`examples/<id>.json` keep small tasks bounded.
 
 ## Troubleshooting and upgrades
 
-- Unknown custom tag: load browser registration and configure the Vue compiler.
-- Unstyled control: load tokens and the matching component stylesheet; keep the
-  example's native children and canonical classes.
-- Missing form value: check the native control's name, checked/disabled state
-  and actual owning form. Do not add a duplicate hidden field to a native input.
-- Stale behavior after changing children: call `refresh()` after your
-  framework's DOM update and keep IDs unique.
-- Registration conflict: remove the second implementation or version; never
-  silently replace a class already in the Custom Elements registry.
-- Copy integrity failure: fetch the pinned artifact again and check its digest.
-  Never delete or bypass integrity checks.
-
-To upgrade:
-
-1. Install into a clean fixture.
-2. Review the migration notes and changed contracts.
-3. Exercise your real form and keyboard flows.
-4. Update the package lock and your integration record together.
-
-Browser results apply only to the tested artifact and environment. Manual
-screen-reader and physical-device testing are separate evidence, never inferred
-from automated checks.
+1. Install into a clean fixture; read the notes below, the changelog and the
+   changed component contracts (`contracts/<id>.json`, the component pages).
+2. Exercise your real form and keyboard flows.
+3. Update the lockfile and your integration record together.
+
+- **4.0.0** (D-033): prose and interface text are rose; content headings use
+  `color.text.heading`; bold inherits its colour. Replace heading uses of
+  `text.prose` with `text.heading` and drop colour rules attached only to
+  bold (`docs/rose-typography-migration.md`).
+- **3.0.0** (D-032): terminal slot 6 is coral `#ff7a66`, the prompt gets its
+  own background role and bright rose `#ffa2a7` text, and
+  `color.primitive.ansi-readable.6` is removed.
+- **2.0.0** (D-029, D-030): the dim terminal slots and two code syntax reds are
+  lifted; opt-in `code.hued.*` syntax roles are added.
+- **1.0.0** (D-023): True Black / Rose becomes the default; read
+  `docs/true-black-rose-migration.md` before replacing 0.1.0 tokens.
+
+Component behaviour did not change in 2.0.0 or 3.0.0. If something breaks:
+an unknown tag needs browser registration (and the Vue compiler setting); an
+unstyled control needs tokens and its stylesheet; a missing form value means
+checking the native control's name, state and owning form, never adding a
+hidden duplicate; a registration conflict means removing the second version;
+a copy integrity failure means fetching the pinned artifact again, never
+bypassing the check. Browser results cover only the tested artifact and
+environment; manual screen-reader and device testing are separate evidence.
diff --git a/packages/ui/dist/canonical/admin-form.json b/packages/ui/dist/canonical/admin-form.json
index 2a405a80e..0283a0047 100644
--- a/packages/ui/dist/canonical/admin-form.json
+++ b/packages/ui/dist/canonical/admin-form.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "admin-form",
   "family": "composed",
   "maturity": "stable",
@@ -20,8 +20,8 @@
     "maturity": "stable",
     "specified": true,
     "demonstrated": true,
-    "tested": false,
-    "testImplemented": false,
+    "tested": true,
+    "testImplemented": true,
     "states": 4
   },
   "title": "Admin form",
@@ -524,7 +524,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "rest tokens of every component on {color.surface.default}; the current step carries the indicator bar, future steps are disabled",
+      "visual": "every component's rest tokens on {color.surface.default}; the current step carries the indicator bar, future steps are disabled",
       "channel": "`aria-current=\"step\"`",
       "tokens": {
         "fg": {
@@ -569,8 +569,8 @@
     },
     {
       "state": "invalid",
-      "visual": "the name and hostname fields take the 2px {color.status.danger.border} and show their ✕ messages; the current step's marker becomes ✕; a danger alert on {color.status.danger.tint} summarising the two fields replaces the notice; the other fields stay at rest",
-      "channel": "border width 1 → 2px; glyphs; `aria-invalid`; `role=\"alert\"`",
+      "visual": "name and hostname take the 2px {color.status.danger.border} and ✕ messages; the current step's marker becomes ✕; a danger summary on {color.status.danger.tint} naming the two fields replaces the notice; other fields stay at rest",
+      "channel": "border 1 → 2px; glyphs; `aria-invalid`; `role=\"alert\"`",
       "tokens": {
         "fg": {
           "alias": "color.status.danger.text",
@@ -612,8 +612,8 @@
     },
     {
       "state": "busy",
-      "visual": "Continue shows the static ⋯ glyph in {color.action.primary.text}; the form carries `aria-busy`; nothing shrinks or animates",
-      "channel": "glyph; `aria-busy`; cursor: progress",
+      "visual": "Continue shows the static ⋯ in {color.action.primary.text}; nothing shrinks or animates",
+      "channel": "glyph; `aria-busy` on the form; cursor: progress",
       "tokens": {
         "fg": {
           "alias": "color.action.primary.text",
@@ -643,7 +643,7 @@
     },
     {
       "state": "disabled",
-      "visual": "every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover anywhere",
+      "visual": "every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover",
       "channel": "`disabled` on the wrapping fieldset; cursor: not-allowed; never opacity",
       "tokens": {}
     }
@@ -705,7 +705,7 @@
     "table"
   ],
   "specimens": [],
-  "nonExamples": "A rounded card with a drop shadow around the form. A Material stepper with\ncircular numbered badges and a connecting line. A red banner across the\nwhole form instead of the summary alert plus field messages. Fields whose\nborders glow red. A spinner replacing the Continue label. Saving while the\nfields fade to half opacity. Placing the actions in a sticky footer bar with\na shadow.",
+  "nonExamples": "A rounded card with a drop shadow. A Material stepper with numbered circles\nand a connecting line. A red banner across the whole form instead of the\nsummary alert plus field messages. Field borders that glow red. A spinner\nreplacing the Continue label. Fields fading to half opacity while saving. A\nsticky footer bar with a shadow.",
   "contrast": [
     {
       "label": "admin-form default text",
diff --git a/packages/ui/dist/canonical/alert.json b/packages/ui/dist/canonical/alert.json
index 734c00f1d..718611e68 100644
--- a/packages/ui/dist/canonical/alert.json
+++ b/packages/ui/dist/canonical/alert.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "alert",
   "family": "feedback",
   "maturity": "stable",
@@ -347,7 +347,7 @@
     },
     {
       "state": "hover",
-      "visual": "close button background → {color.action.tertiary.hover-bg}; the alert itself does not react",
+      "visual": "close button → {color.action.tertiary.hover-bg}; the alert itself does not react",
       "channel": "cursor: pointer on the button only",
       "tokens": {
         "fg": {
@@ -378,7 +378,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the close button",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px on the close button",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -464,7 +464,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "A coloured left stripe with no border. A rounded, shadowed card. A banner\nthat slides in or auto-dismisses. Colour-only status without the glyph and a\nworded title. Using `role=\"alert\"` for success messages. A close button that\nis an icon with no accessible name. Fixed-position alerts covering content.",
+  "nonExamples": "A coloured left stripe with no border. A rounded, shadowed card. A banner\nthat slides in or auto-dismisses. Colour-only status without the glyph and a\nworded title. `role=\"alert\"` for success. A close icon with no accessible\nname. Fixed-position alerts covering content.",
   "contrast": [
     {
       "label": "alert default text",
diff --git a/packages/ui/dist/canonical/avatar.json b/packages/ui/dist/canonical/avatar.json
index 4ad490b36..fb1f97388 100644
--- a/packages/ui/dist/canonical/avatar.json
+++ b/packages/ui/dist/canonical/avatar.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "avatar",
   "family": "display",
   "maturity": "stable",
@@ -149,9 +149,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-font-weight-bold": {
-      "alias": "font.weight.bold",
-      "value": "700",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -161,9 +161,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-font-weight-bold": {
+      "alias": "font.weight.bold",
+      "value": "700",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -173,9 +173,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -185,9 +185,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -213,7 +213,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Initials or loaded image.",
+      "visual": "Initials or the loaded image.",
       "channel": "Full name on the image container.",
       "tokens": {
         "fg": {
@@ -258,14 +258,14 @@
     },
     {
       "state": "loading",
-      "visual": "Fallback remains visible.",
-      "channel": "No loss of the full accessible name while loading.",
+      "visual": "Fallback stays visible.",
+      "channel": "Full accessible name kept.",
       "tokens": {}
     },
     {
       "state": "error",
-      "visual": "Fallback remains visible.",
-      "channel": "Image failure does not remove the entity name.",
+      "visual": "Fallback stays visible.",
+      "channel": "Full accessible name kept.",
       "tokens": {}
     }
   ],
diff --git a/packages/ui/dist/canonical/badge.json b/packages/ui/dist/canonical/badge.json
index 76242649a..106dcc690 100644
--- a/packages/ui/dist/canonical/badge.json
+++ b/packages/ui/dist/canonical/badge.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "badge",
   "family": "display",
   "maturity": "stable",
@@ -360,7 +360,7 @@
     },
     {
       "state": "empty",
-      "visual": "an 8px square dot in the status fill; the glyph and text visually hidden",
+      "visual": "an 8px square dot in the status fill; glyph and text visually hidden",
       "channel": "`role=\"img\"` with `aria-label`, or the hidden text; the dot's position beside its subject",
       "tokens": {
         "fg": {
@@ -419,7 +419,7 @@
     "filterable-table",
     "settings-panel"
   ],
-  "nonExamples": "Rounded or pill badges. A badge that is clickable. A status shown by colour\nwithout its glyph. A count badge that hides its unit from assistive\ntechnology. Purple, cyan or magenta statuses. A badge in body type. A badge\nwhose text wraps. A dot without a name.",
+  "nonExamples": "Rounded or pill badges. A clickable badge. A status by colour without its\nglyph. A count unit hidden from assistive technology. Purple, cyan or magenta\nstatuses. A badge in body type. Wrapping text. A dot without a name.",
   "contrast": [
     {
       "label": "badge default text",
diff --git a/packages/ui/dist/canonical/breadcrumbs.json b/packages/ui/dist/canonical/breadcrumbs.json
index d8c3b7b70..7e554c729 100644
--- a/packages/ui/dist/canonical/breadcrumbs.json
+++ b/packages/ui/dist/canonical/breadcrumbs.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "breadcrumbs",
   "family": "navigation",
   "maturity": "stable",
@@ -108,8 +108,8 @@
       }
     },
     "link.bg-hover": {
-      "alias": "color.interaction.hover.bg-strong",
-      "value": "#630f0d",
+      "alias": "color.interaction.hover.bg",
+      "value": "#1c0a09",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -214,8 +214,8 @@
     },
     {
       "state": "hover",
-      "visual": "link background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover}",
-      "channel": "underline thickens 1px → 2px; cursor",
+      "visual": "link → {color.interaction.hover.bg}, text {color.text.link-hover}",
+      "channel": "underline 1px → 2px; cursor",
       "tokens": {
         "fg": {
           "alias": "color.text.link-hover",
@@ -230,8 +230,8 @@
           }
         },
         "bg": {
-          "alias": "color.interaction.hover.bg-strong",
-          "value": "#630f0d",
+          "alias": "color.interaction.hover.bg",
+          "value": "#1c0a09",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -245,7 +245,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px around the link",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px around the link",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -288,7 +288,7 @@
     },
     {
       "state": "current",
-      "visual": "text {color.text.bright}; no underline; no hover",
+      "visual": "{color.text.bright}; no underline; no hover",
       "channel": "`aria-current=\"page\"`; no underline",
       "tokens": {
         "fg": {
@@ -319,8 +319,8 @@
     },
     {
       "state": "truncated",
-      "visual": "the middle levels are replaced by an `…` button in {color.text.default}",
-      "channel": "`aria-expanded=\"false\"` on the button; its label counts the hidden levels",
+      "visual": "middle levels replaced by an `…` button in {color.text.default}",
+      "channel": "`aria-expanded=\"false\"`; its label counts the hidden levels",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -388,7 +388,7 @@
     "settings-panel",
     "filterable-table"
   ],
-  "nonExamples": "Chevrons, arrows or bullets as separators. A trail that ends with the site\nname instead of the current page. The current page drawn as a link with an\nunderline. Automatic truncation by `text-overflow` that hides levels without\na way to reach them. A trail that scrolls horizontally. Uppercase or\nletter-spaced items. Separators that are read aloud.",
+  "nonExamples": "Chevrons, arrows or bullets as separators. A trail ending with the site name\ninstead of the current page. The current page as an underlined link.\n`text-overflow` truncation that hides unreachable levels. A horizontally\nscrolling trail. Uppercase or letter-spaced items. Separators read aloud.",
   "contrast": [
     {
       "label": "breadcrumbs default text",
@@ -409,10 +409,10 @@
       "kind": "text",
       "min": 4.5,
       "fg": "color.text.link-hover",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#f4eeee",
-      "bgHex": "#630f0d",
-      "ratio": 11.41,
+      "bgHex": "#1c0a09",
+      "ratio": 16.7,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/button-group.json b/packages/ui/dist/canonical/button-group.json
index 0528fea7b..4c6c97f98 100644
--- a/packages/ui/dist/canonical/button-group.json
+++ b/packages/ui/dist/canonical/button-group.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "button-group",
   "family": "actions",
   "maturity": "stable",
@@ -114,11 +114,71 @@
       }
     },
     "control.bg": {
-      "alias": "color.surface.input",
-      "value": "#000000",
-      "status": "approved",
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
       "deprecated": false,
-      "decisionId": "D-023",
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
       "eligibility": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -209,9 +269,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -221,9 +281,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -233,9 +293,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -273,7 +333,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Named content on the default surface.",
+      "visual": "Named content on the default surface. Its buttons are the secondary button (button.md).",
       "channel": "Native text and structure.",
       "tokens": {
         "fg": {
@@ -360,7 +420,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls, colour-only status, drag-only operations, hidden required\ninstructions, stolen focus or an invented service success.",
   "contrast": [
     {
       "label": "button-group default text",
@@ -426,6 +486,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/button.json b/packages/ui/dist/canonical/button.json
index 7dfe1b679..bd4061628 100644
--- a/packages/ui/dist/canonical/button.json
+++ b/packages/ui/dist/canonical/button.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "button",
   "family": "actions",
   "maturity": "stable",
@@ -497,7 +497,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill",
+      "visual": "1px dashed ring at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -540,7 +540,7 @@
     },
     {
       "state": "active",
-      "visual": "primary → {color.action.primary.pressed-bg}; secondary → {color.action.secondary.pressed-bg}; tertiary → {color.interaction.pressed.bg}; destructive → {color.action.destructive.pressed-bg}; primary keeps {color.action.primary.border}, secondary and tertiary use {color.border.active}, destructive keeps {color.action.destructive.border} (D-015)",
+      "visual": "fill: primary {color.action.primary.pressed-bg}, secondary {color.action.secondary.pressed-bg}, tertiary {color.interaction.pressed.bg}, destructive {color.action.destructive.pressed-bg}; border: primary and destructive keep theirs, secondary and tertiary take {color.border.active} (D-015)",
       "channel": "border change on secondary and tertiary; no translation or scale",
       "tokens": {
         "fg": {
@@ -571,13 +571,13 @@
     },
     {
       "state": "disabled",
-      "visual": "{color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}, every tone alike; no hover or active styling",
+      "visual": "{color.text.disabled} on {color.interaction.disabled.bg}, 1px {color.border.disabled}, every tone alike; no hover or active styling",
       "channel": "`disabled`; cursor: not-allowed; never opacity",
       "tokens": {}
     },
     {
       "state": "loading",
-      "visual": "size unchanged; the static `⋯` glyph replaces the icon; the button keeps its tone and stays focusable but ignores activation",
+      "visual": "size and tone unchanged; the static `⋯` glyph replaces the icon; stays focusable, ignores activation",
       "channel": "glyph; `aria-busy`",
       "tokens": {
         "fg": {
@@ -650,7 +650,7 @@
     "settings-panel",
     "filterable-table"
   ],
-  "nonExamples": "Rounded corners or pill shapes. Two filled buttons in one view. A red\nfilled destructive button at rest. A hover that only changes text colour.\nTranslating or scaling the button on press. A spinner inside the button.\nDisabling with opacity. A `<div>` or `<a>` styled as a button. A gradient or\nshadow to suggest depth.",
+  "nonExamples": "Rounded or pill shapes. Two filled buttons in one view. A red filled\ndestructive button at rest. A hover that only changes text colour.\nTranslating or scaling on press. A spinner inside the button. Disabling with\nopacity. A `<div>` or `<a>` styled as a button. A gradient or shadow for\ndepth.",
   "contrast": [
     {
       "label": "button default text",
@@ -741,7 +741,7 @@
       "bgHex": "#100c0c",
       "ratio": 1.83,
       "pass": false,
-      "waiver": "the fill is not the boundary of the control; the label text at 9.28:1 identifies it, and hover, active and focus each add a second channel"
+      "waiver": "the fill is not the boundary of the control; the label text identifies it, and hover, active and focus each add a second channel"
     },
     {
       "label": "secondary text at rest",
diff --git a/packages/ui/dist/canonical/card.json b/packages/ui/dist/canonical/card.json
index 9609b314d..ca19cb2fe 100644
--- a/packages/ui/dist/canonical/card.json
+++ b/packages/ui/dist/canonical/card.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "card",
   "family": "display",
   "maturity": "stable",
@@ -188,8 +188,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -322,8 +322,8 @@
     },
     {
       "state": "selected",
-      "visual": "fill {color.interaction.selection.bg} with {color.interaction.selection.text} on every line",
-      "channel": "`aria-selected=\"true\"`; the fill's on-fill text",
+      "visual": "fill {color.interaction.selection.bg}, {color.interaction.selection.text} on every line",
+      "channel": "`aria-selected=\"true\"`; the on-fill text",
       "tokens": {
         "fg": {
           "alias": "color.interaction.selection.text",
@@ -353,7 +353,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the fill and the 2px ring in {color.interaction.focus.ring-container}",
+      "visual": "the fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -381,8 +381,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -442,7 +442,7 @@
     "settings-panel",
     "filterable-table"
   ],
-  "nonExamples": "A drop shadow or elevation. Rounded corners. A hover lift or scale. A static\ncard with a hover fill. A card whose only clickable part is an invisible\noverlay. A link card containing buttons. A selected card shown by a border\ncolour alone without the fill and `aria-selected`. Muted metadata left on the\nselection fill.",
+  "nonExamples": "A shadow or elevation. Rounded corners. A hover lift or scale. A hover fill\non a static card. An invisible overlay as the only clickable part. A link\ncard containing buttons. A selected card shown by border colour alone,\nwithout the fill and `aria-selected`. Muted metadata left on the selection\nfill.",
   "contrast": [
     {
       "label": "card default text",
@@ -540,11 +540,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
@@ -611,7 +611,7 @@
       "bgHex": "#100c0c",
       "ratio": 1.36,
       "pass": true,
-      "waiver": "the default border groups content; a link or selectable card gains border.control on hover and the container ring on focus"
+      "waiver": "the default border groups content; interactive cards gain border.control on hover and a focus ring; selected cards use the ordinary ring"
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/chart.json b/packages/ui/dist/canonical/chart.json
index d1b842613..bc347c06c 100644
--- a/packages/ui/dist/canonical/chart.json
+++ b/packages/ui/dist/canonical/chart.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "chart",
   "family": "display",
   "maturity": "stable",
@@ -185,6 +185,18 @@
         "decisionIds": []
       }
     },
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "series.primary": {
       "alias": "color.chart.series-2",
       "value": "#f73f35",
@@ -245,18 +257,6 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
-      "status": "observed",
-      "deprecated": false,
-      "decisionId": null,
-      "eligibility": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      }
-    },
     "dependency.role-space-8": {
       "alias": "space.8",
       "value": "8px",
@@ -356,7 +356,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls, colour-only status, drag-only operations, hidden required\ninstructions, stolen focus or an invented service success.",
   "contrast": [
     {
       "label": "chart default text",
diff --git a/packages/ui/dist/canonical/checkbox.json b/packages/ui/dist/canonical/checkbox.json
index 85a51bebb..b9dadf062 100644
--- a/packages/ui/dist/canonical/checkbox.json
+++ b/packages/ui/dist/canonical/checkbox.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "checkbox",
   "family": "forms-basic",
   "maturity": "stable",
@@ -307,7 +307,7 @@
     },
     {
       "state": "hover",
-      "visual": "box background → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg}",
+      "visual": "box → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg}",
       "channel": "cursor: pointer; hover-capable pointers only",
       "tokens": {
         "bg": {
@@ -340,7 +340,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px around the box",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px around the box",
       "channel": "the ring",
       "tokens": {
         "bg": {
@@ -385,8 +385,8 @@
     },
     {
       "state": "checked",
-      "visual": "box fills {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control}",
-      "channel": "the ✓ glyph; `checked`",
+      "visual": "fill {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control}",
+      "channel": "✓ glyph; `checked`",
       "tokens": {
         "fg": {
           "alias": "color.action.primary.text",
@@ -416,8 +416,8 @@
     },
     {
       "state": "mixed",
-      "visual": "box fills {color.action.primary.bg}; – in {color.action.primary.text}",
-      "channel": "the – glyph; `indeterminate` / `aria-checked=\"mixed\"`",
+      "visual": "fill {color.action.primary.bg}; – in {color.action.primary.text}",
+      "channel": "– glyph; `indeterminate` / `aria-checked=\"mixed\"`",
       "tokens": {
         "fg": {
           "alias": "color.action.primary.text",
@@ -447,7 +447,7 @@
     },
     {
       "state": "checked+focus-visible",
-      "visual": "the fill and a ring in {color.interaction.focus.ring-container}",
+      "visual": "the fill plus a {color.interaction.focus.ring-container} ring",
       "channel": "glyph and ring",
       "tokens": {
         "fg": {
@@ -490,20 +490,20 @@
     },
     {
       "state": "checked+disabled",
-      "visual": "box {color.interaction.disabled.bg} with 1px {color.border.disabled}; ✓ and text in {color.text.disabled}",
+      "visual": "box {color.interaction.disabled.bg}, 1px {color.border.disabled}; ✓ and text {color.text.disabled}",
       "channel": "glyph; `disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "disabled",
-      "visual": "box {color.interaction.disabled.bg} with 1px {color.border.disabled}; text {color.text.disabled}",
+      "visual": "box {color.interaction.disabled.bg}, 1px {color.border.disabled}; text {color.text.disabled}",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "invalid",
-      "visual": "box border 2px {color.status.danger.border}; message with the ✕ glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border} box border; message with the ✕ glyph",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "bg": {
           "alias": "color.surface.input",
@@ -608,7 +608,7 @@
     "admin-form",
     "filterable-table"
   ],
-  "nonExamples": "Rounded or circular boxes. A tick drawn with a border trick or an icon\nfont. A checked state shown by border colour alone with no glyph. A box\nsmaller than 16px or a row shorter than 24px. The mixed state used as a\nthird value. A checkbox that saves on change. Disabling by opacity. A div\nwith `role=\"checkbox\"`.",
+  "nonExamples": "Rounded or circular boxes. A tick drawn with a border trick or an icon font.\nA checked state shown by border colour alone. A box under 16px or a row under\n24px. The mixed state as a third value. Saving on change. Disabling by\nopacity. A div with `role=\"checkbox\"`.",
   "contrast": [
     {
       "label": "checkbox default border",
diff --git a/packages/ui/dist/canonical/chip.json b/packages/ui/dist/canonical/chip.json
index 9bcff6220..fa03cf653 100644
--- a/packages/ui/dist/canonical/chip.json
+++ b/packages/ui/dist/canonical/chip.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "chip",
   "family": "display",
   "maturity": "stable",
@@ -200,8 +200,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -296,7 +296,7 @@
     },
     {
       "state": "hover",
-      "visual": "background → {color.interaction.hover.bg}; the remove button → {color.interaction.hover.bg-strong} with {color.text.bright}",
+      "visual": "background → {color.interaction.hover.bg}; remove button → {color.interaction.hover.bg-strong} with {color.text.bright}",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -341,7 +341,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the chip or on the remove button",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the chip or the remove button",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -398,7 +398,7 @@
     },
     {
       "state": "selected",
-      "visual": "fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text}; the border takes the fill colour",
+      "visual": "fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text}; border takes the fill colour",
       "channel": "`aria-pressed=\"true\"`; the ✓ glyph",
       "tokens": {
         "fg": {
@@ -429,7 +429,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the fill and the ring in {color.interaction.focus.ring-container}",
+      "visual": "the fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -457,8 +457,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -472,7 +472,7 @@
     },
     {
       "state": "disabled",
-      "visual": "text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no hover",
+      "visual": "{color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}; no hover",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     }
@@ -522,7 +522,7 @@
     "filterable-table",
     "admin-form"
   ],
-  "nonExamples": "Pill or rounded chips. A selected chip shown by a border colour alone\nwithout the fill and `aria-pressed`. A removable chip whose × has no name.\nA chip that is a link. A static tag that reacts to hover. Disabling by\nopacity. A chip whose label clips inside the border. A chip in caption\ntype (that is a badge).",
+  "nonExamples": "Pill or rounded chips. A selected chip shown by border colour alone, without\nthe fill and `aria-pressed`. A nameless ×. A chip that is a link. A static tag\nthat reacts to hover. Disabling by opacity. A label clipped by the border. A\nchip in caption type (that is a badge).",
   "contrast": [
     {
       "label": "chip default text",
@@ -646,11 +646,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/code-editor.json b/packages/ui/dist/canonical/code-editor.json
index 42dfd20e2..cb0f8c965 100644
--- a/packages/ui/dist/canonical/code-editor.json
+++ b/packages/ui/dist/canonical/code-editor.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "code-editor",
   "family": "developer",
   "maturity": "stable",
@@ -20,8 +20,8 @@
     "maturity": "stable",
     "specified": true,
     "demonstrated": true,
-    "tested": false,
-    "testImplemented": false,
+    "tested": true,
+    "testImplemented": true,
     "states": 6
   },
   "title": "Code editor",
@@ -540,7 +540,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "container ring 2px {color.interaction.focus.ring-container} at −3px; a 1px {color.code.caret} bar; the caret line filled {color.code.current-line} across gutter and text; its number in {color.code.line-number-active}",
+      "visual": "2px {color.interaction.focus.ring-container} ring at −3px; 1px {color.code.caret} bar; caret line filled {color.code.current-line} across gutter and text, its number {color.code.line-number-active}",
       "channel": "the ring; the caret bar",
       "tokens": {
         "fg": {
@@ -583,8 +583,8 @@
     },
     {
       "state": "selected",
-      "visual": "the range filled {color.code.selection-bg}; syntax colours kept",
-      "channel": "the range is announced through the host's selection; the fill spans line ends",
+      "visual": "range filled {color.code.selection-bg}; syntax colours kept",
+      "channel": "the host's selection is announced; the fill spans line ends",
       "tokens": {
         "fg": {
           "alias": "color.code.syntax.variable",
@@ -614,7 +614,7 @@
     },
     {
       "state": "selected+container-inactive",
-      "visual": "the same range in {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no caret, no ring",
+      "visual": "same range in {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no caret, no ring",
       "channel": "lightness drop between the two fills",
       "tokens": {
         "fg": {
@@ -646,7 +646,7 @@
     {
       "state": "current",
       "visual": "both characters of the matched pair outlined 1px solid {color.code.bracket-match}",
-      "channel": "the outline is a box, not a colour change",
+      "channel": "an outline box, not a colour change",
       "tokens": {
         "fg": {
           "alias": "color.code.syntax.variable",
@@ -688,8 +688,8 @@
     },
     {
       "state": "read-only",
-      "visual": "gutter drops to {color.surface.sunken} behind the same line numbers; the gutter rule becomes dotted; no caret is drawn",
-      "channel": "`aria-readonly`; dotted rule; missing caret",
+      "visual": "gutter on {color.surface.sunken}, same line numbers; dotted gutter rule; no caret",
+      "channel": "`aria-readonly`; dotted rule; no caret",
       "tokens": {
         "fg": {
           "alias": "color.code.line-number",
@@ -759,7 +759,7 @@
   "specimens": [
     "i3-window-frame"
   ],
-  "nonExamples": "Rainbow syntax in the reference editor, or any hue outside the three bounded\nones (the opt-in `code.hued.*` roles of D-030 carry them for hosts that want\nhue differentiation). A blinking or animated caret in the reference.\nA selection that recolours the text to white and loses the syntax roles. A\ncurrent-line highlight brighter than the selection. A bracket match drawn as\na background fill, which reads as a selection. Line numbers in the decorative\n`#7d1310`. A glow, gradient or rounded corner on the editor box. Removing the\nhost's focus indicator without drawing the container ring.",
+  "nonExamples": "Rainbow syntax in the reference, or any hue beyond the three bounded ones\n(hosts opt into `code.hued.*`, D-030). A blinking or animated caret in the\nreference. A selection that turns text white and drops the syntax roles. A\ncurrent line brighter than the selection. A bracket match as a background\nfill, which reads as a selection. Line numbers in a decorative colour. A glow,\ngradient or rounded corner on the box. Removing the host's focus indicator\nwithout drawing the container ring.",
   "contrast": [
     {
       "label": "code-editor default text",
@@ -1073,6 +1073,32 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "label": "comment syntax decoration inside the selection",
+      "state": "selected",
+      "kind": "ui",
+      "min": 4.5,
+      "fg": "color.code.syntax.comment",
+      "bg": "color.code.selection-bg",
+      "fgHex": "#ad7175",
+      "bgHex": "#420f0c",
+      "ratio": 4.13,
+      "pass": false,
+      "waiver": "syntax colour is decoration; the short-lived selection preserves syntax roles, and comment falls below the text floor on this recorded selection value"
+    },
+    {
+      "label": "type syntax decoration inside the selection",
+      "state": "selected",
+      "kind": "ui",
+      "min": 4.5,
+      "fg": "color.code.syntax.type",
+      "bg": "color.code.selection-bg",
+      "fgHex": "#b37175",
+      "bgHex": "#420f0c",
+      "ratio": 4.24,
+      "pass": false,
+      "waiver": "syntax colour is decoration; the short-lived selection preserves syntax roles, and type falls below the text floor on this recorded selection value"
+    },
     {
       "label": "muted string text inside the selection",
       "state": "selected",
diff --git a/packages/ui/dist/canonical/combobox.json b/packages/ui/dist/canonical/combobox.json
index 500aa3312..84a1a1075 100644
--- a/packages/ui/dist/canonical/combobox.json
+++ b/packages/ui/dist/canonical/combobox.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "combobox",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -349,8 +349,8 @@
       }
     },
     "option.ring-selected": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -426,7 +426,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "1px {color.border.control} on {color.surface.input}; list on {color.surface.raised} with a 1px {color.border.overlay}",
+      "visual": "1px {color.border.control} on {color.surface.input}; list on {color.surface.raised}, 1px {color.border.overlay}",
       "channel": "—",
       "tokens": {
         "fg": {
@@ -471,7 +471,7 @@
     },
     {
       "state": "hover",
-      "visual": "box background → {color.interaction.hover.bg}; the hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover}",
+      "visual": "box → {color.interaction.hover.bg}; hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover}",
       "channel": "cursor: text on the box, default on the list",
       "tokens": {
         "fg": {
@@ -502,7 +502,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "box border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "box border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -557,8 +557,8 @@
     },
     {
       "state": "open",
-      "visual": "list visible below the box; toggle glyph rotated 180°",
-      "channel": "`aria-expanded=\"true\"`; the toggle glyph",
+      "visual": "list below the box; toggle glyph rotated 180°",
+      "channel": "`aria-expanded=\"true\"`; toggle glyph",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -602,13 +602,13 @@
     },
     {
       "state": "closed",
-      "visual": "list absent; the box unchanged",
+      "visual": "no list; box unchanged",
       "channel": "`aria-expanded=\"false\"`; nothing below the box",
       "tokens": {}
     },
     {
       "state": "selected",
-      "visual": "the active option filled {color.interaction.selection.bg} with {color.interaction.selection.text} and a 1px dashed ring in {color.interaction.focus.ring-container}",
+      "visual": "active option filled {color.interaction.selection.bg} with {color.interaction.selection.text}, 1px dashed {color.interaction.focus.ring} ring at −2px",
       "channel": "`aria-selected=\"true\"`; `aria-activedescendant`; the ring",
       "tokens": {
         "fg": {
@@ -636,8 +636,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -651,8 +651,8 @@
     },
     {
       "state": "invalid",
-      "visual": "box border 2px {color.status.danger.border}; message with the ✕ glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border}; message with ✕",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -694,7 +694,7 @@
     },
     {
       "state": "invalid+focus-visible",
-      "visual": "the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px",
+      "visual": "2px danger border and {color.interaction.focus.ring-container} ring at −4px",
       "channel": "double boundary",
       "tokens": {
         "fg": {
@@ -749,14 +749,14 @@
     },
     {
       "state": "disabled",
-      "visual": "text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; list never opens",
+      "visual": "{color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}; list never opens",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "no-results",
-      "visual": "the list holds only the empty row in {color.text.muted}, italic",
-      "channel": "`aria-disabled` row; italic; a polite announcement of zero matches",
+      "visual": "only the empty row, {color.text.muted} italic",
+      "channel": "`aria-disabled` row; italic; polite zero-match announcement",
       "tokens": {
         "fg": {
           "alias": "color.text.muted",
@@ -857,7 +857,7 @@
     "admin-form",
     "filterable-table"
   ],
-  "nonExamples": "A select restyled as a combobox. Moving DOM focus into the list on Down. A\nlist that floats over the page with a shadow or a rounded frame. Highlighting\nthe active option with a colour change of the text alone. A no-results state\nthat silently shows the full list. Opening on hover. A list that slides or\nfades in for longer than 150 ms.",
+  "nonExamples": "A select restyled as a combobox. DOM focus moving into the list on Down. A\nlist floating with a shadow or rounded frame. The active option marked by text\ncolour alone. A no-results state that silently shows the full list. Opening\non hover. A list that slides or fades in for longer than 150 ms.",
   "contrast": [
     {
       "label": "combobox default text",
@@ -981,11 +981,11 @@
       "state": "selected",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/command-palette.json b/packages/ui/dist/canonical/command-palette.json
index df74f683e..89d1ec897 100644
--- a/packages/ui/dist/canonical/command-palette.json
+++ b/packages/ui/dist/canonical/command-palette.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "command-palette",
   "family": "navigation",
   "maturity": "stable",
@@ -140,6 +140,90 @@
         "decisionIds": []
       }
     },
+    "button.bg": {
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.focus": {
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-border-width-default": {
       "alias": "border.width.default",
       "value": "1px",
@@ -264,9 +348,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -276,9 +360,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -288,9 +372,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-16": {
-      "alias": "space.16",
-      "value": "16px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -300,9 +384,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-16": {
+      "alias": "space.16",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -328,7 +412,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "One prompt and dense command rows.",
+      "visual": "One prompt, dense command rows. Button controls are the secondary button (button.md); inputs keep the input look.",
       "channel": "Visible names and categories.",
       "tokens": {
         "fg": {
@@ -374,25 +458,25 @@
     {
       "state": "open",
       "visual": "Square overlay surface and border.",
-      "channel": "Native modal dialog and active-descendant relationship.",
+      "channel": "Native modal dialog; active-descendant relationship.",
       "tokens": {}
     },
     {
       "state": "closed",
       "visual": "Panel absent.",
-      "channel": "Opener remains focusable.",
+      "channel": "Opener stays focusable.",
       "tokens": {}
     },
     {
       "state": "focus-visible",
       "visual": "Dashed input ring.",
-      "channel": "Input retains DOM focus while results change.",
+      "channel": "Input keeps DOM focus while results change.",
       "tokens": {}
     },
     {
       "state": "no-results",
       "visual": "Muted zero-results status.",
-      "channel": "Explicit result count and no active descendant.",
+      "channel": "Explicit result count; no active descendant.",
       "tokens": {}
     }
   ],
@@ -505,6 +589,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/compact-dashboard.json b/packages/ui/dist/canonical/compact-dashboard.json
index 0d40b822a..59275306e 100644
--- a/packages/ui/dist/canonical/compact-dashboard.json
+++ b/packages/ui/dist/canonical/compact-dashboard.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "compact-dashboard",
   "family": "composed",
   "maturity": "stable",
@@ -115,11 +115,71 @@
       }
     },
     "control.bg": {
-      "alias": "color.surface.input",
-      "value": "#000000",
-      "status": "approved",
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
       "deprecated": false,
-      "decisionId": "D-023",
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
       "eligibility": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -200,9 +260,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-font-size-h2": {
-      "alias": "font.size.h2",
-      "value": "16px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -212,9 +272,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-font-size-h2": {
+      "alias": "font.size.h2",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -224,9 +284,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -236,9 +296,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -264,8 +324,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Square metric panels and readable tables.",
-      "channel": "Metric names, exact values and status text.",
+      "visual": "Square metric panels, readable tables. Its buttons are the secondary button (button.md).",
+      "channel": "Metric names, exact values, status text.",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -309,14 +369,14 @@
     },
     {
       "state": "loading",
-      "visual": "Busy boundary with existing content retained.",
-      "channel": "aria-busy and host-provided loading status.",
+      "visual": "Busy boundary; existing content kept.",
+      "channel": "`aria-busy` and host-provided loading status.",
       "tokens": {}
     },
     {
       "state": "empty",
       "visual": "Explicit absence of records.",
-      "channel": "Empty message; metric zero differs from unknown.",
+      "channel": "Empty message; a zero metric differs from an unknown one.",
       "tokens": {}
     },
     {
@@ -427,6 +487,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/data-table.json b/packages/ui/dist/canonical/data-table.json
index 9624af95a..39ae3a675 100644
--- a/packages/ui/dist/canonical/data-table.json
+++ b/packages/ui/dist/canonical/data-table.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "data-table",
   "family": "display",
   "maturity": "stable",
@@ -192,8 +192,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -336,7 +336,7 @@
     },
     {
       "state": "hover",
-      "visual": "row background → {color.interaction.hover.bg}; a resize handle → {color.border.active}",
+      "visual": "row → {color.interaction.hover.bg}; a resize handle → {color.border.active}",
       "channel": "cursor: default on rows, col-resize on handles",
       "tokens": {
         "fg": {
@@ -367,7 +367,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px around the focused row or control",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px around the focused row or control",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -410,7 +410,7 @@
     },
     {
       "state": "selected",
-      "visual": "row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; the row checkbox checked",
+      "visual": "row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; row checkbox checked",
       "channel": "`aria-selected=\"true\"`; the checked box",
       "tokens": {
         "fg": {
@@ -441,7 +441,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the fill and the ring in {color.interaction.focus.ring-container}",
+      "visual": "the fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -469,8 +469,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -515,7 +515,7 @@
     },
     {
       "state": "mixed",
-      "visual": "the select-all on {color.action.primary.bg} with the – glyph",
+      "visual": "select-all on {color.action.primary.bg} with the – glyph",
       "channel": "`aria-checked=\"mixed\"`; the glyph",
       "tokens": {
         "fg": {
@@ -546,7 +546,7 @@
     },
     {
       "state": "empty",
-      "visual": "one full-width cell in {color.text.muted}: \"No rows match.\"; the header and controls stay",
+      "visual": "one full-width cell in {color.text.muted}: \"No rows match.\"; header and controls stay",
       "channel": "the message text",
       "tokens": {
         "fg": {
@@ -670,7 +670,7 @@
     "filterable-table",
     "admin-form"
   ],
-  "nonExamples": "A grid role on a table that is not navigated cell by cell. Zebra stripes.\nA select-all that is a native checkbox with a script-only indeterminate\nstate and no `aria-checked`. Rows selected by clicking anywhere with no\ncheckbox alternative. A selected row shown by a border alone. A resize\nhandle that is a tab stop. An animated loading skeleton. Rounded checkboxes.\nText truncated with no full-value affordance.",
+  "nonExamples": "A grid role on a table not navigated cell by cell. Zebra stripes. A\nselect-all that is a native checkbox with a script-only indeterminate state\nand no `aria-checked`.\nRow selection by click with no checkbox alternative. A selected row shown by\na border alone. A resize handle as a tab stop. An animated loading skeleton.\nRounded checkboxes. Truncated text with no full-value affordance.",
   "contrast": [
     {
       "label": "data-table default text",
@@ -755,11 +755,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/date-picker.json b/packages/ui/dist/canonical/date-picker.json
index 6cc8aa696..4bec7eff6 100644
--- a/packages/ui/dist/canonical/date-picker.json
+++ b/packages/ui/dist/canonical/date-picker.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "date-picker",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -358,8 +358,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Input surface, default text and control border.",
-      "channel": "",
+      "visual": "{color.text.default} on {color.surface.input}, 1px {color.border.control}",
+      "channel": "—",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -403,8 +403,8 @@
     },
     {
       "state": "hover",
-      "visual": "The declared hover fill.",
-      "channel": "",
+      "visual": "background → {color.interaction.hover.bg}",
+      "channel": "hover-capable pointers only",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -448,8 +448,8 @@
     },
     {
       "state": "focus-visible",
-      "visual": "Active border and the canonical focus ring.",
-      "channel": "",
+      "visual": "border → {color.border.active}; the canonical focus ring",
+      "channel": "the ring",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -503,8 +503,8 @@
     },
     {
       "state": "invalid",
-      "visual": "Danger border and a linked message.",
-      "channel": "",
+      "visual": "2px {color.status.danger.border}; a linked message",
+      "channel": "border 1 → 2px; ✕ glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -546,8 +546,8 @@
     },
     {
       "state": "invalid+focus-visible",
-      "visual": "Danger border plus the container focus ring.",
-      "channel": "",
+      "visual": "the danger border and the ring in {color.interaction.focus.ring-container} at −4px",
+      "channel": "double boundary",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -601,14 +601,14 @@
     },
     {
       "state": "disabled",
-      "visual": "Disabled colors; editor and calendar actions unavailable.",
-      "channel": "",
+      "visual": "{color.text.disabled} on {color.interaction.disabled.bg}, border {color.border.disabled}; editor and calendar actions unavailable",
+      "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "read-only",
-      "visual": "Readable canvas text and bottom edge; calendar action unavailable.",
-      "channel": "",
+      "visual": "readable text on {color.surface.canvas}, no box, 1px dotted {color.border.divider} bottom edge; the calendar cannot open",
+      "channel": "`readonly`; dotted edge",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -692,7 +692,7 @@
     "admin-form",
     "filterable-table"
   ],
-  "nonExamples": "An unthemed host popup presented as fully themed. A second named input that duplicates form values. Discarding native constraints, labels or reset behavior. Literal colors, rounded corners, or a selected fill with no distinguishable focus boundary.",
+  "nonExamples": "An unthemed host popup presented as themed. A second named input\nduplicating form values. Dropping native constraints, labels or reset.\nLiteral colours, rounded corners, or a selected fill with no distinct focus\nboundary.",
   "contrast": [
     {
       "label": "date-picker default text",
diff --git a/packages/ui/dist/canonical/description-list.json b/packages/ui/dist/canonical/description-list.json
index ccc501ae9..158805f0e 100644
--- a/packages/ui/dist/canonical/description-list.json
+++ b/packages/ui/dist/canonical/description-list.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "description-list",
   "family": "display",
   "maturity": "stable",
@@ -162,9 +162,9 @@
         ]
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -174,9 +174,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -186,9 +186,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
diff --git a/packages/ui/dist/canonical/diagnostics.json b/packages/ui/dist/canonical/diagnostics.json
index 1d594ef38..a44d466f5 100644
--- a/packages/ui/dist/canonical/diagnostics.json
+++ b/packages/ui/dist/canonical/diagnostics.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "diagnostics",
   "family": "developer",
   "maturity": "stable",
@@ -392,8 +392,8 @@
       }
     },
     "row.ring-selected": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -455,7 +455,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "ranges decorated as above on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default} with 1px {color.border.divider} between them",
+      "visual": "ranges decorated on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default}, 1px {color.border.divider} between",
       "channel": "underline pattern; glyph",
       "tokens": {
         "fg": {
@@ -500,7 +500,7 @@
     },
     {
       "state": "hover",
-      "visual": "panel row background → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface)",
+      "visual": "panel row → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface)",
       "channel": "cursor: default on rows",
       "tokens": {
         "fg": {
@@ -531,7 +531,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "the active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: the container ring 2px {color.interaction.focus.ring-container} at −3px",
+      "visual": "active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: 2px {color.interaction.focus.ring-container} at −3px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -605,7 +605,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the selection fill and a 1px dashed ring in {color.interaction.focus.ring-container}",
+      "visual": "the selection fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both at once",
       "tokens": {
         "fg": {
@@ -633,8 +633,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -648,7 +648,7 @@
     },
     {
       "state": "error",
-      "visual": "the provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the inline stripe shows the same `✕` at its top",
+      "visual": "provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the stripe shows the same `✕` at its top",
       "channel": "glyph; live announcement",
       "tokens": {
         "fg": {
@@ -679,7 +679,7 @@
     },
     {
       "state": "empty",
-      "visual": "no problems: rows and stripe marks hidden; `✓ No problems` in {color.text.muted} with the glyph in {color.status.success.text}; inline decorations removed",
+      "visual": "rows, stripe marks and inline decorations removed; `✓ No problems` in {color.text.muted}, glyph in {color.status.success.text}",
       "channel": "glyph; the absence of decoration",
       "tokens": {
         "fg": {
@@ -762,7 +762,7 @@
   "specimens": [
     "i3-window-frame"
   ],
-  "nonExamples": "Red-only errors without the `✕` glyph or the wavy pattern. A wavy underline\nfor every severity, which leaves the pattern meaningless. Purple or cyan for\ninfo and hint. A hover on a panel row that changes only the text colour. A\nselected row whose glyph keeps its severity colour on the red fill (2.47:1).\nA panel row with a rounded highlight or a left accent bar instead of the fill.\nRemoving the error line background to \"calm\" the editor.",
+  "nonExamples": "Red-only errors without `✕` or the wavy pattern. Wavy for every severity.\nPurple or cyan for info and hint. A row hover that changes only text colour.\nA selected row whose glyph keeps its severity colour on the fill. A rounded\nhighlight or left accent bar instead of the row fill. Removing the error line\nfill to \"calm\" the editor.",
   "contrast": [
     {
       "label": "diagnostics default text",
@@ -860,11 +860,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/dialog.json b/packages/ui/dist/canonical/dialog.json
index e6f229c3e..5431a4576 100644
--- a/packages/ui/dist/canonical/dialog.json
+++ b/packages/ui/dist/canonical/dialog.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "dialog",
   "family": "feedback",
   "maturity": "stable",
@@ -440,13 +440,13 @@
     },
     {
       "state": "closed",
-      "visual": "nothing: the dialog and its backdrop are absent",
+      "visual": "dialog and backdrop absent",
       "channel": "no `open`; focus back on the opener",
       "tokens": {}
     },
     {
       "state": "focus-trapped",
-      "visual": "the dialog itself carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles",
+      "visual": "when it holds focus, the dialog carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px; the note says Tab cycles",
       "channel": "Tab never leaves; the note text",
       "tokens": {
         "fg": {
@@ -503,7 +503,7 @@
     },
     {
       "state": "hover",
-      "visual": "Close background → {color.action.tertiary.hover-bg}; other buttons take their tone's hover",
+      "visual": "Close → {color.action.tertiary.hover-bg}; other buttons take their tone's hover",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -534,7 +534,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive uses {color.action.destructive.filled-text} (D-015)",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive {color.action.destructive.filled-text} (D-015)",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -577,7 +577,7 @@
     },
     {
       "state": "reduced-motion",
-      "visual": "no opacity transition; the dialog is simply present or absent",
+      "visual": "no opacity transition; present or absent",
       "channel": "`prefers-reduced-motion`",
       "tokens": {
         "fg": {
@@ -671,7 +671,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "A glowing or shadowed card. Rounded corners. A dialog that slides or scales\nin. `<dialog>` shown with `show()` and a hand-written focus trap. A dialog\nwith no title, or with the title only in the accessible name. A destructive\nconfirm as the default Enter action. A backdrop that closes the dialog with\nno Close button. A dialog stacked on a dialog.",
+  "nonExamples": "A glowing or shadowed card. Rounded corners. Sliding or scaling in.\n`<dialog>` shown with `show()` and a hand-written trap. No title, or the\ntitle only in the accessible name. A destructive confirm as the default\nEnter action. A backdrop that closes the dialog with no Close button. A\ndialog stacked on a dialog.",
   "contrast": [
     {
       "label": "dialog default text",
diff --git a/packages/ui/dist/canonical/diff-view.json b/packages/ui/dist/canonical/diff-view.json
index fd541c692..61e67eca3 100644
--- a/packages/ui/dist/canonical/diff-view.json
+++ b/packages/ui/dist/canonical/diff-view.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "diff-view",
   "family": "developer",
   "maturity": "stable",
@@ -376,8 +376,8 @@
       }
     },
     "row.ring-selected": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -391,7 +391,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "added rows {color.diff.added.bg} with `+` in {color.diff.added.gutter}; removed {color.diff.removed.bg} with `−` in {color.diff.removed.gutter}; modified {color.diff.modified.bg} with `~` in {color.diff.modified.gutter}; hunk rows {color.diff.header-bg}; conflicts in a 3px double {color.diff.conflict-border}",
+      "visual": "added {color.diff.added.bg}, `+` in {color.diff.added.gutter}; removed {color.diff.removed.bg}, `−` in {color.diff.removed.gutter}; modified {color.diff.modified.bg}, `~` in {color.diff.modified.gutter}; hunks {color.diff.header-bg}; conflicts in a 3px double {color.diff.conflict-border}",
       "channel": "the markers; the double border",
       "tokens": {
         "fg": {
@@ -436,8 +436,8 @@
     },
     {
       "state": "hover",
-      "visual": "the row's number and marker cells → {color.interaction.hover.bg}; the text cell keeps its fill",
-      "channel": "cursor: default; only on hover-capable pointers",
+      "visual": "number and marker cells → {color.interaction.hover.bg}; the text cell keeps its fill",
+      "channel": "cursor: default; hover-capable pointers only",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -467,7 +467,7 @@
     },
     {
       "state": "selected",
-      "visual": "the whole row filled {color.interaction.selection.bg} with {color.interaction.selection.text}; the marker stays",
+      "visual": "whole row {color.interaction.selection.bg} with {color.interaction.selection.text}; the marker stays",
       "channel": "`aria-current` (or `:target` for a permalinked line); the marker glyph",
       "tokens": {
         "fg": {
@@ -498,7 +498,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "1px dashed {color.interaction.focus.ring} at −2px around the row; on a selected row the ring is {color.interaction.focus.ring-container}",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px around the row, including a selected row",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -541,7 +541,7 @@
     },
     {
       "state": "expanded",
-      "visual": "the folded `<tbody>` is shown; the chevron points down; the button reads \"Hide 12 unchanged lines\"",
+      "visual": "folded `<tbody>` shown; chevron down; \"Hide 12 unchanged lines\"",
       "channel": "`aria-expanded=\"true\"`; the rows appear",
       "tokens": {
         "fg": {
@@ -572,7 +572,7 @@
     },
     {
       "state": "collapsed",
-      "visual": "the folded `<tbody>` is hidden; the chevron points to the inline end; \"… 12 unchanged lines\"",
+      "visual": "folded `<tbody>` hidden; chevron to the inline end; \"… 12 unchanged lines\"",
       "channel": "`aria-expanded=\"false\"`; the ellipsis",
       "tokens": {
         "fg": {
@@ -646,7 +646,7 @@
   "specimens": [
     "i3-window-frame"
   ],
-  "nonExamples": "Red and green fills with no `+`/`−` marker. Word-level changes drawn as a\nbright fill that pushes the text below 4.5:1. A removed line rendered in\n`text.disabled` or struck through as a whole. Collapsed hunks that are only\nvisually clipped and still read out. Conflict blocks in purple. Hover that\nrecolours the code text. Round-cornered hunk cards floating on the page. A\nselected row that drops the marker because \"the colour says it\".",
+  "nonExamples": "Red and green fills without `+`/`−`. Word-level changes as a bright fill\nthat pushes text below 4.5:1. A removed line in `text.disabled` or struck\nthrough whole. Collapsed hunks only visually clipped and still read out.\nPurple conflict blocks. Hover that recolours the code text. Round-cornered\nhunk cards. A selected row that drops the marker.",
   "contrast": [
     {
       "label": "diff-view default text",
@@ -1004,11 +1004,11 @@
       "state": "focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/disclosure.json b/packages/ui/dist/canonical/disclosure.json
index f1675afc8..96d560247 100644
--- a/packages/ui/dist/canonical/disclosure.json
+++ b/packages/ui/dist/canonical/disclosure.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "disclosure",
   "family": "navigation",
   "maturity": "stable",
@@ -234,9 +234,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -246,9 +246,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -258,9 +258,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
diff --git a/packages/ui/dist/canonical/drawer.json b/packages/ui/dist/canonical/drawer.json
index 1dce4cf16..693b4d511 100644
--- a/packages/ui/dist/canonical/drawer.json
+++ b/packages/ui/dist/canonical/drawer.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "drawer",
   "family": "feedback",
   "maturity": "stable",
@@ -338,13 +338,13 @@
     },
     {
       "state": "closed",
-      "visual": "nothing: the panel and the backdrop are absent",
+      "visual": "panel and backdrop absent",
       "channel": "no `open`; focus back on the opener",
       "tokens": {}
     },
     {
       "state": "focus-trapped",
-      "visual": "the panel carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles",
+      "visual": "while it holds focus, the panel carries the 2px solid {color.interaction.focus.ring-container} ring at −3px; the note says Tab cycles",
       "channel": "Tab never leaves; the note text",
       "tokens": {
         "fg": {
@@ -401,7 +401,7 @@
     },
     {
       "state": "reduced-motion",
-      "visual": "no opacity transition; the panel is simply present or absent",
+      "visual": "no opacity transition; present or absent",
       "channel": "`prefers-reduced-motion`",
       "tokens": {
         "fg": {
@@ -489,7 +489,7 @@
     "settings-panel",
     "i3-window-frame"
   ],
-  "nonExamples": "A panel that slides in from the edge. A drawer with a shadow or a rounded\ninner corner. A drawer that is a plain aside with a hand-written focus trap.\nA bottom sheet with a drag handle. A drawer with no Close button. A drawer\nthat stays open under a dialog. A translucent panel over page content.",
+  "nonExamples": "A panel that slides in. A shadow or a rounded inner corner. A plain aside\nwith a hand-written focus trap. A bottom sheet with a drag handle. No Close\nbutton. A drawer that stays open under a dialog. A translucent panel over page\ncontent.",
   "contrast": [
     {
       "label": "drawer default text",
diff --git a/packages/ui/dist/canonical/editor-search.json b/packages/ui/dist/canonical/editor-search.json
index da485e0ae..32124e46b 100644
--- a/packages/ui/dist/canonical/editor-search.json
+++ b/packages/ui/dist/canonical/editor-search.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "editor-search",
   "family": "developer",
   "maturity": "stable",
@@ -138,6 +138,90 @@
         "decisionIds": []
       }
     },
+    "button.bg": {
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.focus": {
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-border-width-default": {
       "alias": "border.width.default",
       "value": "1px",
@@ -234,9 +318,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -246,9 +330,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -258,9 +342,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -286,7 +370,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Plain escaped source.",
+      "visual": "Plain escaped source. Button controls are the secondary button (button.md); inputs keep the input look.",
       "channel": "Readable preformatted text.",
       "tokens": {
         "fg": {
@@ -449,6 +533,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/empty-state.json b/packages/ui/dist/canonical/empty-state.json
index 3576b5fe9..8cbc9fb6c 100644
--- a/packages/ui/dist/canonical/empty-state.json
+++ b/packages/ui/dist/canonical/empty-state.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "empty-state",
   "family": "feedback",
   "maturity": "stable",
@@ -239,7 +239,7 @@
     "filterable-table",
     "settings-panel"
   ],
-  "nonExamples": "An illustration or mascot. A primary (filled) call to action. A blank pane.\nA greyed-out table header with no message. A message that only says \"No\ndata\". A heading in the accent red. An empty state that appears while\nloading. Centred text in a rounded card with a shadow.",
+  "nonExamples": "An illustration or mascot. A primary (filled) call to action. A blank pane. A\ngreyed-out table header with no message. Only \"No data\". A heading in the\naccent red. An empty state shown while loading. Centred text in a rounded,\nshadowed card.",
   "contrast": [
     {
       "label": "empty-state default text",
diff --git a/packages/ui/dist/canonical/error-state.json b/packages/ui/dist/canonical/error-state.json
index 67597b5e9..0c5034cad 100644
--- a/packages/ui/dist/canonical/error-state.json
+++ b/packages/ui/dist/canonical/error-state.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "error-state",
   "family": "feedback",
   "maturity": "stable",
@@ -116,11 +116,71 @@
       }
     },
     "control.bg": {
-      "alias": "color.surface.input",
-      "value": "#000000",
-      "status": "approved",
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
       "deprecated": false,
-      "decisionId": "D-023",
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
       "eligibility": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -247,9 +307,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -259,9 +319,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -271,9 +331,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -299,7 +359,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Danger border and text heading.",
+      "visual": "Danger border and text heading. Its buttons are the secondary button (button.md).",
       "channel": "Specific written explanation and error glyph.",
       "tokens": {
         "fg": {
@@ -398,7 +458,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls, colour-only status, drag-only operations, hidden required\ninstructions, stolen focus or an invented service success.",
   "contrast": [
     {
       "label": "error-state default text",
@@ -464,6 +524,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/field.json b/packages/ui/dist/canonical/field.json
index b73218f9d..6bf663351 100644
--- a/packages/ui/dist/canonical/field.json
+++ b/packages/ui/dist/canonical/field.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "field",
   "family": "forms-basic",
   "maturity": "stable",
@@ -285,7 +285,7 @@
     },
     {
       "state": "disabled",
-      "visual": "label and control text {color.text.disabled}; control {color.interaction.disabled.bg} with 1px {color.border.disabled}; help unchanged",
+      "visual": "label and control text {color.text.disabled}; control {color.interaction.disabled.bg}, 1px {color.border.disabled}; help unchanged",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     }
@@ -330,7 +330,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "A floating label inside the control. A label to the left of the control.\nPlaceholder text as the only label. An error shown by a red border alone. A\nmessage that replaces the help text in the DOM. A required mark that is only\na colour change. An asterisk with no text alternative. Two controls in one\nfield.",
+  "nonExamples": "A floating label inside the control. A label left of the control.\nPlaceholder as the only label. An error shown by a red border alone. A\nmessage that replaces the help in the DOM. A colour-only required mark. An\nasterisk with no text alternative. Two controls in one field.",
   "contrast": [
     {
       "label": "field default text",
diff --git a/packages/ui/dist/canonical/fieldset.json b/packages/ui/dist/canonical/fieldset.json
index bd73b8c84..22256fc86 100644
--- a/packages/ui/dist/canonical/fieldset.json
+++ b/packages/ui/dist/canonical/fieldset.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "fieldset",
   "family": "forms-basic",
   "maturity": "stable",
@@ -222,7 +222,7 @@
     },
     {
       "state": "disabled",
-      "visual": "legend and labels {color.text.disabled}; every control inside takes its own disabled treatment ({color.interaction.disabled.bg}, {color.border.disabled}); the border unchanged",
+      "visual": "legend and labels {color.text.disabled}; each control takes its own disabled treatment ({color.interaction.disabled.bg}, {color.border.disabled}); border unchanged",
       "channel": "`disabled` on the fieldset; cursor: not-allowed on the controls",
       "tokens": {}
     }
@@ -264,7 +264,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "A fieldset with no legend or with a legend hidden visually. A card used\ninstead of a fieldset for form controls. Rounded corners. A 2px or\n`border.control` border on the group, which would read as a control. A\nlegend in accent red. Disabling only the legend. Nesting three levels deep.",
+  "nonExamples": "No legend, or a visually hidden one. A card instead of a fieldset for form\ncontrols. Rounded corners. A 2px or `border.control` border, which reads as a\ncontrol. A legend in accent red. Disabling only the legend. Three levels of\nnesting.",
   "contrast": [
     {
       "label": "fieldset default text",
diff --git a/packages/ui/dist/canonical/file-browser.json b/packages/ui/dist/canonical/file-browser.json
index 434033e11..2a602cab0 100644
--- a/packages/ui/dist/canonical/file-browser.json
+++ b/packages/ui/dist/canonical/file-browser.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "file-browser",
   "family": "composed",
   "maturity": "stable",
@@ -139,6 +139,90 @@
         "decisionIds": []
       }
     },
+    "button.bg": {
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.focus": {
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-border-width-default": {
       "alias": "border.width.default",
       "value": "1px",
@@ -213,9 +297,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -225,9 +309,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -237,9 +321,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-16": {
-      "alias": "space.16",
-      "value": "16px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -249,9 +333,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-16": {
+      "alias": "space.16",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -277,7 +361,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Locations and native file rows.",
+      "visual": "Locations and native file rows. Button controls are the secondary button (button.md); inputs keep the input look.",
       "channel": "Explicit names, kinds and sizes.",
       "tokens": {
         "fg": {
@@ -450,6 +534,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/file-input.json b/packages/ui/dist/canonical/file-input.json
index 7d2a4a833..092621d2a 100644
--- a/packages/ui/dist/canonical/file-input.json
+++ b/packages/ui/dist/canonical/file-input.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "file-input",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -413,7 +413,7 @@
     },
     {
       "state": "hover",
-      "visual": "button background → {color.action.secondary.hover-bg}; border unchanged",
+      "visual": "button → {color.action.secondary.hover-bg}; border unchanged",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -444,7 +444,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the button (the input has focus)",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the button (the input has focus)",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -499,8 +499,8 @@
     },
     {
       "state": "drop-target",
-      "visual": "root fill {color.interaction.marquee}; border 1px dashed {color.interaction.drop-target}",
-      "channel": "dashed pattern; the hint text changes to \"Release to add\"",
+      "visual": "root fill {color.interaction.marquee}; 1px dashed {color.interaction.drop-target} border",
+      "channel": "dashed pattern; hint reads \"Release to add\"",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -542,8 +542,8 @@
     },
     {
       "state": "invalid",
-      "visual": "button border 2px {color.status.danger.border}; message with the ✕ glyph; a failed row shows its own ✕",
-      "channel": "border width 1 → 2px; glyphs; `aria-invalid`",
+      "visual": "button border 2px {color.status.danger.border}; message with ✕; a failed row shows its own ✕",
+      "channel": "border 1 → 2px; glyphs; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.action.secondary.text",
@@ -585,14 +585,14 @@
     },
     {
       "state": "disabled",
-      "visual": "button text {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; the zone's dashes take {color.border.disabled}; no hover",
+      "visual": "button text {color.text.disabled}, border {color.border.disabled}, fill {color.interaction.disabled.bg}; zone dashes {color.border.disabled}; no hover",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "loading",
-      "visual": "a static bar of 45° stripes, {color.action.primary.bg} on {color.interaction.pressed.bg}, below the row; the button stays enabled",
-      "channel": "`aria-busy`; the status text reads \"Uploading n files\"; no animation",
+      "visual": "static 45° stripes, {color.action.primary.bg} on {color.interaction.pressed.bg}, below the row; the button stays enabled",
+      "channel": "`aria-busy`; status reads \"Uploading n files\"; no animation",
       "tokens": {}
     }
   ],
@@ -644,7 +644,7 @@
   "specimens": [
     "admin-form"
   ],
-  "nonExamples": "A hidden input with `display: none` and a button that clicks it by script. A\ndrop zone that is the only way to add files. A rounded, dotted, animated\n\"pulsing\" zone. A spinner while uploading. A progress bar that animates its\nstripes. Errors shown by a red file name alone. Disabling by opacity.",
+  "nonExamples": "`display: none` on the input and a button that clicks it by script. A drop\nzone as the only way to add files. A rounded, dotted or pulsing zone. A\nspinner, or animated stripes, while uploading. Errors shown by a red file\nname alone. Disabling by opacity.",
   "contrast": [
     {
       "label": "file-input default text",
@@ -787,7 +787,7 @@
       "bgHex": "#000000",
       "ratio": 4.71,
       "pass": true,
-      "waiver": "inside the hover fill the control border measures 2.94:1; the boundary is judged against the canvas on its outer side (4.45:1), and the fill change is itself the hover signal"
+      "waiver": "inside the hover fill the control border falls below the floor; the boundary is judged against the canvas on its outer side, and the fill change is itself the hover signal"
     },
     {
       "label": "drop-zone dashed border at rest",
diff --git a/packages/ui/dist/canonical/filterable-table.json b/packages/ui/dist/canonical/filterable-table.json
index 7bfb6a3fc..47672643e 100644
--- a/packages/ui/dist/canonical/filterable-table.json
+++ b/packages/ui/dist/canonical/filterable-table.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "filterable-table",
   "family": "composed",
   "maturity": "stable",
@@ -584,7 +584,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "rest tokens of every component; Name sorted ascending with its ▲ glyph; Prev disabled",
+      "visual": "each component at rest; Name sorted ascending with ▲; Prev disabled",
       "channel": "`aria-sort`; the glyph",
       "tokens": {
         "fg": {
@@ -615,7 +615,7 @@
     },
     {
       "state": "hover",
-      "visual": "the pointed row takes {color.interaction.hover.bg}; the toolbar controls and chips keep their own hover on their own pointer events only",
+      "visual": "the pointed row takes {color.interaction.hover.bg}; toolbar controls and chips hover only on their own pointer events",
       "channel": "cursor",
       "tokens": {
         "fg": {
@@ -646,7 +646,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "the dashed {color.interaction.focus.ring} on the row holding focus (shown on the third row); the toolbar and chips stay at rest",
+      "visual": "dashed {color.interaction.focus.ring} on the focused row (the third in the specimen); toolbar and chips at rest",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -689,7 +689,7 @@
     },
     {
       "state": "selected",
-      "visual": "two rows take {color.interaction.selection.bg} with {color.interaction.selection.text} and a checked box; the select-all reports mixed with the – glyph",
+      "visual": "two rows in {color.interaction.selection.bg} with {color.interaction.selection.text} and a checked box; select-all mixed with –",
       "channel": "`aria-selected`; ✓ and – glyphs; `aria-checked=\"mixed\"`",
       "tokens": {
         "fg": {
@@ -720,7 +720,7 @@
     },
     {
       "state": "no-results",
-      "visual": "the body is the \"No components match\" row, the count reads 0 of 43, the search field's status line announces it; the chips stay so the cause is visible",
+      "visual": "the body is the \"No components match\" row; count reads 0 of 43; the search status line announces it; chips stay so the cause is visible",
       "channel": "text; `role=\"status\"`",
       "tokens": {
         "fg": {
@@ -802,7 +802,7 @@
     "pagination"
   ],
   "specimens": [],
-  "nonExamples": "A rounded search pill with a magnifier inside a shadowed toolbar. Filter\nchips drawn as pills with a coloured fill per category. Zebra-striped rows.\nA selected row shown by a coloured left bar and no fill. A blue Material\ncheckbox. A skeleton shimmer while loading. An infinite scroll with no count\nand no pages.",
+  "nonExamples": "A rounded search pill with a magnifier in a shadowed toolbar. Chips as pills\nwith a coloured fill per category. Zebra-striped rows. A selected row shown by\na coloured left bar and no fill. A blue Material checkbox. A skeleton shimmer\nwhile loading. Infinite scroll with no count and no pages.",
   "contrast": [
     {
       "label": "filterable-table default text",
diff --git a/packages/ui/dist/canonical/form-builder.json b/packages/ui/dist/canonical/form-builder.json
index 0dedf2bd2..fee2fdc75 100644
--- a/packages/ui/dist/canonical/form-builder.json
+++ b/packages/ui/dist/canonical/form-builder.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "form-builder",
   "family": "forms-advanced",
   "maturity": "draft",
diff --git a/packages/ui/dist/canonical/i3-window-frame.json b/packages/ui/dist/canonical/i3-window-frame.json
index eb42a5106..5c9a13fdb 100644
--- a/packages/ui/dist/canonical/i3-window-frame.json
+++ b/packages/ui/dist/canonical/i3-window-frame.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "i3-window-frame",
   "family": "composed",
   "maturity": "stable",
@@ -188,8 +188,8 @@
       }
     },
     "workspace.ring-on-selection": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -457,7 +457,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "the terminal window focused: {color.border.active} frame and the bright title; the editor at rest; workspace 1 filled",
+      "visual": "terminal window focused: {color.border.active} frame, bright title; editor at rest; workspace 1 filled",
       "channel": "the title text; `aria-selected`",
       "tokens": {
         "fg": {
@@ -488,7 +488,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "the 2px {color.interaction.focus.ring-container} ring at −3px inside the focused window or container; the client draws no second ring",
+      "visual": "2px {color.interaction.focus.ring-container} ring at −3px inside the focused window or container; the client draws no second ring",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -531,7 +531,7 @@
     },
     {
       "state": "selected",
-      "visual": "workspace 2 takes the selection fill with {color.interaction.selection.text}; workspace 1 drops to rest",
+      "visual": "workspace 2 takes the selection fill with {color.interaction.selection.text}, 1px dashed {color.interaction.focus.ring} at −2px when focused; workspace 1 at rest",
       "channel": "`aria-selected`",
       "tokens": {
         "fg": {
@@ -562,7 +562,7 @@
     },
     {
       "state": "container-inactive",
-      "visual": "no window has focus: every frame {color.border.default}, every title {color.text.muted} on {color.surface.chrome}, the tab indicator {color.border.selected-indicator-inactive}, no caret",
+      "visual": "no window focused: every frame {color.border.default}, every title {color.text.muted} on {color.surface.chrome}, tab indicator {color.border.selected-indicator-inactive}, no caret",
       "channel": "lightness drop; no caret",
       "tokens": {
         "fg": {
@@ -593,7 +593,7 @@
     },
     {
       "state": "error",
-      "visual": "workspace 3 is urgent: {color.status.danger.fill} with {color.status.danger.on-fill} and a trailing !",
+      "visual": "workspace 3 urgent: {color.status.danger.fill} with {color.status.danger.on-fill} and a trailing !",
       "channel": "the ! mark; \"urgent\" read to assistive technology",
       "tokens": {
         "fg": {
@@ -667,7 +667,7 @@
     "tabs"
   ],
   "specimens": [],
-  "nonExamples": "A window with rounded corners or a title bar gradient. A focused window\nthat glows or blurs its neighbours. A shadow under a tiled window; the only\nshadow is the floating one. Gaps of 14/−2 forced into an unrelated\napplication's layout. A workspace indicator drawn as a red underline\ninstead of the selection fill. Traffic-light close buttons in the title\nbar. A translucent bar.",
+  "nonExamples": "Rounded corners or a title-bar gradient. A focused window that glows or\nblurs its neighbours. A shadow under a tiled window. 14/−2 gaps forced into\nan unrelated application. A red underline instead of the selection fill for\nthe workspace. Traffic-light buttons in the title bar. A translucent bar.",
   "contrast": [
     {
       "label": "i3-window-frame default text",
@@ -747,6 +747,19 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "label": "ring on a selected workspace when focused",
+      "state": "selected",
+      "kind": "ui",
+      "min": 3,
+      "fg": "color.interaction.focus.ring",
+      "bg": "color.interaction.selection.bg",
+      "fgHex": "#e53935",
+      "bgHex": "#531310",
+      "ratio": 3.38,
+      "pass": true,
+      "waiver": null
+    },
     {
       "label": "workspace names and status text on the bar",
       "state": null,
diff --git a/packages/ui/dist/canonical/icon-button.json b/packages/ui/dist/canonical/icon-button.json
index 251daf19e..54c4b95d2 100644
--- a/packages/ui/dist/canonical/icon-button.json
+++ b/packages/ui/dist/canonical/icon-button.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "icon-button",
   "family": "actions",
   "maturity": "stable",
@@ -171,8 +171,8 @@
       }
     },
     "root.ring-toggled": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -234,7 +234,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "{color.action.tertiary.text} icon on nothing; transparent 1px border",
+      "visual": "{color.action.tertiary.text} icon, no fill; transparent 1px border",
       "channel": "—",
       "tokens": {
         "fg": {
@@ -296,7 +296,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "1px dashed ring {color.interaction.focus.ring} at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -382,13 +382,13 @@
     },
     {
       "state": "disabled",
-      "visual": "{color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}; no hover",
+      "visual": "{color.text.disabled} on {color.interaction.disabled.bg}, 1px {color.border.disabled}; no hover",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "toggled",
-      "visual": "fill {color.interaction.selection.bg} with {color.interaction.selection.text}; border {color.border.selected-indicator}; the icon draws in its filled form",
+      "visual": "{color.interaction.selection.bg} fill, {color.interaction.selection.text}, border {color.border.selected-indicator}; filled icon form",
       "channel": "`aria-pressed=\"true\"`; the filled icon shape; the border",
       "tokens": {
         "fg": {
@@ -419,7 +419,7 @@
     },
     {
       "state": "toggled+focus-visible",
-      "visual": "the selection fill and a ring in {color.interaction.focus.ring-container}",
+      "visual": "the selection fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -447,8 +447,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -499,7 +499,7 @@
     "filterable-table",
     "i3-window-frame"
   ],
-  "nonExamples": "A circle. An icon button without an accessible name. A toggle that changes\nits label instead of `aria-pressed`. A hover that recolours the icon alone.\nAn emoji or icon-font glyph in place of the SVG. A toggled state shown by\ncolour alone with a line icon. A shadow or scale on press.",
+  "nonExamples": "A circle. No accessible name. A toggle that changes its label instead of\n`aria-pressed`. A hover that recolours only the icon. An emoji or icon-font\nglyph instead of the SVG. A toggled state shown by colour alone with a line\nicon. A shadow or scale on press.",
   "contrast": [
     {
       "label": "icon-button default text",
@@ -610,11 +610,11 @@
       "state": "toggled+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/kbd.json b/packages/ui/dist/canonical/kbd.json
index c7de78e55..1842e98a0 100644
--- a/packages/ui/dist/canonical/kbd.json
+++ b/packages/ui/dist/canonical/kbd.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "kbd",
   "family": "display",
   "maturity": "stable",
@@ -159,6 +159,18 @@
         "decisionIds": []
       }
     },
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-radius-none": {
       "alias": "radius.none",
       "value": "0px",
diff --git a/packages/ui/dist/canonical/link.json b/packages/ui/dist/canonical/link.json
index 644a18354..172f73b6a 100644
--- a/packages/ui/dist/canonical/link.json
+++ b/packages/ui/dist/canonical/link.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "link",
   "family": "actions",
   "maturity": "stable",
@@ -25,7 +25,7 @@
     "states": 5
   },
   "title": "Link",
-  "summary": "The native anchor for navigation; always underlined in the link-underline role, hover fills with the strong hover surface, the current page carries a 2px indicator bar.",
+  "summary": "The native anchor for navigation; always underlined in the link-underline role, hover fills with the hover surface, the current page carries a 2px indicator bar.",
   "anchors": {
     "site": "https://j3w1.github.io/theme/reference/#c-link",
     "spec": "spec/components/link.md",
@@ -101,8 +101,8 @@
       }
     },
     "root.bg-hover": {
-      "alias": "color.interaction.hover.bg-strong",
-      "value": "#630f0d",
+      "alias": "color.interaction.hover.bg",
+      "value": "#1c0a09",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -176,7 +176,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "{color.text.link}; underline 1px {color.text.link-underline} offset 2px",
+      "visual": "{color.text.link}; 1px {color.text.link-underline} underline, offset 2px",
       "channel": "the underline",
       "tokens": {
         "fg": {
@@ -207,8 +207,8 @@
     },
     {
       "state": "hover",
-      "visual": "background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover}; underline 2px in the text colour",
-      "channel": "underline thickens 1px → 2px; cursor: pointer",
+      "visual": "fill {color.interaction.hover.bg} (D-027); text {color.text.link-hover}; underline 2px in the text colour",
+      "channel": "underline 1px → 2px; cursor: pointer",
       "tokens": {
         "fg": {
           "alias": "color.text.link-hover",
@@ -223,8 +223,8 @@
           }
         },
         "bg": {
-          "alias": "color.interaction.hover.bg-strong",
-          "value": "#630f0d",
+          "alias": "color.interaction.hover.bg",
+          "value": "#1c0a09",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -238,7 +238,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px; no change to the underline",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px; underline unchanged",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -281,8 +281,8 @@
     },
     {
       "state": "visited",
-      "visual": "{color.text.link}; underline unchanged",
-      "channel": "the underline continues to mark navigation; browsing history does not reduce its visibility",
+      "visual": "as default",
+      "channel": "the underline still marks navigation",
       "tokens": {
         "fg": {
           "alias": "color.text.link",
@@ -312,8 +312,8 @@
     },
     {
       "state": "current",
-      "visual": "text → {color.text.bright}; the underline becomes a 2px {color.border.selected-indicator} bottom border; no hover fill",
-      "channel": "`aria-current=\"page\"`; the bar's 2px weight",
+      "visual": "{color.text.bright}; a 2px {color.border.selected-indicator} bottom border replaces the underline; no hover fill",
+      "channel": "`aria-current=\"page\"`; the 2px bar",
       "tokens": {
         "fg": {
           "alias": "color.text.bright",
@@ -415,10 +415,10 @@
       "kind": "text",
       "min": 4.5,
       "fg": "color.text.link-hover",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#f4eeee",
-      "bgHex": "#630f0d",
-      "ratio": 11.41,
+      "bgHex": "#1c0a09",
+      "ratio": 16.7,
       "pass": true,
       "waiver": null
     },
@@ -545,10 +545,10 @@
       "kind": "ui",
       "min": 3,
       "fg": "color.interaction.focus.ring",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#e53935",
-      "bgHex": "#630f0d",
-      "ratio": 3.1,
+      "bgHex": "#1c0a09",
+      "ratio": 4.53,
       "pass": true,
       "waiver": null
     }
diff --git a/packages/ui/dist/canonical/list.json b/packages/ui/dist/canonical/list.json
index dc0863550..0b40b7264 100644
--- a/packages/ui/dist/canonical/list.json
+++ b/packages/ui/dist/canonical/list.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "list",
   "family": "display",
   "maturity": "stable",
@@ -181,8 +181,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -244,7 +244,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "text {color.text.default}; no fill; the check gutter empty",
+      "visual": "text {color.text.default}; no fill; check gutter empty",
       "channel": "—",
       "tokens": {
         "fg": {
@@ -320,7 +320,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the option",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the option",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -394,7 +394,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the fill and the ring in {color.interaction.focus.ring-container}",
+      "visual": "the fill and 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -422,8 +422,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -534,7 +534,7 @@
     "settings-panel",
     "filterable-table"
   ],
-  "nonExamples": "A selected row marked by a border or a check alone without the fill. Rounded\nrow highlights. Muted metadata left on the selection fill. A list where every\nrow is a tab stop. A list that navigates on selection. Disabled rows removed\nfrom the arrow-key order. Hover that changes the text colour. A list without\na frame on the canvas.",
+  "nonExamples": "A selected row marked by a border or check without the fill. Rounded row\nhighlights. Muted metadata left on the selection fill. Every row a tab stop.\nNavigating on selection. Disabled rows removed from the arrow-key order.\nHover that changes text colour. A frameless list on the canvas.",
   "contrast": [
     {
       "label": "list default text",
@@ -632,11 +632,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/loading-indicator.json b/packages/ui/dist/canonical/loading-indicator.json
index 104d2579b..4248e1107 100644
--- a/packages/ui/dist/canonical/loading-indicator.json
+++ b/packages/ui/dist/canonical/loading-indicator.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "loading-indicator",
   "family": "feedback",
   "maturity": "stable",
@@ -140,7 +140,7 @@
     },
     {
       "state": "reduced-motion",
-      "visual": "identical: there is nothing to reduce",
+      "visual": "identical: nothing to reduce",
       "channel": "`prefers-reduced-motion`",
       "tokens": {
         "fg": {
@@ -204,7 +204,7 @@
     "filterable-table",
     "settings-panel"
   ],
-  "nonExamples": "A spinner or rotating ring. Animated dots. A shimmering skeleton. A full-page\noverlay that blocks input for a fetch. A glyph with no label. An indicator\nthat takes focus. A dimmed container at reduced opacity.",
+  "nonExamples": "A spinner or rotating ring. Animated dots. A shimmering skeleton. A\nfull-page overlay blocking input for a fetch. A glyph with no label. An\nindicator that takes focus. A dimmed, reduced-opacity container.",
   "contrast": [
     {
       "label": "loading-indicator default text",
diff --git a/packages/ui/dist/canonical/menu.json b/packages/ui/dist/canonical/menu.json
index 347454645..759da2894 100644
--- a/packages/ui/dist/canonical/menu.json
+++ b/packages/ui/dist/canonical/menu.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "menu",
   "family": "navigation",
   "maturity": "stable",
@@ -254,8 +254,8 @@
       }
     },
     "active.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -319,7 +319,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "the button at rest; the list on {color.surface.raised} with the {color.border.overlay} frame",
+      "visual": "button at rest; list on {color.surface.raised} in the {color.border.overlay} frame",
       "channel": "—",
       "tokens": {
         "fg": {
@@ -364,7 +364,7 @@
     },
     {
       "state": "hover",
-      "visual": "item background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover}",
+      "visual": "item → {color.interaction.hover.bg-strong}, text {color.text.link-hover}",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -395,7 +395,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the button; on the active item the ring is {color.interaction.focus.ring-container}",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the button and the active item",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -452,8 +452,8 @@
     },
     {
       "state": "open",
-      "visual": "button fill {color.interaction.pressed.bg} with 1px {color.border.active}; the list shown",
-      "channel": "`aria-expanded=\"true\"`; the list is present",
+      "visual": "button {color.interaction.pressed.bg} with 1px {color.border.active}; list shown",
+      "channel": "`aria-expanded=\"true\"`; list present",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -495,8 +495,8 @@
     },
     {
       "state": "closed",
-      "visual": "the button at rest; the list hidden",
-      "channel": "`aria-expanded=\"false\"`; the list is absent from the tree",
+      "visual": "button at rest; list hidden",
+      "channel": "`aria-expanded=\"false\"`; list absent from the tree",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -540,13 +540,13 @@
     },
     {
       "state": "disabled",
-      "visual": "item text {color.text.disabled}; no hover; still focusable by arrow keys when `aria-disabled`",
+      "visual": "item text {color.text.disabled}; no hover; still reachable by arrow keys when `aria-disabled`",
       "channel": "`aria-disabled=\"true\"`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "checked",
-      "visual": "the ✓ glyph in {color.text.bright} in the gutter",
+      "visual": "✓ in {color.text.bright} in the gutter",
       "channel": "`aria-checked=\"true\"`; the glyph",
       "tokens": {
         "fg": {
@@ -577,8 +577,8 @@
     },
     {
       "state": "selected",
-      "visual": "the active item: fill {color.interaction.selection.bg} with {color.interaction.selection.text}",
-      "channel": "focus is on the item; `aria-activedescendant` where used",
+      "visual": "active item filled {color.interaction.selection.bg} with {color.interaction.selection.text}",
+      "channel": "focus on the item; `aria-activedescendant` where used",
       "tokens": {
         "fg": {
           "alias": "color.interaction.selection.text",
@@ -605,8 +605,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -683,7 +683,7 @@
     "filterable-table",
     "i3-window-frame"
   ],
-  "nonExamples": "A shadow under the menu. Rounded corners on the menu or the items. An active\nitem marked by text colour alone. A hover fill that differs from every other\nmenu in the product. Icons in the check gutter of a plain menuitem. A menu\nthat stays open after an action. Items that are links styled as menu items\nwithout `role=\"menuitem\"`. Disabling by opacity.",
+  "nonExamples": "A shadow under the menu. Rounded menu or items. An active item marked by text\ncolour alone. A hover fill unlike every other menu in the product. Icons in a\nplain menuitem's check gutter. A menu that stays open after an action. Links\nstyled as menu items without `role=\"menuitem\"`. Disabling by opacity.",
   "contrast": [
     {
       "label": "menu default text",
@@ -846,11 +846,11 @@
       "state": "selected",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/multiselect.json b/packages/ui/dist/canonical/multiselect.json
index a8ba1ce29..686d488d3 100644
--- a/packages/ui/dist/canonical/multiselect.json
+++ b/packages/ui/dist/canonical/multiselect.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "multiselect",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -139,6 +139,90 @@
         "decisionIds": []
       }
     },
+    "button.bg": {
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.focus": {
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-border-width-default": {
       "alias": "border.width.default",
       "value": "1px",
@@ -479,7 +563,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Named content on the default surface.",
+      "visual": "Named content on the default surface. Button controls are the secondary button (button.md); inputs keep the input look.",
       "channel": "Native text and structure.",
       "tokens": {
         "fg": {
@@ -543,7 +627,7 @@
     {
       "state": "no-results",
       "visual": "Muted result count.",
-      "channel": "Zero-results text; existing selected values remain selected.",
+      "channel": "Zero-results text; selected values stay selected.",
       "tokens": {}
     }
   ],
@@ -648,6 +732,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/number-field.json b/packages/ui/dist/canonical/number-field.json
index bfb33549d..6bb6373b6 100644
--- a/packages/ui/dist/canonical/number-field.json
+++ b/packages/ui/dist/canonical/number-field.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "number-field",
   "family": "forms-basic",
   "maturity": "stable",
@@ -427,7 +427,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px on the box, or on the focused stepper button",
+      "visual": "border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px on the box or the focused stepper button",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -482,8 +482,8 @@
     },
     {
       "state": "invalid",
-      "visual": "border 2px {color.status.danger.border}; message with the ✕ glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border}; message with the ✕ glyph",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -586,7 +586,7 @@
     },
     {
       "state": "read-only",
-      "visual": "no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; the stepper is hidden",
+      "visual": "no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; stepper hidden",
       "channel": "`readonly`; dotted edge; no buttons",
       "tokens": {
         "fg": {
@@ -665,7 +665,7 @@
     "settings-panel",
     "admin-form"
   ],
-  "nonExamples": "The host's default spinner. Round or overlapping stepper buttons. A value\nclamped silently on blur. Left-aligned digits. A unit typed into the value.\nA number field for phone numbers, postcodes or identifiers. Invalid shown by\ncolour alone. Disabling by opacity.",
+  "nonExamples": "The host's default spinner. Round or overlapping stepper buttons. A value\nclamped silently. Left-aligned digits. A unit typed into the value. A number\nfield for phone numbers, postcodes or identifiers. Invalid by colour alone.\nDisabling by opacity.",
   "contrast": [
     {
       "label": "number-field default text",
diff --git a/packages/ui/dist/canonical/pagination.json b/packages/ui/dist/canonical/pagination.json
index ff123f954..fc277760b 100644
--- a/packages/ui/dist/canonical/pagination.json
+++ b/packages/ui/dist/canonical/pagination.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "pagination",
   "family": "navigation",
   "maturity": "stable",
@@ -156,8 +156,8 @@
       }
     },
     "current.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -207,7 +207,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "text {color.text.default}; no fill; no border",
+      "visual": "{color.text.default}; no fill, no border",
       "channel": "—",
       "tokens": {
         "fg": {
@@ -269,7 +269,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px; on the current page the ring is {color.interaction.focus.ring-container}",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px, including the current page",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -312,7 +312,7 @@
     },
     {
       "state": "current",
-      "visual": "fill {color.interaction.selection.bg}; text {color.text.on-selection}; no hover",
+      "visual": "fill {color.interaction.selection.bg}, text {color.text.on-selection}; no hover",
       "channel": "`aria-current=\"page\"`",
       "tokens": {
         "fg": {
@@ -343,7 +343,7 @@
     },
     {
       "state": "disabled",
-      "visual": "text {color.text.disabled}; no fill; no hover",
+      "visual": "{color.text.disabled}; no fill, no hover",
       "channel": "`aria-disabled=\"true\"`; no `href`; cursor: not-allowed",
       "tokens": {}
     }
@@ -385,7 +385,7 @@
   "specimens": [
     "filterable-table"
   ],
-  "nonExamples": "Rounded or circular page buttons. A border around every page link. The\ncurrent page marked by colour or bold alone without `aria-current`. Previous\nand next as glyph-only links without a label. A disabled end that still has\nan `href`. Pagination that hides the last page number. A row that scrolls\nhorizontally.",
+  "nonExamples": "Rounded or circular page buttons. A border around every page link. The\ncurrent page marked by colour or bold alone, without `aria-current`.\nGlyph-only previous and next. A disabled end with an `href`. Hiding the last\npage number. A horizontally scrolling row.",
   "contrast": [
     {
       "label": "pagination default text",
@@ -457,11 +457,11 @@
       "state": "current",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/popover.json b/packages/ui/dist/canonical/popover.json
index dcf6bad54..811d70acb 100644
--- a/packages/ui/dist/canonical/popover.json
+++ b/packages/ui/dist/canonical/popover.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "popover",
   "family": "feedback",
   "maturity": "stable",
@@ -115,11 +115,71 @@
       }
     },
     "control.bg": {
-      "alias": "color.surface.input",
-      "value": "#000000",
-      "status": "approved",
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
       "deprecated": false,
-      "decisionId": "D-023",
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "control.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
       "eligibility": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -200,9 +260,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -212,9 +272,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -224,9 +284,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-16": {
-      "alias": "space.16",
-      "value": "16px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -236,9 +296,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-16": {
+      "alias": "space.16",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -264,7 +324,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Named trigger.",
+      "visual": "Named trigger. Its buttons are the secondary button (button.md).",
       "channel": "Button semantics and accessible name.",
       "tokens": {
         "fg": {
@@ -427,6 +487,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/progress.json b/packages/ui/dist/canonical/progress.json
index 7c6daa591..b96e3feab 100644
--- a/packages/ui/dist/canonical/progress.json
+++ b/packages/ui/dist/canonical/progress.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "progress",
   "family": "feedback",
   "maturity": "stable",
@@ -187,7 +187,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "fill {color.action.primary.bg} on the track; the value text",
+      "visual": "{color.action.primary.bg} fill on the track; the value text",
       "channel": "the native value; the percentage text",
       "tokens": {
         "fg": {
@@ -232,13 +232,13 @@
     },
     {
       "state": "busy",
-      "visual": "the whole track shows static 45° stripes of {color.action.primary.bg} on {color.interaction.pressed.bg}; no value text",
+      "visual": "static 45° stripes of {color.action.primary.bg} on {color.interaction.pressed.bg} across the track; no value text",
       "channel": "`aria-busy`; `aria-valuetext`; the stripe pattern; no animation",
       "tokens": {}
     },
     {
       "state": "error",
-      "visual": "fill → {color.status.danger.fill}; the label gains the ✕ glyph in {color.status.danger.text}; the detail line says what failed",
+      "visual": "fill → {color.status.danger.fill}; the label gains ✕ in {color.status.danger.text}; the detail line says what failed",
       "channel": "glyph; worded detail",
       "tokens": {
         "fg": {
@@ -325,7 +325,7 @@
     "admin-form",
     "i3-window-frame"
   ],
-  "nonExamples": "A spinner. Animated or \"barber-pole\" stripes. A shimmering skeleton in place\nof a bar. A circular ring. A rounded pill-shaped bar. Colour-only failure\nwithout the glyph and text. A bar with no label. A bar that blocks input.",
+  "nonExamples": "A spinner. Animated or barber-pole stripes. A shimmering skeleton instead of\na bar. A circular ring. A rounded pill bar. Colour-only failure without the\nglyph and text. A bar with no label. A bar that blocks input.",
   "contrast": [
     {
       "label": "progress default text",
@@ -416,7 +416,7 @@
       "bgHex": "#420f0c",
       "ratio": 1.51,
       "pass": false,
-      "waiver": "the fill measures 1.51:1 against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control, 4.45:1) marks the full extent"
+      "waiver": "the fill falls below the floor against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control) marks the full extent"
     },
     {
       "label": "stripes (decorative pattern)",
diff --git a/packages/ui/dist/canonical/radio-group.json b/packages/ui/dist/canonical/radio-group.json
index 4a9111e7a..1d522509e 100644
--- a/packages/ui/dist/canonical/radio-group.json
+++ b/packages/ui/dist/canonical/radio-group.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "radio-group",
   "family": "forms-basic",
   "maturity": "stable",
@@ -305,7 +305,7 @@
     },
     {
       "state": "hover",
-      "visual": "box background → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg}",
+      "visual": "box → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg}",
       "channel": "cursor: pointer; hover-capable pointers only",
       "tokens": {
         "bg": {
@@ -338,7 +338,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px around the box",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px around the box",
       "channel": "the ring",
       "tokens": {
         "bg": {
@@ -383,7 +383,7 @@
     },
     {
       "state": "checked",
-      "visual": "box fills {color.action.primary.bg}; an 8px inner square in {color.action.primary.text}; border stays {color.border.control}",
+      "visual": "box fills {color.action.primary.bg}; 8px inner square in {color.action.primary.text}; border stays {color.border.control}",
       "channel": "the inner square; `checked`",
       "tokens": {
         "fg": {
@@ -457,7 +457,7 @@
     },
     {
       "state": "disabled",
-      "visual": "boxes {color.interaction.disabled.bg} with 1px {color.border.disabled}; inner square and text {color.text.disabled}",
+      "visual": "boxes {color.interaction.disabled.bg}, 1px {color.border.disabled}; inner square and text {color.text.disabled}",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
@@ -573,7 +573,7 @@
     "settings-panel",
     "admin-form"
   ],
-  "nonExamples": "Circular radios. A checked state shown by border colour alone with no inner\nsquare. Radios that submit or navigate on change. A group with no legend or\nwith the legend rendered as a label on one option. Separate tab stops per\nradio. One radio on its own. Disabling by opacity. A div with\n`role=\"radiogroup\"` built from spans.",
+  "nonExamples": "Circular radios. Checked shown by border colour alone, without the inner\nsquare. Submitting or navigating on change. No legend, or the legend as one\noption's label. A tab stop per radio. A lone radio. Disabling by opacity. A\ndiv with `role=\"radiogroup\"` built from spans.",
   "contrast": [
     {
       "label": "radio-group default border",
diff --git a/packages/ui/dist/canonical/range.json b/packages/ui/dist/canonical/range.json
index 81b7ed980..1b72854de 100644
--- a/packages/ui/dist/canonical/range.json
+++ b/packages/ui/dist/canonical/range.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "range",
   "family": "forms-basic",
   "maturity": "stable",
@@ -221,6 +221,18 @@
         "decisionIds": []
       }
     },
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-radius-none": {
       "alias": "radius.none",
       "value": "0px",
@@ -273,8 +285,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Named content on the default surface.",
-      "channel": "Native text and structure.",
+      "visual": "named content on the default surface",
+      "channel": "native text and structure",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -318,14 +330,14 @@
     },
     {
       "state": "focus-visible",
-      "visual": "Dashed focus ring.",
-      "channel": "Native keyboard focus position.",
+      "visual": "dashed focus ring",
+      "channel": "native focus position",
       "tokens": {}
     },
     {
       "state": "disabled",
-      "visual": "Disabled semantic foreground, background and border at full opacity.",
-      "channel": "Native disabled state blocks activation.",
+      "visual": "disabled foreground, background and border at full opacity",
+      "channel": "native disabled state blocks activation",
       "tokens": {}
     }
   ],
@@ -360,7 +372,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls. Colour-only status. Drag-only operations. Hidden\nrequired instructions. Stolen focus. An invented service success.",
   "contrast": [
     {
       "label": "range default text",
diff --git a/packages/ui/dist/canonical/repeater.json b/packages/ui/dist/canonical/repeater.json
index f3d24afd9..9dfe509b9 100644
--- a/packages/ui/dist/canonical/repeater.json
+++ b/packages/ui/dist/canonical/repeater.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "repeater",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -138,6 +138,90 @@
         "decisionIds": []
       }
     },
+    "button.bg": {
+      "alias": "color.action.secondary.bg",
+      "value": "rgb(0 0 0 / 0%)",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.text": {
+      "alias": "color.action.secondary.text",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border": {
+      "alias": "color.action.secondary.border",
+      "value": "#a3676b",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-hover": {
+      "alias": "color.action.secondary.hover-bg",
+      "value": "#630f0d",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.bg-active": {
+      "alias": "color.action.secondary.pressed-bg",
+      "value": "#420f0c",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.border-active": {
+      "alias": "color.border.active",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
+    "button.focus": {
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "dependency.role-border-width-default": {
       "alias": "border.width.default",
       "value": "1px",
@@ -210,9 +294,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -222,9 +306,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -234,9 +318,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -274,8 +358,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Named content on the default surface.",
-      "channel": "Native text and structure.",
+      "visual": "named content on the default surface. Button controls are the secondary button (button.md); inputs keep the input look.",
+      "channel": "native text and structure",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -319,20 +403,20 @@
     },
     {
       "state": "empty",
-      "visual": "A muted empty message.",
-      "channel": "Explicit text and retained Add action.",
+      "visual": "a muted empty message",
+      "channel": "explicit text; Add stays",
       "tokens": {}
     },
     {
       "state": "focus-visible",
-      "visual": "Dashed focus ring.",
-      "channel": "Native keyboard focus position.",
+      "visual": "dashed focus ring",
+      "channel": "native focus position",
       "tokens": {}
     },
     {
       "state": "disabled",
-      "visual": "Disabled semantic foreground, background and border at full opacity.",
-      "channel": "Native disabled state blocks activation.",
+      "visual": "disabled foreground, background and border at full opacity",
+      "channel": "native disabled state blocks activation",
       "tokens": {}
     }
   ],
@@ -367,7 +451,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls. Colour-only status. Drag-only operations. Hidden\nrequired instructions. Stolen focus. An invented service success.",
   "contrast": [
     {
       "label": "repeater default text",
@@ -433,6 +517,32 @@
       "ratio": 4.36,
       "pass": true,
       "waiver": null
+    },
+    {
+      "label": "Button label",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.surface.default",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#100c0c",
+      "ratio": 10.17,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "Button label on hover",
+      "state": null,
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.action.secondary.text",
+      "bg": "color.action.secondary.hover-bg",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#630f0d",
+      "ratio": 6.84,
+      "pass": true,
+      "waiver": null
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/search-field.json b/packages/ui/dist/canonical/search-field.json
index 1dcb56e9c..0f9a2a7a6 100644
--- a/packages/ui/dist/canonical/search-field.json
+++ b/packages/ui/dist/canonical/search-field.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "search-field",
   "family": "forms-basic",
   "maturity": "stable",
@@ -353,7 +353,7 @@
     },
     {
       "state": "hover",
-      "visual": "background → {color.interaction.hover.bg}; the clear button → {color.action.tertiary.hover-bg} when hovered",
+      "visual": "background → {color.interaction.hover.bg}; a hovered clear button → {color.action.tertiary.hover-bg}",
       "channel": "cursor: text",
       "tokens": {
         "fg": {
@@ -398,7 +398,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px; the hint hides",
+      "visual": "border → {color.border.active}; 1px dashed {color.interaction.focus.ring} ring at −2px; the hint hides",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -454,7 +454,7 @@
     {
       "state": "placeholder-shown",
       "visual": "placeholder in {color.text.placeholder}, italic; no clear button",
-      "channel": "italic; the clear button is absent",
+      "channel": "italic; clear button absent",
       "tokens": {
         "fg": {
           "alias": "color.text.placeholder",
@@ -498,13 +498,13 @@
     },
     {
       "state": "filled",
-      "visual": "as default with a value; the clear button is present",
+      "visual": "as default with a value; clear button present",
       "channel": "the clear button",
       "tokens": {}
     },
     {
       "state": "loading",
-      "visual": "the static `⋯` glyph in {color.text.muted} replaces the magnifier; the input stays editable",
+      "visual": "static `⋯` in {color.text.muted} replaces the magnifier; input stays editable",
       "channel": "glyph; `aria-busy`",
       "tokens": {
         "fg": {
@@ -549,13 +549,13 @@
     },
     {
       "state": "disabled",
-      "visual": "text and icon {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no clear button",
+      "visual": "text and icon {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; no clear button",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "no-results",
-      "visual": "the status line \"No results for …\" in {color.text.muted} below the help; the box unchanged",
+      "visual": "status line \"No results for …\" in {color.text.muted} below the help; box unchanged",
       "channel": "the status text; `role=\"status\"`",
       "tokens": {
         "fg": {
@@ -650,7 +650,7 @@
     "filterable-table",
     "settings-panel"
   ],
-  "nonExamples": "Rounded or pill-shaped search boxes. A magnifier button that submits\ninstead of an icon. A spinner while loading. Results announced on every\nkeystroke. \"No results\" in red or with the ✕ glyph. A clear button that is\nalways visible. A search field without a label. Disabling by opacity.",
+  "nonExamples": "Rounded or pill-shaped boxes. A magnifier button that submits. A spinner while\nloading. Results announced on every keystroke. \"No results\" in red or with\nthe ✕ glyph. An always-visible clear button. No label. Disabling by opacity.",
   "contrast": [
     {
       "label": "search-field default text",
@@ -897,7 +897,7 @@
       "bgHex": "#000000",
       "ratio": 1.47,
       "pass": true,
-      "waiver": "the hint is not a control; its text at 5.81:1 carries the meaning"
+      "waiver": "the hint is not a control; its text carries the meaning"
     },
     {
       "label": "disabled text (exempt; house floor 3:1)",
diff --git a/packages/ui/dist/canonical/segmented-control.json b/packages/ui/dist/canonical/segmented-control.json
index b157ecc0c..de2b1fe06 100644
--- a/packages/ui/dist/canonical/segmented-control.json
+++ b/packages/ui/dist/canonical/segmented-control.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "segmented-control",
   "family": "actions",
   "maturity": "stable",
@@ -450,18 +450,6 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
-      "status": "observed",
-      "deprecated": false,
-      "decisionId": null,
-      "eligibility": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      }
-    },
     "dependency.role-space-24": {
       "alias": "space.24",
       "value": "24px",
diff --git a/packages/ui/dist/canonical/select.json b/packages/ui/dist/canonical/select.json
index 012098b94..250dec3f9 100644
--- a/packages/ui/dist/canonical/select.json
+++ b/packages/ui/dist/canonical/select.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "select",
   "family": "forms-basic",
   "maturity": "stable",
@@ -414,7 +414,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -514,8 +514,8 @@
     },
     {
       "state": "invalid",
-      "visual": "border 2px {color.status.danger.border}; message with the ✕ glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border}; message with ✕",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -557,7 +557,7 @@
     },
     {
       "state": "invalid+focus-visible",
-      "visual": "the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px",
+      "visual": "2px danger border and {color.interaction.focus.ring-container} ring at −4px",
       "channel": "double boundary",
       "tokens": {
         "fg": {
@@ -612,7 +612,7 @@
     },
     {
       "state": "disabled",
-      "visual": "text and chevron {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}",
+      "visual": "text and chevron {color.text.disabled}; {color.border.disabled}; {color.interaction.disabled.bg}",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     }
@@ -676,7 +676,7 @@
     "admin-form",
     "filterable-table"
   ],
-  "nonExamples": "An unthemed browser popup presented as a fully themed implementation. A background-image chevron in\na literal colour. Rounded corners. A select whose first option is blank. A\nselect that triggers navigation on change. Invalid shown by colour alone.\nA glow instead of the ring. Disabling by opacity.",
+  "nonExamples": "An unthemed browser popup presented as fully themed. A background-image\nchevron in a literal colour. Rounded corners. A blank first option. Navigation\non change. Invalid by colour alone. A glow instead of the ring. Disabling by\nopacity.",
   "contrast": [
     {
       "label": "select default text",
diff --git a/packages/ui/dist/canonical/settings-panel.json b/packages/ui/dist/canonical/settings-panel.json
index 611a3f401..b6184e06c 100644
--- a/packages/ui/dist/canonical/settings-panel.json
+++ b/packages/ui/dist/canonical/settings-panel.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "settings-panel",
   "family": "composed",
   "maturity": "stable",
@@ -382,7 +382,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "rest tokens of every component on {color.surface.default}; the open section carries the indicator bar",
+      "visual": "every component's rest tokens on {color.surface.default}; the open section carries the indicator bar",
       "channel": "`aria-current`",
       "tokens": {
         "fg": {
@@ -413,7 +413,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "the dashed {color.interaction.focus.ring} on the control holding focus (shown on the first switch); the other controls stay at rest",
+      "visual": "the dashed {color.interaction.focus.ring} on the focused control (shown on the first switch); others at rest",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -470,7 +470,7 @@
     },
     {
       "state": "invalid",
-      "visual": "the inner-gap field takes the 2px {color.status.danger.border} and shows its ✕ message; the other controls stay at rest",
+      "visual": "the inner-gap field takes the 2px {color.status.danger.border} and its ✕ message; others at rest",
       "channel": "border width 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
@@ -550,7 +550,7 @@
     },
     {
       "key": "Enter / Space",
-      "action": "Follows a section link; toggles a switch or checkbox; opens the select."
+      "action": "Enter follows a section link; Space toggles a switch or native checkbox; Enter or Space opens the select."
     },
     {
       "key": "Arrow keys",
@@ -593,7 +593,7 @@
     "tabs"
   ],
   "specimens": [],
-  "nonExamples": "A rounded, shadowed settings card. A Material-style app bar above the form.\nToggle switches with rounded pills or animated thumbs. Section links drawn\nas filled tabs instead of the indicator bar. A red form background to show\nthat something is invalid. Applying while the controls are dimmed with\nopacity. A spinner replacing the Apply label.",
+  "nonExamples": "A rounded, shadowed settings card. A Material-style app bar above the form.\nPill switches or animated thumbs. Section links as filled tabs instead of\nthe indicator bar. A red form background for invalid. Dimming the controls\nwith opacity while applying. A spinner replacing the Apply label.",
   "contrast": [
     {
       "label": "settings-panel default text",
diff --git a/packages/ui/dist/canonical/sidebar-nav.json b/packages/ui/dist/canonical/sidebar-nav.json
index 6865d49fa..b6e3fe8b7 100644
--- a/packages/ui/dist/canonical/sidebar-nav.json
+++ b/packages/ui/dist/canonical/sidebar-nav.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "sidebar-nav",
   "family": "navigation",
   "maturity": "stable",
@@ -203,8 +203,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -297,7 +297,7 @@
     },
     {
       "state": "hover",
-      "visual": "background → {color.interaction.hover.bg}",
+      "visual": "→ {color.interaction.hover.bg}",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -328,7 +328,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -414,8 +414,8 @@
     },
     {
       "state": "selected",
-      "visual": "fill {color.interaction.selection.bg} with {color.interaction.selection.text}; the ring in {color.interaction.focus.ring-container} when focused",
-      "channel": "`aria-selected` on a listbox-style rail; the fill's on-fill text",
+      "visual": "{color.interaction.selection.bg} with {color.interaction.selection.text}; 1px dashed {color.interaction.focus.ring} at −2px when focused",
+      "channel": "`aria-selected` on a listbox-style rail; the on-fill text",
       "tokens": {
         "fg": {
           "alias": "color.interaction.selection.text",
@@ -445,7 +445,7 @@
     },
     {
       "state": "selected+container-inactive",
-      "visual": "fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring",
+      "visual": "{color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring",
       "channel": "lightness drop between the two fills",
       "tokens": {
         "fg": {
@@ -476,7 +476,7 @@
     },
     {
       "state": "expanded",
-      "visual": "the group's chevron rotated 90°; its sublist shown",
+      "visual": "chevron rotated 90°; sublist shown",
       "channel": "`aria-expanded=\"true\"`; the children are present",
       "tokens": {
         "fg": {
@@ -507,8 +507,8 @@
     },
     {
       "state": "collapsed",
-      "visual": "labels visually hidden; icons centred; the current bar and fills unchanged",
-      "channel": "the labels remain for assistive technology and as tooltips",
+      "visual": "labels visually hidden; icons centred; current bar and fills unchanged",
+      "channel": "labels remain for assistive technology and as tooltips",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -581,7 +581,7 @@
     "settings-panel",
     "i3-window-frame"
   ],
-  "nonExamples": "A filled or rounded current item. The indicator on the inline-end edge. A\ncurrent item marked by bold text alone. Labels removed from the DOM when\ncollapsed. A group whose children stay in the tab order while hidden. A rail\nthat scrolls horizontally. Icon-only links with no accessible name. Hover that\nchanges the text colour.",
+  "nonExamples": "A filled or rounded current item. The indicator on the inline-end edge. A\ncurrent item marked by bold alone. Labels removed from the DOM when\ncollapsed. Hidden children left in the tab order. A rail that scrolls\nhorizontally. Icon-only links without an accessible name. Hover that changes\nthe text colour.",
   "contrast": [
     {
       "label": "sidebar-nav default text",
@@ -718,11 +718,11 @@
       "state": "selected",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/skeleton.json b/packages/ui/dist/canonical/skeleton.json
index 63dd2a064..e35e3d103 100644
--- a/packages/ui/dist/canonical/skeleton.json
+++ b/packages/ui/dist/canonical/skeleton.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "skeleton",
   "family": "feedback",
   "maturity": "stable",
@@ -175,9 +175,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -187,9 +187,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -199,9 +199,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-16": {
-      "alias": "space.16",
-      "value": "16px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -211,9 +211,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-16": {
+      "alias": "space.16",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -227,8 +227,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Static decorative blocks.",
-      "channel": "Named loading status.",
+      "visual": "static decorative blocks",
+      "channel": "named loading status",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -272,14 +272,14 @@
     },
     {
       "state": "loading",
-      "visual": "Raised surface blocks; no opacity fade.",
-      "channel": "aria-busy on the region.",
+      "visual": "raised-surface blocks; no opacity fade",
+      "channel": "`aria-busy` on the region",
       "tokens": {}
     },
     {
       "state": "reduced-motion",
-      "visual": "Same static presentation.",
-      "channel": "No information depends on movement.",
+      "visual": "the same static presentation",
+      "channel": "no information depends on movement",
       "tokens": {}
     }
   ],
@@ -310,7 +310,7 @@
   ],
   "related": [],
   "specimens": [],
-  "nonExamples": "Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.",
+  "nonExamples": "Unlabelled controls. Colour-only status. Drag-only operations. Hidden\nrequired instructions. Stolen focus. An invented service success.",
   "contrast": [
     {
       "label": "skeleton default text",
diff --git a/packages/ui/dist/canonical/skip-link.json b/packages/ui/dist/canonical/skip-link.json
index 0ee9a6759..d0225bf23 100644
--- a/packages/ui/dist/canonical/skip-link.json
+++ b/packages/ui/dist/canonical/skip-link.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "skip-link",
   "family": "navigation",
   "maturity": "stable",
@@ -104,8 +104,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "off-screen; nothing is painted",
-      "channel": "the link is still in the tab order and the accessibility tree",
+      "visual": "off-screen; nothing painted",
+      "channel": "still in the tab order and the accessibility tree",
       "tokens": {
         "fg": {
           "alias": "color.text.bright",
@@ -149,7 +149,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "appears in the top corner; ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "appears in the top corner; 1px dashed {color.interaction.focus.ring} ring at −2px",
       "channel": "the link appears; the ring",
       "tokens": {
         "fg": {
@@ -245,7 +245,7 @@
     "settings-panel",
     "admin-form"
   ],
-  "nonExamples": "A skip link that is always visible. One hidden with `display: none` or\n`visibility: hidden`. One that is not the first tab stop. One that points at\nan element without `tabindex=\"-1\"`, so focus does not move. A skip link\nthat slides in from the side and causes horizontal scroll while hidden. A\nrounded pill. One rendered without the frame on the canvas.",
+  "nonExamples": "Always visible. Hidden with `display: none` or `visibility: hidden`. Not the\nfirst tab stop. Pointing at an element without `tabindex=\"-1\"`, so focus does\nnot move. Sliding in from the side and causing horizontal scroll while hidden.\nA rounded pill. Rendered without the frame on the canvas.",
   "contrast": [
     {
       "label": "skip-link default text",
diff --git a/packages/ui/dist/canonical/switch.json b/packages/ui/dist/canonical/switch.json
index e9672d2d0..012a70d63 100644
--- a/packages/ui/dist/canonical/switch.json
+++ b/packages/ui/dist/canonical/switch.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "switch",
   "family": "forms-basic",
   "maturity": "stable",
@@ -282,7 +282,7 @@
     },
     {
       "state": "hover",
-      "visual": "track background → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg}",
+      "visual": "off track → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg}",
       "channel": "cursor: pointer; hover-capable pointers only",
       "tokens": {
         "bg": {
@@ -315,7 +315,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the track",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the track",
       "channel": "the ring",
       "tokens": {
         "bg": {
@@ -360,7 +360,7 @@
     },
     {
       "state": "checked",
-      "visual": "track fills {color.action.primary.bg}; thumb {color.action.primary.text} moves to the end; border stays {color.border.control}; the word reads \"On\"",
+      "visual": "track fills {color.action.primary.bg}; thumb {color.action.primary.text} at the end; border stays {color.border.control}; the word reads \"On\"",
       "channel": "`aria-checked=\"true\"`; thumb position; the word",
       "tokens": {
         "fg": {
@@ -391,7 +391,7 @@
     },
     {
       "state": "checked+focus-visible",
-      "visual": "the fill and a ring in {color.interaction.focus.ring-container} on the track",
+      "visual": "the fill and a {color.interaction.focus.ring-container} ring on the track",
       "channel": "position and ring",
       "tokens": {
         "fg": {
@@ -434,13 +434,13 @@
     },
     {
       "state": "disabled",
-      "visual": "track {color.interaction.disabled.bg} with 1px {color.border.disabled}; thumb and name {color.text.disabled}",
+      "visual": "track {color.interaction.disabled.bg}, 1px {color.border.disabled}; thumb and name {color.text.disabled}",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
     {
       "state": "checked+disabled",
-      "visual": "as disabled with the thumb at the end",
+      "visual": "as disabled, thumb at the end",
       "channel": "`disabled`; `aria-checked=\"true\"`; thumb position",
       "tokens": {}
     }
@@ -485,7 +485,7 @@
   "specimens": [
     "settings-panel"
   ],
-  "nonExamples": "A pill-shaped track or a round thumb. A switch that only takes effect on\nsubmit. A checkbox input styled as a switch. Colour as the only difference\nbetween on and off. A green on colour. A label that reads \"On\" as the name.\nDisabling by opacity. A sliding animation longer than 120ms or one that\nruns under reduced motion.",
+  "nonExamples": "A pill track or round thumb. A switch that applies on submit. A checkbox\ninput styled as a switch. Colour as the only on/off difference. A green on\ncolour. \"On\" as the name. Disabling by opacity. A slide longer than 120ms or\none under reduced motion.",
   "contrast": [
     {
       "label": "switch default border",
diff --git a/packages/ui/dist/canonical/table.json b/packages/ui/dist/canonical/table.json
index 43b389639..fe0110f0f 100644
--- a/packages/ui/dist/canonical/table.json
+++ b/packages/ui/dist/canonical/table.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "table",
   "family": "display",
   "maturity": "stable",
@@ -219,8 +219,8 @@
       }
     },
     "selected.ring": {
-      "alias": "color.interaction.focus.ring-container",
-      "value": "#ffa2a7",
+      "alias": "color.interaction.focus.ring",
+      "value": "#e53935",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -325,8 +325,8 @@
     },
     {
       "state": "hover",
-      "visual": "row background → {color.interaction.hover.bg}",
-      "channel": "cursor: default; only on hover-capable pointers",
+      "visual": "row → {color.interaction.hover.bg}",
+      "channel": "cursor: default; hover-capable pointers only",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -387,7 +387,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the fill and a ring in {color.interaction.focus.ring-container} around the row",
+      "visual": "the fill and 1px dashed {color.interaction.focus.ring} at −2px around the row",
       "channel": "both visible at once",
       "tokens": {
         "fg": {
@@ -415,8 +415,8 @@
           }
         },
         "outline": {
-          "alias": "color.interaction.focus.ring-container",
-          "value": "#ffa2a7",
+          "alias": "color.interaction.focus.ring",
+          "value": "#e53935",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -461,7 +461,7 @@
     },
     {
       "state": "sorted",
-      "visual": "the sorted header shows ▲ (ascending) or ▼ (descending) in {color.text.bright}",
+      "visual": "▲ (ascending) or ▼ (descending) in {color.text.bright} on the sorted header",
       "channel": "`aria-sort`; the glyph",
       "tokens": {
         "fg": {
@@ -492,7 +492,7 @@
     },
     {
       "state": "empty",
-      "visual": "the body is one full-width cell in {color.text.muted}: \"No rows match.\"",
+      "visual": "one full-width cell in {color.text.muted}: \"No rows match.\"",
       "channel": "the message text",
       "tokens": {
         "fg": {
@@ -523,7 +523,7 @@
     },
     {
       "state": "loading",
-      "visual": "the body is one full-width cell with the static `⋯` glyph in {color.text.muted}; the header stays",
+      "visual": "one full-width cell with the static `⋯` glyph in {color.text.muted}; the header stays",
       "channel": "`aria-busy=\"true\"`; the glyph; no animation",
       "tokens": {
         "fg": {
@@ -595,7 +595,7 @@
     "filterable-table",
     "settings-panel"
   ],
-  "nonExamples": "Zebra striping. A rounded or bordered table frame. A selected row marked by\na left bar (that is navigation, not selection). Header text in caption size\nor uppercase. Sorting shown by colour alone without `aria-sort` and a glyph.\nAn animated spinner while loading. An empty state that removes the header.\nText truncated with no way to read the full value. A hover fill on a\ntouch device.",
+  "nonExamples": "Zebra striping. A rounded or bordered frame. A selected row marked by a\nleft bar (that is navigation). Header text in caption size or uppercase.\nSorting by colour alone without `aria-sort` and a glyph. An animated\nspinner. An empty state that removes the header. Truncated text with no way\nto read the full value. Hover fill on touch.",
   "contrast": [
     {
       "label": "table default text",
@@ -654,11 +654,11 @@
       "state": "selected+focus-visible",
       "kind": "ui",
       "min": 3,
-      "fg": "color.interaction.focus.ring-container",
+      "fg": "color.interaction.focus.ring",
       "bg": "color.interaction.selection.bg",
-      "fgHex": "#ffa2a7",
+      "fgHex": "#e53935",
       "bgHex": "#531310",
-      "ratio": 7.48,
+      "ratio": 3.38,
       "pass": true,
       "waiver": null
     },
diff --git a/packages/ui/dist/canonical/tabs.json b/packages/ui/dist/canonical/tabs.json
index 58485f204..8980fbe3d 100644
--- a/packages/ui/dist/canonical/tabs.json
+++ b/packages/ui/dist/canonical/tabs.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "tabs",
   "family": "navigation",
   "maturity": "stable",
@@ -274,7 +274,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -360,7 +360,7 @@
     },
     {
       "state": "selected+focus-visible",
-      "visual": "the bar and the ring together",
+      "visual": "bar and ring together",
       "channel": "both visible",
       "tokens": {
         "fg": {
@@ -503,7 +503,7 @@
     "settings-panel",
     "i3-window-frame"
   ],
-  "nonExamples": "Pill or filled tabs. A selected tab drawn with the selection fill. Rounded\ncorners on the tab or the bar. A tab strip that wraps to two lines. A tab that\nchanges only its text colour when selected. A glow instead of the dashed ring.\nEvery tab in the tab order. Disabling by opacity.",
+  "nonExamples": "Pill or filled tabs. A selected tab in the selection fill. Rounded tabs or\nbar. A strip that wraps to two lines. A selected tab that changes only its\ntext colour. A glow instead of the dashed ring. Every tab in the tab order.\nDisabling by opacity.",
   "contrast": [
     {
       "label": "tabs default text",
diff --git a/packages/ui/dist/canonical/terminal.json b/packages/ui/dist/canonical/terminal.json
index ea4d0847a..466359d3c 100644
--- a/packages/ui/dist/canonical/terminal.json
+++ b/packages/ui/dist/canonical/terminal.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "terminal",
   "family": "developer",
   "maturity": "stable",
@@ -479,7 +479,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "text on {color.terminal.bg}; the cursor cell hollow, a 1px {color.terminal.cursor} outline; no ring",
+      "visual": "text on {color.terminal.bg}; cursor hollow, 1px {color.terminal.cursor} outline; no ring",
       "channel": "the hollow cursor",
       "tokens": {
         "fg": {
@@ -524,7 +524,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "container ring 2px {color.interaction.focus.ring-container} at −3px; the cursor solid {color.terminal.cursor} with {color.terminal.bg} text",
+      "visual": "2px {color.interaction.focus.ring-container} container ring at −3px; cursor solid {color.terminal.cursor} with {color.terminal.bg} text",
       "channel": "the ring; the cursor fills",
       "tokens": {
         "fg": {
@@ -567,8 +567,8 @@
     },
     {
       "state": "selected",
-      "visual": "the run filled {color.terminal.selection-bg} with {color.terminal.selection-text}; slot colours inside the run give way to the selection text",
-      "channel": "the fill spans whole cells; the emulator exposes the selection",
+      "visual": "run filled {color.terminal.selection-bg} with {color.terminal.selection-text}; slot colours inside give way to the selection text",
+      "channel": "whole-cell fill; the emulator exposes the selection",
       "tokens": {
         "fg": {
           "alias": "color.terminal.selection-text",
@@ -598,8 +598,8 @@
     },
     {
       "state": "busy",
-      "visual": "a command is running: the cursor is a solid static block at the end of the output; the transcript is `aria-busy`",
-      "channel": "`aria-busy`; the cursor shape; no blink",
+      "visual": "command running: solid static block cursor at the end of the output; transcript `aria-busy`",
+      "channel": "`aria-busy`; cursor shape; no blink",
       "tokens": {
         "fg": {
           "alias": "color.terminal.bg",
@@ -629,8 +629,8 @@
     },
     {
       "state": "current",
-      "visual": "the cursor line filled {color.code.current-line} across its width; the cursor as in focus",
-      "channel": "the row fill; the cursor cell",
+      "visual": "cursor line filled {color.code.current-line} across its width; cursor as in focus",
+      "channel": "row fill; cursor cell",
       "tokens": {
         "fg": {
           "alias": "color.terminal.fg",
@@ -700,7 +700,7 @@
   "specimens": [
     "i3-window-frame"
   ],
-  "nonExamples": "Normalising the heritage slots so every one reaches 4.5:1 and calling it\n`heritage-ansi`. A blinking cursor in the reference. A cursor that is a\nglowing bar. Bold rendered as bright, which silently swaps the slots. A\npurple or cyan slot borrowed from another scheme. Wrapping the transcript at\nnarrow widths and breaking the prompt segments. A selection drawn as a ring\ninstead of a fill. Rounded prompt segments or a gradient prompt.",
+  "nonExamples": "Normalising the heritage slots to 4.5:1 and calling it `heritage-ansi`. A\nblinking cursor in the reference. A glowing bar cursor. Bold rendered as\nbright. A purple or cyan slot borrowed from another scheme. Wrapping the\ntranscript and breaking the prompt segments. A selection drawn as a ring\ninstead of a fill. Rounded or gradient prompt segments.",
   "contrast": [
     {
       "label": "terminal default text",
diff --git a/packages/ui/dist/canonical/text-field.json b/packages/ui/dist/canonical/text-field.json
index 739cfa09b..d654df458 100644
--- a/packages/ui/dist/canonical/text-field.json
+++ b/packages/ui/dist/canonical/text-field.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "text-field",
   "family": "forms-basic",
   "maturity": "stable",
@@ -479,7 +479,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "border → {color.border.active}; 1px dashed {color.interaction.focus.ring} ring at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -591,8 +591,8 @@
     },
     {
       "state": "invalid",
-      "visual": "border 2px {color.status.danger.border}; message with the ✕ glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border}; message with the ✕ glyph",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -634,7 +634,7 @@
     },
     {
       "state": "invalid+focus-visible",
-      "visual": "the 2px danger border and a 1px dashed ring in {color.interaction.focus.ring-container} at −4px (the control form, recoloured; never the 2px container form)",
+      "visual": "the 2px danger border plus a 1px dashed {color.interaction.focus.ring-container} ring at −4px (the control form recoloured, never the 2px container form)",
       "channel": "double boundary",
       "tokens": {
         "fg": {
@@ -695,7 +695,7 @@
     },
     {
       "state": "disabled",
-      "visual": "text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no hover; the label and help keep their colours",
+      "visual": "text {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; no hover; label and help keep their colours",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
@@ -738,13 +738,13 @@
     },
     {
       "state": "read-only+focus-visible",
-      "visual": "the dotted {color.border.divider} edge unchanged, plus the dashed ring at −2px",
+      "visual": "the dotted edge unchanged, plus the dashed ring at −2px",
       "channel": "the ring",
       "tokens": {}
     },
     {
       "state": "loading",
-      "visual": "size unchanged; a static `⋯` glyph in {color.text.muted} inside the box after the input and before any trailing action; input remains editable",
+      "visual": "size unchanged; static `⋯` in {color.text.muted} after the input, before any trailing action; still editable",
       "channel": "glyph; `aria-busy`",
       "tokens": {}
     }
@@ -801,7 +801,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "Rounded corners. A floating or animated label. An underline-only field with no\nbox. A glow instead of the dashed ring. Placeholder text in red. Disabling by\nopacity. Using colour alone for the invalid state. A hover that changes the\ntext colour.",
+  "nonExamples": "Rounded corners. A floating or animated label. An underline-only field. A glow\ninstead of the dashed ring. Red placeholder text. Disabling by opacity. Colour\nalone for the invalid state. A hover that changes the text colour.",
   "contrast": [
     {
       "label": "text-field default text",
diff --git a/packages/ui/dist/canonical/textarea.json b/packages/ui/dist/canonical/textarea.json
index 78d7dacfc..e09fe13b0 100644
--- a/packages/ui/dist/canonical/textarea.json
+++ b/packages/ui/dist/canonical/textarea.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "textarea",
   "family": "forms-basic",
   "maturity": "stable",
@@ -393,7 +393,7 @@
     },
     {
       "state": "hover",
-      "visual": "background → {color.interaction.hover.bg}; border unchanged",
+      "visual": "→ {color.interaction.hover.bg}; border unchanged",
       "channel": "cursor: text",
       "tokens": {
         "fg": {
@@ -438,7 +438,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -493,7 +493,7 @@
     },
     {
       "state": "placeholder-shown",
-      "visual": "placeholder in {color.text.placeholder}, italic",
+      "visual": "{color.text.placeholder}, italic",
       "channel": "italic",
       "tokens": {
         "fg": {
@@ -550,8 +550,8 @@
     },
     {
       "state": "invalid",
-      "visual": "border 2px {color.status.danger.border}; message with the ✕ glyph; a count past its limit turns {color.status.danger.text} with the glyph",
-      "channel": "border width 1 → 2px; glyph; `aria-invalid`",
+      "visual": "2px {color.status.danger.border}; message with ✕; a count past its limit turns {color.status.danger.text} with the glyph",
+      "channel": "border 1 → 2px; glyph; `aria-invalid`",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -593,7 +593,7 @@
     },
     {
       "state": "invalid+focus-visible",
-      "visual": "the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px",
+      "visual": "the 2px danger border and a {color.interaction.focus.ring-container} ring at −4px",
       "channel": "double boundary",
       "tokens": {
         "fg": {
@@ -648,7 +648,7 @@
     },
     {
       "state": "disabled",
-      "visual": "text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no resize handle",
+      "visual": "text {color.text.disabled}, border {color.border.disabled}, fill {color.interaction.disabled.bg}; no resize handle",
       "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     },
@@ -729,7 +729,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "Horizontal or free resizing. A box narrower than its label column. A count\nthat only changes colour past the limit. A glow instead of the dashed ring.\nRounded corners. An auto-growing box with no maximum. Tab inserting a\ncharacter. Placeholder text as the label. Disabling by opacity.",
+  "nonExamples": "Horizontal or free resizing. A box narrower than its label column. A count\nthat only changes colour past the limit. A glow instead of the dashed ring.\nRounded corners. Auto-growing with no maximum. Tab inserting a character.\nPlaceholder as the label. Disabling by opacity.",
   "contrast": [
     {
       "label": "textarea default text",
diff --git a/packages/ui/dist/canonical/time-picker.json b/packages/ui/dist/canonical/time-picker.json
index 0587e84cf..29f48b021 100644
--- a/packages/ui/dist/canonical/time-picker.json
+++ b/packages/ui/dist/canonical/time-picker.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "time-picker",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -22,7 +22,7 @@
     "demonstrated": true,
     "tested": false,
     "testImplemented": false,
-    "states": 5
+    "states": 6
   },
   "title": "Time picker",
   "summary": "A themed time editor with explicit step buttons, backed by native time values and constraints.",
@@ -51,6 +51,7 @@
     "hover",
     "focus-visible",
     "invalid",
+    "invalid+focus-visible",
     "disabled"
   ],
   "tokens": {
@@ -116,6 +117,18 @@
         "decisionIds": []
       }
     },
+    "root.ring-invalid": {
+      "alias": "color.interaction.focus.ring-container",
+      "value": "#ffa2a7",
+      "status": "observed",
+      "deprecated": false,
+      "decisionId": null,
+      "eligibility": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      }
+    },
     "root.border-invalid": {
       "alias": "color.status.danger.border",
       "value": "#e53935",
@@ -228,8 +241,8 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "Input surface, default text and control border.",
-      "channel": "",
+      "visual": "{color.text.default} on {color.surface.input}, 1px {color.border.control}",
+      "channel": "—",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -273,8 +286,8 @@
     },
     {
       "state": "hover",
-      "visual": "The declared hover fill.",
-      "channel": "",
+      "visual": "background → {color.interaction.hover.bg}",
+      "channel": "hover-capable pointers only",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -318,8 +331,8 @@
     },
     {
       "state": "focus-visible",
-      "visual": "Active border and the canonical focus ring.",
-      "channel": "",
+      "visual": "border → {color.border.active}; the canonical focus ring",
+      "channel": "the ring",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -373,8 +386,51 @@
     },
     {
       "state": "invalid",
-      "visual": "Danger border and a linked message.",
-      "channel": "",
+      "visual": "2px {color.status.danger.border}; a linked message",
+      "channel": "border 1 → 2px; ✕ glyph; `aria-invalid`",
+      "tokens": {
+        "fg": {
+          "alias": "color.text.default",
+          "value": "#e99499",
+          "status": "observed",
+          "deprecated": false,
+          "decisionId": null,
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
+        },
+        "bg": {
+          "alias": "color.surface.input",
+          "value": "#000000",
+          "status": "approved",
+          "deprecated": false,
+          "decisionId": "D-023",
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
+        },
+        "border": {
+          "alias": "color.status.danger.border",
+          "value": "#e53935",
+          "status": "observed",
+          "deprecated": false,
+          "decisionId": null,
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
+        }
+      }
+    },
+    {
+      "state": "invalid+focus-visible",
+      "visual": "the danger border and the ring in {color.interaction.focus.ring-container} at −4px",
+      "channel": "double boundary",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -411,13 +467,25 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           }
+        },
+        "outline": {
+          "alias": "color.interaction.focus.ring-container",
+          "value": "#ffa2a7",
+          "status": "observed",
+          "deprecated": false,
+          "decisionId": null,
+          "eligibility": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          }
         }
       }
     },
     {
       "state": "disabled",
-      "visual": "Disabled colors; editor and step actions unavailable.",
-      "channel": "",
+      "visual": "{color.text.disabled} on {color.interaction.disabled.bg}, border {color.border.disabled}; editor and step actions unavailable",
+      "channel": "`disabled`; cursor: not-allowed",
       "tokens": {}
     }
   ],
@@ -463,7 +531,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "An unthemed host popup presented as fully themed. A second named input that duplicates form values. Discarding native constraints, labels or reset behavior. Literal colors, rounded corners, or a selected fill with no distinguishable focus boundary.",
+  "nonExamples": "An unthemed host popup presented as themed. A second named input\nduplicating form values. Dropping native constraints, labels or reset.\nLiteral colours or rounded corners.",
   "contrast": [
     {
       "label": "time-picker default text",
@@ -582,6 +650,45 @@
       "pass": true,
       "waiver": null
     },
+    {
+      "label": "time-picker invalid+focus-visible text",
+      "state": "invalid+focus-visible",
+      "kind": "text",
+      "min": 4.5,
+      "fg": "color.text.default",
+      "bg": "color.surface.input",
+      "fgHex": "#e99499",
+      "bgHex": "#000000",
+      "ratio": 9.16,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "time-picker invalid+focus-visible border",
+      "state": "invalid+focus-visible",
+      "kind": "ui",
+      "min": 3,
+      "fg": "color.status.danger.border",
+      "bg": "color.surface.input",
+      "fgHex": "#e53935",
+      "bgHex": "#000000",
+      "ratio": 4.97,
+      "pass": true,
+      "waiver": null
+    },
+    {
+      "label": "time-picker invalid+focus-visible outline",
+      "state": "invalid+focus-visible",
+      "kind": "ui",
+      "min": 3,
+      "fg": "color.interaction.focus.ring-container",
+      "bg": "color.surface.input",
+      "fgHex": "#ffa2a7",
+      "bgHex": "#000000",
+      "ratio": 10.98,
+      "pass": true,
+      "waiver": null
+    },
     {
       "label": "validation message on the canvas",
       "state": null,
diff --git a/packages/ui/dist/canonical/timeline.json b/packages/ui/dist/canonical/timeline.json
index 83ff40778..d85df3434 100644
--- a/packages/ui/dist/canonical/timeline.json
+++ b/packages/ui/dist/canonical/timeline.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "timeline",
   "family": "display",
   "maturity": "stable",
@@ -186,9 +186,9 @@
         ]
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -198,9 +198,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -210,9 +210,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
diff --git a/packages/ui/dist/canonical/toast.json b/packages/ui/dist/canonical/toast.json
index cfe4f70b4..43391e3bb 100644
--- a/packages/ui/dist/canonical/toast.json
+++ b/packages/ui/dist/canonical/toast.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "toast",
   "family": "feedback",
   "maturity": "stable",
@@ -305,8 +305,8 @@
       }
     },
     "action.bg-hover": {
-      "alias": "color.interaction.hover.bg-strong",
-      "value": "#630f0d",
+      "alias": "color.interaction.hover.bg",
+      "value": "#1c0a09",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -437,8 +437,8 @@
     },
     {
       "state": "hover",
-      "visual": "action → {color.interaction.hover.bg-strong} with {color.text.link-hover}; Dismiss → {color.action.tertiary.hover-bg}; the timeout pauses",
-      "channel": "cursor: pointer; underline thickens on the action",
+      "visual": "action → {color.interaction.hover.bg} with {color.text.link-hover}; Dismiss → {color.action.tertiary.hover-bg}; the timeout pauses",
+      "channel": "cursor: pointer; the action's underline thickens",
       "tokens": {
         "fg": {
           "alias": "color.text.link-hover",
@@ -453,8 +453,8 @@
           }
         },
         "bg": {
-          "alias": "color.interaction.hover.bg-strong",
-          "value": "#630f0d",
+          "alias": "color.interaction.hover.bg",
+          "value": "#1c0a09",
           "status": "observed",
           "deprecated": false,
           "decisionId": null,
@@ -468,7 +468,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the focused button; on the danger fill the ring takes {color.status.danger.on-fill}; the timeout pauses",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the focused button, {color.status.danger.on-fill} on the danger fill; the timeout pauses",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -511,7 +511,7 @@
     },
     {
       "state": "stacked",
-      "visual": "toasts sit in one column with a 4px gap, newest at the end; the last visible toast shows \"+n\" in {color.text.muted} for queued ones",
+      "visual": "one column, 4px gap, newest at the end; the last visible toast shows \"+n\" in {color.text.muted}",
       "channel": "the count text; at most three visible",
       "tokens": {
         "fg": {
@@ -556,7 +556,7 @@
     },
     {
       "state": "reduced-motion",
-      "visual": "no transition; the toast is simply present or absent",
+      "visual": "no transition; present or absent",
       "channel": "`prefers-reduced-motion`; nothing moves",
       "tokens": {
         "fg": {
@@ -648,7 +648,7 @@
     "i3-window-frame",
     "settings-panel"
   ],
-  "nonExamples": "A toast that slides in from an edge. A rounded, shadowed pill. A toast with\nno Dismiss that vanishes after two seconds. A toast that takes focus on\nappearance. Stacking more than three with no count. A form error shown as a\ntoast. Colour-only status without the glyph and worded text.",
+  "nonExamples": "A toast that slides in. A rounded, shadowed pill. No Dismiss and gone in two\nseconds. Taking focus on appearance. More than three stacked with no count. A\nform error as a toast. Colour-only status without the glyph and worded text.",
   "contrast": [
     {
       "label": "toast default text",
@@ -682,10 +682,10 @@
       "kind": "text",
       "min": 4.5,
       "fg": "color.text.link-hover",
-      "bg": "color.interaction.hover.bg-strong",
+      "bg": "color.interaction.hover.bg",
       "fgHex": "#f4eeee",
-      "bgHex": "#630f0d",
-      "ratio": 11.41,
+      "bgHex": "#1c0a09",
+      "ratio": 16.7,
       "pass": true,
       "waiver": null
     },
@@ -986,7 +986,7 @@
       "bgHex": "#dc282e",
       "ratio": 1.13,
       "pass": true,
-      "waiver": "the fill is the boundary at 4.14:1 against the canvas; the border only keeps the box model identical across statuses"
+      "waiver": "the fill is the boundary against the canvas; the border only keeps the box model identical across statuses"
     }
   ]
 }
diff --git a/packages/ui/dist/canonical/toolbar.json b/packages/ui/dist/canonical/toolbar.json
index 91e767555..7c862698b 100644
--- a/packages/ui/dist/canonical/toolbar.json
+++ b/packages/ui/dist/canonical/toolbar.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "toolbar",
   "family": "navigation",
   "maturity": "stable",
@@ -272,7 +272,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -415,7 +415,7 @@
     "filterable-table",
     "i3-window-frame"
   ],
-  "nonExamples": "Buttons with a visible border at rest. A filled primary button inside the\ntoolbar. Rounded buttons or a pill-shaped toolbar. Every button in the tab\norder when script is available. A toggled state shown by colour alone without\n`aria-pressed`. A toolbar that wraps to two lines. A separator that receives\nfocus. Disabling by opacity.",
+  "nonExamples": "Buttons bordered at rest. A filled primary button in the toolbar. Rounded\nbuttons or a pill-shaped toolbar. Every button in the tab order when script\nis available. A toggled state by colour alone without `aria-pressed`. A\ntoolbar wrapping to two lines. A focusable separator. Disabling by opacity.",
   "contrast": [
     {
       "label": "toolbar default text",
diff --git a/packages/ui/dist/canonical/tooltip.json b/packages/ui/dist/canonical/tooltip.json
index ddb21e5a0..c459e8d7f 100644
--- a/packages/ui/dist/canonical/tooltip.json
+++ b/packages/ui/dist/canonical/tooltip.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "tooltip",
   "family": "feedback",
   "maturity": "stable",
@@ -175,7 +175,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "trigger at rest; the popup shown for the demonstration",
+      "visual": "trigger at rest; popup shown for the demonstration",
       "channel": "`aria-describedby` on the trigger",
       "tokens": {
         "fg": {
@@ -220,8 +220,8 @@
     },
     {
       "state": "hover",
-      "visual": "trigger background → {color.action.tertiary.hover-bg}; the popup appears after 300 ms",
-      "channel": "cursor: pointer; the popup itself",
+      "visual": "trigger background → {color.action.tertiary.hover-bg}; popup after 300 ms",
+      "channel": "cursor: pointer; the popup",
       "tokens": {
         "fg": {
           "alias": "color.action.tertiary.text",
@@ -251,7 +251,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the trigger; the popup appears at once",
+      "visual": "1px dashed {color.interaction.focus.ring} at −2px on the trigger; popup at once",
       "channel": "the ring; the popup",
       "tokens": {
         "fg": {
@@ -294,8 +294,8 @@
     },
     {
       "state": "open",
-      "visual": "the popup visible, 1px {color.border.overlay} on {color.surface.raised}",
-      "channel": "the popup is present in the accessibility tree",
+      "visual": "popup visible, 1px {color.border.overlay} on {color.surface.raised}",
+      "channel": "popup in the accessibility tree",
       "tokens": {
         "fg": {
           "alias": "color.text.default",
@@ -339,7 +339,7 @@
     },
     {
       "state": "closed",
-      "visual": "the popup absent; the trigger unchanged",
+      "visual": "popup absent; trigger unchanged",
       "channel": "`hidden`; the description is still read from the DOM",
       "tokens": {}
     }
@@ -389,7 +389,7 @@
     "i3-window-frame",
     "filterable-table"
   ],
-  "nonExamples": "A rounded bubble with an arrow. A tooltip with a shadow or a fade longer\nthan 150 ms. A tooltip as the only accessible name of an icon button. A\ntooltip with a link or a button inside. One that opens on focus but not on\nhover, or on hover with no delay. A title attribute. A tooltip that follows\nthe pointer.",
+  "nonExamples": "A rounded bubble with an arrow. A shadow, or a fade longer than 150 ms. The\ntooltip as an icon button's only accessible name. A link or button inside.\nOpening on focus but not hover, or on hover with no delay. A `title`\nattribute. Following the pointer.",
   "contrast": [
     {
       "label": "tooltip default text",
diff --git a/packages/ui/dist/canonical/tree.json b/packages/ui/dist/canonical/tree.json
index 0a8264775..31111bfbe 100644
--- a/packages/ui/dist/canonical/tree.json
+++ b/packages/ui/dist/canonical/tree.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "tree",
   "family": "navigation",
   "maturity": "stable",
@@ -237,9 +237,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-radius-none": {
-      "alias": "radius.none",
-      "value": "0px",
+    "dependency.role-focus-offset": {
+      "alias": "focus.offset",
+      "value": "-2px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -249,9 +249,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-12": {
-      "alias": "space.12",
-      "value": "12px",
+    "dependency.role-radius-none": {
+      "alias": "radius.none",
+      "value": "0px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -261,9 +261,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-16": {
-      "alias": "space.16",
-      "value": "16px",
+    "dependency.role-space-12": {
+      "alias": "space.12",
+      "value": "12px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
@@ -273,9 +273,9 @@
         "decisionIds": []
       }
     },
-    "dependency.role-space-2": {
-      "alias": "space.2",
-      "value": "2px",
+    "dependency.role-space-16": {
+      "alias": "space.16",
+      "value": "16px",
       "status": "observed",
       "deprecated": false,
       "decisionId": null,
diff --git a/packages/ui/dist/canonical/wizard.json b/packages/ui/dist/canonical/wizard.json
index ba5a2363b..286edb722 100644
--- a/packages/ui/dist/canonical/wizard.json
+++ b/packages/ui/dist/canonical/wizard.json
@@ -9,7 +9,7 @@
     "stability": "release",
     "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
   },
-  "sourceDigest": "sha256-fztdpeuj8EtGHpEoSbDrK6kta336ucIVK4lrRKrlasc=",
+  "sourceDigest": "sha256-6uRaGQN7UQ/uX3qDHUJuH9NBVBJtjcyePgHd2iIlnYw=",
   "id": "wizard",
   "family": "forms-advanced",
   "maturity": "stable",
@@ -366,7 +366,7 @@
   "stateRules": [
     {
       "state": "default",
-      "visual": "steps in {color.text.default}; complete steps carry the ✓ in {color.status.success.text}",
+      "visual": "steps in {color.text.default}; complete steps carry ✓ in {color.status.success.text}",
       "channel": "the ✓ glyph; the numbers",
       "tokens": {
         "fg": {
@@ -397,7 +397,7 @@
     },
     {
       "state": "hover",
-      "visual": "step background → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg}",
+      "visual": "step → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg}",
       "channel": "cursor: pointer",
       "tokens": {
         "fg": {
@@ -428,7 +428,7 @@
     },
     {
       "state": "focus-visible",
-      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px; on Next's fill the ring takes {color.interaction.focus.ring-container}",
+      "visual": "1px dashed {color.interaction.focus.ring} ring at −2px; {color.interaction.focus.ring-container} on Next's fill",
       "channel": "the ring",
       "tokens": {
         "fg": {
@@ -520,7 +520,7 @@
     },
     {
       "state": "invalid",
-      "visual": "the step's marker becomes ✕ in {color.status.danger.text}; its indicator takes {color.status.danger.border}; the panel shows the message",
+      "visual": "marker becomes ✕ in {color.status.danger.text}; indicator {color.status.danger.border}; the panel shows the message",
       "channel": "glyph; message text; `aria-invalid` on the failing fields",
       "tokens": {
         "fg": {
@@ -563,7 +563,7 @@
     },
     {
       "state": "busy",
-      "visual": "Next shows the static ⋯ glyph before its label and does not respond; size unchanged",
+      "visual": "Next shows the static ⋯ before its label and ignores activation; size unchanged",
       "channel": "`aria-busy` on the wizard; the glyph; cursor: progress",
       "tokens": {
         "fg": {
@@ -638,7 +638,7 @@
     "admin-form",
     "settings-panel"
   ],
-  "nonExamples": "Tabs restyled as steps. A progress bar in place of the stepper. Circles with\nconnecting lines that need a rounded radius. Future steps that look enabled\nand reject the click. A spinner on Next. Colour-only completion marks.\nValidation that blocks Back. Animated slides between panels.",
+  "nonExamples": "Tabs restyled as steps. A progress bar instead of the stepper. Circles with\nconnecting lines that need a radius. Future steps that look enabled and\nreject the click. A spinner on Next. Colour-only completion marks. Validation\nthat blocks Back. Animated slides between panels.",
   "contrast": [
     {
       "label": "wizard default text",
@@ -859,7 +859,7 @@
       "bgHex": "#000000",
       "ratio": 2.71,
       "pass": false,
-      "waiver": "the primary button is identified by its text at 9.28:1 on its fill and by its position; the fill measures 1.86:1 and its border 2.56:1 against the canvas, a documented property of the actions family, not of the wizard"
+      "waiver": "the primary button is identified by its text on the fill and by its position; the low-contrast fill and border against the canvas are a documented property of the actions family"
     },
     {
       "label": "ring on the next button's fill",
diff --git a/packages/ui/dist/chunks/advanced-DCpe8Ndv.js b/packages/ui/dist/chunks/advanced-CqBF0dSb.js
similarity index 97%
rename from packages/ui/dist/chunks/advanced-DCpe8Ndv.js
rename to packages/ui/dist/chunks/advanced-CqBF0dSb.js
index 3390a044c..4a5c45981 100644
--- a/packages/ui/dist/chunks/advanced-DCpe8Ndv.js
+++ b/packages/ui/dist/chunks/advanced-CqBF0dSb.js
@@ -1,4 +1,4 @@
-import { d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
+import { c as keyIndex, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
 import { t as IDREFS } from "./markup-DeQ4bEMR.js";
 //#region packages/ui/src/behaviors/advanced.js
 function tree(root, { on }) {
@@ -64,7 +64,12 @@ function tree(root, { on }) {
 			"End"
 		].includes(event.key)) {
 			event.preventDefault();
-			const next = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+			const next = keyIndex({
+				key: event.key,
+				index,
+				length: options.length,
+				wrap: false
+			});
 			rove(options, next);
 		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
 			event.preventDefault();
diff --git a/packages/ui/dist/copy/admin-form/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/chunks/choice-B7mo5Eq3.js
similarity index 98%
rename from packages/ui/dist/copy/admin-form/runtime/chunks/choice-Db_w_BOQ.js
rename to packages/ui/dist/chunks/choice-B7mo5Eq3.js
index aebc478b6..849c80b8b 100644
--- a/packages/ui/dist/copy/admin-form/runtime/chunks/choice-Db_w_BOQ.js
+++ b/packages/ui/dist/chunks/choice-B7mo5Eq3.js
@@ -31,6 +31,12 @@ function identify(root, node, suffix) {
 function nativeInput(input, type = "input") {
 	input.dispatchEvent(new Event(type, { bubbles: true }));
 }
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
 function rove(items, index, focus = true) {
 	if (!items.length) return null;
 	const next = items[(index + items.length) % items.length];
@@ -929,4 +935,4 @@ function enhanceControls(root) {
 	};
 }
 //#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/compositions-d6BkKTYf.js b/packages/ui/dist/chunks/compositions-D57dCsBz.js
similarity index 94%
rename from packages/ui/dist/copy/i3-window-frame/runtime/chunks/compositions-d6BkKTYf.js
rename to packages/ui/dist/chunks/compositions-D57dCsBz.js
index 7d70275f2..f1da4562e 100644
--- a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/compositions-d6BkKTYf.js
+++ b/packages/ui/dist/chunks/compositions-D57dCsBz.js
@@ -1,5 +1,5 @@
-import { i as all, o as enabled } from "./choice-Db_w_BOQ.js";
-import { i as tabs } from "./navigation-Dt8ap-9J.js";
+import { i as all, o as enabled } from "./choice-B7mo5Eq3.js";
+import { i as tabs } from "./navigation-BfNzDYZB.js";
 //#region packages/ui/src/behaviors/compositions.js
 function fileBrowser(root, { on }) {
 	const query = root.querySelector("[data-file-query]"), rows = all(root, "tr[data-file-id]"), status = root.querySelector("[data-file-status]");
diff --git a/packages/ui/dist/copy/chart/runtime/chunks/display-dj9YaBfn.js b/packages/ui/dist/chunks/display-Jm9bAsnb.js
similarity index 98%
rename from packages/ui/dist/copy/chart/runtime/chunks/display-dj9YaBfn.js
rename to packages/ui/dist/chunks/display-Jm9bAsnb.js
index 80833d5da..5bc817830 100644
--- a/packages/ui/dist/copy/chart/runtime/chunks/display-dj9YaBfn.js
+++ b/packages/ui/dist/chunks/display-Jm9bAsnb.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/display.js
 function avatar(root, { on }) {
 	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
diff --git a/packages/ui/dist/copy/alert/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/chunks/element-Dovcr9Ky.js
similarity index 99%
rename from packages/ui/dist/copy/alert/runtime/chunks/element-C1XeXVYC.js
rename to packages/ui/dist/chunks/element-Dovcr9Ky.js
index a943f150d..aa7a67cb4 100644
--- a/packages/ui/dist/copy/alert/runtime/chunks/element-C1XeXVYC.js
+++ b/packages/ui/dist/chunks/element-Dovcr9Ky.js
@@ -1,4 +1,4 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/internal/element.js
 var HTMLElementBase = globalThis.HTMLElement ?? class {};
 var nextInstance = 0;
diff --git a/packages/ui/dist/chunks/form-builder-Dkweb1xD.js b/packages/ui/dist/chunks/form-builder-BKs59W9y.js
similarity index 89%
rename from packages/ui/dist/chunks/form-builder-Dkweb1xD.js
rename to packages/ui/dist/chunks/form-builder-BKs59W9y.js
index 18dfbad3c..106281223 100644
--- a/packages/ui/dist/chunks/form-builder-Dkweb1xD.js
+++ b/packages/ui/dist/chunks/form-builder-BKs59W9y.js
@@ -1,5 +1,5 @@
-import { t as J3w1Element } from "./element-C1XeXVYC.js";
-import { t as mountBuilder } from "./form-builder-EQnl1AaR.js";
+import { t as J3w1Element } from "./element-Dovcr9Ky.js";
+import { t as mountBuilder } from "./form-builder-CqcTkYZe.js";
 //#region packages/ui/src/behaviors/form-builder.js
 function formBuilder(root, { signal }) {
 	const editor = root.querySelector("[data-builder]");
@@ -22,7 +22,7 @@ function formBuilder(root, { signal }) {
 var J3w1FormBuilder = class extends J3w1Element {
 	static componentId = "form-builder";
 	static version = "4.0.0";
-	static implementationId = "sha256-QcTsnt2RqgWKuYJuM/x0uqMUtYY2cGEONH+jVvm2nuY=";
+	static implementationId = "sha256-41YE+uuaHQO+zqvZR2V4/ifVHjcZBY/i/HTBt2PoeK0=";
 	static connect = formBuilder;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-EQnl1AaR.js b/packages/ui/dist/chunks/form-builder-CqcTkYZe.js
similarity index 99%
rename from packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-EQnl1AaR.js
rename to packages/ui/dist/chunks/form-builder-CqcTkYZe.js
index bb6438b9f..25321f36f 100644
--- a/packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-EQnl1AaR.js
+++ b/packages/ui/dist/chunks/form-builder-CqcTkYZe.js
@@ -1,4 +1,4 @@
-import { a as FORM_LIMITS, i as FIELD_TYPES, n as emptyValues, r as parseFormSchema, t as mountWorkflow } from "./form-workflow-DMGni-Gs.js";
+import { a as FORM_LIMITS, i as FIELD_TYPES, n as emptyValues, r as parseFormSchema, t as mountWorkflow } from "./form-workflow-BKRLylvq.js";
 //#region scripts/lib/form-builder.mjs
 var createBuilder = (theme) => ({
 	definition: {
@@ -69,7 +69,7 @@ var identity_default = {
 	name: "j3w1-theme",
 	version: "4.0.0",
 	profile: "default",
-	sourceDigest: "sha256-0pGYzXZFMWkGlbzNIlyxfInXr3Pog+Q6PuQTyO1Rbu0="
+	sourceDigest: "sha256-9w2X6Cih03PDyOMVu4XmMrmPqHs2iwGGaq5TvafCIUw="
 };
 //#endregion
 //#region packages/ui/src/internal/form-builder.js
diff --git a/packages/ui/dist/chunks/form-workflow-DMGni-Gs.js b/packages/ui/dist/chunks/form-workflow-BKRLylvq.js
similarity index 99%
rename from packages/ui/dist/chunks/form-workflow-DMGni-Gs.js
rename to packages/ui/dist/chunks/form-workflow-BKRLylvq.js
index cf001c7bc..6ef25ba0b 100644
--- a/packages/ui/dist/chunks/form-workflow-DMGni-Gs.js
+++ b/packages/ui/dist/chunks/form-workflow-BKRLylvq.js
@@ -26157,6 +26157,8 @@ function parseFragment(fragmentContext, html, options) {
 var anchorFor = {
 	verification: (id) => `v-${id}`,
 	component: (id) => `c-${id}`,
+	states: (id) => `${id}-states`,
+	heading: (kind, id, text) => `${kind === "component" ? "c" : "d"}-${id}--${text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")}`,
 	family: (id) => `f-${id}`,
 	doc: (id) => `d-${id}`,
 	decision: (id) => `d-decisions--${id.toLowerCase()}`,
diff --git a/packages/ui/dist/copy/settings-panel/runtime/chunks/forms-BT3z7lNC.js b/packages/ui/dist/chunks/forms-CE_hP1hg.js
similarity index 98%
rename from packages/ui/dist/copy/settings-panel/runtime/chunks/forms-BT3z7lNC.js
rename to packages/ui/dist/chunks/forms-CE_hP1hg.js
index 65f1f0e71..6ad3b48f5 100644
--- a/packages/ui/dist/copy/settings-panel/runtime/chunks/forms-BT3z7lNC.js
+++ b/packages/ui/dist/chunks/forms-CE_hP1hg.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/forms.js
 function wizard(root, { on }) {
 	const panels = all(root, ".wizard-panel"), steps = all(root, ".wizard-step-button"), backButton = root.querySelector(".wizard-back"), nextButton = root.querySelector(".wizard-next");
diff --git a/packages/ui/dist/copy/badge/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/chunks/native-BjBt1sUh.js
similarity index 98%
rename from packages/ui/dist/copy/badge/runtime/chunks/native-CAzZmDKR.js
rename to packages/ui/dist/chunks/native-BjBt1sUh.js
index 558c774e5..032f76c74 100644
--- a/packages/ui/dist/copy/badge/runtime/chunks/native-CAzZmDKR.js
+++ b/packages/ui/dist/chunks/native-BjBt1sUh.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/native.js
 function content() {
 	return {};
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/chunks/navigation-BfNzDYZB.js
similarity index 96%
rename from packages/ui/dist/copy/compact-dashboard/runtime/chunks/navigation-Dt8ap-9J.js
rename to packages/ui/dist/chunks/navigation-BfNzDYZB.js
index 81201c8d5..db2779553 100644
--- a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/navigation-Dt8ap-9J.js
+++ b/packages/ui/dist/chunks/navigation-BfNzDYZB.js
@@ -1,4 +1,4 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/navigation.js
 function tabs(root, { on }, listOverride) {
 	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
@@ -81,7 +81,13 @@ function toolbar(root, { on }) {
 			"End"
 		].includes(event.key)) return;
 		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
 	});
 	on(bar, "click", (event) => {
 		const button = event.target.closest("button[aria-pressed]");
@@ -321,7 +327,11 @@ function menu(root, { on }) {
 			"End"
 		].includes(event.key)) {
 			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
 		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
 			event.preventDefault();
 			event.stopPropagation();
diff --git a/packages/ui/dist/copy/chip/runtime/chunks/overlays-C6nlCHqg.js b/packages/ui/dist/chunks/overlays-Bw8SSDKz.js
similarity index 98%
rename from packages/ui/dist/copy/chip/runtime/chunks/overlays-C6nlCHqg.js
rename to packages/ui/dist/chunks/overlays-Bw8SSDKz.js
index 9df8503ec..3eeb8ff0d 100644
--- a/packages/ui/dist/copy/chip/runtime/chunks/overlays-C6nlCHqg.js
+++ b/packages/ui/dist/chunks/overlays-Bw8SSDKz.js
@@ -1,4 +1,4 @@
-import { i as all, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
+import { d as place, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/overlays.js
 function modal(root, { on }) {
 	const dialog = root.querySelector("dialog");
diff --git a/packages/ui/dist/copy/data-table/runtime/chunks/tables-B25ydUHs.js b/packages/ui/dist/chunks/tables-Cjr1EIJz.js
similarity index 96%
rename from packages/ui/dist/copy/data-table/runtime/chunks/tables-B25ydUHs.js
rename to packages/ui/dist/chunks/tables-Cjr1EIJz.js
index 172bab830..f82aaf25e 100644
--- a/packages/ui/dist/copy/data-table/runtime/chunks/tables-B25ydUHs.js
+++ b/packages/ui/dist/chunks/tables-Cjr1EIJz.js
@@ -1,4 +1,4 @@
-import { d as rove, i as all, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
+import { c as keyIndex, f as rove, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/tables.js
 function table(root, { on }) {
 	const element = root.querySelector("table"), body = element?.tBodies[0];
@@ -106,7 +106,12 @@ function table(root, { on }) {
 			"End"
 		].includes(event.key)) return;
 		event.preventDefault();
-		const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+		const nextIndex = keyIndex({
+			key: event.key,
+			index,
+			length: options.length,
+			wrap: false
+		});
 		const next = rove(options, nextIndex);
 		if (event.shiftKey && selectAll) {
 			anchor ??= row;
diff --git a/packages/ui/dist/components/admin-form.js b/packages/ui/dist/components/admin-form.js
index bb59750d7..f786258d5 100644
--- a/packages/ui/dist/components/admin-form.js
+++ b/packages/ui/dist/components/admin-form.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as formComposition } from "../chunks/forms-BT3z7lNC.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as formComposition } from "../chunks/forms-CE_hP1hg.js";
 //#region .cache/ui-build/entries/components/admin-form.js
 var J3w1AdminForm = class extends J3w1Element {
 	static componentId = "admin-form";
 	static version = "4.0.0";
-	static implementationId = "sha256-IZWHSSA/uP7yDRqpiKJQsQ05FssMem3lg++QYnGPtDM=";
+	static implementationId = "sha256-86V5kk3lZt3iA5GdiMBYc8P2mc4pO3KTo02FmkKh71k=";
 	static connect = formComposition;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/alert.js b/packages/ui/dist/components/alert.js
index 24171f944..6c6db1b50 100644
--- a/packages/ui/dist/components/alert.js
+++ b/packages/ui/dist/components/alert.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as feedback } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as feedback } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/alert.js
 var J3w1Alert = class extends J3w1Element {
 	static componentId = "alert";
 	static version = "4.0.0";
-	static implementationId = "sha256-D/UE6iF8Es5ira9X/X3Hlo5OO/Lzy3n/9s9vlkV7zJU=";
+	static implementationId = "sha256-6Wo+BnYA6udYTk6XDw6PR9MtJYx0FznliTgiGt+lVxo=";
 	static connect = feedback;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/avatar.js b/packages/ui/dist/components/avatar.js
index e173006c6..39f8bb7e4 100644
--- a/packages/ui/dist/components/avatar.js
+++ b/packages/ui/dist/components/avatar.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as avatar } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as avatar } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/avatar.js
 var J3w1Avatar = class extends J3w1Element {
 	static componentId = "avatar";
 	static version = "4.0.0";
-	static implementationId = "sha256-oKaTLRzIK5qK9lvYH/WxVObpYJISyDSenNJcmBSIbAE=";
+	static implementationId = "sha256-y5w6c1MQTafVvxzhJ5TzYxwGvju264CUxS2D23RvGCQ=";
 	static connect = avatar;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/badge.js b/packages/ui/dist/components/badge.js
index 75cd2918a..640dfde53 100644
--- a/packages/ui/dist/components/badge.js
+++ b/packages/ui/dist/components/badge.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/badge.js
 var J3w1Badge = class extends J3w1Element {
 	static componentId = "badge";
 	static version = "4.0.0";
-	static implementationId = "sha256-7r4xdzZloUX+vqRo4Hc0GjD4Kj3pwVOKBfHyGYFV4fU=";
+	static implementationId = "sha256-4j+faVdrUDtcCc6a5/1Y+y9U30DXfpq/Frm/Z0bO1i8=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/breadcrumbs.js b/packages/ui/dist/components/breadcrumbs.js
index 8c0afe607..5ce93d88b 100644
--- a/packages/ui/dist/components/breadcrumbs.js
+++ b/packages/ui/dist/components/breadcrumbs.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as disclosure } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as disclosure } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/breadcrumbs.js
 var J3w1Breadcrumbs = class extends J3w1Element {
 	static componentId = "breadcrumbs";
 	static version = "4.0.0";
-	static implementationId = "sha256-87YN9cPa7cDF4Ft74THtpIUQxKKqJQXA7fCZzmQ5DwA=";
+	static implementationId = "sha256-9uiBLPIbEVI200s39xDO7x0K09v+wPg5xcoMI5B5TbY=";
 	static connect = disclosure;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/button-group.js b/packages/ui/dist/components/button-group.js
index aaa99816c..e5443b0f9 100644
--- a/packages/ui/dist/components/button-group.js
+++ b/packages/ui/dist/components/button-group.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as actions } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as actions } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/button-group.js
 var J3w1ButtonGroup = class extends J3w1Element {
 	static componentId = "button-group";
 	static version = "4.0.0";
-	static implementationId = "sha256-4nMwz9kpZ4odBRA12jsDZ86Fx+dDkBCJD7OkQHdIGDY=";
+	static implementationId = "sha256-QC6YHzPpUytpyeDknjyX9Ke/akglG1NzBtJnCYjqgaA=";
 	static connect = actions;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...[
diff --git a/packages/ui/dist/components/button.js b/packages/ui/dist/components/button.js
index 13b2ecc87..3dfd4d373 100644
--- a/packages/ui/dist/components/button.js
+++ b/packages/ui/dist/components/button.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as actions } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as actions } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/button.js
 var J3w1Button = class extends J3w1Element {
 	static componentId = "button";
 	static version = "4.0.0";
-	static implementationId = "sha256-KJsije7hrwEBTy2GsHhegHPN50aD1js7EUW9wwGysM4=";
+	static implementationId = "sha256-5XqIG0jRl2EIptqWgZIiuSKdNf0pHpMOZB14A1W3DqU=";
 	static connect = actions;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...[
diff --git a/packages/ui/dist/components/card.js b/packages/ui/dist/components/card.js
index a5ee729a4..9981d665b 100644
--- a/packages/ui/dist/components/card.js
+++ b/packages/ui/dist/components/card.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/card.js
 var J3w1Card = class extends J3w1Element {
 	static componentId = "card";
 	static version = "4.0.0";
-	static implementationId = "sha256-vQnfoIzeMEvjY3vf6ySomBbeDdh5YPzSMoXDvmtgOro=";
+	static implementationId = "sha256-1zEhR7grQaSCkJEXxbq66aFLUPYuFPcwf/JnBD3tNdQ=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/chart.js b/packages/ui/dist/components/chart.js
index 2f3f33b51..70d90b671 100644
--- a/packages/ui/dist/components/chart.js
+++ b/packages/ui/dist/components/chart.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as chart } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as chart } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/chart.js
 var J3w1Chart = class extends J3w1Element {
 	static componentId = "chart";
 	static version = "4.0.0";
-	static implementationId = "sha256-HoAvhRRdFv6zYSIR6McpxJvYeGHHbg4t1zBpi2x1EXo=";
+	static implementationId = "sha256-48dT14XNNF9ZyV4PB4oLs8zT/lNQqNt9rXZCl9gUYVc=";
 	static connect = chart;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/checkbox.js b/packages/ui/dist/components/checkbox.js
index 508ce70fe..8d7e19060 100644
--- a/packages/ui/dist/components/checkbox.js
+++ b/packages/ui/dist/components/checkbox.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/checkbox.js
 var J3w1Checkbox = class extends J3w1Element {
 	static componentId = "checkbox";
 	static version = "4.0.0";
-	static implementationId = "sha256-s8QNllrpQfjPHm0Utgbm9jpMpGxi8Z+bEb83jPZVomQ=";
+	static implementationId = "sha256-Izbz5fVyhrSfF5rLvCHcElWnQgwhYuvOSm5StKMlqUg=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/chip.js b/packages/ui/dist/components/chip.js
index 4f4800574..749a8cf86 100644
--- a/packages/ui/dist/components/chip.js
+++ b/packages/ui/dist/components/chip.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as feedback } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as feedback } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/chip.js
 var J3w1Chip = class extends J3w1Element {
 	static componentId = "chip";
 	static version = "4.0.0";
-	static implementationId = "sha256-WS0ZeKkxMPrlmT3er+h8PDDvz5rjH0e3bLmPLD+4egE=";
+	static implementationId = "sha256-AQdMwG6TMuURDhU/UWs7oHW2L2skw4ISgrH4cwOomvk=";
 	static connect = feedback;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/code-editor.js b/packages/ui/dist/components/code-editor.js
index 5d700d661..9a989eb60 100644
--- a/packages/ui/dist/components/code-editor.js
+++ b/packages/ui/dist/components/code-editor.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as developerView } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as developerView } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/code-editor.js
 var J3w1CodeEditor = class extends J3w1Element {
 	static componentId = "code-editor";
 	static version = "4.0.0";
-	static implementationId = "sha256-SfbKlWOepDm9juxt9BZYRBuYIPkdwFye18Fx+JebtX8=";
+	static implementationId = "sha256-BBPVGsJGf2n0c4gfyDdfHQH3KYYqmiAAqqC2h3DlIcc=";
 	static connect = developerView;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/combobox.js b/packages/ui/dist/components/combobox.js
index 1f90d0d0a..098363263 100644
--- a/packages/ui/dist/components/combobox.js
+++ b/packages/ui/dist/components/combobox.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as combobox } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as combobox } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/combobox.js
 var J3w1Combobox = class extends J3w1Element {
 	static componentId = "combobox";
 	static version = "4.0.0";
-	static implementationId = "sha256-XA3Nl+ZVgrypCgx4FjdKKQnMCNyoA+F8ID8i2Tjo8lY=";
+	static implementationId = "sha256-vBw1BDsNiy6oYSbmjgh7x2T+43b2GYa+XmHte/upgpQ=";
 	static connect = combobox;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/command-palette.js b/packages/ui/dist/components/command-palette.js
index 9f69c3926..196ad7f12 100644
--- a/packages/ui/dist/components/command-palette.js
+++ b/packages/ui/dist/components/command-palette.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as commandPalette } from "../chunks/advanced-DCpe8Ndv.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as commandPalette } from "../chunks/advanced-CqBF0dSb.js";
 //#region .cache/ui-build/entries/components/command-palette.js
 var J3w1CommandPalette = class extends J3w1Element {
 	static componentId = "command-palette";
 	static version = "4.0.0";
-	static implementationId = "sha256-z/FYgCRAmaHrY3I9P3qJz8fOSSDfrjxFjAqwEVhzk50=";
+	static implementationId = "sha256-jnhxb+w/Xgrb5Os9Dxr1YHn/ex7fLJlGLSWZSpbrAuU=";
 	static connect = commandPalette;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/compact-dashboard.js b/packages/ui/dist/components/compact-dashboard.js
index dd2296be0..b29237379 100644
--- a/packages/ui/dist/components/compact-dashboard.js
+++ b/packages/ui/dist/components/compact-dashboard.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as dashboard } from "../chunks/compositions-d6BkKTYf.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as dashboard } from "../chunks/compositions-D57dCsBz.js";
 //#region .cache/ui-build/entries/components/compact-dashboard.js
 var J3w1CompactDashboard = class extends J3w1Element {
 	static componentId = "compact-dashboard";
 	static version = "4.0.0";
-	static implementationId = "sha256-HehbhZc0CAfJPPd19KsqWamAD2EgvREZQU0pBPncnJI=";
+	static implementationId = "sha256-Shp675PVGMGOiXxiKpeWEQHQugGKEIbNO/jz8KwP4m0=";
 	static connect = dashboard;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/data-table.js b/packages/ui/dist/components/data-table.js
index 79b133ce4..2825525ad 100644
--- a/packages/ui/dist/components/data-table.js
+++ b/packages/ui/dist/components/data-table.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as table } from "../chunks/tables-B25ydUHs.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as table } from "../chunks/tables-Cjr1EIJz.js";
 //#region .cache/ui-build/entries/components/data-table.js
 var J3w1DataTable = class extends J3w1Element {
 	static componentId = "data-table";
 	static version = "4.0.0";
-	static implementationId = "sha256-QMe+oF071lb63bTNZ9n1ib/8bWgy27tciSjWJEfBgrk=";
+	static implementationId = "sha256-Qlh9cF0ylT3FE8z6iBYaA9/noI1T5dVrNgulqEfZGt8=";
 	static connect = table;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/date-picker.js b/packages/ui/dist/components/date-picker.js
index b75f98455..df35db9b0 100644
--- a/packages/ui/dist/components/date-picker.js
+++ b/packages/ui/dist/components/date-picker.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/date-picker.js
 var J3w1DatePicker = class extends J3w1Element {
 	static componentId = "date-picker";
 	static version = "4.0.0";
-	static implementationId = "sha256-c14aNjkp318olUOl5+cdRlcdDahvWoTp8lk0sI48z1Y=";
+	static implementationId = "sha256-rz3at5sJTA4TkXHNaqQnM5BrVBt02my29UyKewvFuRY=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/description-list.js b/packages/ui/dist/components/description-list.js
index c091b91c8..f7a7090ba 100644
--- a/packages/ui/dist/components/description-list.js
+++ b/packages/ui/dist/components/description-list.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/description-list.js
 var J3w1DescriptionList = class extends J3w1Element {
 	static componentId = "description-list";
 	static version = "4.0.0";
-	static implementationId = "sha256-GysXOSSmdZO80ECnRDrzDhjMNfpRODjO9r753vB1Mg0=";
+	static implementationId = "sha256-O3lqE1mNupuyqMqz1k1EzRDHMDjwD6aUReeED7JUclg=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/diagnostics.js b/packages/ui/dist/components/diagnostics.js
index 58236865c..f9e49175b 100644
--- a/packages/ui/dist/components/diagnostics.js
+++ b/packages/ui/dist/components/diagnostics.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as developerView } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as developerView } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/diagnostics.js
 var J3w1Diagnostics = class extends J3w1Element {
 	static componentId = "diagnostics";
 	static version = "4.0.0";
-	static implementationId = "sha256-jU3NVgcwD6UPMMah1cBNr8kgYNhC44JLUupKYIjR8ug=";
+	static implementationId = "sha256-lcf+xRikFjf+LQY6YZN+giWDauQWjFZbMz3xBLI3JG8=";
 	static connect = developerView;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/dialog.js b/packages/ui/dist/components/dialog.js
index 1b3c4a379..831fed823 100644
--- a/packages/ui/dist/components/dialog.js
+++ b/packages/ui/dist/components/dialog.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as modal } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as modal } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/dialog.js
 var J3w1Dialog = class extends J3w1Element {
 	static componentId = "dialog";
 	static version = "4.0.0";
-	static implementationId = "sha256-klBSVv/73RVF8H8z45KqQcsbWhHl+/t4VEl+jC/2v9Q=";
+	static implementationId = "sha256-mRRuIsoBG3ZepORoxkayVAw92Or7CJEuj6eD9YVaZyw=";
 	static connect = modal;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/diff-view.js b/packages/ui/dist/components/diff-view.js
index 633e44138..47f8bf1a3 100644
--- a/packages/ui/dist/components/diff-view.js
+++ b/packages/ui/dist/components/diff-view.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as developerView } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as developerView } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/diff-view.js
 var J3w1DiffView = class extends J3w1Element {
 	static componentId = "diff-view";
 	static version = "4.0.0";
-	static implementationId = "sha256-lEC5NAzVDADHe5s6uWIGnx5icpXJwmRoT/VTUI4h2l8=";
+	static implementationId = "sha256-7zzFpU0Y2cQR1wO8DWE4bqkofCnJMaERCXRLdai7u0A=";
 	static connect = developerView;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/disclosure.js b/packages/ui/dist/components/disclosure.js
index 8760d6a4d..56e4f17fd 100644
--- a/packages/ui/dist/components/disclosure.js
+++ b/packages/ui/dist/components/disclosure.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as disclosure } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as disclosure } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/disclosure.js
 var J3w1Disclosure = class extends J3w1Element {
 	static componentId = "disclosure";
 	static version = "4.0.0";
-	static implementationId = "sha256-ROxGJvPyGtUqhWzL3a8qhGmOOsm3PD+fneX9Gb764gg=";
+	static implementationId = "sha256-h35ty1HDvIv+l1TZ2KWtUtdJetenP1x1+OVPFVOsByg=";
 	static connect = disclosure;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/drawer.js b/packages/ui/dist/components/drawer.js
index 3090b4b92..84e74f5d6 100644
--- a/packages/ui/dist/components/drawer.js
+++ b/packages/ui/dist/components/drawer.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as modal } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as modal } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/drawer.js
 var J3w1Drawer = class extends J3w1Element {
 	static componentId = "drawer";
 	static version = "4.0.0";
-	static implementationId = "sha256-8/bHeKdg2GkEVkeV2YqDCVbqEPZb6trQ7qLrf3vhnWQ=";
+	static implementationId = "sha256-k/ZCI1iewFGM/3Yu72DZfB6MpyHU8aF26giyLMSce+U=";
 	static connect = modal;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/editor-search.js b/packages/ui/dist/components/editor-search.js
index f5bf25205..fc6e2a1a7 100644
--- a/packages/ui/dist/components/editor-search.js
+++ b/packages/ui/dist/components/editor-search.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as editorSearch } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as editorSearch } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/editor-search.js
 var J3w1EditorSearch = class extends J3w1Element {
 	static componentId = "editor-search";
 	static version = "4.0.0";
-	static implementationId = "sha256-9KkGT11jVqC1mIIjjeR24BOy0FxKESmTA8B47/6yZHg=";
+	static implementationId = "sha256-SqX6iBMRHKvfYM9+QKkc2K/hjCGRNMeVrj+B25L3SoU=";
 	static connect = editorSearch;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/empty-state.js b/packages/ui/dist/components/empty-state.js
index b735fb73b..a2ad90398 100644
--- a/packages/ui/dist/components/empty-state.js
+++ b/packages/ui/dist/components/empty-state.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as feedback } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as feedback } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/empty-state.js
 var J3w1EmptyState = class extends J3w1Element {
 	static componentId = "empty-state";
 	static version = "4.0.0";
-	static implementationId = "sha256-rbfG9GfAXF+BMPfgYh9VU3TSU0CXpzgo8GhNdA2DHw0=";
+	static implementationId = "sha256-TjsU1nEvRoXqvqnqWsM2EsMF7pDu5QD94wKIbCronI4=";
 	static connect = feedback;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/error-state.js b/packages/ui/dist/components/error-state.js
index 42d38f9c3..8adf9072e 100644
--- a/packages/ui/dist/components/error-state.js
+++ b/packages/ui/dist/components/error-state.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as feedback } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as feedback } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/error-state.js
 var J3w1ErrorState = class extends J3w1Element {
 	static componentId = "error-state";
 	static version = "4.0.0";
-	static implementationId = "sha256-hj5jc9C6nDjhax7f/nHkk1z0tkHTuXGp1LJlDuYyDwU=";
+	static implementationId = "sha256-NFXjO9uEbTYqbXbZVfFiY8Ge2N54qnmAPnp046iwL4U=";
 	static connect = feedback;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/field.js b/packages/ui/dist/components/field.js
index 70f9d02d4..432885b11 100644
--- a/packages/ui/dist/components/field.js
+++ b/packages/ui/dist/components/field.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/field.js
 var J3w1Field = class extends J3w1Element {
 	static componentId = "field";
 	static version = "4.0.0";
-	static implementationId = "sha256-CViK07vFgOOS2jQ7u/riONTbtMAUdHVY73iqaGIV1tw=";
+	static implementationId = "sha256-GDPT/9zMxdyqVusrML6KYJd3mC9Kts0/5zp2/Xi2cYA=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/fieldset.js b/packages/ui/dist/components/fieldset.js
index 4ed189f3a..062960dc4 100644
--- a/packages/ui/dist/components/fieldset.js
+++ b/packages/ui/dist/components/fieldset.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/fieldset.js
 var J3w1Fieldset = class extends J3w1Element {
 	static componentId = "fieldset";
 	static version = "4.0.0";
-	static implementationId = "sha256-T4bhKoYz9jjaxP51Plfd+oswKiEpk1JGLzi29ItD4mQ=";
+	static implementationId = "sha256-GMEsNCLKXzxBWy1NzvLrpSNVUG/llwSmGqxbUbScbHQ=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/file-browser.js b/packages/ui/dist/components/file-browser.js
index 17d4a5a03..2c355a89a 100644
--- a/packages/ui/dist/components/file-browser.js
+++ b/packages/ui/dist/components/file-browser.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as fileBrowser } from "../chunks/compositions-d6BkKTYf.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as fileBrowser } from "../chunks/compositions-D57dCsBz.js";
 //#region .cache/ui-build/entries/components/file-browser.js
 var J3w1FileBrowser = class extends J3w1Element {
 	static componentId = "file-browser";
 	static version = "4.0.0";
-	static implementationId = "sha256-aX7ynrR8fIvhjh+E38lBwgWP8mffpXVi5toiJ1sIa9c=";
+	static implementationId = "sha256-XNnX1ARH1szUReH6kSeTR1njKOACxLiUhBCmo9iNz8s=";
 	static connect = fileBrowser;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/file-input.js b/packages/ui/dist/components/file-input.js
index 228c9b229..e90ea78d1 100644
--- a/packages/ui/dist/components/file-input.js
+++ b/packages/ui/dist/components/file-input.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as fileInput } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as fileInput } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/file-input.js
 var J3w1FileInput = class extends J3w1Element {
 	static componentId = "file-input";
 	static version = "4.0.0";
-	static implementationId = "sha256-m0+3EjPTC3Wr2r8xF2V2Q+38R4z12VAJn9DB7iS0JPc=";
+	static implementationId = "sha256-DYtJ1M3W9zNvFy3MIif27+5jsw2JssfZ5mpXTXwGBCo=";
 	static connect = fileInput;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/filterable-table.js b/packages/ui/dist/components/filterable-table.js
index fdc624ffe..5eb0b2d55 100644
--- a/packages/ui/dist/components/filterable-table.js
+++ b/packages/ui/dist/components/filterable-table.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as table } from "../chunks/tables-B25ydUHs.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as table } from "../chunks/tables-Cjr1EIJz.js";
 //#region .cache/ui-build/entries/components/filterable-table.js
 var J3w1FilterableTable = class extends J3w1Element {
 	static componentId = "filterable-table";
 	static version = "4.0.0";
-	static implementationId = "sha256-X8YqHg+uk9WRKBEGt72ID1ciBCXv0ORCorTI2IiT8v8=";
+	static implementationId = "sha256-SJvvFZ+/THkuQJCx1F2i0vCQ2C54dLton+9ipWE3sS8=";
 	static connect = table;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/form-builder.js b/packages/ui/dist/components/form-builder.js
index 24c141d5f..3461adcd2 100644
--- a/packages/ui/dist/components/form-builder.js
+++ b/packages/ui/dist/components/form-builder.js
@@ -1 +1 @@
-export { t as J3w1FormBuilder } from "../chunks/form-builder-Dkweb1xD.js";
+export { t as J3w1FormBuilder } from "../chunks/form-builder-BKs59W9y.js";
diff --git a/packages/ui/dist/components/i3-window-frame.js b/packages/ui/dist/components/i3-window-frame.js
index f7f1bfad9..b22fc628b 100644
--- a/packages/ui/dist/components/i3-window-frame.js
+++ b/packages/ui/dist/components/i3-window-frame.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as windowFrame } from "../chunks/compositions-d6BkKTYf.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as windowFrame } from "../chunks/compositions-D57dCsBz.js";
 //#region .cache/ui-build/entries/components/i3-window-frame.js
 var J3w1I3WindowFrame = class extends J3w1Element {
 	static componentId = "i3-window-frame";
 	static version = "4.0.0";
-	static implementationId = "sha256-Y4Ce7n8VcttdP/24Otj7l0Ls+ShSo3ACSeSkMKfZg4o=";
+	static implementationId = "sha256-aoVPpcLCR1nIgTxPmR2un0VYei4XlfuvYsAk1YW7+mU=";
 	static connect = windowFrame;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/icon-button.js b/packages/ui/dist/components/icon-button.js
index 7a65f2c9a..1b617c987 100644
--- a/packages/ui/dist/components/icon-button.js
+++ b/packages/ui/dist/components/icon-button.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as actions } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as actions } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/icon-button.js
 var J3w1IconButton = class extends J3w1Element {
 	static componentId = "icon-button";
 	static version = "4.0.0";
-	static implementationId = "sha256-yIIam+ZjRGwxBMpAmgZARlOdFeFJZkhR1zP8PoO2q8g=";
+	static implementationId = "sha256-6B32745m5D4H8EEVZL8U0DDC44RJN37XJIm7LWa43Gg=";
 	static connect = actions;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...[
diff --git a/packages/ui/dist/components/kbd.js b/packages/ui/dist/components/kbd.js
index 9b1b92534..0556ef474 100644
--- a/packages/ui/dist/components/kbd.js
+++ b/packages/ui/dist/components/kbd.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/kbd.js
 var J3w1Kbd = class extends J3w1Element {
 	static componentId = "kbd";
 	static version = "4.0.0";
-	static implementationId = "sha256-M5H4/+6leZF7LAC7Shi1RDl/6HP+GYN6gzvNdgAGu0o=";
+	static implementationId = "sha256-/6a09jGbevstnOqzIMGZWFLfMuQtcqnGZ7oWyH64Xdg=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/link.js b/packages/ui/dist/components/link.js
index de2420838..2356d4084 100644
--- a/packages/ui/dist/components/link.js
+++ b/packages/ui/dist/components/link.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/link.js
 var J3w1Link = class extends J3w1Element {
 	static componentId = "link";
 	static version = "4.0.0";
-	static implementationId = "sha256-G30Bj9xANI38mlDOkDVPEfBPa0wZWo9ZLpoAHPXMAGE=";
+	static implementationId = "sha256-rEWDiPkjpyMkw7piXIpFnMc4x8xrVQVhLrBLQWgZXRM=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/list.js b/packages/ui/dist/components/list.js
index 3e5713699..247cffcc3 100644
--- a/packages/ui/dist/components/list.js
+++ b/packages/ui/dist/components/list.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/list.js
 var J3w1List = class extends J3w1Element {
 	static componentId = "list";
 	static version = "4.0.0";
-	static implementationId = "sha256-bxsrs/DyJ6xpQGoZP+g3PJhsF5XpL6aWGvL7lM0TCNY=";
+	static implementationId = "sha256-14u9zr26qx+pniqBnH8sp+D6R9pyXRKm+KsUR/WnsOU=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/loading-indicator.js b/packages/ui/dist/components/loading-indicator.js
index db1fc292b..85ead853a 100644
--- a/packages/ui/dist/components/loading-indicator.js
+++ b/packages/ui/dist/components/loading-indicator.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/loading-indicator.js
 var J3w1LoadingIndicator = class extends J3w1Element {
 	static componentId = "loading-indicator";
 	static version = "4.0.0";
-	static implementationId = "sha256-oylPiWm24mRL7UT6FnHzCqajisyWBH6qEks6sQ4t3Uc=";
+	static implementationId = "sha256-IeUo78vKcH/jhCptrFf5Js2XH0mNmrbHQA3dBow7Sb8=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/menu.js b/packages/ui/dist/components/menu.js
index 3f1e4b50c..b35ceb43e 100644
--- a/packages/ui/dist/components/menu.js
+++ b/packages/ui/dist/components/menu.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as menu } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as menu } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/menu.js
 var J3w1Menu = class extends J3w1Element {
 	static componentId = "menu";
 	static version = "4.0.0";
-	static implementationId = "sha256-jIlJcU1Nx7Q5MB7Fqfcn4f9vr0IW1gmGwNdP5Rk72Aw=";
+	static implementationId = "sha256-oS0Ubl9rLRKcmk22aO7KDARBpUoA/Y7sR2AvyqabH+U=";
 	static connect = menu;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/multiselect.js b/packages/ui/dist/components/multiselect.js
index 20a588ed0..cb58ac304 100644
--- a/packages/ui/dist/components/multiselect.js
+++ b/packages/ui/dist/components/multiselect.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as multiselect } from "../chunks/advanced-DCpe8Ndv.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as multiselect } from "../chunks/advanced-CqBF0dSb.js";
 //#region .cache/ui-build/entries/components/multiselect.js
 var J3w1Multiselect = class extends J3w1Element {
 	static componentId = "multiselect";
 	static version = "4.0.0";
-	static implementationId = "sha256-OPa5V1nQSQlq4kVkfylH8e9/Aw6ID9xFd3Wd2jg9JT4=";
+	static implementationId = "sha256-M7eRaWl+u1uQgXFKvnBd0GCc8U7xIWfp5yT7U9eMjTg=";
 	static connect = multiselect;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/number-field.js b/packages/ui/dist/components/number-field.js
index af0b10715..41733ea16 100644
--- a/packages/ui/dist/components/number-field.js
+++ b/packages/ui/dist/components/number-field.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/number-field.js
 var J3w1NumberField = class extends J3w1Element {
 	static componentId = "number-field";
 	static version = "4.0.0";
-	static implementationId = "sha256-gb44C85yifc6xKGrJuKPEX7vvpX08h4rRm5NPWN3woo=";
+	static implementationId = "sha256-XSucS362OAqtU9RKAYp52Tc3M6K6uMWKmB6UdK8+/o0=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/pagination.js b/packages/ui/dist/components/pagination.js
index ef3f9cb03..140293f27 100644
--- a/packages/ui/dist/components/pagination.js
+++ b/packages/ui/dist/components/pagination.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as pagination } from "../chunks/tables-B25ydUHs.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as pagination } from "../chunks/tables-Cjr1EIJz.js";
 //#region .cache/ui-build/entries/components/pagination.js
 var J3w1Pagination = class extends J3w1Element {
 	static componentId = "pagination";
 	static version = "4.0.0";
-	static implementationId = "sha256-euvVvLa2uqHPWf4lao8liCwhVeUZHrDFF8Z30hRttNg=";
+	static implementationId = "sha256-HgWIYJ3ex0Ayw+BLic3BdN3dNV9ChkM7wiwgp/qkkAE=";
 	static connect = pagination;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/popover.js b/packages/ui/dist/components/popover.js
index bbc79107c..4ca710f90 100644
--- a/packages/ui/dist/components/popover.js
+++ b/packages/ui/dist/components/popover.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as popover } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as popover } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/popover.js
 var J3w1Popover = class extends J3w1Element {
 	static componentId = "popover";
 	static version = "4.0.0";
-	static implementationId = "sha256-R3mF1UXSn1CBWM10egGi9EjTZGc775igXYWKiLNBZSY=";
+	static implementationId = "sha256-8KG7XOC5HTOmJW+CysUIXfhkV3COWEwpPzmG6HXdN80=";
 	static connect = popover;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/progress.js b/packages/ui/dist/components/progress.js
index 2328cc005..c4664d716 100644
--- a/packages/ui/dist/components/progress.js
+++ b/packages/ui/dist/components/progress.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/progress.js
 var J3w1Progress = class extends J3w1Element {
 	static componentId = "progress";
 	static version = "4.0.0";
-	static implementationId = "sha256-pb/hnKbLN1fkkVEzliJMaxoY12bTHrD8nlVbfWNTXGE=";
+	static implementationId = "sha256-ayNpjS/tJF/VzILGmci24aDE3GR3edKDd1sGAVN7HtQ=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/radio-group.js b/packages/ui/dist/components/radio-group.js
index e82d3422f..9c5100135 100644
--- a/packages/ui/dist/components/radio-group.js
+++ b/packages/ui/dist/components/radio-group.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/radio-group.js
 var J3w1RadioGroup = class extends J3w1Element {
 	static componentId = "radio-group";
 	static version = "4.0.0";
-	static implementationId = "sha256-zaWExle/kKyvESOFtr11ZVTV64fMoCjROxiCHKlvwyY=";
+	static implementationId = "sha256-qoOHybVksZNlma+H614aGdgiZ/u0EegTSeDcIojBXA0=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/range.js b/packages/ui/dist/components/range.js
index 8c18e09bc..b560b2a51 100644
--- a/packages/ui/dist/components/range.js
+++ b/packages/ui/dist/components/range.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/range.js
 var J3w1Range = class extends J3w1Element {
 	static componentId = "range";
 	static version = "4.0.0";
-	static implementationId = "sha256-775qtEkdJpV+XXDTSY5Jta+nPBg9zq9OpoCwXoM1X30=";
+	static implementationId = "sha256-zCJuNTps0+QV29mUu6dGnyhnpifuS7WnpWWjLJtkpdo=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/repeater.js b/packages/ui/dist/components/repeater.js
index 1660aee7c..0874370f2 100644
--- a/packages/ui/dist/components/repeater.js
+++ b/packages/ui/dist/components/repeater.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as repeater } from "../chunks/advanced-DCpe8Ndv.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as repeater } from "../chunks/advanced-CqBF0dSb.js";
 //#region .cache/ui-build/entries/components/repeater.js
 var J3w1Repeater = class extends J3w1Element {
 	static componentId = "repeater";
 	static version = "4.0.0";
-	static implementationId = "sha256-Tx+pvPHZeC66CE52/uMEXatMD8QBTtQd+OahbHnBVuY=";
+	static implementationId = "sha256-G3uVYtEsLo70OmMPhofMD2YylFEq1kezRvUEMrNnRII=";
 	static connect = repeater;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...[
diff --git a/packages/ui/dist/components/search-field.js b/packages/ui/dist/components/search-field.js
index 4d97313b6..666ca6dde 100644
--- a/packages/ui/dist/components/search-field.js
+++ b/packages/ui/dist/components/search-field.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/search-field.js
 var J3w1SearchField = class extends J3w1Element {
 	static componentId = "search-field";
 	static version = "4.0.0";
-	static implementationId = "sha256-1DXqGUME/dceUQ+jjPOv/UDtTubfoV13HCjmaDde06w=";
+	static implementationId = "sha256-nopARV2ViNiuyBqGv6KjxLJ3uaaVqRJ3K7Mgtg/mS7Q=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/segmented-control.js b/packages/ui/dist/components/segmented-control.js
index e72128f6a..6ffc9b94e 100644
--- a/packages/ui/dist/components/segmented-control.js
+++ b/packages/ui/dist/components/segmented-control.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/segmented-control.js
 var J3w1SegmentedControl = class extends J3w1Element {
 	static componentId = "segmented-control";
 	static version = "4.0.0";
-	static implementationId = "sha256-9PLNL13EHbz4Q4W5X5YLzVqofRhbsR0BeD0TPmji/8Q=";
+	static implementationId = "sha256-ULY50CCb++GAub0Bdb1hOwDWjDszJVNB0Fwnbmwbg1c=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/select.js b/packages/ui/dist/components/select.js
index f15a0462d..a59b0acab 100644
--- a/packages/ui/dist/components/select.js
+++ b/packages/ui/dist/components/select.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/select.js
 var J3w1Select = class extends J3w1Element {
 	static componentId = "select";
 	static version = "4.0.0";
-	static implementationId = "sha256-x5f4XAk757Fq5+Tl0cEgt1x3VCTPpITjazQZUo+WpvQ=";
+	static implementationId = "sha256-/4CAqDSF84DTC0pEcQUtcmmtAaVge6ifWVX3elTZzLM=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/settings-panel.js b/packages/ui/dist/components/settings-panel.js
index 0d8bf3d6a..4d48521a3 100644
--- a/packages/ui/dist/components/settings-panel.js
+++ b/packages/ui/dist/components/settings-panel.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as formComposition } from "../chunks/forms-BT3z7lNC.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as formComposition } from "../chunks/forms-CE_hP1hg.js";
 //#region .cache/ui-build/entries/components/settings-panel.js
 var J3w1SettingsPanel = class extends J3w1Element {
 	static componentId = "settings-panel";
 	static version = "4.0.0";
-	static implementationId = "sha256-EIIJELO3DpCDTENzI+0vWiDG0OCBjrf8QBh5vGHkR/M=";
+	static implementationId = "sha256-Or1edewP4Rk9HC/kFygK+IUyEoPDHJFEyWO9Acv3Ge4=";
 	static connect = formComposition;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/sidebar-nav.js b/packages/ui/dist/components/sidebar-nav.js
index 17b99366b..03f391cbd 100644
--- a/packages/ui/dist/components/sidebar-nav.js
+++ b/packages/ui/dist/components/sidebar-nav.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as disclosure } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as disclosure } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/sidebar-nav.js
 var J3w1SidebarNav = class extends J3w1Element {
 	static componentId = "sidebar-nav";
 	static version = "4.0.0";
-	static implementationId = "sha256-7P+xFrwVfLOcV9jD54m5q0GPgMxEknJwkB/ex41V9/E=";
+	static implementationId = "sha256-rKjBWaKv0/VZBCTIvYNnUx/X/HyPypn7MJrL9+nt6cM=";
 	static connect = disclosure;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/skeleton.js b/packages/ui/dist/components/skeleton.js
index c6e8e7fc4..16c0393a3 100644
--- a/packages/ui/dist/components/skeleton.js
+++ b/packages/ui/dist/components/skeleton.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/skeleton.js
 var J3w1Skeleton = class extends J3w1Element {
 	static componentId = "skeleton";
 	static version = "4.0.0";
-	static implementationId = "sha256-fM5rtzoVG8RbNxxxkZnyxAlMU2Y7X34uknqD80CcjkA=";
+	static implementationId = "sha256-ZyHv2dS6YAfZGShU1uHi9YjORc4siAkmG4ledp4rX5I=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/skip-link.js b/packages/ui/dist/components/skip-link.js
index 31537fda3..65021bd9d 100644
--- a/packages/ui/dist/components/skip-link.js
+++ b/packages/ui/dist/components/skip-link.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/skip-link.js
 var J3w1SkipLink = class extends J3w1Element {
 	static componentId = "skip-link";
 	static version = "4.0.0";
-	static implementationId = "sha256-KdblE6x/JhgGz9zwqnBxtLslwBM2YaG4D+gQYhv8+U8=";
+	static implementationId = "sha256-S77cz706XKgfI8OMLIyAhZab0PRCJkMplNQrcZjKP3c=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/switch.js b/packages/ui/dist/components/switch.js
index 8dd46651f..87c027482 100644
--- a/packages/ui/dist/components/switch.js
+++ b/packages/ui/dist/components/switch.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { a as switchControl } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { a as switchControl } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/switch.js
 var J3w1Switch = class extends J3w1Element {
 	static componentId = "switch";
 	static version = "4.0.0";
-	static implementationId = "sha256-Wsym3Y7lkfx+vDtiTBtZS2h3anSfvc8bYabeqBAc4ms=";
+	static implementationId = "sha256-FqTv7TNhvOBWq10QKBC1FBB+4Wxd4wo2qtt4bCUEvbA=";
 	static connect = switchControl;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/table.js b/packages/ui/dist/components/table.js
index 747e23ad7..a79632ad4 100644
--- a/packages/ui/dist/components/table.js
+++ b/packages/ui/dist/components/table.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as table } from "../chunks/tables-B25ydUHs.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as table } from "../chunks/tables-Cjr1EIJz.js";
 //#region .cache/ui-build/entries/components/table.js
 var J3w1Table = class extends J3w1Element {
 	static componentId = "table";
 	static version = "4.0.0";
-	static implementationId = "sha256-1o7THlBOZhryugncv5/v3bAs3dEZx7OD0QGD47Fx2q4=";
+	static implementationId = "sha256-dYinCl3vod1TSMh+SSPtibWEFlVRwhAF7TZ09eviokw=";
 	static connect = table;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/tabs.js b/packages/ui/dist/components/tabs.js
index dfdc18518..448e73b8b 100644
--- a/packages/ui/dist/components/tabs.js
+++ b/packages/ui/dist/components/tabs.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as tabs } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as tabs } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/tabs.js
 var J3w1Tabs = class extends J3w1Element {
 	static componentId = "tabs";
 	static version = "4.0.0";
-	static implementationId = "sha256-yl6ifi/c/BHYGqaMMbePuD6uCP50aeMMOiJFXfy/C6s=";
+	static implementationId = "sha256-vWyT4Mr1GxnXVkpNXHK/nd/+0BmdRogsb7+eE6EnQ7A=";
 	static connect = tabs;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/terminal.js b/packages/ui/dist/components/terminal.js
index b6b36123c..d9c12358a 100644
--- a/packages/ui/dist/components/terminal.js
+++ b/packages/ui/dist/components/terminal.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as developerView } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as developerView } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/terminal.js
 var J3w1Terminal = class extends J3w1Element {
 	static componentId = "terminal";
 	static version = "4.0.0";
-	static implementationId = "sha256-YtjoIQGA3MHvquAi/l7AGweWpTNBe/ruD7iYJIEkkoc=";
+	static implementationId = "sha256-vnYvMfEFdH6UbGXHQ5OrfeJTspczt8hiaTWYnXnhlJc=";
 	static connect = developerView;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/text-field.js b/packages/ui/dist/components/text-field.js
index 469ab73da..5f6946538 100644
--- a/packages/ui/dist/components/text-field.js
+++ b/packages/ui/dist/components/text-field.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/text-field.js
 var J3w1TextField = class extends J3w1Element {
 	static componentId = "text-field";
 	static version = "4.0.0";
-	static implementationId = "sha256-zLqXpOHelLAc+ttryZKIkoe3xzw0YRD1AHJXXSXMwdg=";
+	static implementationId = "sha256-k06i0LBPa/oPe2VNmxbJkBzisp1zcAENq3MeVnKZzAo=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/textarea.js b/packages/ui/dist/components/textarea.js
index 35ed045a1..850762b41 100644
--- a/packages/ui/dist/components/textarea.js
+++ b/packages/ui/dist/components/textarea.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/textarea.js
 var J3w1Textarea = class extends J3w1Element {
 	static componentId = "textarea";
 	static version = "4.0.0";
-	static implementationId = "sha256-hrpvVFypogHx9xxUI1Lemq3AlNYBkdbjqujfPFl8BM0=";
+	static implementationId = "sha256-BoVEmVsZUWTLPVMKc4WLoQfNpjGc4Wy8j7o7zHck1uQ=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/time-picker.js b/packages/ui/dist/components/time-picker.js
index 384dca63b..182becce4 100644
--- a/packages/ui/dist/components/time-picker.js
+++ b/packages/ui/dist/components/time-picker.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/time-picker.js
 var J3w1TimePicker = class extends J3w1Element {
 	static componentId = "time-picker";
 	static version = "4.0.0";
-	static implementationId = "sha256-NixIqVSP1+pZBmD/nUflx8v6ZEWVt0qAVhGMMZv7eWQ=";
+	static implementationId = "sha256-IYFVpO+yyMztyk5IQgkfuuyrieY/xyLgcisHM1D02DA=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/timeline.js b/packages/ui/dist/components/timeline.js
index 49eeb39d4..b5e0249ea 100644
--- a/packages/ui/dist/components/timeline.js
+++ b/packages/ui/dist/components/timeline.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/timeline.js
 var J3w1Timeline = class extends J3w1Element {
 	static componentId = "timeline";
 	static version = "4.0.0";
-	static implementationId = "sha256-CHqFmIx9nQ6y8hgR0WE3+faD/i7oj5KwbMMOpibojI4=";
+	static implementationId = "sha256-AeDLITSMVmcqyJwXO1iz+6eWe9/9kWYL6lepUxS5ZtU=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/toast.js b/packages/ui/dist/components/toast.js
index bfce21732..b400752aa 100644
--- a/packages/ui/dist/components/toast.js
+++ b/packages/ui/dist/components/toast.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as feedback } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as feedback } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/toast.js
 var J3w1Toast = class extends J3w1Element {
 	static componentId = "toast";
 	static version = "4.0.0";
-	static implementationId = "sha256-rhHX0XsrYevsAon0WzlROHjbfJksZhr/XraWeBmZhxA=";
+	static implementationId = "sha256-BqW1X3i3Z1X0gaHK/29B1mrUpyhmHpV2a30eW/aK+y4=";
 	static connect = feedback;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/toolbar.js b/packages/ui/dist/components/toolbar.js
index c2b5f4a84..195494e1d 100644
--- a/packages/ui/dist/components/toolbar.js
+++ b/packages/ui/dist/components/toolbar.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { a as toolbar } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { a as toolbar } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/toolbar.js
 var J3w1Toolbar = class extends J3w1Element {
 	static componentId = "toolbar";
 	static version = "4.0.0";
-	static implementationId = "sha256-7FoTDU41k2QPRk6gXO/G9yZKsFEuxE/63FSt+FSMAlQ=";
+	static implementationId = "sha256-VCE2y9mKILLuKe6e6CYb+KzHmhM/oKWGD3XWHaHGRw0=";
 	static connect = toolbar;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/tooltip.js b/packages/ui/dist/components/tooltip.js
index a796e5788..e641fa5b8 100644
--- a/packages/ui/dist/components/tooltip.js
+++ b/packages/ui/dist/components/tooltip.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as tooltip } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as tooltip } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/tooltip.js
 var J3w1Tooltip = class extends J3w1Element {
 	static componentId = "tooltip";
 	static version = "4.0.0";
-	static implementationId = "sha256-nhRIjLsKxdM5/M6c+0RvOzlv1sK6VJDshft6xhMUbtE=";
+	static implementationId = "sha256-GLt9uL8KQ+UknDKUAP+CEU7bTChO5TO3WPwmpJzH62M=";
 	static connect = tooltip;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/components/tree.js b/packages/ui/dist/components/tree.js
index 8a8288b08..e0f6bd8da 100644
--- a/packages/ui/dist/components/tree.js
+++ b/packages/ui/dist/components/tree.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as tree } from "../chunks/advanced-DCpe8Ndv.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as tree } from "../chunks/advanced-CqBF0dSb.js";
 //#region .cache/ui-build/entries/components/tree.js
 var J3w1Tree = class extends J3w1Element {
 	static componentId = "tree";
 	static version = "4.0.0";
-	static implementationId = "sha256-MaBLx3mLOk+RW8kMweDInlVoWjSFctZly5Jz9BMRFRI=";
+	static implementationId = "sha256-8E6bGMMWEmhgjIAfuDs1+pxcabRicShQao3beIvcNBY=";
 	static connect = tree;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/components/wizard.js b/packages/ui/dist/components/wizard.js
index 4d9bbaefc..852097735 100644
--- a/packages/ui/dist/components/wizard.js
+++ b/packages/ui/dist/components/wizard.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as wizard } from "../chunks/forms-BT3z7lNC.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as wizard } from "../chunks/forms-CE_hP1hg.js";
 //#region .cache/ui-build/entries/components/wizard.js
 var J3w1Wizard = class extends J3w1Element {
 	static componentId = "wizard";
 	static version = "4.0.0";
-	static implementationId = "sha256-io0DYHj45iX5Dvck9xDTbxK9av2V6Z42KQERETAWGb4=";
+	static implementationId = "sha256-RPzZPFnWZYndDTCn4JxgWR8s+kGEDCPgKxzzaesMZdk=";
 	static connect = wizard;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/consumption.md b/packages/ui/dist/consumption.md
index fb7d37943..14beba12c 100644
--- a/packages/ui/dist/consumption.md
+++ b/packages/ui/dist/consumption.md
@@ -1,61 +1,71 @@
 # Consuming j3w1 components
 
-Use `@j3w1/ui` in web applications that support Custom Elements. Its native
+`@j3w1/ui` serves web applications that support Custom Elements. Native
 children stay real HTML, so labels, form ownership, validation, fieldsets and
-reset keep browser semantics. The canonical design contract stays in `tokens/`
-and `spec/`.
-
-An empty `<j3w1-text-field>` does not invent a label or an input. Start from the
-complete maintained markup on the component's page.
+reset keep browser semantics. The design contract stays in `tokens/` and
+`spec/`. An empty `<j3w1-text-field>` invents no label or input: start from
+the maintained markup on the component's page.
 
 ## Install and pin
 
-- **1.0.0** makes True Black / Rose the default; it is a major upgrade from
-  0.1.0. Read `docs/true-black-rose-migration.md` before you replace old tokens.
-- **2.0.0** is also major: D-029 lifts the dim terminal slots and two code syntax
-  reds, and D-030 adds opt-in `code.hued.*` syntax roles. Component behaviour is
-  unchanged. Read the 2.0.0 changelog entry before you upgrade from 1.x.
-- **3.0.0** is major too: D-032 makes terminal slot 6 coral `#ff7a66`, gives the
-  prompt its own background role, changes the prompt text to bright rose
-  `#ffa2a7` and removes `color.primitive.ansi-readable.6`. Component behaviour
-  is unchanged. Read the 3.0.0 changelog entry before you upgrade.
-
-Keep the exact package version and your package-manager lockfile in source
-control.
+Keep the exact package version and your lockfile in source control.
 
+<!-- ui-install:start -->
 ```sh
-npm install --save-exact @j3w1/ui@3.1.0
+npm install --save-exact @j3w1/ui@4.0.0
 ```
+<!-- ui-install:end -->
 
-That command needs npm publication, which is an owner release action. Before
-publication:
-
-1. Download the release tarball.
-2. Check it against its published digest.
-3. Install the local file:
+That needs npm publication, an owner release action; do not assume it
+happened. Until then, download the release tarball, check it against its
+published digest and install the file:
 
+<!-- ui-tarball:start -->
 ```sh
-npm install --save-exact ./j3w1-ui-3.1.0.tgz
+npm install --save-exact ./j3w1-ui-4.0.0.tgz
 ```
+<!-- ui-tarball:end -->
 
-The repository builds this same artifact with `npm run ui:build` and
-`npm run ui:pack`. Never use a branch URL in place of a release pin. Do not
-assume the package is published just because this guide exists.
+`npm run ui:build` and `npm run ui:pack` build the same artifact here. Never
+pin a branch URL.
 
 ## Load one component
 
-**Choices.** Version 1.1.0 adds theme-owned single and multiple choices (D-025).
-
-- Use `j3w1-select` when the open list must use j3w1 colors. A bare native
-  select is only the no-JavaScript fallback.
-- The component keeps its native select for FormData, required validation,
-  defaults, disabled fieldsets and reset. The visible control is a select-only
-  combobox or a multiselectable listbox.
-- Use the separate `j3w1-combobox` when users need to type and filter
-  suggestions.
+```js
+import '@j3w1/ui/tokens.css';
+import '@j3w1/ui/styles/text-field.css';
+import '@j3w1/ui/register/text-field';
+```
 
-For existing application markup, the supported enhancement applies the same
-renderer without moving the native controls or changing their names:
+Load the token CSS once, then copy the component's maintained markup. A
+registration entry loads the nested registrations it needs, and a stylesheet
+carries its full style closure. `@j3w1/ui/register` and `@j3w1/ui/styles.css`
+load the whole catalogue, for a gallery; ordinary apps import per component.
+
+- Class imports such as `@j3w1/ui/components/text-field` have no registration
+  side effects and are safe during SSR; register in the browser.
+- Registering the same module twice is safe; a foreign class already
+  registered under the same name is rejected. Use one package version per
+  document.
+- Compact is the default density (D-038); set `data-density="comfortable"` on
+  the document or a containing element to opt in to the larger mode.
+- No font binaries are bundled; the stack falls back to locally installed
+  monospace fonts.
+- Component CSS is scoped to its tag: load it after broad resets and avoid
+  later selectors that restyle every button or input. Customise only through
+  the semantic token variables, layout and documented classes. Scope any
+  deliberate host override and record it in your integration; a new literal
+  colour is a deviation, not a theme variant. Keep focus,
+  selection, contrast and forced-colours behaviour.
+
+### Themed choices, dates and native controls
+
+`j3w1-select` renders its open list in theme colours (D-025) as a select-only
+combobox or a multiselectable listbox; its native select stays the source of
+FormData, validation, defaults, disabled fieldsets and reset, and the
+no-JavaScript fallback. Use `j3w1-combobox` when users type to filter. To
+enhance existing application markup without moving native controls or
+changing their names:
 
 ```js
 import '@j3w1/ui/tokens.css';
@@ -67,230 +77,129 @@ const controls = enhanceControls(document.querySelector('#application'));
 controls.destroy();
 ```
 
-- It watches inserted and removed controls inside that root only.
-- Vue and other frameworks keep owning their native selects and option values;
-  normal value bindings and change handlers keep working.
-- In Vue, call it after mount and destroy it in `onBeforeUnmount`. The official
-  demo does this.
-- Complete `select` copy bundles include the same renderer. Do not hand-roll a
-  different dropdown in each application.
-
-Single-choice keys: Enter/Space or arrows open; arrows and Home/End move; typing
-finds an option; Enter/Space commits; Escape/Tab close.
-
-Multiple-choice keys: arrows move; Space or click toggles; Shift with arrows
-selects a range; Ctrl/Command+A selects or clears all enabled options.
-
-The open list, selected fill, check mark, focus boundary and error message are
-theme-rendered. The visible control gets the original accessible label and
-descriptions.
-
-**Dates and times.** Date and time inputs also get a themed editor.
-
-- Dates: explicit YYYY-MM-DD entry and a calendar. Arrows navigate, Home/End
-  move within a week, PageUp/Down change month, Enter/Space choose, Escape
-  closes. The calendar follows the native min, max and step constraints.
-- Times: HH:MM or HH:MM:SS entry, plus buttons that apply the native step;
-  step="any" disables stepping.
-- Labels, native constraints, defaults, reset and read-only/disabled states stay
-  connected to the original inputs, which remain the no-JavaScript fallback.
-- If an engine exposes date/time inputs as text, the enhancement supplies ISO
-  parsing, range/step validation and time stepping itself. The same form value,
-  visible validation and reset contract applies there.
-
-**Other controls.** Within the enhanced root, the stylesheet also themes
-ordinary checkbox, radio, range and file-button chrome, and removes browser
-number spinners; use the Number field's explicit step controls instead.
-Browser-owned file and system dialogs stay host UI.
-
-**Testing.** The native form element stays queryable for data integration, but
-browser tests should use the visible combobox/listbox: Playwright `selectOption` on
-the hidden native select does not test the rendered menu. Click real options and
-use the keyboard.
-
-**One component.**
-
-```js
-import '@j3w1/ui/tokens.css';
-import '@j3w1/ui/styles/text-field.css';
-import '@j3w1/ui/register/text-field';
-```
-
-1. Copy the maintained text-field markup from its component page.
-2. Load token CSS once in your app.
-
-The registration entry loads the nested registrations it needs, and the
-stylesheet includes its full style dependency closure.
-`@j3w1/ui/register` and `@j3w1/ui/styles.css` load the entire catalogue; use them
-for a complete gallery and prefer per-component imports in ordinary apps.
-
-Class imports such as `@j3w1/ui/components/text-field` have no registration side
-effects and are safe during SSR; register in the browser. Importing the same
-registration module again is safe. A foreign class already registered under the
-same name is rejected. Use one package version per document.
+- It watches controls inserted into or removed from that root only.
+  Frameworks keep owning their native selects,
+  value bindings and change handlers; in Vue, call it after mount and destroy
+  it in `onBeforeUnmount`. Complete `select` copy bundles include the same
+  renderer; do not hand-roll another dropdown.
+- Date and time inputs get a themed editor (ISO entry, a calendar, step
+  buttons) bound to the native constraints, defaults and reset; the original
+  inputs stay the no-JavaScript fallback. Where an engine exposes them as
+  text, the enhancement validates ISO values, range and step itself. Keys are
+  on each component page.
+- Checkbox, radio, range and file-button chrome is themed; number spinners are
+  removed in favour of the Number field's step controls. Browser-owned file
+  and system dialogs stay host UI.
+- Test the visible combobox or listbox: Playwright `selectOption` on the
+  hidden native select does not exercise the rendered menu.
 
 ## Vue 3 JavaScript SFCs
 
-1. Tell the Vue compiler that `j3w1-*` tags are Custom Elements in your Vite
-   config:
-
-   ```js
-   import { defineConfig } from 'vite';
-   import vue from '@vitejs/plugin-vue';
-   export default defineConfig({
-     plugins: [vue({ template: { compilerOptions: {
-       isCustomElement: tag => tag.startsWith('j3w1-'),
-     } } })],
-   });
-   ```
+Declare `j3w1-*` tags as Custom Elements in the Vite config, import
+registration in the browser entry or the SFC, and put the maintained native
+markup in the template:
 
-2. Import registration in your browser entry or in the SFC that uses the
-   component.
-3. Put the maintained native markup in the template.
-
-Bindings:
-
-- Native forms: `@submit.prevent` and `new FormData(event.target)`.
-- Custom events: `@j3w1-change="onChange"`; read the payload from `event.detail`.
-- Objects and arrays: `.prop`, for example `:data.prop="series"`.
-- A ref exposes the typed custom-element methods after mount.
-- When Vue owns the value, use the native input's `v-model`. Do not assume a
-  custom wrapper implements Vue's component `modelValue` convention.
+```js
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+export default defineConfig({
+  plugins: [vue({ template: { compilerOptions: {
+    isCustomElement: tag => tag.startsWith('j3w1-'),
+  } } })],
+});
+```
 
-The full JavaScript SFC demo in `apps/demo` is an independently written package
-consumer.
+Submit with `@submit.prevent` and `new FormData(event.target)`; listen with
+`@j3w1-change="onChange"` and read `event.detail`; pass objects and arrays as
+properties (`:data.prop="series"`); bind values with the native input's
+`v-model`, not a component `modelValue`. A ref exposes the element's methods
+after mount. `apps/demo` is an independent package consumer.
 
 ## React, Astro and plain HTML
 
-**React 19** supports Custom Elements.
-
-- Use native JSX children, and `defaultValue` for an uncontrolled native input.
-- Use a ref for complex properties and imperative APIs.
-- `addEventListener('j3w1-change', handler)` works consistently; remove the
-  listener in the effect cleanup.
-- A native form's `onSubmit` receives the real form.
-
-**Astro** renders the maintained markup statically.
+**React 19.** Use native JSX children and `defaultValue` for an uncontrolled
+input, a ref for complex properties and methods, and
+`addEventListener('j3w1-change', handler)` removed in the effect cleanup. A
+native form's `onSubmit` receives the real form.
 
-- Import the CSS in frontmatter.
-- Import registration in a browser `<script>`. Never register Custom Elements in
-  server frontmatter.
-- Essential labels and content are visible before JavaScript runs. Complex
-  interactive controls document their JavaScript limits.
+**Astro.** Import CSS in frontmatter and registration in a browser `<script>`,
+never in server frontmatter.
 
-**Plain HTML.** Use the copy distribution's `index.html`, or serve the package's
-`dist` directory and load its relative ESM registration module with
-`<script type="module">`. Serve it over HTTP; loading module files from a `file:`
-URL is not supported. A complete copy bundle has no bare runtime imports and no
-dependency on the documentation website.
+**Plain HTML.** Use the copy bundle's `index.html`, or serve the package's
+`dist` directory over HTTP and load its relative ESM registration module with
+`<script type="module">`; `file:` URLs are not supported. A complete copy
+bundle has no bare runtime imports and does not depend on this website.
 
 ## Attributes, properties and events
 
-- Boolean attributes work by presence: `disabled="false"` still disables a
-  control. Remove the attribute or set `.disabled = false`.
-- Attributes hold strings. Arrays, objects and native `File` instances go in
-  properties. The generated API table and declarations list each component's
-  properties and methods.
-- Native input attributes set defaults. Setting `.value` or `.checked` changes
-  the current state without faking a user event. Native `form.reset()` restores
-  defaults.
-- A radio group's value names the checked native option. Multiple selections
-  expose arrays where the API declares them.
-- Native input and change events keep their original behavior.
-- Documented `j3w1-*` events are bubbling, composed, cancelable `CustomEvent`s
-  with a structured `detail`. Canceling one controls a default action only when
-  its API says so; canceling a reporting event does not undo a value change.
+- Boolean attributes work by presence: `disabled="false"` still disables.
+  Remove the attribute or set `.disabled = false`.
+- Arrays, objects and `File` instances go in properties; the generated API
+  table lists them.
+- Setting `.value` or `.checked` changes state without faking a user event;
+  native `form.reset()` restores the defaults.
+- Native input and change events behave as usual. Documented `j3w1-*` events
+  are bubbling, composed, cancelable `CustomEvent`s with a structured
+  `detail`; cancelling one stops a default action only where its API says so,
+  and never undoes a value change it reports.
 
 ## Forms and validation
 
-- Keep the native control's `name`, value, label and form relationships intact.
-- `FormData` includes successful native controls; unchecked checkboxes and
-  disabled fields are left out. A switch uses its documented native hidden value.
-- Required, min/max, pattern and custom validity are your choices; the package
-  infers no business validation. Use `checkValidity()` or `reportValidity()`, and
-  keep the canonical error-summary and focus-recovery rules for multi-field forms.
-- File input exposes the selected local files and never uploads them.
-- Authentication, persistence, authorization, network retries and domain policy
-  belong to your app. The demo labels its local simulations. Developer views
-  never run code.
+- Keep each native control's `name`, label and form relationships. `FormData`
+  holds successful native controls only. Validation rules, uploads,
+  persistence and authorisation are your app's; use `checkValidity()` or
+  `reportValidity()`.
 
 ## Composition, lifecycle and styling
 
-The package uses light DOM, so native semantics and static content survive.
-Native children are the composition surface; there are no hidden Shadow DOM
-slots to guess.
-
-- Keep the canonical class names and ARIA relationships from the maintained
-  examples.
-- Give every instance unique IDs, and update all `for`, `aria-*` and fragment
-  references together.
-- Disconnecting an instance removes its listeners, timers and open overlays;
-  reconnecting reattaches behavior.
-- If your framework replaces the native children of a connected instance, call
-  `refresh()` after the DOM update. Do not let a framework and a widget both
-  own or reorder the same child collection.
-
-Density and fonts:
-
-- Set `data-density="compact"` or `data-density="comfortable"` on the document
-  or a containing element. Tokens include both modes.
-- The default font stack falls back to locally installed monospace fonts. No
-  font binaries are bundled; get any optional font from its publisher under its
-  own license.
-
-Styling:
-
-- Component CSS is scoped to its custom tag. Load it after broad application
-  resets, and avoid later selectors that restyle every button or input.
-- Customize only with the canonical semantic token variables, layout and
-  documented classes. New literal colors or changed design meaning are a
-  deviation, not an official theme variant.
-- Keep focus, selection, contrast and forced-colors behavior. Scope any
-  deliberate host override and record it in your integration.
+- Light DOM: native children are the composition surface. Give every instance
+  unique IDs and update each `for`, `aria-*` and fragment reference with
+  them. Call `refresh()` after your framework replaces the children of a
+  connected instance, and never let a framework and a widget both own the
+  same children. Disconnecting removes listeners, timers and open overlays;
+  reconnecting reattaches them.
 
 ## Copy a complete bundle
 
+<!-- ui-copy:start -->
 ```sh
-npx --package=@j3w1/ui@3.1.0 j3w1-ui copy dialog --out ./vendor/j3w1/dialog
-npx --package=@j3w1/ui@3.1.0 j3w1-ui kit --components text-field,button,dialog --out ./vendor/j3w1/task
+npx --package=@j3w1/ui@4.0.0 j3w1-ui copy dialog --out ./vendor/j3w1/dialog
+npx --package=@j3w1/ui@4.0.0 j3w1-ui kit --components text-field,button,dialog --out ./vendor/j3w1/task
 ```
+<!-- ui-copy:end -->
 
-- Installed from a tarball: run the installed `j3w1-ui` binary instead of npx.
-- The CLI checks all source bytes before it writes. It rejects unknown components
-  and symlink destinations, and refuses existing destinations.
-- Keep `element.html`, `component.css`, `tokens.css`, the whole `runtime/`
-  closure, the manifest and the licence notices together.
-- Multi-component kits put each complete bundle in its own named directory. Do
-  not flatten files whose names collide.
-
-The package manifest keeps declared implementation apart from run evidence.
-`index.json` is the compact discovery index; `contracts/<id>.json` and
-`examples/<id>.json` keep small tasks bounded. Canonical exports keep
-eligibility, decision disclosures and the mapping/lock workflow, so existing
-canonical-mapping integrations keep working. Record official package use
-separately, with its exact package identity.
+From a tarball install, run the installed `j3w1-ui` binary instead of npx.
+The CLI checks every source byte before writing and refuses unknown
+components, symlinks and existing destinations. Keep `element.html`,
+`component.css`, `tokens.css`, the whole `runtime/` closure, the manifest and
+the licence notices together; a kit gives each bundle its own directory.
+`index.json` is the discovery index, and `contracts/<id>.json` and
+`examples/<id>.json` keep small tasks bounded.
 
 ## Troubleshooting and upgrades
 
-- Unknown custom tag: load browser registration and configure the Vue compiler.
-- Unstyled control: load tokens and the matching component stylesheet; keep the
-  example's native children and canonical classes.
-- Missing form value: check the native control's name, checked/disabled state
-  and actual owning form. Do not add a duplicate hidden field to a native input.
-- Stale behavior after changing children: call `refresh()` after your
-  framework's DOM update and keep IDs unique.
-- Registration conflict: remove the second implementation or version; never
-  silently replace a class already in the Custom Elements registry.
-- Copy integrity failure: fetch the pinned artifact again and check its digest.
-  Never delete or bypass integrity checks.
-
-To upgrade:
-
-1. Install into a clean fixture.
-2. Review the migration notes and changed contracts.
-3. Exercise your real form and keyboard flows.
-4. Update the package lock and your integration record together.
-
-Browser results apply only to the tested artifact and environment. Manual
-screen-reader and physical-device testing are separate evidence, never inferred
-from automated checks.
+1. Install into a clean fixture; read the notes below, the changelog and the
+   changed component contracts (`contracts/<id>.json`, the component pages).
+2. Exercise your real form and keyboard flows.
+3. Update the lockfile and your integration record together.
+
+- **4.0.0** (D-033): prose and interface text are rose; content headings use
+  `color.text.heading`; bold inherits its colour. Replace heading uses of
+  `text.prose` with `text.heading` and drop colour rules attached only to
+  bold (`docs/rose-typography-migration.md`).
+- **3.0.0** (D-032): terminal slot 6 is coral `#ff7a66`, the prompt gets its
+  own background role and bright rose `#ffa2a7` text, and
+  `color.primitive.ansi-readable.6` is removed.
+- **2.0.0** (D-029, D-030): the dim terminal slots and two code syntax reds are
+  lifted; opt-in `code.hued.*` syntax roles are added.
+- **1.0.0** (D-023): True Black / Rose becomes the default; read
+  `docs/true-black-rose-migration.md` before replacing 0.1.0 tokens.
+
+Component behaviour did not change in 2.0.0 or 3.0.0. If something breaks:
+an unknown tag needs browser registration (and the Vue compiler setting); an
+unstyled control needs tokens and its stylesheet; a missing form value means
+checking the native control's name, state and owning form, never adding a
+hidden duplicate; a registration conflict means removing the second version;
+a copy integrity failure means fetching the pinned artifact again, never
+bypassing the check. Browser results cover only the tested artifact and
+environment; manual screen-reader and device testing are separate evidence.
diff --git a/packages/ui/dist/contracts/admin-form.json b/packages/ui/dist/contracts/admin-form.json
index cd14eff71..0e7eead0d 100644
--- a/packages/ui/dist/contracts/admin-form.json
+++ b/packages/ui/dist/contracts/admin-form.json
@@ -909,6 +909,6 @@
   "copy": {
     "directory": "copy/admin-form/",
     "manifest": "copy/admin-form/manifest.json",
-    "digest": "sha256-HtST9X/UpiRDsFEMo7i1ElwMpiALSDf/MyJKLw0Dk90="
+    "digest": "sha256-0cFh6BAwKorLKq38Qi1CjI8uGgYupJJvet2b/DOatzY="
   }
 }
diff --git a/packages/ui/dist/contracts/alert.json b/packages/ui/dist/contracts/alert.json
index 89dc91e3d..e8e2eb657 100644
--- a/packages/ui/dist/contracts/alert.json
+++ b/packages/ui/dist/contracts/alert.json
@@ -445,6 +445,6 @@
   "copy": {
     "directory": "copy/alert/",
     "manifest": "copy/alert/manifest.json",
-    "digest": "sha256-f/+taezEaLxGwimv58Q/I0IZhOlgqScdKlt4tv+J4js="
+    "digest": "sha256-Xr0PVAQg/cCG1sYsDsG/HtcuGQAX0No2RKYfPdwKhZs="
   }
 }
diff --git a/packages/ui/dist/contracts/avatar.json b/packages/ui/dist/contracts/avatar.json
index d0b680565..5999bc1a6 100644
--- a/packages/ui/dist/contracts/avatar.json
+++ b/packages/ui/dist/contracts/avatar.json
@@ -86,10 +86,10 @@
     "control.bg": "color.surface.input",
     "control.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-font-weight-bold": "font.weight.bold",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-32": "space.32"
   },
   "status": {
@@ -104,7 +104,6 @@
       "border.width.emphasis",
       "color.border.control",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -112,13 +111,14 @@
       "color.surface.canvas",
       "color.surface.default",
       "color.text.default",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "font.weight.bold",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "z.popover"
@@ -144,13 +144,14 @@
       "color.surface.canvas",
       "color.surface.default",
       "color.text.default",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "font.weight.bold",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "z.popover"
@@ -178,11 +179,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -218,6 +214,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -248,11 +254,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.32": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -274,6 +275,6 @@
   "copy": {
     "directory": "copy/avatar/",
     "manifest": "copy/avatar/manifest.json",
-    "digest": "sha256-RRx0kD6cBwLeZFpZWYUl397tEaCFc8+hAq4Iul/dLR4="
+    "digest": "sha256-URCjMYwlCXYlGlrMSk3vrPp/2Oy/ymRJ61Q2YzoRhF8="
   }
 }
diff --git a/packages/ui/dist/contracts/badge.json b/packages/ui/dist/contracts/badge.json
index a78c345d8..51c8ef4ae 100644
--- a/packages/ui/dist/contracts/badge.json
+++ b/packages/ui/dist/contracts/badge.json
@@ -452,6 +452,6 @@
   "copy": {
     "directory": "copy/badge/",
     "manifest": "copy/badge/manifest.json",
-    "digest": "sha256-raQq7vv7/AES3cx9gip/td/yODbpi3TvQ6minqOTVqg="
+    "digest": "sha256-8m5l7I70X8Z4BjZraEvIuDZcQVsbPpvXOcUrVrXjzGA="
   }
 }
diff --git a/packages/ui/dist/contracts/breadcrumbs.json b/packages/ui/dist/contracts/breadcrumbs.json
index 5c912d3a1..b02e5abbf 100644
--- a/packages/ui/dist/contracts/breadcrumbs.json
+++ b/packages/ui/dist/contracts/breadcrumbs.json
@@ -84,7 +84,7 @@
     "link.text": "color.text.link",
     "link.underline": "color.text.link-underline",
     "link.text-hover": "color.text.link-hover",
-    "link.bg-hover": "color.interaction.hover.bg-strong",
+    "link.bg-hover": "color.interaction.hover.bg",
     "link.ring": "color.interaction.focus.ring",
     "current.text": "color.text.bright",
     "separator.text": "color.text.muted",
@@ -103,7 +103,6 @@
       "border.width.emphasis",
       "color.interaction.drop-target",
       "color.interaction.hover.bg",
-      "color.interaction.hover.bg-strong",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -137,7 +136,6 @@
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
       "color.interaction.hover.bg",
-      "color.interaction.hover.bg-strong",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -147,7 +145,6 @@
       "color.primitive.ink.40",
       "color.primitive.paper.90",
       "color.primitive.red.100",
-      "color.primitive.red.150",
       "color.primitive.red.350",
       "color.primitive.red.750",
       "color.primitive.red.800",
@@ -199,11 +196,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.hover.bg-strong": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -340,6 +332,6 @@
   "copy": {
     "directory": "copy/breadcrumbs/",
     "manifest": "copy/breadcrumbs/manifest.json",
-    "digest": "sha256-/aBGJEdE5pG/blq4jU0tuQHrHU7s37pK/hbNdI+bRL8="
+    "digest": "sha256-ueISJuY31tOa5XV3BZcJ0JRiWkClTX+lyFKzdCvc+uc="
   }
 }
diff --git a/packages/ui/dist/contracts/button-group.json b/packages/ui/dist/contracts/button-group.json
index 5f1f07733..e715ecd73 100644
--- a/packages/ui/dist/contracts/button-group.json
+++ b/packages/ui/dist/contracts/button-group.json
@@ -82,7 +82,12 @@
     "root.border": "color.border.control",
     "heading.text": "color.text.bright",
     "secondary.text": "color.text.muted",
-    "control.bg": "color.surface.input",
+    "control.bg": "color.action.secondary.bg",
+    "control.text": "color.action.secondary.text",
+    "control.border": "color.action.secondary.border",
+    "control.bg-hover": "color.action.secondary.hover-bg",
+    "control.bg-active": "color.action.secondary.pressed-bg",
+    "control.border-active": "color.border.active",
     "control.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-color-border-disabled": "color.border.disabled",
@@ -90,9 +95,9 @@
     "dependency.role-color-text-disabled": "color.text.disabled",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-4": "space.4",
     "dependency.role-space-8": "space.8"
   },
@@ -106,11 +111,33 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
       "color.border.disabled",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -121,13 +148,17 @@
       "color.text.default",
       "color.text.disabled",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -136,39 +167,77 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
       "color.border.disabled",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.primitive.alpha.transparent",
       "color.primitive.ink.0",
       "color.primitive.ink.28",
       "color.primitive.ink.30",
+      "color.primitive.ink.40",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
+      "color.primitive.red.150",
       "color.primitive.red.200",
       "color.primitive.red.350",
+      "color.primitive.red.400",
+      "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
+      "color.primitive.red.850",
       "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.700",
+      "color.primitive.rose.800",
       "color.surface.canvas",
       "color.surface.default",
       "color.surface.input",
+      "color.text.bright",
       "color.text.default",
       "color.text.disabled",
+      "color.text.on-action",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -185,6 +254,106 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.border.active": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.control": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -212,6 +381,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.focus.ring-container": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.interaction.pressed.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -262,11 +441,31 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.comfortable.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.compact.control-height": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.compact.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -282,17 +481,17 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "radius.none": {
+      "motion.duration.fast": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.12": {
+      "radius.none": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
+      "space.12": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -323,6 +522,6 @@
   "copy": {
     "directory": "copy/button-group/",
     "manifest": "copy/button-group/manifest.json",
-    "digest": "sha256-YKE2o9BZmy5u6eQtlL6F7qjaDs3StPobS7MNVotT0KI="
+    "digest": "sha256-InnBod9qxTqZB9qGW3Qa9YX4EcdXhazIz+8TN5ZeN/c="
   }
 }
diff --git a/packages/ui/dist/contracts/button.json b/packages/ui/dist/contracts/button.json
index c0860b429..7bf3b82f0 100644
--- a/packages/ui/dist/contracts/button.json
+++ b/packages/ui/dist/contracts/button.json
@@ -510,6 +510,6 @@
   "copy": {
     "directory": "copy/button/",
     "manifest": "copy/button/manifest.json",
-    "digest": "sha256-Bat7CbXli1BVcEmYLAyJ42OAFKhWDW0Y3N9ebMbsR+k="
+    "digest": "sha256-fC+Ph4zr0NqxpT/nYbZS8dMMVe6RUzS7yYl7a8ZXfDY="
   }
 }
diff --git a/packages/ui/dist/contracts/card.json b/packages/ui/dist/contracts/card.json
index e4e06ace5..070d16806 100644
--- a/packages/ui/dist/contracts/card.json
+++ b/packages/ui/dist/contracts/card.json
@@ -90,7 +90,7 @@
     "meta.text": "color.text.muted",
     "selected.bg": "color.interaction.selection.bg",
     "selected.text": "color.interaction.selection.text",
-    "selected.ring": "color.interaction.focus.ring-container"
+    "selected.ring": "color.interaction.focus.ring"
   },
   "status": {
     "implemented": true,
@@ -119,7 +119,9 @@
       "density.comfortable.gap",
       "density.compact.control-padding-x",
       "density.compact.gap",
+      "focus.offset",
       "focus.offset-container",
+      "focus.ring",
       "focus.ring-container",
       "font.family.mono",
       "font.line-height.h3",
@@ -141,6 +143,7 @@
       "color.border.control",
       "color.border.default",
       "color.interaction.drop-target",
+      "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.selection.bg",
@@ -167,7 +170,9 @@
       "density.comfortable.gap",
       "density.compact.control-padding-x",
       "density.compact.gap",
+      "focus.offset",
       "focus.offset-container",
+      "focus.ring",
       "focus.ring-container",
       "font.family.mono",
       "font.line-height.h3",
@@ -281,11 +286,21 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "focus.offset-container": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "focus.ring-container": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -362,6 +377,6 @@
   "copy": {
     "directory": "copy/card/",
     "manifest": "copy/card/manifest.json",
-    "digest": "sha256-uCrS1zqZdZJERPpycHAm2jRonQ5KvUciSZZ0GDG/r2c="
+    "digest": "sha256-3S0KS6wyJ2cEr9p4M5m0cwANysCtMtlatwNGyvFMngc="
   }
 }
diff --git a/packages/ui/dist/contracts/chart.json b/packages/ui/dist/contracts/chart.json
index 26e4974c7..25e73072e 100644
--- a/packages/ui/dist/contracts/chart.json
+++ b/packages/ui/dist/contracts/chart.json
@@ -85,12 +85,12 @@
     "dependency.role-color-chart-axis": "color.chart.axis",
     "dependency.role-color-chart-grid": "color.chart.grid",
     "dependency.role-color-chart-label": "color.chart.label",
+    "dependency.role-focus-offset": "focus.offset",
     "series.primary": "color.chart.series-2",
     "header.text": "color.text.bright",
     "row.text": "color.text.default",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-8": "space.8"
   },
   "status": {
@@ -109,7 +109,6 @@
       "color.chart.label",
       "color.chart.series-2",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -119,6 +118,8 @@
       "color.text.bright",
       "color.text.default",
       "color.text.muted",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
@@ -126,7 +127,6 @@
       "font.weight.regular",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -164,6 +164,8 @@
       "color.text.bright",
       "color.text.default",
       "color.text.muted",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
@@ -171,7 +173,6 @@
       "font.weight.regular",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -220,11 +221,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -270,6 +266,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -305,11 +311,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.32": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -336,6 +337,6 @@
   "copy": {
     "directory": "copy/chart/",
     "manifest": "copy/chart/manifest.json",
-    "digest": "sha256-vN7Sze32H790CZumX+te7Ju/JDPFYxXOYbJyBD+Fl34="
+    "digest": "sha256-aCdCOmd73xQ4GZ1/TyhtoQ+UDkSqVrV6Otsm8YTPDQY="
   }
 }
diff --git a/packages/ui/dist/contracts/checkbox.json b/packages/ui/dist/contracts/checkbox.json
index 9c7e504db..07729bcb3 100644
--- a/packages/ui/dist/contracts/checkbox.json
+++ b/packages/ui/dist/contracts/checkbox.json
@@ -491,6 +491,6 @@
   "copy": {
     "directory": "copy/checkbox/",
     "manifest": "copy/checkbox/manifest.json",
-    "digest": "sha256-hJd553Ef33h7Ny4ruLLSL8+BmSTVMIt41aCWwR9Kavc="
+    "digest": "sha256-niMah9PNNjgBMYDMlSVaCrZ4apFC6fsEJ91RmAgS3jo="
   }
 }
diff --git a/packages/ui/dist/contracts/chip.json b/packages/ui/dist/contracts/chip.json
index 2c39fc3c0..2eda05508 100644
--- a/packages/ui/dist/contracts/chip.json
+++ b/packages/ui/dist/contracts/chip.json
@@ -113,7 +113,7 @@
     "root.bg-disabled": "color.interaction.disabled.bg",
     "selected.bg": "color.interaction.selection.bg",
     "selected.text": "color.interaction.selection.text",
-    "selected.ring": "color.interaction.focus.ring-container",
+    "selected.ring": "color.interaction.focus.ring",
     "remove.text": "color.text.muted",
     "remove.text-hover": "color.text.bright",
     "remove.bg-hover": "color.interaction.hover.bg-strong"
@@ -132,7 +132,6 @@
       "color.border.disabled",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.hover.bg-strong",
       "color.interaction.pressed.bg",
@@ -168,7 +167,6 @@
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.hover.bg-strong",
       "color.interaction.pressed.bg",
@@ -245,11 +243,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.hover.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -386,6 +379,6 @@
   "copy": {
     "directory": "copy/chip/",
     "manifest": "copy/chip/manifest.json",
-    "digest": "sha256-CDpgsi4gq8pm3VmaExEHAIHIro+79mdFp7dhVprq6XE="
+    "digest": "sha256-Q8H52ja9lyGWmgJRf4PF5LnCZDnnfHuopw5riaVv39I="
   }
 }
diff --git a/packages/ui/dist/contracts/code-editor.json b/packages/ui/dist/contracts/code-editor.json
index 5647ae682..ceb72c889 100644
--- a/packages/ui/dist/contracts/code-editor.json
+++ b/packages/ui/dist/contracts/code-editor.json
@@ -531,6 +531,6 @@
   "copy": {
     "directory": "copy/code-editor/",
     "manifest": "copy/code-editor/manifest.json",
-    "digest": "sha256-AZOed+UbhiUZzGPeg4XOfbQaDtbSuEA5oe+y2k51vjI="
+    "digest": "sha256-34XB9GRIxMUKi/v1n3Xa3EwEByberTg3XfCVREIe3rw="
   }
 }
diff --git a/packages/ui/dist/contracts/combobox.json b/packages/ui/dist/contracts/combobox.json
index da173a548..3561d18a4 100644
--- a/packages/ui/dist/contracts/combobox.json
+++ b/packages/ui/dist/contracts/combobox.json
@@ -135,7 +135,7 @@
     "option.text-hover": "color.text.link-hover",
     "option.bg-selected": "color.interaction.selection.bg",
     "option.text-selected": "color.interaction.selection.text",
-    "option.ring-selected": "color.interaction.focus.ring-container",
+    "option.ring-selected": "color.interaction.focus.ring",
     "group.text": "color.text.subtle",
     "group.border": "color.border.divider",
     "empty.text": "color.text.muted",
@@ -548,6 +548,6 @@
   "copy": {
     "directory": "copy/combobox/",
     "manifest": "copy/combobox/manifest.json",
-    "digest": "sha256-Z6FLAAQ/vWunhYlUN5k67m7KZO/GNkn0b+T8HAGYFis="
+    "digest": "sha256-GTacDO1sEuZ7w5WJ08WkaWKjRm36EQJ2SMRHwKQHAWo="
   }
 }
diff --git a/packages/ui/dist/contracts/command-palette.json b/packages/ui/dist/contracts/command-palette.json
index 7e064cb8b..ae2a8315a 100644
--- a/packages/ui/dist/contracts/command-palette.json
+++ b/packages/ui/dist/contracts/command-palette.json
@@ -103,6 +103,13 @@
     "secondary.text": "color.text.muted",
     "control.bg": "color.surface.input",
     "control.focus": "color.interaction.focus.ring",
+    "button.bg": "color.action.secondary.bg",
+    "button.text": "color.action.secondary.text",
+    "button.border": "color.action.secondary.border",
+    "button.bg-hover": "color.action.secondary.hover-bg",
+    "button.bg-active": "color.action.secondary.pressed-bg",
+    "button.border-active": "color.border.active",
+    "button.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-border-width-emphasis": "border.width.emphasis",
     "dependency.role-color-border-overlay": "color.border.overlay",
@@ -113,10 +120,10 @@
     "dependency.role-color-surface-overlay": "color.surface.overlay",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
     "dependency.role-space-16": "space.16",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-8": "space.8"
   },
   "status": {
@@ -129,11 +136,35 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
+      "color.border.disabled",
       "color.border.overlay",
       "color.border.selected-indicator",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -145,19 +176,24 @@
       "color.surface.overlay",
       "color.text.bright",
       "color.text.default",
+      "color.text.disabled",
       "color.text.heading",
       "color.text.muted",
       "color.text.placeholder",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "font.size.ui-sm",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.32",
       "space.4",
       "space.48",
@@ -167,23 +203,59 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
+      "color.border.disabled",
       "color.border.overlay",
       "color.border.selected-indicator",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
       "color.primitive.alpha.black-65",
+      "color.primitive.alpha.transparent",
       "color.primitive.ink.0",
       "color.primitive.ink.28",
+      "color.primitive.ink.30",
+      "color.primitive.ink.40",
       "color.primitive.ink.52",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
+      "color.primitive.red.150",
+      "color.primitive.red.200",
       "color.primitive.red.350",
+      "color.primitive.red.400",
+      "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
+      "color.primitive.red.850",
+      "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.600",
       "color.primitive.rose.700",
@@ -195,19 +267,25 @@
       "color.surface.overlay",
       "color.text.bright",
       "color.text.default",
+      "color.text.disabled",
       "color.text.heading",
       "color.text.muted",
+      "color.text.on-action",
       "color.text.placeholder",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "font.size.ui-sm",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.32",
       "space.4",
       "space.48",
@@ -225,6 +303,106 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.border.active": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.control": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -232,6 +410,11 @@
           "D-007"
         ]
       },
+      "color.border.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.overlay": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -244,6 +427,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.disabled.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.drop-target": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -254,6 +442,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.focus.ring-container": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.interaction.pressed.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -311,6 +509,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.text.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.text.heading": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -331,11 +534,31 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.comfortable.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.compact.control-height": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.compact.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -356,22 +579,22 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "radius.none": {
+      "motion.duration.fast": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.12": {
+      "radius.none": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.16": {
+      "space.12": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
+      "space.16": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -407,6 +630,6 @@
   "copy": {
     "directory": "copy/command-palette/",
     "manifest": "copy/command-palette/manifest.json",
-    "digest": "sha256-sjwZw/AW7vcseMQ1l9pbcq/hDRYxIdZs2DOV5595GV4="
+    "digest": "sha256-73hcJgww/vreos5t04p67k77Y1tsq1TKj1LfllwbXVU="
   }
 }
diff --git a/packages/ui/dist/contracts/compact-dashboard.json b/packages/ui/dist/contracts/compact-dashboard.json
index a39bb6f87..e5d170436 100644
--- a/packages/ui/dist/contracts/compact-dashboard.json
+++ b/packages/ui/dist/contracts/compact-dashboard.json
@@ -81,17 +81,22 @@
     "root.border": "color.border.control",
     "heading.text": "color.text.bright",
     "secondary.text": "color.text.muted",
-    "control.bg": "color.surface.input",
+    "control.bg": "color.action.secondary.bg",
+    "control.text": "color.action.secondary.text",
+    "control.border": "color.action.secondary.border",
+    "control.bg-hover": "color.action.secondary.hover-bg",
+    "control.bg-active": "color.action.secondary.pressed-bg",
+    "control.border-active": "color.border.active",
     "control.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-color-border-divider": "color.border.divider",
     "dependency.role-color-surface-chrome": "color.surface.chrome",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-font-size-h2": "font.size.h2",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-8": "space.8"
   },
   "status": {
@@ -107,17 +112,40 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
+      "color.border.disabled",
       "color.border.divider",
       "color.border.strong",
       "color.chart.axis",
       "color.chart.grid",
       "color.chart.label",
       "color.chart.series-2",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.inactive-bg",
       "color.interaction.selection.inactive-text",
@@ -131,6 +159,7 @@
       "color.surface.raised",
       "color.text.bright",
       "color.text.default",
+      "color.text.disabled",
       "color.text.muted",
       "density.comfortable.control-height",
       "density.comfortable.control-padding-x",
@@ -148,7 +177,6 @@
       "motion.duration.fast",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -158,36 +186,66 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
+      "color.border.disabled",
       "color.border.divider",
       "color.border.strong",
       "color.chart.axis",
       "color.chart.grid",
       "color.chart.label",
       "color.chart.series-2",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.inactive-bg",
       "color.interaction.selection.inactive-text",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.primitive.alpha.transparent",
       "color.primitive.ink.0",
       "color.primitive.ink.14",
       "color.primitive.ink.28",
       "color.primitive.ink.30",
       "color.primitive.ink.40",
       "color.primitive.ink.60",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
+      "color.primitive.red.150",
+      "color.primitive.red.200",
       "color.primitive.red.350",
       "color.primitive.red.400",
       "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
       "color.primitive.red.850",
+      "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.600",
       "color.primitive.rose.700",
@@ -199,7 +257,9 @@
       "color.surface.raised",
       "color.text.bright",
       "color.text.default",
+      "color.text.disabled",
       "color.text.muted",
+      "color.text.on-action",
       "density.comfortable.control-height",
       "density.comfortable.control-padding-x",
       "density.comfortable.row-height",
@@ -216,7 +276,6 @@
       "motion.duration.fast",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -234,6 +293,106 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.border.active": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.control": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -241,6 +400,11 @@
           "D-007"
         ]
       },
+      "color.border.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.divider": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -273,6 +437,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.disabled.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.drop-target": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -293,6 +462,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.pressed.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -358,6 +532,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.text.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.text.muted": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -443,11 +622,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.32": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -479,6 +653,6 @@
   "copy": {
     "directory": "copy/compact-dashboard/",
     "manifest": "copy/compact-dashboard/manifest.json",
-    "digest": "sha256-8Tz2CHZNJCFbdxv2h7ms7Dvyie84SceiClcFGjQ4iT0="
+    "digest": "sha256-8HPA/m4bQRmM0HaCiKTayXG+ryly96Ex9sR87wOLabM="
   }
 }
diff --git a/packages/ui/dist/contracts/data-table.json b/packages/ui/dist/contracts/data-table.json
index 3e19031af..e2b3fda98 100644
--- a/packages/ui/dist/contracts/data-table.json
+++ b/packages/ui/dist/contracts/data-table.json
@@ -124,7 +124,7 @@
     "row.ring": "color.interaction.focus.ring",
     "selected.bg": "color.interaction.selection.bg",
     "selected.text": "color.interaction.selection.text",
-    "selected.ring": "color.interaction.focus.ring-container",
+    "selected.ring": "color.interaction.focus.ring",
     "checkbox.bg": "color.surface.input",
     "checkbox.border": "color.border.control",
     "checkbox.checked-bg": "color.action.primary.bg",
@@ -159,7 +159,6 @@
       "color.icon.decorative",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.hover.bg-strong",
       "color.interaction.pressed.bg",
@@ -185,9 +184,7 @@
       "density.compact.icon",
       "density.compact.row-height",
       "focus.offset",
-      "focus.offset-container",
       "focus.ring",
-      "focus.ring-container",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.line-height.ui-sm",
@@ -223,7 +220,6 @@
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.hover.bg-strong",
       "color.interaction.pressed.bg",
@@ -268,9 +264,7 @@
       "density.compact.icon",
       "density.compact.row-height",
       "focus.offset",
-      "focus.offset-container",
       "focus.ring",
-      "focus.ring-container",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.line-height.ui-sm",
@@ -371,11 +365,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.hover.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -501,21 +490,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "focus.offset-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "focus.ring": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "focus.ring-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -607,6 +586,6 @@
   "copy": {
     "directory": "copy/data-table/",
     "manifest": "copy/data-table/manifest.json",
-    "digest": "sha256-HPNF+mZXjuU3YIozdl2drk3Led2FIYYUMYaIgdU5O68="
+    "digest": "sha256-YC+eobPLgAutDoOERX3GiBuOt+tmkwZRHligHoQd8VA="
   }
 }
diff --git a/packages/ui/dist/contracts/date-picker.json b/packages/ui/dist/contracts/date-picker.json
index 35fd49e45..daa95e02b 100644
--- a/packages/ui/dist/contracts/date-picker.json
+++ b/packages/ui/dist/contracts/date-picker.json
@@ -583,6 +583,6 @@
   "copy": {
     "directory": "copy/date-picker/",
     "manifest": "copy/date-picker/manifest.json",
-    "digest": "sha256-7BRpb4bMBn6h5aixxc8Fb+OE71//nfE+Rlqox36UEek="
+    "digest": "sha256-DB3JDMg5IALIVpVXGgw/hVsdY1I2kQ5XHdaNILtk0YM="
   }
 }
diff --git a/packages/ui/dist/contracts/description-list.json b/packages/ui/dist/contracts/description-list.json
index 5ee4c57d7..ba4b31542 100644
--- a/packages/ui/dist/contracts/description-list.json
+++ b/packages/ui/dist/contracts/description-list.json
@@ -75,9 +75,9 @@
     "control.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-color-border-divider": "color.border.divider",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-4": "space.4",
     "dependency.role-space-8": "space.8"
   },
@@ -94,7 +94,6 @@
       "color.border.control",
       "color.border.divider",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -103,12 +102,13 @@
       "color.surface.default",
       "color.text.default",
       "color.text.muted",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -139,12 +139,13 @@
       "color.surface.default",
       "color.text.default",
       "color.text.muted",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -180,11 +181,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -225,6 +221,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -250,11 +256,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.32": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -281,6 +282,6 @@
   "copy": {
     "directory": "copy/description-list/",
     "manifest": "copy/description-list/manifest.json",
-    "digest": "sha256-HW+ZJFxBuqoK3d8KJlYivtpz6Ql2Fa89enziCfIyg1Y="
+    "digest": "sha256-PcJ06FeOmRyLmgzRUIOHECJINDumCczoIN6nZO39PC0="
   }
 }
diff --git a/packages/ui/dist/contracts/diagnostics.json b/packages/ui/dist/contracts/diagnostics.json
index 470802652..9d45b19d2 100644
--- a/packages/ui/dist/contracts/diagnostics.json
+++ b/packages/ui/dist/contracts/diagnostics.json
@@ -115,7 +115,7 @@
     "row.ring": "color.interaction.focus.ring",
     "row.bg-selected": "color.interaction.selection.bg",
     "row.text-selected": "color.interaction.selection.text",
-    "row.ring-selected": "color.interaction.focus.ring-container",
+    "row.ring-selected": "color.interaction.focus.ring",
     "header.text": "color.text.bright",
     "status.text": "color.status.danger.text",
     "empty.text": "color.text.muted",
@@ -149,7 +149,6 @@
       "color.diagnostic.warning.text",
       "color.diagnostic.warning.underline",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
@@ -372,11 +371,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.hover.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -568,6 +562,6 @@
   "copy": {
     "directory": "copy/diagnostics/",
     "manifest": "copy/diagnostics/manifest.json",
-    "digest": "sha256-Pxd8jPIYkeRwMC2E/I0DzzxVoxnL9iQ6p2cvAWl7Qkk="
+    "digest": "sha256-n3A7adYFaPqBEZMH83XHNGwVkvhllkBTQV+FLtmNDTs="
   }
 }
diff --git a/packages/ui/dist/contracts/dialog.json b/packages/ui/dist/contracts/dialog.json
index 37a290e73..ace54ab18 100644
--- a/packages/ui/dist/contracts/dialog.json
+++ b/packages/ui/dist/contracts/dialog.json
@@ -193,6 +193,7 @@
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.status.danger.text",
       "color.surface.backdrop",
       "color.surface.canvas",
       "color.surface.input",
@@ -289,6 +290,7 @@
       "color.primitive.rose.600",
       "color.primitive.rose.700",
       "color.primitive.rose.800",
+      "color.status.danger.text",
       "color.surface.backdrop",
       "color.surface.canvas",
       "color.surface.input",
@@ -507,6 +509,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.status.danger.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.surface.backdrop": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -695,6 +702,6 @@
   "copy": {
     "directory": "copy/dialog/",
     "manifest": "copy/dialog/manifest.json",
-    "digest": "sha256-AJuEfuBHZb4d3lOAX/LxDDfwsCCYi6i4YdV+9O78IPY="
+    "digest": "sha256-m5mXloJmQCM08+v8jrBtBzmVjcZabnvryBht9CoJb+g="
   }
 }
diff --git a/packages/ui/dist/contracts/diff-view.json b/packages/ui/dist/contracts/diff-view.json
index e21693111..a1dfc8dd5 100644
--- a/packages/ui/dist/contracts/diff-view.json
+++ b/packages/ui/dist/contracts/diff-view.json
@@ -122,7 +122,7 @@
     "row.ring": "color.interaction.focus.ring",
     "row.bg-selected": "color.interaction.selection.bg",
     "row.text-selected": "color.interaction.selection.text",
-    "row.ring-selected": "color.interaction.focus.ring-container"
+    "row.ring-selected": "color.interaction.focus.ring"
   },
   "status": {
     "implemented": true,
@@ -149,7 +149,6 @@
       "color.diff.removed.emphasis",
       "color.diff.removed.gutter",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.hover.bg-strong",
       "color.interaction.selection.bg",
@@ -345,11 +344,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.hover.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -516,6 +510,6 @@
   "copy": {
     "directory": "copy/diff-view/",
     "manifest": "copy/diff-view/manifest.json",
-    "digest": "sha256-cIqnQO+bVVoaU28MWcHfPoVhXheewGMtTBcDUDs8vxU="
+    "digest": "sha256-z+BxcKKq1cJGYRwtESbjQpf5ymqtRempRqMUqEY4kKg="
   }
 }
diff --git a/packages/ui/dist/contracts/disclosure.json b/packages/ui/dist/contracts/disclosure.json
index f7b696eac..a59656597 100644
--- a/packages/ui/dist/contracts/disclosure.json
+++ b/packages/ui/dist/contracts/disclosure.json
@@ -96,9 +96,9 @@
     "dependency.role-color-text-disabled": "color.text.disabled",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-8": "space.8"
   },
   "status": {
@@ -113,27 +113,23 @@
       "border.width.emphasis",
       "color.border.active",
       "color.border.control",
-      "color.border.disabled",
-      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
       "color.surface.canvas",
       "color.surface.default",
-      "color.surface.input",
       "color.text.default",
-      "color.text.disabled",
       "density.comfortable.control-height",
       "density.compact.control-height",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -144,8 +140,6 @@
       "border.width.emphasis",
       "color.border.active",
       "color.border.control",
-      "color.border.disabled",
-      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
       "color.interaction.selection.bg",
@@ -154,28 +148,24 @@
       "color.interaction.text-selection.text",
       "color.primitive.ink.0",
       "color.primitive.ink.28",
-      "color.primitive.ink.30",
       "color.primitive.paper.90",
       "color.primitive.red.100",
-      "color.primitive.red.200",
       "color.primitive.red.350",
       "color.primitive.red.800",
-      "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.700",
       "color.surface.canvas",
       "color.surface.default",
-      "color.surface.input",
       "color.text.default",
-      "color.text.disabled",
       "density.comfortable.control-height",
       "density.compact.control-height",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -204,26 +194,11 @@
           "D-007"
         ]
       },
-      "color.border.disabled": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
-      "color.interaction.disabled.bg": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.drop-target": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -254,27 +229,27 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.surface.input": {
+      "color.text.default": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.text.default": {
+      "density.comfortable.control-height": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.text.disabled": {
+      "density.compact.control-height": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "density.comfortable.control-height": {
+      "focus.offset": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "density.compact.control-height": {
+      "focus.ring": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -304,11 +279,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.32": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -335,6 +305,6 @@
   "copy": {
     "directory": "copy/disclosure/",
     "manifest": "copy/disclosure/manifest.json",
-    "digest": "sha256-pUsMYVXWCYN1EVfwL18klJsWytxWbWsJ5ZCkon4Ohb4="
+    "digest": "sha256-7FeobZEK1MIlzN/Qb/FxsM8X6iVLI3xEmPbgLq93UCc="
   }
 }
diff --git a/packages/ui/dist/contracts/drawer.json b/packages/ui/dist/contracts/drawer.json
index 50fd2a95f..178d88d4a 100644
--- a/packages/ui/dist/contracts/drawer.json
+++ b/packages/ui/dist/contracts/drawer.json
@@ -696,6 +696,6 @@
   "copy": {
     "directory": "copy/drawer/",
     "manifest": "copy/drawer/manifest.json",
-    "digest": "sha256-sVEeq/PKuPmVSBR72cingvVcslqWxp/7MiJZtdMTaT0="
+    "digest": "sha256-O71hKP440tr3Fw93dJfDZGswP4WrnavbuPA4nRoGm6g="
   }
 }
diff --git a/packages/ui/dist/contracts/editor-search.json b/packages/ui/dist/contracts/editor-search.json
index f90790738..8c9c2aeb8 100644
--- a/packages/ui/dist/contracts/editor-search.json
+++ b/packages/ui/dist/contracts/editor-search.json
@@ -101,6 +101,13 @@
     "secondary.text": "color.text.muted",
     "control.bg": "color.surface.input",
     "control.focus": "color.interaction.focus.ring",
+    "button.bg": "color.action.secondary.bg",
+    "button.text": "color.action.secondary.text",
+    "button.border": "color.action.secondary.border",
+    "button.bg-hover": "color.action.secondary.hover-bg",
+    "button.bg-active": "color.action.secondary.pressed-bg",
+    "button.border-active": "color.border.active",
+    "button.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-color-code-search-current-bg": "color.code.search-current-bg",
     "dependency.role-color-code-search-current-text": "color.code.search-current-text",
@@ -109,9 +116,9 @@
     "dependency.role-color-surface-code": "color.surface.code",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-8": "space.8"
   },
   "status": {
@@ -124,13 +131,36 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
+      "color.border.disabled",
       "color.code.search-current-bg",
       "color.code.search-current-text",
       "color.code.search-match-bg",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -140,15 +170,20 @@
       "color.surface.default",
       "color.surface.input",
       "color.text.default",
+      "color.text.disabled",
       "color.text.muted",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -157,25 +192,59 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
+      "color.border.disabled",
       "color.code.search-current-bg",
       "color.code.search-current-text",
       "color.code.search-match-bg",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.primitive.alpha.transparent",
       "color.primitive.ink.0",
       "color.primitive.ink.20",
       "color.primitive.ink.28",
+      "color.primitive.ink.30",
+      "color.primitive.ink.40",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
       "color.primitive.red.150",
+      "color.primitive.red.200",
       "color.primitive.red.350",
+      "color.primitive.red.400",
+      "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
+      "color.primitive.red.850",
+      "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.600",
       "color.primitive.rose.700",
@@ -184,16 +253,23 @@
       "color.surface.code",
       "color.surface.default",
       "color.surface.input",
+      "color.text.bright",
       "color.text.default",
+      "color.text.disabled",
       "color.text.muted",
+      "color.text.on-action",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -210,6 +286,106 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.border.active": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.control": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -217,6 +393,11 @@
           "D-007"
         ]
       },
+      "color.border.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.code.search-current-bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -232,6 +413,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.disabled.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.drop-target": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -247,6 +433,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.pressed.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -292,6 +483,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.text.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.text.muted": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -302,11 +498,31 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.comfortable.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.compact.control-height": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.compact.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -322,17 +538,17 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "radius.none": {
+      "motion.duration.fast": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.12": {
+      "radius.none": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
+      "space.12": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -363,6 +579,6 @@
   "copy": {
     "directory": "copy/editor-search/",
     "manifest": "copy/editor-search/manifest.json",
-    "digest": "sha256-oRjcQaiNJcbQgPckQh0vjN6z83eBEU7mtbesGoE5HGk="
+    "digest": "sha256-QgKi5Ik6JIx1S6FIW4r5/dlBv+1Vooa/ZbYMOGxydmo="
   }
 }
diff --git a/packages/ui/dist/contracts/empty-state.json b/packages/ui/dist/contracts/empty-state.json
index 9678b5f92..54656895a 100644
--- a/packages/ui/dist/contracts/empty-state.json
+++ b/packages/ui/dist/contracts/empty-state.json
@@ -110,15 +110,34 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
       "color.action.secondary.bg",
       "color.action.secondary.border",
       "color.action.secondary.hover-bg",
       "color.action.secondary.pressed-bg",
       "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
       "color.border.active",
+      "color.border.disabled",
       "color.border.divider",
       "color.icon.decorative",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
+      "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -127,13 +146,13 @@
       "color.surface.default",
       "color.text.bright",
       "color.text.default",
+      "color.text.disabled",
       "color.text.muted",
       "density.comfortable.control-height",
       "density.comfortable.control-padding-x",
       "density.compact.control-height",
       "density.compact.control-padding-x",
       "focus.offset",
-      "focus.ring",
       "font.family.mono",
       "font.line-height.h1",
       "font.line-height.h2",
@@ -154,16 +173,34 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
       "color.action.secondary.bg",
       "color.action.secondary.border",
       "color.action.secondary.hover-bg",
       "color.action.secondary.pressed-bg",
       "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
       "color.border.active",
+      "color.border.disabled",
       "color.border.divider",
       "color.icon.decorative",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -171,13 +208,22 @@
       "color.primitive.alpha.transparent",
       "color.primitive.ink.0",
       "color.primitive.ink.28",
+      "color.primitive.ink.30",
+      "color.primitive.ink.40",
       "color.primitive.ink.60",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
       "color.primitive.red.150",
+      "color.primitive.red.200",
       "color.primitive.red.350",
+      "color.primitive.red.400",
       "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
+      "color.primitive.red.850",
+      "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.600",
       "color.primitive.rose.700",
@@ -186,13 +232,14 @@
       "color.surface.default",
       "color.text.bright",
       "color.text.default",
+      "color.text.disabled",
       "color.text.muted",
+      "color.text.on-action",
       "density.comfortable.control-height",
       "density.comfortable.control-padding-x",
       "density.compact.control-height",
       "density.compact.control-padding-x",
       "focus.offset",
-      "focus.ring",
       "font.family.mono",
       "font.line-height.h1",
       "font.line-height.h2",
@@ -221,6 +268,66 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.action.secondary.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -246,11 +353,26 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.tertiary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.active": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.border.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.divider": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -263,11 +385,31 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.disabled.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.drop-target": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.interaction.focus.ring-container": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.interaction.pressed.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -308,6 +450,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.text.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.text.muted": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -338,11 +485,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "focus.ring": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -429,6 +571,6 @@
   "copy": {
     "directory": "copy/empty-state/",
     "manifest": "copy/empty-state/manifest.json",
-    "digest": "sha256-h6FDAg6a5sS+S1za92hKQI46WLnC4dZBTi2eTWdOP+A="
+    "digest": "sha256-+coWeqOocevShbs/IcuLNwwM7Z3ICGFK79A8oheiiXo="
   }
 }
diff --git a/packages/ui/dist/contracts/error-state.json b/packages/ui/dist/contracts/error-state.json
index 970298326..b5c5c9967 100644
--- a/packages/ui/dist/contracts/error-state.json
+++ b/packages/ui/dist/contracts/error-state.json
@@ -95,7 +95,12 @@
     "root.border": "color.border.control",
     "heading.text": "color.text.bright",
     "secondary.text": "color.text.muted",
-    "control.bg": "color.surface.input",
+    "control.bg": "color.action.secondary.bg",
+    "control.text": "color.action.secondary.text",
+    "control.border": "color.action.secondary.border",
+    "control.bg-hover": "color.action.secondary.hover-bg",
+    "control.bg-active": "color.action.secondary.pressed-bg",
+    "control.border-active": "color.border.active",
     "control.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-border-width-emphasis": "border.width.emphasis",
@@ -106,9 +111,9 @@
     "dependency.role-color-text-disabled": "color.text.disabled",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-8": "space.8"
   },
   "status": {
@@ -121,11 +126,33 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
       "color.border.disabled",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -138,13 +165,17 @@
       "color.text.default",
       "color.text.disabled",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -153,42 +184,79 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
       "color.border.disabled",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.primitive.alpha.transparent",
       "color.primitive.ink.0",
       "color.primitive.ink.28",
       "color.primitive.ink.30",
+      "color.primitive.ink.40",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
+      "color.primitive.red.150",
       "color.primitive.red.200",
       "color.primitive.red.350",
+      "color.primitive.red.400",
+      "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
       "color.primitive.red.850",
       "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.700",
+      "color.primitive.rose.800",
       "color.status.danger.border",
       "color.status.danger.text",
       "color.surface.canvas",
       "color.surface.default",
       "color.surface.input",
+      "color.text.bright",
       "color.text.default",
       "color.text.disabled",
+      "color.text.on-action",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -205,6 +273,106 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.border.active": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.control": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -232,6 +400,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.focus.ring-container": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.interaction.pressed.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -292,11 +470,31 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.comfortable.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.compact.control-height": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.compact.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -312,17 +510,17 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "radius.none": {
+      "motion.duration.fast": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.12": {
+      "radius.none": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
+      "space.12": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -353,6 +551,6 @@
   "copy": {
     "directory": "copy/error-state/",
     "manifest": "copy/error-state/manifest.json",
-    "digest": "sha256-tmU/T4Skbf9Eu3//L9hqqYCXoJofZolyF9xBuaRZ/fM="
+    "digest": "sha256-JxwbDxIL6bhbIa230xaK7YZG+x1n9Zg8QFq1Ce62q7Q="
   }
 }
diff --git a/packages/ui/dist/contracts/field.json b/packages/ui/dist/contracts/field.json
index 1ed5fcb00..d4990d816 100644
--- a/packages/ui/dist/contracts/field.json
+++ b/packages/ui/dist/contracts/field.json
@@ -374,6 +374,6 @@
   "copy": {
     "directory": "copy/field/",
     "manifest": "copy/field/manifest.json",
-    "digest": "sha256-GQ3tkXxmRfI41HNyehqJhHunv4ftTZccXD8irv00Nxo="
+    "digest": "sha256-LFCmagaJ5RK5WCMosMvlvxKHUHt1uy1/8mZq88cgt9A="
   }
 }
diff --git a/packages/ui/dist/contracts/fieldset.json b/packages/ui/dist/contracts/fieldset.json
index 7e9baab91..fa25174db 100644
--- a/packages/ui/dist/contracts/fieldset.json
+++ b/packages/ui/dist/contracts/fieldset.json
@@ -98,6 +98,7 @@
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.status.danger.text",
       "color.surface.canvas",
       "color.surface.input",
       "color.text.bright",
@@ -145,11 +146,13 @@
       "color.primitive.red.200",
       "color.primitive.red.350",
       "color.primitive.red.800",
+      "color.primitive.red.850",
       "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.600",
       "color.primitive.rose.700",
       "color.primitive.rose.800",
+      "color.status.danger.text",
       "color.surface.canvas",
       "color.surface.input",
       "color.text.bright",
@@ -240,6 +243,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.status.danger.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.surface.canvas": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -366,6 +374,6 @@
   "copy": {
     "directory": "copy/fieldset/",
     "manifest": "copy/fieldset/manifest.json",
-    "digest": "sha256-2Z7hETSoJn6L/hHgchT0vJnPEZyrqjO6/vefg/ENXPk="
+    "digest": "sha256-vjDOby1AN0RSnUrP4QsHLHcfRJyUbikUNg5PG4OE66s="
   }
 }
diff --git a/packages/ui/dist/contracts/file-browser.json b/packages/ui/dist/contracts/file-browser.json
index 574dd6219..7195e754b 100644
--- a/packages/ui/dist/contracts/file-browser.json
+++ b/packages/ui/dist/contracts/file-browser.json
@@ -84,16 +84,23 @@
     "secondary.text": "color.text.muted",
     "control.bg": "color.surface.input",
     "control.focus": "color.interaction.focus.ring",
+    "button.bg": "color.action.secondary.bg",
+    "button.text": "color.action.secondary.text",
+    "button.border": "color.action.secondary.border",
+    "button.bg-hover": "color.action.secondary.hover-bg",
+    "button.bg-active": "color.action.secondary.pressed-bg",
+    "button.border-active": "color.border.active",
+    "button.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-border-width-emphasis": "border.width.emphasis",
     "dependency.role-color-border-divider": "color.border.divider",
     "dependency.role-color-border-selected-indicator": "color.border.selected-indicator",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
     "dependency.role-space-16": "space.16",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-8": "space.8"
   },
   "status": {
@@ -109,14 +116,37 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
+      "color.border.disabled",
       "color.border.divider",
       "color.border.selected-indicator",
       "color.border.strong",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.inactive-bg",
       "color.interaction.selection.inactive-text",
@@ -147,7 +177,6 @@
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -157,31 +186,61 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
+      "color.border.disabled",
       "color.border.divider",
       "color.border.selected-indicator",
       "color.border.strong",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.inactive-bg",
       "color.interaction.selection.inactive-text",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.primitive.alpha.transparent",
       "color.primitive.ink.0",
       "color.primitive.ink.28",
       "color.primitive.ink.30",
       "color.primitive.ink.40",
       "color.primitive.ink.60",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
+      "color.primitive.red.150",
+      "color.primitive.red.200",
       "color.primitive.red.350",
       "color.primitive.red.400",
       "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
+      "color.primitive.red.850",
       "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.600",
@@ -195,6 +254,7 @@
       "color.text.default",
       "color.text.disabled",
       "color.text.muted",
+      "color.text.on-action",
       "density.comfortable.control-height",
       "density.comfortable.control-padding-x",
       "density.comfortable.row-height",
@@ -211,7 +271,6 @@
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -229,6 +288,106 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.border.active": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.control": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -236,6 +395,11 @@
           "D-007"
         ]
       },
+      "color.border.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.divider": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -253,6 +417,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.disabled.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.drop-target": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -273,6 +442,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.pressed.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -423,11 +597,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.32": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -459,6 +628,6 @@
   "copy": {
     "directory": "copy/file-browser/",
     "manifest": "copy/file-browser/manifest.json",
-    "digest": "sha256-ega8f7vafG5gKtOcw4Aole+jb7E5C7xB7jZhdJWN0bQ="
+    "digest": "sha256-zktP/nyG1VyLCn4r8rZs7H8IW/V4rWVynrIABSSFKoY="
   }
 }
diff --git a/packages/ui/dist/contracts/file-input.json b/packages/ui/dist/contracts/file-input.json
index c876c0085..60c23f3c8 100644
--- a/packages/ui/dist/contracts/file-input.json
+++ b/packages/ui/dist/contracts/file-input.json
@@ -133,7 +133,18 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
       "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
       "color.action.secondary.bg",
       "color.action.secondary.border",
       "color.action.secondary.hover-bg",
@@ -147,6 +158,7 @@
       "color.border.divider",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
+      "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
       "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
@@ -156,6 +168,7 @@
       "color.status.danger.border",
       "color.status.danger.text",
       "color.surface.canvas",
+      "color.surface.input",
       "color.text.bright",
       "color.text.default",
       "color.text.disabled",
@@ -186,7 +199,18 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
       "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
       "color.action.secondary.bg",
       "color.action.secondary.border",
       "color.action.secondary.hover-bg",
@@ -212,12 +236,16 @@
       "color.primitive.ink.30",
       "color.primitive.ink.40",
       "color.primitive.ink.60",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
       "color.primitive.red.150",
       "color.primitive.red.200",
       "color.primitive.red.350",
+      "color.primitive.red.400",
       "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
       "color.primitive.red.850",
       "color.primitive.rose.300",
@@ -229,10 +257,12 @@
       "color.status.danger.border",
       "color.status.danger.text",
       "color.surface.canvas",
+      "color.surface.input",
       "color.text.bright",
       "color.text.default",
       "color.text.disabled",
       "color.text.muted",
+      "color.text.on-action",
       "color.text.subtle",
       "density.comfortable.control-height",
       "density.comfortable.control-padding-x",
@@ -267,11 +297,66 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.action.primary.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.action.secondary.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -341,6 +426,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.focus.ring-container": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -386,6 +476,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.surface.input": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.text.bright": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -522,6 +617,6 @@
   "copy": {
     "directory": "copy/file-input/",
     "manifest": "copy/file-input/manifest.json",
-    "digest": "sha256-TKiC1mhiYH8D1y50C5ACpP4Lz10Z3xCa4GxvUdkDEnw="
+    "digest": "sha256-X08YRjuyyMs/lhABC8jyT6hAh4AhRXBy9nRCGzLest8="
   }
 }
diff --git a/packages/ui/dist/contracts/filterable-table.json b/packages/ui/dist/contracts/filterable-table.json
index 1b45785bd..349dae71d 100644
--- a/packages/ui/dist/contracts/filterable-table.json
+++ b/packages/ui/dist/contracts/filterable-table.json
@@ -220,7 +220,6 @@
       "density.compact.icon",
       "density.compact.row-height",
       "focus.offset",
-      "focus.offset-container",
       "focus.offset-invalid",
       "focus.ring",
       "focus.ring-container",
@@ -322,7 +321,6 @@
       "density.compact.icon",
       "density.compact.row-height",
       "focus.offset",
-      "focus.offset-container",
       "focus.offset-invalid",
       "focus.ring",
       "focus.ring-container",
@@ -625,11 +623,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "focus.offset-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "focus.offset-invalid": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -756,6 +749,6 @@
   "copy": {
     "directory": "copy/filterable-table/",
     "manifest": "copy/filterable-table/manifest.json",
-    "digest": "sha256-tE2lTsJjQH6ZBaYTO4TyapuKMSc19KHg0ode/N3j828="
+    "digest": "sha256-2S7hP420pJdNmeeJUc9IqsTnpSHptV2aRy3IL9jjvtQ="
   }
 }
diff --git a/packages/ui/dist/contracts/form-builder.json b/packages/ui/dist/contracts/form-builder.json
index f0edbd340..e68fe10a3 100644
--- a/packages/ui/dist/contracts/form-builder.json
+++ b/packages/ui/dist/contracts/form-builder.json
@@ -878,6 +878,6 @@
   "copy": {
     "directory": "copy/form-builder/",
     "manifest": "copy/form-builder/manifest.json",
-    "digest": "sha256-aoSpEA6qVQhF0JI5HP7ycm4UbGmG+ya3B7tt1wA5RnE="
+    "digest": "sha256-4eN/Ayvb9g/4CHDNRnxDuFj2QMloNoJZ7DigYbCeyW0="
   }
 }
diff --git a/packages/ui/dist/contracts/i3-window-frame.json b/packages/ui/dist/contracts/i3-window-frame.json
index 9aacc3053..ef976d71e 100644
--- a/packages/ui/dist/contracts/i3-window-frame.json
+++ b/packages/ui/dist/contracts/i3-window-frame.json
@@ -96,7 +96,7 @@
     "workspace.selected-text": "color.interaction.selection.text",
     "workspace.bg-hover": "color.interaction.hover.bg",
     "workspace.ring": "color.interaction.focus.ring",
-    "workspace.ring-on-selection": "color.interaction.focus.ring-container",
+    "workspace.ring-on-selection": "color.interaction.focus.ring",
     "workspace.urgent-bg": "color.status.danger.fill",
     "workspace.urgent-text": "color.status.danger.on-fill",
     "status.separator": "color.text.muted",
@@ -168,7 +168,7 @@
       "color.code.whitespace",
       "color.icon.decorative",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring-container",
+      "color.interaction.focus.ring",
       "color.interaction.hover.bg",
       "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
@@ -591,7 +591,7 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring-container": {
+      "color.interaction.focus.ring": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -962,6 +962,6 @@
   "copy": {
     "directory": "copy/i3-window-frame/",
     "manifest": "copy/i3-window-frame/manifest.json",
-    "digest": "sha256-SQObA3CbBJSibf9fY3JRlURdH9FXLA7SfbAElKJ+pPs="
+    "digest": "sha256-RTBwBQLyeV3Z3yztEOFvw2Hk3dWF9jDPNGkIMo8j4MM="
   }
 }
diff --git a/packages/ui/dist/contracts/icon-button.json b/packages/ui/dist/contracts/icon-button.json
index cccb03bf9..0a97dbb60 100644
--- a/packages/ui/dist/contracts/icon-button.json
+++ b/packages/ui/dist/contracts/icon-button.json
@@ -96,7 +96,7 @@
     "root.bg-toggled": "color.interaction.selection.bg",
     "root.text-toggled": "color.interaction.selection.text",
     "root.border-toggled": "color.border.selected-indicator",
-    "root.ring-toggled": "color.interaction.focus.ring-container",
+    "root.ring-toggled": "color.interaction.focus.ring",
     "root.text-disabled": "color.text.disabled",
     "root.bg-disabled": "color.interaction.disabled.bg",
     "root.border-disabled": "color.border.disabled",
@@ -120,7 +120,6 @@
       "color.border.selected-indicator",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring-container",
       "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
@@ -156,7 +155,6 @@
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.focus.ring-container",
       "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
@@ -174,7 +172,6 @@
       "color.primitive.red.800",
       "color.primitive.rose.300",
       "color.primitive.rose.700",
-      "color.primitive.rose.800",
       "color.surface.canvas",
       "color.text.default",
       "color.text.disabled",
@@ -244,11 +241,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.pressed.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -365,6 +357,6 @@
   "copy": {
     "directory": "copy/icon-button/",
     "manifest": "copy/icon-button/manifest.json",
-    "digest": "sha256-Yq0utAFthUSAFiDa7lcg55cQhUdK+H2LnBgt5a/6/C0="
+    "digest": "sha256-PtLPNMTcOcV3bfqclq1ktR8kldC1sdwlqBmiOf0F3a4="
   }
 }
diff --git a/packages/ui/dist/contracts/kbd.json b/packages/ui/dist/contracts/kbd.json
index 2120df11a..53f8ba296 100644
--- a/packages/ui/dist/contracts/kbd.json
+++ b/packages/ui/dist/contracts/kbd.json
@@ -74,6 +74,7 @@
     "control.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-border-width-emphasis": "border.width.emphasis",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
     "dependency.role-space-2": "space.2",
@@ -91,7 +92,6 @@
       "border.width.emphasis",
       "color.border.control",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -99,6 +99,8 @@
       "color.surface.canvas",
       "color.surface.default",
       "color.text.default",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
@@ -130,6 +132,8 @@
       "color.surface.canvas",
       "color.surface.default",
       "color.text.default",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
@@ -163,11 +167,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -203,6 +202,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -254,6 +263,6 @@
   "copy": {
     "directory": "copy/kbd/",
     "manifest": "copy/kbd/manifest.json",
-    "digest": "sha256-T+bUtWMpGiYAfACd3t+B2UJX8FK3BzlfN5i/tTOryoY="
+    "digest": "sha256-ZdQzusLaQI1eqBEb0KGCyUE3p/OohnnnziGlDVCsF30="
   }
 }
diff --git a/packages/ui/dist/contracts/link.json b/packages/ui/dist/contracts/link.json
index 48544b8d3..02b37a46e 100644
--- a/packages/ui/dist/contracts/link.json
+++ b/packages/ui/dist/contracts/link.json
@@ -83,7 +83,7 @@
     "root.text": "color.text.link",
     "root.underline": "color.text.link-underline",
     "root.text-hover": "color.text.link-hover",
-    "root.bg-hover": "color.interaction.hover.bg-strong",
+    "root.bg-hover": "color.interaction.hover.bg",
     "root.ring": "color.interaction.focus.ring",
     "root.text-visited": "color.text.link",
     "root.text-current": "color.text.bright",
@@ -102,7 +102,7 @@
       "border.width.emphasis",
       "color.border.selected-indicator",
       "color.interaction.drop-target",
-      "color.interaction.hover.bg-strong",
+      "color.interaction.hover.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -134,15 +134,15 @@
       "color.border.selected-indicator",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.hover.bg-strong",
+      "color.interaction.hover.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
       "color.primitive.ink.0",
+      "color.primitive.ink.40",
       "color.primitive.paper.90",
       "color.primitive.red.100",
-      "color.primitive.red.150",
       "color.primitive.red.350",
       "color.primitive.red.750",
       "color.primitive.red.800",
@@ -191,7 +191,7 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.hover.bg-strong": {
+      "color.interaction.hover.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -322,6 +322,6 @@
   "copy": {
     "directory": "copy/link/",
     "manifest": "copy/link/manifest.json",
-    "digest": "sha256-VtFCGcmp+kAitC5o4ewjNT824WaoxY3/igfHlJhH0uA="
+    "digest": "sha256-b0MFB2qvm1o9aggqaNrXAQBeleOiTekucpU8MsTxdK8="
   }
 }
diff --git a/packages/ui/dist/contracts/list.json b/packages/ui/dist/contracts/list.json
index b34a4fd75..7c10f5261 100644
--- a/packages/ui/dist/contracts/list.json
+++ b/packages/ui/dist/contracts/list.json
@@ -91,7 +91,7 @@
     "row.text-disabled": "color.text.disabled",
     "selected.bg": "color.interaction.selection.bg",
     "selected.text": "color.interaction.selection.text",
-    "selected.ring": "color.interaction.focus.ring-container",
+    "selected.ring": "color.interaction.focus.ring",
     "selected.inactive-bg": "color.interaction.selection.inactive-bg",
     "selected.inactive-text": "color.interaction.selection.inactive-text",
     "check.glyph": "color.interaction.selection.text",
@@ -110,7 +110,6 @@
       "color.border.control",
       "color.border.divider",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.inactive-bg",
@@ -152,7 +151,6 @@
       "color.border.divider",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.inactive-bg",
@@ -173,7 +171,6 @@
       "color.primitive.rose.350",
       "color.primitive.rose.600",
       "color.primitive.rose.700",
-      "color.primitive.rose.800",
       "color.surface.canvas",
       "color.surface.default",
       "color.text.default",
@@ -231,11 +228,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.hover.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -407,6 +399,6 @@
   "copy": {
     "directory": "copy/list/",
     "manifest": "copy/list/manifest.json",
-    "digest": "sha256-QvzckZWIiDE/ImHAN4r4S19GgKtTUSk1eHxUqy+pyXQ="
+    "digest": "sha256-21rppk20HlB53c9O71xPkVP4mw04fFxgx1lGu5DD0cM="
   }
 }
diff --git a/packages/ui/dist/contracts/loading-indicator.json b/packages/ui/dist/contracts/loading-indicator.json
index b65fec11e..ebfb009bc 100644
--- a/packages/ui/dist/contracts/loading-indicator.json
+++ b/packages/ui/dist/contracts/loading-indicator.json
@@ -286,6 +286,6 @@
   "copy": {
     "directory": "copy/loading-indicator/",
     "manifest": "copy/loading-indicator/manifest.json",
-    "digest": "sha256-Z6/RoN7WPNcBLssWQ87bGJZ78aTSUa9ZuXMYDROZNus="
+    "digest": "sha256-cP+54saIGncnKG1Boc+Akr3YR79g3QhGamC6uIhbxPU="
   }
 }
diff --git a/packages/ui/dist/contracts/menu.json b/packages/ui/dist/contracts/menu.json
index d8ea3a223..c5d70de88 100644
--- a/packages/ui/dist/contracts/menu.json
+++ b/packages/ui/dist/contracts/menu.json
@@ -121,7 +121,7 @@
     "item.text-disabled": "color.text.disabled",
     "active.bg": "color.interaction.selection.bg",
     "active.text": "color.interaction.selection.text",
-    "active.ring": "color.interaction.focus.ring-container",
+    "active.ring": "color.interaction.focus.ring",
     "check.glyph": "color.text.bright",
     "shortcut.text": "color.text.muted",
     "separator.color": "color.border.divider",
@@ -169,9 +169,7 @@
       "density.compact.icon",
       "density.compact.row-height",
       "focus.offset",
-      "focus.offset-container",
       "focus.ring",
-      "focus.ring-container",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.line-height.ui-sm",
@@ -200,7 +198,6 @@
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.hover.bg-strong",
       "color.interaction.pressed.bg",
@@ -242,9 +239,7 @@
       "density.compact.icon",
       "density.compact.row-height",
       "focus.offset",
-      "focus.offset-container",
       "focus.ring",
-      "focus.ring-container",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.line-height.ui-sm",
@@ -438,21 +433,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "focus.offset-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "focus.ring": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "focus.ring-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -534,6 +519,6 @@
   "copy": {
     "directory": "copy/menu/",
     "manifest": "copy/menu/manifest.json",
-    "digest": "sha256-YWF7LtF4Y/ZgN5otpkiIBHeQDPn8kKw129WvyZSELhs="
+    "digest": "sha256-9NHbdHafr9UwBLqJLF5ddS041hMKBftk16inMfQXuP4="
   }
 }
diff --git a/packages/ui/dist/contracts/multiselect.json b/packages/ui/dist/contracts/multiselect.json
index df0ae73c3..0f8bf3c1f 100644
--- a/packages/ui/dist/contracts/multiselect.json
+++ b/packages/ui/dist/contracts/multiselect.json
@@ -94,6 +94,13 @@
     "secondary.text": "color.text.muted",
     "control.bg": "color.surface.input",
     "control.focus": "color.interaction.focus.ring",
+    "button.bg": "color.action.secondary.bg",
+    "button.text": "color.action.secondary.text",
+    "button.border": "color.action.secondary.border",
+    "button.bg-hover": "color.action.secondary.hover-bg",
+    "button.bg-active": "color.action.secondary.pressed-bg",
+    "button.border-active": "color.border.active",
+    "button.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-border-width-emphasis": "border.width.emphasis",
     "dependency.role-color-action-primary-bg": "color.action.primary.bg",
@@ -135,9 +142,25 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
       "color.action.primary.bg",
+      "color.action.primary.border",
       "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
       "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
       "color.border.active",
       "color.border.control",
       "color.border.disabled",
@@ -146,6 +169,7 @@
       "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -160,8 +184,10 @@
       "color.text.disabled",
       "color.text.muted",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.comfortable.icon",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
       "density.compact.icon",
       "focus.offset",
       "focus.ring",
@@ -172,6 +198,7 @@
       "font.size.caption",
       "font.size.ui-md",
       "font.size.ui-sm",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
       "space.2",
@@ -184,9 +211,25 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
       "color.action.primary.bg",
+      "color.action.primary.border",
       "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
       "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
       "color.border.active",
       "color.border.control",
       "color.border.disabled",
@@ -195,18 +238,26 @@
       "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.primitive.alpha.transparent",
       "color.primitive.ink.0",
       "color.primitive.ink.28",
       "color.primitive.ink.30",
       "color.primitive.ink.40",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
+      "color.primitive.red.150",
       "color.primitive.red.200",
       "color.primitive.red.350",
+      "color.primitive.red.400",
+      "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
       "color.primitive.red.850",
       "color.primitive.rose.300",
@@ -225,8 +276,10 @@
       "color.text.muted",
       "color.text.on-action",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.comfortable.icon",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
       "density.compact.icon",
       "focus.offset",
       "focus.ring",
@@ -237,6 +290,7 @@
       "font.size.caption",
       "font.size.ui-md",
       "font.size.ui-sm",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
       "space.2",
@@ -257,21 +311,101 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.action.primary.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.action.primary.hover-bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.action.primary.text": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.secondary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.active": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -314,6 +448,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.pressed.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -384,6 +523,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.comfortable.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.comfortable.icon": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -394,6 +538,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.compact.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.compact.icon": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -444,6 +593,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "motion.duration.fast": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "radius.none": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -490,6 +644,6 @@
   "copy": {
     "directory": "copy/multiselect/",
     "manifest": "copy/multiselect/manifest.json",
-    "digest": "sha256-O1IjRfwEZvhLWVLk3LK9TIML1tL3gVj3my8BX/zwegw="
+    "digest": "sha256-JO0I7l2R7lmALfslDFelOHRv+78GSN5i+QKxxHtGjqo="
   }
 }
diff --git a/packages/ui/dist/contracts/number-field.json b/packages/ui/dist/contracts/number-field.json
index 5989cfddd..c01927604 100644
--- a/packages/ui/dist/contracts/number-field.json
+++ b/packages/ui/dist/contracts/number-field.json
@@ -608,6 +608,6 @@
   "copy": {
     "directory": "copy/number-field/",
     "manifest": "copy/number-field/manifest.json",
-    "digest": "sha256-hegLu++sUwG/DMW8Hg7cZrcebrq4rTNvBxMl75+x2dQ="
+    "digest": "sha256-bldw1onB88sfmhNs6anlA/PD4j9IKl6aOkPzlAbg1Hc="
   }
 }
diff --git a/packages/ui/dist/contracts/pagination.json b/packages/ui/dist/contracts/pagination.json
index f3e0bac5e..28c178bc0 100644
--- a/packages/ui/dist/contracts/pagination.json
+++ b/packages/ui/dist/contracts/pagination.json
@@ -96,7 +96,7 @@
     "link.text-disabled": "color.text.disabled",
     "current.bg": "color.interaction.selection.bg",
     "current.text": "color.text.on-selection",
-    "current.ring": "color.interaction.focus.ring-container",
+    "current.ring": "color.interaction.focus.ring",
     "gap.text": "color.text.muted",
     "status.text": "color.text.default",
     "status.emphasis": "color.text.bright"
@@ -111,7 +111,7 @@
     "roles": [
       "border.width.emphasis",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring-container",
+      "color.interaction.focus.ring",
       "color.interaction.hover.bg",
       "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
@@ -150,7 +150,6 @@
       "border.width.emphasis",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
@@ -207,7 +206,7 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring-container": {
+      "color.interaction.focus.ring": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -378,6 +377,6 @@
   "copy": {
     "directory": "copy/pagination/",
     "manifest": "copy/pagination/manifest.json",
-    "digest": "sha256-60r+aCzqs2VJdTf9woMF9hv5KthQuTRbZ7iM38aKMBI="
+    "digest": "sha256-zDt5OOHa/vu0wBtxh8xWe8JSXUu8J/5evpDRTFQQBps="
   }
 }
diff --git a/packages/ui/dist/contracts/popover.json b/packages/ui/dist/contracts/popover.json
index c4a1083fd..4afc42369 100644
--- a/packages/ui/dist/contracts/popover.json
+++ b/packages/ui/dist/contracts/popover.json
@@ -96,17 +96,22 @@
     "root.border": "color.border.control",
     "heading.text": "color.text.bright",
     "secondary.text": "color.text.muted",
-    "control.bg": "color.surface.input",
+    "control.bg": "color.action.secondary.bg",
+    "control.text": "color.action.secondary.text",
+    "control.border": "color.action.secondary.border",
+    "control.bg-hover": "color.action.secondary.hover-bg",
+    "control.bg-active": "color.action.secondary.pressed-bg",
+    "control.border-active": "color.border.active",
     "control.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-color-border-overlay": "color.border.overlay",
     "dependency.role-color-surface-overlay": "color.surface.overlay",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
     "dependency.role-space-16": "space.16",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-8": "space.8"
   },
   "status": {
@@ -119,10 +124,34 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
+      "color.border.disabled",
       "color.border.overlay",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -132,15 +161,20 @@
       "color.surface.input",
       "color.surface.overlay",
       "color.text.default",
+      "color.text.disabled",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -149,37 +183,81 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
+      "color.border.disabled",
       "color.border.overlay",
+      "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.primitive.alpha.transparent",
       "color.primitive.ink.0",
       "color.primitive.ink.28",
+      "color.primitive.ink.30",
+      "color.primitive.ink.40",
       "color.primitive.ink.52",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
+      "color.primitive.red.150",
+      "color.primitive.red.200",
       "color.primitive.red.350",
+      "color.primitive.red.400",
+      "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
+      "color.primitive.red.850",
+      "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.700",
+      "color.primitive.rose.800",
       "color.surface.canvas",
       "color.surface.default",
       "color.surface.input",
       "color.surface.overlay",
+      "color.text.bright",
       "color.text.default",
+      "color.text.disabled",
+      "color.text.on-action",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -196,6 +274,106 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.border.active": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.control": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -203,6 +381,11 @@
           "D-007"
         ]
       },
+      "color.border.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.overlay": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -210,6 +393,11 @@
           "D-008"
         ]
       },
+      "color.interaction.disabled.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.drop-target": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -220,6 +408,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.focus.ring-container": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.interaction.pressed.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -265,16 +463,41 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.text.disabled": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.comfortable.control-height": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.comfortable.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.compact.control-height": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.compact.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -290,22 +513,22 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "radius.none": {
+      "motion.duration.fast": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.12": {
+      "radius.none": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.16": {
+      "space.12": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
+      "space.16": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -336,6 +559,6 @@
   "copy": {
     "directory": "copy/popover/",
     "manifest": "copy/popover/manifest.json",
-    "digest": "sha256-cbFFGYigmfXCHWbnqp7UDh18ygoUiqUWr96ofsWEhDM="
+    "digest": "sha256-vLSWeJ0wMVfl/GLXwjSKBXs+QwU7ThdTkO5JaqXyML8="
   }
 }
diff --git a/packages/ui/dist/contracts/progress.json b/packages/ui/dist/contracts/progress.json
index c36f0acdb..f75882695 100644
--- a/packages/ui/dist/contracts/progress.json
+++ b/packages/ui/dist/contracts/progress.json
@@ -298,6 +298,6 @@
   "copy": {
     "directory": "copy/progress/",
     "manifest": "copy/progress/manifest.json",
-    "digest": "sha256-1b2q82GAM6aew7BrlzqLA7+ZV6dnlY7OpesY4DV0bOc="
+    "digest": "sha256-JK2iNGnh1IThiaBBVY470y+/lPgXXy7aOJvAGd7Rlcg="
   }
 }
diff --git a/packages/ui/dist/contracts/radio-group.json b/packages/ui/dist/contracts/radio-group.json
index 15c73317d..35219e6eb 100644
--- a/packages/ui/dist/contracts/radio-group.json
+++ b/packages/ui/dist/contracts/radio-group.json
@@ -125,7 +125,10 @@
       "color.text.bright",
       "color.text.default",
       "color.text.disabled",
+      "color.text.muted",
+      "density.comfortable.control-height",
       "density.comfortable.icon",
+      "density.compact.control-height",
       "density.compact.icon",
       "focus.offset",
       "focus.ring",
@@ -170,6 +173,7 @@
       "color.primitive.red.850",
       "color.primitive.rose.300",
       "color.primitive.rose.350",
+      "color.primitive.rose.600",
       "color.primitive.rose.700",
       "color.primitive.rose.800",
       "color.status.danger.border",
@@ -179,8 +183,11 @@
       "color.text.bright",
       "color.text.default",
       "color.text.disabled",
+      "color.text.muted",
       "color.text.on-action",
+      "density.comfortable.control-height",
       "density.comfortable.icon",
+      "density.compact.control-height",
       "density.compact.icon",
       "focus.offset",
       "focus.ring",
@@ -310,11 +317,26 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.text.muted": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "density.comfortable.control-height": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.comfortable.icon": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.compact.control-height": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.compact.icon": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -396,6 +418,6 @@
   "copy": {
     "directory": "copy/radio-group/",
     "manifest": "copy/radio-group/manifest.json",
-    "digest": "sha256-PRTi1+IXRrKIG+iq5rBiBKtFzpsGeQG5/f/16lYpmCw="
+    "digest": "sha256-1LRuVLdz4Be5bPbEaxfo+lZHHjUS9sAWxg1BqbK1c3Y="
   }
 }
diff --git a/packages/ui/dist/contracts/range.json b/packages/ui/dist/contracts/range.json
index 9cd7eb255..9d4f49736 100644
--- a/packages/ui/dist/contracts/range.json
+++ b/packages/ui/dist/contracts/range.json
@@ -153,6 +153,7 @@
     "dependency.role-color-text-disabled": "color.text.disabled",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
     "dependency.role-space-2": "space.2",
@@ -177,7 +178,6 @@
       "color.border.selected-indicator",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring",
       "color.interaction.hover.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
@@ -350,11 +350,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.hover.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -556,6 +551,6 @@
   "copy": {
     "directory": "copy/range/",
     "manifest": "copy/range/manifest.json",
-    "digest": "sha256-83FLaBofKJVFXrLxvl++gdymve8PpMF4DiKOiX0/ZNA="
+    "digest": "sha256-fHyq5yxlVPUJAia5dDQw2XSMiqzkabED9NCkkaQYwAw="
   }
 }
diff --git a/packages/ui/dist/contracts/repeater.json b/packages/ui/dist/contracts/repeater.json
index 593083b71..37e1d5a2e 100644
--- a/packages/ui/dist/contracts/repeater.json
+++ b/packages/ui/dist/contracts/repeater.json
@@ -107,15 +107,22 @@
     "secondary.text": "color.text.muted",
     "control.bg": "color.surface.input",
     "control.focus": "color.interaction.focus.ring",
+    "button.bg": "color.action.secondary.bg",
+    "button.text": "color.action.secondary.text",
+    "button.border": "color.action.secondary.border",
+    "button.bg-hover": "color.action.secondary.hover-bg",
+    "button.bg-active": "color.action.secondary.pressed-bg",
+    "button.border-active": "color.border.active",
+    "button.focus": "color.interaction.focus.ring",
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-color-border-disabled": "color.border.disabled",
     "dependency.role-color-interaction-disabled-bg": "color.interaction.disabled.bg",
     "dependency.role-color-text-disabled": "color.text.disabled",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-24": "space.24",
     "dependency.role-space-8": "space.8"
   },
@@ -129,11 +136,33 @@
     "roles": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
       "color.border.disabled",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -145,13 +174,17 @@
       "color.text.disabled",
       "color.text.muted",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
-      "space.2",
       "space.24",
       "space.32",
       "space.4",
@@ -161,41 +194,79 @@
     "paths": [
       "border.width.default",
       "border.width.emphasis",
+      "color.action.destructive.border",
+      "color.action.destructive.filled-bg",
+      "color.action.destructive.filled-text",
+      "color.action.destructive.hover-bg",
+      "color.action.destructive.hover-text",
+      "color.action.destructive.pressed-bg",
+      "color.action.destructive.text",
+      "color.action.primary.bg",
+      "color.action.primary.border",
+      "color.action.primary.hover-bg",
+      "color.action.primary.pressed-bg",
+      "color.action.primary.text",
+      "color.action.secondary.bg",
+      "color.action.secondary.border",
+      "color.action.secondary.hover-bg",
+      "color.action.secondary.pressed-bg",
+      "color.action.secondary.text",
+      "color.action.tertiary.hover-bg",
+      "color.action.tertiary.text",
+      "color.border.active",
       "color.border.control",
       "color.border.disabled",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
+      "color.interaction.focus.ring-container",
+      "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.primitive.alpha.transparent",
       "color.primitive.ink.0",
       "color.primitive.ink.28",
       "color.primitive.ink.30",
+      "color.primitive.ink.40",
+      "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
+      "color.primitive.red.150",
       "color.primitive.red.200",
       "color.primitive.red.350",
+      "color.primitive.red.400",
+      "color.primitive.red.50",
+      "color.primitive.red.550",
+      "color.primitive.red.750",
       "color.primitive.red.800",
+      "color.primitive.red.850",
       "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.600",
       "color.primitive.rose.700",
+      "color.primitive.rose.800",
       "color.surface.canvas",
       "color.surface.default",
       "color.surface.input",
+      "color.text.bright",
       "color.text.default",
       "color.text.disabled",
       "color.text.muted",
+      "color.text.on-action",
       "density.comfortable.control-height",
+      "density.comfortable.control-padding-x",
       "density.compact.control-height",
+      "density.compact.control-padding-x",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
+      "motion.duration.fast",
       "radius.none",
       "space.12",
-      "space.2",
       "space.24",
       "space.32",
       "space.4",
@@ -213,6 +284,106 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.action.destructive.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.filled-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.hover-text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.destructive.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.primary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.border": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.pressed-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.secondary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.hover-bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.action.tertiary.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.border.active": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.border.control": {
         "action": "use-and-report",
         "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -240,6 +411,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.interaction.focus.ring-container": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "color.interaction.pressed.bg": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -295,11 +476,31 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.comfortable.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.compact.control-height": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "density.compact.control-padding-x": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -315,17 +516,17 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "radius.none": {
+      "motion.duration.fast": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.12": {
+      "radius.none": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
+      "space.12": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -361,6 +562,6 @@
   "copy": {
     "directory": "copy/repeater/",
     "manifest": "copy/repeater/manifest.json",
-    "digest": "sha256-iMtAouXvHNiZEeyxqGOPIX4ptGvUNPZrhPw3akRSvYE="
+    "digest": "sha256-P8lkMtyJPbMWrv+ToSQl2uSJvB45XkEbaJEwGS4Icrw="
   }
 }
diff --git a/packages/ui/dist/contracts/search-field.json b/packages/ui/dist/contracts/search-field.json
index b3342e12d..6ece2a353 100644
--- a/packages/ui/dist/contracts/search-field.json
+++ b/packages/ui/dist/contracts/search-field.json
@@ -195,6 +195,7 @@
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
       "color.interaction.text-selection.text",
+      "color.status.danger.text",
       "color.surface.canvas",
       "color.surface.input",
       "color.text.bright",
@@ -246,11 +247,13 @@
       "color.primitive.red.200",
       "color.primitive.red.350",
       "color.primitive.red.800",
+      "color.primitive.red.850",
       "color.primitive.rose.300",
       "color.primitive.rose.350",
       "color.primitive.rose.600",
       "color.primitive.rose.700",
       "color.primitive.rose.800",
+      "color.status.danger.text",
       "color.surface.canvas",
       "color.surface.input",
       "color.text.bright",
@@ -363,6 +366,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.status.danger.text": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "color.surface.canvas": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -484,6 +492,6 @@
   "copy": {
     "directory": "copy/search-field/",
     "manifest": "copy/search-field/manifest.json",
-    "digest": "sha256-yt6YbOXtYkZ8+8jd4AuPMSJrWIkpD5DYzBPylnpK5v4="
+    "digest": "sha256-MlEA1O4jbGz2/0lXtYTXRhzue/GO0CRrdRQUyq10ZFg="
   }
 }
diff --git a/packages/ui/dist/contracts/segmented-control.json b/packages/ui/dist/contracts/segmented-control.json
index f6d88b599..369bbe8cd 100644
--- a/packages/ui/dist/contracts/segmented-control.json
+++ b/packages/ui/dist/contracts/segmented-control.json
@@ -101,7 +101,6 @@
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
     "dependency.role-space-16": "space.16",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-24": "space.24",
     "dependency.role-space-4": "space.4",
     "dependency.role-space-8": "space.8"
@@ -125,7 +124,6 @@
       "color.border.disabled",
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring",
       "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.selection.bg",
@@ -140,6 +138,7 @@
       "color.text.bright",
       "color.text.default",
       "color.text.disabled",
+      "color.text.muted",
       "density.comfortable.control-height",
       "density.comfortable.icon",
       "density.compact.control-height",
@@ -154,7 +153,6 @@
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.24",
       "space.32",
       "space.4",
@@ -190,6 +188,7 @@
       "color.primitive.red.850",
       "color.primitive.rose.300",
       "color.primitive.rose.350",
+      "color.primitive.rose.600",
       "color.primitive.rose.700",
       "color.primitive.rose.800",
       "color.status.danger.border",
@@ -200,6 +199,7 @@
       "color.text.bright",
       "color.text.default",
       "color.text.disabled",
+      "color.text.muted",
       "color.text.on-action",
       "density.comfortable.control-height",
       "density.comfortable.icon",
@@ -215,7 +215,6 @@
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.24",
       "space.32",
       "space.4",
@@ -270,11 +269,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.focus.ring-container": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -345,6 +339,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "color.text.muted": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "density.comfortable.control-height": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -415,11 +414,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.24": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -451,6 +445,6 @@
   "copy": {
     "directory": "copy/segmented-control/",
     "manifest": "copy/segmented-control/manifest.json",
-    "digest": "sha256-gpupFMlyzlByXEuOUk8kQDsQs4jv/kIEQOZAiz6zMgQ="
+    "digest": "sha256-U8QmrR6N2BeyWJK8mugWaa5YUyIDeprteAt3NLlb4o8="
   }
 }
diff --git a/packages/ui/dist/contracts/select.json b/packages/ui/dist/contracts/select.json
index 3f32c199e..67d336b06 100644
--- a/packages/ui/dist/contracts/select.json
+++ b/packages/ui/dist/contracts/select.json
@@ -607,6 +607,6 @@
   "copy": {
     "directory": "copy/select/",
     "manifest": "copy/select/manifest.json",
-    "digest": "sha256-Y1NfQmSIof6fmELT3rkfGZDSCBfjNPDEpyzctLVkgHI="
+    "digest": "sha256-X8ClgBgnj81zkUxVchrAKunE4At1HgKWTlGhDnBa0PA="
   }
 }
diff --git a/packages/ui/dist/contracts/settings-panel.json b/packages/ui/dist/contracts/settings-panel.json
index 6126a982f..921d75f83 100644
--- a/packages/ui/dist/contracts/settings-panel.json
+++ b/packages/ui/dist/contracts/settings-panel.json
@@ -817,6 +817,6 @@
   "copy": {
     "directory": "copy/settings-panel/",
     "manifest": "copy/settings-panel/manifest.json",
-    "digest": "sha256-pyfwmrg9NQ+SMVaMISW1+5BGdWSdQ6Ai43LdqNGYwmQ="
+    "digest": "sha256-WJU4OzQNvp6mP478QOWt8+2mRaVVTuyZocEvRs8BcxQ="
   }
 }
diff --git a/packages/ui/dist/contracts/sidebar-nav.json b/packages/ui/dist/contracts/sidebar-nav.json
index ff4ef4e71..4bd89614d 100644
--- a/packages/ui/dist/contracts/sidebar-nav.json
+++ b/packages/ui/dist/contracts/sidebar-nav.json
@@ -107,7 +107,7 @@
     "current.text": "color.text.bright",
     "selected.bg": "color.interaction.selection.bg",
     "selected.text": "color.interaction.selection.text",
-    "selected.ring": "color.interaction.focus.ring-container",
+    "selected.ring": "color.interaction.focus.ring",
     "selected.inactive-bg": "color.interaction.selection.inactive-bg",
     "selected.inactive-text": "color.interaction.selection.inactive-text",
     "icon.stroke": "color.icon.default",
@@ -128,7 +128,7 @@
       "color.icon.decorative",
       "color.icon.default",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring-container",
+      "color.interaction.focus.ring",
       "color.interaction.hover.bg",
       "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
@@ -171,7 +171,6 @@
       "color.icon.default",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.pressed.bg",
       "color.interaction.selection.bg",
@@ -255,7 +254,7 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring-container": {
+      "color.interaction.focus.ring": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -426,6 +425,6 @@
   "copy": {
     "directory": "copy/sidebar-nav/",
     "manifest": "copy/sidebar-nav/manifest.json",
-    "digest": "sha256-Rl7kfHhDzahs2E5iAw6o2u7UNqJAiayqCZn3A2ag9D4="
+    "digest": "sha256-Li6ZjxbsR1RxT5R9/zKwHLZTyxTunFX9jqRIrU0QFb8="
   }
 }
diff --git a/packages/ui/dist/contracts/skeleton.json b/packages/ui/dist/contracts/skeleton.json
index b77646b56..bb54855ca 100644
--- a/packages/ui/dist/contracts/skeleton.json
+++ b/packages/ui/dist/contracts/skeleton.json
@@ -77,10 +77,10 @@
     "dependency.role-border-width-default": "border.width.default",
     "dependency.role-color-border-divider": "color.border.divider",
     "dependency.role-color-surface-raised": "color.surface.raised",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-16": "space.16",
-    "dependency.role-space-2": "space.2"
+    "dependency.role-space-16": "space.16"
   },
   "status": {
     "implemented": true,
@@ -95,7 +95,6 @@
       "color.border.control",
       "color.border.divider",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -104,13 +103,14 @@
       "color.surface.default",
       "color.surface.raised",
       "color.text.default",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.32",
       "space.4",
       "z.popover"
@@ -140,13 +140,14 @@
       "color.surface.default",
       "color.surface.raised",
       "color.text.default",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.32",
       "space.4",
       "z.popover"
@@ -181,11 +182,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -226,6 +222,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -256,11 +262,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.32": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -282,6 +283,6 @@
   "copy": {
     "directory": "copy/skeleton/",
     "manifest": "copy/skeleton/manifest.json",
-    "digest": "sha256-YCCxtxYLNlpJZqd02zALos+1RGYqYXZnhNIgbjjTOLk="
+    "digest": "sha256-/IlgtvilSDqgyjMmF2055DmrCe9e27wEIxyPXZ9j6zk="
   }
 }
diff --git a/packages/ui/dist/contracts/skip-link.json b/packages/ui/dist/contracts/skip-link.json
index 2ac4f5ff0..0b8f94251 100644
--- a/packages/ui/dist/contracts/skip-link.json
+++ b/packages/ui/dist/contracts/skip-link.json
@@ -99,7 +99,6 @@
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
-      "space.16",
       "space.32",
       "space.4",
       "space.48",
@@ -137,7 +136,6 @@
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
-      "space.16",
       "space.32",
       "space.4",
       "space.48",
@@ -248,11 +246,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.16": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.32": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -289,6 +282,6 @@
   "copy": {
     "directory": "copy/skip-link/",
     "manifest": "copy/skip-link/manifest.json",
-    "digest": "sha256-DLQ8IJEF+7r/cxXoKME+WMqTOVaJevkgDMVRXjTEk0E="
+    "digest": "sha256-Cc64YD+9+04pEDbmTkOYQn2WgXyorjjK3s9dPDl4lZk="
   }
 }
diff --git a/packages/ui/dist/contracts/switch.json b/packages/ui/dist/contracts/switch.json
index 7f814dd98..ccb33abf2 100644
--- a/packages/ui/dist/contracts/switch.json
+++ b/packages/ui/dist/contracts/switch.json
@@ -395,6 +395,6 @@
   "copy": {
     "directory": "copy/switch/",
     "manifest": "copy/switch/manifest.json",
-    "digest": "sha256-ro51Jzhx8KR2dDJCRqTKB5jNf8Mnc8kBcTaICxcws1A="
+    "digest": "sha256-azfUWxT0aJAZbSMDC8j+254Za5Ieti9Bg/VERoBvAAo="
   }
 }
diff --git a/packages/ui/dist/contracts/table.json b/packages/ui/dist/contracts/table.json
index 5e4fe84e6..cad99306e 100644
--- a/packages/ui/dist/contracts/table.json
+++ b/packages/ui/dist/contracts/table.json
@@ -121,7 +121,7 @@
     "row.bg-hover": "color.interaction.hover.bg",
     "selected.bg": "color.interaction.selection.bg",
     "selected.text": "color.interaction.selection.text",
-    "selected.ring": "color.interaction.focus.ring-container",
+    "selected.ring": "color.interaction.focus.ring",
     "selected.inactive-bg": "color.interaction.selection.inactive-bg",
     "selected.inactive-text": "color.interaction.selection.inactive-text",
     "caption.text": "color.text.muted",
@@ -141,7 +141,6 @@
       "color.border.divider",
       "color.border.strong",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.inactive-bg",
@@ -182,7 +181,6 @@
       "color.border.strong",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.inactive-bg",
@@ -258,11 +256,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.hover.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -429,6 +422,6 @@
   "copy": {
     "directory": "copy/table/",
     "manifest": "copy/table/manifest.json",
-    "digest": "sha256-5x3hanzyxLH3nwERe8/wI2TB7i4kSwR2pISz0yLa+gk="
+    "digest": "sha256-s3K2MnIRnTkfAy1WFKMoL4efHGv8vdQcKCVTR9N5eso="
   }
 }
diff --git a/packages/ui/dist/contracts/tabs.json b/packages/ui/dist/contracts/tabs.json
index 5ff7c31d2..314b5df7e 100644
--- a/packages/ui/dist/contracts/tabs.json
+++ b/packages/ui/dist/contracts/tabs.json
@@ -398,6 +398,6 @@
   "copy": {
     "directory": "copy/tabs/",
     "manifest": "copy/tabs/manifest.json",
-    "digest": "sha256-aW2OMAJ7OKTFBe9zF9B4eVsJyynDgRIDkBVaDylHtNo="
+    "digest": "sha256-h1ykMepGUQPW/IBWeIG3wekA5Ik/VZZGdXW8/5eq0/Y="
   }
 }
diff --git a/packages/ui/dist/contracts/terminal.json b/packages/ui/dist/contracts/terminal.json
index 5b3aff4eb..4cecefdbb 100644
--- a/packages/ui/dist/contracts/terminal.json
+++ b/packages/ui/dist/contracts/terminal.json
@@ -536,6 +536,6 @@
   "copy": {
     "directory": "copy/terminal/",
     "manifest": "copy/terminal/manifest.json",
-    "digest": "sha256-sGsy8R0eqkr6bURvIwkRkH0fLyTW8pfdEwky7NiayLM="
+    "digest": "sha256-a2ut5/6sI3Hxhu3TSTLIpHNSL+kcEnFLqsiEP36N7H8="
   }
 }
diff --git a/packages/ui/dist/contracts/text-field.json b/packages/ui/dist/contracts/text-field.json
index 7d1d73d4f..97ae1525a 100644
--- a/packages/ui/dist/contracts/text-field.json
+++ b/packages/ui/dist/contracts/text-field.json
@@ -536,6 +536,6 @@
   "copy": {
     "directory": "copy/text-field/",
     "manifest": "copy/text-field/manifest.json",
-    "digest": "sha256-NnrVBWko4HWPhGkBoIYnMm5jYnXwd76OdbC8XdlUoFc="
+    "digest": "sha256-QVFw6clgmhGPRFOGc9gq7zUsnex503DgVurd5gZjUHo="
   }
 }
diff --git a/packages/ui/dist/contracts/textarea.json b/packages/ui/dist/contracts/textarea.json
index 0633b1923..94b120927 100644
--- a/packages/ui/dist/contracts/textarea.json
+++ b/packages/ui/dist/contracts/textarea.json
@@ -493,6 +493,6 @@
   "copy": {
     "directory": "copy/textarea/",
     "manifest": "copy/textarea/manifest.json",
-    "digest": "sha256-VeZRrTxwhFU2bJcDBQUPI68/dFzyc1GVu0w9WcbtTXU="
+    "digest": "sha256-9OiLMOutk7sDFK/BKt3rW4+t7B0HZ+lVnlSIJqI0dFc="
   }
 }
diff --git a/packages/ui/dist/contracts/time-picker.json b/packages/ui/dist/contracts/time-picker.json
index a47c56ef5..87765823b 100644
--- a/packages/ui/dist/contracts/time-picker.json
+++ b/packages/ui/dist/contracts/time-picker.json
@@ -137,6 +137,7 @@
     "hover",
     "focus-visible",
     "invalid",
+    "invalid+focus-visible",
     "disabled"
   ],
   "dependencies": [],
@@ -146,6 +147,7 @@
     "root.bg-hover": "color.interaction.hover.bg",
     "root.border-focus": "color.border.active",
     "root.ring": "color.interaction.focus.ring",
+    "root.ring-invalid": "color.interaction.focus.ring-container",
     "root.border-invalid": "color.status.danger.border",
     "root.border-disabled": "color.border.disabled",
     "root.bg-disabled": "color.interaction.disabled.bg",
@@ -567,6 +569,6 @@
   "copy": {
     "directory": "copy/time-picker/",
     "manifest": "copy/time-picker/manifest.json",
-    "digest": "sha256-wxpcgxJ9Gi6UvCUrDp9dioJK7/5dGvvJ8K3LZNbXyqM="
+    "digest": "sha256-A8dIwiYn2nlNCuNvQObX2Iws9rBDL/ID3aqTgjN0GjY="
   }
 }
diff --git a/packages/ui/dist/contracts/timeline.json b/packages/ui/dist/contracts/timeline.json
index 2c0f18742..5c0d57a1d 100644
--- a/packages/ui/dist/contracts/timeline.json
+++ b/packages/ui/dist/contracts/timeline.json
@@ -77,9 +77,9 @@
     "dependency.role-border-width-emphasis": "border.width.emphasis",
     "dependency.role-color-border-active": "color.border.active",
     "dependency.role-color-border-divider": "color.border.divider",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-4": "space.4"
   },
   "status": {
@@ -96,7 +96,6 @@
       "color.border.control",
       "color.border.divider",
       "color.interaction.drop-target",
-      "color.interaction.focus.ring",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -105,12 +104,13 @@
       "color.surface.default",
       "color.text.default",
       "color.text.muted",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "z.popover"
@@ -141,12 +141,13 @@
       "color.surface.default",
       "color.text.default",
       "color.text.muted",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
       "space.12",
-      "space.2",
       "space.32",
       "space.4",
       "z.popover"
@@ -186,11 +187,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.focus.ring": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.interaction.selection.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -231,6 +227,16 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
+      "focus.offset": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
+      "focus.ring": {
+        "action": "use",
+        "reason": "Use within the role's documented scope and restrictions.",
+        "decisionIds": []
+      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -256,11 +262,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.32": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -282,6 +283,6 @@
   "copy": {
     "directory": "copy/timeline/",
     "manifest": "copy/timeline/manifest.json",
-    "digest": "sha256-xTdi7g85GA2tcVyJWhakoizpwEDxFhF3UjuOxkrx1Jg="
+    "digest": "sha256-9dS8Y09MmdcfilejwoK1Kw46VATPPDKoea3xMoOlyTg="
   }
 }
diff --git a/packages/ui/dist/contracts/toast.json b/packages/ui/dist/contracts/toast.json
index fd1ff0e41..6da2f432b 100644
--- a/packages/ui/dist/contracts/toast.json
+++ b/packages/ui/dist/contracts/toast.json
@@ -118,7 +118,7 @@
     "danger.text": "color.status.danger.on-fill",
     "danger.button-bg-hover": "color.action.destructive.pressed-bg",
     "action.text": "color.text.link",
-    "action.bg-hover": "color.interaction.hover.bg-strong",
+    "action.bg-hover": "color.interaction.hover.bg",
     "action.text-hover": "color.text.link-hover",
     "close.text": "color.action.tertiary.text",
     "close.bg-hover": "color.action.tertiary.hover-bg",
@@ -142,7 +142,7 @@
       "color.border.overlay",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.hover.bg-strong",
+      "color.interaction.hover.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -195,7 +195,7 @@
       "color.border.overlay",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.hover.bg-strong",
+      "color.interaction.hover.bg",
       "color.interaction.selection.bg",
       "color.interaction.selection.text",
       "color.interaction.text-selection.bg",
@@ -212,7 +212,6 @@
       "color.primitive.paper.100",
       "color.primitive.paper.90",
       "color.primitive.red.100",
-      "color.primitive.red.150",
       "color.primitive.red.350",
       "color.primitive.red.550",
       "color.primitive.red.750",
@@ -303,7 +302,7 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.interaction.hover.bg-strong": {
+      "color.interaction.hover.bg": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -524,6 +523,6 @@
   "copy": {
     "directory": "copy/toast/",
     "manifest": "copy/toast/manifest.json",
-    "digest": "sha256-Dulou4hwI8bILLX7ogZBb3IkLJsGcenBCv2301DmbKo="
+    "digest": "sha256-bCWPynWl0C2Bz5UPADBaW4C1eOSMaHaXHhVMpceGiNA="
   }
 }
diff --git a/packages/ui/dist/contracts/toolbar.json b/packages/ui/dist/contracts/toolbar.json
index 313817688..1c642fc5f 100644
--- a/packages/ui/dist/contracts/toolbar.json
+++ b/packages/ui/dist/contracts/toolbar.json
@@ -143,9 +143,7 @@
       "density.compact.icon",
       "density.compact.row-height",
       "focus.offset",
-      "focus.offset-container",
       "focus.ring",
-      "focus.ring-container",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.line-height.ui-sm",
@@ -175,7 +173,6 @@
       "color.interaction.disabled.bg",
       "color.interaction.drop-target",
       "color.interaction.focus.ring",
-      "color.interaction.focus.ring-container",
       "color.interaction.hover.bg",
       "color.interaction.hover.bg-strong",
       "color.interaction.pressed.bg",
@@ -221,9 +218,7 @@
       "density.compact.icon",
       "density.compact.row-height",
       "focus.offset",
-      "focus.offset-container",
       "focus.ring",
-      "focus.ring-container",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.line-height.ui-sm",
@@ -437,21 +432,11 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "focus.offset-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "focus.ring": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "focus.ring-container": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "font.family.mono": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -533,6 +518,6 @@
   "copy": {
     "directory": "copy/toolbar/",
     "manifest": "copy/toolbar/manifest.json",
-    "digest": "sha256-Nqfa3AzsL73Ep9jP3gvG3YBOW8qyTGnIZrjSd6zpcWY="
+    "digest": "sha256-fvYtHYd1COEZj/FavW9Fo5PcEOIaI9yRebWxrwhsUag="
   }
 }
diff --git a/packages/ui/dist/contracts/tooltip.json b/packages/ui/dist/contracts/tooltip.json
index bb533235c..d56ef4040 100644
--- a/packages/ui/dist/contracts/tooltip.json
+++ b/packages/ui/dist/contracts/tooltip.json
@@ -357,6 +357,6 @@
   "copy": {
     "directory": "copy/tooltip/",
     "manifest": "copy/tooltip/manifest.json",
-    "digest": "sha256-QxjcDTsBx4LoM8mRkg4NgUQUatj3fHOwB6EKt8pWLZw="
+    "digest": "sha256-jnoOb2I9sRZsUnOtwqqwpg9QyVSFlW3K65GYFix39dc="
   }
 }
diff --git a/packages/ui/dist/contracts/tree.json b/packages/ui/dist/contracts/tree.json
index 28a5e619c..4aa53ed48 100644
--- a/packages/ui/dist/contracts/tree.json
+++ b/packages/ui/dist/contracts/tree.json
@@ -108,10 +108,10 @@
     "dependency.role-color-text-disabled": "color.text.disabled",
     "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
     "dependency.role-density-compact-control-height": "density.compact.control-height",
+    "dependency.role-focus-offset": "focus.offset",
     "dependency.role-radius-none": "radius.none",
     "dependency.role-space-12": "space.12",
     "dependency.role-space-16": "space.16",
-    "dependency.role-space-2": "space.2",
     "dependency.role-space-8": "space.8"
   },
   "status": {
@@ -134,18 +134,16 @@
       "color.interaction.text-selection.text",
       "color.surface.canvas",
       "color.surface.default",
-      "color.surface.input",
       "color.text.default",
       "color.text.disabled",
-      "density.comfortable.control-height",
-      "density.compact.control-height",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -173,18 +171,16 @@
       "color.primitive.rose.700",
       "color.surface.canvas",
       "color.surface.default",
-      "color.surface.input",
       "color.text.default",
       "color.text.disabled",
-      "density.comfortable.control-height",
-      "density.compact.control-height",
+      "focus.offset",
+      "focus.ring",
       "font.family.mono",
       "font.line-height.ui-md",
       "font.size.ui-md",
       "radius.none",
       "space.12",
       "space.16",
-      "space.2",
       "space.32",
       "space.4",
       "space.8",
@@ -253,11 +249,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "color.surface.input": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "color.text.default": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -268,12 +259,12 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "density.comfortable.control-height": {
+      "focus.offset": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "density.compact.control-height": {
+      "focus.ring": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
@@ -308,11 +299,6 @@
         "reason": "Use within the role's documented scope and restrictions.",
         "decisionIds": []
       },
-      "space.2": {
-        "action": "use",
-        "reason": "Use within the role's documented scope and restrictions.",
-        "decisionIds": []
-      },
       "space.32": {
         "action": "use",
         "reason": "Use within the role's documented scope and restrictions.",
@@ -339,6 +325,6 @@
   "copy": {
     "directory": "copy/tree/",
     "manifest": "copy/tree/manifest.json",
-    "digest": "sha256-4RUETiVuDpUfhbB64T/WAejSHUEhFEXHJnLzKNXk140="
+    "digest": "sha256-xJ5YVjzApCdc/f8qc+rs3uRCT9DfNBT1TqPYogGUHJY="
   }
 }
diff --git a/packages/ui/dist/contracts/wizard.json b/packages/ui/dist/contracts/wizard.json
index 075df7747..139a5d296 100644
--- a/packages/ui/dist/contracts/wizard.json
+++ b/packages/ui/dist/contracts/wizard.json
@@ -631,6 +631,6 @@
   "copy": {
     "directory": "copy/wizard/",
     "manifest": "copy/wizard/manifest.json",
-    "digest": "sha256-iGsA8lMX0V0Ipmib1881C1nGntn+vXPGfd3lDDhhYaM="
+    "digest": "sha256-YCzSJskJMSjdynux2FW49yDJDlfm4KyiiZo+CbEYtx8="
   }
 }
diff --git a/packages/ui/dist/copy/admin-form/component.css b/packages/ui/dist/copy/admin-form/component.css
index d4ee58a96..3109fc6d2 100644
--- a/packages/ui/dist/copy/admin-form/component.css
+++ b/packages/ui/dist/copy/admin-form/component.css
@@ -8,7 +8,7 @@ j3w1-admin-form {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-admin-form, j3w1-admin-form *, j3w1-admin-form *::before, j3w1-admin-form *::after { box-sizing: border-box; }
-j3w1-admin-form button, j3w1-admin-form input, j3w1-admin-form select, j3w1-admin-form textarea { font: inherit; }
+j3w1-admin-form :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-admin-form ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -121,21 +121,17 @@ j3w1-admin-form .admin-form[aria-busy="true"] .admin-form-continue {
   }
 }
 
-j3w1-admin-form .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+j3w1-admin-form .button,
+j3w1-admin-form .dialog-button,
+j3w1-admin-form .empty-state-action,
+j3w1-admin-form .file-input-button,
+j3w1-admin-form button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -148,8 +144,23 @@ j3w1-admin-form .button {
   cursor: pointer;
   outline: 0;
 }
+j3w1-admin-form .button,
+j3w1-admin-form .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-j3w1-admin-form .button-secondary {
+j3w1-admin-form .button-secondary,
+j3w1-admin-form .dialog-button,
+j3w1-admin-form .empty-state-action,
+j3w1-admin-form .file-input-button,
+j3w1-admin-form button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -181,7 +192,8 @@ j3w1-admin-form .button-destructive {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-j3w1-admin-form .button-destructive-filled {
+j3w1-admin-form .button-destructive-filled,
+j3w1-admin-form .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -191,6 +203,49 @@ j3w1-admin-form .button-destructive-filled {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  j3w1-admin-form :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-admin-form .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-admin-form :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-admin-form :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-admin-form :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-admin-form .dialog-button,
+  j3w1-admin-form .empty-state-action,
+  j3w1-admin-form .file-input-button,
+  j3w1-admin-form button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-admin-form :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 j3w1-admin-form .button-icon {
   flex: none;
@@ -208,25 +263,6 @@ j3w1-admin-form .button-loading {
 j3w1-admin-form .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-admin-form .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-admin-form .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-admin-form .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-admin-form .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-admin-form .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -238,16 +274,6 @@ j3w1-admin-form .button[aria-busy="true"] .button-icon {
 j3w1-admin-form .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-admin-form .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-admin-form .button {
@@ -256,9 +282,66 @@ j3w1-admin-form .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-admin-form .button:focus-visible {
-    outline-color: Highlight;
-  }
+}
+
+j3w1-admin-form .combobox-label,
+j3w1-admin-form .dialog-field-label,
+j3w1-admin-form .field-label,
+j3w1-admin-form .fieldset-label,
+j3w1-admin-form .file-input-label,
+j3w1-admin-form .number-field-label,
+j3w1-admin-form .search-field-label,
+j3w1-admin-form .select-label,
+j3w1-admin-form .text-field-label,
+j3w1-admin-form .textarea-label,
+j3w1-admin-form .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-admin-form .combobox-help,
+j3w1-admin-form .date-picker-help,
+j3w1-admin-form .dialog-field-help,
+j3w1-admin-form .fieldset-help,
+j3w1-admin-form .file-input-help,
+j3w1-admin-form .number-field-help,
+j3w1-admin-form .search-field-help,
+j3w1-admin-form .select-help,
+j3w1-admin-form .text-field-help,
+j3w1-admin-form .textarea-help,
+j3w1-admin-form .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-admin-form .combobox-message,
+j3w1-admin-form .date-picker-message,
+j3w1-admin-form .file-input-message,
+j3w1-admin-form .number-field-message,
+j3w1-admin-form .radio-group-message,
+j3w1-admin-form .select-message,
+j3w1-admin-form .text-field-message,
+j3w1-admin-form .textarea-message,
+j3w1-admin-form .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-admin-form .combobox-root,
+j3w1-admin-form .date-picker-root,
+j3w1-admin-form .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
 }
 
 j3w1-admin-form .field {
@@ -270,12 +353,6 @@ j3w1-admin-form .field {
   color: var(--color-text-default);
 }
 
-j3w1-admin-form .field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-admin-form .field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -288,8 +365,8 @@ j3w1-admin-form .field-control {
 
 j3w1-admin-form .field-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -364,12 +441,6 @@ j3w1-admin-form .text-field {
   color: var(--color-text-default);
 }
 
-j3w1-admin-form .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-admin-form .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -379,7 +450,7 @@ j3w1-admin-form .text-field-root {
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -388,7 +459,7 @@ j3w1-admin-form .text-field-root {
 j3w1-admin-form .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -464,21 +535,6 @@ j3w1-admin-form .text-field-loading {
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-j3w1-admin-form .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-admin-form .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-admin-form .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -579,7 +635,7 @@ j3w1-admin-form .checkbox-required {
 
 j3w1-admin-form .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -589,8 +645,8 @@ j3w1-admin-form .checkbox-option {
 
 j3w1-admin-form .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -600,8 +656,8 @@ j3w1-admin-form .checkbox-control > * {
 
 j3w1-admin-form .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -613,8 +669,8 @@ j3w1-admin-form .checkbox-input {
 j3w1-admin-form .checkbox-check,
 j3w1-admin-form .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
@@ -753,7 +809,7 @@ j3w1-admin-form .radio-group-horizontal .radio-group-options {
 
 j3w1-admin-form .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -763,8 +819,8 @@ j3w1-admin-form .radio-group-option {
 
 j3w1-admin-form .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 j3w1-admin-form .radio-group-control > * {
@@ -773,8 +829,8 @@ j3w1-admin-form .radio-group-control > * {
 
 j3w1-admin-form .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -796,14 +852,6 @@ j3w1-admin-form .radio-group-text {
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
-
-j3w1-admin-form .radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-admin-form .radio-group-option:hover .radio-group-input:not(:disabled) {
     background: var(--color-interaction-hover-bg);
@@ -873,15 +921,15 @@ j3w1-admin-form .radio-group:disabled .radio-group-legend {
 }
 
 j3w1-admin-form :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-admin-form :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-admin-form :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-admin-form :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-admin-form :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-admin-form :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-admin-form :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-admin-form :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-admin-form :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-admin-form .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-admin-form .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-admin-form .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-admin-form .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-admin-form .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-admin-form .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-admin-form .j3w1-temporal :focus-visible,j3w1-admin-form .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -905,7 +953,7 @@ j3w1-admin-form .j3w1-calendar [aria-pressed="true"] { background:var(--color-in
 j3w1-admin-form .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-admin-form .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-admin-form .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-admin-form .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-admin-form .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-admin-form .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-admin-form .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-admin-form .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -913,7 +961,7 @@ j3w1-admin-form .j3w1-choice-trigger:focus-visible,j3w1-admin-form .j3w1-choice-
 j3w1-admin-form .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-admin-form .j3w1-choice-list[popover] { inset: auto; }
 j3w1-admin-form .j3w1-choice-list[hidden] { display: none; }
-j3w1-admin-form .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-admin-form .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-admin-form .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-admin-form .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-admin-form .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -927,19 +975,19 @@ j3w1-admin-form .j3w1-choice-error { display: block; color: var(--color-status-d
 j3w1-admin-form .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-admin-form .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-admin-form :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
 
 j3w1-admin-form .select {
   position: relative;
@@ -950,12 +998,6 @@ j3w1-admin-form .select {
   color: var(--color-text-default);
 }
 
-j3w1-admin-form .select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-admin-form .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -965,7 +1007,7 @@ j3w1-admin-form .select-root {
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -976,8 +1018,8 @@ j3w1-admin-form .select-control {
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -1002,8 +1044,8 @@ j3w1-admin-form .select-control optgroup {
 }
 
 j3w1-admin-form .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 j3w1-admin-form .select-control optgroup {
@@ -1017,7 +1059,7 @@ j3w1-admin-form .select-control option:checked {
 
 j3w1-admin-form .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -1026,21 +1068,6 @@ j3w1-admin-form .select-chevron {
   fill: none;
   pointer-events: none;
 }
-
-j3w1-admin-form .select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-admin-form .select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-admin-form .select-root:hover {
     background: var(--color-interaction-hover-bg);
@@ -1236,12 +1263,6 @@ j3w1-admin-form .textarea {
   color: var(--color-text-default);
 }
 
-j3w1-admin-form .textarea-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-admin-form .textarea-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -1259,8 +1280,8 @@ j3w1-admin-form .textarea-input {
   display: block;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) * 2);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) * 2);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -1290,21 +1311,6 @@ j3w1-admin-form .textarea-count {
   line-height: var(--font-line-height-ui-sm);
   font-variant-numeric: tabular-nums;
 }
-
-j3w1-admin-form .textarea-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-admin-form .textarea-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-admin-form .textarea-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -1419,16 +1425,10 @@ j3w1-admin-form .fieldset-field {
   min-width: 0;
 }
 
-j3w1-admin-form .fieldset-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-admin-form .fieldset-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -1442,13 +1442,6 @@ j3w1-admin-form .fieldset-input:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-j3w1-admin-form .fieldset-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-admin-form .fieldset:disabled .fieldset-legend,
 j3w1-admin-form .fieldset:disabled .fieldset-label {
   color: var(--color-text-disabled);
@@ -1499,7 +1492,7 @@ j3w1-admin-form .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -1521,7 +1514,7 @@ j3w1-admin-form .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -1553,7 +1546,7 @@ j3w1-admin-form .table .table-body .table-row:first-child {
 
 j3w1-admin-form .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -1590,6 +1583,21 @@ j3w1-admin-form .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-admin-form .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-admin-form .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-admin-form .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-admin-form .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -1611,7 +1619,7 @@ j3w1-admin-form .table-row[aria-selected="true"]:hover {
 }
 j3w1-admin-form .table-row[aria-selected="true"]:focus-visible,
 j3w1-admin-form .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-admin-form .table[data-container-inactive] .table-row[aria-selected="true"] {
@@ -1775,6 +1783,9 @@ j3w1-admin-form .form-tool { inline-size: 100%; max-inline-size: calc(var(--font
 j3w1-admin-form .form-tool[hidden], j3w1-admin-form .form-tool [hidden] { display: none !important; }
 j3w1-admin-form .form-tool fieldset { min-inline-size: 0; }
 j3w1-admin-form .form-tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block: var(--space-16); }
+j3w1-admin-form .admin-form.form-tool form { display: grid; gap: var(--space-16); }
+j3w1-admin-form .admin-form.form-tool .form-tool-actions { margin-block: 0; }
+j3w1-admin-form .admin-form.form-tool > [data-status]:empty { position: absolute; }
 j3w1-admin-form .form-tool-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); border: 0; padding: 0; margin: 0; }
 j3w1-admin-form .form-field-help { color: var(--color-text-muted); margin: 0; font-size: var(--font-size-ui-sm); }
 j3w1-admin-form .form-tool-summary { margin-block: var(--space-4); }
diff --git a/packages/ui/dist/copy/admin-form/index.html b/packages/ui/dist/copy/admin-form/index.html
index 6f53e5ef8..0a22610f5 100644
--- a/packages/ui/dist/copy/admin-form/index.html
+++ b/packages/ui/dist/copy/admin-form/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Admin form · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-admin-form id="example-admin-form-default"><section class="admin-form"><h2 class="admin-form-title">Project details</h2><p>Review the local values before passing them to your app.</p><form data-native-form=""><fieldset class="fieldset"><legend>Project information</legend><j3w1-text-field><div class="text-field"><label class="text-field-label" for="example-admin-form-default-project-name">Project name</label><div class="text-field-root"><input class="text-field-input" id="example-admin-form-default-project-name" name="example-admin-form-default-project" value="Atlas library" required=""></div></div></j3w1-text-field><j3w1-textarea><div class="textarea"><label class="textarea-label" for="example-admin-form-default-project-notes">Notes</label><textarea class="textarea-input" id="example-admin-form-default-project-notes" name="example-admin-form-default-notes" rows="3">A reusable component library.</textarea></div></j3w1-textarea><j3w1-select><div class="select"><label class="select-label" for="example-admin-form-default-project-scope">Scope</label><div class="select-root"><select class="select-control" id="example-admin-form-default-project-scope" name="example-admin-form-default-scope"><option value="library">Library</option><option value="application">Application</option></select></div></div></j3w1-select></fieldset><div class="form-tool-actions"><button class="button" type="submit">Review values</button><button class="button button-secondary" type="reset">Reset</button></div></form><section data-form-review="" hidden="" aria-label="Review project values"><h3 tabindex="-1">Review values</h3><table class="table"><caption>Values to pass to the host</caption><tbody></tbody></table><div class="form-tool-actions"><button class="button button-secondary" type="button" data-form-edit="">Edit values</button><button class="button" type="button" data-form-confirm="">Confirm values</button></div></section><p role="status" data-form-status=""></p></section></j3w1-admin-form><script type="module" src="./runtime/register/admin-form.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Admin form · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-admin-form id="example-admin-form-default"><section class="admin-form"><h2 class="admin-form-title">Project details</h2><p>Review the local values before passing them to your app.</p><form data-native-form=""><fieldset class="fieldset"><legend>Project information</legend><j3w1-text-field><div class="text-field"><label class="text-field-label" for="example-admin-form-default-project-name">Project name</label><div class="text-field-root"><input class="text-field-input" id="example-admin-form-default-project-name" name="example-admin-form-default-project" value="Atlas library" required=""></div></div></j3w1-text-field><j3w1-textarea><div class="textarea"><label class="textarea-label" for="example-admin-form-default-project-notes">Notes</label><textarea class="textarea-input" id="example-admin-form-default-project-notes" name="example-admin-form-default-notes" rows="3">A reusable component library.</textarea></div></j3w1-textarea><j3w1-select><div class="select"><label class="select-label" for="example-admin-form-default-project-scope">Scope</label><div class="select-root"><select class="select-control" id="example-admin-form-default-project-scope" name="example-admin-form-default-scope"><option value="library">Library</option><option value="application">Application</option></select></div></div></j3w1-select></fieldset><div class="form-tool-actions"><button class="button" type="submit">Review values</button><button class="button button-secondary" type="reset">Reset</button></div></form><section data-form-review="" hidden="" aria-label="Review project values"><h3 tabindex="-1">Review values</h3><table class="table"><caption>Values to pass to the host</caption><tbody></tbody></table><div class="form-tool-actions"><button class="button button-secondary" type="button" data-form-edit="">Edit values</button><button class="button" type="button" data-form-confirm="">Confirm values</button></div></section><p role="status" data-form-status=""></p></section></j3w1-admin-form><script type="module" src="./runtime/register/admin-form.js"></script></body></html>
diff --git a/packages/ui/dist/copy/admin-form/manifest.json b/packages/ui/dist/copy/admin-form/manifest.json
index fbbf10e3a..d56e94e3b 100644
--- a/packages/ui/dist/copy/admin-form/manifest.json
+++ b/packages/ui/dist/copy/admin-form/manifest.json
@@ -5,36 +5,36 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/admin-form.md",
   "dependencies": [
     "register/admin-form.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "register/text-field.js",
     "components/text-field.js",
-    "chunks/native-CAzZmDKR.js",
+    "chunks/native-BjBt1sUh.js",
     "register/textarea.js",
     "components/textarea.js",
     "register/select.js",
     "components/select.js",
     "components/admin-form.js",
-    "chunks/forms-BT3z7lNC.js"
+    "chunks/forms-CE_hP1hg.js"
   ],
   "files": {
-    "runtime/register/admin-form.js": "sha256-wbxQ6jG47yRORiZBcV1vZy21o7vLJ0wZWSBjlQ08r5o=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/register/text-field.js": "sha256-DD+ctMlKClOK6B/glshiJwIjKilewzY171GvKtVGf1A=",
-    "runtime/components/text-field.js": "sha256-6f5tLWwF57IFY+uH5zM0afiU3g09PW3M4772zC7zD4Q=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "runtime/register/textarea.js": "sha256-H+BMjmdgnMxVEA9KvLSSKoOlHTAH91Qy7+pjUiTlgEE=",
-    "runtime/components/textarea.js": "sha256-qJqDEskuaVeBUFjefVF+KSbJV3s6vpaKCtd4aQ4QtoY=",
-    "runtime/register/select.js": "sha256-zXXuJRnrp9EVnk1A8VpgUzF/JPShcAImY9zRc6nQasQ=",
-    "runtime/components/select.js": "sha256-yyq0jsJOysQGTPpFoA1C1aRWSIukrk+M4Ro2ZwCyWbw=",
-    "runtime/components/admin-form.js": "sha256-aN07ea+gUj6aAxwJjeILpqJFPUQJ27g3LAIjpHmljNg=",
-    "runtime/chunks/forms-BT3z7lNC.js": "sha256-Txmae07dWLj1H/FL869U0Kv84TQxzpdFeOg0g8zGK6I=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-Of5oLJY6n5Yfqu44/xCAuuJEYRoCg4Kr+YZbVggbwZE=",
+    "runtime/register/admin-form.js": "sha256-3IJTJLTksVuLj5PxdfQUbymfAb+K4yKLDzOUMb+MHP0=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/register/text-field.js": "sha256-gmqyzVDUD/VCnOF5nDRA0n1F4I7q7lE02AdZeBCFrUk=",
+    "runtime/components/text-field.js": "sha256-4c47ee0iFW2YWW+dVR1PBSJMwOOa5rmKhJSalXzm+Zo=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "runtime/register/textarea.js": "sha256-OGjZrk++zzTI91HXv7chKm86kRb5xICVcoOOdMidF2g=",
+    "runtime/components/textarea.js": "sha256-pi3Oj4itdBVYU/EaRSZ64BqAEsBdeUH4LCG2kwSUKfw=",
+    "runtime/register/select.js": "sha256-TN7apnaEDR69Eobpnesx4c3Yr2iU33xNGj/q9i+nFtw=",
+    "runtime/components/select.js": "sha256-QSO5F4fiwtnnIHZ9/a9n62yVZRlGUIofNkw2oXYIzGY=",
+    "runtime/components/admin-form.js": "sha256-FVzHg1y71Fg3LptLCSedTH/NQIxijxfYfjfBaYWXGS4=",
+    "runtime/chunks/forms-CE_hP1hg.js": "sha256-uOnoMuSkUbm9C/GfR+PDLYCykyHOQ1Ni7g59c4YMOS0=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-Aha0xp86OpN6uUIQCjlXTYdzw2u0p0Y/dxNCx+gMC/s=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-TRLraonRxggrZcfXS9jlN+nTIOpRHiXbMKQNm8NbR2A=",
-    "index.html": "sha256-HsmeIqneb7G9ZHVJEuzAqXdP7AYU8OlzG8Rs70uYyBQ=",
+    "index.html": "sha256-fCyv1GPEoas5phPBo4T3EhrTQ5U3/15ks0AZJQawjDc=",
     "README.md": "sha256-bid+/EA6npftuo0cAZQP6rg+96qu7gNC4h/Klx23PF0="
   }
 }
diff --git a/packages/ui/dist/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/admin-form/runtime/chunks/choice-B7mo5Eq3.js
similarity index 98%
rename from packages/ui/dist/chunks/choice-Db_w_BOQ.js
rename to packages/ui/dist/copy/admin-form/runtime/chunks/choice-B7mo5Eq3.js
index aebc478b6..849c80b8b 100644
--- a/packages/ui/dist/chunks/choice-Db_w_BOQ.js
+++ b/packages/ui/dist/copy/admin-form/runtime/chunks/choice-B7mo5Eq3.js
@@ -31,6 +31,12 @@ function identify(root, node, suffix) {
 function nativeInput(input, type = "input") {
 	input.dispatchEvent(new Event(type, { bubbles: true }));
 }
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
 function rove(items, index, focus = true) {
 	if (!items.length) return null;
 	const next = items[(index + items.length) % items.length];
@@ -929,4 +935,4 @@ function enhanceControls(root) {
 	};
 }
 //#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/admin-form/runtime/chunks/element-Dovcr9Ky.js
similarity index 99%
rename from packages/ui/dist/chunks/element-C1XeXVYC.js
rename to packages/ui/dist/copy/admin-form/runtime/chunks/element-Dovcr9Ky.js
index a943f150d..aa7a67cb4 100644
--- a/packages/ui/dist/chunks/element-C1XeXVYC.js
+++ b/packages/ui/dist/copy/admin-form/runtime/chunks/element-Dovcr9Ky.js
@@ -1,4 +1,4 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/internal/element.js
 var HTMLElementBase = globalThis.HTMLElement ?? class {};
 var nextInstance = 0;
diff --git a/packages/ui/dist/chunks/forms-BT3z7lNC.js b/packages/ui/dist/copy/admin-form/runtime/chunks/forms-CE_hP1hg.js
similarity index 98%
rename from packages/ui/dist/chunks/forms-BT3z7lNC.js
rename to packages/ui/dist/copy/admin-form/runtime/chunks/forms-CE_hP1hg.js
index 65f1f0e71..6ad3b48f5 100644
--- a/packages/ui/dist/chunks/forms-BT3z7lNC.js
+++ b/packages/ui/dist/copy/admin-form/runtime/chunks/forms-CE_hP1hg.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/forms.js
 function wizard(root, { on }) {
 	const panels = all(root, ".wizard-panel"), steps = all(root, ".wizard-step-button"), backButton = root.querySelector(".wizard-back"), nextButton = root.querySelector(".wizard-next");
diff --git a/packages/ui/dist/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/admin-form/runtime/chunks/native-BjBt1sUh.js
similarity index 98%
rename from packages/ui/dist/chunks/native-CAzZmDKR.js
rename to packages/ui/dist/copy/admin-form/runtime/chunks/native-BjBt1sUh.js
index 558c774e5..032f76c74 100644
--- a/packages/ui/dist/chunks/native-CAzZmDKR.js
+++ b/packages/ui/dist/copy/admin-form/runtime/chunks/native-BjBt1sUh.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/native.js
 function content() {
 	return {};
diff --git a/packages/ui/dist/copy/admin-form/runtime/components/admin-form.js b/packages/ui/dist/copy/admin-form/runtime/components/admin-form.js
index bb59750d7..f786258d5 100644
--- a/packages/ui/dist/copy/admin-form/runtime/components/admin-form.js
+++ b/packages/ui/dist/copy/admin-form/runtime/components/admin-form.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as formComposition } from "../chunks/forms-BT3z7lNC.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as formComposition } from "../chunks/forms-CE_hP1hg.js";
 //#region .cache/ui-build/entries/components/admin-form.js
 var J3w1AdminForm = class extends J3w1Element {
 	static componentId = "admin-form";
 	static version = "4.0.0";
-	static implementationId = "sha256-IZWHSSA/uP7yDRqpiKJQsQ05FssMem3lg++QYnGPtDM=";
+	static implementationId = "sha256-86V5kk3lZt3iA5GdiMBYc8P2mc4pO3KTo02FmkKh71k=";
 	static connect = formComposition;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/admin-form/runtime/components/select.js b/packages/ui/dist/copy/admin-form/runtime/components/select.js
index f15a0462d..a59b0acab 100644
--- a/packages/ui/dist/copy/admin-form/runtime/components/select.js
+++ b/packages/ui/dist/copy/admin-form/runtime/components/select.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/select.js
 var J3w1Select = class extends J3w1Element {
 	static componentId = "select";
 	static version = "4.0.0";
-	static implementationId = "sha256-x5f4XAk757Fq5+Tl0cEgt1x3VCTPpITjazQZUo+WpvQ=";
+	static implementationId = "sha256-/4CAqDSF84DTC0pEcQUtcmmtAaVge6ifWVX3elTZzLM=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/admin-form/runtime/components/text-field.js b/packages/ui/dist/copy/admin-form/runtime/components/text-field.js
index 469ab73da..5f6946538 100644
--- a/packages/ui/dist/copy/admin-form/runtime/components/text-field.js
+++ b/packages/ui/dist/copy/admin-form/runtime/components/text-field.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/text-field.js
 var J3w1TextField = class extends J3w1Element {
 	static componentId = "text-field";
 	static version = "4.0.0";
-	static implementationId = "sha256-zLqXpOHelLAc+ttryZKIkoe3xzw0YRD1AHJXXSXMwdg=";
+	static implementationId = "sha256-k06i0LBPa/oPe2VNmxbJkBzisp1zcAENq3MeVnKZzAo=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/admin-form/runtime/components/textarea.js b/packages/ui/dist/copy/admin-form/runtime/components/textarea.js
index 35ed045a1..850762b41 100644
--- a/packages/ui/dist/copy/admin-form/runtime/components/textarea.js
+++ b/packages/ui/dist/copy/admin-form/runtime/components/textarea.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/textarea.js
 var J3w1Textarea = class extends J3w1Element {
 	static componentId = "textarea";
 	static version = "4.0.0";
-	static implementationId = "sha256-hrpvVFypogHx9xxUI1Lemq3AlNYBkdbjqujfPFl8BM0=";
+	static implementationId = "sha256-BoVEmVsZUWTLPVMKc4WLoQfNpjGc4Wy8j7o7zHck1uQ=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/admin-form/runtime/register/admin-form.js b/packages/ui/dist/copy/admin-form/runtime/register/admin-form.js
index 611bd32a3..a6ac994bb 100644
--- a/packages/ui/dist/copy/admin-form/runtime/register/admin-form.js
+++ b/packages/ui/dist/copy/admin-form/runtime/register/admin-form.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./text-field.js";
 import "./textarea.js";
 import "./select.js";
diff --git a/packages/ui/dist/copy/admin-form/runtime/register/select.js b/packages/ui/dist/copy/admin-form/runtime/register/select.js
index b97661d55..6fcd3d855 100644
--- a/packages/ui/dist/copy/admin-form/runtime/register/select.js
+++ b/packages/ui/dist/copy/admin-form/runtime/register/select.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Select } from "../components/select.js";
 //#region .cache/ui-build/entries/register/select.js
 var element = registerElement("j3w1-select", J3w1Select);
diff --git a/packages/ui/dist/copy/admin-form/runtime/register/text-field.js b/packages/ui/dist/copy/admin-form/runtime/register/text-field.js
index e3bf71d74..01007e107 100644
--- a/packages/ui/dist/copy/admin-form/runtime/register/text-field.js
+++ b/packages/ui/dist/copy/admin-form/runtime/register/text-field.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1TextField } from "../components/text-field.js";
 //#region .cache/ui-build/entries/register/text-field.js
 var element = registerElement("j3w1-text-field", J3w1TextField);
diff --git a/packages/ui/dist/copy/admin-form/runtime/register/textarea.js b/packages/ui/dist/copy/admin-form/runtime/register/textarea.js
index ea76ce485..2e9a5db69 100644
--- a/packages/ui/dist/copy/admin-form/runtime/register/textarea.js
+++ b/packages/ui/dist/copy/admin-form/runtime/register/textarea.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Textarea } from "../components/textarea.js";
 //#region .cache/ui-build/entries/register/textarea.js
 var element = registerElement("j3w1-textarea", J3w1Textarea);
diff --git a/packages/ui/dist/copy/admin-form/tokens.css b/packages/ui/dist/copy/admin-form/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/admin-form/tokens.css
+++ b/packages/ui/dist/copy/admin-form/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/alert/component.css b/packages/ui/dist/copy/alert/component.css
index 17d8831d4..a1df11cb8 100644
--- a/packages/ui/dist/copy/alert/component.css
+++ b/packages/ui/dist/copy/alert/component.css
@@ -8,7 +8,7 @@ j3w1-alert {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-alert, j3w1-alert *, j3w1-alert *::before, j3w1-alert *::after { box-sizing: border-box; }
-j3w1-alert button, j3w1-alert input, j3w1-alert select, j3w1-alert textarea { font: inherit; }
+j3w1-alert :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-alert ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/packages/ui/dist/copy/alert/index.html b/packages/ui/dist/copy/alert/index.html
index ee1cadfec..6e4f82dea 100644
--- a/packages/ui/dist/copy/alert/index.html
+++ b/packages/ui/dist/copy/alert/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Alert · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-alert id="example-alert-danger"><div class="alert alert-danger" role="alert">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Alert · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-alert id="example-alert-danger"><div class="alert alert-danger" role="alert">
   <span class="alert-glyph" aria-hidden="true">✕</span>
   <div class="alert-body">
     <strong class="alert-title">Build failed</strong>
diff --git a/packages/ui/dist/copy/alert/manifest.json b/packages/ui/dist/copy/alert/manifest.json
index c27181697..c888d255f 100644
--- a/packages/ui/dist/copy/alert/manifest.json
+++ b/packages/ui/dist/copy/alert/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/alert.md",
   "dependencies": [
     "register/alert.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/alert.js",
-    "chunks/overlays-C6nlCHqg.js"
+    "chunks/overlays-Bw8SSDKz.js"
   ],
   "files": {
-    "runtime/register/alert.js": "sha256-da/DH6uAJcK9QeCEbqBELiYsVrWkN9elrGzFJKH78ZI=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/alert.js": "sha256-afRZEs1g1g0l5Fh9oTXjl7R4w6ChNBFZ+N8x/BeJexg=",
-    "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-cEV4WAKxLNKgYY5pU9nDVSG4toj5mM7vGZwyE+6Ui8o=",
+    "runtime/register/alert.js": "sha256-tioVtq6u1i9xQuPnmdCiimbU19h1/epCn1uitDhU938=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/alert.js": "sha256-viVrXu+dUgCAMDq7iuljYYljZLxreTt4cQ+40NUQ3Js=",
+    "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-5Dd4DFZ5Lg+H5ZcZnWfb8Ommsp9rKKRLJYR0cpgWWpU=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-QUAq9dxIFB1jlxB27CrSrEZKRLa4rC6qRLbWmR2t/ug=",
-    "index.html": "sha256-F+j2IXSP/bqqvJ5iiyqLOkHvIuLBvN0FsF+7CX+ZhVs=",
+    "index.html": "sha256-GQ2nYpJKuk1PCqh/falGa06i3ANZHhohF4LRN04wYwk=",
     "README.md": "sha256-tx+34leZRjiZARWtxlnmDc9/6JPBGKFZl1od0IYo4kc="
   }
 }
diff --git a/packages/ui/dist/copy/alert/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/alert/runtime/chunks/choice-B7mo5Eq3.js
similarity index 98%
rename from packages/ui/dist/copy/alert/runtime/chunks/choice-Db_w_BOQ.js
rename to packages/ui/dist/copy/alert/runtime/chunks/choice-B7mo5Eq3.js
index aebc478b6..849c80b8b 100644
--- a/packages/ui/dist/copy/alert/runtime/chunks/choice-Db_w_BOQ.js
+++ b/packages/ui/dist/copy/alert/runtime/chunks/choice-B7mo5Eq3.js
@@ -31,6 +31,12 @@ function identify(root, node, suffix) {
 function nativeInput(input, type = "input") {
 	input.dispatchEvent(new Event(type, { bubbles: true }));
 }
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
 function rove(items, index, focus = true) {
 	if (!items.length) return null;
 	const next = items[(index + items.length) % items.length];
@@ -929,4 +935,4 @@ function enhanceControls(root) {
 	};
 }
 //#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/avatar/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/alert/runtime/chunks/element-Dovcr9Ky.js
similarity index 99%
rename from packages/ui/dist/copy/avatar/runtime/chunks/element-C1XeXVYC.js
rename to packages/ui/dist/copy/alert/runtime/chunks/element-Dovcr9Ky.js
index a943f150d..aa7a67cb4 100644
--- a/packages/ui/dist/copy/avatar/runtime/chunks/element-C1XeXVYC.js
+++ b/packages/ui/dist/copy/alert/runtime/chunks/element-Dovcr9Ky.js
@@ -1,4 +1,4 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/internal/element.js
 var HTMLElementBase = globalThis.HTMLElement ?? class {};
 var nextInstance = 0;
diff --git a/packages/ui/dist/copy/dialog/runtime/chunks/overlays-C6nlCHqg.js b/packages/ui/dist/copy/alert/runtime/chunks/overlays-Bw8SSDKz.js
similarity index 98%
rename from packages/ui/dist/copy/dialog/runtime/chunks/overlays-C6nlCHqg.js
rename to packages/ui/dist/copy/alert/runtime/chunks/overlays-Bw8SSDKz.js
index 9df8503ec..3eeb8ff0d 100644
--- a/packages/ui/dist/copy/dialog/runtime/chunks/overlays-C6nlCHqg.js
+++ b/packages/ui/dist/copy/alert/runtime/chunks/overlays-Bw8SSDKz.js
@@ -1,4 +1,4 @@
-import { i as all, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
+import { d as place, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/overlays.js
 function modal(root, { on }) {
 	const dialog = root.querySelector("dialog");
diff --git a/packages/ui/dist/copy/alert/runtime/components/alert.js b/packages/ui/dist/copy/alert/runtime/components/alert.js
index 24171f944..6c6db1b50 100644
--- a/packages/ui/dist/copy/alert/runtime/components/alert.js
+++ b/packages/ui/dist/copy/alert/runtime/components/alert.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as feedback } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as feedback } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/alert.js
 var J3w1Alert = class extends J3w1Element {
 	static componentId = "alert";
 	static version = "4.0.0";
-	static implementationId = "sha256-D/UE6iF8Es5ira9X/X3Hlo5OO/Lzy3n/9s9vlkV7zJU=";
+	static implementationId = "sha256-6Wo+BnYA6udYTk6XDw6PR9MtJYx0FznliTgiGt+lVxo=";
 	static connect = feedback;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/alert/runtime/register/alert.js b/packages/ui/dist/copy/alert/runtime/register/alert.js
index c0a9872de..4398942dd 100644
--- a/packages/ui/dist/copy/alert/runtime/register/alert.js
+++ b/packages/ui/dist/copy/alert/runtime/register/alert.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Alert } from "../components/alert.js";
 //#region .cache/ui-build/entries/register/alert.js
 var element = registerElement("j3w1-alert", J3w1Alert);
diff --git a/packages/ui/dist/copy/alert/tokens.css b/packages/ui/dist/copy/alert/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/alert/tokens.css
+++ b/packages/ui/dist/copy/alert/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/avatar/component.css b/packages/ui/dist/copy/avatar/component.css
index 9baf61ab1..52ea6f55e 100644
--- a/packages/ui/dist/copy/avatar/component.css
+++ b/packages/ui/dist/copy/avatar/component.css
@@ -8,7 +8,7 @@ j3w1-avatar {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-avatar, j3w1-avatar *, j3w1-avatar *::before, j3w1-avatar *::after { box-sizing: border-box; }
-j3w1-avatar button, j3w1-avatar input, j3w1-avatar select, j3w1-avatar textarea { font: inherit; }
+j3w1-avatar :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-avatar ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,8 @@ j3w1-avatar .sr-only {
   border: 0;
 }
 
-j3w1-avatar .avatar {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-avatar .avatar :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-avatar .avatar {display:inline-grid;place-items:center;inline-size:var(--space-32);block-size:var(--space-32);padding:0;overflow:hidden;font-weight:var(--font-weight-bold)}j3w1-avatar .avatar img {width:100%;height:100%;object-fit:cover}j3w1-avatar .avatar[data-loading] [data-avatar-fallback],j3w1-avatar .avatar[data-error] [data-avatar-fallback] {display:block}
+j3w1-avatar .avatar {box-sizing:border-box;display:inline-grid;gap:var(--space-12);min-width:0;padding:0;background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;place-items:center;inline-size:var(--space-32);block-size:var(--space-32);overflow:hidden;font-weight:var(--font-weight-bold)}
+j3w1-avatar .avatar :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}j3w1-avatar .avatar img {width:100%;height:100%;object-fit:cover}j3w1-avatar .avatar[data-loading] [data-avatar-fallback],j3w1-avatar .avatar[data-error] [data-avatar-fallback] {display:block}
 
 j3w1-avatar [hidden] { display: none !important; }
 j3w1-avatar .j3w1-visually-hidden {
diff --git a/packages/ui/dist/copy/avatar/index.html b/packages/ui/dist/copy/avatar/index.html
index 10c33e0e9..3695cb75e 100644
--- a/packages/ui/dist/copy/avatar/index.html
+++ b/packages/ui/dist/copy/avatar/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Avatar · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-avatar id="example-avatar-default"><span class="avatar" role="img" aria-label="Avery Kim"><span data-avatar-fallback="" aria-hidden="true">AK</span></span></j3w1-avatar><script type="module" src="./runtime/register/avatar.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Avatar · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-avatar id="example-avatar-default"><span class="avatar" role="img" aria-label="Avery Kim"><span data-avatar-fallback="" aria-hidden="true">AK</span></span></j3w1-avatar><script type="module" src="./runtime/register/avatar.js"></script></body></html>
diff --git a/packages/ui/dist/copy/avatar/manifest.json b/packages/ui/dist/copy/avatar/manifest.json
index 88d890514..46b93ddd0 100644
--- a/packages/ui/dist/copy/avatar/manifest.json
+++ b/packages/ui/dist/copy/avatar/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/avatar.md",
   "dependencies": [
     "register/avatar.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/avatar.js",
-    "chunks/display-dj9YaBfn.js"
+    "chunks/display-Jm9bAsnb.js"
   ],
   "files": {
-    "runtime/register/avatar.js": "sha256-5DYNLWi7ycaPY4mr7DXYNOCVEbo97Pnr3INC7MFexbM=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/avatar.js": "sha256-ewC6RhKRQwH+7jEF62lU5q8KPwKXfyEg/JWISD2N/FE=",
-    "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-XYCR7yVoWMnpJrQG4A+pL3xESyHR6OKMuwJfZGgDpKA=",
+    "runtime/register/avatar.js": "sha256-vcm/QDMxjQTfPDcJ7Q7TIwknLisAbwTawOMwzAfjzhg=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/avatar.js": "sha256-eST4r5/Ji77KAR4qwQ+HUIyQL67gllpCSiBqpODqeW4=",
+    "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-5uftL4p30t4ItPscyYR/4jS31cRz/VU0Ga2CL/3fjhg=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-R1Q+6UFu76jOlVP9cadBrMxVS3+Yb2JgIDkcnKxWvtk=",
-    "index.html": "sha256-6wIoUvdBP1c8DCQbO8yN3AbgSvI4jPyNvKs6IYYA/7o=",
+    "index.html": "sha256-0+odnlYi/Hd9a2qUTsn5PJwVUk58HsFdCUO9S39AFlg=",
     "README.md": "sha256-u+Rv0zskk5yOTH1pAzZ2eB3pId21guCqbzSFwIC5pcw="
   }
 }
diff --git a/packages/ui/dist/copy/avatar/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/avatar/runtime/chunks/choice-B7mo5Eq3.js
similarity index 98%
rename from packages/ui/dist/copy/avatar/runtime/chunks/choice-Db_w_BOQ.js
rename to packages/ui/dist/copy/avatar/runtime/chunks/choice-B7mo5Eq3.js
index aebc478b6..849c80b8b 100644
--- a/packages/ui/dist/copy/avatar/runtime/chunks/choice-Db_w_BOQ.js
+++ b/packages/ui/dist/copy/avatar/runtime/chunks/choice-B7mo5Eq3.js
@@ -31,6 +31,12 @@ function identify(root, node, suffix) {
 function nativeInput(input, type = "input") {
 	input.dispatchEvent(new Event(type, { bubbles: true }));
 }
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
 function rove(items, index, focus = true) {
 	if (!items.length) return null;
 	const next = items[(index + items.length) % items.length];
@@ -929,4 +935,4 @@ function enhanceControls(root) {
 	};
 }
 //#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/code-editor/runtime/chunks/display-dj9YaBfn.js b/packages/ui/dist/copy/avatar/runtime/chunks/display-Jm9bAsnb.js
similarity index 98%
rename from packages/ui/dist/copy/code-editor/runtime/chunks/display-dj9YaBfn.js
rename to packages/ui/dist/copy/avatar/runtime/chunks/display-Jm9bAsnb.js
index 80833d5da..5bc817830 100644
--- a/packages/ui/dist/copy/code-editor/runtime/chunks/display-dj9YaBfn.js
+++ b/packages/ui/dist/copy/avatar/runtime/chunks/display-Jm9bAsnb.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/display.js
 function avatar(root, { on }) {
 	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
diff --git a/packages/ui/dist/copy/admin-form/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/avatar/runtime/chunks/element-Dovcr9Ky.js
similarity index 99%
rename from packages/ui/dist/copy/admin-form/runtime/chunks/element-C1XeXVYC.js
rename to packages/ui/dist/copy/avatar/runtime/chunks/element-Dovcr9Ky.js
index a943f150d..aa7a67cb4 100644
--- a/packages/ui/dist/copy/admin-form/runtime/chunks/element-C1XeXVYC.js
+++ b/packages/ui/dist/copy/avatar/runtime/chunks/element-Dovcr9Ky.js
@@ -1,4 +1,4 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/internal/element.js
 var HTMLElementBase = globalThis.HTMLElement ?? class {};
 var nextInstance = 0;
diff --git a/packages/ui/dist/copy/avatar/runtime/components/avatar.js b/packages/ui/dist/copy/avatar/runtime/components/avatar.js
index e173006c6..39f8bb7e4 100644
--- a/packages/ui/dist/copy/avatar/runtime/components/avatar.js
+++ b/packages/ui/dist/copy/avatar/runtime/components/avatar.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as avatar } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as avatar } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/avatar.js
 var J3w1Avatar = class extends J3w1Element {
 	static componentId = "avatar";
 	static version = "4.0.0";
-	static implementationId = "sha256-oKaTLRzIK5qK9lvYH/WxVObpYJISyDSenNJcmBSIbAE=";
+	static implementationId = "sha256-y5w6c1MQTafVvxzhJ5TzYxwGvju264CUxS2D23RvGCQ=";
 	static connect = avatar;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/avatar/runtime/register/avatar.js b/packages/ui/dist/copy/avatar/runtime/register/avatar.js
index b2c66d2ae..9367113f3 100644
--- a/packages/ui/dist/copy/avatar/runtime/register/avatar.js
+++ b/packages/ui/dist/copy/avatar/runtime/register/avatar.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Avatar } from "../components/avatar.js";
 //#region .cache/ui-build/entries/register/avatar.js
 var element = registerElement("j3w1-avatar", J3w1Avatar);
diff --git a/packages/ui/dist/copy/avatar/tokens.css b/packages/ui/dist/copy/avatar/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/avatar/tokens.css
+++ b/packages/ui/dist/copy/avatar/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/badge/component.css b/packages/ui/dist/copy/badge/component.css
index f41cb0759..c9e587412 100644
--- a/packages/ui/dist/copy/badge/component.css
+++ b/packages/ui/dist/copy/badge/component.css
@@ -8,7 +8,7 @@ j3w1-badge {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-badge, j3w1-badge *, j3w1-badge *::before, j3w1-badge *::after { box-sizing: border-box; }
-j3w1-badge button, j3w1-badge input, j3w1-badge select, j3w1-badge textarea { font: inherit; }
+j3w1-badge :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-badge ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -113,23 +113,6 @@ j3w1-badge .badge-outline {
   border-color: var(--_border);
   color: var(--_text);
 }
-j3w1-badge .badge-empty {
-  width: var(--space-8);
-  height: var(--space-8);
-  min-width: 0;
-  padding: 0;
-  gap: 0;
-}
-
-j3w1-badge .badge-empty .badge-glyph,
-j3w1-badge .badge-empty .badge-text {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-}
 
 @media (forced-colors: active) {
   j3w1-badge .badge {
diff --git a/packages/ui/dist/copy/badge/index.html b/packages/ui/dist/copy/badge/index.html
index ad5ead5ba..6618bd482 100644
--- a/packages/ui/dist/copy/badge/index.html
+++ b/packages/ui/dist/copy/badge/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Badge · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-badge id="example-badge-status"><span class="badge badge-danger"><span class="badge-glyph" aria-hidden="true">✕</span><span class="badge-text">Failed</span></span>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Badge · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-badge id="example-badge-status"><span class="badge badge-danger"><span class="badge-glyph" aria-hidden="true">✕</span><span class="badge-text">Failed</span></span>
 <span class="badge badge-warning"><span class="badge-glyph" aria-hidden="true">!</span><span class="badge-text">Drifted</span></span>
 <span class="badge badge-success"><span class="badge-glyph" aria-hidden="true">✓</span><span class="badge-text">Verified</span></span>
 <span class="badge badge-info"><span class="badge-glyph" aria-hidden="true">i</span><span class="badge-text">Proposed</span></span>
diff --git a/packages/ui/dist/copy/badge/manifest.json b/packages/ui/dist/copy/badge/manifest.json
index ac71ead8b..1f2ecca07 100644
--- a/packages/ui/dist/copy/badge/manifest.json
+++ b/packages/ui/dist/copy/badge/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/badge.md",
   "dependencies": [
     "register/badge.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/badge.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/badge.js": "sha256-v2MgL8efVFZ4zJl9rvTmIYZxswZz69oeyrHTaYTAojs=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/badge.js": "sha256-l72iC8CAJp/xCXpSX/oJ3xsz8VT4N6UAcVhVSKeC/zs=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-K2TPkFZfKUt35HniL/ub9icdMukZ7wCx0S5+D1FOv8Y=",
+    "runtime/register/badge.js": "sha256-OMhgJ1tgBmSwhSWWFds0Npmgs46ZFUk4HYOnBGAntC4=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/badge.js": "sha256-7aVCilfmosfSHQDe+hY74Ms2tAC1jMlxtTExgZ+istY=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-au/P4qbkjvG1QpFUYQDc35IhSbbhmFRxoXhu7zPifn8=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-rXaOLdDbEK5SMtYsw5TegOMtcnLijmgtU07RVrvJx8o=",
-    "index.html": "sha256-adxgp7aQqS8TWwQ8h7ZunxvDdJpxjaS8oGagTh0d+s0=",
+    "index.html": "sha256-vhJcM8fdSzyuaUlcyXa90v3Bjkc89EZicjoRTNChWQM=",
     "README.md": "sha256-5TsNDY9d5k6gLYa4KQycTh+1uwvXsoF0XilR9xhKVVw="
   }
 }
diff --git a/packages/ui/dist/copy/badge/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/badge/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/badge/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/badge/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/badge/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/badge/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/badge/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/badge/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/badge/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/badge/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/badge/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/badge/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/button-group/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/badge/runtime/chunks/native-BjBt1sUh.js
similarity index 98%
rename from packages/ui/dist/copy/button-group/runtime/chunks/native-CAzZmDKR.js
rename to packages/ui/dist/copy/badge/runtime/chunks/native-BjBt1sUh.js
index 558c774e5..032f76c74 100644
--- a/packages/ui/dist/copy/button-group/runtime/chunks/native-CAzZmDKR.js
+++ b/packages/ui/dist/copy/badge/runtime/chunks/native-BjBt1sUh.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/native.js
 function content() {
 	return {};
diff --git a/packages/ui/dist/copy/badge/runtime/components/badge.js b/packages/ui/dist/copy/badge/runtime/components/badge.js
index 75cd2918a..640dfde53 100644
--- a/packages/ui/dist/copy/badge/runtime/components/badge.js
+++ b/packages/ui/dist/copy/badge/runtime/components/badge.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/badge.js
 var J3w1Badge = class extends J3w1Element {
 	static componentId = "badge";
 	static version = "4.0.0";
-	static implementationId = "sha256-7r4xdzZloUX+vqRo4Hc0GjD4Kj3pwVOKBfHyGYFV4fU=";
+	static implementationId = "sha256-4j+faVdrUDtcCc6a5/1Y+y9U30DXfpq/Frm/Z0bO1i8=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/badge/runtime/register/badge.js b/packages/ui/dist/copy/badge/runtime/register/badge.js
index 9e0027214..2fe7fff68 100644
--- a/packages/ui/dist/copy/badge/runtime/register/badge.js
+++ b/packages/ui/dist/copy/badge/runtime/register/badge.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Badge } from "../components/badge.js";
 //#region .cache/ui-build/entries/register/badge.js
 var element = registerElement("j3w1-badge", J3w1Badge);
diff --git a/packages/ui/dist/copy/badge/tokens.css b/packages/ui/dist/copy/badge/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/badge/tokens.css
+++ b/packages/ui/dist/copy/badge/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/breadcrumbs/component.css b/packages/ui/dist/copy/breadcrumbs/component.css
index e903deb0f..1f408a395 100644
--- a/packages/ui/dist/copy/breadcrumbs/component.css
+++ b/packages/ui/dist/copy/breadcrumbs/component.css
@@ -8,7 +8,7 @@ j3w1-breadcrumbs {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-breadcrumbs, j3w1-breadcrumbs *, j3w1-breadcrumbs *::before, j3w1-breadcrumbs *::after { box-sizing: border-box; }
-j3w1-breadcrumbs button, j3w1-breadcrumbs input, j3w1-breadcrumbs select, j3w1-breadcrumbs textarea { font: inherit; }
+j3w1-breadcrumbs :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-breadcrumbs ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -44,7 +44,7 @@ j3w1-breadcrumbs .breadcrumbs-list {
 j3w1-breadcrumbs .breadcrumbs-item {
   display: inline-flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
 }
 
 j3w1-breadcrumbs .breadcrumbs-item[hidden] {
@@ -68,8 +68,8 @@ j3w1-breadcrumbs .breadcrumbs-link {
 }
 
 j3w1-breadcrumbs .breadcrumbs-ellipsis {
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-4);
   background: transparent;
   border: 0;
@@ -79,7 +79,7 @@ j3w1-breadcrumbs .breadcrumbs-ellipsis {
   cursor: pointer;
 }
 j3w1-breadcrumbs .breadcrumbs-link:hover {
-  background: var(--color-interaction-hover-bg-strong);
+  background: var(--color-interaction-hover-bg);
   color: var(--color-text-link-hover);
   text-decoration-thickness: var(--border-width-emphasis);
 }
diff --git a/packages/ui/dist/copy/breadcrumbs/index.html b/packages/ui/dist/copy/breadcrumbs/index.html
index c4c336906..1fd0b679d 100644
--- a/packages/ui/dist/copy/breadcrumbs/index.html
+++ b/packages/ui/dist/copy/breadcrumbs/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Breadcrumbs · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-breadcrumbs id="example-breadcrumbs-default"><nav class="breadcrumbs" aria-label="Breadcrumb">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Breadcrumbs · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-breadcrumbs id="example-breadcrumbs-default"><nav class="breadcrumbs" aria-label="Breadcrumb">
   <ol class="breadcrumbs-list">
     <li class="breadcrumbs-item"><a class="breadcrumbs-link" href="#example-breadcrumbs-default-bc-home">Home</a><span class="breadcrumbs-separator" aria-hidden="true">/</span></li>
     <li class="breadcrumbs-item breadcrumbs-item-ellipsis" hidden=""><button class="breadcrumbs-ellipsis" type="button" aria-expanded="false" aria-label="Show 2 hidden levels" aria-controls="example-breadcrumbs-default-breadcrumb-levels-0">…</button><span class="breadcrumbs-separator" aria-hidden="true">/</span><ol id="example-breadcrumbs-default-breadcrumb-levels-0" hidden=""><li><a class="breadcrumbs-link" href="#example-breadcrumbs-default-level-0">Level 1</a></li><li><a class="breadcrumbs-link" href="#example-breadcrumbs-default-level-1">Level 2</a></li></ol></li>
diff --git a/packages/ui/dist/copy/breadcrumbs/manifest.json b/packages/ui/dist/copy/breadcrumbs/manifest.json
index a21bd93d9..838c39429 100644
--- a/packages/ui/dist/copy/breadcrumbs/manifest.json
+++ b/packages/ui/dist/copy/breadcrumbs/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/breadcrumbs.md",
   "dependencies": [
     "register/breadcrumbs.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/breadcrumbs.js",
-    "chunks/navigation-Dt8ap-9J.js"
+    "chunks/navigation-BfNzDYZB.js"
   ],
   "files": {
-    "runtime/register/breadcrumbs.js": "sha256-Q0duBAI2kOEbn33M/8S8M3ciNcrLKYFaLDl2PvMF4MY=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/breadcrumbs.js": "sha256-GtJDiM9iN77t0CIkD7Feiu8A1MQ5DeirIUfSVxO6o7Q=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-pJjvksTD6NTZ2QRx/SBxS4j7xy1rVLprovo5OnTOafs=",
+    "runtime/register/breadcrumbs.js": "sha256-TBQ50OLAdUaAgno93QicDrgSoW5MfLyWLXoR+GWyw0M=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/breadcrumbs.js": "sha256-DgJ8uy8nkN1QOm3/zq3cYvs7xmhXCyPkXdhu3CDEE00=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-+Zc2EEKW9OfZl8s+wFiHlzjJHlyVTyGwZDbPlyRKx4A=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-W9qk0XtcetNK1me7748lByEMSMUZyP6NT//vet/Kt0I=",
-    "index.html": "sha256-OWJN8qhGZ4YIN1OKUp03drZk8CY4D66GaO0t6LtKvJs=",
+    "index.html": "sha256-Q8aZfYganYA/1sF70oMXKr7Fn/icqzSWVNlbxC7x00U=",
     "README.md": "sha256-KtiYxcVwfGDIDiTnYI/c2MhmVKez7eLztyU55QJQXgs="
   }
 }
diff --git a/packages/ui/dist/copy/breadcrumbs/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/breadcrumbs/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/breadcrumbs/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/breadcrumbs/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/breadcrumbs/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/breadcrumbs/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/breadcrumbs/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/breadcrumbs/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/breadcrumbs/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/breadcrumbs/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/breadcrumbs/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/breadcrumbs/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/breadcrumbs/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/breadcrumbs/runtime/chunks/navigation-BfNzDYZB.js
similarity index 96%
rename from packages/ui/dist/copy/breadcrumbs/runtime/chunks/navigation-Dt8ap-9J.js
rename to packages/ui/dist/copy/breadcrumbs/runtime/chunks/navigation-BfNzDYZB.js
index 81201c8d5..db2779553 100644
--- a/packages/ui/dist/copy/breadcrumbs/runtime/chunks/navigation-Dt8ap-9J.js
+++ b/packages/ui/dist/copy/breadcrumbs/runtime/chunks/navigation-BfNzDYZB.js
@@ -1,4 +1,4 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/navigation.js
 function tabs(root, { on }, listOverride) {
 	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
@@ -81,7 +81,13 @@ function toolbar(root, { on }) {
 			"End"
 		].includes(event.key)) return;
 		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
 	});
 	on(bar, "click", (event) => {
 		const button = event.target.closest("button[aria-pressed]");
@@ -321,7 +327,11 @@ function menu(root, { on }) {
 			"End"
 		].includes(event.key)) {
 			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
 		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
 			event.preventDefault();
 			event.stopPropagation();
diff --git a/packages/ui/dist/copy/breadcrumbs/runtime/components/breadcrumbs.js b/packages/ui/dist/copy/breadcrumbs/runtime/components/breadcrumbs.js
index 8c0afe607..5ce93d88b 100644
--- a/packages/ui/dist/copy/breadcrumbs/runtime/components/breadcrumbs.js
+++ b/packages/ui/dist/copy/breadcrumbs/runtime/components/breadcrumbs.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as disclosure } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as disclosure } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/breadcrumbs.js
 var J3w1Breadcrumbs = class extends J3w1Element {
 	static componentId = "breadcrumbs";
 	static version = "4.0.0";
-	static implementationId = "sha256-87YN9cPa7cDF4Ft74THtpIUQxKKqJQXA7fCZzmQ5DwA=";
+	static implementationId = "sha256-9uiBLPIbEVI200s39xDO7x0K09v+wPg5xcoMI5B5TbY=";
 	static connect = disclosure;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/breadcrumbs/runtime/register/breadcrumbs.js b/packages/ui/dist/copy/breadcrumbs/runtime/register/breadcrumbs.js
index 087fe5e6b..1b41f187d 100644
--- a/packages/ui/dist/copy/breadcrumbs/runtime/register/breadcrumbs.js
+++ b/packages/ui/dist/copy/breadcrumbs/runtime/register/breadcrumbs.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Breadcrumbs } from "../components/breadcrumbs.js";
 //#region .cache/ui-build/entries/register/breadcrumbs.js
 var element = registerElement("j3w1-breadcrumbs", J3w1Breadcrumbs);
diff --git a/packages/ui/dist/copy/breadcrumbs/tokens.css b/packages/ui/dist/copy/breadcrumbs/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/breadcrumbs/tokens.css
+++ b/packages/ui/dist/copy/breadcrumbs/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/button-group/component.css b/packages/ui/dist/copy/button-group/component.css
index c0af43d5f..7ef8204e8 100644
--- a/packages/ui/dist/copy/button-group/component.css
+++ b/packages/ui/dist/copy/button-group/component.css
@@ -8,7 +8,7 @@ j3w1-button-group {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-button-group, j3w1-button-group *, j3w1-button-group *::before, j3w1-button-group *::after { box-sizing: border-box; }
-j3w1-button-group button, j3w1-button-group input, j3w1-button-group select, j3w1-button-group textarea { font: inherit; }
+j3w1-button-group :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-button-group ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,12 +25,136 @@ j3w1-button-group .sr-only {
   border: 0;
 }
 
-j3w1-button-group .button-group {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
+j3w1-button-group .button,
+j3w1-button-group .dialog-button,
+j3w1-button-group .empty-state-action,
+j3w1-button-group .file-input-button,
+j3w1-button-group button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-button-group .button,
+j3w1-button-group .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-button-group .button-secondary,
+j3w1-button-group .dialog-button,
+j3w1-button-group .empty-state-action,
+j3w1-button-group .file-input-button,
+j3w1-button-group button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-button-group .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-button-group .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-button-group .button-destructive-filled,
+j3w1-button-group .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-button-group :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-button-group .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-button-group :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-button-group :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-button-group :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-button-group .dialog-button,
+  j3w1-button-group .empty-state-action,
+  j3w1-button-group .file-input-button,
+  j3w1-button-group button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-button-group :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+j3w1-button-group .button-group {box-sizing:border-box;display:flex;gap:var(--space-4);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;flex-wrap:wrap}
 j3w1-button-group .button-group-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-button-group .button-group :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-button-group .button-group :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-button-group .button-group :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-j3w1-button-group .button-group-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
-j3w1-button-group .button-group {display:flex;flex-wrap:wrap;gap:var(--space-4)}
 
 j3w1-button-group [hidden] { display: none !important; }
 j3w1-button-group .j3w1-visually-hidden {
diff --git a/packages/ui/dist/copy/button-group/index.html b/packages/ui/dist/copy/button-group/index.html
index bd3c88682..0c6edb893 100644
--- a/packages/ui/dist/copy/button-group/index.html
+++ b/packages/ui/dist/copy/button-group/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Button group · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-button-group id="example-button-group-default"><div class="button-group" role="group" aria-label="Document actions"><button class="button-group-control" type="button" data-action="save" data-demo-focus-target="">Save</button><button class="button-group-control" type="button" data-action="duplicate">Duplicate</button><button class="button-group-control" type="button" disabled="">Archive</button></div></j3w1-button-group><script type="module" src="./runtime/register/button-group.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Button group · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-button-group id="example-button-group-default"><div class="button-group" role="group" aria-label="Document actions"><button class="button-group-control" type="button" data-action="save" data-demo-focus-target="">Save</button><button class="button-group-control" type="button" data-action="duplicate">Duplicate</button><button class="button-group-control" type="button" disabled="">Archive</button></div></j3w1-button-group><script type="module" src="./runtime/register/button-group.js"></script></body></html>
diff --git a/packages/ui/dist/copy/button-group/manifest.json b/packages/ui/dist/copy/button-group/manifest.json
index d0164cc8e..2c71a9f2e 100644
--- a/packages/ui/dist/copy/button-group/manifest.json
+++ b/packages/ui/dist/copy/button-group/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/button-group.md",
   "dependencies": [
     "register/button-group.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/button-group.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/button-group.js": "sha256-iOfzUy8ZfhYmriDjbhxJtVBL2w+EPgppfO8UNoOm6QM=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/button-group.js": "sha256-9kyXdp1HjHBA1/8MAvS/4B8TzQnyUUIVFbxkMteeCH4=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-f5VJ2bwUNXUnsb5AcdxUYbcOC7PeghM/cnXvDSuGuMs=",
+    "runtime/register/button-group.js": "sha256-n7o1qzR7ijgCLKarzz6j0E+PWPYtlemBEaNgIZwu2R4=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/button-group.js": "sha256-aYOeTtqsQuXqHLxIh17+FGxd0WuETY31YqUOFh32A4A=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-0HQ2nfSUmtlZV8Bwsob1wBnVODkxbeI16OqeME3hc2M=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-4NLobHuAfZnWUQDNQ3ENH9ucyjTTUTD6gk0XV7SHGng=",
-    "index.html": "sha256-jp7d1/nw1z4Jpji1Vc8gp8BdBvkGTLC7tdVzkGSKG28=",
+    "index.html": "sha256-9LPOwo7I6LrlkFlPCMTTeH5e5/ncW+/6Qpk6VBEoVnI=",
     "README.md": "sha256-lxk9uEo0CDVb02dn3zqLATkEEbC7gk0mkkX9yRpWCC8="
   }
 }
diff --git a/packages/ui/dist/copy/button-group/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/button-group/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/button-group/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/button-group/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/button-group/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/button-group/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/button-group/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/button-group/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/button-group/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/button-group/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/button-group/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/button-group/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/admin-form/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/button-group/runtime/chunks/native-BjBt1sUh.js
similarity index 98%
rename from packages/ui/dist/copy/admin-form/runtime/chunks/native-CAzZmDKR.js
rename to packages/ui/dist/copy/button-group/runtime/chunks/native-BjBt1sUh.js
index 558c774e5..032f76c74 100644
--- a/packages/ui/dist/copy/admin-form/runtime/chunks/native-CAzZmDKR.js
+++ b/packages/ui/dist/copy/button-group/runtime/chunks/native-BjBt1sUh.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/native.js
 function content() {
 	return {};
diff --git a/packages/ui/dist/copy/button-group/runtime/components/button-group.js b/packages/ui/dist/copy/button-group/runtime/components/button-group.js
index aaa99816c..e5443b0f9 100644
--- a/packages/ui/dist/copy/button-group/runtime/components/button-group.js
+++ b/packages/ui/dist/copy/button-group/runtime/components/button-group.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as actions } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as actions } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/button-group.js
 var J3w1ButtonGroup = class extends J3w1Element {
 	static componentId = "button-group";
 	static version = "4.0.0";
-	static implementationId = "sha256-4nMwz9kpZ4odBRA12jsDZ86Fx+dDkBCJD7OkQHdIGDY=";
+	static implementationId = "sha256-QC6YHzPpUytpyeDknjyX9Ke/akglG1NzBtJnCYjqgaA=";
 	static connect = actions;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...[
diff --git a/packages/ui/dist/copy/button-group/runtime/register/button-group.js b/packages/ui/dist/copy/button-group/runtime/register/button-group.js
index 81edee7d1..86bb9c765 100644
--- a/packages/ui/dist/copy/button-group/runtime/register/button-group.js
+++ b/packages/ui/dist/copy/button-group/runtime/register/button-group.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1ButtonGroup } from "../components/button-group.js";
 //#region .cache/ui-build/entries/register/button-group.js
 var element = registerElement("j3w1-button-group", J3w1ButtonGroup);
diff --git a/packages/ui/dist/copy/button-group/tokens.css b/packages/ui/dist/copy/button-group/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/button-group/tokens.css
+++ b/packages/ui/dist/copy/button-group/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/button/component.css b/packages/ui/dist/copy/button/component.css
index c2b89697b..dc57ebaef 100644
--- a/packages/ui/dist/copy/button/component.css
+++ b/packages/ui/dist/copy/button/component.css
@@ -8,7 +8,7 @@ j3w1-button {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-button, j3w1-button *, j3w1-button *::before, j3w1-button *::after { box-sizing: border-box; }
-j3w1-button button, j3w1-button input, j3w1-button select, j3w1-button textarea { font: inherit; }
+j3w1-button :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-button ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,21 +25,17 @@ j3w1-button .sr-only {
   border: 0;
 }
 
-j3w1-button .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+j3w1-button .button,
+j3w1-button .dialog-button,
+j3w1-button .empty-state-action,
+j3w1-button .file-input-button,
+j3w1-button button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -52,8 +48,23 @@ j3w1-button .button {
   cursor: pointer;
   outline: 0;
 }
+j3w1-button .button,
+j3w1-button .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-j3w1-button .button-secondary {
+j3w1-button .button-secondary,
+j3w1-button .dialog-button,
+j3w1-button .empty-state-action,
+j3w1-button .file-input-button,
+j3w1-button button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -85,7 +96,8 @@ j3w1-button .button-destructive {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-j3w1-button .button-destructive-filled {
+j3w1-button .button-destructive-filled,
+j3w1-button .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -95,6 +107,49 @@ j3w1-button .button-destructive-filled {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  j3w1-button :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-button .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-button :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-button :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-button :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-button .dialog-button,
+  j3w1-button .empty-state-action,
+  j3w1-button .file-input-button,
+  j3w1-button button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-button :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 j3w1-button .button-icon {
   flex: none;
@@ -112,25 +167,6 @@ j3w1-button .button-loading {
 j3w1-button .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-button .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-button .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-button .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-button .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-button .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -142,16 +178,6 @@ j3w1-button .button[aria-busy="true"] .button-icon {
 j3w1-button .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-button .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-button .button {
@@ -160,9 +186,6 @@ j3w1-button .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-button .button:focus-visible {
-    outline-color: Highlight;
-  }
 }
 
 j3w1-button [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/button/index.html b/packages/ui/dist/copy/button/index.html
index 02a4610c7..5da4988a2 100644
--- a/packages/ui/dist/copy/button/index.html
+++ b/packages/ui/dist/copy/button/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Button · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-button id="example-button-default"><button class="button" type="button">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Button · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-button id="example-button-default"><button class="button" type="button">
   <svg class="button-icon" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3 8.5l3 3 7-7"></path></svg>
   <span class="button-loading" aria-hidden="true">⋯</span>
   <span class="button-label">Save changes</span>
diff --git a/packages/ui/dist/copy/button/manifest.json b/packages/ui/dist/copy/button/manifest.json
index 6bad16451..e79ab2ebf 100644
--- a/packages/ui/dist/copy/button/manifest.json
+++ b/packages/ui/dist/copy/button/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/button.md",
   "dependencies": [
     "register/button.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/button.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/button.js": "sha256-nrgSUK+JnRhipV1b5VKANBtP+ap6ANYd4xnpZYpHYM0=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/button.js": "sha256-uMPPvidQWPs9e0OGW6Q+cI2izylinOUSgrBAM94vxAA=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-79ycU5ojNv1Z2yHzJ6KXDmshFL1we3mQNOoIwfMXnyg=",
+    "runtime/register/button.js": "sha256-HvNFbu03EVUxXcYT4la11XNeC522dyJdNi3USEnMuL0=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/button.js": "sha256-csyoBHNGYp8/JTgXnOjZuGEFG9u6KytBLHY3MtJdxcs=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-3CHgfHOT+xBve253iRY/PvSWDiyrTR4uMxiCy2jC7OQ=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-kLEcMMhF4Tv+byKkImEgGIqqR+QYh6uOOCz/mg5hkPs=",
-    "index.html": "sha256-uj00vnflsiaqN+2apiLHqJpCJQQxYasFb7KAWllw5dM=",
+    "index.html": "sha256-O3BLqD/CIvh8B0MWobTc8e8XgjfKiYym6Ekh+jLDiGU=",
     "README.md": "sha256-q0HhyjwcljqPHR5pUVYK1uw9OCz+qKStetrXmYwvBR0="
   }
 }
diff --git a/packages/ui/dist/copy/button/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/button/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/button/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/button/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/button/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/button/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/button/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/button/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/button/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/button/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/button/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/button/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/button/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/button/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/button/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/button/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/button/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/button/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/button/runtime/components/button.js b/packages/ui/dist/copy/button/runtime/components/button.js
index 13b2ecc87..3dfd4d373 100644
--- a/packages/ui/dist/copy/button/runtime/components/button.js
+++ b/packages/ui/dist/copy/button/runtime/components/button.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as actions } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as actions } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/button.js
 var J3w1Button = class extends J3w1Element {
 	static componentId = "button";
 	static version = "4.0.0";
-	static implementationId = "sha256-KJsije7hrwEBTy2GsHhegHPN50aD1js7EUW9wwGysM4=";
+	static implementationId = "sha256-5XqIG0jRl2EIptqWgZIiuSKdNf0pHpMOZB14A1W3DqU=";
 	static connect = actions;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...[
diff --git a/packages/ui/dist/copy/button/runtime/register/button.js b/packages/ui/dist/copy/button/runtime/register/button.js
index 8d63fb5fe..b01aa4dae 100644
--- a/packages/ui/dist/copy/button/runtime/register/button.js
+++ b/packages/ui/dist/copy/button/runtime/register/button.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Button } from "../components/button.js";
 //#region .cache/ui-build/entries/register/button.js
 var element = registerElement("j3w1-button", J3w1Button);
diff --git a/packages/ui/dist/copy/button/tokens.css b/packages/ui/dist/copy/button/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/button/tokens.css
+++ b/packages/ui/dist/copy/button/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/card/component.css b/packages/ui/dist/copy/card/component.css
index 461412f36..4de7988d9 100644
--- a/packages/ui/dist/copy/card/component.css
+++ b/packages/ui/dist/copy/card/component.css
@@ -8,7 +8,7 @@ j3w1-card {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-card, j3w1-card *, j3w1-card *::before, j3w1-card *::after { box-sizing: border-box; }
-j3w1-card button, j3w1-card input, j3w1-card select, j3w1-card textarea { font: inherit; }
+j3w1-card :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-card ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -30,7 +30,7 @@ j3w1-card .card {
   gap: var(--space-4);
   min-width: 0;
   max-width: calc(var(--font-size-ui-md) * 28);
-  padding: var(--density-control-padding-x, 12px);
+  padding: var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-default);
@@ -67,7 +67,7 @@ j3w1-card .card-selectable {
 
 j3w1-card .card-group {
   display: grid;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
 }
 j3w1-card .card-link:hover,
@@ -102,8 +102,8 @@ j3w1-card .card-selectable[aria-selected="true"]:hover {
   border-color: var(--color-interaction-selection-bg);
 }
 j3w1-card .card-selectable[aria-selected="true"]:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 @media (hover: none) {
diff --git a/packages/ui/dist/copy/card/index.html b/packages/ui/dist/copy/card/index.html
index 91b274b47..7b224bfaa 100644
--- a/packages/ui/dist/copy/card/index.html
+++ b/packages/ui/dist/copy/card/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Card · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-card id="example-card-default"><article class="card">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Card · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-card id="example-card-default"><article class="card">
   <h3 class="card-title">Window gaps</h3>
   <p class="card-body">Inner 14px, outer −2px; the bar sits above the gap and the border is 1px.</p>
   <p class="card-meta">Decided in D-009 · 3 fixtures</p>
diff --git a/packages/ui/dist/copy/card/manifest.json b/packages/ui/dist/copy/card/manifest.json
index 8ea13539a..b80b3780b 100644
--- a/packages/ui/dist/copy/card/manifest.json
+++ b/packages/ui/dist/copy/card/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/card.md",
   "dependencies": [
     "register/card.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/card.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/card.js": "sha256-zbAWuZuKNPZkVbl9pW5S2Mzg9/mlHJ7BeQEgQAUhrlA=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/card.js": "sha256-REUcny20Az6YiLn0F6l0ZkmNrj18xAqRj9bWUmvkhLo=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-pfXQBPkrp6iF0OlQiLQh9DMUwtsCinOaL1HLAjlChII=",
+    "runtime/register/card.js": "sha256-4IdkxATA99m7+u4hZzbgLzxNtZyQcI8WI8kkDxErCxI=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/card.js": "sha256-CE1Pt81XkHCmaZj7t3LqXTUnuvHd4E3/Od5t2v07ltA=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-FIugfi7dJgtnME2RJdIYZUQl/3O/WVR1fu23onC7U/M=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-Rc0IwITP8X0cKscYMBt4LgzFbntPHkCAdDQ4xLh2LXs=",
-    "index.html": "sha256-IvoBispcGfdc1cclMkSpIk4mImhXxUS8/bDAr0dLmcU=",
+    "index.html": "sha256-2B88t8s0Q7ugu+AiqBFD2B4OGRlJDRiO0Sz6gtWNyJ0=",
     "README.md": "sha256-7NvZudM1FuKwW/ZySKs98FmFwxwir6nLM/lGAvvcI+4="
   }
 }
diff --git a/packages/ui/dist/copy/card/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/card/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/card/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/card/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/card/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/card/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/card/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/card/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/card/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/card/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/card/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/card/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/card/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/card/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/card/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/card/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/card/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/card/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/card/runtime/components/card.js b/packages/ui/dist/copy/card/runtime/components/card.js
index a5ee729a4..9981d665b 100644
--- a/packages/ui/dist/copy/card/runtime/components/card.js
+++ b/packages/ui/dist/copy/card/runtime/components/card.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/card.js
 var J3w1Card = class extends J3w1Element {
 	static componentId = "card";
 	static version = "4.0.0";
-	static implementationId = "sha256-vQnfoIzeMEvjY3vf6ySomBbeDdh5YPzSMoXDvmtgOro=";
+	static implementationId = "sha256-1zEhR7grQaSCkJEXxbq66aFLUPYuFPcwf/JnBD3tNdQ=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/card/runtime/register/card.js b/packages/ui/dist/copy/card/runtime/register/card.js
index 31cc0f59d..2a9535cee 100644
--- a/packages/ui/dist/copy/card/runtime/register/card.js
+++ b/packages/ui/dist/copy/card/runtime/register/card.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Card } from "../components/card.js";
 //#region .cache/ui-build/entries/register/card.js
 var element = registerElement("j3w1-card", J3w1Card);
diff --git a/packages/ui/dist/copy/card/tokens.css b/packages/ui/dist/copy/card/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/card/tokens.css
+++ b/packages/ui/dist/copy/card/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/chart/component.css b/packages/ui/dist/copy/chart/component.css
index 8c02c10f3..b8f7a7e96 100644
--- a/packages/ui/dist/copy/chart/component.css
+++ b/packages/ui/dist/copy/chart/component.css
@@ -8,7 +8,7 @@ j3w1-chart {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-chart, j3w1-chart *, j3w1-chart *::before, j3w1-chart *::after { box-sizing: border-box; }
-j3w1-chart button, j3w1-chart input, j3w1-chart select, j3w1-chart textarea { font: inherit; }
+j3w1-chart :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-chart ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,8 @@ j3w1-chart .sr-only {
   border: 0;
 }
 
-j3w1-chart .chart {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-chart .chart :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-chart .chart {margin:0;min-width:0}j3w1-chart .chart svg {width:100%;max-height:calc(var(--font-size-ui-md) * 16)}j3w1-chart .chart-series {fill:var(--color-chart-series-2);stroke:var(--color-chart-axis);stroke-width:1}j3w1-chart .chart table {width:100%;border-collapse:collapse}j3w1-chart .chart th,j3w1-chart .chart td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-chart-grid)}j3w1-chart .chart caption {text-align:start;color:var(--color-chart-label)}j3w1-chart .chart [data-chart-empty] {color:var(--color-text-muted)}j3w1-chart .chart[aria-busy=true] {border-style:dashed}
+j3w1-chart .chart {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;margin:0}
+j3w1-chart .chart :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}j3w1-chart .chart svg {width:100%;max-height:calc(var(--font-size-ui-md) * 16)}j3w1-chart .chart-series {fill:var(--color-chart-series-2);stroke:var(--color-chart-axis);stroke-width:1}j3w1-chart .chart table {width:100%;border-collapse:collapse}j3w1-chart .chart th,j3w1-chart .chart td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-chart-grid)}j3w1-chart .chart caption {text-align:start;color:var(--color-chart-label)}j3w1-chart .chart [data-chart-empty] {color:var(--color-text-muted)}j3w1-chart .chart[aria-busy=true] {border-style:dashed}
 j3w1-chart .chart thead th {color:var(--color-text-bright);font-weight:var(--font-weight-bold)}
 j3w1-chart .chart tbody {color:var(--color-text-default)}
 j3w1-chart .chart tbody th {font-weight:var(--font-weight-regular)}
diff --git a/packages/ui/dist/copy/chart/index.html b/packages/ui/dist/copy/chart/index.html
index 47ad4ecf0..39747e187 100644
--- a/packages/ui/dist/copy/chart/index.html
+++ b/packages/ui/dist/copy/chart/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Chart · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-chart id="example-chart-default"><figure class="chart"><figcaption>Completed tasks by week</figcaption><svg viewBox="0 0 300 120" role="img" aria-label="Week 1: 24; Week 2: 36; Week 3: 48"><g class="chart-series"><rect x="20" y="62" width="50" height="48"></rect><rect x="120" y="38" width="50" height="72"></rect><rect x="220" y="14" width="50" height="96"></rect></g></svg><table><caption>Completed tasks</caption><thead><tr><th scope="col">Week</th><th scope="col">Tasks</th></tr></thead><tbody><tr><th scope="row">Week 1</th><td>24</td></tr><tr><th scope="row">Week 2</th><td>36</td></tr><tr><th scope="row">Week 3</th><td>48</td></tr></tbody></table><p data-chart-empty="" hidden="">No data available.</p></figure></j3w1-chart><script type="module" src="./runtime/register/chart.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Chart · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-chart id="example-chart-default"><figure class="chart"><figcaption>Completed tasks by week</figcaption><svg viewBox="0 0 300 120" role="img" aria-label="Week 1: 24; Week 2: 36; Week 3: 48"><g class="chart-series"><rect x="20" y="62" width="50" height="48"></rect><rect x="120" y="38" width="50" height="72"></rect><rect x="220" y="14" width="50" height="96"></rect></g></svg><table><caption>Completed tasks</caption><thead><tr><th scope="col">Week</th><th scope="col">Tasks</th></tr></thead><tbody><tr><th scope="row">Week 1</th><td>24</td></tr><tr><th scope="row">Week 2</th><td>36</td></tr><tr><th scope="row">Week 3</th><td>48</td></tr></tbody></table><p data-chart-empty="" hidden="">No data available.</p></figure></j3w1-chart><script type="module" src="./runtime/register/chart.js"></script></body></html>
diff --git a/packages/ui/dist/copy/chart/manifest.json b/packages/ui/dist/copy/chart/manifest.json
index b6f7205da..7a997d71e 100644
--- a/packages/ui/dist/copy/chart/manifest.json
+++ b/packages/ui/dist/copy/chart/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/chart.md",
   "dependencies": [
     "register/chart.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/chart.js",
-    "chunks/display-dj9YaBfn.js"
+    "chunks/display-Jm9bAsnb.js"
   ],
   "files": {
-    "runtime/register/chart.js": "sha256-5iBwKSjcyRylARXTeL2emhbuI2FCMQ757IBdPqFnU0U=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/chart.js": "sha256-J4rkX+ylh8URHbl2DxJ2FtbkHBtan2UOpNGVJIh1LjQ=",
-    "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-/W9/IEOepx6zAHtGcRJs1x0lwfMFkVEiYDCV4y4byXw=",
+    "runtime/register/chart.js": "sha256-T98hQYpUxEQ3kRDeztnuOxP5XmwfddBBocBZ3rdTxT8=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/chart.js": "sha256-hVyc1MgrIwRQZWPz61YJX6ScFRhDJTjMKtYEs5Xtxoo=",
+    "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-bZANhpWKREr2mT2bkDhKqg7tacAvTsBxyTk7F9aojeE=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-Wk7EuPuisom2ohEBkZvcgafrpN7xXzlCUaNrWq7BZEA=",
-    "index.html": "sha256-HuXni+L2aI7ES/QsPUPIODbff80dbY+jNFEIzyVxLFg=",
+    "index.html": "sha256-KOF9gaKfSWYWziOSnbA23zckGFW5yhlPXNWdth61Mc4=",
     "README.md": "sha256-AvM1lRutn7M/qWu0sIsbdBF9wn5nT5Ag8avrXpfo9a4="
   }
 }
diff --git a/packages/ui/dist/copy/chart/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/chart/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/chart/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/chart/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/chart/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/chart/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/avatar/runtime/chunks/display-dj9YaBfn.js b/packages/ui/dist/copy/chart/runtime/chunks/display-Jm9bAsnb.js
similarity index 98%
rename from packages/ui/dist/copy/avatar/runtime/chunks/display-dj9YaBfn.js
rename to packages/ui/dist/copy/chart/runtime/chunks/display-Jm9bAsnb.js
index 80833d5da..5bc817830 100644
--- a/packages/ui/dist/copy/avatar/runtime/chunks/display-dj9YaBfn.js
+++ b/packages/ui/dist/copy/chart/runtime/chunks/display-Jm9bAsnb.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/display.js
 function avatar(root, { on }) {
 	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
diff --git a/packages/ui/dist/copy/chart/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/chart/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/chart/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/chart/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/chart/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/chart/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/chart/runtime/components/chart.js b/packages/ui/dist/copy/chart/runtime/components/chart.js
index 2f3f33b51..70d90b671 100644
--- a/packages/ui/dist/copy/chart/runtime/components/chart.js
+++ b/packages/ui/dist/copy/chart/runtime/components/chart.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as chart } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as chart } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/chart.js
 var J3w1Chart = class extends J3w1Element {
 	static componentId = "chart";
 	static version = "4.0.0";
-	static implementationId = "sha256-HoAvhRRdFv6zYSIR6McpxJvYeGHHbg4t1zBpi2x1EXo=";
+	static implementationId = "sha256-48dT14XNNF9ZyV4PB4oLs8zT/lNQqNt9rXZCl9gUYVc=";
 	static connect = chart;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/chart/runtime/register/chart.js b/packages/ui/dist/copy/chart/runtime/register/chart.js
index 17feb810e..8efbe0a3f 100644
--- a/packages/ui/dist/copy/chart/runtime/register/chart.js
+++ b/packages/ui/dist/copy/chart/runtime/register/chart.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Chart } from "../components/chart.js";
 //#region .cache/ui-build/entries/register/chart.js
 var element = registerElement("j3w1-chart", J3w1Chart);
diff --git a/packages/ui/dist/copy/chart/tokens.css b/packages/ui/dist/copy/chart/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/chart/tokens.css
+++ b/packages/ui/dist/copy/chart/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/checkbox/component.css b/packages/ui/dist/copy/checkbox/component.css
index 49a361369..798a26875 100644
--- a/packages/ui/dist/copy/checkbox/component.css
+++ b/packages/ui/dist/copy/checkbox/component.css
@@ -8,7 +8,7 @@ j3w1-checkbox {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-checkbox, j3w1-checkbox *, j3w1-checkbox *::before, j3w1-checkbox *::after { box-sizing: border-box; }
-j3w1-checkbox button, j3w1-checkbox input, j3w1-checkbox select, j3w1-checkbox textarea { font: inherit; }
+j3w1-checkbox :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-checkbox ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -51,7 +51,7 @@ j3w1-checkbox .checkbox-required {
 
 j3w1-checkbox .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -61,8 +61,8 @@ j3w1-checkbox .checkbox-option {
 
 j3w1-checkbox .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -72,8 +72,8 @@ j3w1-checkbox .checkbox-control > * {
 
 j3w1-checkbox .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -85,8 +85,8 @@ j3w1-checkbox .checkbox-input {
 j3w1-checkbox .checkbox-check,
 j3w1-checkbox .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
diff --git a/packages/ui/dist/copy/checkbox/index.html b/packages/ui/dist/copy/checkbox/index.html
index 9a31a9fc8..ad51607c4 100644
--- a/packages/ui/dist/copy/checkbox/index.html
+++ b/packages/ui/dist/copy/checkbox/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Checkbox · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-checkbox id="example-checkbox-default"><div class="checkbox">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Checkbox · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-checkbox id="example-checkbox-default"><div class="checkbox">
   <label class="checkbox-option">
     <span class="checkbox-control">
       <input class="checkbox-input" type="checkbox" name="example-checkbox-default-wrap" aria-describedby="example-checkbox-default-cb-wrap-message">
diff --git a/packages/ui/dist/copy/checkbox/manifest.json b/packages/ui/dist/copy/checkbox/manifest.json
index 77a59c697..4d8470785 100644
--- a/packages/ui/dist/copy/checkbox/manifest.json
+++ b/packages/ui/dist/copy/checkbox/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/checkbox.md",
   "dependencies": [
     "register/checkbox.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/checkbox.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/checkbox.js": "sha256-Bcfx68O9tVUsOU2UXt39Iw36ZluRIGYHI88jMpSDEjk=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/checkbox.js": "sha256-dKDUoVoQi9btazDX3FlRb0fnVzLkYEN+W08CewNGTnI=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-PpwiBtqgcGIHn1KgKDXvrsX0DeTZ4PfyQsMnUpwCUrI=",
+    "runtime/register/checkbox.js": "sha256-QlNtS75LVxO+OKEWX5af518TWUVOwH5nVS8bKid/E+Y=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/checkbox.js": "sha256-M4ffC3UZvNt1LaayV7iUubw0dG33RiqLTYcb05lK3N4=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-AK4XY+QZY/YF9sLhWvSFhLzm72MjHWrr+4fVKr5+398=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-D5pZAWuWF8+C90nVIZnSREv1i0fk6q9L+6SEdvU1Okk=",
-    "index.html": "sha256-zm4zdpqK+QV2pfYf2WrPK1bYk0S65vU+AWWPEq60/mE=",
+    "index.html": "sha256-PXIpEMN5ECxZXpbQG1pVzJUZwEslHvYulHsJlfHplz0=",
     "README.md": "sha256-WEnN989sIQKKMpAjmYvjRbS2hGIBqYi+IEj9c/xhVFs="
   }
 }
diff --git a/packages/ui/dist/copy/checkbox/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/checkbox/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/checkbox/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/checkbox/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/checkbox/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/checkbox/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/checkbox/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/checkbox/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/checkbox/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/checkbox/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/checkbox/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/checkbox/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/checkbox/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/checkbox/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/checkbox/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/checkbox/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/checkbox/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/checkbox/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/checkbox/runtime/components/checkbox.js b/packages/ui/dist/copy/checkbox/runtime/components/checkbox.js
index 508ce70fe..8d7e19060 100644
--- a/packages/ui/dist/copy/checkbox/runtime/components/checkbox.js
+++ b/packages/ui/dist/copy/checkbox/runtime/components/checkbox.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/checkbox.js
 var J3w1Checkbox = class extends J3w1Element {
 	static componentId = "checkbox";
 	static version = "4.0.0";
-	static implementationId = "sha256-s8QNllrpQfjPHm0Utgbm9jpMpGxi8Z+bEb83jPZVomQ=";
+	static implementationId = "sha256-Izbz5fVyhrSfF5rLvCHcElWnQgwhYuvOSm5StKMlqUg=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/checkbox/runtime/register/checkbox.js b/packages/ui/dist/copy/checkbox/runtime/register/checkbox.js
index 0e3541551..70632e2d0 100644
--- a/packages/ui/dist/copy/checkbox/runtime/register/checkbox.js
+++ b/packages/ui/dist/copy/checkbox/runtime/register/checkbox.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Checkbox } from "../components/checkbox.js";
 //#region .cache/ui-build/entries/register/checkbox.js
 var element = registerElement("j3w1-checkbox", J3w1Checkbox);
diff --git a/packages/ui/dist/copy/checkbox/tokens.css b/packages/ui/dist/copy/checkbox/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/checkbox/tokens.css
+++ b/packages/ui/dist/copy/checkbox/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/chip/component.css b/packages/ui/dist/copy/chip/component.css
index 80b05ec8b..c1ff9b4f6 100644
--- a/packages/ui/dist/copy/chip/component.css
+++ b/packages/ui/dist/copy/chip/component.css
@@ -8,7 +8,7 @@ j3w1-chip {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-chip, j3w1-chip *, j3w1-chip *::before, j3w1-chip *::after { box-sizing: border-box; }
-j3w1-chip button, j3w1-chip input, j3w1-chip select, j3w1-chip textarea { font: inherit; }
+j3w1-chip :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-chip ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -30,7 +30,7 @@ j3w1-chip .chip {
   align-items: center;
   gap: var(--space-4);
   vertical-align: middle;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-8);
   box-sizing: border-box;
   background: var(--color-surface-default);
@@ -63,7 +63,7 @@ j3w1-chip .chip-remove {
   align-items: center;
   justify-content: center;
   align-self: stretch;
-  min-width: calc(var(--density-control-height, 32px) - var(--border-width-emphasis));
+  min-width: calc(var(--density-control-height, 24px) - var(--border-width-emphasis));
   padding: 0 var(--space-4);
   background: transparent;
   border: 0;
@@ -107,7 +107,7 @@ j3w1-chip .chip-filter[aria-pressed="true"]:hover {
   background: var(--color-interaction-selection-bg);
 }
 j3w1-chip .chip-filter[aria-pressed="true"]:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-chip .chip-filter:disabled,
diff --git a/packages/ui/dist/copy/chip/index.html b/packages/ui/dist/copy/chip/index.html
index de584f922..48a0e2a54 100644
--- a/packages/ui/dist/copy/chip/index.html
+++ b/packages/ui/dist/copy/chip/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Chip · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-chip id="example-chip-filter"><button class="chip chip-filter" type="button" aria-pressed="false"><span class="chip-check" aria-hidden="true">✓</span><span class="chip-label">Navigation</span></button></j3w1-chip><script type="module" src="./runtime/register/chip.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Chip · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-chip id="example-chip-filter"><button class="chip chip-filter" type="button" aria-pressed="false"><span class="chip-check" aria-hidden="true">✓</span><span class="chip-label">Navigation</span></button></j3w1-chip><script type="module" src="./runtime/register/chip.js"></script></body></html>
diff --git a/packages/ui/dist/copy/chip/manifest.json b/packages/ui/dist/copy/chip/manifest.json
index 06e848f6b..8d528b3fd 100644
--- a/packages/ui/dist/copy/chip/manifest.json
+++ b/packages/ui/dist/copy/chip/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/chip.md",
   "dependencies": [
     "register/chip.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/chip.js",
-    "chunks/overlays-C6nlCHqg.js"
+    "chunks/overlays-Bw8SSDKz.js"
   ],
   "files": {
-    "runtime/register/chip.js": "sha256-nhg2cNNdf2EtWAVdLGFMWDTHx5f02Oe0Zf06cTV+sY8=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/chip.js": "sha256-u34FDCir8vK2ro61A5etBvzomb22WIhnIx7vL6Xcf3k=",
-    "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-nKS3XC8eLjQCMMZHRRKSiHiaNGZgYD6CXzVULJoDU3g=",
+    "runtime/register/chip.js": "sha256-H45do+W8XNxsOyAgO7vOSM4Wm6HfTun0JETK6F/YGRo=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/chip.js": "sha256-zqlDj7D8NyN4xQ/pnlXuOTnA8NlRXPBwW6qG+JcjoDY=",
+    "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-358eNya4c7h47XJC5dFUZncxpjkl0B9HRfRfxwVS8so=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-yjXdYrZ4DqpcZ/ZDGxD0cgfYY/xqj0qeSkX1dJmVhfY=",
-    "index.html": "sha256-w6jTubEaofdbvKO8llTmtTpw3a/ixglUtu1tDybz2iY=",
+    "index.html": "sha256-k4FZCUqK/d9sBff8dKJJwQW99u70Dw3zXRzcH3da314=",
     "README.md": "sha256-Ay+51qOAHcbN22QHsMfcbrA/66D52crp5OlQCHyMYmg="
   }
 }
diff --git a/packages/ui/dist/copy/chip/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/chip/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/chip/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/chip/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/chip/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/chip/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/chip/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/chip/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/chip/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/chip/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/chip/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/chip/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/alert/runtime/chunks/overlays-C6nlCHqg.js b/packages/ui/dist/copy/chip/runtime/chunks/overlays-Bw8SSDKz.js
similarity index 98%
rename from packages/ui/dist/copy/alert/runtime/chunks/overlays-C6nlCHqg.js
rename to packages/ui/dist/copy/chip/runtime/chunks/overlays-Bw8SSDKz.js
index 9df8503ec..3eeb8ff0d 100644
--- a/packages/ui/dist/copy/alert/runtime/chunks/overlays-C6nlCHqg.js
+++ b/packages/ui/dist/copy/chip/runtime/chunks/overlays-Bw8SSDKz.js
@@ -1,4 +1,4 @@
-import { i as all, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
+import { d as place, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/overlays.js
 function modal(root, { on }) {
 	const dialog = root.querySelector("dialog");
diff --git a/packages/ui/dist/copy/chip/runtime/components/chip.js b/packages/ui/dist/copy/chip/runtime/components/chip.js
index 4f4800574..749a8cf86 100644
--- a/packages/ui/dist/copy/chip/runtime/components/chip.js
+++ b/packages/ui/dist/copy/chip/runtime/components/chip.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as feedback } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as feedback } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/chip.js
 var J3w1Chip = class extends J3w1Element {
 	static componentId = "chip";
 	static version = "4.0.0";
-	static implementationId = "sha256-WS0ZeKkxMPrlmT3er+h8PDDvz5rjH0e3bLmPLD+4egE=";
+	static implementationId = "sha256-AQdMwG6TMuURDhU/UWs7oHW2L2skw4ISgrH4cwOomvk=";
 	static connect = feedback;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/chip/runtime/register/chip.js b/packages/ui/dist/copy/chip/runtime/register/chip.js
index 399954b1a..d6b89d151 100644
--- a/packages/ui/dist/copy/chip/runtime/register/chip.js
+++ b/packages/ui/dist/copy/chip/runtime/register/chip.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Chip } from "../components/chip.js";
 //#region .cache/ui-build/entries/register/chip.js
 var element = registerElement("j3w1-chip", J3w1Chip);
diff --git a/packages/ui/dist/copy/chip/tokens.css b/packages/ui/dist/copy/chip/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/chip/tokens.css
+++ b/packages/ui/dist/copy/chip/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/code-editor/component.css b/packages/ui/dist/copy/code-editor/component.css
index bafe40907..070968813 100644
--- a/packages/ui/dist/copy/code-editor/component.css
+++ b/packages/ui/dist/copy/code-editor/component.css
@@ -8,7 +8,7 @@ j3w1-code-editor {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-code-editor, j3w1-code-editor *, j3w1-code-editor *::before, j3w1-code-editor *::after { box-sizing: border-box; }
-j3w1-code-editor button, j3w1-code-editor input, j3w1-code-editor select, j3w1-code-editor textarea { font: inherit; }
+j3w1-code-editor :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-code-editor ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -85,6 +85,10 @@ j3w1-code-editor .code-editor-ws {
   color: var(--color-code-whitespace);
 }
 
+j3w1-code-editor .code-editor-ws::before {
+  content: attr(data-whitespace);
+}
+
 j3w1-code-editor .code-editor-fold {
   display: inline-block;
   padding: 0 var(--space-4);
diff --git a/packages/ui/dist/copy/code-editor/element.html b/packages/ui/dist/copy/code-editor/element.html
index 98b3dcac5..c458ec40c 100644
--- a/packages/ui/dist/copy/code-editor/element.html
+++ b/packages/ui/dist/copy/code-editor/element.html
@@ -1,7 +1,7 @@
 <j3w1-code-editor id="example-code-editor-default"><div class="code-editor" role="textbox" aria-multiline="true" aria-readonly="true" aria-label="title.js, read-only" tabindex="0">
   <pre class="code-editor-pre"><span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">1</span><span class="code-editor-text"><span class="code-editor-cm">// Compose the window title of the focused container.</span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">2</span><span class="code-editor-text"><span class="code-editor-kw">import</span> <span class="code-editor-punct">{</span> <span class="code-editor-type">Container</span> <span class="code-editor-punct">}</span> <span class="code-editor-kw">from</span> <span class="code-editor-str">"./tree.js"</span><span class="code-editor-punct">;</span></span></span>
-<span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">3</span><span class="code-editor-text"><span class="code-editor-kw">const</span> <span class="code-editor-const">MAX_LENGTH</span> <span class="code-editor-op">=</span> <span class="code-editor-num">48</span><span class="code-editor-punct">;</span><span class="code-editor-ws" aria-hidden="true">··</span></span></span>
+<span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">3</span><span class="code-editor-text"><span class="code-editor-kw">const</span> <span class="code-editor-const">MAX_LENGTH</span> <span class="code-editor-op">=</span> <span class="code-editor-num">48</span><span class="code-editor-punct">;</span><span class="code-editor-ws" aria-hidden="true" data-whitespace="··"></span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">4</span><span class="code-editor-text"><span class="code-editor-kw">export</span> <span class="code-editor-kw">function</span> <span class="code-editor-fn">title</span><span class="code-editor-punct code-editor-bracket">(</span><span class="code-editor-var">container</span><span class="code-editor-punct code-editor-bracket">)</span> <span class="code-editor-punct">{</span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">5</span><span class="code-editor-text"><span class="code-editor-indent">  </span><span class="code-editor-kw">const</span> <span class="code-editor-var">name</span> <span class="code-editor-op">=</span> <span class="code-editor-var">container</span><span class="code-editor-punct">.</span><span class="code-editor-prop">name</span> <span class="code-editor-op">??</span> <span class="code-editor-str">"untitled<span class="code-editor-esc">…</span>"</span><span class="code-editor-punct">;</span></span></span>
 <span class="code-editor-line code-editor-line-current"><span class="code-editor-ln" aria-hidden="true">6</span><span class="code-editor-text"><span class="code-editor-indent">  </span><span class="code-editor-kw">let</span> <span class="code-editor-var">label</span> <span class="code-editor-op">=</span> <span class="code-editor-str">`${</span><span class="code-editor-var">name</span><span class="code-editor-str">} (${</span><span class="code-editor-var">container</span><span class="code-editor-punct">.</span><span class="code-editor-prop">children</span><span class="code-editor-punct">.</span><span class="code-editor-prop">length</span><span class="code-editor-str">})`</span><span class="code-editor-punct">;</span><span class="code-editor-caret" aria-hidden="true"></span></span></span>
diff --git a/packages/ui/dist/copy/code-editor/index.html b/packages/ui/dist/copy/code-editor/index.html
index 461d68d77..66bb355b8 100644
--- a/packages/ui/dist/copy/code-editor/index.html
+++ b/packages/ui/dist/copy/code-editor/index.html
@@ -1,8 +1,8 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Code editor · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-code-editor id="example-code-editor-default"><div class="code-editor" role="textbox" aria-multiline="true" aria-readonly="true" aria-label="title.js, read-only" tabindex="0">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Code editor · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-code-editor id="example-code-editor-default"><div class="code-editor" role="textbox" aria-multiline="true" aria-readonly="true" aria-label="title.js, read-only" tabindex="0">
   <pre class="code-editor-pre"><span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">1</span><span class="code-editor-text"><span class="code-editor-cm">// Compose the window title of the focused container.</span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">2</span><span class="code-editor-text"><span class="code-editor-kw">import</span> <span class="code-editor-punct">{</span> <span class="code-editor-type">Container</span> <span class="code-editor-punct">}</span> <span class="code-editor-kw">from</span> <span class="code-editor-str">"./tree.js"</span><span class="code-editor-punct">;</span></span></span>
-<span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">3</span><span class="code-editor-text"><span class="code-editor-kw">const</span> <span class="code-editor-const">MAX_LENGTH</span> <span class="code-editor-op">=</span> <span class="code-editor-num">48</span><span class="code-editor-punct">;</span><span class="code-editor-ws" aria-hidden="true">··</span></span></span>
+<span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">3</span><span class="code-editor-text"><span class="code-editor-kw">const</span> <span class="code-editor-const">MAX_LENGTH</span> <span class="code-editor-op">=</span> <span class="code-editor-num">48</span><span class="code-editor-punct">;</span><span class="code-editor-ws" aria-hidden="true" data-whitespace="··"></span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">4</span><span class="code-editor-text"><span class="code-editor-kw">export</span> <span class="code-editor-kw">function</span> <span class="code-editor-fn">title</span><span class="code-editor-punct code-editor-bracket">(</span><span class="code-editor-var">container</span><span class="code-editor-punct code-editor-bracket">)</span> <span class="code-editor-punct">{</span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">5</span><span class="code-editor-text"><span class="code-editor-indent">  </span><span class="code-editor-kw">const</span> <span class="code-editor-var">name</span> <span class="code-editor-op">=</span> <span class="code-editor-var">container</span><span class="code-editor-punct">.</span><span class="code-editor-prop">name</span> <span class="code-editor-op">??</span> <span class="code-editor-str">"untitled<span class="code-editor-esc">…</span>"</span><span class="code-editor-punct">;</span></span></span>
 <span class="code-editor-line code-editor-line-current"><span class="code-editor-ln" aria-hidden="true">6</span><span class="code-editor-text"><span class="code-editor-indent">  </span><span class="code-editor-kw">let</span> <span class="code-editor-var">label</span> <span class="code-editor-op">=</span> <span class="code-editor-str">`${</span><span class="code-editor-var">name</span><span class="code-editor-str">} (${</span><span class="code-editor-var">container</span><span class="code-editor-punct">.</span><span class="code-editor-prop">children</span><span class="code-editor-punct">.</span><span class="code-editor-prop">length</span><span class="code-editor-str">})`</span><span class="code-editor-punct">;</span><span class="code-editor-caret" aria-hidden="true"></span></span></span>
diff --git a/packages/ui/dist/copy/code-editor/manifest.json b/packages/ui/dist/copy/code-editor/manifest.json
index 45c158724..724ca6b89 100644
--- a/packages/ui/dist/copy/code-editor/manifest.json
+++ b/packages/ui/dist/copy/code-editor/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/code-editor.md",
   "dependencies": [
     "register/code-editor.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/code-editor.js",
-    "chunks/display-dj9YaBfn.js"
+    "chunks/display-Jm9bAsnb.js"
   ],
   "files": {
-    "runtime/register/code-editor.js": "sha256-agRsxgm8tBPEgLi7nGnYfqB/KOMRnbad/Eph3+YfYnE=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/code-editor.js": "sha256-F0O1Zc5wQaq5NGzIEEBzGXHEfj0hUaCR23D2hnUukLY=",
-    "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-X9h2Mxr0yLKLoKffZDsC55HBiRmSX+SuRQkjkcxerOo=",
+    "runtime/register/code-editor.js": "sha256-qnN0iH+h4BDWCcc4Q3/6f1t7opIG5ze5nI1wsQL/tDg=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/code-editor.js": "sha256-MMz8rm+dJT4XahXmR9ftmU0IhNW1NqLIHW7U3STXDPQ=",
+    "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-aa9zAzIlna+IPd+Xivi0WU385o/+RmhG5pRVR1vsE64=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
-    "element.html": "sha256-aD+1gDxKB5fijO+A+hjuTqChvHPDv5zp5tK9UPZhwLc=",
-    "index.html": "sha256-Dn2d67XC/1eO3QNVfsBf4pv4f2WuhBmmk1fFbSiGnWY=",
+    "element.html": "sha256-yXGoyQ6QC1zx9v7pXmaH1J2StJS/EEc6ZMqWAgdNj6A=",
+    "index.html": "sha256-2pHlO7mTG0Z1FySFL7jnRFIidQEfcMXdM+OtJBsZeXA=",
     "README.md": "sha256-oP4WnaIDAzxwm22ndFvMgchWr7l/DH7YotacPAFZuO8="
   }
 }
diff --git a/packages/ui/dist/copy/code-editor/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/code-editor/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/code-editor/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/code-editor/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/code-editor/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/code-editor/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/chunks/display-dj9YaBfn.js b/packages/ui/dist/copy/code-editor/runtime/chunks/display-Jm9bAsnb.js
similarity index 98%
rename from packages/ui/dist/chunks/display-dj9YaBfn.js
rename to packages/ui/dist/copy/code-editor/runtime/chunks/display-Jm9bAsnb.js
index 80833d5da..5bc817830 100644
--- a/packages/ui/dist/chunks/display-dj9YaBfn.js
+++ b/packages/ui/dist/copy/code-editor/runtime/chunks/display-Jm9bAsnb.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/display.js
 function avatar(root, { on }) {
 	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
diff --git a/packages/ui/dist/copy/code-editor/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/code-editor/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/code-editor/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/code-editor/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/code-editor/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/code-editor/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/code-editor/runtime/components/code-editor.js b/packages/ui/dist/copy/code-editor/runtime/components/code-editor.js
index 5d700d661..9a989eb60 100644
--- a/packages/ui/dist/copy/code-editor/runtime/components/code-editor.js
+++ b/packages/ui/dist/copy/code-editor/runtime/components/code-editor.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as developerView } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as developerView } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/code-editor.js
 var J3w1CodeEditor = class extends J3w1Element {
 	static componentId = "code-editor";
 	static version = "4.0.0";
-	static implementationId = "sha256-SfbKlWOepDm9juxt9BZYRBuYIPkdwFye18Fx+JebtX8=";
+	static implementationId = "sha256-BBPVGsJGf2n0c4gfyDdfHQH3KYYqmiAAqqC2h3DlIcc=";
 	static connect = developerView;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/code-editor/runtime/register/code-editor.js b/packages/ui/dist/copy/code-editor/runtime/register/code-editor.js
index ebfebc300..91f3f8d5f 100644
--- a/packages/ui/dist/copy/code-editor/runtime/register/code-editor.js
+++ b/packages/ui/dist/copy/code-editor/runtime/register/code-editor.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1CodeEditor } from "../components/code-editor.js";
 //#region .cache/ui-build/entries/register/code-editor.js
 var element = registerElement("j3w1-code-editor", J3w1CodeEditor);
diff --git a/packages/ui/dist/copy/code-editor/tokens.css b/packages/ui/dist/copy/code-editor/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/code-editor/tokens.css
+++ b/packages/ui/dist/copy/code-editor/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/combobox/component.css b/packages/ui/dist/copy/combobox/component.css
index d049a9d72..c2c436f19 100644
--- a/packages/ui/dist/copy/combobox/component.css
+++ b/packages/ui/dist/copy/combobox/component.css
@@ -8,7 +8,7 @@ j3w1-combobox {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-combobox, j3w1-combobox *, j3w1-combobox *::before, j3w1-combobox *::after { box-sizing: border-box; }
-j3w1-combobox button, j3w1-combobox input, j3w1-combobox select, j3w1-combobox textarea { font: inherit; }
+j3w1-combobox :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-combobox ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,34 +25,79 @@ j3w1-combobox .sr-only {
   border: 0;
 }
 
-j3w1-combobox .combobox {
-  position: relative;
-  display: grid;
-  gap: var(--space-4);
-  min-width: 0;
-  max-width: calc(var(--font-size-ui-md) * 28);
-  color: var(--color-text-default);
+j3w1-combobox .combobox-label,
+j3w1-combobox .dialog-field-label,
+j3w1-combobox .field-label,
+j3w1-combobox .fieldset-label,
+j3w1-combobox .file-input-label,
+j3w1-combobox .number-field-label,
+j3w1-combobox .search-field-label,
+j3w1-combobox .select-label,
+j3w1-combobox .text-field-label,
+j3w1-combobox .textarea-label,
+j3w1-combobox .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
 }
 
-j3w1-combobox .combobox-label {
-  color: var(--color-text-bright);
+j3w1-combobox .combobox-help,
+j3w1-combobox .date-picker-help,
+j3w1-combobox .dialog-field-help,
+j3w1-combobox .fieldset-help,
+j3w1-combobox .file-input-help,
+j3w1-combobox .number-field-help,
+j3w1-combobox .search-field-help,
+j3w1-combobox .select-help,
+j3w1-combobox .text-field-help,
+j3w1-combobox .textarea-help,
+j3w1-combobox .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
   font-size: var(--font-size-ui-sm);
   line-height: var(--font-line-height-ui-sm);
 }
 
-j3w1-combobox .combobox-root {
+j3w1-combobox .combobox-message,
+j3w1-combobox .date-picker-message,
+j3w1-combobox .file-input-message,
+j3w1-combobox .number-field-message,
+j3w1-combobox .radio-group-message,
+j3w1-combobox .select-message,
+j3w1-combobox .text-field-message,
+j3w1-combobox .textarea-message,
+j3w1-combobox .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-combobox .combobox-root,
+j3w1-combobox .date-picker-root,
+j3w1-combobox .number-field-root {
   display: flex;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
 }
 
+j3w1-combobox .combobox {
+  position: relative;
+  display: grid;
+  gap: var(--space-4);
+  min-width: 0;
+  max-width: calc(var(--font-size-ui-md) * 28);
+  color: var(--color-text-default);
+}
+
 j3w1-combobox .combobox-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -112,7 +157,7 @@ j3w1-combobox .combobox-group-list {
 }
 
 j3w1-combobox .combobox-listbox {
-  max-height: calc(8 * var(--density-row-height, 36px));
+  max-height: calc(8 * var(--density-row-height, 28px));
   overflow-y: auto;
   background: var(--color-surface-raised);
   border: var(--border-width-default) solid var(--color-border-overlay);
@@ -123,8 +168,8 @@ j3w1-combobox .combobox-listbox {
 j3w1-combobox .combobox-option {
   display: flex;
   align-items: center;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   cursor: default;
 }
 
@@ -135,7 +180,7 @@ j3w1-combobox .combobox-option:hover {
 j3w1-combobox .combobox-option[aria-selected="true"] {
   background: var(--color-interaction-selection-bg);
   color: var(--color-interaction-selection-text);
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
@@ -150,7 +195,7 @@ j3w1-combobox .combobox-group + .combobox-group {
 
 j3w1-combobox .combobox-group-heading {
   display: block;
-  padding: var(--space-4) var(--density-control-padding-x, 12px) 0;
+  padding: var(--space-4) var(--density-control-padding-x, 8px) 0;
   color: var(--color-text-subtle);
   font-size: var(--font-size-ui-sm);
   line-height: var(--font-line-height-ui-sm);
@@ -159,26 +204,11 @@ j3w1-combobox .combobox-group-heading {
 j3w1-combobox .combobox-empty {
   display: none;
   align-items: center;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   color: var(--color-text-muted);
   font-style: italic;
 }
-
-j3w1-combobox .combobox-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-combobox .combobox-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-combobox .combobox-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/copy/combobox/index.html b/packages/ui/dist/copy/combobox/index.html
index 485386ebe..b1e080366 100644
--- a/packages/ui/dist/copy/combobox/index.html
+++ b/packages/ui/dist/copy/combobox/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Combobox · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-combobox id="example-combobox-default"><div class="combobox">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Combobox · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-combobox id="example-combobox-default"><div class="combobox">
   <label class="combobox-label" for="example-combobox-default-cb-font">Font family</label>
   <div class="combobox-root">
     <input class="combobox-input" id="example-combobox-default-cb-font" type="text" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="example-combobox-default-cb-font-list" autocomplete="off" value="Sauce" placeholder="Type to filter" aria-describedby="example-combobox-default-cb-font-help example-combobox-default-cb-font-message" name="example-combobox-default-cb-font">
diff --git a/packages/ui/dist/copy/combobox/manifest.json b/packages/ui/dist/copy/combobox/manifest.json
index a2095a84a..83fa989de 100644
--- a/packages/ui/dist/copy/combobox/manifest.json
+++ b/packages/ui/dist/copy/combobox/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/combobox.md",
   "dependencies": [
     "register/combobox.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/combobox.js",
-    "chunks/navigation-Dt8ap-9J.js"
+    "chunks/navigation-BfNzDYZB.js"
   ],
   "files": {
-    "runtime/register/combobox.js": "sha256-wSm80gvqOsgkhwOnsCIjr2a4w8W7WCRQqBXn2frDhak=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/combobox.js": "sha256-5b1Sa2zwhRyysK9sVyLiBCGsYfJyYnfGDsb6r3sA9MA=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-f4pI9RLIKYsRggzuVcLA2zYdXHZXY3+DbGFjvBCtbSg=",
+    "runtime/register/combobox.js": "sha256-t7izNmL59Io74wyYT41Fq3jMXxWJ/5V4IeEkC0apDwY=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/combobox.js": "sha256-7kydwJcVW8U2c0ssJPwbR84tdqvYPN/lFqBuOGeDQpU=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-7Br4xmCcyfgXyjiq25+JY7SY8r5G/VLEzsNt6HBlB7k=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-/SDEtn3D/9kfnULtpHPFEgK1FAkmwe+77gdxlWNewhY=",
-    "index.html": "sha256-TgE5FDYDcg51ETqt8UekGbIULwjwCa+CjxGdU63wd/k=",
+    "index.html": "sha256-p9Z0Z0qJkFi41Gxp+ZcP2av6zsHe4VtOAtgfxnDq5YE=",
     "README.md": "sha256-d6hom7buY1pZpNug4Bx9SqSXvSLDY+cq2xwlZ2Fei/U="
   }
 }
diff --git a/packages/ui/dist/copy/combobox/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/combobox/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/combobox/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/combobox/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/combobox/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/combobox/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/combobox/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/combobox/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/combobox/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/combobox/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/combobox/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/combobox/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/combobox/runtime/chunks/navigation-BfNzDYZB.js
similarity index 96%
rename from packages/ui/dist/chunks/navigation-Dt8ap-9J.js
rename to packages/ui/dist/copy/combobox/runtime/chunks/navigation-BfNzDYZB.js
index 81201c8d5..db2779553 100644
--- a/packages/ui/dist/chunks/navigation-Dt8ap-9J.js
+++ b/packages/ui/dist/copy/combobox/runtime/chunks/navigation-BfNzDYZB.js
@@ -1,4 +1,4 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/navigation.js
 function tabs(root, { on }, listOverride) {
 	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
@@ -81,7 +81,13 @@ function toolbar(root, { on }) {
 			"End"
 		].includes(event.key)) return;
 		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
 	});
 	on(bar, "click", (event) => {
 		const button = event.target.closest("button[aria-pressed]");
@@ -321,7 +327,11 @@ function menu(root, { on }) {
 			"End"
 		].includes(event.key)) {
 			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
 		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
 			event.preventDefault();
 			event.stopPropagation();
diff --git a/packages/ui/dist/copy/combobox/runtime/components/combobox.js b/packages/ui/dist/copy/combobox/runtime/components/combobox.js
index 1f90d0d0a..098363263 100644
--- a/packages/ui/dist/copy/combobox/runtime/components/combobox.js
+++ b/packages/ui/dist/copy/combobox/runtime/components/combobox.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as combobox } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as combobox } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/combobox.js
 var J3w1Combobox = class extends J3w1Element {
 	static componentId = "combobox";
 	static version = "4.0.0";
-	static implementationId = "sha256-XA3Nl+ZVgrypCgx4FjdKKQnMCNyoA+F8ID8i2Tjo8lY=";
+	static implementationId = "sha256-vBw1BDsNiy6oYSbmjgh7x2T+43b2GYa+XmHte/upgpQ=";
 	static connect = combobox;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/combobox/runtime/register/combobox.js b/packages/ui/dist/copy/combobox/runtime/register/combobox.js
index 7469ac395..0441f87e8 100644
--- a/packages/ui/dist/copy/combobox/runtime/register/combobox.js
+++ b/packages/ui/dist/copy/combobox/runtime/register/combobox.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Combobox } from "../components/combobox.js";
 //#region .cache/ui-build/entries/register/combobox.js
 var element = registerElement("j3w1-combobox", J3w1Combobox);
diff --git a/packages/ui/dist/copy/combobox/tokens.css b/packages/ui/dist/copy/combobox/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/combobox/tokens.css
+++ b/packages/ui/dist/copy/combobox/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/command-palette/component.css b/packages/ui/dist/copy/command-palette/component.css
index 5f9ef7a20..c25e1a9e1 100644
--- a/packages/ui/dist/copy/command-palette/component.css
+++ b/packages/ui/dist/copy/command-palette/component.css
@@ -8,7 +8,7 @@ j3w1-command-palette {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-command-palette, j3w1-command-palette *, j3w1-command-palette *::before, j3w1-command-palette *::after { box-sizing: border-box; }
-j3w1-command-palette button, j3w1-command-palette input, j3w1-command-palette select, j3w1-command-palette textarea { font: inherit; }
+j3w1-command-palette :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-command-palette ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,10 +25,143 @@ j3w1-command-palette .sr-only {
   border: 0;
 }
 
+j3w1-command-palette .button,
+j3w1-command-palette .dialog-button,
+j3w1-command-palette .empty-state-action,
+j3w1-command-palette .file-input-button,
+j3w1-command-palette button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-command-palette .button,
+j3w1-command-palette .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-command-palette .button-secondary,
+j3w1-command-palette .dialog-button,
+j3w1-command-palette .empty-state-action,
+j3w1-command-palette .file-input-button,
+j3w1-command-palette button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-command-palette .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-command-palette .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-command-palette .button-destructive-filled,
+j3w1-command-palette .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-command-palette :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-command-palette .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-command-palette :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-command-palette :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-command-palette :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-command-palette .dialog-button,
+  j3w1-command-palette .empty-state-action,
+  j3w1-command-palette .file-input-button,
+  j3w1-command-palette button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-command-palette :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-command-palette .command-palette {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-command-palette .command-palette-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-command-palette .command-palette :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-command-palette .command-palette-dialog {width:min(calc(var(--font-size-ui-md) * 36),100%);max-height:80vh;margin:0;padding:var(--space-16);background:var(--color-surface-overlay);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-overlay);border-radius:var(--radius-none)}j3w1-command-palette .command-palette [role=listbox] {list-style:none;padding:0;max-height:40vh;overflow:auto}j3w1-command-palette .command-palette [role=option] {display:grid;grid-template-columns:calc(var(--font-size-ui-md) * 5) 1fr;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent;cursor:pointer}j3w1-command-palette .command-palette [role=option] span {color:var(--color-text-muted)}j3w1-command-palette .command-palette [aria-selected=true] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}j3w1-command-palette .command-palette-dialog::backdrop {background:var(--color-surface-backdrop)}j3w1-command-palette .command-palette-dialog:not([open]) {display:none}j3w1-command-palette .command-palette [data-command-status] {color:var(--color-text-muted)}
+j3w1-command-palette .command-palette :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+j3w1-command-palette .command-palette-dialog {width:min(calc(var(--font-size-ui-md) * 36),100%);max-height:80vh;margin:0;padding:var(--space-16);background:var(--color-surface-overlay);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-overlay);border-radius:var(--radius-none)}
+j3w1-command-palette .command-palette [role=listbox] {list-style:none;padding:0;max-height:40vh;overflow:auto}
+j3w1-command-palette .command-palette [role=option] {display:grid;grid-template-columns:calc(var(--font-size-ui-md) * 5) 1fr;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent;cursor:pointer}
+j3w1-command-palette .command-palette [role=option] span {color:var(--color-text-muted)}
+j3w1-command-palette .command-palette [aria-selected=true] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}
+j3w1-command-palette .command-palette-dialog::backdrop {background:var(--color-surface-backdrop)}
+j3w1-command-palette .command-palette-dialog:not([open]) {display:none}
+j3w1-command-palette .command-palette [data-command-status] {color:var(--color-text-muted)}
 
 j3w1-command-palette .command-palette [role="option"][aria-selected="true"] span { color: inherit; }
 
diff --git a/packages/ui/dist/copy/command-palette/index.html b/packages/ui/dist/copy/command-palette/index.html
index 46cfc516c..94fd802f0 100644
--- a/packages/ui/dist/copy/command-palette/index.html
+++ b/packages/ui/dist/copy/command-palette/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Command palette · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-command-palette id="example-command-palette-default"><div class="command-palette"><button class="command-palette-control" type="button" data-open="" data-demo-focus-target="">Search commands <kbd>Ctrl K</kbd></button><dialog class="command-palette-dialog" aria-labelledby="example-command-palette-default-command-title"><h2 id="example-command-palette-default-command-title">Command prompt</h2><label for="example-command-palette-default-command-query">Search commands</label><input class="command-palette-control" id="example-command-palette-default-command-query" type="search" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="example-command-palette-default-command-results" autocomplete="off"><ul id="example-command-palette-default-command-results" role="listbox" aria-label="Commands"><li role="option" id="example-command-palette-default-command-foundations" data-action="foundations"><span>SPEC</span> Explore foundations</li><li role="option" id="example-command-palette-default-command-components" data-action="components"><span>BUILD</span> Browse components</li><li role="option" id="example-command-palette-default-command-copy" data-action="copy"><span>AGENT</span> Prepare a copy kit</li></ul><p role="status" data-command-status="">3 commands</p><button class="command-palette-control" type="button" data-close="">Close</button></dialog></div></j3w1-command-palette><script type="module" src="./runtime/register/command-palette.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Command palette · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-command-palette id="example-command-palette-default"><div class="command-palette"><button class="command-palette-control" type="button" data-open="" data-demo-focus-target="">Search commands <kbd>Ctrl K</kbd></button><dialog class="command-palette-dialog" aria-labelledby="example-command-palette-default-command-title"><h2 id="example-command-palette-default-command-title">Command prompt</h2><label for="example-command-palette-default-command-query">Search commands</label><input class="command-palette-control" id="example-command-palette-default-command-query" type="search" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="example-command-palette-default-command-results" autocomplete="off"><ul id="example-command-palette-default-command-results" role="listbox" aria-label="Commands"><li role="option" id="example-command-palette-default-command-foundations" data-action="foundations"><span>SPEC</span> Explore foundations</li><li role="option" id="example-command-palette-default-command-components" data-action="components"><span>BUILD</span> Browse components</li><li role="option" id="example-command-palette-default-command-copy" data-action="copy"><span>AGENT</span> Prepare a copy kit</li></ul><p role="status" data-command-status="">3 commands</p><button class="command-palette-control" type="button" data-close="">Close</button></dialog></div></j3w1-command-palette><script type="module" src="./runtime/register/command-palette.js"></script></body></html>
diff --git a/packages/ui/dist/copy/command-palette/manifest.json b/packages/ui/dist/copy/command-palette/manifest.json
index ca736a03b..8b1bc356f 100644
--- a/packages/ui/dist/copy/command-palette/manifest.json
+++ b/packages/ui/dist/copy/command-palette/manifest.json
@@ -5,24 +5,24 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/command-palette.md",
   "dependencies": [
     "register/command-palette.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/command-palette.js",
-    "chunks/advanced-DCpe8Ndv.js",
+    "chunks/advanced-CqBF0dSb.js",
     "chunks/markup-DeQ4bEMR.js"
   ],
   "files": {
-    "runtime/register/command-palette.js": "sha256-lGGoaVMCbjDzpQkjNlUs9K1jnmKtBfQi/K3dG35cCd0=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/command-palette.js": "sha256-KMSKyY2a0yyVe6zxGdWjBFFsgbL/DjNUvU8lnxB6USQ=",
-    "runtime/chunks/advanced-DCpe8Ndv.js": "sha256-nr1LFdLYsGeTM4vDyldvuJygRm0F04sYonxatySPu1g=",
+    "runtime/register/command-palette.js": "sha256-SSDEUavPG+KZSHsxMuoACxT3IKIhzg9LNpUMj+pS9Gs=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/command-palette.js": "sha256-GlMjxlVVzdC74Yr4LjWbLwXWGrHkFnjBaJ4o9rJw9DE=",
+    "runtime/chunks/advanced-CqBF0dSb.js": "sha256-ozOzkRU6IeVGBqU3XQ0aLledkAi9vcs8dJdMQutVevs=",
     "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-sXrks2txpylBLDX4L9vKPIvAj11p73qrX0apfh7EgTg=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-tiMnZi/dRu4gB3RP0zxXVpTrTvFZsCYaugfulxBVhTk=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-mNRkLE+yYA4PARM4rv5bXDj90Oq8yxQLPgoUW8bX6ns=",
-    "index.html": "sha256-I5o97Y3ykrn6MCqMmtWvFGTxDBltracgMFnF25iNwZk=",
+    "index.html": "sha256-2yjQF/1liVxnaJ1hZ9hxFhuMt/x3P0EkNlqVnXroNJ0=",
     "README.md": "sha256-KLn7bklioLvnV4bRDAgf3A5aqqCSezXa9kKARSYCUcw="
   }
 }
diff --git a/packages/ui/dist/copy/command-palette/runtime/chunks/advanced-DCpe8Ndv.js b/packages/ui/dist/copy/command-palette/runtime/chunks/advanced-CqBF0dSb.js
similarity index 97%
rename from packages/ui/dist/copy/command-palette/runtime/chunks/advanced-DCpe8Ndv.js
rename to packages/ui/dist/copy/command-palette/runtime/chunks/advanced-CqBF0dSb.js
index 3390a044c..4a5c45981 100644
--- a/packages/ui/dist/copy/command-palette/runtime/chunks/advanced-DCpe8Ndv.js
+++ b/packages/ui/dist/copy/command-palette/runtime/chunks/advanced-CqBF0dSb.js
@@ -1,4 +1,4 @@
-import { d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
+import { c as keyIndex, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
 import { t as IDREFS } from "./markup-DeQ4bEMR.js";
 //#region packages/ui/src/behaviors/advanced.js
 function tree(root, { on }) {
@@ -64,7 +64,12 @@ function tree(root, { on }) {
 			"End"
 		].includes(event.key)) {
 			event.preventDefault();
-			const next = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+			const next = keyIndex({
+				key: event.key,
+				index,
+				length: options.length,
+				wrap: false
+			});
 			rove(options, next);
 		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
 			event.preventDefault();
diff --git a/packages/ui/dist/copy/command-palette/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/command-palette/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/command-palette/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/command-palette/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/command-palette/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/command-palette/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/command-palette/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/command-palette/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/command-palette/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/command-palette/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/command-palette/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/command-palette/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/command-palette/runtime/components/command-palette.js b/packages/ui/dist/copy/command-palette/runtime/components/command-palette.js
index 9f69c3926..196ad7f12 100644
--- a/packages/ui/dist/copy/command-palette/runtime/components/command-palette.js
+++ b/packages/ui/dist/copy/command-palette/runtime/components/command-palette.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as commandPalette } from "../chunks/advanced-DCpe8Ndv.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as commandPalette } from "../chunks/advanced-CqBF0dSb.js";
 //#region .cache/ui-build/entries/components/command-palette.js
 var J3w1CommandPalette = class extends J3w1Element {
 	static componentId = "command-palette";
 	static version = "4.0.0";
-	static implementationId = "sha256-z/FYgCRAmaHrY3I9P3qJz8fOSSDfrjxFjAqwEVhzk50=";
+	static implementationId = "sha256-jnhxb+w/Xgrb5Os9Dxr1YHn/ex7fLJlGLSWZSpbrAuU=";
 	static connect = commandPalette;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/command-palette/runtime/register/command-palette.js b/packages/ui/dist/copy/command-palette/runtime/register/command-palette.js
index 21d0307af..8c4d129ed 100644
--- a/packages/ui/dist/copy/command-palette/runtime/register/command-palette.js
+++ b/packages/ui/dist/copy/command-palette/runtime/register/command-palette.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1CommandPalette } from "../components/command-palette.js";
 //#region .cache/ui-build/entries/register/command-palette.js
 var element = registerElement("j3w1-command-palette", J3w1CommandPalette);
diff --git a/packages/ui/dist/copy/command-palette/tokens.css b/packages/ui/dist/copy/command-palette/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/command-palette/tokens.css
+++ b/packages/ui/dist/copy/command-palette/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/compact-dashboard/component.css b/packages/ui/dist/copy/compact-dashboard/component.css
index da53dfd7f..057ca3f6d 100644
--- a/packages/ui/dist/copy/compact-dashboard/component.css
+++ b/packages/ui/dist/copy/compact-dashboard/component.css
@@ -8,7 +8,7 @@ j3w1-compact-dashboard {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-compact-dashboard, j3w1-compact-dashboard *, j3w1-compact-dashboard *::before, j3w1-compact-dashboard *::after { box-sizing: border-box; }
-j3w1-compact-dashboard button, j3w1-compact-dashboard input, j3w1-compact-dashboard select, j3w1-compact-dashboard textarea { font: inherit; }
+j3w1-compact-dashboard :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-compact-dashboard ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,135 @@ j3w1-compact-dashboard .sr-only {
   border: 0;
 }
 
+j3w1-compact-dashboard .button,
+j3w1-compact-dashboard .dialog-button,
+j3w1-compact-dashboard .empty-state-action,
+j3w1-compact-dashboard .file-input-button,
+j3w1-compact-dashboard button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-compact-dashboard .button,
+j3w1-compact-dashboard .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-compact-dashboard .button-secondary,
+j3w1-compact-dashboard .dialog-button,
+j3w1-compact-dashboard .empty-state-action,
+j3w1-compact-dashboard .file-input-button,
+j3w1-compact-dashboard button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-compact-dashboard .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-compact-dashboard .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-compact-dashboard .button-destructive-filled,
+j3w1-compact-dashboard .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-compact-dashboard :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-compact-dashboard .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-compact-dashboard :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-compact-dashboard :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-compact-dashboard :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-compact-dashboard .dialog-button,
+  j3w1-compact-dashboard .empty-state-action,
+  j3w1-compact-dashboard .file-input-button,
+  j3w1-compact-dashboard button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-compact-dashboard :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-compact-dashboard .compact-dashboard {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-compact-dashboard .compact-dashboard-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-compact-dashboard .compact-dashboard :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-compact-dashboard .compact-dashboard :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-compact-dashboard .compact-dashboard table {width:100%;border-collapse:collapse}j3w1-compact-dashboard .compact-dashboard th,j3w1-compact-dashboard .compact-dashboard td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}
 j3w1-compact-dashboard .compact-dashboard-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-12);margin:0}j3w1-compact-dashboard .compact-dashboard-metrics>div {padding:var(--space-12);background:var(--color-surface-chrome);border:var(--border-width-default) solid var(--color-border-divider)}j3w1-compact-dashboard .compact-dashboard dt {color:var(--color-text-muted)}j3w1-compact-dashboard .compact-dashboard dd {margin:var(--space-8) 0 0;font-size:var(--font-size-h2);color:var(--color-text-bright)}j3w1-compact-dashboard .compact-dashboard[aria-busy=true] {border-style:dashed}j3w1-compact-dashboard .compact-dashboard [data-dashboard-empty] {color:var(--color-text-muted)}@media(max-width:480px){j3w1-compact-dashboard .compact-dashboard-metrics{grid-template-columns:1fr}}
 
@@ -67,7 +193,7 @@ j3w1-compact-dashboard .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -89,7 +215,7 @@ j3w1-compact-dashboard .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -121,7 +247,7 @@ j3w1-compact-dashboard .table .table-body .table-row:first-child {
 
 j3w1-compact-dashboard .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -158,6 +284,21 @@ j3w1-compact-dashboard .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-compact-dashboard .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-compact-dashboard .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-compact-dashboard .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-compact-dashboard .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -179,7 +320,7 @@ j3w1-compact-dashboard .table-row[aria-selected="true"]:hover {
 }
 j3w1-compact-dashboard .table-row[aria-selected="true"]:focus-visible,
 j3w1-compact-dashboard .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-compact-dashboard .table[data-container-inactive] .table-row[aria-selected="true"] {
@@ -235,9 +376,8 @@ j3w1-compact-dashboard .table-body .table-loading:not([hidden]) {
   }
 }
 
-j3w1-compact-dashboard .chart {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-compact-dashboard .chart :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-compact-dashboard .chart {margin:0;min-width:0}j3w1-compact-dashboard .chart svg {width:100%;max-height:calc(var(--font-size-ui-md) * 16)}j3w1-compact-dashboard .chart-series {fill:var(--color-chart-series-2);stroke:var(--color-chart-axis);stroke-width:1}j3w1-compact-dashboard .chart table {width:100%;border-collapse:collapse}j3w1-compact-dashboard .chart th,j3w1-compact-dashboard .chart td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-chart-grid)}j3w1-compact-dashboard .chart caption {text-align:start;color:var(--color-chart-label)}j3w1-compact-dashboard .chart [data-chart-empty] {color:var(--color-text-muted)}j3w1-compact-dashboard .chart[aria-busy=true] {border-style:dashed}
+j3w1-compact-dashboard .chart {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;margin:0}
+j3w1-compact-dashboard .chart :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}j3w1-compact-dashboard .chart svg {width:100%;max-height:calc(var(--font-size-ui-md) * 16)}j3w1-compact-dashboard .chart-series {fill:var(--color-chart-series-2);stroke:var(--color-chart-axis);stroke-width:1}j3w1-compact-dashboard .chart table {width:100%;border-collapse:collapse}j3w1-compact-dashboard .chart th,j3w1-compact-dashboard .chart td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-chart-grid)}j3w1-compact-dashboard .chart caption {text-align:start;color:var(--color-chart-label)}j3w1-compact-dashboard .chart [data-chart-empty] {color:var(--color-text-muted)}j3w1-compact-dashboard .chart[aria-busy=true] {border-style:dashed}
 j3w1-compact-dashboard .chart thead th {color:var(--color-text-bright);font-weight:var(--font-weight-bold)}
 j3w1-compact-dashboard .chart tbody {color:var(--color-text-default)}
 j3w1-compact-dashboard .chart tbody th {font-weight:var(--font-weight-regular)}
diff --git a/packages/ui/dist/copy/compact-dashboard/index.html b/packages/ui/dist/copy/compact-dashboard/index.html
index 1e3220091..4e04a97b4 100644
--- a/packages/ui/dist/copy/compact-dashboard/index.html
+++ b/packages/ui/dist/copy/compact-dashboard/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Compact dashboard · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-compact-dashboard id="example-compact-dashboard-default"><section class="compact-dashboard" aria-label="Delivery overview"><header><h3>Delivery overview</h3><p>Synthetic local fixture</p></header><dl class="compact-dashboard-metrics"><div><dt>Active projects</dt><dd>24</dd></div><div><dt>Ready for review</dt><dd>7</dd></div><div><dt>Components used</dt><dd>148</dd></div></dl><j3w1-chart><figure class="chart"><figcaption>Completed tasks</figcaption><svg viewBox="0 0 300 120" role="img" aria-label="Week 1: 24; Week 2: 36"><g class="chart-series"><rect x="30" y="50" width="80" height="60"></rect><rect x="180" y="20" width="80" height="90"></rect></g></svg><table><caption>Task data</caption><thead><tr><th scope="col">Week</th><th scope="col">Tasks</th></tr></thead><tbody><tr><th scope="row">Week 1</th><td>24</td></tr><tr><th scope="row">Week 2</th><td>36</td></tr></tbody></table></figure></j3w1-chart><table data-records=""><caption>Projects</caption><thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead><tbody><tr><td><button class="compact-dashboard-control" type="button" data-record="atlas" data-demo-focus-target="">Atlas library</button></td><td>✓ Ready</td></tr><tr><td><button class="compact-dashboard-control" type="button" data-record="orion">Orion workspace</button></td><td>◌ In progress</td></tr></tbody></table><p data-dashboard-empty="" hidden="">No projects available.</p></section></j3w1-compact-dashboard><script type="module" src="./runtime/register/compact-dashboard.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Compact dashboard · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-compact-dashboard id="example-compact-dashboard-default"><section class="compact-dashboard" aria-label="Delivery overview"><header><h3>Delivery overview</h3><p>Synthetic local fixture</p></header><dl class="compact-dashboard-metrics"><div><dt>Active projects</dt><dd>24</dd></div><div><dt>Ready for review</dt><dd>7</dd></div><div><dt>Components used</dt><dd>148</dd></div></dl><j3w1-chart><figure class="chart"><figcaption>Completed tasks</figcaption><svg viewBox="0 0 300 120" role="img" aria-label="Week 1: 24; Week 2: 36"><g class="chart-series"><rect x="30" y="50" width="80" height="60"></rect><rect x="180" y="20" width="80" height="90"></rect></g></svg><table><caption>Task data</caption><thead><tr><th scope="col">Week</th><th scope="col">Tasks</th></tr></thead><tbody><tr><th scope="row">Week 1</th><td>24</td></tr><tr><th scope="row">Week 2</th><td>36</td></tr></tbody></table></figure></j3w1-chart><table data-records=""><caption>Projects</caption><thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead><tbody><tr><td><button class="compact-dashboard-control" type="button" data-record="atlas" data-demo-focus-target="">Atlas library</button></td><td>✓ Ready</td></tr><tr><td><button class="compact-dashboard-control" type="button" data-record="orion">Orion workspace</button></td><td>◌ In progress</td></tr></tbody></table><p data-dashboard-empty="" hidden="">No projects available.</p></section></j3w1-compact-dashboard><script type="module" src="./runtime/register/compact-dashboard.js"></script></body></html>
diff --git a/packages/ui/dist/copy/compact-dashboard/manifest.json b/packages/ui/dist/copy/compact-dashboard/manifest.json
index 4fd1447ee..485139f74 100644
--- a/packages/ui/dist/copy/compact-dashboard/manifest.json
+++ b/packages/ui/dist/copy/compact-dashboard/manifest.json
@@ -5,30 +5,30 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/compact-dashboard.md",
   "dependencies": [
     "register/compact-dashboard.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "register/chart.js",
     "components/chart.js",
-    "chunks/display-dj9YaBfn.js",
+    "chunks/display-Jm9bAsnb.js",
     "components/compact-dashboard.js",
-    "chunks/compositions-d6BkKTYf.js",
-    "chunks/navigation-Dt8ap-9J.js"
+    "chunks/compositions-D57dCsBz.js",
+    "chunks/navigation-BfNzDYZB.js"
   ],
   "files": {
-    "runtime/register/compact-dashboard.js": "sha256-+hjjezkupB41oBwwJyLeQY5FNxI9eXWs5VsP2irSgxY=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/register/chart.js": "sha256-5iBwKSjcyRylARXTeL2emhbuI2FCMQ757IBdPqFnU0U=",
-    "runtime/components/chart.js": "sha256-J4rkX+ylh8URHbl2DxJ2FtbkHBtan2UOpNGVJIh1LjQ=",
-    "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-    "runtime/components/compact-dashboard.js": "sha256-AyJRimILR3ZhpG7LU6Jtut1sQj0LSEFhOC9MT+gVfbQ=",
-    "runtime/chunks/compositions-d6BkKTYf.js": "sha256-El5csGAVMeeZWmJ1ztdXW3O3t2AQPrf3YrEOMkGX17c=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-CK9kd2wDntxSLF6J4F4+3SFybCPdr/tSqL7xJpw3hFs=",
+    "runtime/register/compact-dashboard.js": "sha256-hCoso+VES7vbCkeradjbcmoYaD/A7Zk2HcIGKzkkT1k=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/register/chart.js": "sha256-T98hQYpUxEQ3kRDeztnuOxP5XmwfddBBocBZ3rdTxT8=",
+    "runtime/components/chart.js": "sha256-hVyc1MgrIwRQZWPz61YJX6ScFRhDJTjMKtYEs5Xtxoo=",
+    "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+    "runtime/components/compact-dashboard.js": "sha256-Y2R2ASCxDuMVCbBdUqOGP60JpwtPCK17jCjpQXz1hhE=",
+    "runtime/chunks/compositions-D57dCsBz.js": "sha256-PEpI/vGgdD+LSznUd0iedSxxVE+5QxIO7BGKeQnCRjo=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-7CRIHJNTDt06T3ztva5EpY4ytKr+vSsMZHxxolQ/+GU=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-I++zY2714BqcfCh02WgcXCFwujrwXLK4TwP9wII+QE4=",
-    "index.html": "sha256-3/JWb8Uk24wjHBuQjWRaXDvwfUi9Mp9wjh4uYtdNxQ4=",
+    "index.html": "sha256-jCDMPy0iYNKdA2sWCK1pFAeKyhEr/jK4IN0ias0Drlc=",
     "README.md": "sha256-6g2tbWoWmdPy5ju9eAR0VdQ5vp0GjEEftnqhmjoP1j4="
   }
 }
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/compositions-d6BkKTYf.js b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/compositions-D57dCsBz.js
similarity index 94%
rename from packages/ui/dist/copy/compact-dashboard/runtime/chunks/compositions-d6BkKTYf.js
rename to packages/ui/dist/copy/compact-dashboard/runtime/chunks/compositions-D57dCsBz.js
index 7d70275f2..f1da4562e 100644
--- a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/compositions-d6BkKTYf.js
+++ b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/compositions-D57dCsBz.js
@@ -1,5 +1,5 @@
-import { i as all, o as enabled } from "./choice-Db_w_BOQ.js";
-import { i as tabs } from "./navigation-Dt8ap-9J.js";
+import { i as all, o as enabled } from "./choice-B7mo5Eq3.js";
+import { i as tabs } from "./navigation-BfNzDYZB.js";
 //#region packages/ui/src/behaviors/compositions.js
 function fileBrowser(root, { on }) {
 	const query = root.querySelector("[data-file-query]"), rows = all(root, "tr[data-file-id]"), status = root.querySelector("[data-file-status]");
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/display-Jm9bAsnb.js b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/display-Jm9bAsnb.js
new file mode 100644
index 000000000..5bc817830
--- /dev/null
+++ b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/display-Jm9bAsnb.js
@@ -0,0 +1,212 @@
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/display.js
+function avatar(root, { on }) {
+	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
+	if (!frame || !fallback) return {};
+	let image = frame.querySelector("img");
+	if (!image) {
+		image = make(root, "img", {
+			alt: "",
+			hidden: ""
+		});
+		frame.prepend(image);
+	}
+	let source = image.getAttribute("src") ?? "";
+	const update = (value) => {
+		source = String(value ?? "");
+		image.hidden = true;
+		fallback.hidden = false;
+		delete frame.dataset.error;
+		if (!source) {
+			image.removeAttribute("src");
+			delete frame.dataset.loading;
+			return;
+		}
+		frame.dataset.loading = "true";
+		image.src = source;
+	};
+	on(image, "load", () => {
+		delete frame.dataset.loading;
+		image.hidden = false;
+		fallback.hidden = true;
+	});
+	on(image, "error", () => {
+		delete frame.dataset.loading;
+		frame.dataset.error = "true";
+		image.hidden = true;
+		fallback.hidden = false;
+	});
+	update(root.getAttribute("src") ?? source);
+	return {
+		get src() {
+			return source;
+		},
+		set src(value) {
+			update(value);
+		},
+		attributeChanged(name) {
+			if (name === "src") update(root.getAttribute("src"));
+		}
+	};
+}
+function chart(root) {
+	const figure = root.querySelector("figure"), svg = figure?.querySelector("svg"), tbody = figure?.querySelector("tbody");
+	if (!figure || !svg || !tbody) return {};
+	let values = all(tbody, "tr").map((row) => ({
+		label: row.cells[0]?.textContent.trim() ?? "",
+		value: Number(row.cells[1]?.textContent)
+	}));
+	const update = (data) => {
+		if (!Array.isArray(data) || data.length > 200 || data.some((row) => typeof row.label !== "string" || typeof row.value !== "number" || !Number.isFinite(row.value) || row.value < 0)) throw new TypeError("data must contain at most 200 labelled finite non-negative values");
+		values = data.map((row) => ({
+			label: row.label,
+			value: row.value
+		}));
+		svg.replaceChildren();
+		tbody.replaceChildren();
+		const ns = "http://www.w3.org/2000/svg";
+		const group = root.ownerDocument.createElementNS(ns, "g");
+		group.setAttribute("class", "chart-series");
+		svg.append(group);
+		const width = Math.max(300, values.length * 32), max = Math.max(1, ...values.map((row) => row.value));
+		svg.setAttribute("viewBox", `0 0 ${width} 140`);
+		svg.setAttribute("aria-label", values.length ? values.map((row) => `${row.label}: ${row.value}`).join("; ") : "No data available");
+		for (const [index, row] of values.entries()) {
+			const bar = root.ownerDocument.createElementNS(ns, "rect"), step = (width - 20) / values.length, height = row.value / max * 100;
+			for (const [name, value] of Object.entries({
+				x: 10 + index * step + step * .15,
+				y: 110 - height,
+				width: step * .7,
+				height
+			})) bar.setAttribute(name, String(value));
+			const title = root.ownerDocument.createElementNS(ns, "title");
+			title.textContent = `${row.label}: ${row.value}`;
+			bar.append(title);
+			group.append(bar);
+			const tr = make(root, "tr");
+			tr.append(make(root, "th", { scope: "row" }, row.label), make(root, "td", {}, row.value));
+			tbody.append(tr);
+		}
+		svg.toggleAttribute("hidden", !values.length);
+		const empty = figure.querySelector("[data-chart-empty]");
+		if (empty) empty.hidden = values.length !== 0;
+	};
+	return {
+		get data() {
+			return values.map((row) => ({ ...row }));
+		},
+		set data(data) {
+			update(data);
+		}
+	};
+}
+function editorSearch(root, { on }) {
+	const input = root.querySelector("[data-query]"), pre = root.querySelector("[data-source]"), status = root.querySelector("[data-search-status]");
+	if (!input || !pre) return {};
+	let source = pre.textContent, current = -1, matches = [];
+	const previous = root.querySelector("[data-previous]"), following = root.querySelector("[data-next]");
+	const select = (index) => {
+		current = matches.length ? (index + matches.length) % matches.length : -1;
+		all(pre, "mark").forEach((mark, i) => mark.toggleAttribute("data-current", i === current));
+		if (status) status.textContent = !input.value ? "Enter text to search." : matches.length ? `Match ${current + 1} of ${matches.length}` : "No matches.";
+	};
+	const search = () => {
+		matches = [];
+		pre.replaceChildren();
+		const query = input.value.toLocaleLowerCase();
+		let folded = "", offset = 0;
+		const starts = [], ends = [];
+		for (const char of source) {
+			const text = char.toLocaleLowerCase();
+			for (let i = 0; i < text.length; i++) {
+				starts.push(offset);
+				ends.push(offset + char.length);
+			}
+			folded += text;
+			offset += char.length;
+		}
+		if (query) {
+			let position = 0;
+			while ((position = folded.indexOf(query, position)) >= 0) {
+				const start = starts[position], end = ends[position + query.length - 1];
+				if (!matches.length || start >= matches.at(-1).end) matches.push({
+					start,
+					end
+				});
+				position += query.length;
+			}
+		}
+		let cursor = 0;
+		for (const match of matches) {
+			pre.append(root.ownerDocument.createTextNode(source.slice(cursor, match.start)), make(root, "mark", {}, source.slice(match.start, match.end)));
+			cursor = match.end;
+		}
+		pre.append(root.ownerDocument.createTextNode(source.slice(cursor)));
+		if (previous) previous.disabled = !matches.length;
+		if (following) following.disabled = !matches.length;
+		select(0);
+	};
+	const next = (direction = 1) => {
+		if (!matches.length) return;
+		select(current + (direction < 0 ? -1 : 1));
+		all(pre, "mark")[current]?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	};
+	on(input, "input", search);
+	on(input, "keydown", (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			next(event.shiftKey ? -1 : 1);
+		} else if (event.key === "Escape" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			input.value = "";
+			search();
+		}
+	});
+	on(previous, "click", () => next(-1));
+	on(following, "click", () => next());
+	search();
+	return {
+		next,
+		get source() {
+			return source;
+		},
+		set source(text) {
+			source = String(text);
+			search();
+		},
+		get query() {
+			return input.value;
+		},
+		set query(value) {
+			input.value = String(value);
+			search();
+		},
+		get matchCount() {
+			return matches.length;
+		}
+	};
+}
+function developerView(root, { on }) {
+	on(root, "click", (event) => {
+		const action = event.target.closest("button,[data-action]");
+		if (action && enabled(action)) root.emit("action", { action: action.dataset.action ?? action.textContent.trim() });
+	});
+	return { setText(text) {
+		let pre = root.querySelector("pre");
+		if (!pre) {
+			pre = make(root, "pre", {
+				class: "j3w1-readonly-text",
+				tabindex: "0",
+				"aria-label": "Read-only text"
+			});
+			root.firstElementChild.replaceChildren(pre);
+		}
+		pre.textContent = String(text);
+	} };
+}
+//#endregion
+export { editorSearch as i, chart as n, developerView as r, avatar as t };
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/display-dj9YaBfn.js b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/display-dj9YaBfn.js
deleted file mode 100644
index 80833d5da..000000000
--- a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/display-dj9YaBfn.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/display.js
-function avatar(root, { on }) {
-	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
-	if (!frame || !fallback) return {};
-	let image = frame.querySelector("img");
-	if (!image) {
-		image = make(root, "img", {
-			alt: "",
-			hidden: ""
-		});
-		frame.prepend(image);
-	}
-	let source = image.getAttribute("src") ?? "";
-	const update = (value) => {
-		source = String(value ?? "");
-		image.hidden = true;
-		fallback.hidden = false;
-		delete frame.dataset.error;
-		if (!source) {
-			image.removeAttribute("src");
-			delete frame.dataset.loading;
-			return;
-		}
-		frame.dataset.loading = "true";
-		image.src = source;
-	};
-	on(image, "load", () => {
-		delete frame.dataset.loading;
-		image.hidden = false;
-		fallback.hidden = true;
-	});
-	on(image, "error", () => {
-		delete frame.dataset.loading;
-		frame.dataset.error = "true";
-		image.hidden = true;
-		fallback.hidden = false;
-	});
-	update(root.getAttribute("src") ?? source);
-	return {
-		get src() {
-			return source;
-		},
-		set src(value) {
-			update(value);
-		},
-		attributeChanged(name) {
-			if (name === "src") update(root.getAttribute("src"));
-		}
-	};
-}
-function chart(root) {
-	const figure = root.querySelector("figure"), svg = figure?.querySelector("svg"), tbody = figure?.querySelector("tbody");
-	if (!figure || !svg || !tbody) return {};
-	let values = all(tbody, "tr").map((row) => ({
-		label: row.cells[0]?.textContent.trim() ?? "",
-		value: Number(row.cells[1]?.textContent)
-	}));
-	const update = (data) => {
-		if (!Array.isArray(data) || data.length > 200 || data.some((row) => typeof row.label !== "string" || typeof row.value !== "number" || !Number.isFinite(row.value) || row.value < 0)) throw new TypeError("data must contain at most 200 labelled finite non-negative values");
-		values = data.map((row) => ({
-			label: row.label,
-			value: row.value
-		}));
-		svg.replaceChildren();
-		tbody.replaceChildren();
-		const ns = "http://www.w3.org/2000/svg";
-		const group = root.ownerDocument.createElementNS(ns, "g");
-		group.setAttribute("class", "chart-series");
-		svg.append(group);
-		const width = Math.max(300, values.length * 32), max = Math.max(1, ...values.map((row) => row.value));
-		svg.setAttribute("viewBox", `0 0 ${width} 140`);
-		svg.setAttribute("aria-label", values.length ? values.map((row) => `${row.label}: ${row.value}`).join("; ") : "No data available");
-		for (const [index, row] of values.entries()) {
-			const bar = root.ownerDocument.createElementNS(ns, "rect"), step = (width - 20) / values.length, height = row.value / max * 100;
-			for (const [name, value] of Object.entries({
-				x: 10 + index * step + step * .15,
-				y: 110 - height,
-				width: step * .7,
-				height
-			})) bar.setAttribute(name, String(value));
-			const title = root.ownerDocument.createElementNS(ns, "title");
-			title.textContent = `${row.label}: ${row.value}`;
-			bar.append(title);
-			group.append(bar);
-			const tr = make(root, "tr");
-			tr.append(make(root, "th", { scope: "row" }, row.label), make(root, "td", {}, row.value));
-			tbody.append(tr);
-		}
-		svg.toggleAttribute("hidden", !values.length);
-		const empty = figure.querySelector("[data-chart-empty]");
-		if (empty) empty.hidden = values.length !== 0;
-	};
-	return {
-		get data() {
-			return values.map((row) => ({ ...row }));
-		},
-		set data(data) {
-			update(data);
-		}
-	};
-}
-function editorSearch(root, { on }) {
-	const input = root.querySelector("[data-query]"), pre = root.querySelector("[data-source]"), status = root.querySelector("[data-search-status]");
-	if (!input || !pre) return {};
-	let source = pre.textContent, current = -1, matches = [];
-	const previous = root.querySelector("[data-previous]"), following = root.querySelector("[data-next]");
-	const select = (index) => {
-		current = matches.length ? (index + matches.length) % matches.length : -1;
-		all(pre, "mark").forEach((mark, i) => mark.toggleAttribute("data-current", i === current));
-		if (status) status.textContent = !input.value ? "Enter text to search." : matches.length ? `Match ${current + 1} of ${matches.length}` : "No matches.";
-	};
-	const search = () => {
-		matches = [];
-		pre.replaceChildren();
-		const query = input.value.toLocaleLowerCase();
-		let folded = "", offset = 0;
-		const starts = [], ends = [];
-		for (const char of source) {
-			const text = char.toLocaleLowerCase();
-			for (let i = 0; i < text.length; i++) {
-				starts.push(offset);
-				ends.push(offset + char.length);
-			}
-			folded += text;
-			offset += char.length;
-		}
-		if (query) {
-			let position = 0;
-			while ((position = folded.indexOf(query, position)) >= 0) {
-				const start = starts[position], end = ends[position + query.length - 1];
-				if (!matches.length || start >= matches.at(-1).end) matches.push({
-					start,
-					end
-				});
-				position += query.length;
-			}
-		}
-		let cursor = 0;
-		for (const match of matches) {
-			pre.append(root.ownerDocument.createTextNode(source.slice(cursor, match.start)), make(root, "mark", {}, source.slice(match.start, match.end)));
-			cursor = match.end;
-		}
-		pre.append(root.ownerDocument.createTextNode(source.slice(cursor)));
-		if (previous) previous.disabled = !matches.length;
-		if (following) following.disabled = !matches.length;
-		select(0);
-	};
-	const next = (direction = 1) => {
-		if (!matches.length) return;
-		select(current + (direction < 0 ? -1 : 1));
-		all(pre, "mark")[current]?.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	};
-	on(input, "input", search);
-	on(input, "keydown", (event) => {
-		if (event.key === "Enter") {
-			event.preventDefault();
-			next(event.shiftKey ? -1 : 1);
-		} else if (event.key === "Escape" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			input.value = "";
-			search();
-		}
-	});
-	on(previous, "click", () => next(-1));
-	on(following, "click", () => next());
-	search();
-	return {
-		next,
-		get source() {
-			return source;
-		},
-		set source(text) {
-			source = String(text);
-			search();
-		},
-		get query() {
-			return input.value;
-		},
-		set query(value) {
-			input.value = String(value);
-			search();
-		},
-		get matchCount() {
-			return matches.length;
-		}
-	};
-}
-function developerView(root, { on }) {
-	on(root, "click", (event) => {
-		const action = event.target.closest("button,[data-action]");
-		if (action && enabled(action)) root.emit("action", { action: action.dataset.action ?? action.textContent.trim() });
-	});
-	return { setText(text) {
-		let pre = root.querySelector("pre");
-		if (!pre) {
-			pre = make(root, "pre", {
-				class: "j3w1-readonly-text",
-				tabindex: "0",
-				"aria-label": "Read-only text"
-			});
-			root.firstElementChild.replaceChildren(pre);
-		}
-		pre.textContent = String(text);
-	} };
-}
-//#endregion
-export { editorSearch as i, chart as n, developerView as r, avatar as t };
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/combobox/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/navigation-BfNzDYZB.js
similarity index 96%
rename from packages/ui/dist/copy/combobox/runtime/chunks/navigation-Dt8ap-9J.js
rename to packages/ui/dist/copy/compact-dashboard/runtime/chunks/navigation-BfNzDYZB.js
index 81201c8d5..db2779553 100644
--- a/packages/ui/dist/copy/combobox/runtime/chunks/navigation-Dt8ap-9J.js
+++ b/packages/ui/dist/copy/compact-dashboard/runtime/chunks/navigation-BfNzDYZB.js
@@ -1,4 +1,4 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/navigation.js
 function tabs(root, { on }, listOverride) {
 	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
@@ -81,7 +81,13 @@ function toolbar(root, { on }) {
 			"End"
 		].includes(event.key)) return;
 		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
 	});
 	on(bar, "click", (event) => {
 		const button = event.target.closest("button[aria-pressed]");
@@ -321,7 +327,11 @@ function menu(root, { on }) {
 			"End"
 		].includes(event.key)) {
 			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
 		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
 			event.preventDefault();
 			event.stopPropagation();
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/components/chart.js b/packages/ui/dist/copy/compact-dashboard/runtime/components/chart.js
index 2f3f33b51..70d90b671 100644
--- a/packages/ui/dist/copy/compact-dashboard/runtime/components/chart.js
+++ b/packages/ui/dist/copy/compact-dashboard/runtime/components/chart.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as chart } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as chart } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/chart.js
 var J3w1Chart = class extends J3w1Element {
 	static componentId = "chart";
 	static version = "4.0.0";
-	static implementationId = "sha256-HoAvhRRdFv6zYSIR6McpxJvYeGHHbg4t1zBpi2x1EXo=";
+	static implementationId = "sha256-48dT14XNNF9ZyV4PB4oLs8zT/lNQqNt9rXZCl9gUYVc=";
 	static connect = chart;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/components/compact-dashboard.js b/packages/ui/dist/copy/compact-dashboard/runtime/components/compact-dashboard.js
index dd2296be0..b29237379 100644
--- a/packages/ui/dist/copy/compact-dashboard/runtime/components/compact-dashboard.js
+++ b/packages/ui/dist/copy/compact-dashboard/runtime/components/compact-dashboard.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as dashboard } from "../chunks/compositions-d6BkKTYf.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as dashboard } from "../chunks/compositions-D57dCsBz.js";
 //#region .cache/ui-build/entries/components/compact-dashboard.js
 var J3w1CompactDashboard = class extends J3w1Element {
 	static componentId = "compact-dashboard";
 	static version = "4.0.0";
-	static implementationId = "sha256-HehbhZc0CAfJPPd19KsqWamAD2EgvREZQU0pBPncnJI=";
+	static implementationId = "sha256-Shp675PVGMGOiXxiKpeWEQHQugGKEIbNO/jz8KwP4m0=";
 	static connect = dashboard;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/register/chart.js b/packages/ui/dist/copy/compact-dashboard/runtime/register/chart.js
index 17feb810e..8efbe0a3f 100644
--- a/packages/ui/dist/copy/compact-dashboard/runtime/register/chart.js
+++ b/packages/ui/dist/copy/compact-dashboard/runtime/register/chart.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Chart } from "../components/chart.js";
 //#region .cache/ui-build/entries/register/chart.js
 var element = registerElement("j3w1-chart", J3w1Chart);
diff --git a/packages/ui/dist/copy/compact-dashboard/runtime/register/compact-dashboard.js b/packages/ui/dist/copy/compact-dashboard/runtime/register/compact-dashboard.js
index 93010f858..6a2980828 100644
--- a/packages/ui/dist/copy/compact-dashboard/runtime/register/compact-dashboard.js
+++ b/packages/ui/dist/copy/compact-dashboard/runtime/register/compact-dashboard.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./chart.js";
 import { J3w1CompactDashboard } from "../components/compact-dashboard.js";
 //#region .cache/ui-build/entries/register/compact-dashboard.js
diff --git a/packages/ui/dist/copy/compact-dashboard/tokens.css b/packages/ui/dist/copy/compact-dashboard/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/compact-dashboard/tokens.css
+++ b/packages/ui/dist/copy/compact-dashboard/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/data-table/component.css b/packages/ui/dist/copy/data-table/component.css
index c4feacebd..cac5d4e63 100644
--- a/packages/ui/dist/copy/data-table/component.css
+++ b/packages/ui/dist/copy/data-table/component.css
@@ -8,7 +8,7 @@ j3w1-data-table {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-data-table, j3w1-data-table *, j3w1-data-table *::before, j3w1-data-table *::after { box-sizing: border-box; }
-j3w1-data-table button, j3w1-data-table input, j3w1-data-table select, j3w1-data-table textarea { font: inherit; }
+j3w1-data-table :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-data-table ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -41,7 +41,7 @@ j3w1-data-table .data-table .data-table-header {
   position: relative;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -57,7 +57,7 @@ j3w1-data-table .data-table tbody th { color: inherit; font-weight: var(--font-w
 
 j3w1-data-table .data-table .data-table-header-select,
 j3w1-data-table .data-table .data-table-cell-select {
-  width: var(--density-control-height, 32px);
+  width: var(--density-control-height, 24px);
   padding-inline-end: 0;
   text-align: center;
 }
@@ -72,7 +72,7 @@ j3w1-data-table .data-table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -92,8 +92,8 @@ j3w1-data-table .data-table-checkbox {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   padding: 0;
   vertical-align: middle;
@@ -126,7 +126,7 @@ j3w1-data-table .data-table-select-all[aria-checked="mixed"] .data-table-check-g
 j3w1-data-table .data-table-checkbox:checked::before {
   content: "✓";
   color: var(--color-action-primary-text);
-  font-size: calc(var(--density-icon, 16px) * 0.75);
+  font-size: calc(var(--density-icon, 12px) * 0.75);
   line-height: 1;
 }
 
@@ -142,7 +142,7 @@ j3w1-data-table .data-table .data-table-body .data-table-row:first-child {
 
 j3w1-data-table .data-table .data-table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -214,7 +214,7 @@ j3w1-data-table .data-table .data-table-row[aria-selected="true"]:hover {
 }
 j3w1-data-table .data-table .data-table-row[aria-selected="true"]:focus-visible,
 j3w1-data-table .data-table .data-table-row:has(.data-table-checkbox:checked):focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-data-table .data-table .data-table-header[aria-sort="ascending"] .data-table-sort-glyph,
@@ -284,8 +284,8 @@ j3w1-data-table .menu-button {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -334,8 +334,8 @@ j3w1-data-table .menu-item {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -351,7 +351,7 @@ j3w1-data-table .menu-check {
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-text-bright);
   visibility: hidden;
 }
@@ -393,8 +393,8 @@ j3w1-data-table .menu-button:focus-visible {
 }
 
 j3w1-data-table .menu-item:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 j3w1-data-table .menu-button:focus:not(:focus-visible),
diff --git a/packages/ui/dist/copy/data-table/index.html b/packages/ui/dist/copy/data-table/index.html
index 7630b0f1d..4f383d360 100644
--- a/packages/ui/dist/copy/data-table/index.html
+++ b/packages/ui/dist/copy/data-table/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Data table · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-data-table id="example-data-table-default"><div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="data-table"><caption class="table-caption">Project records · synthetic fixture</caption><thead class="data-table-head"><tr><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Project<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Owner<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Status<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Scope<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th></tr></thead><tbody class="data-table-body"><tr class="data-table-row" id="example-data-table-default-record-0" data-status="Ready" aria-selected="false" tabindex="0"><td class="data-table-cell" id="example-data-table-default-record-name-0">Atlas library</td><td class="data-table-cell">Avery Kim</td><td class="data-table-cell">Ready</td><td class="data-table-cell">24</td></tr><tr class="data-table-row" id="example-data-table-default-record-1" data-status="In progress" aria-selected="false" tabindex="-1"><td class="data-table-cell" id="example-data-table-default-record-name-1">Orion workspace</td><td class="data-table-cell">Jordan Lee</td><td class="data-table-cell">In progress</td><td class="data-table-cell">12</td></tr><tr class="data-table-row" id="example-data-table-default-record-2" data-status="Ready" aria-selected="false" tabindex="-1"><td class="data-table-cell" id="example-data-table-default-record-name-2">Field notes</td><td class="data-table-cell">Morgan Noor</td><td class="data-table-cell">Ready</td><td class="data-table-cell">38</td></tr><tr class="data-table-row" id="example-data-table-default-record-3" data-status="Review" aria-selected="false" tabindex="-1"><td class="data-table-cell" id="example-data-table-default-record-name-3">Signal monitor</td><td class="data-table-cell">Riley Stone</td><td class="data-table-cell">Review</td><td class="data-table-cell">6</td></tr><tr class="data-table-empty" hidden=""><td class="data-table-empty-cell" colspan="4">No rows match.</td></tr><tr class="data-table-loading" hidden=""><td colspan="4">⋯ Loading rows</td></tr></tbody></table></div></j3w1-data-table><script type="module" src="./runtime/register/data-table.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Data table · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-data-table id="example-data-table-default"><div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="data-table"><caption class="table-caption">Project records · synthetic fixture</caption><thead class="data-table-head"><tr><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Project<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Owner<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Status<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Scope<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th></tr></thead><tbody class="data-table-body"><tr class="data-table-row" id="example-data-table-default-record-0" data-status="Ready" aria-selected="false" tabindex="0"><td class="data-table-cell" id="example-data-table-default-record-name-0">Atlas library</td><td class="data-table-cell">Avery Kim</td><td class="data-table-cell">Ready</td><td class="data-table-cell">24</td></tr><tr class="data-table-row" id="example-data-table-default-record-1" data-status="In progress" aria-selected="false" tabindex="-1"><td class="data-table-cell" id="example-data-table-default-record-name-1">Orion workspace</td><td class="data-table-cell">Jordan Lee</td><td class="data-table-cell">In progress</td><td class="data-table-cell">12</td></tr><tr class="data-table-row" id="example-data-table-default-record-2" data-status="Ready" aria-selected="false" tabindex="-1"><td class="data-table-cell" id="example-data-table-default-record-name-2">Field notes</td><td class="data-table-cell">Morgan Noor</td><td class="data-table-cell">Ready</td><td class="data-table-cell">38</td></tr><tr class="data-table-row" id="example-data-table-default-record-3" data-status="Review" aria-selected="false" tabindex="-1"><td class="data-table-cell" id="example-data-table-default-record-name-3">Signal monitor</td><td class="data-table-cell">Riley Stone</td><td class="data-table-cell">Review</td><td class="data-table-cell">6</td></tr><tr class="data-table-empty" hidden=""><td class="data-table-empty-cell" colspan="4">No rows match.</td></tr><tr class="data-table-loading" hidden=""><td colspan="4">⋯ Loading rows</td></tr></tbody></table></div></j3w1-data-table><script type="module" src="./runtime/register/data-table.js"></script></body></html>
diff --git a/packages/ui/dist/copy/data-table/manifest.json b/packages/ui/dist/copy/data-table/manifest.json
index f3dd67e9a..620692789 100644
--- a/packages/ui/dist/copy/data-table/manifest.json
+++ b/packages/ui/dist/copy/data-table/manifest.json
@@ -5,28 +5,28 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/data-table.md",
   "dependencies": [
     "register/data-table.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "register/menu.js",
     "components/menu.js",
-    "chunks/navigation-Dt8ap-9J.js",
+    "chunks/navigation-BfNzDYZB.js",
     "components/data-table.js",
-    "chunks/tables-B25ydUHs.js"
+    "chunks/tables-Cjr1EIJz.js"
   ],
   "files": {
-    "runtime/register/data-table.js": "sha256-BtE8hPANffhtRYhX+PBKWwtZUJMtlvG/m3ctxaSCwTU=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/register/menu.js": "sha256-YX+9ydadaIbkPIBFhLWX4Jv3V9vIl4UY1qolxLGfZUg=",
-    "runtime/components/menu.js": "sha256-AMtJth+M+4jqb8imqdn9VcM3aKvtgCWkPySfsI7htH8=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "runtime/components/data-table.js": "sha256-jj60XwNxQlssKZTff5HB9Z6v14UDZdK8O80kLP082l4=",
-    "runtime/chunks/tables-B25ydUHs.js": "sha256-XqRdyfrSS93rVybWHq6a0WhrmZgaboHi5n8ymgwRbM8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-aygLfHiZmFXenQHQrHnjVcw8W0tp2SLdB7d/laGcKgA=",
+    "runtime/register/data-table.js": "sha256-wrLpuRzCJQhN8Kx+gdh/HOPhsNQP/wrnopu8NmJsUm0=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/register/menu.js": "sha256-6CvU7Rei9lC+olXvluxdbCPqh46GrPSvB2MGiudiMTk=",
+    "runtime/components/menu.js": "sha256-As/aVex/jKXrmY4x/rG0tVMVUij8ZLPXK0kKS4ZBpSQ=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "runtime/components/data-table.js": "sha256-Du0JOAv8n9YEK04c217gbbmS25D1Yfx4irEe/DIPLk4=",
+    "runtime/chunks/tables-Cjr1EIJz.js": "sha256-K6BF6M6xNawgWdL+NIcBRZmY98j45o69tBI034Ks4Bg=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-T5PnYnMx2i60rNgYfN/tfLrncLf9cAlC4gsLpnSw/b4=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-FieIuPCt66UIxpdAH0wuPBOrPEVXUqjJfyWMyCdO9nI=",
-    "index.html": "sha256-wxdZWAwB7Q/aPOpcvws/xlqJAMNO1twAxfHnSVMuNlo=",
+    "index.html": "sha256-mdaJIGJ1LweEct6N9Nr+hCoVjZXODSmyFsSgII8UMzQ=",
     "README.md": "sha256-bS0eRb53j0VgRsRbFv81sqclvoIS7Uv4m/FIBGXMqTw="
   }
 }
diff --git a/packages/ui/dist/copy/data-table/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/data-table/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/data-table/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/data-table/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/data-table/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/data-table/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/data-table/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/data-table/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/data-table/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/data-table/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/data-table/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/data-table/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/data-table/runtime/chunks/navigation-BfNzDYZB.js b/packages/ui/dist/copy/data-table/runtime/chunks/navigation-BfNzDYZB.js
new file mode 100644
index 000000000..db2779553
--- /dev/null
+++ b/packages/ui/dist/copy/data-table/runtime/chunks/navigation-BfNzDYZB.js
@@ -0,0 +1,377 @@
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/navigation.js
+function tabs(root, { on }, listOverride) {
+	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
+	if (!list) return {};
+	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
+	const select = (id, focus = false) => {
+		const tab = items().find((item) => item.id === id);
+		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
+		all(list, "[role=\"tab\"]").forEach((item) => {
+			item.setAttribute("aria-selected", String(item === tab));
+			item.tabIndex = item === tab ? 0 : -1;
+		});
+		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
+			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
+			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
+		});
+		if (focus) tab.focus();
+		return tab;
+	};
+	const activate = (tab) => {
+		select(tab.id);
+		root.emit("select", {
+			id: tab.id,
+			panelId: tab.getAttribute("aria-controls")
+		});
+	};
+	on(list, "click", (event) => {
+		const tab = event.target.closest("[role=\"tab\"]");
+		if (tab && enabled(tab)) activate(tab);
+	});
+	on(list, "keydown", (event) => {
+		const current = event.target.closest("[role=\"tab\"]"), options = items();
+		if (!current) return;
+		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		let index = options.indexOf(current);
+		if (event.key === next) index++;
+		else if (event.key === previous) index--;
+		else if (event.key === "Home") index = 0;
+		else if (event.key === "End") index = options.length - 1;
+		else if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			activate(current);
+			return;
+		} else return;
+		event.preventDefault();
+		const tab = rove(options, index);
+		if (root.getAttribute("activation") !== "manual") activate(tab);
+	});
+	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
+	if (initial) select(initial.id);
+	return {
+		select,
+		get selectedId() {
+			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
+		},
+		set selectedId(id) {
+			select(id);
+		}
+	};
+}
+function toolbar(root, { on }) {
+	const bar = root.querySelector("[role=\"toolbar\"]");
+	if (!bar) return {};
+	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
+	const initial = controls();
+	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
+	on(bar, "focusin", (event) => {
+		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
+	});
+	on(bar, "keydown", (event) => {
+		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
+		const items = controls(), index = items.indexOf(event.target);
+		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		if (![
+			next,
+			prev,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		event.preventDefault();
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
+	});
+	on(bar, "click", (event) => {
+		const button = event.target.closest("button[aria-pressed]");
+		if (button && enabled(button)) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.dataset.action ?? button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		}
+	});
+	return {};
+}
+function disclosure(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button[aria-controls][aria-expanded]");
+		if (!button || !enabled(button)) return;
+		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
+		if (!target) return;
+		const expanded = button.getAttribute("aria-expanded") !== "true";
+		button.setAttribute("aria-expanded", String(expanded));
+		target.hidden = !expanded;
+		root.emit("toggle", {
+			id: target.id,
+			expanded
+		});
+	});
+	const details = root.querySelector("details");
+	on(details, "toggle", () => root.emit("toggle", {
+		id: details.id,
+		expanded: details.open
+	}));
+	return {
+		get open() {
+			return details?.open ?? false;
+		},
+		set open(value) {
+			if (details) details.open = Boolean(value);
+		}
+	};
+}
+function combobox(root, { on, signal }) {
+	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
+	if (!input || !list) return {};
+	identify(root, list, "options");
+	input.setAttribute("aria-controls", list.id);
+	let active = null, notifying = false;
+	const notify = () => {
+		notifying = true;
+		try {
+			nativeInput(input);
+			nativeInput(input, "change");
+		} finally {
+			notifying = false;
+		}
+	};
+	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
+	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
+	const setActive = (option) => {
+		active = option;
+		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
+		if (option) {
+			input.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		} else input.removeAttribute("aria-activedescendant");
+	};
+	const hide = () => {
+		list.hidden = true;
+		input.setAttribute("aria-expanded", "false");
+		setActive(null);
+	};
+	const filter = (query = input.value) => {
+		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
+		all(list, "[role=\"group\"]").forEach((group) => {
+			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
+		});
+		const empty = root.querySelector(".combobox-empty");
+		if (empty) {
+			empty.hidden = options().length !== 0;
+			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
+		}
+		if (!options().includes(active)) setActive(null);
+	};
+	const show = (allOptions = false) => {
+		if (!enabled(input) || input.readOnly) return;
+		filter(allOptions ? "" : input.value);
+		list.hidden = false;
+		input.setAttribute("aria-expanded", "true");
+		place(input, list);
+	};
+	const choose = (option) => {
+		if (!option || !enabled(option)) return;
+		input.value = option.dataset.value ?? option.textContent.trim();
+		hide();
+		notify();
+		input.focus();
+	};
+	on(input, "input", () => {
+		if (!notifying) {
+			show();
+			announce(root, `${options().length} options available.`);
+		}
+	});
+	on(input, "keydown", (event) => {
+		if (event.key === "Tab") {
+			hide();
+			return;
+		}
+		if (event.key === "Escape") {
+			if (!list.hidden) {
+				hide();
+				event.stopPropagation();
+			} else if (input.value) {
+				input.value = "";
+				notify();
+				event.stopPropagation();
+			}
+			event.preventDefault();
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			hide();
+			return;
+		}
+		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			if (list.hidden) show(true);
+			if (event.altKey) return;
+			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
+			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
+		} else if (event.key === "Enter" && !list.hidden && active) {
+			event.preventDefault();
+			choose(active);
+		}
+	});
+	on(list, "pointerdown", (event) => {
+		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
+	});
+	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
+	on(root.querySelector(".combobox-toggle"), "click", () => {
+		list.hidden ? show(true) : hide();
+		input.focus();
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide();
+	});
+	on(root, "focusout", () => queueMicrotask(() => {
+		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
+	}));
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!list.hidden) place(input, list);
+	});
+	on(root.ownerDocument, "scroll", (event) => {
+		if (!list.hidden && !list.contains(event.target)) place(input, list);
+	}, { capture: true });
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !list.hidden;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		get value() {
+			return input.value;
+		},
+		set value(value) {
+			input.value = String(value ?? "");
+			if (!list.hidden) filter();
+		},
+		cleanup: hide
+	};
+}
+function menu(root, { on }) {
+	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
+	if (!trigger || !main) return {};
+	identify(root, main, "menu");
+	trigger.setAttribute("aria-controls", main.id);
+	const lists = all(root, "[role=\"menu\"]");
+	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
+	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
+	const closeList = (list) => {
+		list.hidden = true;
+		controller(list)?.setAttribute("aria-expanded", "false");
+	};
+	const hide = (focus = true) => {
+		lists.forEach(closeList);
+		if (focus) trigger.focus();
+	};
+	const showList = (list, button, last = false) => {
+		list.hidden = false;
+		button.setAttribute("aria-expanded", "true");
+		place(button, list);
+		rove(items(list), last ? items(list).length - 1 : 0);
+	};
+	const show = () => {
+		if (enabled(trigger)) showList(main, trigger);
+	};
+	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
+	const activate = (item) => {
+		if (!enabled(item)) return;
+		const child = submenu(item);
+		if (child) {
+			showList(child, item);
+			return;
+		}
+		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
+		else hide();
+		root.emit("action", {
+			action: item.dataset.action ?? item.textContent.trim(),
+			checked: item.getAttribute("aria-checked") === "true"
+		});
+	};
+	on(trigger, "click", () => main.hidden ? show() : hide());
+	on(trigger, "keydown", (event) => {
+		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
+			event.preventDefault();
+			showList(main, trigger, event.key === "ArrowUp");
+		}
+	});
+	on(root, "click", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (item) activate(item);
+	});
+	on(root, "keydown", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (!item) return;
+		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
+		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (list !== main) {
+				closeList(list);
+				controller(list)?.focus();
+			} else hide();
+		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
+			event.preventDefault();
+			showList(submenu(item), item);
+		} else if (event.key === "Tab") hide();
+		else if (event.key.length === 1 && /\S/.test(event.key)) {
+			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+			if (found) {
+				event.preventDefault();
+				rove(options, options.indexOf(found));
+			}
+		}
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument, "focusin", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
+	hide(false);
+	return {
+		show,
+		hide,
+		get open() {
+			return !main.hidden;
+		},
+		set open(value) {
+			value ? show() : hide(false);
+		},
+		cleanup() {
+			hide(false);
+		}
+	};
+}
+//#endregion
+export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/data-table/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/data-table/runtime/chunks/navigation-Dt8ap-9J.js
deleted file mode 100644
index 81201c8d5..000000000
--- a/packages/ui/dist/copy/data-table/runtime/chunks/navigation-Dt8ap-9J.js
+++ /dev/null
@@ -1,367 +0,0 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/navigation.js
-function tabs(root, { on }, listOverride) {
-	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
-	if (!list) return {};
-	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
-	const select = (id, focus = false) => {
-		const tab = items().find((item) => item.id === id);
-		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
-		all(list, "[role=\"tab\"]").forEach((item) => {
-			item.setAttribute("aria-selected", String(item === tab));
-			item.tabIndex = item === tab ? 0 : -1;
-		});
-		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
-			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
-			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
-		});
-		if (focus) tab.focus();
-		return tab;
-	};
-	const activate = (tab) => {
-		select(tab.id);
-		root.emit("select", {
-			id: tab.id,
-			panelId: tab.getAttribute("aria-controls")
-		});
-	};
-	on(list, "click", (event) => {
-		const tab = event.target.closest("[role=\"tab\"]");
-		if (tab && enabled(tab)) activate(tab);
-	});
-	on(list, "keydown", (event) => {
-		const current = event.target.closest("[role=\"tab\"]"), options = items();
-		if (!current) return;
-		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		let index = options.indexOf(current);
-		if (event.key === next) index++;
-		else if (event.key === previous) index--;
-		else if (event.key === "Home") index = 0;
-		else if (event.key === "End") index = options.length - 1;
-		else if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			activate(current);
-			return;
-		} else return;
-		event.preventDefault();
-		const tab = rove(options, index);
-		if (root.getAttribute("activation") !== "manual") activate(tab);
-	});
-	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
-	if (initial) select(initial.id);
-	return {
-		select,
-		get selectedId() {
-			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
-		},
-		set selectedId(id) {
-			select(id);
-		}
-	};
-}
-function toolbar(root, { on }) {
-	const bar = root.querySelector("[role=\"toolbar\"]");
-	if (!bar) return {};
-	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
-	const initial = controls();
-	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
-	on(bar, "focusin", (event) => {
-		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
-	});
-	on(bar, "keydown", (event) => {
-		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
-		const items = controls(), index = items.indexOf(event.target);
-		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		if (![
-			next,
-			prev,
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
-	});
-	on(bar, "click", (event) => {
-		const button = event.target.closest("button[aria-pressed]");
-		if (button && enabled(button)) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.dataset.action ?? button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		}
-	});
-	return {};
-}
-function disclosure(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button[aria-controls][aria-expanded]");
-		if (!button || !enabled(button)) return;
-		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
-		if (!target) return;
-		const expanded = button.getAttribute("aria-expanded") !== "true";
-		button.setAttribute("aria-expanded", String(expanded));
-		target.hidden = !expanded;
-		root.emit("toggle", {
-			id: target.id,
-			expanded
-		});
-	});
-	const details = root.querySelector("details");
-	on(details, "toggle", () => root.emit("toggle", {
-		id: details.id,
-		expanded: details.open
-	}));
-	return {
-		get open() {
-			return details?.open ?? false;
-		},
-		set open(value) {
-			if (details) details.open = Boolean(value);
-		}
-	};
-}
-function combobox(root, { on, signal }) {
-	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
-	if (!input || !list) return {};
-	identify(root, list, "options");
-	input.setAttribute("aria-controls", list.id);
-	let active = null, notifying = false;
-	const notify = () => {
-		notifying = true;
-		try {
-			nativeInput(input);
-			nativeInput(input, "change");
-		} finally {
-			notifying = false;
-		}
-	};
-	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
-	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
-	const setActive = (option) => {
-		active = option;
-		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
-		if (option) {
-			input.setAttribute("aria-activedescendant", option.id);
-			option.scrollIntoView({ block: "nearest" });
-		} else input.removeAttribute("aria-activedescendant");
-	};
-	const hide = () => {
-		list.hidden = true;
-		input.setAttribute("aria-expanded", "false");
-		setActive(null);
-	};
-	const filter = (query = input.value) => {
-		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-		all(list, "[role=\"group\"]").forEach((group) => {
-			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
-		});
-		const empty = root.querySelector(".combobox-empty");
-		if (empty) {
-			empty.hidden = options().length !== 0;
-			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
-		}
-		if (!options().includes(active)) setActive(null);
-	};
-	const show = (allOptions = false) => {
-		if (!enabled(input) || input.readOnly) return;
-		filter(allOptions ? "" : input.value);
-		list.hidden = false;
-		input.setAttribute("aria-expanded", "true");
-		place(input, list);
-	};
-	const choose = (option) => {
-		if (!option || !enabled(option)) return;
-		input.value = option.dataset.value ?? option.textContent.trim();
-		hide();
-		notify();
-		input.focus();
-	};
-	on(input, "input", () => {
-		if (!notifying) {
-			show();
-			announce(root, `${options().length} options available.`);
-		}
-	});
-	on(input, "keydown", (event) => {
-		if (event.key === "Tab") {
-			hide();
-			return;
-		}
-		if (event.key === "Escape") {
-			if (!list.hidden) {
-				hide();
-				event.stopPropagation();
-			} else if (input.value) {
-				input.value = "";
-				notify();
-				event.stopPropagation();
-			}
-			event.preventDefault();
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			hide();
-			return;
-		}
-		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-			event.preventDefault();
-			if (list.hidden) show(true);
-			if (event.altKey) return;
-			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
-			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
-		} else if (event.key === "Enter" && !list.hidden && active) {
-			event.preventDefault();
-			choose(active);
-		}
-	});
-	on(list, "pointerdown", (event) => {
-		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
-	});
-	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
-	on(root.querySelector(".combobox-toggle"), "click", () => {
-		list.hidden ? show(true) : hide();
-		input.focus();
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide();
-	});
-	on(root, "focusout", () => queueMicrotask(() => {
-		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
-	}));
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!list.hidden) place(input, list);
-	});
-	on(root.ownerDocument, "scroll", (event) => {
-		if (!list.hidden && !list.contains(event.target)) place(input, list);
-	}, { capture: true });
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !list.hidden;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		get value() {
-			return input.value;
-		},
-		set value(value) {
-			input.value = String(value ?? "");
-			if (!list.hidden) filter();
-		},
-		cleanup: hide
-	};
-}
-function menu(root, { on }) {
-	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
-	if (!trigger || !main) return {};
-	identify(root, main, "menu");
-	trigger.setAttribute("aria-controls", main.id);
-	const lists = all(root, "[role=\"menu\"]");
-	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
-	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
-	const closeList = (list) => {
-		list.hidden = true;
-		controller(list)?.setAttribute("aria-expanded", "false");
-	};
-	const hide = (focus = true) => {
-		lists.forEach(closeList);
-		if (focus) trigger.focus();
-	};
-	const showList = (list, button, last = false) => {
-		list.hidden = false;
-		button.setAttribute("aria-expanded", "true");
-		place(button, list);
-		rove(items(list), last ? items(list).length - 1 : 0);
-	};
-	const show = () => {
-		if (enabled(trigger)) showList(main, trigger);
-	};
-	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
-	const activate = (item) => {
-		if (!enabled(item)) return;
-		const child = submenu(item);
-		if (child) {
-			showList(child, item);
-			return;
-		}
-		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
-		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
-		else hide();
-		root.emit("action", {
-			action: item.dataset.action ?? item.textContent.trim(),
-			checked: item.getAttribute("aria-checked") === "true"
-		});
-	};
-	on(trigger, "click", () => main.hidden ? show() : hide());
-	on(trigger, "keydown", (event) => {
-		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
-			event.preventDefault();
-			showList(main, trigger, event.key === "ArrowUp");
-		}
-	});
-	on(root, "click", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (item) activate(item);
-	});
-	on(root, "keydown", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (!item) return;
-		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
-		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
-			event.preventDefault();
-			event.stopPropagation();
-			if (list !== main) {
-				closeList(list);
-				controller(list)?.focus();
-			} else hide();
-		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
-			event.preventDefault();
-			showList(submenu(item), item);
-		} else if (event.key === "Tab") hide();
-		else if (event.key.length === 1 && /\S/.test(event.key)) {
-			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-			if (found) {
-				event.preventDefault();
-				rove(options, options.indexOf(found));
-			}
-		}
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument, "focusin", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
-	hide(false);
-	return {
-		show,
-		hide,
-		get open() {
-			return !main.hidden;
-		},
-		set open(value) {
-			value ? show() : hide(false);
-		},
-		cleanup() {
-			hide(false);
-		}
-	};
-}
-//#endregion
-export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/filterable-table/runtime/chunks/tables-B25ydUHs.js b/packages/ui/dist/copy/data-table/runtime/chunks/tables-Cjr1EIJz.js
similarity index 96%
rename from packages/ui/dist/copy/filterable-table/runtime/chunks/tables-B25ydUHs.js
rename to packages/ui/dist/copy/data-table/runtime/chunks/tables-Cjr1EIJz.js
index 172bab830..f82aaf25e 100644
--- a/packages/ui/dist/copy/filterable-table/runtime/chunks/tables-B25ydUHs.js
+++ b/packages/ui/dist/copy/data-table/runtime/chunks/tables-Cjr1EIJz.js
@@ -1,4 +1,4 @@
-import { d as rove, i as all, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
+import { c as keyIndex, f as rove, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/tables.js
 function table(root, { on }) {
 	const element = root.querySelector("table"), body = element?.tBodies[0];
@@ -106,7 +106,12 @@ function table(root, { on }) {
 			"End"
 		].includes(event.key)) return;
 		event.preventDefault();
-		const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+		const nextIndex = keyIndex({
+			key: event.key,
+			index,
+			length: options.length,
+			wrap: false
+		});
 		const next = rove(options, nextIndex);
 		if (event.shiftKey && selectAll) {
 			anchor ??= row;
diff --git a/packages/ui/dist/copy/data-table/runtime/components/data-table.js b/packages/ui/dist/copy/data-table/runtime/components/data-table.js
index 79b133ce4..2825525ad 100644
--- a/packages/ui/dist/copy/data-table/runtime/components/data-table.js
+++ b/packages/ui/dist/copy/data-table/runtime/components/data-table.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as table } from "../chunks/tables-B25ydUHs.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as table } from "../chunks/tables-Cjr1EIJz.js";
 //#region .cache/ui-build/entries/components/data-table.js
 var J3w1DataTable = class extends J3w1Element {
 	static componentId = "data-table";
 	static version = "4.0.0";
-	static implementationId = "sha256-QMe+oF071lb63bTNZ9n1ib/8bWgy27tciSjWJEfBgrk=";
+	static implementationId = "sha256-Qlh9cF0ylT3FE8z6iBYaA9/noI1T5dVrNgulqEfZGt8=";
 	static connect = table;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/data-table/runtime/components/menu.js b/packages/ui/dist/copy/data-table/runtime/components/menu.js
index 3f1e4b50c..b35ceb43e 100644
--- a/packages/ui/dist/copy/data-table/runtime/components/menu.js
+++ b/packages/ui/dist/copy/data-table/runtime/components/menu.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as menu } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as menu } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/menu.js
 var J3w1Menu = class extends J3w1Element {
 	static componentId = "menu";
 	static version = "4.0.0";
-	static implementationId = "sha256-jIlJcU1Nx7Q5MB7Fqfcn4f9vr0IW1gmGwNdP5Rk72Aw=";
+	static implementationId = "sha256-oS0Ubl9rLRKcmk22aO7KDARBpUoA/Y7sR2AvyqabH+U=";
 	static connect = menu;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/data-table/runtime/register/data-table.js b/packages/ui/dist/copy/data-table/runtime/register/data-table.js
index 9b565eed9..4d622c48b 100644
--- a/packages/ui/dist/copy/data-table/runtime/register/data-table.js
+++ b/packages/ui/dist/copy/data-table/runtime/register/data-table.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./menu.js";
 import { J3w1DataTable } from "../components/data-table.js";
 //#region .cache/ui-build/entries/register/data-table.js
diff --git a/packages/ui/dist/copy/data-table/runtime/register/menu.js b/packages/ui/dist/copy/data-table/runtime/register/menu.js
index 734c05e98..655b77a5a 100644
--- a/packages/ui/dist/copy/data-table/runtime/register/menu.js
+++ b/packages/ui/dist/copy/data-table/runtime/register/menu.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Menu } from "../components/menu.js";
 //#region .cache/ui-build/entries/register/menu.js
 var element = registerElement("j3w1-menu", J3w1Menu);
diff --git a/packages/ui/dist/copy/data-table/tokens.css b/packages/ui/dist/copy/data-table/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/data-table/tokens.css
+++ b/packages/ui/dist/copy/data-table/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/date-picker/component.css b/packages/ui/dist/copy/date-picker/component.css
index 3d8bafcab..74ea90ce8 100644
--- a/packages/ui/dist/copy/date-picker/component.css
+++ b/packages/ui/dist/copy/date-picker/component.css
@@ -8,7 +8,7 @@ j3w1-date-picker {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-date-picker, j3w1-date-picker *, j3w1-date-picker *::before, j3w1-date-picker *::after { box-sizing: border-box; }
-j3w1-date-picker button, j3w1-date-picker input, j3w1-date-picker select, j3w1-date-picker textarea { font: inherit; }
+j3w1-date-picker :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-date-picker ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,15 +26,15 @@ j3w1-date-picker .sr-only {
 }
 
 j3w1-date-picker :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-date-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-date-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-date-picker :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-date-picker :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-date-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-date-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-date-picker :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-date-picker :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-date-picker .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-date-picker .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-date-picker .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-date-picker .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-date-picker .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-date-picker .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-date-picker .j3w1-temporal :focus-visible,j3w1-date-picker .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -58,7 +58,7 @@ j3w1-date-picker .j3w1-calendar [aria-pressed="true"] { background:var(--color-i
 j3w1-date-picker .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-date-picker .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-date-picker .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-date-picker .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-date-picker .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-date-picker .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-date-picker .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-date-picker .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -66,7 +66,7 @@ j3w1-date-picker .j3w1-choice-trigger:focus-visible,j3w1-date-picker .j3w1-choic
 j3w1-date-picker .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-date-picker .j3w1-choice-list[popover] { inset: auto; }
 j3w1-date-picker .j3w1-choice-list[hidden] { display: none; }
-j3w1-date-picker .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-date-picker .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-date-picker .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-date-picker .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-date-picker .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -80,19 +80,79 @@ j3w1-date-picker .j3w1-choice-error { display: block; color: var(--color-status-
 j3w1-date-picker .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-date-picker .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-date-picker :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+
+j3w1-date-picker .combobox-label,
+j3w1-date-picker .dialog-field-label,
+j3w1-date-picker .field-label,
+j3w1-date-picker .fieldset-label,
+j3w1-date-picker .file-input-label,
+j3w1-date-picker .number-field-label,
+j3w1-date-picker .search-field-label,
+j3w1-date-picker .select-label,
+j3w1-date-picker .text-field-label,
+j3w1-date-picker .textarea-label,
+j3w1-date-picker .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-date-picker .combobox-help,
+j3w1-date-picker .date-picker-help,
+j3w1-date-picker .dialog-field-help,
+j3w1-date-picker .fieldset-help,
+j3w1-date-picker .file-input-help,
+j3w1-date-picker .number-field-help,
+j3w1-date-picker .search-field-help,
+j3w1-date-picker .select-help,
+j3w1-date-picker .text-field-help,
+j3w1-date-picker .textarea-help,
+j3w1-date-picker .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-date-picker .combobox-message,
+j3w1-date-picker .date-picker-message,
+j3w1-date-picker .file-input-message,
+j3w1-date-picker .number-field-message,
+j3w1-date-picker .radio-group-message,
+j3w1-date-picker .select-message,
+j3w1-date-picker .text-field-message,
+j3w1-date-picker .textarea-message,
+j3w1-date-picker .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-date-picker .combobox-root,
+j3w1-date-picker .date-picker-root,
+j3w1-date-picker .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
 
 j3w1-date-picker .date-picker {
   position: relative;
@@ -134,19 +194,10 @@ j3w1-date-picker .date-picker-separator {
   color: var(--color-text-muted);
 }
 
-j3w1-date-picker .date-picker-root {
-  display: flex;
-  align-items: stretch;
-  min-height: var(--density-control-height, 32px);
-  background: var(--color-surface-input);
-  border: var(--border-width-default) solid var(--color-border-control);
-  border-radius: var(--radius-none);
-}
-
 j3w1-date-picker .date-picker-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -165,21 +216,6 @@ j3w1-date-picker .date-picker-input::selection {
 j3w1-date-picker .date-picker-input::-webkit-calendar-picker-indicator {
   cursor: pointer;
 }
-
-j3w1-date-picker .date-picker-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-date-picker .date-picker-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-date-picker .date-picker-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/copy/date-picker/index.html b/packages/ui/dist/copy/date-picker/index.html
index 7110f27c7..6092749ef 100644
--- a/packages/ui/dist/copy/date-picker/index.html
+++ b/packages/ui/dist/copy/date-picker/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Date picker · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-date-picker id="example-date-picker-default"><div class="date-picker">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Date picker · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-date-picker id="example-date-picker-default"><div class="date-picker">
   <label class="date-picker-label" for="example-date-picker-default-dp-release">Release date</label>
   <div class="date-picker-root">
     <input class="date-picker-input" id="example-date-picker-default-dp-release" type="date" value="2026-09-06" min="2026-01-01" max="2026-12-31" aria-describedby="example-date-picker-default-dp-release-help example-date-picker-default-dp-release-message" name="example-date-picker-default-dp-release">
diff --git a/packages/ui/dist/copy/date-picker/manifest.json b/packages/ui/dist/copy/date-picker/manifest.json
index 1e72b72cf..44e4a3016 100644
--- a/packages/ui/dist/copy/date-picker/manifest.json
+++ b/packages/ui/dist/copy/date-picker/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/date-picker.md",
   "dependencies": [
     "register/date-picker.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/date-picker.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/date-picker.js": "sha256-QyyWDOnYnSGxEdY+mxrtYtsLqoQAkhvTLJ5z7kjo3/w=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/date-picker.js": "sha256-rglCYTqoXYDZ63YUb01UqeMk0HRjOeYkVcqadAX0qmM=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-InOm4+AU0uQu6XZs3K+f13FA89Jf7iQO1GuL/2+s9YA=",
+    "runtime/register/date-picker.js": "sha256-ffEEGjAUrXQXzVdMaSM5DtzrLavfYTdLxmkWhPWQRIo=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/date-picker.js": "sha256-6V4hlflxeVpDoj+uuaVEpTKm1ZKIyCYAiivLhpESyZU=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-cC7XtaKYhgqTcB/ci7nCK8PcvCKw0YeBRbnpCFHJ6ZU=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-Nho5WRdNWOIx9zrVkZR8s5NrC95hgRBVnvDTdnZ7qoo=",
-    "index.html": "sha256-eGq952lAjjjM/6cG7o5Rv4hcM4Tuc6zA38HiAPrEevM=",
+    "index.html": "sha256-SxAGYroKCEemIb+5PImBbe5DAU1pOu9frv+8yu3oY7c=",
     "README.md": "sha256-7Nf1YMBxm1cGzO+rzOKvfqWgRfugAjR+6/WjnVo2qpc="
   }
 }
diff --git a/packages/ui/dist/copy/date-picker/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/date-picker/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/date-picker/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/date-picker/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/date-picker/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/date-picker/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/date-picker/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/date-picker/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/date-picker/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/date-picker/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/date-picker/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/date-picker/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/date-picker/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/date-picker/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/date-picker/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/date-picker/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/date-picker/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/date-picker/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/date-picker/runtime/components/date-picker.js b/packages/ui/dist/copy/date-picker/runtime/components/date-picker.js
index b75f98455..df35db9b0 100644
--- a/packages/ui/dist/copy/date-picker/runtime/components/date-picker.js
+++ b/packages/ui/dist/copy/date-picker/runtime/components/date-picker.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/date-picker.js
 var J3w1DatePicker = class extends J3w1Element {
 	static componentId = "date-picker";
 	static version = "4.0.0";
-	static implementationId = "sha256-c14aNjkp318olUOl5+cdRlcdDahvWoTp8lk0sI48z1Y=";
+	static implementationId = "sha256-rz3at5sJTA4TkXHNaqQnM5BrVBt02my29UyKewvFuRY=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/date-picker/runtime/register/date-picker.js b/packages/ui/dist/copy/date-picker/runtime/register/date-picker.js
index 24231b7fd..541cd14fa 100644
--- a/packages/ui/dist/copy/date-picker/runtime/register/date-picker.js
+++ b/packages/ui/dist/copy/date-picker/runtime/register/date-picker.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1DatePicker } from "../components/date-picker.js";
 //#region .cache/ui-build/entries/register/date-picker.js
 var element = registerElement("j3w1-date-picker", J3w1DatePicker);
diff --git a/packages/ui/dist/copy/date-picker/tokens.css b/packages/ui/dist/copy/date-picker/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/date-picker/tokens.css
+++ b/packages/ui/dist/copy/date-picker/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/description-list/component.css b/packages/ui/dist/copy/description-list/component.css
index c505dda01..bdb0e571f 100644
--- a/packages/ui/dist/copy/description-list/component.css
+++ b/packages/ui/dist/copy/description-list/component.css
@@ -8,7 +8,7 @@ j3w1-description-list {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-description-list, j3w1-description-list *, j3w1-description-list *::before, j3w1-description-list *::after { box-sizing: border-box; }
-j3w1-description-list button, j3w1-description-list input, j3w1-description-list select, j3w1-description-list textarea { font: inherit; }
+j3w1-description-list :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-description-list ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,8 @@ j3w1-description-list .sr-only {
   border: 0;
 }
 
-j3w1-description-list .description-list {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-description-list .description-list :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-description-list .description-list {margin:0}j3w1-description-list .description-list>div {display:grid;grid-template-columns:minmax(calc(var(--font-size-ui-md) * 6),1fr) 2fr;gap:var(--space-12);padding-block:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}j3w1-description-list .description-list dt {color:var(--color-text-muted)}j3w1-description-list .description-list dd {margin:0;overflow-wrap:anywhere}@media(max-width:480px){j3w1-description-list .description-list>div{grid-template-columns:1fr;gap:var(--space-4)}}
+j3w1-description-list .description-list {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;margin:0}
+j3w1-description-list .description-list :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}j3w1-description-list .description-list>div {display:grid;grid-template-columns:minmax(calc(var(--font-size-ui-md) * 6),1fr) 2fr;gap:var(--space-12);padding-block:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}j3w1-description-list .description-list dt {color:var(--color-text-muted)}j3w1-description-list .description-list dd {margin:0;overflow-wrap:anywhere}@media(max-width:480px){j3w1-description-list .description-list>div{grid-template-columns:1fr;gap:var(--space-4)}}
 
 j3w1-description-list [hidden] { display: none !important; }
 j3w1-description-list .j3w1-visually-hidden {
diff --git a/packages/ui/dist/copy/description-list/index.html b/packages/ui/dist/copy/description-list/index.html
index 1c6880e93..3f10a7f3b 100644
--- a/packages/ui/dist/copy/description-list/index.html
+++ b/packages/ui/dist/copy/description-list/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Description list · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-description-list id="example-description-list-default"><dl class="description-list"><div><dt>Project</dt><dd>Atlas library</dd></div><div><dt>Owner</dt><dd>Avery Kim</dd></div><div><dt>Delivery</dt><dd>Ready for review</dd></div></dl></j3w1-description-list><script type="module" src="./runtime/register/description-list.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Description list · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-description-list id="example-description-list-default"><dl class="description-list"><div><dt>Project</dt><dd>Atlas library</dd></div><div><dt>Owner</dt><dd>Avery Kim</dd></div><div><dt>Delivery</dt><dd>Ready for review</dd></div></dl></j3w1-description-list><script type="module" src="./runtime/register/description-list.js"></script></body></html>
diff --git a/packages/ui/dist/copy/description-list/manifest.json b/packages/ui/dist/copy/description-list/manifest.json
index 6b1cd3df4..fd7f1e2a5 100644
--- a/packages/ui/dist/copy/description-list/manifest.json
+++ b/packages/ui/dist/copy/description-list/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/description-list.md",
   "dependencies": [
     "register/description-list.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/description-list.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/description-list.js": "sha256-yhsiXjAR6wy2d0ePQtFlXsvPwWsBDWwuJiOZu/UqR1g=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/description-list.js": "sha256-qKd9CujEm+EgRSZfWHW9YXH9JY/d5wMBkkfqqP3z5so=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-MvWyrX2+45DLgWL1ZxTdk0IFVjl5WyfGYZdOYpIeoak=",
+    "runtime/register/description-list.js": "sha256-GxP5SJuhMhu1hTHJsexrOw4T0UPxiW6YpB5Ekig6NG4=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/description-list.js": "sha256-yFwjohrGKRZXL7ylzdMxau2tHWLBEqlCrjhZFLoV5ms=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-rEMzb+R626s/u4B9UVumgQsD0pKkWBBP5+VSfJrPCLM=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-h2HPGz9Kz0LvMiuTC767wAQvYHOVVmffDECwh46tG0c=",
-    "index.html": "sha256-mGxvifjxa5eFOtCBUQR3P/9IKtYsKd4nsTfWb9+u9w0=",
+    "index.html": "sha256-w9bAryqOwOepebsvi1B9fr1xN+O78bNPFqZgdwfg5do=",
     "README.md": "sha256-RrAu5lsq7QsSDTX+KygEzIsHJphBaeLyKmqBc+xa5G0="
   }
 }
diff --git a/packages/ui/dist/copy/description-list/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/description-list/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/description-list/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/description-list/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/description-list/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/description-list/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/description-list/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/description-list/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/description-list/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/description-list/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/description-list/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/description-list/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/description-list/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/description-list/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/description-list/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/description-list/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/description-list/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/description-list/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/description-list/runtime/components/description-list.js b/packages/ui/dist/copy/description-list/runtime/components/description-list.js
index c091b91c8..f7a7090ba 100644
--- a/packages/ui/dist/copy/description-list/runtime/components/description-list.js
+++ b/packages/ui/dist/copy/description-list/runtime/components/description-list.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/description-list.js
 var J3w1DescriptionList = class extends J3w1Element {
 	static componentId = "description-list";
 	static version = "4.0.0";
-	static implementationId = "sha256-GysXOSSmdZO80ECnRDrzDhjMNfpRODjO9r753vB1Mg0=";
+	static implementationId = "sha256-O3lqE1mNupuyqMqz1k1EzRDHMDjwD6aUReeED7JUclg=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/description-list/runtime/register/description-list.js b/packages/ui/dist/copy/description-list/runtime/register/description-list.js
index b2341a425..37a62a7a6 100644
--- a/packages/ui/dist/copy/description-list/runtime/register/description-list.js
+++ b/packages/ui/dist/copy/description-list/runtime/register/description-list.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1DescriptionList } from "../components/description-list.js";
 //#region .cache/ui-build/entries/register/description-list.js
 var element = registerElement("j3w1-description-list", J3w1DescriptionList);
diff --git a/packages/ui/dist/copy/description-list/tokens.css b/packages/ui/dist/copy/description-list/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/description-list/tokens.css
+++ b/packages/ui/dist/copy/description-list/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/diagnostics/component.css b/packages/ui/dist/copy/diagnostics/component.css
index f49963749..749ed6bd5 100644
--- a/packages/ui/dist/copy/diagnostics/component.css
+++ b/packages/ui/dist/copy/diagnostics/component.css
@@ -8,7 +8,7 @@ j3w1-diagnostics {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-diagnostics, j3w1-diagnostics *, j3w1-diagnostics *::before, j3w1-diagnostics *::after { box-sizing: border-box; }
-j3w1-diagnostics button, j3w1-diagnostics input, j3w1-diagnostics select, j3w1-diagnostics textarea { font: inherit; }
+j3w1-diagnostics :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-diagnostics ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -132,8 +132,8 @@ j3w1-diagnostics .diagnostics-header {
   flex-wrap: wrap;
   gap: var(--space-12);
   align-items: baseline;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
 }
 
@@ -172,8 +172,8 @@ j3w1-diagnostics .diagnostics-row {
   grid-template-columns: auto minmax(0, 1fr) auto auto;
   gap: 0 var(--space-8);
   align-items: baseline;
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
   cursor: default;
 }
@@ -199,7 +199,7 @@ j3w1-diagnostics .diagnostics-status,
 j3w1-diagnostics .diagnostics-empty {
   display: none;
   margin: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
 }
 
 j3w1-diagnostics .diagnostics-status {
@@ -244,7 +244,7 @@ j3w1-diagnostics .diagnostics-row[aria-selected="true"] .diagnostics-rule {
   color: var(--color-interaction-selection-text);
 }
 j3w1-diagnostics .diagnostics-list:focus-visible .diagnostics-row[aria-selected="true"] {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
diff --git a/packages/ui/dist/copy/diagnostics/index.html b/packages/ui/dist/copy/diagnostics/index.html
index 643858d7d..1a6c8e865 100644
--- a/packages/ui/dist/copy/diagnostics/index.html
+++ b/packages/ui/dist/copy/diagnostics/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Diagnostics · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-diagnostics id="example-diagnostics-inline"><div class="diagnostics diagnostics-inline">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Diagnostics · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-diagnostics id="example-diagnostics-inline"><div class="diagnostics diagnostics-inline">
   <p class="diagnostics-status" role="status">✕ Language server stopped; markers may be stale.</p>
   <div class="diagnostics-box" role="textbox" aria-multiline="true" aria-readonly="true" aria-label="title.js with 6 diagnostics, read-only" tabindex="0">
     <pre class="diagnostics-code"><span class="diagnostics-line"><span class="diagnostics-ln" aria-hidden="true">1</span><span class="diagnostics-text">import { <span class="diagnostics-unused" title="readFile is declared but never used">readFile</span> } from "node:fs/promises";</span><span class="diagnostics-mark diagnostics-mark-hint" aria-hidden="true">·</span></span>
diff --git a/packages/ui/dist/copy/diagnostics/manifest.json b/packages/ui/dist/copy/diagnostics/manifest.json
index 467ea3b3f..63fe76725 100644
--- a/packages/ui/dist/copy/diagnostics/manifest.json
+++ b/packages/ui/dist/copy/diagnostics/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/diagnostics.md",
   "dependencies": [
     "register/diagnostics.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/diagnostics.js",
-    "chunks/display-dj9YaBfn.js"
+    "chunks/display-Jm9bAsnb.js"
   ],
   "files": {
-    "runtime/register/diagnostics.js": "sha256-lSYtaMuTbe7wtLvNB4chvQ8SOVu0ILi3pFknhy/X/0E=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/diagnostics.js": "sha256-nC94tOw1MCiaCz5hbJRQf8qjWzQDz53K24KiwRwR8ws=",
-    "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-1uXLsplg978riCNhv/v5p+RvR0hW6fVdRnKgNUo+IYs=",
+    "runtime/register/diagnostics.js": "sha256-ALvK2a/RKv8dPsd7vtPOz2gs07sAqHYUeaLkBGbL2bQ=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/diagnostics.js": "sha256-oEE2P+tyCuYFS8Z67kakU24ozr9nPJsXvN7ug/nsESs=",
+    "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-xWB/G9X0gadCbFJ8yqKBaXbBvMPSKyKrVUQR4dZZs88=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-oPPp/R+dnwC1tnH/Td+Hlrs3CRODUkA4Bvq/HK/fAUU=",
-    "index.html": "sha256-Tq03gSM/g1JYQlO5vswlLUOSXHf9l2bEjBuZbLQpK1E=",
+    "index.html": "sha256-faTuPIwIaIe118O39CQtFz4nACEFH1MOeuPsBOwpHh0=",
     "README.md": "sha256-zoebnEYS306DsFzwTsEnc2EoKA+8Dm/eyz4eTXdSnAs="
   }
 }
diff --git a/packages/ui/dist/copy/diagnostics/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/diagnostics/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/diagnostics/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/diagnostics/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/diagnostics/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/diagnostics/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/diagnostics/runtime/chunks/display-Jm9bAsnb.js b/packages/ui/dist/copy/diagnostics/runtime/chunks/display-Jm9bAsnb.js
new file mode 100644
index 000000000..5bc817830
--- /dev/null
+++ b/packages/ui/dist/copy/diagnostics/runtime/chunks/display-Jm9bAsnb.js
@@ -0,0 +1,212 @@
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/display.js
+function avatar(root, { on }) {
+	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
+	if (!frame || !fallback) return {};
+	let image = frame.querySelector("img");
+	if (!image) {
+		image = make(root, "img", {
+			alt: "",
+			hidden: ""
+		});
+		frame.prepend(image);
+	}
+	let source = image.getAttribute("src") ?? "";
+	const update = (value) => {
+		source = String(value ?? "");
+		image.hidden = true;
+		fallback.hidden = false;
+		delete frame.dataset.error;
+		if (!source) {
+			image.removeAttribute("src");
+			delete frame.dataset.loading;
+			return;
+		}
+		frame.dataset.loading = "true";
+		image.src = source;
+	};
+	on(image, "load", () => {
+		delete frame.dataset.loading;
+		image.hidden = false;
+		fallback.hidden = true;
+	});
+	on(image, "error", () => {
+		delete frame.dataset.loading;
+		frame.dataset.error = "true";
+		image.hidden = true;
+		fallback.hidden = false;
+	});
+	update(root.getAttribute("src") ?? source);
+	return {
+		get src() {
+			return source;
+		},
+		set src(value) {
+			update(value);
+		},
+		attributeChanged(name) {
+			if (name === "src") update(root.getAttribute("src"));
+		}
+	};
+}
+function chart(root) {
+	const figure = root.querySelector("figure"), svg = figure?.querySelector("svg"), tbody = figure?.querySelector("tbody");
+	if (!figure || !svg || !tbody) return {};
+	let values = all(tbody, "tr").map((row) => ({
+		label: row.cells[0]?.textContent.trim() ?? "",
+		value: Number(row.cells[1]?.textContent)
+	}));
+	const update = (data) => {
+		if (!Array.isArray(data) || data.length > 200 || data.some((row) => typeof row.label !== "string" || typeof row.value !== "number" || !Number.isFinite(row.value) || row.value < 0)) throw new TypeError("data must contain at most 200 labelled finite non-negative values");
+		values = data.map((row) => ({
+			label: row.label,
+			value: row.value
+		}));
+		svg.replaceChildren();
+		tbody.replaceChildren();
+		const ns = "http://www.w3.org/2000/svg";
+		const group = root.ownerDocument.createElementNS(ns, "g");
+		group.setAttribute("class", "chart-series");
+		svg.append(group);
+		const width = Math.max(300, values.length * 32), max = Math.max(1, ...values.map((row) => row.value));
+		svg.setAttribute("viewBox", `0 0 ${width} 140`);
+		svg.setAttribute("aria-label", values.length ? values.map((row) => `${row.label}: ${row.value}`).join("; ") : "No data available");
+		for (const [index, row] of values.entries()) {
+			const bar = root.ownerDocument.createElementNS(ns, "rect"), step = (width - 20) / values.length, height = row.value / max * 100;
+			for (const [name, value] of Object.entries({
+				x: 10 + index * step + step * .15,
+				y: 110 - height,
+				width: step * .7,
+				height
+			})) bar.setAttribute(name, String(value));
+			const title = root.ownerDocument.createElementNS(ns, "title");
+			title.textContent = `${row.label}: ${row.value}`;
+			bar.append(title);
+			group.append(bar);
+			const tr = make(root, "tr");
+			tr.append(make(root, "th", { scope: "row" }, row.label), make(root, "td", {}, row.value));
+			tbody.append(tr);
+		}
+		svg.toggleAttribute("hidden", !values.length);
+		const empty = figure.querySelector("[data-chart-empty]");
+		if (empty) empty.hidden = values.length !== 0;
+	};
+	return {
+		get data() {
+			return values.map((row) => ({ ...row }));
+		},
+		set data(data) {
+			update(data);
+		}
+	};
+}
+function editorSearch(root, { on }) {
+	const input = root.querySelector("[data-query]"), pre = root.querySelector("[data-source]"), status = root.querySelector("[data-search-status]");
+	if (!input || !pre) return {};
+	let source = pre.textContent, current = -1, matches = [];
+	const previous = root.querySelector("[data-previous]"), following = root.querySelector("[data-next]");
+	const select = (index) => {
+		current = matches.length ? (index + matches.length) % matches.length : -1;
+		all(pre, "mark").forEach((mark, i) => mark.toggleAttribute("data-current", i === current));
+		if (status) status.textContent = !input.value ? "Enter text to search." : matches.length ? `Match ${current + 1} of ${matches.length}` : "No matches.";
+	};
+	const search = () => {
+		matches = [];
+		pre.replaceChildren();
+		const query = input.value.toLocaleLowerCase();
+		let folded = "", offset = 0;
+		const starts = [], ends = [];
+		for (const char of source) {
+			const text = char.toLocaleLowerCase();
+			for (let i = 0; i < text.length; i++) {
+				starts.push(offset);
+				ends.push(offset + char.length);
+			}
+			folded += text;
+			offset += char.length;
+		}
+		if (query) {
+			let position = 0;
+			while ((position = folded.indexOf(query, position)) >= 0) {
+				const start = starts[position], end = ends[position + query.length - 1];
+				if (!matches.length || start >= matches.at(-1).end) matches.push({
+					start,
+					end
+				});
+				position += query.length;
+			}
+		}
+		let cursor = 0;
+		for (const match of matches) {
+			pre.append(root.ownerDocument.createTextNode(source.slice(cursor, match.start)), make(root, "mark", {}, source.slice(match.start, match.end)));
+			cursor = match.end;
+		}
+		pre.append(root.ownerDocument.createTextNode(source.slice(cursor)));
+		if (previous) previous.disabled = !matches.length;
+		if (following) following.disabled = !matches.length;
+		select(0);
+	};
+	const next = (direction = 1) => {
+		if (!matches.length) return;
+		select(current + (direction < 0 ? -1 : 1));
+		all(pre, "mark")[current]?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	};
+	on(input, "input", search);
+	on(input, "keydown", (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			next(event.shiftKey ? -1 : 1);
+		} else if (event.key === "Escape" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			input.value = "";
+			search();
+		}
+	});
+	on(previous, "click", () => next(-1));
+	on(following, "click", () => next());
+	search();
+	return {
+		next,
+		get source() {
+			return source;
+		},
+		set source(text) {
+			source = String(text);
+			search();
+		},
+		get query() {
+			return input.value;
+		},
+		set query(value) {
+			input.value = String(value);
+			search();
+		},
+		get matchCount() {
+			return matches.length;
+		}
+	};
+}
+function developerView(root, { on }) {
+	on(root, "click", (event) => {
+		const action = event.target.closest("button,[data-action]");
+		if (action && enabled(action)) root.emit("action", { action: action.dataset.action ?? action.textContent.trim() });
+	});
+	return { setText(text) {
+		let pre = root.querySelector("pre");
+		if (!pre) {
+			pre = make(root, "pre", {
+				class: "j3w1-readonly-text",
+				tabindex: "0",
+				"aria-label": "Read-only text"
+			});
+			root.firstElementChild.replaceChildren(pre);
+		}
+		pre.textContent = String(text);
+	} };
+}
+//#endregion
+export { editorSearch as i, chart as n, developerView as r, avatar as t };
diff --git a/packages/ui/dist/copy/diagnostics/runtime/chunks/display-dj9YaBfn.js b/packages/ui/dist/copy/diagnostics/runtime/chunks/display-dj9YaBfn.js
deleted file mode 100644
index 80833d5da..000000000
--- a/packages/ui/dist/copy/diagnostics/runtime/chunks/display-dj9YaBfn.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/display.js
-function avatar(root, { on }) {
-	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
-	if (!frame || !fallback) return {};
-	let image = frame.querySelector("img");
-	if (!image) {
-		image = make(root, "img", {
-			alt: "",
-			hidden: ""
-		});
-		frame.prepend(image);
-	}
-	let source = image.getAttribute("src") ?? "";
-	const update = (value) => {
-		source = String(value ?? "");
-		image.hidden = true;
-		fallback.hidden = false;
-		delete frame.dataset.error;
-		if (!source) {
-			image.removeAttribute("src");
-			delete frame.dataset.loading;
-			return;
-		}
-		frame.dataset.loading = "true";
-		image.src = source;
-	};
-	on(image, "load", () => {
-		delete frame.dataset.loading;
-		image.hidden = false;
-		fallback.hidden = true;
-	});
-	on(image, "error", () => {
-		delete frame.dataset.loading;
-		frame.dataset.error = "true";
-		image.hidden = true;
-		fallback.hidden = false;
-	});
-	update(root.getAttribute("src") ?? source);
-	return {
-		get src() {
-			return source;
-		},
-		set src(value) {
-			update(value);
-		},
-		attributeChanged(name) {
-			if (name === "src") update(root.getAttribute("src"));
-		}
-	};
-}
-function chart(root) {
-	const figure = root.querySelector("figure"), svg = figure?.querySelector("svg"), tbody = figure?.querySelector("tbody");
-	if (!figure || !svg || !tbody) return {};
-	let values = all(tbody, "tr").map((row) => ({
-		label: row.cells[0]?.textContent.trim() ?? "",
-		value: Number(row.cells[1]?.textContent)
-	}));
-	const update = (data) => {
-		if (!Array.isArray(data) || data.length > 200 || data.some((row) => typeof row.label !== "string" || typeof row.value !== "number" || !Number.isFinite(row.value) || row.value < 0)) throw new TypeError("data must contain at most 200 labelled finite non-negative values");
-		values = data.map((row) => ({
-			label: row.label,
-			value: row.value
-		}));
-		svg.replaceChildren();
-		tbody.replaceChildren();
-		const ns = "http://www.w3.org/2000/svg";
-		const group = root.ownerDocument.createElementNS(ns, "g");
-		group.setAttribute("class", "chart-series");
-		svg.append(group);
-		const width = Math.max(300, values.length * 32), max = Math.max(1, ...values.map((row) => row.value));
-		svg.setAttribute("viewBox", `0 0 ${width} 140`);
-		svg.setAttribute("aria-label", values.length ? values.map((row) => `${row.label}: ${row.value}`).join("; ") : "No data available");
-		for (const [index, row] of values.entries()) {
-			const bar = root.ownerDocument.createElementNS(ns, "rect"), step = (width - 20) / values.length, height = row.value / max * 100;
-			for (const [name, value] of Object.entries({
-				x: 10 + index * step + step * .15,
-				y: 110 - height,
-				width: step * .7,
-				height
-			})) bar.setAttribute(name, String(value));
-			const title = root.ownerDocument.createElementNS(ns, "title");
-			title.textContent = `${row.label}: ${row.value}`;
-			bar.append(title);
-			group.append(bar);
-			const tr = make(root, "tr");
-			tr.append(make(root, "th", { scope: "row" }, row.label), make(root, "td", {}, row.value));
-			tbody.append(tr);
-		}
-		svg.toggleAttribute("hidden", !values.length);
-		const empty = figure.querySelector("[data-chart-empty]");
-		if (empty) empty.hidden = values.length !== 0;
-	};
-	return {
-		get data() {
-			return values.map((row) => ({ ...row }));
-		},
-		set data(data) {
-			update(data);
-		}
-	};
-}
-function editorSearch(root, { on }) {
-	const input = root.querySelector("[data-query]"), pre = root.querySelector("[data-source]"), status = root.querySelector("[data-search-status]");
-	if (!input || !pre) return {};
-	let source = pre.textContent, current = -1, matches = [];
-	const previous = root.querySelector("[data-previous]"), following = root.querySelector("[data-next]");
-	const select = (index) => {
-		current = matches.length ? (index + matches.length) % matches.length : -1;
-		all(pre, "mark").forEach((mark, i) => mark.toggleAttribute("data-current", i === current));
-		if (status) status.textContent = !input.value ? "Enter text to search." : matches.length ? `Match ${current + 1} of ${matches.length}` : "No matches.";
-	};
-	const search = () => {
-		matches = [];
-		pre.replaceChildren();
-		const query = input.value.toLocaleLowerCase();
-		let folded = "", offset = 0;
-		const starts = [], ends = [];
-		for (const char of source) {
-			const text = char.toLocaleLowerCase();
-			for (let i = 0; i < text.length; i++) {
-				starts.push(offset);
-				ends.push(offset + char.length);
-			}
-			folded += text;
-			offset += char.length;
-		}
-		if (query) {
-			let position = 0;
-			while ((position = folded.indexOf(query, position)) >= 0) {
-				const start = starts[position], end = ends[position + query.length - 1];
-				if (!matches.length || start >= matches.at(-1).end) matches.push({
-					start,
-					end
-				});
-				position += query.length;
-			}
-		}
-		let cursor = 0;
-		for (const match of matches) {
-			pre.append(root.ownerDocument.createTextNode(source.slice(cursor, match.start)), make(root, "mark", {}, source.slice(match.start, match.end)));
-			cursor = match.end;
-		}
-		pre.append(root.ownerDocument.createTextNode(source.slice(cursor)));
-		if (previous) previous.disabled = !matches.length;
-		if (following) following.disabled = !matches.length;
-		select(0);
-	};
-	const next = (direction = 1) => {
-		if (!matches.length) return;
-		select(current + (direction < 0 ? -1 : 1));
-		all(pre, "mark")[current]?.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	};
-	on(input, "input", search);
-	on(input, "keydown", (event) => {
-		if (event.key === "Enter") {
-			event.preventDefault();
-			next(event.shiftKey ? -1 : 1);
-		} else if (event.key === "Escape" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			input.value = "";
-			search();
-		}
-	});
-	on(previous, "click", () => next(-1));
-	on(following, "click", () => next());
-	search();
-	return {
-		next,
-		get source() {
-			return source;
-		},
-		set source(text) {
-			source = String(text);
-			search();
-		},
-		get query() {
-			return input.value;
-		},
-		set query(value) {
-			input.value = String(value);
-			search();
-		},
-		get matchCount() {
-			return matches.length;
-		}
-	};
-}
-function developerView(root, { on }) {
-	on(root, "click", (event) => {
-		const action = event.target.closest("button,[data-action]");
-		if (action && enabled(action)) root.emit("action", { action: action.dataset.action ?? action.textContent.trim() });
-	});
-	return { setText(text) {
-		let pre = root.querySelector("pre");
-		if (!pre) {
-			pre = make(root, "pre", {
-				class: "j3w1-readonly-text",
-				tabindex: "0",
-				"aria-label": "Read-only text"
-			});
-			root.firstElementChild.replaceChildren(pre);
-		}
-		pre.textContent = String(text);
-	} };
-}
-//#endregion
-export { editorSearch as i, chart as n, developerView as r, avatar as t };
diff --git a/packages/ui/dist/copy/diagnostics/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/diagnostics/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/diagnostics/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/diagnostics/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/diagnostics/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/diagnostics/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/diagnostics/runtime/components/diagnostics.js b/packages/ui/dist/copy/diagnostics/runtime/components/diagnostics.js
index 58236865c..f9e49175b 100644
--- a/packages/ui/dist/copy/diagnostics/runtime/components/diagnostics.js
+++ b/packages/ui/dist/copy/diagnostics/runtime/components/diagnostics.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as developerView } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as developerView } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/diagnostics.js
 var J3w1Diagnostics = class extends J3w1Element {
 	static componentId = "diagnostics";
 	static version = "4.0.0";
-	static implementationId = "sha256-jU3NVgcwD6UPMMah1cBNr8kgYNhC44JLUupKYIjR8ug=";
+	static implementationId = "sha256-lcf+xRikFjf+LQY6YZN+giWDauQWjFZbMz3xBLI3JG8=";
 	static connect = developerView;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/diagnostics/runtime/register/diagnostics.js b/packages/ui/dist/copy/diagnostics/runtime/register/diagnostics.js
index e92c83ed2..2d9f84547 100644
--- a/packages/ui/dist/copy/diagnostics/runtime/register/diagnostics.js
+++ b/packages/ui/dist/copy/diagnostics/runtime/register/diagnostics.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Diagnostics } from "../components/diagnostics.js";
 //#region .cache/ui-build/entries/register/diagnostics.js
 var element = registerElement("j3w1-diagnostics", J3w1Diagnostics);
diff --git a/packages/ui/dist/copy/diagnostics/tokens.css b/packages/ui/dist/copy/diagnostics/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/diagnostics/tokens.css
+++ b/packages/ui/dist/copy/diagnostics/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/dialog/component.css b/packages/ui/dist/copy/dialog/component.css
index 1bd4885d2..afe66636f 100644
--- a/packages/ui/dist/copy/dialog/component.css
+++ b/packages/ui/dist/copy/dialog/component.css
@@ -8,7 +8,7 @@ j3w1-dialog {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-dialog, j3w1-dialog *, j3w1-dialog *::before, j3w1-dialog *::after { box-sizing: border-box; }
-j3w1-dialog button, j3w1-dialog input, j3w1-dialog select, j3w1-dialog textarea { font: inherit; }
+j3w1-dialog :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-dialog ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,192 @@ j3w1-dialog .sr-only {
   border: 0;
 }
 
+j3w1-dialog .button,
+j3w1-dialog .dialog-button,
+j3w1-dialog .empty-state-action,
+j3w1-dialog .file-input-button,
+j3w1-dialog button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-dialog .button,
+j3w1-dialog .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-dialog .button-secondary,
+j3w1-dialog .dialog-button,
+j3w1-dialog .empty-state-action,
+j3w1-dialog .file-input-button,
+j3w1-dialog button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-dialog .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-dialog .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-dialog .button-destructive-filled,
+j3w1-dialog .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-dialog :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-dialog .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-dialog :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-dialog :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-dialog :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-dialog .dialog-button,
+  j3w1-dialog .empty-state-action,
+  j3w1-dialog .file-input-button,
+  j3w1-dialog button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-dialog :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+j3w1-dialog .combobox-label,
+j3w1-dialog .dialog-field-label,
+j3w1-dialog .field-label,
+j3w1-dialog .fieldset-label,
+j3w1-dialog .file-input-label,
+j3w1-dialog .number-field-label,
+j3w1-dialog .search-field-label,
+j3w1-dialog .select-label,
+j3w1-dialog .text-field-label,
+j3w1-dialog .textarea-label,
+j3w1-dialog .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-dialog .combobox-help,
+j3w1-dialog .date-picker-help,
+j3w1-dialog .dialog-field-help,
+j3w1-dialog .fieldset-help,
+j3w1-dialog .file-input-help,
+j3w1-dialog .number-field-help,
+j3w1-dialog .search-field-help,
+j3w1-dialog .select-help,
+j3w1-dialog .text-field-help,
+j3w1-dialog .textarea-help,
+j3w1-dialog .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-dialog .combobox-message,
+j3w1-dialog .date-picker-message,
+j3w1-dialog .file-input-message,
+j3w1-dialog .number-field-message,
+j3w1-dialog .radio-group-message,
+j3w1-dialog .select-message,
+j3w1-dialog .text-field-message,
+j3w1-dialog .textarea-message,
+j3w1-dialog .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-dialog .combobox-root,
+j3w1-dialog .date-picker-root,
+j3w1-dialog .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-dialog .dialog-backdrop {
   display: grid;
   place-items: center;
@@ -103,15 +289,9 @@ j3w1-dialog .dialog-field {
   gap: var(--space-4);
 }
 
-j3w1-dialog .dialog-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-dialog .dialog-field-input {
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -126,13 +306,6 @@ j3w1-dialog .dialog-field-input:focus-visible {
   outline-offset: var(--focus-offset);
 }
 
-j3w1-dialog .dialog-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-dialog .dialog-actions {
   display: flex;
   flex-wrap: wrap;
@@ -145,32 +318,6 @@ j3w1-dialog .dialog-body .dialog-actions {
   margin-top: var(--space-4);
 }
 
-j3w1-dialog .dialog-button {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  font: inherit;
-  cursor: pointer;
-}
-
-j3w1-dialog .dialog-button-primary {
-  background: var(--color-action-primary-bg);
-  border-color: var(--color-action-primary-border);
-  color: var(--color-action-primary-text);
-}
-
-j3w1-dialog .dialog-button-destructive {
-  background: var(--color-action-destructive-filled-bg);
-  border-color: var(--color-action-destructive-border);
-  color: var(--color-action-destructive-filled-text);
-}
-
 j3w1-dialog .dialog-trap-note {
   display: none;
   margin: var(--space-12) 0 0;
@@ -181,34 +328,10 @@ j3w1-dialog .dialog-trap-note {
 j3w1-dialog .dialog-close:hover {
   background: var(--color-action-tertiary-hover-bg);
 }
-
-j3w1-dialog .dialog-button:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-j3w1-dialog .dialog-button-primary:hover {
-  background: var(--color-action-primary-hover-bg);
-}
-
-j3w1-dialog .dialog-button-destructive:hover {
-  background: var(--color-action-destructive-hover-bg);
-  color: var(--color-action-destructive-hover-text);
-}
-j3w1-dialog .dialog-close:focus-visible,
-j3w1-dialog .dialog-button:focus-visible {
+j3w1-dialog .dialog-close:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-j3w1-dialog .dialog-button-primary:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
-  outline-offset: var(--focus-offset);
-}
-
-j3w1-dialog .dialog-button-destructive:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-action-destructive-filled-text);
-  outline-offset: var(--focus-offset);
-}
 j3w1-dialog .dialog[open] {
   display: block;
 }
@@ -232,19 +355,6 @@ j3w1-dialog .dialog:focus-visible {
   j3w1-dialog .dialog-close:hover {
     background: transparent;
   }
-
-  j3w1-dialog .dialog-button:hover {
-    background: var(--color-action-secondary-bg);
-  }
-
-  j3w1-dialog .dialog-button-primary:hover {
-    background: var(--color-action-primary-bg);
-  }
-
-  j3w1-dialog .dialog-button-destructive:hover {
-    background: var(--color-action-destructive-filled-bg);
-    color: var(--color-action-destructive-filled-text);
-  }
 }
 
 @media (max-width: 320px) {
@@ -260,83 +370,11 @@ j3w1-dialog .dialog:focus-visible {
   }
 
   j3w1-dialog .dialog-close:focus-visible,
-  j3w1-dialog .dialog-button:focus-visible,
   j3w1-dialog .dialog:focus-visible {
     outline-color: Highlight;
   }
 }
 
-j3w1-dialog .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  margin: 0;
-  background: var(--_bg);
-  color: var(--_fg);
-  border: var(--border-width-default) solid var(--_border);
-  border-radius: var(--radius-none);
-  font: inherit;
-  font-size: var(--font-size-ui-md);
-  line-height: var(--font-line-height-ui-md);
-  white-space: nowrap;
-  cursor: pointer;
-  outline: 0;
-}
-
-j3w1-dialog .button-secondary {
-  --_bg: var(--color-action-secondary-bg);
-  --_fg: var(--color-action-secondary-text);
-  --_border: var(--color-action-secondary-border);
-  --_bg-hover: var(--color-action-secondary-hover-bg);
-  --_fg-hover: var(--color-action-secondary-text);
-  --_bg-active: var(--color-action-secondary-pressed-bg);
-  --_border-active: var(--color-border-active);
-  --_ring: var(--color-interaction-focus-ring);
-}
-
-j3w1-dialog .button-tertiary {
-  --_bg: transparent;
-  --_fg: var(--color-action-tertiary-text);
-  --_border: transparent;
-  --_bg-hover: var(--color-action-tertiary-hover-bg);
-  --_fg-hover: var(--color-action-tertiary-text);
-  --_bg-active: var(--color-interaction-pressed-bg);
-  --_border-active: var(--color-border-active);
-  --_ring: var(--color-interaction-focus-ring);
-}
-
-j3w1-dialog .button-destructive {
-  --_bg: transparent;
-  --_fg: var(--color-action-destructive-text);
-  --_border: var(--color-action-destructive-border);
-  --_bg-hover: var(--color-action-destructive-hover-bg);
-  --_fg-hover: var(--color-action-destructive-hover-text);
-  --_bg-active: var(--color-action-destructive-pressed-bg);
-  --_border-active: var(--color-action-destructive-border);
-  --_ring: var(--color-interaction-focus-ring);
-}
-j3w1-dialog .button-destructive-filled {
-  --_bg: var(--color-action-destructive-filled-bg);
-  --_fg: var(--color-action-destructive-filled-text);
-  --_border: var(--color-action-destructive-border);
-  --_bg-hover: var(--color-action-destructive-hover-bg);
-  --_fg-hover: var(--color-action-destructive-hover-text);
-  --_bg-active: var(--color-action-destructive-pressed-bg);
-  --_border-active: var(--color-action-destructive-border);
-  --_ring: var(--color-action-destructive-filled-text);
-}
-
 j3w1-dialog .button-icon {
   flex: none;
   width: var(--icon-size-md);
@@ -353,25 +391,6 @@ j3w1-dialog .button-loading {
 j3w1-dialog .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-dialog .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-dialog .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-dialog .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-dialog .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-dialog .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -383,16 +402,6 @@ j3w1-dialog .button[aria-busy="true"] .button-icon {
 j3w1-dialog .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-dialog .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-dialog .button {
@@ -401,9 +410,6 @@ j3w1-dialog .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-dialog .button:focus-visible {
-    outline-color: Highlight;
-  }
 }
 
 j3w1-dialog [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/dialog/index.html b/packages/ui/dist/copy/dialog/index.html
index b37b1add8..2b22c6887 100644
--- a/packages/ui/dist/copy/dialog/index.html
+++ b/packages/ui/dist/copy/dialog/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Dialog · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-dialog id="example-dialog-default">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Dialog · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-dialog id="example-dialog-default">
   <dialog class="dialog" role="alertdialog" aria-labelledby="example-dialog-default-dg-confirm-title" aria-describedby="example-dialog-default-dg-confirm-text">
     <div class="dialog-header">
       <h2 class="dialog-title" id="example-dialog-default-dg-confirm-title">Save changes?</h2>
diff --git a/packages/ui/dist/copy/dialog/manifest.json b/packages/ui/dist/copy/dialog/manifest.json
index c3e961b09..22698e359 100644
--- a/packages/ui/dist/copy/dialog/manifest.json
+++ b/packages/ui/dist/copy/dialog/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/dialog.md",
   "dependencies": [
     "register/dialog.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/dialog.js",
-    "chunks/overlays-C6nlCHqg.js"
+    "chunks/overlays-Bw8SSDKz.js"
   ],
   "files": {
-    "runtime/register/dialog.js": "sha256-Y6MRVCgkK5UEzcEdMHQSCUf6gMnxsPOJuhfEFWmJXOw=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/dialog.js": "sha256-e9pTCjxk1e95o6PW5WuKLJsHz87/SQRFeL9+DTQyk5I=",
-    "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-d4bh9HaP4YOtfgWmP42qVqw3nqSJ3DF629AWjqoZTn4=",
+    "runtime/register/dialog.js": "sha256-waqEj5W9GRcvFu/OpnJxmONEY3yiBYgB2Fak5uwMsbA=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/dialog.js": "sha256-mYfz6BnuRAPGKxNiVulnuJ4IEMvqr5BPqrNrZCRR5H8=",
+    "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-PL+Ntvoc1uooINO+TPwR7KzuU7dbER2pJdlz10y0UyY=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-wFFtRxUFWBTzxYOcblp+JjddYxJQF3QKoOb0/hIuSL0=",
-    "index.html": "sha256-cDDMTM4Wj+7faOBKrvRWjGkb2tcMvyJcbhuH6ForsLs=",
+    "index.html": "sha256-Q/j50VjcxyfFKNml07quAEQPOpf3g/BvIyvycnVJuzE=",
     "README.md": "sha256-qhTQOsunJthiAQNFRNPTJx74lX2dH6rh6jISELzgD5Q="
   }
 }
diff --git a/packages/ui/dist/copy/dialog/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/dialog/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/dialog/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/dialog/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/dialog/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/dialog/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/dialog/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/dialog/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/dialog/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/dialog/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/dialog/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/dialog/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/chunks/overlays-C6nlCHqg.js b/packages/ui/dist/copy/dialog/runtime/chunks/overlays-Bw8SSDKz.js
similarity index 98%
rename from packages/ui/dist/chunks/overlays-C6nlCHqg.js
rename to packages/ui/dist/copy/dialog/runtime/chunks/overlays-Bw8SSDKz.js
index 9df8503ec..3eeb8ff0d 100644
--- a/packages/ui/dist/chunks/overlays-C6nlCHqg.js
+++ b/packages/ui/dist/copy/dialog/runtime/chunks/overlays-Bw8SSDKz.js
@@ -1,4 +1,4 @@
-import { i as all, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
+import { d as place, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/overlays.js
 function modal(root, { on }) {
 	const dialog = root.querySelector("dialog");
diff --git a/packages/ui/dist/copy/dialog/runtime/components/dialog.js b/packages/ui/dist/copy/dialog/runtime/components/dialog.js
index 1b3c4a379..831fed823 100644
--- a/packages/ui/dist/copy/dialog/runtime/components/dialog.js
+++ b/packages/ui/dist/copy/dialog/runtime/components/dialog.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as modal } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as modal } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/dialog.js
 var J3w1Dialog = class extends J3w1Element {
 	static componentId = "dialog";
 	static version = "4.0.0";
-	static implementationId = "sha256-klBSVv/73RVF8H8z45KqQcsbWhHl+/t4VEl+jC/2v9Q=";
+	static implementationId = "sha256-mRRuIsoBG3ZepORoxkayVAw92Or7CJEuj6eD9YVaZyw=";
 	static connect = modal;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/dialog/runtime/register/dialog.js b/packages/ui/dist/copy/dialog/runtime/register/dialog.js
index ee673cb86..bded0a66c 100644
--- a/packages/ui/dist/copy/dialog/runtime/register/dialog.js
+++ b/packages/ui/dist/copy/dialog/runtime/register/dialog.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Dialog } from "../components/dialog.js";
 //#region .cache/ui-build/entries/register/dialog.js
 var element = registerElement("j3w1-dialog", J3w1Dialog);
diff --git a/packages/ui/dist/copy/dialog/tokens.css b/packages/ui/dist/copy/dialog/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/dialog/tokens.css
+++ b/packages/ui/dist/copy/dialog/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/diff-view/component.css b/packages/ui/dist/copy/diff-view/component.css
index e463e4c67..dd760e6c0 100644
--- a/packages/ui/dist/copy/diff-view/component.css
+++ b/packages/ui/dist/copy/diff-view/component.css
@@ -8,7 +8,7 @@ j3w1-diff-view {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-diff-view, j3w1-diff-view *, j3w1-diff-view *::before, j3w1-diff-view *::after { box-sizing: border-box; }
-j3w1-diff-view button, j3w1-diff-view input, j3w1-diff-view select, j3w1-diff-view textarea { font: inherit; }
+j3w1-diff-view :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-diff-view ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -193,7 +193,7 @@ j3w1-diff-view .diff-view-fold {
   display: inline-flex;
   gap: var(--space-4);
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-4);
   background: transparent;
   border: 0;
@@ -245,7 +245,7 @@ j3w1-diff-view .diff-view-row:focus-visible {
 }
 
 j3w1-diff-view .diff-view-row[aria-current="true"]:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-diff-view .diff-view-fold[aria-expanded="true"] .diff-view-chevron {
diff --git a/packages/ui/dist/copy/diff-view/index.html b/packages/ui/dist/copy/diff-view/index.html
index 4a1f08f54..226d75305 100644
--- a/packages/ui/dist/copy/diff-view/index.html
+++ b/packages/ui/dist/copy/diff-view/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Diff view · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-diff-view id="example-diff-view-unified"><div class="diff-view-scroll" tabindex="0" role="region" aria-label="Source differences"><table class="diff-view diff-view-unified">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Diff view · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-diff-view id="example-diff-view-unified"><div class="diff-view-scroll" tabindex="0" role="region" aria-label="Source differences"><table class="diff-view diff-view-unified">
   <caption class="sr-only">title.js, old against new, unified</caption>
   <thead class="sr-only">
     <tr><th scope="col">Old line</th><th scope="col">New line</th><th scope="col">Change</th><th scope="col">Text</th></tr>
diff --git a/packages/ui/dist/copy/diff-view/manifest.json b/packages/ui/dist/copy/diff-view/manifest.json
index bb9423bd5..405fd3371 100644
--- a/packages/ui/dist/copy/diff-view/manifest.json
+++ b/packages/ui/dist/copy/diff-view/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/diff-view.md",
   "dependencies": [
     "register/diff-view.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/diff-view.js",
-    "chunks/display-dj9YaBfn.js"
+    "chunks/display-Jm9bAsnb.js"
   ],
   "files": {
-    "runtime/register/diff-view.js": "sha256-dfbslff/fV33ePOMN/mGU9l+7RqomLajKxKQdpmW+qQ=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/diff-view.js": "sha256-QfZm092MHlNhP9Vfs6IkWjXkbrGughYsBfHTOCL93cM=",
-    "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-mibFUolrx0OWHlYNpEFTvfkMI0c6h4CUv7SWJ4eQVns=",
+    "runtime/register/diff-view.js": "sha256-9TubYFM9ksBHugPVTEwpyuq1pqPeA3BwnBpoJdM5zRE=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/diff-view.js": "sha256-mc+zZLXtFDZnF4okQ840vLAw4mC40kkmR920bUXfXfo=",
+    "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-zQ+2X33S+1rlKgj8VvnNJSfS/ujlxlYAFFAC3vC+8MU=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-t7cx4Y+4qhIPiwFbRPz+6U12N/CFATPTfG7/iZf85zs=",
-    "index.html": "sha256-EYPYe3QVJkVBz7byssoY6NHiAMZc9tW/oSLut2DPrX4=",
+    "index.html": "sha256-qm8fbs91KUEOm2ss0XShYkbQLzgXVk9OpdrVHfg6Wjg=",
     "README.md": "sha256-2/6IFU4JJZ25X3ZvCCwHM1P9pvt3nJHAUfxoS/Ubi/0="
   }
 }
diff --git a/packages/ui/dist/copy/diff-view/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/diff-view/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/diff-view/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/diff-view/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/diff-view/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/diff-view/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/diff-view/runtime/chunks/display-Jm9bAsnb.js b/packages/ui/dist/copy/diff-view/runtime/chunks/display-Jm9bAsnb.js
new file mode 100644
index 000000000..5bc817830
--- /dev/null
+++ b/packages/ui/dist/copy/diff-view/runtime/chunks/display-Jm9bAsnb.js
@@ -0,0 +1,212 @@
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/display.js
+function avatar(root, { on }) {
+	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
+	if (!frame || !fallback) return {};
+	let image = frame.querySelector("img");
+	if (!image) {
+		image = make(root, "img", {
+			alt: "",
+			hidden: ""
+		});
+		frame.prepend(image);
+	}
+	let source = image.getAttribute("src") ?? "";
+	const update = (value) => {
+		source = String(value ?? "");
+		image.hidden = true;
+		fallback.hidden = false;
+		delete frame.dataset.error;
+		if (!source) {
+			image.removeAttribute("src");
+			delete frame.dataset.loading;
+			return;
+		}
+		frame.dataset.loading = "true";
+		image.src = source;
+	};
+	on(image, "load", () => {
+		delete frame.dataset.loading;
+		image.hidden = false;
+		fallback.hidden = true;
+	});
+	on(image, "error", () => {
+		delete frame.dataset.loading;
+		frame.dataset.error = "true";
+		image.hidden = true;
+		fallback.hidden = false;
+	});
+	update(root.getAttribute("src") ?? source);
+	return {
+		get src() {
+			return source;
+		},
+		set src(value) {
+			update(value);
+		},
+		attributeChanged(name) {
+			if (name === "src") update(root.getAttribute("src"));
+		}
+	};
+}
+function chart(root) {
+	const figure = root.querySelector("figure"), svg = figure?.querySelector("svg"), tbody = figure?.querySelector("tbody");
+	if (!figure || !svg || !tbody) return {};
+	let values = all(tbody, "tr").map((row) => ({
+		label: row.cells[0]?.textContent.trim() ?? "",
+		value: Number(row.cells[1]?.textContent)
+	}));
+	const update = (data) => {
+		if (!Array.isArray(data) || data.length > 200 || data.some((row) => typeof row.label !== "string" || typeof row.value !== "number" || !Number.isFinite(row.value) || row.value < 0)) throw new TypeError("data must contain at most 200 labelled finite non-negative values");
+		values = data.map((row) => ({
+			label: row.label,
+			value: row.value
+		}));
+		svg.replaceChildren();
+		tbody.replaceChildren();
+		const ns = "http://www.w3.org/2000/svg";
+		const group = root.ownerDocument.createElementNS(ns, "g");
+		group.setAttribute("class", "chart-series");
+		svg.append(group);
+		const width = Math.max(300, values.length * 32), max = Math.max(1, ...values.map((row) => row.value));
+		svg.setAttribute("viewBox", `0 0 ${width} 140`);
+		svg.setAttribute("aria-label", values.length ? values.map((row) => `${row.label}: ${row.value}`).join("; ") : "No data available");
+		for (const [index, row] of values.entries()) {
+			const bar = root.ownerDocument.createElementNS(ns, "rect"), step = (width - 20) / values.length, height = row.value / max * 100;
+			for (const [name, value] of Object.entries({
+				x: 10 + index * step + step * .15,
+				y: 110 - height,
+				width: step * .7,
+				height
+			})) bar.setAttribute(name, String(value));
+			const title = root.ownerDocument.createElementNS(ns, "title");
+			title.textContent = `${row.label}: ${row.value}`;
+			bar.append(title);
+			group.append(bar);
+			const tr = make(root, "tr");
+			tr.append(make(root, "th", { scope: "row" }, row.label), make(root, "td", {}, row.value));
+			tbody.append(tr);
+		}
+		svg.toggleAttribute("hidden", !values.length);
+		const empty = figure.querySelector("[data-chart-empty]");
+		if (empty) empty.hidden = values.length !== 0;
+	};
+	return {
+		get data() {
+			return values.map((row) => ({ ...row }));
+		},
+		set data(data) {
+			update(data);
+		}
+	};
+}
+function editorSearch(root, { on }) {
+	const input = root.querySelector("[data-query]"), pre = root.querySelector("[data-source]"), status = root.querySelector("[data-search-status]");
+	if (!input || !pre) return {};
+	let source = pre.textContent, current = -1, matches = [];
+	const previous = root.querySelector("[data-previous]"), following = root.querySelector("[data-next]");
+	const select = (index) => {
+		current = matches.length ? (index + matches.length) % matches.length : -1;
+		all(pre, "mark").forEach((mark, i) => mark.toggleAttribute("data-current", i === current));
+		if (status) status.textContent = !input.value ? "Enter text to search." : matches.length ? `Match ${current + 1} of ${matches.length}` : "No matches.";
+	};
+	const search = () => {
+		matches = [];
+		pre.replaceChildren();
+		const query = input.value.toLocaleLowerCase();
+		let folded = "", offset = 0;
+		const starts = [], ends = [];
+		for (const char of source) {
+			const text = char.toLocaleLowerCase();
+			for (let i = 0; i < text.length; i++) {
+				starts.push(offset);
+				ends.push(offset + char.length);
+			}
+			folded += text;
+			offset += char.length;
+		}
+		if (query) {
+			let position = 0;
+			while ((position = folded.indexOf(query, position)) >= 0) {
+				const start = starts[position], end = ends[position + query.length - 1];
+				if (!matches.length || start >= matches.at(-1).end) matches.push({
+					start,
+					end
+				});
+				position += query.length;
+			}
+		}
+		let cursor = 0;
+		for (const match of matches) {
+			pre.append(root.ownerDocument.createTextNode(source.slice(cursor, match.start)), make(root, "mark", {}, source.slice(match.start, match.end)));
+			cursor = match.end;
+		}
+		pre.append(root.ownerDocument.createTextNode(source.slice(cursor)));
+		if (previous) previous.disabled = !matches.length;
+		if (following) following.disabled = !matches.length;
+		select(0);
+	};
+	const next = (direction = 1) => {
+		if (!matches.length) return;
+		select(current + (direction < 0 ? -1 : 1));
+		all(pre, "mark")[current]?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	};
+	on(input, "input", search);
+	on(input, "keydown", (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			next(event.shiftKey ? -1 : 1);
+		} else if (event.key === "Escape" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			input.value = "";
+			search();
+		}
+	});
+	on(previous, "click", () => next(-1));
+	on(following, "click", () => next());
+	search();
+	return {
+		next,
+		get source() {
+			return source;
+		},
+		set source(text) {
+			source = String(text);
+			search();
+		},
+		get query() {
+			return input.value;
+		},
+		set query(value) {
+			input.value = String(value);
+			search();
+		},
+		get matchCount() {
+			return matches.length;
+		}
+	};
+}
+function developerView(root, { on }) {
+	on(root, "click", (event) => {
+		const action = event.target.closest("button,[data-action]");
+		if (action && enabled(action)) root.emit("action", { action: action.dataset.action ?? action.textContent.trim() });
+	});
+	return { setText(text) {
+		let pre = root.querySelector("pre");
+		if (!pre) {
+			pre = make(root, "pre", {
+				class: "j3w1-readonly-text",
+				tabindex: "0",
+				"aria-label": "Read-only text"
+			});
+			root.firstElementChild.replaceChildren(pre);
+		}
+		pre.textContent = String(text);
+	} };
+}
+//#endregion
+export { editorSearch as i, chart as n, developerView as r, avatar as t };
diff --git a/packages/ui/dist/copy/diff-view/runtime/chunks/display-dj9YaBfn.js b/packages/ui/dist/copy/diff-view/runtime/chunks/display-dj9YaBfn.js
deleted file mode 100644
index 80833d5da..000000000
--- a/packages/ui/dist/copy/diff-view/runtime/chunks/display-dj9YaBfn.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/display.js
-function avatar(root, { on }) {
-	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
-	if (!frame || !fallback) return {};
-	let image = frame.querySelector("img");
-	if (!image) {
-		image = make(root, "img", {
-			alt: "",
-			hidden: ""
-		});
-		frame.prepend(image);
-	}
-	let source = image.getAttribute("src") ?? "";
-	const update = (value) => {
-		source = String(value ?? "");
-		image.hidden = true;
-		fallback.hidden = false;
-		delete frame.dataset.error;
-		if (!source) {
-			image.removeAttribute("src");
-			delete frame.dataset.loading;
-			return;
-		}
-		frame.dataset.loading = "true";
-		image.src = source;
-	};
-	on(image, "load", () => {
-		delete frame.dataset.loading;
-		image.hidden = false;
-		fallback.hidden = true;
-	});
-	on(image, "error", () => {
-		delete frame.dataset.loading;
-		frame.dataset.error = "true";
-		image.hidden = true;
-		fallback.hidden = false;
-	});
-	update(root.getAttribute("src") ?? source);
-	return {
-		get src() {
-			return source;
-		},
-		set src(value) {
-			update(value);
-		},
-		attributeChanged(name) {
-			if (name === "src") update(root.getAttribute("src"));
-		}
-	};
-}
-function chart(root) {
-	const figure = root.querySelector("figure"), svg = figure?.querySelector("svg"), tbody = figure?.querySelector("tbody");
-	if (!figure || !svg || !tbody) return {};
-	let values = all(tbody, "tr").map((row) => ({
-		label: row.cells[0]?.textContent.trim() ?? "",
-		value: Number(row.cells[1]?.textContent)
-	}));
-	const update = (data) => {
-		if (!Array.isArray(data) || data.length > 200 || data.some((row) => typeof row.label !== "string" || typeof row.value !== "number" || !Number.isFinite(row.value) || row.value < 0)) throw new TypeError("data must contain at most 200 labelled finite non-negative values");
-		values = data.map((row) => ({
-			label: row.label,
-			value: row.value
-		}));
-		svg.replaceChildren();
-		tbody.replaceChildren();
-		const ns = "http://www.w3.org/2000/svg";
-		const group = root.ownerDocument.createElementNS(ns, "g");
-		group.setAttribute("class", "chart-series");
-		svg.append(group);
-		const width = Math.max(300, values.length * 32), max = Math.max(1, ...values.map((row) => row.value));
-		svg.setAttribute("viewBox", `0 0 ${width} 140`);
-		svg.setAttribute("aria-label", values.length ? values.map((row) => `${row.label}: ${row.value}`).join("; ") : "No data available");
-		for (const [index, row] of values.entries()) {
-			const bar = root.ownerDocument.createElementNS(ns, "rect"), step = (width - 20) / values.length, height = row.value / max * 100;
-			for (const [name, value] of Object.entries({
-				x: 10 + index * step + step * .15,
-				y: 110 - height,
-				width: step * .7,
-				height
-			})) bar.setAttribute(name, String(value));
-			const title = root.ownerDocument.createElementNS(ns, "title");
-			title.textContent = `${row.label}: ${row.value}`;
-			bar.append(title);
-			group.append(bar);
-			const tr = make(root, "tr");
-			tr.append(make(root, "th", { scope: "row" }, row.label), make(root, "td", {}, row.value));
-			tbody.append(tr);
-		}
-		svg.toggleAttribute("hidden", !values.length);
-		const empty = figure.querySelector("[data-chart-empty]");
-		if (empty) empty.hidden = values.length !== 0;
-	};
-	return {
-		get data() {
-			return values.map((row) => ({ ...row }));
-		},
-		set data(data) {
-			update(data);
-		}
-	};
-}
-function editorSearch(root, { on }) {
-	const input = root.querySelector("[data-query]"), pre = root.querySelector("[data-source]"), status = root.querySelector("[data-search-status]");
-	if (!input || !pre) return {};
-	let source = pre.textContent, current = -1, matches = [];
-	const previous = root.querySelector("[data-previous]"), following = root.querySelector("[data-next]");
-	const select = (index) => {
-		current = matches.length ? (index + matches.length) % matches.length : -1;
-		all(pre, "mark").forEach((mark, i) => mark.toggleAttribute("data-current", i === current));
-		if (status) status.textContent = !input.value ? "Enter text to search." : matches.length ? `Match ${current + 1} of ${matches.length}` : "No matches.";
-	};
-	const search = () => {
-		matches = [];
-		pre.replaceChildren();
-		const query = input.value.toLocaleLowerCase();
-		let folded = "", offset = 0;
-		const starts = [], ends = [];
-		for (const char of source) {
-			const text = char.toLocaleLowerCase();
-			for (let i = 0; i < text.length; i++) {
-				starts.push(offset);
-				ends.push(offset + char.length);
-			}
-			folded += text;
-			offset += char.length;
-		}
-		if (query) {
-			let position = 0;
-			while ((position = folded.indexOf(query, position)) >= 0) {
-				const start = starts[position], end = ends[position + query.length - 1];
-				if (!matches.length || start >= matches.at(-1).end) matches.push({
-					start,
-					end
-				});
-				position += query.length;
-			}
-		}
-		let cursor = 0;
-		for (const match of matches) {
-			pre.append(root.ownerDocument.createTextNode(source.slice(cursor, match.start)), make(root, "mark", {}, source.slice(match.start, match.end)));
-			cursor = match.end;
-		}
-		pre.append(root.ownerDocument.createTextNode(source.slice(cursor)));
-		if (previous) previous.disabled = !matches.length;
-		if (following) following.disabled = !matches.length;
-		select(0);
-	};
-	const next = (direction = 1) => {
-		if (!matches.length) return;
-		select(current + (direction < 0 ? -1 : 1));
-		all(pre, "mark")[current]?.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	};
-	on(input, "input", search);
-	on(input, "keydown", (event) => {
-		if (event.key === "Enter") {
-			event.preventDefault();
-			next(event.shiftKey ? -1 : 1);
-		} else if (event.key === "Escape" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			input.value = "";
-			search();
-		}
-	});
-	on(previous, "click", () => next(-1));
-	on(following, "click", () => next());
-	search();
-	return {
-		next,
-		get source() {
-			return source;
-		},
-		set source(text) {
-			source = String(text);
-			search();
-		},
-		get query() {
-			return input.value;
-		},
-		set query(value) {
-			input.value = String(value);
-			search();
-		},
-		get matchCount() {
-			return matches.length;
-		}
-	};
-}
-function developerView(root, { on }) {
-	on(root, "click", (event) => {
-		const action = event.target.closest("button,[data-action]");
-		if (action && enabled(action)) root.emit("action", { action: action.dataset.action ?? action.textContent.trim() });
-	});
-	return { setText(text) {
-		let pre = root.querySelector("pre");
-		if (!pre) {
-			pre = make(root, "pre", {
-				class: "j3w1-readonly-text",
-				tabindex: "0",
-				"aria-label": "Read-only text"
-			});
-			root.firstElementChild.replaceChildren(pre);
-		}
-		pre.textContent = String(text);
-	} };
-}
-//#endregion
-export { editorSearch as i, chart as n, developerView as r, avatar as t };
diff --git a/packages/ui/dist/copy/diff-view/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/diff-view/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/diff-view/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/diff-view/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/diff-view/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/diff-view/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/diff-view/runtime/components/diff-view.js b/packages/ui/dist/copy/diff-view/runtime/components/diff-view.js
index 633e44138..47f8bf1a3 100644
--- a/packages/ui/dist/copy/diff-view/runtime/components/diff-view.js
+++ b/packages/ui/dist/copy/diff-view/runtime/components/diff-view.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as developerView } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as developerView } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/diff-view.js
 var J3w1DiffView = class extends J3w1Element {
 	static componentId = "diff-view";
 	static version = "4.0.0";
-	static implementationId = "sha256-lEC5NAzVDADHe5s6uWIGnx5icpXJwmRoT/VTUI4h2l8=";
+	static implementationId = "sha256-7zzFpU0Y2cQR1wO8DWE4bqkofCnJMaERCXRLdai7u0A=";
 	static connect = developerView;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/diff-view/runtime/register/diff-view.js b/packages/ui/dist/copy/diff-view/runtime/register/diff-view.js
index 53e4b042d..92fc87c5c 100644
--- a/packages/ui/dist/copy/diff-view/runtime/register/diff-view.js
+++ b/packages/ui/dist/copy/diff-view/runtime/register/diff-view.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1DiffView } from "../components/diff-view.js";
 //#region .cache/ui-build/entries/register/diff-view.js
 var element = registerElement("j3w1-diff-view", J3w1DiffView);
diff --git a/packages/ui/dist/copy/diff-view/tokens.css b/packages/ui/dist/copy/diff-view/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/diff-view/tokens.css
+++ b/packages/ui/dist/copy/diff-view/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/disclosure/component.css b/packages/ui/dist/copy/disclosure/component.css
index 8dadc680a..68f725a59 100644
--- a/packages/ui/dist/copy/disclosure/component.css
+++ b/packages/ui/dist/copy/disclosure/component.css
@@ -8,7 +8,7 @@ j3w1-disclosure {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-disclosure, j3w1-disclosure *, j3w1-disclosure *::before, j3w1-disclosure *::after { box-sizing: border-box; }
-j3w1-disclosure button, j3w1-disclosure input, j3w1-disclosure select, j3w1-disclosure textarea { font: inherit; }
+j3w1-disclosure :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-disclosure ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,10 +26,7 @@ j3w1-disclosure .sr-only {
 }
 
 j3w1-disclosure .disclosure {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-disclosure .disclosure-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-disclosure .disclosure :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-disclosure .disclosure :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-j3w1-disclosure .disclosure-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
+j3w1-disclosure .disclosure :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-disclosure .disclosure summary {cursor:pointer;min-height:var(--density-control-height);padding:var(--space-8)}j3w1-disclosure .disclosure[open] {border-inline-start:var(--border-width-emphasis) solid var(--color-border-active)}j3w1-disclosure .disclosure:not([open])>:not(summary) {display:none}
 
 j3w1-disclosure [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/disclosure/index.html b/packages/ui/dist/copy/disclosure/index.html
index 46461660a..f5980fd6c 100644
--- a/packages/ui/dist/copy/disclosure/index.html
+++ b/packages/ui/dist/copy/disclosure/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Disclosure · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-disclosure id="example-disclosure-default"><details class="disclosure"><summary data-demo-focus-target="">Additional connection settings</summary><p>This local example stores no credentials. Choose connection settings in the host application.</p></details></j3w1-disclosure><script type="module" src="./runtime/register/disclosure.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Disclosure · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-disclosure id="example-disclosure-default"><details class="disclosure"><summary data-demo-focus-target="">Additional connection settings</summary><p>This local example stores no credentials. Choose connection settings in the host application.</p></details></j3w1-disclosure><script type="module" src="./runtime/register/disclosure.js"></script></body></html>
diff --git a/packages/ui/dist/copy/disclosure/manifest.json b/packages/ui/dist/copy/disclosure/manifest.json
index 4b35acab6..7116cf40a 100644
--- a/packages/ui/dist/copy/disclosure/manifest.json
+++ b/packages/ui/dist/copy/disclosure/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/disclosure.md",
   "dependencies": [
     "register/disclosure.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/disclosure.js",
-    "chunks/navigation-Dt8ap-9J.js"
+    "chunks/navigation-BfNzDYZB.js"
   ],
   "files": {
-    "runtime/register/disclosure.js": "sha256-QAWXKSki5SRPPTshefR54Zy2gycHjHlG61aTWPL1Q4g=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/disclosure.js": "sha256-T++duSnTm8ippxMGxtM25ykxUO+HYIt0HK55RkVOrHQ=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-vVNjPU0AXLKLnxgRPgOVmN3dS6S3pxA6xLFfJFK8ex4=",
+    "runtime/register/disclosure.js": "sha256-aIVSvVhr919KN1yvujNgB9MkM76nINbjI5fn2aI15hU=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/disclosure.js": "sha256-+8hk74Zg9ZUq3AstqnrP14hMWYJ2J3MQ8RCtpk4njOs=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-M/UOvBwScEgDLtRZmuBaxCwOBb1g0hkfyHqaxsEDfHk=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-ZbpW/j8ZGKofIgL/uVEO47xXhxXmS2mrK5w32n/BWZA=",
-    "index.html": "sha256-IGRscuNxsfbVQd8cDkiBz1/QAEamMHSToesnIwq38AU=",
+    "index.html": "sha256-WhPsfoYZDJ7CShvFToWy9ysUDXDtzvu7SXHI+dsddnA=",
     "README.md": "sha256-eHT7DdGUFZxUFoiTNsB5j6dKCRG6kf9fT0gY1oSBy/8="
   }
 }
diff --git a/packages/ui/dist/copy/disclosure/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/disclosure/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/disclosure/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/disclosure/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/disclosure/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/disclosure/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/disclosure/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/disclosure/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/disclosure/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/disclosure/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/disclosure/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/disclosure/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/disclosure/runtime/chunks/navigation-BfNzDYZB.js b/packages/ui/dist/copy/disclosure/runtime/chunks/navigation-BfNzDYZB.js
new file mode 100644
index 000000000..db2779553
--- /dev/null
+++ b/packages/ui/dist/copy/disclosure/runtime/chunks/navigation-BfNzDYZB.js
@@ -0,0 +1,377 @@
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/navigation.js
+function tabs(root, { on }, listOverride) {
+	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
+	if (!list) return {};
+	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
+	const select = (id, focus = false) => {
+		const tab = items().find((item) => item.id === id);
+		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
+		all(list, "[role=\"tab\"]").forEach((item) => {
+			item.setAttribute("aria-selected", String(item === tab));
+			item.tabIndex = item === tab ? 0 : -1;
+		});
+		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
+			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
+			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
+		});
+		if (focus) tab.focus();
+		return tab;
+	};
+	const activate = (tab) => {
+		select(tab.id);
+		root.emit("select", {
+			id: tab.id,
+			panelId: tab.getAttribute("aria-controls")
+		});
+	};
+	on(list, "click", (event) => {
+		const tab = event.target.closest("[role=\"tab\"]");
+		if (tab && enabled(tab)) activate(tab);
+	});
+	on(list, "keydown", (event) => {
+		const current = event.target.closest("[role=\"tab\"]"), options = items();
+		if (!current) return;
+		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		let index = options.indexOf(current);
+		if (event.key === next) index++;
+		else if (event.key === previous) index--;
+		else if (event.key === "Home") index = 0;
+		else if (event.key === "End") index = options.length - 1;
+		else if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			activate(current);
+			return;
+		} else return;
+		event.preventDefault();
+		const tab = rove(options, index);
+		if (root.getAttribute("activation") !== "manual") activate(tab);
+	});
+	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
+	if (initial) select(initial.id);
+	return {
+		select,
+		get selectedId() {
+			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
+		},
+		set selectedId(id) {
+			select(id);
+		}
+	};
+}
+function toolbar(root, { on }) {
+	const bar = root.querySelector("[role=\"toolbar\"]");
+	if (!bar) return {};
+	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
+	const initial = controls();
+	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
+	on(bar, "focusin", (event) => {
+		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
+	});
+	on(bar, "keydown", (event) => {
+		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
+		const items = controls(), index = items.indexOf(event.target);
+		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		if (![
+			next,
+			prev,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		event.preventDefault();
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
+	});
+	on(bar, "click", (event) => {
+		const button = event.target.closest("button[aria-pressed]");
+		if (button && enabled(button)) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.dataset.action ?? button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		}
+	});
+	return {};
+}
+function disclosure(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button[aria-controls][aria-expanded]");
+		if (!button || !enabled(button)) return;
+		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
+		if (!target) return;
+		const expanded = button.getAttribute("aria-expanded") !== "true";
+		button.setAttribute("aria-expanded", String(expanded));
+		target.hidden = !expanded;
+		root.emit("toggle", {
+			id: target.id,
+			expanded
+		});
+	});
+	const details = root.querySelector("details");
+	on(details, "toggle", () => root.emit("toggle", {
+		id: details.id,
+		expanded: details.open
+	}));
+	return {
+		get open() {
+			return details?.open ?? false;
+		},
+		set open(value) {
+			if (details) details.open = Boolean(value);
+		}
+	};
+}
+function combobox(root, { on, signal }) {
+	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
+	if (!input || !list) return {};
+	identify(root, list, "options");
+	input.setAttribute("aria-controls", list.id);
+	let active = null, notifying = false;
+	const notify = () => {
+		notifying = true;
+		try {
+			nativeInput(input);
+			nativeInput(input, "change");
+		} finally {
+			notifying = false;
+		}
+	};
+	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
+	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
+	const setActive = (option) => {
+		active = option;
+		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
+		if (option) {
+			input.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		} else input.removeAttribute("aria-activedescendant");
+	};
+	const hide = () => {
+		list.hidden = true;
+		input.setAttribute("aria-expanded", "false");
+		setActive(null);
+	};
+	const filter = (query = input.value) => {
+		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
+		all(list, "[role=\"group\"]").forEach((group) => {
+			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
+		});
+		const empty = root.querySelector(".combobox-empty");
+		if (empty) {
+			empty.hidden = options().length !== 0;
+			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
+		}
+		if (!options().includes(active)) setActive(null);
+	};
+	const show = (allOptions = false) => {
+		if (!enabled(input) || input.readOnly) return;
+		filter(allOptions ? "" : input.value);
+		list.hidden = false;
+		input.setAttribute("aria-expanded", "true");
+		place(input, list);
+	};
+	const choose = (option) => {
+		if (!option || !enabled(option)) return;
+		input.value = option.dataset.value ?? option.textContent.trim();
+		hide();
+		notify();
+		input.focus();
+	};
+	on(input, "input", () => {
+		if (!notifying) {
+			show();
+			announce(root, `${options().length} options available.`);
+		}
+	});
+	on(input, "keydown", (event) => {
+		if (event.key === "Tab") {
+			hide();
+			return;
+		}
+		if (event.key === "Escape") {
+			if (!list.hidden) {
+				hide();
+				event.stopPropagation();
+			} else if (input.value) {
+				input.value = "";
+				notify();
+				event.stopPropagation();
+			}
+			event.preventDefault();
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			hide();
+			return;
+		}
+		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			if (list.hidden) show(true);
+			if (event.altKey) return;
+			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
+			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
+		} else if (event.key === "Enter" && !list.hidden && active) {
+			event.preventDefault();
+			choose(active);
+		}
+	});
+	on(list, "pointerdown", (event) => {
+		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
+	});
+	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
+	on(root.querySelector(".combobox-toggle"), "click", () => {
+		list.hidden ? show(true) : hide();
+		input.focus();
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide();
+	});
+	on(root, "focusout", () => queueMicrotask(() => {
+		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
+	}));
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!list.hidden) place(input, list);
+	});
+	on(root.ownerDocument, "scroll", (event) => {
+		if (!list.hidden && !list.contains(event.target)) place(input, list);
+	}, { capture: true });
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !list.hidden;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		get value() {
+			return input.value;
+		},
+		set value(value) {
+			input.value = String(value ?? "");
+			if (!list.hidden) filter();
+		},
+		cleanup: hide
+	};
+}
+function menu(root, { on }) {
+	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
+	if (!trigger || !main) return {};
+	identify(root, main, "menu");
+	trigger.setAttribute("aria-controls", main.id);
+	const lists = all(root, "[role=\"menu\"]");
+	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
+	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
+	const closeList = (list) => {
+		list.hidden = true;
+		controller(list)?.setAttribute("aria-expanded", "false");
+	};
+	const hide = (focus = true) => {
+		lists.forEach(closeList);
+		if (focus) trigger.focus();
+	};
+	const showList = (list, button, last = false) => {
+		list.hidden = false;
+		button.setAttribute("aria-expanded", "true");
+		place(button, list);
+		rove(items(list), last ? items(list).length - 1 : 0);
+	};
+	const show = () => {
+		if (enabled(trigger)) showList(main, trigger);
+	};
+	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
+	const activate = (item) => {
+		if (!enabled(item)) return;
+		const child = submenu(item);
+		if (child) {
+			showList(child, item);
+			return;
+		}
+		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
+		else hide();
+		root.emit("action", {
+			action: item.dataset.action ?? item.textContent.trim(),
+			checked: item.getAttribute("aria-checked") === "true"
+		});
+	};
+	on(trigger, "click", () => main.hidden ? show() : hide());
+	on(trigger, "keydown", (event) => {
+		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
+			event.preventDefault();
+			showList(main, trigger, event.key === "ArrowUp");
+		}
+	});
+	on(root, "click", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (item) activate(item);
+	});
+	on(root, "keydown", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (!item) return;
+		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
+		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (list !== main) {
+				closeList(list);
+				controller(list)?.focus();
+			} else hide();
+		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
+			event.preventDefault();
+			showList(submenu(item), item);
+		} else if (event.key === "Tab") hide();
+		else if (event.key.length === 1 && /\S/.test(event.key)) {
+			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+			if (found) {
+				event.preventDefault();
+				rove(options, options.indexOf(found));
+			}
+		}
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument, "focusin", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
+	hide(false);
+	return {
+		show,
+		hide,
+		get open() {
+			return !main.hidden;
+		},
+		set open(value) {
+			value ? show() : hide(false);
+		},
+		cleanup() {
+			hide(false);
+		}
+	};
+}
+//#endregion
+export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/disclosure/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/disclosure/runtime/chunks/navigation-Dt8ap-9J.js
deleted file mode 100644
index 81201c8d5..000000000
--- a/packages/ui/dist/copy/disclosure/runtime/chunks/navigation-Dt8ap-9J.js
+++ /dev/null
@@ -1,367 +0,0 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/navigation.js
-function tabs(root, { on }, listOverride) {
-	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
-	if (!list) return {};
-	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
-	const select = (id, focus = false) => {
-		const tab = items().find((item) => item.id === id);
-		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
-		all(list, "[role=\"tab\"]").forEach((item) => {
-			item.setAttribute("aria-selected", String(item === tab));
-			item.tabIndex = item === tab ? 0 : -1;
-		});
-		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
-			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
-			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
-		});
-		if (focus) tab.focus();
-		return tab;
-	};
-	const activate = (tab) => {
-		select(tab.id);
-		root.emit("select", {
-			id: tab.id,
-			panelId: tab.getAttribute("aria-controls")
-		});
-	};
-	on(list, "click", (event) => {
-		const tab = event.target.closest("[role=\"tab\"]");
-		if (tab && enabled(tab)) activate(tab);
-	});
-	on(list, "keydown", (event) => {
-		const current = event.target.closest("[role=\"tab\"]"), options = items();
-		if (!current) return;
-		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		let index = options.indexOf(current);
-		if (event.key === next) index++;
-		else if (event.key === previous) index--;
-		else if (event.key === "Home") index = 0;
-		else if (event.key === "End") index = options.length - 1;
-		else if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			activate(current);
-			return;
-		} else return;
-		event.preventDefault();
-		const tab = rove(options, index);
-		if (root.getAttribute("activation") !== "manual") activate(tab);
-	});
-	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
-	if (initial) select(initial.id);
-	return {
-		select,
-		get selectedId() {
-			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
-		},
-		set selectedId(id) {
-			select(id);
-		}
-	};
-}
-function toolbar(root, { on }) {
-	const bar = root.querySelector("[role=\"toolbar\"]");
-	if (!bar) return {};
-	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
-	const initial = controls();
-	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
-	on(bar, "focusin", (event) => {
-		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
-	});
-	on(bar, "keydown", (event) => {
-		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
-		const items = controls(), index = items.indexOf(event.target);
-		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		if (![
-			next,
-			prev,
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
-	});
-	on(bar, "click", (event) => {
-		const button = event.target.closest("button[aria-pressed]");
-		if (button && enabled(button)) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.dataset.action ?? button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		}
-	});
-	return {};
-}
-function disclosure(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button[aria-controls][aria-expanded]");
-		if (!button || !enabled(button)) return;
-		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
-		if (!target) return;
-		const expanded = button.getAttribute("aria-expanded") !== "true";
-		button.setAttribute("aria-expanded", String(expanded));
-		target.hidden = !expanded;
-		root.emit("toggle", {
-			id: target.id,
-			expanded
-		});
-	});
-	const details = root.querySelector("details");
-	on(details, "toggle", () => root.emit("toggle", {
-		id: details.id,
-		expanded: details.open
-	}));
-	return {
-		get open() {
-			return details?.open ?? false;
-		},
-		set open(value) {
-			if (details) details.open = Boolean(value);
-		}
-	};
-}
-function combobox(root, { on, signal }) {
-	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
-	if (!input || !list) return {};
-	identify(root, list, "options");
-	input.setAttribute("aria-controls", list.id);
-	let active = null, notifying = false;
-	const notify = () => {
-		notifying = true;
-		try {
-			nativeInput(input);
-			nativeInput(input, "change");
-		} finally {
-			notifying = false;
-		}
-	};
-	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
-	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
-	const setActive = (option) => {
-		active = option;
-		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
-		if (option) {
-			input.setAttribute("aria-activedescendant", option.id);
-			option.scrollIntoView({ block: "nearest" });
-		} else input.removeAttribute("aria-activedescendant");
-	};
-	const hide = () => {
-		list.hidden = true;
-		input.setAttribute("aria-expanded", "false");
-		setActive(null);
-	};
-	const filter = (query = input.value) => {
-		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-		all(list, "[role=\"group\"]").forEach((group) => {
-			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
-		});
-		const empty = root.querySelector(".combobox-empty");
-		if (empty) {
-			empty.hidden = options().length !== 0;
-			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
-		}
-		if (!options().includes(active)) setActive(null);
-	};
-	const show = (allOptions = false) => {
-		if (!enabled(input) || input.readOnly) return;
-		filter(allOptions ? "" : input.value);
-		list.hidden = false;
-		input.setAttribute("aria-expanded", "true");
-		place(input, list);
-	};
-	const choose = (option) => {
-		if (!option || !enabled(option)) return;
-		input.value = option.dataset.value ?? option.textContent.trim();
-		hide();
-		notify();
-		input.focus();
-	};
-	on(input, "input", () => {
-		if (!notifying) {
-			show();
-			announce(root, `${options().length} options available.`);
-		}
-	});
-	on(input, "keydown", (event) => {
-		if (event.key === "Tab") {
-			hide();
-			return;
-		}
-		if (event.key === "Escape") {
-			if (!list.hidden) {
-				hide();
-				event.stopPropagation();
-			} else if (input.value) {
-				input.value = "";
-				notify();
-				event.stopPropagation();
-			}
-			event.preventDefault();
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			hide();
-			return;
-		}
-		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-			event.preventDefault();
-			if (list.hidden) show(true);
-			if (event.altKey) return;
-			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
-			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
-		} else if (event.key === "Enter" && !list.hidden && active) {
-			event.preventDefault();
-			choose(active);
-		}
-	});
-	on(list, "pointerdown", (event) => {
-		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
-	});
-	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
-	on(root.querySelector(".combobox-toggle"), "click", () => {
-		list.hidden ? show(true) : hide();
-		input.focus();
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide();
-	});
-	on(root, "focusout", () => queueMicrotask(() => {
-		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
-	}));
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!list.hidden) place(input, list);
-	});
-	on(root.ownerDocument, "scroll", (event) => {
-		if (!list.hidden && !list.contains(event.target)) place(input, list);
-	}, { capture: true });
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !list.hidden;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		get value() {
-			return input.value;
-		},
-		set value(value) {
-			input.value = String(value ?? "");
-			if (!list.hidden) filter();
-		},
-		cleanup: hide
-	};
-}
-function menu(root, { on }) {
-	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
-	if (!trigger || !main) return {};
-	identify(root, main, "menu");
-	trigger.setAttribute("aria-controls", main.id);
-	const lists = all(root, "[role=\"menu\"]");
-	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
-	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
-	const closeList = (list) => {
-		list.hidden = true;
-		controller(list)?.setAttribute("aria-expanded", "false");
-	};
-	const hide = (focus = true) => {
-		lists.forEach(closeList);
-		if (focus) trigger.focus();
-	};
-	const showList = (list, button, last = false) => {
-		list.hidden = false;
-		button.setAttribute("aria-expanded", "true");
-		place(button, list);
-		rove(items(list), last ? items(list).length - 1 : 0);
-	};
-	const show = () => {
-		if (enabled(trigger)) showList(main, trigger);
-	};
-	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
-	const activate = (item) => {
-		if (!enabled(item)) return;
-		const child = submenu(item);
-		if (child) {
-			showList(child, item);
-			return;
-		}
-		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
-		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
-		else hide();
-		root.emit("action", {
-			action: item.dataset.action ?? item.textContent.trim(),
-			checked: item.getAttribute("aria-checked") === "true"
-		});
-	};
-	on(trigger, "click", () => main.hidden ? show() : hide());
-	on(trigger, "keydown", (event) => {
-		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
-			event.preventDefault();
-			showList(main, trigger, event.key === "ArrowUp");
-		}
-	});
-	on(root, "click", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (item) activate(item);
-	});
-	on(root, "keydown", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (!item) return;
-		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
-		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
-			event.preventDefault();
-			event.stopPropagation();
-			if (list !== main) {
-				closeList(list);
-				controller(list)?.focus();
-			} else hide();
-		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
-			event.preventDefault();
-			showList(submenu(item), item);
-		} else if (event.key === "Tab") hide();
-		else if (event.key.length === 1 && /\S/.test(event.key)) {
-			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-			if (found) {
-				event.preventDefault();
-				rove(options, options.indexOf(found));
-			}
-		}
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument, "focusin", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
-	hide(false);
-	return {
-		show,
-		hide,
-		get open() {
-			return !main.hidden;
-		},
-		set open(value) {
-			value ? show() : hide(false);
-		},
-		cleanup() {
-			hide(false);
-		}
-	};
-}
-//#endregion
-export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/disclosure/runtime/components/disclosure.js b/packages/ui/dist/copy/disclosure/runtime/components/disclosure.js
index 8760d6a4d..56e4f17fd 100644
--- a/packages/ui/dist/copy/disclosure/runtime/components/disclosure.js
+++ b/packages/ui/dist/copy/disclosure/runtime/components/disclosure.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as disclosure } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as disclosure } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/disclosure.js
 var J3w1Disclosure = class extends J3w1Element {
 	static componentId = "disclosure";
 	static version = "4.0.0";
-	static implementationId = "sha256-ROxGJvPyGtUqhWzL3a8qhGmOOsm3PD+fneX9Gb764gg=";
+	static implementationId = "sha256-h35ty1HDvIv+l1TZ2KWtUtdJetenP1x1+OVPFVOsByg=";
 	static connect = disclosure;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/disclosure/runtime/register/disclosure.js b/packages/ui/dist/copy/disclosure/runtime/register/disclosure.js
index 5eff2865e..76f4c204b 100644
--- a/packages/ui/dist/copy/disclosure/runtime/register/disclosure.js
+++ b/packages/ui/dist/copy/disclosure/runtime/register/disclosure.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Disclosure } from "../components/disclosure.js";
 //#region .cache/ui-build/entries/register/disclosure.js
 var element = registerElement("j3w1-disclosure", J3w1Disclosure);
diff --git a/packages/ui/dist/copy/disclosure/tokens.css b/packages/ui/dist/copy/disclosure/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/disclosure/tokens.css
+++ b/packages/ui/dist/copy/disclosure/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/drawer/component.css b/packages/ui/dist/copy/drawer/component.css
index c7a2750f9..2c7b6eb24 100644
--- a/packages/ui/dist/copy/drawer/component.css
+++ b/packages/ui/dist/copy/drawer/component.css
@@ -8,7 +8,7 @@ j3w1-drawer {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-drawer, j3w1-drawer *, j3w1-drawer *::before, j3w1-drawer *::after { box-sizing: border-box; }
-j3w1-drawer button, j3w1-drawer input, j3w1-drawer select, j3w1-drawer textarea { font: inherit; }
+j3w1-drawer :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-drawer ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -76,7 +76,7 @@ j3w1-drawer .drawer-header {
   align-items: center;
   justify-content: space-between;
   gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   padding: var(--space-8) var(--space-12);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
 }
@@ -128,7 +128,7 @@ j3w1-drawer .drawer-check {
   display: flex;
   align-items: center;
   gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   padding: 0 var(--space-12);
   color: var(--color-text-default);
   text-decoration: none;
@@ -217,21 +217,17 @@ j3w1-drawer .drawer:focus-visible {
   }
 }
 
-j3w1-drawer .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+j3w1-drawer .button,
+j3w1-drawer .dialog-button,
+j3w1-drawer .empty-state-action,
+j3w1-drawer .file-input-button,
+j3w1-drawer button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -244,8 +240,23 @@ j3w1-drawer .button {
   cursor: pointer;
   outline: 0;
 }
+j3w1-drawer .button,
+j3w1-drawer .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-j3w1-drawer .button-secondary {
+j3w1-drawer .button-secondary,
+j3w1-drawer .dialog-button,
+j3w1-drawer .empty-state-action,
+j3w1-drawer .file-input-button,
+j3w1-drawer button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -277,7 +288,8 @@ j3w1-drawer .button-destructive {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-j3w1-drawer .button-destructive-filled {
+j3w1-drawer .button-destructive-filled,
+j3w1-drawer .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -287,6 +299,49 @@ j3w1-drawer .button-destructive-filled {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  j3w1-drawer :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-drawer .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-drawer :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-drawer :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-drawer :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-drawer .dialog-button,
+  j3w1-drawer .empty-state-action,
+  j3w1-drawer .file-input-button,
+  j3w1-drawer button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-drawer :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 j3w1-drawer .button-icon {
   flex: none;
@@ -304,25 +359,6 @@ j3w1-drawer .button-loading {
 j3w1-drawer .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-drawer .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-drawer .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-drawer .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-drawer .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-drawer .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -334,16 +370,6 @@ j3w1-drawer .button[aria-busy="true"] .button-icon {
 j3w1-drawer .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-drawer .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-drawer .button {
@@ -352,9 +378,6 @@ j3w1-drawer .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-drawer .button:focus-visible {
-    outline-color: Highlight;
-  }
 }
 
 j3w1-drawer [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/drawer/index.html b/packages/ui/dist/copy/drawer/index.html
index 42b14b635..d560d0650 100644
--- a/packages/ui/dist/copy/drawer/index.html
+++ b/packages/ui/dist/copy/drawer/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Drawer · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-drawer id="example-drawer-start">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Drawer · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-drawer id="example-drawer-start">
   <dialog class="drawer drawer-start" aria-labelledby="example-drawer-start-dw-nav-title">
     <div class="drawer-header">
       <h2 class="drawer-title" id="example-drawer-start-dw-nav-title">Sections</h2>
diff --git a/packages/ui/dist/copy/drawer/manifest.json b/packages/ui/dist/copy/drawer/manifest.json
index f063c5274..3f7cc2628 100644
--- a/packages/ui/dist/copy/drawer/manifest.json
+++ b/packages/ui/dist/copy/drawer/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/drawer.md",
   "dependencies": [
     "register/drawer.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/drawer.js",
-    "chunks/overlays-C6nlCHqg.js"
+    "chunks/overlays-Bw8SSDKz.js"
   ],
   "files": {
-    "runtime/register/drawer.js": "sha256-6AFbTqS+kQAd15TJ9NzKLIyNKPdVVmxyZMeHJXtNEhU=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/drawer.js": "sha256-vwjZdEg2SybEwAsIBL+uJuAs6ArJnLfrtqdRiOtleqA=",
-    "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-39DmGp3B3f8+C/QGAv6xbiVXT7QviSaVCnHk8XpC158=",
+    "runtime/register/drawer.js": "sha256-rA72wn/EhgwDqOffVBPLtBX9zTwVRgod2uadIlZcLe0=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/drawer.js": "sha256-jGdxQ8JnwAPl1aTJWnbXrRb0kPIs7kJZo5rIrmfBTF4=",
+    "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-r9vwT85nLqMxpyVzGQDrQIU3bpOdw5TleRvfLX3IVQs=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-RNAiKQJPioHCtfhMtqcsFaQFfwhKvdH+iIfLXOWo6QQ=",
-    "index.html": "sha256-CbS/ignNl9YlA8MUwmXMnGVVRk6rR78IN2YGSe3T/OI=",
+    "index.html": "sha256-E0Z5esPR0fYfy04CP3TuZwrK6CEw4DIxyD9vXPSkZAI=",
     "README.md": "sha256-fOfwfTYC9vdlgQFOfWiigzqCKfrU93VWnGHVQW9kH8s="
   }
 }
diff --git a/packages/ui/dist/copy/drawer/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/drawer/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/drawer/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/drawer/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/drawer/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/drawer/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/drawer/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/drawer/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/drawer/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/drawer/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/drawer/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/drawer/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/drawer/runtime/chunks/overlays-Bw8SSDKz.js b/packages/ui/dist/copy/drawer/runtime/chunks/overlays-Bw8SSDKz.js
new file mode 100644
index 000000000..3eeb8ff0d
--- /dev/null
+++ b/packages/ui/dist/copy/drawer/runtime/chunks/overlays-Bw8SSDKz.js
@@ -0,0 +1,236 @@
+import { d as place, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/overlays.js
+function modal(root, { on }) {
+	const dialog = root.querySelector("dialog");
+	if (!dialog) return {};
+	let opener = null;
+	const show = (trigger = root.ownerDocument.activeElement) => {
+		if (dialog.open || root.hasAttribute("disabled")) return;
+		opener = trigger;
+		dialog.showModal();
+		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
+		root.emit("open", {});
+	};
+	const close = (value = "") => {
+		if (dialog.open) dialog.close(String(value));
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (button?.matches("[data-open]")) {
+			show(button);
+			return;
+		}
+		if (button && dialog.contains(button) && enabled(button)) {
+			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
+			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
+		}
+		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
+	});
+	on(dialog, "cancel", (event) => {
+		if (!root.emit("cancel", {})) event.preventDefault();
+	});
+	on(dialog, "close", () => {
+		if (opener?.isConnected) opener.focus();
+		root.emit("close", { returnValue: dialog.returnValue });
+	});
+	return {
+		show,
+		close,
+		get open() {
+			return dialog.open;
+		},
+		set open(value) {
+			value ? show() : close();
+		},
+		get returnValue() {
+			return dialog.returnValue;
+		},
+		cleanup() {
+			if (dialog.open) dialog.close();
+		}
+	};
+}
+function tooltip(root, { on }) {
+	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
+	if (!trigger || !popup) return {};
+	identify(root, popup, "tooltip");
+	trigger.setAttribute("aria-describedby", popup.id);
+	let timer, dismissed = false, hovering = false;
+	const stop = () => {
+		clearTimeout(timer);
+	};
+	const hide = () => {
+		stop();
+		popup.hidden = true;
+	};
+	const show = () => {
+		stop();
+		if (!dismissed) {
+			popup.hidden = false;
+			place(trigger, popup);
+		}
+	};
+	on(trigger, "pointerenter", (event) => {
+		if (event.pointerType !== "touch") {
+			hovering = true;
+			dismissed = false;
+			timer = setTimeout(show, 300);
+		}
+	});
+	on(root, "pointerleave", (event) => {
+		if (!root.contains(event.relatedTarget)) {
+			hovering = false;
+			dismissed = false;
+			if (root.ownerDocument.activeElement !== trigger) hide();
+		}
+	});
+	on(popup, "pointerenter", () => {
+		hovering = true;
+		stop();
+	});
+	on(trigger, "focus", () => {
+		dismissed = false;
+		show();
+	});
+	on(trigger, "blur", () => {
+		if (!hovering) hide();
+	});
+	on(trigger, "click", () => {
+		dismissed = true;
+		hide();
+	});
+	on(trigger, "pointerdown", (event) => {
+		if (event.pointerType === "touch") {
+			dismissed = false;
+			timer = setTimeout(show, 500);
+		}
+	});
+	on(trigger, "pointerup", stop);
+	on(trigger, "pointercancel", stop);
+	on(root.ownerDocument, "keydown", (event) => {
+		if (event.key === "Escape" && !popup.hidden) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			dismissed = true;
+			hide();
+		}
+	}, { capture: true });
+	on(root.ownerDocument, "scroll", () => {
+		if (!popup.hidden) place(trigger, popup);
+	}, { capture: true });
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!popup.hidden) place(trigger, popup);
+	});
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !popup.hidden;
+		},
+		cleanup: hide
+	};
+}
+function popover(root, { on }) {
+	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
+	if (!trigger || !panel) return {};
+	identify(root, panel, "popover");
+	trigger.setAttribute("aria-controls", panel.id);
+	const native = typeof panel.showPopover === "function";
+	if (native) {
+		panel.setAttribute("popover", "auto");
+		panel.hidden = false;
+	} else panel.hidden = true;
+	let open = false;
+	const sync = (value) => {
+		open = value;
+		trigger.setAttribute("aria-expanded", String(value));
+		root.emit("toggle", { expanded: value });
+	};
+	const show = () => {
+		if (open || !enabled(trigger)) return;
+		native ? panel.showPopover() : panel.hidden = false;
+		sync(true);
+		place(trigger, panel);
+	};
+	const hide = (focus = false) => {
+		if (!open) return;
+		native ? panel.hidePopover() : panel.hidden = true;
+		sync(false);
+		if (focus) trigger.focus();
+	};
+	on(trigger, "click", () => open ? hide() : show());
+	on(panel, "beforetoggle", (event) => {
+		open = event.newState === "open";
+		trigger.setAttribute("aria-expanded", String(open));
+	});
+	on(panel, "click", (event) => {
+		if (event.target.closest("[data-close]")) hide(true);
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!native && !root.contains(event.target)) hide();
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			hide(true);
+		}
+	});
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (open) place(trigger, panel);
+	});
+	trigger.setAttribute("aria-expanded", "false");
+	return {
+		show,
+		hide,
+		get open() {
+			return open;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		cleanup() {
+			hide();
+		}
+	};
+}
+function feedback(root, { on }) {
+	const dismiss = (item) => {
+		if (!item || !root.emit("dismiss", { id: item.id })) return;
+		const hadFocus = item.contains(root.ownerDocument.activeElement);
+		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
+		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
+		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
+		item.hidden = true;
+		if (hadFocus) next?.focus();
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button)) return;
+		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
+		else if (button.matches(".chip-filter")) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		} else if (button.matches("[data-retry]")) root.emit("retry", {});
+		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape") {
+			const toast = event.target.closest(".toast");
+			if (toast) {
+				event.preventDefault();
+				event.stopPropagation();
+				dismiss(toast);
+			}
+		}
+	});
+	return { dismiss(id) {
+		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
+	} };
+}
+//#endregion
+export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/drawer/runtime/chunks/overlays-C6nlCHqg.js b/packages/ui/dist/copy/drawer/runtime/chunks/overlays-C6nlCHqg.js
deleted file mode 100644
index 9df8503ec..000000000
--- a/packages/ui/dist/copy/drawer/runtime/chunks/overlays-C6nlCHqg.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import { i as all, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/overlays.js
-function modal(root, { on }) {
-	const dialog = root.querySelector("dialog");
-	if (!dialog) return {};
-	let opener = null;
-	const show = (trigger = root.ownerDocument.activeElement) => {
-		if (dialog.open || root.hasAttribute("disabled")) return;
-		opener = trigger;
-		dialog.showModal();
-		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
-		root.emit("open", {});
-	};
-	const close = (value = "") => {
-		if (dialog.open) dialog.close(String(value));
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (button?.matches("[data-open]")) {
-			show(button);
-			return;
-		}
-		if (button && dialog.contains(button) && enabled(button)) {
-			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
-			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
-		}
-		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
-	});
-	on(dialog, "cancel", (event) => {
-		if (!root.emit("cancel", {})) event.preventDefault();
-	});
-	on(dialog, "close", () => {
-		if (opener?.isConnected) opener.focus();
-		root.emit("close", { returnValue: dialog.returnValue });
-	});
-	return {
-		show,
-		close,
-		get open() {
-			return dialog.open;
-		},
-		set open(value) {
-			value ? show() : close();
-		},
-		get returnValue() {
-			return dialog.returnValue;
-		},
-		cleanup() {
-			if (dialog.open) dialog.close();
-		}
-	};
-}
-function tooltip(root, { on }) {
-	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
-	if (!trigger || !popup) return {};
-	identify(root, popup, "tooltip");
-	trigger.setAttribute("aria-describedby", popup.id);
-	let timer, dismissed = false, hovering = false;
-	const stop = () => {
-		clearTimeout(timer);
-	};
-	const hide = () => {
-		stop();
-		popup.hidden = true;
-	};
-	const show = () => {
-		stop();
-		if (!dismissed) {
-			popup.hidden = false;
-			place(trigger, popup);
-		}
-	};
-	on(trigger, "pointerenter", (event) => {
-		if (event.pointerType !== "touch") {
-			hovering = true;
-			dismissed = false;
-			timer = setTimeout(show, 300);
-		}
-	});
-	on(root, "pointerleave", (event) => {
-		if (!root.contains(event.relatedTarget)) {
-			hovering = false;
-			dismissed = false;
-			if (root.ownerDocument.activeElement !== trigger) hide();
-		}
-	});
-	on(popup, "pointerenter", () => {
-		hovering = true;
-		stop();
-	});
-	on(trigger, "focus", () => {
-		dismissed = false;
-		show();
-	});
-	on(trigger, "blur", () => {
-		if (!hovering) hide();
-	});
-	on(trigger, "click", () => {
-		dismissed = true;
-		hide();
-	});
-	on(trigger, "pointerdown", (event) => {
-		if (event.pointerType === "touch") {
-			dismissed = false;
-			timer = setTimeout(show, 500);
-		}
-	});
-	on(trigger, "pointerup", stop);
-	on(trigger, "pointercancel", stop);
-	on(root.ownerDocument, "keydown", (event) => {
-		if (event.key === "Escape" && !popup.hidden) {
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			dismissed = true;
-			hide();
-		}
-	}, { capture: true });
-	on(root.ownerDocument, "scroll", () => {
-		if (!popup.hidden) place(trigger, popup);
-	}, { capture: true });
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!popup.hidden) place(trigger, popup);
-	});
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !popup.hidden;
-		},
-		cleanup: hide
-	};
-}
-function popover(root, { on }) {
-	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
-	if (!trigger || !panel) return {};
-	identify(root, panel, "popover");
-	trigger.setAttribute("aria-controls", panel.id);
-	const native = typeof panel.showPopover === "function";
-	if (native) {
-		panel.setAttribute("popover", "auto");
-		panel.hidden = false;
-	} else panel.hidden = true;
-	let open = false;
-	const sync = (value) => {
-		open = value;
-		trigger.setAttribute("aria-expanded", String(value));
-		root.emit("toggle", { expanded: value });
-	};
-	const show = () => {
-		if (open || !enabled(trigger)) return;
-		native ? panel.showPopover() : panel.hidden = false;
-		sync(true);
-		place(trigger, panel);
-	};
-	const hide = (focus = false) => {
-		if (!open) return;
-		native ? panel.hidePopover() : panel.hidden = true;
-		sync(false);
-		if (focus) trigger.focus();
-	};
-	on(trigger, "click", () => open ? hide() : show());
-	on(panel, "beforetoggle", (event) => {
-		open = event.newState === "open";
-		trigger.setAttribute("aria-expanded", String(open));
-	});
-	on(panel, "click", (event) => {
-		if (event.target.closest("[data-close]")) hide(true);
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!native && !root.contains(event.target)) hide();
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape" && open) {
-			event.preventDefault();
-			event.stopPropagation();
-			hide(true);
-		}
-	});
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (open) place(trigger, panel);
-	});
-	trigger.setAttribute("aria-expanded", "false");
-	return {
-		show,
-		hide,
-		get open() {
-			return open;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		cleanup() {
-			hide();
-		}
-	};
-}
-function feedback(root, { on }) {
-	const dismiss = (item) => {
-		if (!item || !root.emit("dismiss", { id: item.id })) return;
-		const hadFocus = item.contains(root.ownerDocument.activeElement);
-		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
-		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
-		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
-		item.hidden = true;
-		if (hadFocus) next?.focus();
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button)) return;
-		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
-		else if (button.matches(".chip-filter")) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		} else if (button.matches("[data-retry]")) root.emit("retry", {});
-		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape") {
-			const toast = event.target.closest(".toast");
-			if (toast) {
-				event.preventDefault();
-				event.stopPropagation();
-				dismiss(toast);
-			}
-		}
-	});
-	return { dismiss(id) {
-		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
-	} };
-}
-//#endregion
-export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/drawer/runtime/components/drawer.js b/packages/ui/dist/copy/drawer/runtime/components/drawer.js
index 3090b4b92..84e74f5d6 100644
--- a/packages/ui/dist/copy/drawer/runtime/components/drawer.js
+++ b/packages/ui/dist/copy/drawer/runtime/components/drawer.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as modal } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as modal } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/drawer.js
 var J3w1Drawer = class extends J3w1Element {
 	static componentId = "drawer";
 	static version = "4.0.0";
-	static implementationId = "sha256-8/bHeKdg2GkEVkeV2YqDCVbqEPZb6trQ7qLrf3vhnWQ=";
+	static implementationId = "sha256-k/ZCI1iewFGM/3Yu72DZfB6MpyHU8aF26giyLMSce+U=";
 	static connect = modal;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/drawer/runtime/register/drawer.js b/packages/ui/dist/copy/drawer/runtime/register/drawer.js
index d2101eb9d..3ea076673 100644
--- a/packages/ui/dist/copy/drawer/runtime/register/drawer.js
+++ b/packages/ui/dist/copy/drawer/runtime/register/drawer.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Drawer } from "../components/drawer.js";
 //#region .cache/ui-build/entries/register/drawer.js
 var element = registerElement("j3w1-drawer", J3w1Drawer);
diff --git a/packages/ui/dist/copy/drawer/tokens.css b/packages/ui/dist/copy/drawer/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/drawer/tokens.css
+++ b/packages/ui/dist/copy/drawer/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/editor-search/component.css b/packages/ui/dist/copy/editor-search/component.css
index 36709ee6b..e0bf89b85 100644
--- a/packages/ui/dist/copy/editor-search/component.css
+++ b/packages/ui/dist/copy/editor-search/component.css
@@ -8,7 +8,7 @@ j3w1-editor-search {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-editor-search, j3w1-editor-search *, j3w1-editor-search *::before, j3w1-editor-search *::after { box-sizing: border-box; }
-j3w1-editor-search button, j3w1-editor-search input, j3w1-editor-search select, j3w1-editor-search textarea { font: inherit; }
+j3w1-editor-search :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-editor-search ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,135 @@ j3w1-editor-search .sr-only {
   border: 0;
 }
 
+j3w1-editor-search .button,
+j3w1-editor-search .dialog-button,
+j3w1-editor-search .empty-state-action,
+j3w1-editor-search .file-input-button,
+j3w1-editor-search button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-editor-search .button,
+j3w1-editor-search .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-editor-search .button-secondary,
+j3w1-editor-search .dialog-button,
+j3w1-editor-search .empty-state-action,
+j3w1-editor-search .file-input-button,
+j3w1-editor-search button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-editor-search .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-editor-search .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-editor-search .button-destructive-filled,
+j3w1-editor-search .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-editor-search :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-editor-search .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-editor-search :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-editor-search :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-editor-search :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-editor-search .dialog-button,
+  j3w1-editor-search .empty-state-action,
+  j3w1-editor-search .file-input-button,
+  j3w1-editor-search button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-editor-search :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-editor-search .editor-search {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-editor-search .editor-search-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-editor-search .editor-search :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-editor-search .editor-search :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-editor-search .editor-search pre {padding:var(--space-12);overflow:auto;background:var(--color-surface-code);font:inherit}j3w1-editor-search .editor-search mark {background:var(--color-code-search-match-bg);color:var(--color-text-default)}j3w1-editor-search .editor-search mark[data-current] {background:var(--color-code-search-current-bg);color:var(--color-code-search-current-text);outline:var(--border-width-default) dashed var(--color-interaction-focus-ring-container)}j3w1-editor-search .editor-search [data-search-status] {color:var(--color-text-muted)}j3w1-editor-search .editor-search-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 
 j3w1-editor-search [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/editor-search/index.html b/packages/ui/dist/copy/editor-search/index.html
index a92a9ee50..264b34aac 100644
--- a/packages/ui/dist/copy/editor-search/index.html
+++ b/packages/ui/dist/copy/editor-search/index.html
@@ -1,4 +1,4 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Editor search · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-editor-search id="example-editor-search-default"><section class="editor-search" aria-label="Search source"><label for="example-editor-search-default-editor-query">Find in source</label><input class="editor-search-control" id="example-editor-search-default-editor-query" type="search" data-query="" data-demo-focus-target=""><div class="editor-search-actions"><button class="editor-search-control" type="button" data-previous="">Previous match</button><button class="editor-search-control" type="button" data-next="">Next match</button></div><p role="status" data-search-status="">Enter text to search.</p><pre data-source="">const theme = 'j3w1';
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Editor search · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-editor-search id="example-editor-search-default"><section class="editor-search" aria-label="Search source"><label for="example-editor-search-default-editor-query">Find in source</label><input class="editor-search-control" id="example-editor-search-default-editor-query" type="search" data-query="" data-demo-focus-target=""><div class="editor-search-actions"><button class="editor-search-control" type="button" data-previous="">Previous match</button><button class="editor-search-control" type="button" data-next="">Next match</button></div><p role="status" data-search-status="">Enter text to search.</p><pre data-source="">const theme = 'j3w1';
 const mode = 'dark';
 export { theme, mode };</pre></section></j3w1-editor-search><script type="module" src="./runtime/register/editor-search.js"></script></body></html>
diff --git a/packages/ui/dist/copy/editor-search/manifest.json b/packages/ui/dist/copy/editor-search/manifest.json
index ad32c7aac..4fa1c674a 100644
--- a/packages/ui/dist/copy/editor-search/manifest.json
+++ b/packages/ui/dist/copy/editor-search/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/editor-search.md",
   "dependencies": [
     "register/editor-search.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/editor-search.js",
-    "chunks/display-dj9YaBfn.js"
+    "chunks/display-Jm9bAsnb.js"
   ],
   "files": {
-    "runtime/register/editor-search.js": "sha256-tMpvZf9OrWiyhDzn0EWZnEz8kSJ2SP8tALzQVYqwCws=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/editor-search.js": "sha256-tPLpeyxQ/8Gf/LImxqGBvRraQE6oFXtqIspmI84b8XA=",
-    "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-M0SrYSnjmhmwR0wfAiNg1VU3bXhEQkYknaGRLw0fWMM=",
+    "runtime/register/editor-search.js": "sha256-R0CYRlMKJW24RObuaWNYkCNShO/Qtkkh/n9CWJ33FFA=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/editor-search.js": "sha256-aUfiB2u6bRwR1VhsFjANGyo6S0HHuA5lveVDShHVo3c=",
+    "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-EsEJrsGIZ88TEP4pXc0Jt3WQxhCysigIkd1ddeNbHBM=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-d4aAYzdcDHNmdiry3w1Y3xEHMEA6MELYHpoj25fZY7M=",
-    "index.html": "sha256-nzYqIKBlE7peT4onxSzqAj0mwZHNcvHOF2jIuZV5iKo=",
+    "index.html": "sha256-f7NqN883Z+7eUEbHFc9OPrlTwgcg/uxCcMTJm7xVNZ0=",
     "README.md": "sha256-uCiQ7xpaMDEYDoL/7zMcafsbXKeQ+tnAyLmxgCMABh8="
   }
 }
diff --git a/packages/ui/dist/copy/editor-search/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/editor-search/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/editor-search/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/editor-search/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/editor-search/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/editor-search/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/editor-search/runtime/chunks/display-Jm9bAsnb.js b/packages/ui/dist/copy/editor-search/runtime/chunks/display-Jm9bAsnb.js
new file mode 100644
index 000000000..5bc817830
--- /dev/null
+++ b/packages/ui/dist/copy/editor-search/runtime/chunks/display-Jm9bAsnb.js
@@ -0,0 +1,212 @@
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/display.js
+function avatar(root, { on }) {
+	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
+	if (!frame || !fallback) return {};
+	let image = frame.querySelector("img");
+	if (!image) {
+		image = make(root, "img", {
+			alt: "",
+			hidden: ""
+		});
+		frame.prepend(image);
+	}
+	let source = image.getAttribute("src") ?? "";
+	const update = (value) => {
+		source = String(value ?? "");
+		image.hidden = true;
+		fallback.hidden = false;
+		delete frame.dataset.error;
+		if (!source) {
+			image.removeAttribute("src");
+			delete frame.dataset.loading;
+			return;
+		}
+		frame.dataset.loading = "true";
+		image.src = source;
+	};
+	on(image, "load", () => {
+		delete frame.dataset.loading;
+		image.hidden = false;
+		fallback.hidden = true;
+	});
+	on(image, "error", () => {
+		delete frame.dataset.loading;
+		frame.dataset.error = "true";
+		image.hidden = true;
+		fallback.hidden = false;
+	});
+	update(root.getAttribute("src") ?? source);
+	return {
+		get src() {
+			return source;
+		},
+		set src(value) {
+			update(value);
+		},
+		attributeChanged(name) {
+			if (name === "src") update(root.getAttribute("src"));
+		}
+	};
+}
+function chart(root) {
+	const figure = root.querySelector("figure"), svg = figure?.querySelector("svg"), tbody = figure?.querySelector("tbody");
+	if (!figure || !svg || !tbody) return {};
+	let values = all(tbody, "tr").map((row) => ({
+		label: row.cells[0]?.textContent.trim() ?? "",
+		value: Number(row.cells[1]?.textContent)
+	}));
+	const update = (data) => {
+		if (!Array.isArray(data) || data.length > 200 || data.some((row) => typeof row.label !== "string" || typeof row.value !== "number" || !Number.isFinite(row.value) || row.value < 0)) throw new TypeError("data must contain at most 200 labelled finite non-negative values");
+		values = data.map((row) => ({
+			label: row.label,
+			value: row.value
+		}));
+		svg.replaceChildren();
+		tbody.replaceChildren();
+		const ns = "http://www.w3.org/2000/svg";
+		const group = root.ownerDocument.createElementNS(ns, "g");
+		group.setAttribute("class", "chart-series");
+		svg.append(group);
+		const width = Math.max(300, values.length * 32), max = Math.max(1, ...values.map((row) => row.value));
+		svg.setAttribute("viewBox", `0 0 ${width} 140`);
+		svg.setAttribute("aria-label", values.length ? values.map((row) => `${row.label}: ${row.value}`).join("; ") : "No data available");
+		for (const [index, row] of values.entries()) {
+			const bar = root.ownerDocument.createElementNS(ns, "rect"), step = (width - 20) / values.length, height = row.value / max * 100;
+			for (const [name, value] of Object.entries({
+				x: 10 + index * step + step * .15,
+				y: 110 - height,
+				width: step * .7,
+				height
+			})) bar.setAttribute(name, String(value));
+			const title = root.ownerDocument.createElementNS(ns, "title");
+			title.textContent = `${row.label}: ${row.value}`;
+			bar.append(title);
+			group.append(bar);
+			const tr = make(root, "tr");
+			tr.append(make(root, "th", { scope: "row" }, row.label), make(root, "td", {}, row.value));
+			tbody.append(tr);
+		}
+		svg.toggleAttribute("hidden", !values.length);
+		const empty = figure.querySelector("[data-chart-empty]");
+		if (empty) empty.hidden = values.length !== 0;
+	};
+	return {
+		get data() {
+			return values.map((row) => ({ ...row }));
+		},
+		set data(data) {
+			update(data);
+		}
+	};
+}
+function editorSearch(root, { on }) {
+	const input = root.querySelector("[data-query]"), pre = root.querySelector("[data-source]"), status = root.querySelector("[data-search-status]");
+	if (!input || !pre) return {};
+	let source = pre.textContent, current = -1, matches = [];
+	const previous = root.querySelector("[data-previous]"), following = root.querySelector("[data-next]");
+	const select = (index) => {
+		current = matches.length ? (index + matches.length) % matches.length : -1;
+		all(pre, "mark").forEach((mark, i) => mark.toggleAttribute("data-current", i === current));
+		if (status) status.textContent = !input.value ? "Enter text to search." : matches.length ? `Match ${current + 1} of ${matches.length}` : "No matches.";
+	};
+	const search = () => {
+		matches = [];
+		pre.replaceChildren();
+		const query = input.value.toLocaleLowerCase();
+		let folded = "", offset = 0;
+		const starts = [], ends = [];
+		for (const char of source) {
+			const text = char.toLocaleLowerCase();
+			for (let i = 0; i < text.length; i++) {
+				starts.push(offset);
+				ends.push(offset + char.length);
+			}
+			folded += text;
+			offset += char.length;
+		}
+		if (query) {
+			let position = 0;
+			while ((position = folded.indexOf(query, position)) >= 0) {
+				const start = starts[position], end = ends[position + query.length - 1];
+				if (!matches.length || start >= matches.at(-1).end) matches.push({
+					start,
+					end
+				});
+				position += query.length;
+			}
+		}
+		let cursor = 0;
+		for (const match of matches) {
+			pre.append(root.ownerDocument.createTextNode(source.slice(cursor, match.start)), make(root, "mark", {}, source.slice(match.start, match.end)));
+			cursor = match.end;
+		}
+		pre.append(root.ownerDocument.createTextNode(source.slice(cursor)));
+		if (previous) previous.disabled = !matches.length;
+		if (following) following.disabled = !matches.length;
+		select(0);
+	};
+	const next = (direction = 1) => {
+		if (!matches.length) return;
+		select(current + (direction < 0 ? -1 : 1));
+		all(pre, "mark")[current]?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	};
+	on(input, "input", search);
+	on(input, "keydown", (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			next(event.shiftKey ? -1 : 1);
+		} else if (event.key === "Escape" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			input.value = "";
+			search();
+		}
+	});
+	on(previous, "click", () => next(-1));
+	on(following, "click", () => next());
+	search();
+	return {
+		next,
+		get source() {
+			return source;
+		},
+		set source(text) {
+			source = String(text);
+			search();
+		},
+		get query() {
+			return input.value;
+		},
+		set query(value) {
+			input.value = String(value);
+			search();
+		},
+		get matchCount() {
+			return matches.length;
+		}
+	};
+}
+function developerView(root, { on }) {
+	on(root, "click", (event) => {
+		const action = event.target.closest("button,[data-action]");
+		if (action && enabled(action)) root.emit("action", { action: action.dataset.action ?? action.textContent.trim() });
+	});
+	return { setText(text) {
+		let pre = root.querySelector("pre");
+		if (!pre) {
+			pre = make(root, "pre", {
+				class: "j3w1-readonly-text",
+				tabindex: "0",
+				"aria-label": "Read-only text"
+			});
+			root.firstElementChild.replaceChildren(pre);
+		}
+		pre.textContent = String(text);
+	} };
+}
+//#endregion
+export { editorSearch as i, chart as n, developerView as r, avatar as t };
diff --git a/packages/ui/dist/copy/editor-search/runtime/chunks/display-dj9YaBfn.js b/packages/ui/dist/copy/editor-search/runtime/chunks/display-dj9YaBfn.js
deleted file mode 100644
index 80833d5da..000000000
--- a/packages/ui/dist/copy/editor-search/runtime/chunks/display-dj9YaBfn.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/display.js
-function avatar(root, { on }) {
-	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
-	if (!frame || !fallback) return {};
-	let image = frame.querySelector("img");
-	if (!image) {
-		image = make(root, "img", {
-			alt: "",
-			hidden: ""
-		});
-		frame.prepend(image);
-	}
-	let source = image.getAttribute("src") ?? "";
-	const update = (value) => {
-		source = String(value ?? "");
-		image.hidden = true;
-		fallback.hidden = false;
-		delete frame.dataset.error;
-		if (!source) {
-			image.removeAttribute("src");
-			delete frame.dataset.loading;
-			return;
-		}
-		frame.dataset.loading = "true";
-		image.src = source;
-	};
-	on(image, "load", () => {
-		delete frame.dataset.loading;
-		image.hidden = false;
-		fallback.hidden = true;
-	});
-	on(image, "error", () => {
-		delete frame.dataset.loading;
-		frame.dataset.error = "true";
-		image.hidden = true;
-		fallback.hidden = false;
-	});
-	update(root.getAttribute("src") ?? source);
-	return {
-		get src() {
-			return source;
-		},
-		set src(value) {
-			update(value);
-		},
-		attributeChanged(name) {
-			if (name === "src") update(root.getAttribute("src"));
-		}
-	};
-}
-function chart(root) {
-	const figure = root.querySelector("figure"), svg = figure?.querySelector("svg"), tbody = figure?.querySelector("tbody");
-	if (!figure || !svg || !tbody) return {};
-	let values = all(tbody, "tr").map((row) => ({
-		label: row.cells[0]?.textContent.trim() ?? "",
-		value: Number(row.cells[1]?.textContent)
-	}));
-	const update = (data) => {
-		if (!Array.isArray(data) || data.length > 200 || data.some((row) => typeof row.label !== "string" || typeof row.value !== "number" || !Number.isFinite(row.value) || row.value < 0)) throw new TypeError("data must contain at most 200 labelled finite non-negative values");
-		values = data.map((row) => ({
-			label: row.label,
-			value: row.value
-		}));
-		svg.replaceChildren();
-		tbody.replaceChildren();
-		const ns = "http://www.w3.org/2000/svg";
-		const group = root.ownerDocument.createElementNS(ns, "g");
-		group.setAttribute("class", "chart-series");
-		svg.append(group);
-		const width = Math.max(300, values.length * 32), max = Math.max(1, ...values.map((row) => row.value));
-		svg.setAttribute("viewBox", `0 0 ${width} 140`);
-		svg.setAttribute("aria-label", values.length ? values.map((row) => `${row.label}: ${row.value}`).join("; ") : "No data available");
-		for (const [index, row] of values.entries()) {
-			const bar = root.ownerDocument.createElementNS(ns, "rect"), step = (width - 20) / values.length, height = row.value / max * 100;
-			for (const [name, value] of Object.entries({
-				x: 10 + index * step + step * .15,
-				y: 110 - height,
-				width: step * .7,
-				height
-			})) bar.setAttribute(name, String(value));
-			const title = root.ownerDocument.createElementNS(ns, "title");
-			title.textContent = `${row.label}: ${row.value}`;
-			bar.append(title);
-			group.append(bar);
-			const tr = make(root, "tr");
-			tr.append(make(root, "th", { scope: "row" }, row.label), make(root, "td", {}, row.value));
-			tbody.append(tr);
-		}
-		svg.toggleAttribute("hidden", !values.length);
-		const empty = figure.querySelector("[data-chart-empty]");
-		if (empty) empty.hidden = values.length !== 0;
-	};
-	return {
-		get data() {
-			return values.map((row) => ({ ...row }));
-		},
-		set data(data) {
-			update(data);
-		}
-	};
-}
-function editorSearch(root, { on }) {
-	const input = root.querySelector("[data-query]"), pre = root.querySelector("[data-source]"), status = root.querySelector("[data-search-status]");
-	if (!input || !pre) return {};
-	let source = pre.textContent, current = -1, matches = [];
-	const previous = root.querySelector("[data-previous]"), following = root.querySelector("[data-next]");
-	const select = (index) => {
-		current = matches.length ? (index + matches.length) % matches.length : -1;
-		all(pre, "mark").forEach((mark, i) => mark.toggleAttribute("data-current", i === current));
-		if (status) status.textContent = !input.value ? "Enter text to search." : matches.length ? `Match ${current + 1} of ${matches.length}` : "No matches.";
-	};
-	const search = () => {
-		matches = [];
-		pre.replaceChildren();
-		const query = input.value.toLocaleLowerCase();
-		let folded = "", offset = 0;
-		const starts = [], ends = [];
-		for (const char of source) {
-			const text = char.toLocaleLowerCase();
-			for (let i = 0; i < text.length; i++) {
-				starts.push(offset);
-				ends.push(offset + char.length);
-			}
-			folded += text;
-			offset += char.length;
-		}
-		if (query) {
-			let position = 0;
-			while ((position = folded.indexOf(query, position)) >= 0) {
-				const start = starts[position], end = ends[position + query.length - 1];
-				if (!matches.length || start >= matches.at(-1).end) matches.push({
-					start,
-					end
-				});
-				position += query.length;
-			}
-		}
-		let cursor = 0;
-		for (const match of matches) {
-			pre.append(root.ownerDocument.createTextNode(source.slice(cursor, match.start)), make(root, "mark", {}, source.slice(match.start, match.end)));
-			cursor = match.end;
-		}
-		pre.append(root.ownerDocument.createTextNode(source.slice(cursor)));
-		if (previous) previous.disabled = !matches.length;
-		if (following) following.disabled = !matches.length;
-		select(0);
-	};
-	const next = (direction = 1) => {
-		if (!matches.length) return;
-		select(current + (direction < 0 ? -1 : 1));
-		all(pre, "mark")[current]?.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	};
-	on(input, "input", search);
-	on(input, "keydown", (event) => {
-		if (event.key === "Enter") {
-			event.preventDefault();
-			next(event.shiftKey ? -1 : 1);
-		} else if (event.key === "Escape" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			input.value = "";
-			search();
-		}
-	});
-	on(previous, "click", () => next(-1));
-	on(following, "click", () => next());
-	search();
-	return {
-		next,
-		get source() {
-			return source;
-		},
-		set source(text) {
-			source = String(text);
-			search();
-		},
-		get query() {
-			return input.value;
-		},
-		set query(value) {
-			input.value = String(value);
-			search();
-		},
-		get matchCount() {
-			return matches.length;
-		}
-	};
-}
-function developerView(root, { on }) {
-	on(root, "click", (event) => {
-		const action = event.target.closest("button,[data-action]");
-		if (action && enabled(action)) root.emit("action", { action: action.dataset.action ?? action.textContent.trim() });
-	});
-	return { setText(text) {
-		let pre = root.querySelector("pre");
-		if (!pre) {
-			pre = make(root, "pre", {
-				class: "j3w1-readonly-text",
-				tabindex: "0",
-				"aria-label": "Read-only text"
-			});
-			root.firstElementChild.replaceChildren(pre);
-		}
-		pre.textContent = String(text);
-	} };
-}
-//#endregion
-export { editorSearch as i, chart as n, developerView as r, avatar as t };
diff --git a/packages/ui/dist/copy/editor-search/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/editor-search/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/editor-search/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/editor-search/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/editor-search/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/editor-search/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/editor-search/runtime/components/editor-search.js b/packages/ui/dist/copy/editor-search/runtime/components/editor-search.js
index f5bf25205..fc6e2a1a7 100644
--- a/packages/ui/dist/copy/editor-search/runtime/components/editor-search.js
+++ b/packages/ui/dist/copy/editor-search/runtime/components/editor-search.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as editorSearch } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as editorSearch } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/editor-search.js
 var J3w1EditorSearch = class extends J3w1Element {
 	static componentId = "editor-search";
 	static version = "4.0.0";
-	static implementationId = "sha256-9KkGT11jVqC1mIIjjeR24BOy0FxKESmTA8B47/6yZHg=";
+	static implementationId = "sha256-SqX6iBMRHKvfYM9+QKkc2K/hjCGRNMeVrj+B25L3SoU=";
 	static connect = editorSearch;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/editor-search/runtime/register/editor-search.js b/packages/ui/dist/copy/editor-search/runtime/register/editor-search.js
index fa960075d..e0237ca4a 100644
--- a/packages/ui/dist/copy/editor-search/runtime/register/editor-search.js
+++ b/packages/ui/dist/copy/editor-search/runtime/register/editor-search.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1EditorSearch } from "../components/editor-search.js";
 //#region .cache/ui-build/entries/register/editor-search.js
 var element = registerElement("j3w1-editor-search", J3w1EditorSearch);
diff --git a/packages/ui/dist/copy/editor-search/tokens.css b/packages/ui/dist/copy/editor-search/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/editor-search/tokens.css
+++ b/packages/ui/dist/copy/editor-search/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/empty-state/component.css b/packages/ui/dist/copy/empty-state/component.css
index aa6c70189..432469cd1 100644
--- a/packages/ui/dist/copy/empty-state/component.css
+++ b/packages/ui/dist/copy/empty-state/component.css
@@ -8,7 +8,7 @@ j3w1-empty-state {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-empty-state, j3w1-empty-state *, j3w1-empty-state *::before, j3w1-empty-state *::after { box-sizing: border-box; }
-j3w1-empty-state button, j3w1-empty-state input, j3w1-empty-state select, j3w1-empty-state textarea { font: inherit; }
+j3w1-empty-state :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-empty-state ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,132 @@ j3w1-empty-state .sr-only {
   border: 0;
 }
 
+j3w1-empty-state .button,
+j3w1-empty-state .dialog-button,
+j3w1-empty-state .empty-state-action,
+j3w1-empty-state .file-input-button,
+j3w1-empty-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-empty-state .button,
+j3w1-empty-state .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-empty-state .button-secondary,
+j3w1-empty-state .dialog-button,
+j3w1-empty-state .empty-state-action,
+j3w1-empty-state .file-input-button,
+j3w1-empty-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-empty-state .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-empty-state .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-empty-state .button-destructive-filled,
+j3w1-empty-state .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-empty-state :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-empty-state .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-empty-state :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-empty-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-empty-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-empty-state .dialog-button,
+  j3w1-empty-state .empty-state-action,
+  j3w1-empty-state .file-input-button,
+  j3w1-empty-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-empty-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-empty-state .empty-state {
   display: flex;
   flex-direction: column;
@@ -62,34 +188,8 @@ j3w1-empty-state .empty-state-text {
   line-height: var(--font-line-height-ui-md);
   overflow-wrap: anywhere;
 }
-
 j3w1-empty-state .empty-state-action {
-  display: inline-flex;
-  align-items: center;
-  min-height: var(--density-control-height, 32px);
   margin-top: var(--space-8);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  font: inherit;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-j3w1-empty-state .empty-state-action:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-j3w1-empty-state .empty-state-action:active {
-  background: var(--color-action-secondary-pressed-bg);
-  border-color: var(--color-border-active);
-}
-
-j3w1-empty-state .empty-state-action:focus-visible {
-  outline: var(--focus-ring);
-  outline-offset: var(--focus-offset);
 }
 
 @media (max-width: 320px) {
@@ -103,24 +203,6 @@ j3w1-empty-state .empty-state-action:focus-visible {
   }
 }
 
-@media (hover: none) {
-  j3w1-empty-state .empty-state-action:hover {
-    background: var(--color-action-secondary-bg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  j3w1-empty-state .empty-state-action {
-    transition: background-color var(--motion-duration-fast);
-  }
-}
-
-@media (forced-colors: active) {
-  j3w1-empty-state .empty-state-action:focus-visible {
-    outline-color: Highlight;
-  }
-}
-
 j3w1-empty-state [hidden] { display: none !important; }
 j3w1-empty-state .j3w1-visually-hidden {
   position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
diff --git a/packages/ui/dist/copy/empty-state/index.html b/packages/ui/dist/copy/empty-state/index.html
index 016df7112..2ddba7d2b 100644
--- a/packages/ui/dist/copy/empty-state/index.html
+++ b/packages/ui/dist/copy/empty-state/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Empty state · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-empty-state id="example-empty-state-with-action"><div class="empty-state">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Empty state · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-empty-state id="example-empty-state-with-action"><div class="empty-state">
   <span class="empty-state-glyph" aria-hidden="true">∅</span>
   <h3 class="empty-state-heading">No components match</h3>
   <p class="empty-state-text">Three filters are active; none of the 67 components passes all of them.</p>
diff --git a/packages/ui/dist/copy/empty-state/manifest.json b/packages/ui/dist/copy/empty-state/manifest.json
index 4c8c8ea64..2ac5f1943 100644
--- a/packages/ui/dist/copy/empty-state/manifest.json
+++ b/packages/ui/dist/copy/empty-state/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/empty-state.md",
   "dependencies": [
     "register/empty-state.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/empty-state.js",
-    "chunks/overlays-C6nlCHqg.js"
+    "chunks/overlays-Bw8SSDKz.js"
   ],
   "files": {
-    "runtime/register/empty-state.js": "sha256-U7bwZQNspzXEKbkM+QwrFwH9wCsXZ+UNK2RYEFi+FjI=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/empty-state.js": "sha256-bmsYB/w+TevvaR9K+tvrVuNDGxVPv2PYR4hbTkhw+dU=",
-    "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-Mdd72ooxolJDcPYScpT7yUM7Uj1SV5nk9LuG9vP0EeA=",
+    "runtime/register/empty-state.js": "sha256-O+XPQiZJD3SM6EGCJ9p7Ia3RwHie8uDXVlJd2Vl8f1g=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/empty-state.js": "sha256-OdxqAGZuSH7KdWGE58jWJBVQnd4azuJVXLqmIEKf/1k=",
+    "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-BeQzoBMmZ//SCPym1JhwPfMM51a6wiO3oVtwH7lOOpc=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-j6rKuP4LmxmaKm47ZcfAqQ0LKMqN7l90HZwvUydHutQ=",
-    "index.html": "sha256-rcFm3dTOVu+pB+gds4jp/elaQrgi/1rGF8xpNTCacL4=",
+    "index.html": "sha256-stJ7LYfCGn32eDmo6PzwFlZwtF8GlPwt4gCAQ4f6EfU=",
     "README.md": "sha256-460PP03z7gtyCcQW1opIbUBVyz/wg3Dv8SyzbynmB2E="
   }
 }
diff --git a/packages/ui/dist/copy/empty-state/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/empty-state/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/empty-state/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/empty-state/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/empty-state/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/empty-state/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/empty-state/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/empty-state/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/empty-state/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/empty-state/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/empty-state/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/empty-state/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/empty-state/runtime/chunks/overlays-Bw8SSDKz.js b/packages/ui/dist/copy/empty-state/runtime/chunks/overlays-Bw8SSDKz.js
new file mode 100644
index 000000000..3eeb8ff0d
--- /dev/null
+++ b/packages/ui/dist/copy/empty-state/runtime/chunks/overlays-Bw8SSDKz.js
@@ -0,0 +1,236 @@
+import { d as place, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/overlays.js
+function modal(root, { on }) {
+	const dialog = root.querySelector("dialog");
+	if (!dialog) return {};
+	let opener = null;
+	const show = (trigger = root.ownerDocument.activeElement) => {
+		if (dialog.open || root.hasAttribute("disabled")) return;
+		opener = trigger;
+		dialog.showModal();
+		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
+		root.emit("open", {});
+	};
+	const close = (value = "") => {
+		if (dialog.open) dialog.close(String(value));
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (button?.matches("[data-open]")) {
+			show(button);
+			return;
+		}
+		if (button && dialog.contains(button) && enabled(button)) {
+			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
+			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
+		}
+		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
+	});
+	on(dialog, "cancel", (event) => {
+		if (!root.emit("cancel", {})) event.preventDefault();
+	});
+	on(dialog, "close", () => {
+		if (opener?.isConnected) opener.focus();
+		root.emit("close", { returnValue: dialog.returnValue });
+	});
+	return {
+		show,
+		close,
+		get open() {
+			return dialog.open;
+		},
+		set open(value) {
+			value ? show() : close();
+		},
+		get returnValue() {
+			return dialog.returnValue;
+		},
+		cleanup() {
+			if (dialog.open) dialog.close();
+		}
+	};
+}
+function tooltip(root, { on }) {
+	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
+	if (!trigger || !popup) return {};
+	identify(root, popup, "tooltip");
+	trigger.setAttribute("aria-describedby", popup.id);
+	let timer, dismissed = false, hovering = false;
+	const stop = () => {
+		clearTimeout(timer);
+	};
+	const hide = () => {
+		stop();
+		popup.hidden = true;
+	};
+	const show = () => {
+		stop();
+		if (!dismissed) {
+			popup.hidden = false;
+			place(trigger, popup);
+		}
+	};
+	on(trigger, "pointerenter", (event) => {
+		if (event.pointerType !== "touch") {
+			hovering = true;
+			dismissed = false;
+			timer = setTimeout(show, 300);
+		}
+	});
+	on(root, "pointerleave", (event) => {
+		if (!root.contains(event.relatedTarget)) {
+			hovering = false;
+			dismissed = false;
+			if (root.ownerDocument.activeElement !== trigger) hide();
+		}
+	});
+	on(popup, "pointerenter", () => {
+		hovering = true;
+		stop();
+	});
+	on(trigger, "focus", () => {
+		dismissed = false;
+		show();
+	});
+	on(trigger, "blur", () => {
+		if (!hovering) hide();
+	});
+	on(trigger, "click", () => {
+		dismissed = true;
+		hide();
+	});
+	on(trigger, "pointerdown", (event) => {
+		if (event.pointerType === "touch") {
+			dismissed = false;
+			timer = setTimeout(show, 500);
+		}
+	});
+	on(trigger, "pointerup", stop);
+	on(trigger, "pointercancel", stop);
+	on(root.ownerDocument, "keydown", (event) => {
+		if (event.key === "Escape" && !popup.hidden) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			dismissed = true;
+			hide();
+		}
+	}, { capture: true });
+	on(root.ownerDocument, "scroll", () => {
+		if (!popup.hidden) place(trigger, popup);
+	}, { capture: true });
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!popup.hidden) place(trigger, popup);
+	});
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !popup.hidden;
+		},
+		cleanup: hide
+	};
+}
+function popover(root, { on }) {
+	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
+	if (!trigger || !panel) return {};
+	identify(root, panel, "popover");
+	trigger.setAttribute("aria-controls", panel.id);
+	const native = typeof panel.showPopover === "function";
+	if (native) {
+		panel.setAttribute("popover", "auto");
+		panel.hidden = false;
+	} else panel.hidden = true;
+	let open = false;
+	const sync = (value) => {
+		open = value;
+		trigger.setAttribute("aria-expanded", String(value));
+		root.emit("toggle", { expanded: value });
+	};
+	const show = () => {
+		if (open || !enabled(trigger)) return;
+		native ? panel.showPopover() : panel.hidden = false;
+		sync(true);
+		place(trigger, panel);
+	};
+	const hide = (focus = false) => {
+		if (!open) return;
+		native ? panel.hidePopover() : panel.hidden = true;
+		sync(false);
+		if (focus) trigger.focus();
+	};
+	on(trigger, "click", () => open ? hide() : show());
+	on(panel, "beforetoggle", (event) => {
+		open = event.newState === "open";
+		trigger.setAttribute("aria-expanded", String(open));
+	});
+	on(panel, "click", (event) => {
+		if (event.target.closest("[data-close]")) hide(true);
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!native && !root.contains(event.target)) hide();
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			hide(true);
+		}
+	});
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (open) place(trigger, panel);
+	});
+	trigger.setAttribute("aria-expanded", "false");
+	return {
+		show,
+		hide,
+		get open() {
+			return open;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		cleanup() {
+			hide();
+		}
+	};
+}
+function feedback(root, { on }) {
+	const dismiss = (item) => {
+		if (!item || !root.emit("dismiss", { id: item.id })) return;
+		const hadFocus = item.contains(root.ownerDocument.activeElement);
+		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
+		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
+		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
+		item.hidden = true;
+		if (hadFocus) next?.focus();
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button)) return;
+		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
+		else if (button.matches(".chip-filter")) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		} else if (button.matches("[data-retry]")) root.emit("retry", {});
+		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape") {
+			const toast = event.target.closest(".toast");
+			if (toast) {
+				event.preventDefault();
+				event.stopPropagation();
+				dismiss(toast);
+			}
+		}
+	});
+	return { dismiss(id) {
+		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
+	} };
+}
+//#endregion
+export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/empty-state/runtime/chunks/overlays-C6nlCHqg.js b/packages/ui/dist/copy/empty-state/runtime/chunks/overlays-C6nlCHqg.js
deleted file mode 100644
index 9df8503ec..000000000
--- a/packages/ui/dist/copy/empty-state/runtime/chunks/overlays-C6nlCHqg.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import { i as all, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/overlays.js
-function modal(root, { on }) {
-	const dialog = root.querySelector("dialog");
-	if (!dialog) return {};
-	let opener = null;
-	const show = (trigger = root.ownerDocument.activeElement) => {
-		if (dialog.open || root.hasAttribute("disabled")) return;
-		opener = trigger;
-		dialog.showModal();
-		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
-		root.emit("open", {});
-	};
-	const close = (value = "") => {
-		if (dialog.open) dialog.close(String(value));
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (button?.matches("[data-open]")) {
-			show(button);
-			return;
-		}
-		if (button && dialog.contains(button) && enabled(button)) {
-			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
-			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
-		}
-		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
-	});
-	on(dialog, "cancel", (event) => {
-		if (!root.emit("cancel", {})) event.preventDefault();
-	});
-	on(dialog, "close", () => {
-		if (opener?.isConnected) opener.focus();
-		root.emit("close", { returnValue: dialog.returnValue });
-	});
-	return {
-		show,
-		close,
-		get open() {
-			return dialog.open;
-		},
-		set open(value) {
-			value ? show() : close();
-		},
-		get returnValue() {
-			return dialog.returnValue;
-		},
-		cleanup() {
-			if (dialog.open) dialog.close();
-		}
-	};
-}
-function tooltip(root, { on }) {
-	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
-	if (!trigger || !popup) return {};
-	identify(root, popup, "tooltip");
-	trigger.setAttribute("aria-describedby", popup.id);
-	let timer, dismissed = false, hovering = false;
-	const stop = () => {
-		clearTimeout(timer);
-	};
-	const hide = () => {
-		stop();
-		popup.hidden = true;
-	};
-	const show = () => {
-		stop();
-		if (!dismissed) {
-			popup.hidden = false;
-			place(trigger, popup);
-		}
-	};
-	on(trigger, "pointerenter", (event) => {
-		if (event.pointerType !== "touch") {
-			hovering = true;
-			dismissed = false;
-			timer = setTimeout(show, 300);
-		}
-	});
-	on(root, "pointerleave", (event) => {
-		if (!root.contains(event.relatedTarget)) {
-			hovering = false;
-			dismissed = false;
-			if (root.ownerDocument.activeElement !== trigger) hide();
-		}
-	});
-	on(popup, "pointerenter", () => {
-		hovering = true;
-		stop();
-	});
-	on(trigger, "focus", () => {
-		dismissed = false;
-		show();
-	});
-	on(trigger, "blur", () => {
-		if (!hovering) hide();
-	});
-	on(trigger, "click", () => {
-		dismissed = true;
-		hide();
-	});
-	on(trigger, "pointerdown", (event) => {
-		if (event.pointerType === "touch") {
-			dismissed = false;
-			timer = setTimeout(show, 500);
-		}
-	});
-	on(trigger, "pointerup", stop);
-	on(trigger, "pointercancel", stop);
-	on(root.ownerDocument, "keydown", (event) => {
-		if (event.key === "Escape" && !popup.hidden) {
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			dismissed = true;
-			hide();
-		}
-	}, { capture: true });
-	on(root.ownerDocument, "scroll", () => {
-		if (!popup.hidden) place(trigger, popup);
-	}, { capture: true });
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!popup.hidden) place(trigger, popup);
-	});
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !popup.hidden;
-		},
-		cleanup: hide
-	};
-}
-function popover(root, { on }) {
-	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
-	if (!trigger || !panel) return {};
-	identify(root, panel, "popover");
-	trigger.setAttribute("aria-controls", panel.id);
-	const native = typeof panel.showPopover === "function";
-	if (native) {
-		panel.setAttribute("popover", "auto");
-		panel.hidden = false;
-	} else panel.hidden = true;
-	let open = false;
-	const sync = (value) => {
-		open = value;
-		trigger.setAttribute("aria-expanded", String(value));
-		root.emit("toggle", { expanded: value });
-	};
-	const show = () => {
-		if (open || !enabled(trigger)) return;
-		native ? panel.showPopover() : panel.hidden = false;
-		sync(true);
-		place(trigger, panel);
-	};
-	const hide = (focus = false) => {
-		if (!open) return;
-		native ? panel.hidePopover() : panel.hidden = true;
-		sync(false);
-		if (focus) trigger.focus();
-	};
-	on(trigger, "click", () => open ? hide() : show());
-	on(panel, "beforetoggle", (event) => {
-		open = event.newState === "open";
-		trigger.setAttribute("aria-expanded", String(open));
-	});
-	on(panel, "click", (event) => {
-		if (event.target.closest("[data-close]")) hide(true);
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!native && !root.contains(event.target)) hide();
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape" && open) {
-			event.preventDefault();
-			event.stopPropagation();
-			hide(true);
-		}
-	});
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (open) place(trigger, panel);
-	});
-	trigger.setAttribute("aria-expanded", "false");
-	return {
-		show,
-		hide,
-		get open() {
-			return open;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		cleanup() {
-			hide();
-		}
-	};
-}
-function feedback(root, { on }) {
-	const dismiss = (item) => {
-		if (!item || !root.emit("dismiss", { id: item.id })) return;
-		const hadFocus = item.contains(root.ownerDocument.activeElement);
-		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
-		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
-		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
-		item.hidden = true;
-		if (hadFocus) next?.focus();
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button)) return;
-		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
-		else if (button.matches(".chip-filter")) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		} else if (button.matches("[data-retry]")) root.emit("retry", {});
-		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape") {
-			const toast = event.target.closest(".toast");
-			if (toast) {
-				event.preventDefault();
-				event.stopPropagation();
-				dismiss(toast);
-			}
-		}
-	});
-	return { dismiss(id) {
-		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
-	} };
-}
-//#endregion
-export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/empty-state/runtime/components/empty-state.js b/packages/ui/dist/copy/empty-state/runtime/components/empty-state.js
index b735fb73b..a2ad90398 100644
--- a/packages/ui/dist/copy/empty-state/runtime/components/empty-state.js
+++ b/packages/ui/dist/copy/empty-state/runtime/components/empty-state.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as feedback } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as feedback } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/empty-state.js
 var J3w1EmptyState = class extends J3w1Element {
 	static componentId = "empty-state";
 	static version = "4.0.0";
-	static implementationId = "sha256-rbfG9GfAXF+BMPfgYh9VU3TSU0CXpzgo8GhNdA2DHw0=";
+	static implementationId = "sha256-TjsU1nEvRoXqvqnqWsM2EsMF7pDu5QD94wKIbCronI4=";
 	static connect = feedback;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/empty-state/runtime/register/empty-state.js b/packages/ui/dist/copy/empty-state/runtime/register/empty-state.js
index cc2e584c5..a4b9594da 100644
--- a/packages/ui/dist/copy/empty-state/runtime/register/empty-state.js
+++ b/packages/ui/dist/copy/empty-state/runtime/register/empty-state.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1EmptyState } from "../components/empty-state.js";
 //#region .cache/ui-build/entries/register/empty-state.js
 var element = registerElement("j3w1-empty-state", J3w1EmptyState);
diff --git a/packages/ui/dist/copy/empty-state/tokens.css b/packages/ui/dist/copy/empty-state/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/empty-state/tokens.css
+++ b/packages/ui/dist/copy/empty-state/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/error-state/component.css b/packages/ui/dist/copy/error-state/component.css
index d7928ab44..77d6941c4 100644
--- a/packages/ui/dist/copy/error-state/component.css
+++ b/packages/ui/dist/copy/error-state/component.css
@@ -8,7 +8,7 @@ j3w1-error-state {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-error-state, j3w1-error-state *, j3w1-error-state *::before, j3w1-error-state *::after { box-sizing: border-box; }
-j3w1-error-state button, j3w1-error-state input, j3w1-error-state select, j3w1-error-state textarea { font: inherit; }
+j3w1-error-state :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-error-state ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,8 +25,134 @@ j3w1-error-state .sr-only {
   border: 0;
 }
 
+j3w1-error-state .button,
+j3w1-error-state .dialog-button,
+j3w1-error-state .empty-state-action,
+j3w1-error-state .file-input-button,
+j3w1-error-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-error-state .button,
+j3w1-error-state .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-error-state .button-secondary,
+j3w1-error-state .dialog-button,
+j3w1-error-state .empty-state-action,
+j3w1-error-state .file-input-button,
+j3w1-error-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-error-state .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-error-state .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-error-state .button-destructive-filled,
+j3w1-error-state .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-error-state :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-error-state .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-error-state :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-error-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-error-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-error-state .dialog-button,
+  j3w1-error-state .empty-state-action,
+  j3w1-error-state .file-input-button,
+  j3w1-error-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-error-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-error-state .error-state {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-error-state .error-state :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-error-state .error-state :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-error-state .error-state-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}j3w1-error-state .error-state :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}j3w1-error-state .error-state {border-inline-start:var(--border-width-emphasis) solid var(--color-status-danger-border)}j3w1-error-state .error-state h3 {color:var(--color-status-danger-text)}j3w1-error-state .error-state[aria-busy=true] {border-block-style:dashed}
 
 j3w1-error-state [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/error-state/index.html b/packages/ui/dist/copy/error-state/index.html
index 813995ca6..42adf9499 100644
--- a/packages/ui/dist/copy/error-state/index.html
+++ b/packages/ui/dist/copy/error-state/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Error state · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-error-state id="example-error-state-default"><section class="error-state" aria-labelledby="example-error-state-default-error-title"><h3 id="example-error-state-default-error-title">✕ Project list unavailable</h3><p>The demonstration request failed. Retry to load the local example records.</p><button class="error-state-control" type="button" data-retry="" data-demo-focus-target="">Retry loading</button></section></j3w1-error-state><script type="module" src="./runtime/register/error-state.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Error state · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-error-state id="example-error-state-default"><section class="error-state" aria-labelledby="example-error-state-default-error-title"><h3 id="example-error-state-default-error-title">✕ Project list unavailable</h3><p>The demonstration request failed. Retry to load the local example records.</p><button class="error-state-control" type="button" data-retry="" data-demo-focus-target="">Retry loading</button></section></j3w1-error-state><script type="module" src="./runtime/register/error-state.js"></script></body></html>
diff --git a/packages/ui/dist/copy/error-state/manifest.json b/packages/ui/dist/copy/error-state/manifest.json
index 7c323c404..4b289575e 100644
--- a/packages/ui/dist/copy/error-state/manifest.json
+++ b/packages/ui/dist/copy/error-state/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/error-state.md",
   "dependencies": [
     "register/error-state.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/error-state.js",
-    "chunks/overlays-C6nlCHqg.js"
+    "chunks/overlays-Bw8SSDKz.js"
   ],
   "files": {
-    "runtime/register/error-state.js": "sha256-LIyigSg3KPB01jhmW1+pAsrMoPyf6KtZcmrTenvFCx8=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/error-state.js": "sha256-vgUhuSmkAd9uc2x8r5Oc5k2rjzWbEtFRnrR0smV/YqM=",
-    "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-CdLPhgSZDY0ucB4/nfZpfphuYXcfoqslUTPyuhz2tDw=",
+    "runtime/register/error-state.js": "sha256-7HAfC906Fv50aD7dtTHvGX8XoxDanaS7Xy+pD6+6JlQ=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/error-state.js": "sha256-SjO3330quFN81HjlZH31y/z5f1V4MNQewsgHCYnHvA8=",
+    "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-PkulOjRkq7PLGjfU346e4I1xzJqOFRjr9UgXNeugJLY=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-ORjrriOpBHk2VlqSsyeUSEs1medDwB5oaTT4RxrXLFs=",
-    "index.html": "sha256-ypHtxbip0wQwfxcnTK23eRJ0nU1YTWrbBIr8zvdVgzA=",
+    "index.html": "sha256-oKMXjqXWa3C9B3nx3LWjOjaPYvvFEL4y4yUPyCiyHFI=",
     "README.md": "sha256-Dl3lNTMlz4fye9SN1UJc6WVgA6BbWKgqHMIRpH62yOY="
   }
 }
diff --git a/packages/ui/dist/copy/error-state/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/error-state/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/error-state/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/error-state/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/error-state/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/error-state/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/error-state/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/error-state/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/error-state/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/error-state/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/error-state/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/error-state/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/error-state/runtime/chunks/overlays-Bw8SSDKz.js b/packages/ui/dist/copy/error-state/runtime/chunks/overlays-Bw8SSDKz.js
new file mode 100644
index 000000000..3eeb8ff0d
--- /dev/null
+++ b/packages/ui/dist/copy/error-state/runtime/chunks/overlays-Bw8SSDKz.js
@@ -0,0 +1,236 @@
+import { d as place, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/overlays.js
+function modal(root, { on }) {
+	const dialog = root.querySelector("dialog");
+	if (!dialog) return {};
+	let opener = null;
+	const show = (trigger = root.ownerDocument.activeElement) => {
+		if (dialog.open || root.hasAttribute("disabled")) return;
+		opener = trigger;
+		dialog.showModal();
+		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
+		root.emit("open", {});
+	};
+	const close = (value = "") => {
+		if (dialog.open) dialog.close(String(value));
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (button?.matches("[data-open]")) {
+			show(button);
+			return;
+		}
+		if (button && dialog.contains(button) && enabled(button)) {
+			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
+			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
+		}
+		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
+	});
+	on(dialog, "cancel", (event) => {
+		if (!root.emit("cancel", {})) event.preventDefault();
+	});
+	on(dialog, "close", () => {
+		if (opener?.isConnected) opener.focus();
+		root.emit("close", { returnValue: dialog.returnValue });
+	});
+	return {
+		show,
+		close,
+		get open() {
+			return dialog.open;
+		},
+		set open(value) {
+			value ? show() : close();
+		},
+		get returnValue() {
+			return dialog.returnValue;
+		},
+		cleanup() {
+			if (dialog.open) dialog.close();
+		}
+	};
+}
+function tooltip(root, { on }) {
+	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
+	if (!trigger || !popup) return {};
+	identify(root, popup, "tooltip");
+	trigger.setAttribute("aria-describedby", popup.id);
+	let timer, dismissed = false, hovering = false;
+	const stop = () => {
+		clearTimeout(timer);
+	};
+	const hide = () => {
+		stop();
+		popup.hidden = true;
+	};
+	const show = () => {
+		stop();
+		if (!dismissed) {
+			popup.hidden = false;
+			place(trigger, popup);
+		}
+	};
+	on(trigger, "pointerenter", (event) => {
+		if (event.pointerType !== "touch") {
+			hovering = true;
+			dismissed = false;
+			timer = setTimeout(show, 300);
+		}
+	});
+	on(root, "pointerleave", (event) => {
+		if (!root.contains(event.relatedTarget)) {
+			hovering = false;
+			dismissed = false;
+			if (root.ownerDocument.activeElement !== trigger) hide();
+		}
+	});
+	on(popup, "pointerenter", () => {
+		hovering = true;
+		stop();
+	});
+	on(trigger, "focus", () => {
+		dismissed = false;
+		show();
+	});
+	on(trigger, "blur", () => {
+		if (!hovering) hide();
+	});
+	on(trigger, "click", () => {
+		dismissed = true;
+		hide();
+	});
+	on(trigger, "pointerdown", (event) => {
+		if (event.pointerType === "touch") {
+			dismissed = false;
+			timer = setTimeout(show, 500);
+		}
+	});
+	on(trigger, "pointerup", stop);
+	on(trigger, "pointercancel", stop);
+	on(root.ownerDocument, "keydown", (event) => {
+		if (event.key === "Escape" && !popup.hidden) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			dismissed = true;
+			hide();
+		}
+	}, { capture: true });
+	on(root.ownerDocument, "scroll", () => {
+		if (!popup.hidden) place(trigger, popup);
+	}, { capture: true });
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!popup.hidden) place(trigger, popup);
+	});
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !popup.hidden;
+		},
+		cleanup: hide
+	};
+}
+function popover(root, { on }) {
+	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
+	if (!trigger || !panel) return {};
+	identify(root, panel, "popover");
+	trigger.setAttribute("aria-controls", panel.id);
+	const native = typeof panel.showPopover === "function";
+	if (native) {
+		panel.setAttribute("popover", "auto");
+		panel.hidden = false;
+	} else panel.hidden = true;
+	let open = false;
+	const sync = (value) => {
+		open = value;
+		trigger.setAttribute("aria-expanded", String(value));
+		root.emit("toggle", { expanded: value });
+	};
+	const show = () => {
+		if (open || !enabled(trigger)) return;
+		native ? panel.showPopover() : panel.hidden = false;
+		sync(true);
+		place(trigger, panel);
+	};
+	const hide = (focus = false) => {
+		if (!open) return;
+		native ? panel.hidePopover() : panel.hidden = true;
+		sync(false);
+		if (focus) trigger.focus();
+	};
+	on(trigger, "click", () => open ? hide() : show());
+	on(panel, "beforetoggle", (event) => {
+		open = event.newState === "open";
+		trigger.setAttribute("aria-expanded", String(open));
+	});
+	on(panel, "click", (event) => {
+		if (event.target.closest("[data-close]")) hide(true);
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!native && !root.contains(event.target)) hide();
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			hide(true);
+		}
+	});
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (open) place(trigger, panel);
+	});
+	trigger.setAttribute("aria-expanded", "false");
+	return {
+		show,
+		hide,
+		get open() {
+			return open;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		cleanup() {
+			hide();
+		}
+	};
+}
+function feedback(root, { on }) {
+	const dismiss = (item) => {
+		if (!item || !root.emit("dismiss", { id: item.id })) return;
+		const hadFocus = item.contains(root.ownerDocument.activeElement);
+		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
+		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
+		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
+		item.hidden = true;
+		if (hadFocus) next?.focus();
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button)) return;
+		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
+		else if (button.matches(".chip-filter")) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		} else if (button.matches("[data-retry]")) root.emit("retry", {});
+		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape") {
+			const toast = event.target.closest(".toast");
+			if (toast) {
+				event.preventDefault();
+				event.stopPropagation();
+				dismiss(toast);
+			}
+		}
+	});
+	return { dismiss(id) {
+		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
+	} };
+}
+//#endregion
+export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/error-state/runtime/chunks/overlays-C6nlCHqg.js b/packages/ui/dist/copy/error-state/runtime/chunks/overlays-C6nlCHqg.js
deleted file mode 100644
index 9df8503ec..000000000
--- a/packages/ui/dist/copy/error-state/runtime/chunks/overlays-C6nlCHqg.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import { i as all, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/overlays.js
-function modal(root, { on }) {
-	const dialog = root.querySelector("dialog");
-	if (!dialog) return {};
-	let opener = null;
-	const show = (trigger = root.ownerDocument.activeElement) => {
-		if (dialog.open || root.hasAttribute("disabled")) return;
-		opener = trigger;
-		dialog.showModal();
-		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
-		root.emit("open", {});
-	};
-	const close = (value = "") => {
-		if (dialog.open) dialog.close(String(value));
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (button?.matches("[data-open]")) {
-			show(button);
-			return;
-		}
-		if (button && dialog.contains(button) && enabled(button)) {
-			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
-			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
-		}
-		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
-	});
-	on(dialog, "cancel", (event) => {
-		if (!root.emit("cancel", {})) event.preventDefault();
-	});
-	on(dialog, "close", () => {
-		if (opener?.isConnected) opener.focus();
-		root.emit("close", { returnValue: dialog.returnValue });
-	});
-	return {
-		show,
-		close,
-		get open() {
-			return dialog.open;
-		},
-		set open(value) {
-			value ? show() : close();
-		},
-		get returnValue() {
-			return dialog.returnValue;
-		},
-		cleanup() {
-			if (dialog.open) dialog.close();
-		}
-	};
-}
-function tooltip(root, { on }) {
-	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
-	if (!trigger || !popup) return {};
-	identify(root, popup, "tooltip");
-	trigger.setAttribute("aria-describedby", popup.id);
-	let timer, dismissed = false, hovering = false;
-	const stop = () => {
-		clearTimeout(timer);
-	};
-	const hide = () => {
-		stop();
-		popup.hidden = true;
-	};
-	const show = () => {
-		stop();
-		if (!dismissed) {
-			popup.hidden = false;
-			place(trigger, popup);
-		}
-	};
-	on(trigger, "pointerenter", (event) => {
-		if (event.pointerType !== "touch") {
-			hovering = true;
-			dismissed = false;
-			timer = setTimeout(show, 300);
-		}
-	});
-	on(root, "pointerleave", (event) => {
-		if (!root.contains(event.relatedTarget)) {
-			hovering = false;
-			dismissed = false;
-			if (root.ownerDocument.activeElement !== trigger) hide();
-		}
-	});
-	on(popup, "pointerenter", () => {
-		hovering = true;
-		stop();
-	});
-	on(trigger, "focus", () => {
-		dismissed = false;
-		show();
-	});
-	on(trigger, "blur", () => {
-		if (!hovering) hide();
-	});
-	on(trigger, "click", () => {
-		dismissed = true;
-		hide();
-	});
-	on(trigger, "pointerdown", (event) => {
-		if (event.pointerType === "touch") {
-			dismissed = false;
-			timer = setTimeout(show, 500);
-		}
-	});
-	on(trigger, "pointerup", stop);
-	on(trigger, "pointercancel", stop);
-	on(root.ownerDocument, "keydown", (event) => {
-		if (event.key === "Escape" && !popup.hidden) {
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			dismissed = true;
-			hide();
-		}
-	}, { capture: true });
-	on(root.ownerDocument, "scroll", () => {
-		if (!popup.hidden) place(trigger, popup);
-	}, { capture: true });
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!popup.hidden) place(trigger, popup);
-	});
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !popup.hidden;
-		},
-		cleanup: hide
-	};
-}
-function popover(root, { on }) {
-	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
-	if (!trigger || !panel) return {};
-	identify(root, panel, "popover");
-	trigger.setAttribute("aria-controls", panel.id);
-	const native = typeof panel.showPopover === "function";
-	if (native) {
-		panel.setAttribute("popover", "auto");
-		panel.hidden = false;
-	} else panel.hidden = true;
-	let open = false;
-	const sync = (value) => {
-		open = value;
-		trigger.setAttribute("aria-expanded", String(value));
-		root.emit("toggle", { expanded: value });
-	};
-	const show = () => {
-		if (open || !enabled(trigger)) return;
-		native ? panel.showPopover() : panel.hidden = false;
-		sync(true);
-		place(trigger, panel);
-	};
-	const hide = (focus = false) => {
-		if (!open) return;
-		native ? panel.hidePopover() : panel.hidden = true;
-		sync(false);
-		if (focus) trigger.focus();
-	};
-	on(trigger, "click", () => open ? hide() : show());
-	on(panel, "beforetoggle", (event) => {
-		open = event.newState === "open";
-		trigger.setAttribute("aria-expanded", String(open));
-	});
-	on(panel, "click", (event) => {
-		if (event.target.closest("[data-close]")) hide(true);
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!native && !root.contains(event.target)) hide();
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape" && open) {
-			event.preventDefault();
-			event.stopPropagation();
-			hide(true);
-		}
-	});
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (open) place(trigger, panel);
-	});
-	trigger.setAttribute("aria-expanded", "false");
-	return {
-		show,
-		hide,
-		get open() {
-			return open;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		cleanup() {
-			hide();
-		}
-	};
-}
-function feedback(root, { on }) {
-	const dismiss = (item) => {
-		if (!item || !root.emit("dismiss", { id: item.id })) return;
-		const hadFocus = item.contains(root.ownerDocument.activeElement);
-		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
-		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
-		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
-		item.hidden = true;
-		if (hadFocus) next?.focus();
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button)) return;
-		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
-		else if (button.matches(".chip-filter")) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		} else if (button.matches("[data-retry]")) root.emit("retry", {});
-		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape") {
-			const toast = event.target.closest(".toast");
-			if (toast) {
-				event.preventDefault();
-				event.stopPropagation();
-				dismiss(toast);
-			}
-		}
-	});
-	return { dismiss(id) {
-		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
-	} };
-}
-//#endregion
-export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/error-state/runtime/components/error-state.js b/packages/ui/dist/copy/error-state/runtime/components/error-state.js
index 42d38f9c3..8adf9072e 100644
--- a/packages/ui/dist/copy/error-state/runtime/components/error-state.js
+++ b/packages/ui/dist/copy/error-state/runtime/components/error-state.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as feedback } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as feedback } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/error-state.js
 var J3w1ErrorState = class extends J3w1Element {
 	static componentId = "error-state";
 	static version = "4.0.0";
-	static implementationId = "sha256-hj5jc9C6nDjhax7f/nHkk1z0tkHTuXGp1LJlDuYyDwU=";
+	static implementationId = "sha256-NFXjO9uEbTYqbXbZVfFiY8Ge2N54qnmAPnp046iwL4U=";
 	static connect = feedback;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/error-state/runtime/register/error-state.js b/packages/ui/dist/copy/error-state/runtime/register/error-state.js
index 14d6dc937..5e09ece1b 100644
--- a/packages/ui/dist/copy/error-state/runtime/register/error-state.js
+++ b/packages/ui/dist/copy/error-state/runtime/register/error-state.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1ErrorState } from "../components/error-state.js";
 //#region .cache/ui-build/entries/register/error-state.js
 var element = registerElement("j3w1-error-state", J3w1ErrorState);
diff --git a/packages/ui/dist/copy/error-state/tokens.css b/packages/ui/dist/copy/error-state/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/error-state/tokens.css
+++ b/packages/ui/dist/copy/error-state/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/field/component.css b/packages/ui/dist/copy/field/component.css
index 4b0c314c9..753ee0a18 100644
--- a/packages/ui/dist/copy/field/component.css
+++ b/packages/ui/dist/copy/field/component.css
@@ -8,7 +8,7 @@ j3w1-field {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-field, j3w1-field *, j3w1-field *::before, j3w1-field *::after { box-sizing: border-box; }
-j3w1-field button, j3w1-field input, j3w1-field select, j3w1-field textarea { font: inherit; }
+j3w1-field :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-field ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-field .sr-only {
   border: 0;
 }
 
+j3w1-field .combobox-label,
+j3w1-field .dialog-field-label,
+j3w1-field .field-label,
+j3w1-field .fieldset-label,
+j3w1-field .file-input-label,
+j3w1-field .number-field-label,
+j3w1-field .search-field-label,
+j3w1-field .select-label,
+j3w1-field .text-field-label,
+j3w1-field .textarea-label,
+j3w1-field .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-field .combobox-help,
+j3w1-field .date-picker-help,
+j3w1-field .dialog-field-help,
+j3w1-field .fieldset-help,
+j3w1-field .file-input-help,
+j3w1-field .number-field-help,
+j3w1-field .search-field-help,
+j3w1-field .select-help,
+j3w1-field .text-field-help,
+j3w1-field .textarea-help,
+j3w1-field .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-field .combobox-message,
+j3w1-field .date-picker-message,
+j3w1-field .file-input-message,
+j3w1-field .number-field-message,
+j3w1-field .radio-group-message,
+j3w1-field .select-message,
+j3w1-field .text-field-message,
+j3w1-field .textarea-message,
+j3w1-field .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-field .combobox-root,
+j3w1-field .date-picker-root,
+j3w1-field .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-field .field {
   position: relative;
   display: grid;
@@ -34,12 +94,6 @@ j3w1-field .field {
   color: var(--color-text-default);
 }
 
-j3w1-field .field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-field .field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -52,8 +106,8 @@ j3w1-field .field-control {
 
 j3w1-field .field-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
diff --git a/packages/ui/dist/copy/field/index.html b/packages/ui/dist/copy/field/index.html
index 519d48ba8..1a3e6b628 100644
--- a/packages/ui/dist/copy/field/index.html
+++ b/packages/ui/dist/copy/field/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Field · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-field id="example-field-default"><div class="field">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Field · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-field id="example-field-default"><div class="field">
   <label class="field-label" for="example-field-default-fd-host">Host name <span class="field-required" aria-hidden="true">*</span><span class="field-required sr-only"> required</span></label>
   <div class="field-control">
     <input class="field-input" id="example-field-default-fd-host" type="text" value="workstation" aria-describedby="example-field-default-fd-host-help example-field-default-fd-host-message" name="example-field-default-fd-host">
diff --git a/packages/ui/dist/copy/field/manifest.json b/packages/ui/dist/copy/field/manifest.json
index 4cb608a96..be871bf08 100644
--- a/packages/ui/dist/copy/field/manifest.json
+++ b/packages/ui/dist/copy/field/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/field.md",
   "dependencies": [
     "register/field.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/field.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/field.js": "sha256-XVffQJ1x1BaYIujyxerGMhRVXOVJvdiFmAKkTglUyC8=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/field.js": "sha256-pEHbl120kbYNPym5N03ZxIzOQFPHyq+rELTr9RnR2tg=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-Rd3CCjOeRNdq9v3ql8A+P+nyw3MOp7Fa0LUD8UqBzFA=",
+    "runtime/register/field.js": "sha256-zLQtzqVvRVMiR9nicBMgkx8zeeoejrZolk/zDj6Q1Q4=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/field.js": "sha256-ummTNywyrj12MoNMHDD5qiPFCif8xG24RwdhXXF7LnU=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-NdGAWLleLWawKN47P/spgrR/kdjbB/c8l7xBXcLxIoI=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-M+Faw3Q4PMYCRgzzkpyGYO6m3Sefbyj3JZ3/wdlvGPU=",
-    "index.html": "sha256-60Xj3vT6YA5V4cnFFqd+JceMzjQ4nZCBnBjOt3OId+A=",
+    "index.html": "sha256-9Oc3cWMsPHjFbRxnXV+vSB2DCa377qyZ5xvP9m6Gn3s=",
     "README.md": "sha256-AzjdGpWnzYlGi9+vtMZD2GQ180dH8au7cLFaahlKJZw="
   }
 }
diff --git a/packages/ui/dist/copy/field/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/field/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/field/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/field/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/field/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/field/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/field/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/field/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/field/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/field/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/field/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/field/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/field/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/field/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/field/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/field/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/field/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/field/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/field/runtime/components/field.js b/packages/ui/dist/copy/field/runtime/components/field.js
index 70f9d02d4..432885b11 100644
--- a/packages/ui/dist/copy/field/runtime/components/field.js
+++ b/packages/ui/dist/copy/field/runtime/components/field.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/field.js
 var J3w1Field = class extends J3w1Element {
 	static componentId = "field";
 	static version = "4.0.0";
-	static implementationId = "sha256-CViK07vFgOOS2jQ7u/riONTbtMAUdHVY73iqaGIV1tw=";
+	static implementationId = "sha256-GDPT/9zMxdyqVusrML6KYJd3mC9Kts0/5zp2/Xi2cYA=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/field/runtime/register/field.js b/packages/ui/dist/copy/field/runtime/register/field.js
index 245800b81..875540d71 100644
--- a/packages/ui/dist/copy/field/runtime/register/field.js
+++ b/packages/ui/dist/copy/field/runtime/register/field.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Field } from "../components/field.js";
 //#region .cache/ui-build/entries/register/field.js
 var element = registerElement("j3w1-field", J3w1Field);
diff --git a/packages/ui/dist/copy/field/tokens.css b/packages/ui/dist/copy/field/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/field/tokens.css
+++ b/packages/ui/dist/copy/field/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/fieldset/component.css b/packages/ui/dist/copy/fieldset/component.css
index a9b4c5965..dd99c23a1 100644
--- a/packages/ui/dist/copy/fieldset/component.css
+++ b/packages/ui/dist/copy/fieldset/component.css
@@ -8,7 +8,7 @@ j3w1-fieldset {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-fieldset, j3w1-fieldset *, j3w1-fieldset *::before, j3w1-fieldset *::after { box-sizing: border-box; }
-j3w1-fieldset button, j3w1-fieldset input, j3w1-fieldset select, j3w1-fieldset textarea { font: inherit; }
+j3w1-fieldset :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-fieldset ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-fieldset .sr-only {
   border: 0;
 }
 
+j3w1-fieldset .combobox-label,
+j3w1-fieldset .dialog-field-label,
+j3w1-fieldset .field-label,
+j3w1-fieldset .fieldset-label,
+j3w1-fieldset .file-input-label,
+j3w1-fieldset .number-field-label,
+j3w1-fieldset .search-field-label,
+j3w1-fieldset .select-label,
+j3w1-fieldset .text-field-label,
+j3w1-fieldset .textarea-label,
+j3w1-fieldset .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-fieldset .combobox-help,
+j3w1-fieldset .date-picker-help,
+j3w1-fieldset .dialog-field-help,
+j3w1-fieldset .fieldset-help,
+j3w1-fieldset .file-input-help,
+j3w1-fieldset .number-field-help,
+j3w1-fieldset .search-field-help,
+j3w1-fieldset .select-help,
+j3w1-fieldset .text-field-help,
+j3w1-fieldset .textarea-help,
+j3w1-fieldset .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-fieldset .combobox-message,
+j3w1-fieldset .date-picker-message,
+j3w1-fieldset .file-input-message,
+j3w1-fieldset .number-field-message,
+j3w1-fieldset .radio-group-message,
+j3w1-fieldset .select-message,
+j3w1-fieldset .text-field-message,
+j3w1-fieldset .textarea-message,
+j3w1-fieldset .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-fieldset .combobox-root,
+j3w1-fieldset .date-picker-root,
+j3w1-fieldset .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-fieldset .fieldset {
   min-width: 0;
   max-width: calc(var(--font-size-ui-md) * 28);
@@ -55,16 +115,10 @@ j3w1-fieldset .fieldset-field {
   min-width: 0;
 }
 
-j3w1-fieldset .fieldset-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-fieldset .fieldset-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -78,13 +132,6 @@ j3w1-fieldset .fieldset-input:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-j3w1-fieldset .fieldset-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-fieldset .fieldset:disabled .fieldset-legend,
 j3w1-fieldset .fieldset:disabled .fieldset-label {
   color: var(--color-text-disabled);
diff --git a/packages/ui/dist/copy/fieldset/index.html b/packages/ui/dist/copy/fieldset/index.html
index 9744e0ab9..58363c384 100644
--- a/packages/ui/dist/copy/fieldset/index.html
+++ b/packages/ui/dist/copy/fieldset/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fieldset · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-fieldset id="example-fieldset-default"><fieldset class="fieldset">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fieldset · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-fieldset id="example-fieldset-default"><fieldset class="fieldset">
   <legend class="fieldset-legend">Window gaps</legend>
   <div class="fieldset-body">
     <div class="fieldset-field">
diff --git a/packages/ui/dist/copy/fieldset/manifest.json b/packages/ui/dist/copy/fieldset/manifest.json
index fd24f6f69..65ed40ebc 100644
--- a/packages/ui/dist/copy/fieldset/manifest.json
+++ b/packages/ui/dist/copy/fieldset/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/fieldset.md",
   "dependencies": [
     "register/fieldset.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/fieldset.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/fieldset.js": "sha256-95mq6oG6gTLPWs+kdvdNqiuSftofqYoBvCulLuTebyE=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/fieldset.js": "sha256-pAzVFWN+M793N7lFAZ2zTybWJLdSOqZl3AmOTomqmTk=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-TPi15SfEwAaSl4PqQvGAd3bFbbB4BJ2trfD5k2+8yrc=",
+    "runtime/register/fieldset.js": "sha256-o9TJ39JjoD9lKj18M0HEJIsEaXvxYLuKg0BameLC9rQ=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/fieldset.js": "sha256-NnApETrqjlE4MbJmLICen1VVGenfbkiqjiNh9jSLgF8=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-8VS+tXfjHW87aIScNUGAXsrsJ0qwScONidsZFMMFNh0=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-Z916I2upHIzzffRAz/6w6FSTBwegAd+L49E9Juck2fo=",
-    "index.html": "sha256-/G/GqORWDhO+K+ngVGX8Mrb/mp0XHqSZ3PP1WwffRXQ=",
+    "index.html": "sha256-FbUV8k7YOMMErf8en/dGZNZE0nkjJvqan+FfQLgevVI=",
     "README.md": "sha256-dNh39iesY0kLTE75KP+a0WhhHDQpT+j04MoZgMmV4F8="
   }
 }
diff --git a/packages/ui/dist/copy/fieldset/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/fieldset/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/fieldset/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/fieldset/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/fieldset/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/fieldset/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/fieldset/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/fieldset/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/fieldset/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/fieldset/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/fieldset/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/fieldset/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/fieldset/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/fieldset/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/fieldset/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/fieldset/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/fieldset/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/fieldset/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/fieldset/runtime/components/fieldset.js b/packages/ui/dist/copy/fieldset/runtime/components/fieldset.js
index 4ed189f3a..062960dc4 100644
--- a/packages/ui/dist/copy/fieldset/runtime/components/fieldset.js
+++ b/packages/ui/dist/copy/fieldset/runtime/components/fieldset.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/fieldset.js
 var J3w1Fieldset = class extends J3w1Element {
 	static componentId = "fieldset";
 	static version = "4.0.0";
-	static implementationId = "sha256-T4bhKoYz9jjaxP51Plfd+oswKiEpk1JGLzi29ItD4mQ=";
+	static implementationId = "sha256-GMEsNCLKXzxBWy1NzvLrpSNVUG/llwSmGqxbUbScbHQ=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/fieldset/runtime/register/fieldset.js b/packages/ui/dist/copy/fieldset/runtime/register/fieldset.js
index 23d5cdd65..4ac632e86 100644
--- a/packages/ui/dist/copy/fieldset/runtime/register/fieldset.js
+++ b/packages/ui/dist/copy/fieldset/runtime/register/fieldset.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Fieldset } from "../components/fieldset.js";
 //#region .cache/ui-build/entries/register/fieldset.js
 var element = registerElement("j3w1-fieldset", J3w1Fieldset);
diff --git a/packages/ui/dist/copy/fieldset/tokens.css b/packages/ui/dist/copy/fieldset/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/fieldset/tokens.css
+++ b/packages/ui/dist/copy/fieldset/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/file-browser/component.css b/packages/ui/dist/copy/file-browser/component.css
index ffef8d528..b6d1c2871 100644
--- a/packages/ui/dist/copy/file-browser/component.css
+++ b/packages/ui/dist/copy/file-browser/component.css
@@ -8,7 +8,7 @@ j3w1-file-browser {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-file-browser, j3w1-file-browser *, j3w1-file-browser *::before, j3w1-file-browser *::after { box-sizing: border-box; }
-j3w1-file-browser button, j3w1-file-browser input, j3w1-file-browser select, j3w1-file-browser textarea { font: inherit; }
+j3w1-file-browser :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-file-browser ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,11 +25,136 @@ j3w1-file-browser .sr-only {
   border: 0;
 }
 
-j3w1-file-browser .file-browser {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
+j3w1-file-browser .button,
+j3w1-file-browser .dialog-button,
+j3w1-file-browser .empty-state-action,
+j3w1-file-browser .file-input-button,
+j3w1-file-browser button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-file-browser .button,
+j3w1-file-browser .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-file-browser .button-secondary,
+j3w1-file-browser .dialog-button,
+j3w1-file-browser .empty-state-action,
+j3w1-file-browser .file-input-button,
+j3w1-file-browser button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-file-browser .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-file-browser .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-file-browser .button-destructive-filled,
+j3w1-file-browser .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-file-browser :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-file-browser .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-file-browser :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-file-browser :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-file-browser :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-file-browser .dialog-button,
+  j3w1-file-browser .empty-state-action,
+  j3w1-file-browser .file-input-button,
+  j3w1-file-browser button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-file-browser :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+j3w1-file-browser .file-browser {box-sizing:border-box;display:grid;gap:var(--space-16);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;grid-template-columns:minmax(calc(var(--font-size-ui-md) * 8),1fr) 3fr}
 j3w1-file-browser .file-browser-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-file-browser .file-browser :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-file-browser .file-browser table {width:100%;border-collapse:collapse}j3w1-file-browser .file-browser th,j3w1-file-browser .file-browser td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}
-j3w1-file-browser .file-browser {grid-template-columns:minmax(calc(var(--font-size-ui-md) * 8),1fr) 3fr;gap:var(--space-16)}j3w1-file-browser .file-browser [aria-selected=true] {border-inline-start:var(--border-width-emphasis) solid var(--color-border-selected-indicator)}j3w1-file-browser .file-browser [data-file-status] {color:var(--color-text-muted)}@media(max-width:640px){j3w1-file-browser .file-browser{grid-template-columns:1fr}}
+j3w1-file-browser .file-browser :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+j3w1-file-browser .file-browser table {width:100%;border-collapse:collapse}j3w1-file-browser .file-browser th,j3w1-file-browser .file-browser td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}j3w1-file-browser .file-browser [aria-selected=true] {border-inline-start:var(--border-width-emphasis) solid var(--color-border-selected-indicator)}j3w1-file-browser .file-browser [data-file-status] {color:var(--color-text-muted)}@media(max-width:640px){j3w1-file-browser .file-browser{grid-template-columns:1fr}}
 
 j3w1-file-browser .file-browser thead th {color:var(--color-text-bright)}
 j3w1-file-browser .file-browser tbody {color:var(--color-text-default)}
@@ -67,7 +192,7 @@ j3w1-file-browser .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -89,7 +214,7 @@ j3w1-file-browser .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -121,7 +246,7 @@ j3w1-file-browser .table .table-body .table-row:first-child {
 
 j3w1-file-browser .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -158,6 +283,21 @@ j3w1-file-browser .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-file-browser .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-file-browser .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-file-browser .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-file-browser .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -179,7 +319,7 @@ j3w1-file-browser .table-row[aria-selected="true"]:hover {
 }
 j3w1-file-browser .table-row[aria-selected="true"]:focus-visible,
 j3w1-file-browser .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-file-browser .table[data-container-inactive] .table-row[aria-selected="true"] {
@@ -236,8 +376,15 @@ j3w1-file-browser .table-body .table-loading:not([hidden]) {
 }
 
 j3w1-file-browser .tree {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-file-browser .tree-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-file-browser .tree,j3w1-file-browser .tree [role=group] {list-style:none;padding:0;margin:0}j3w1-file-browser .tree [role=group] {padding-inline-start:var(--space-16)}j3w1-file-browser .tree [data-tree-label] {display:block;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent}j3w1-file-browser .tree [aria-expanded]>[data-tree-label]::before {content:'▸ '}j3w1-file-browser .tree [aria-expanded=true]>[data-tree-label]::before {content:'▾ '}j3w1-file-browser .tree [aria-selected=true]>[data-tree-label] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}j3w1-file-browser .tree [role=treeitem]:focus-visible>[data-tree-label] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}j3w1-file-browser .tree [aria-expanded=false]>[role=group] {display:none}j3w1-file-browser .tree [aria-disabled=true]>[data-tree-label] {color:var(--color-text-disabled)}
+j3w1-file-browser .tree,j3w1-file-browser .tree [role=group] {list-style:none;padding:0;margin:0}
+j3w1-file-browser .tree [role=group] {padding-inline-start:var(--space-16)}
+j3w1-file-browser .tree [data-tree-label] {display:block;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent}
+j3w1-file-browser .tree [aria-expanded]>[data-tree-label]::before {content:'▸ '}
+j3w1-file-browser .tree [aria-expanded=true]>[data-tree-label]::before {content:'▾ '}
+j3w1-file-browser .tree [aria-selected=true]>[data-tree-label] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}
+j3w1-file-browser .tree [role=treeitem]:focus-visible>[data-tree-label] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+j3w1-file-browser .tree [aria-expanded=false]>[role=group] {display:none}
+j3w1-file-browser .tree [aria-disabled=true]>[data-tree-label] {color:var(--color-text-disabled)}
 
 j3w1-file-browser .tree [aria-selected=true]:focus-visible>[data-tree-label] {outline-color:var(--color-interaction-focus-ring)}
 
diff --git a/packages/ui/dist/copy/file-browser/index.html b/packages/ui/dist/copy/file-browser/index.html
index 62ee99d01..d2110b2c4 100644
--- a/packages/ui/dist/copy/file-browser/index.html
+++ b/packages/ui/dist/copy/file-browser/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>File browser · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-file-browser id="example-file-browser-default"><section class="file-browser" aria-label="Workspace files"><div class="file-browser-locations"><j3w1-tree><ul class="tree" role="tree" aria-label="Locations"><li role="treeitem" tabindex="0" aria-selected="true" data-location="all" id="example-file-browser-default-files-all" data-demo-focus-target=""><span data-tree-label="">All files</span></li><li role="treeitem" tabindex="-1" aria-selected="false" data-location="source" id="example-file-browser-default-files-source"><span data-tree-label="">Source</span></li></ul></j3w1-tree></div><div><label for="example-file-browser-default-files-query">Search files</label><input class="file-browser-control" id="example-file-browser-default-files-query" type="search" data-file-query=""><table><caption>Local file examples</caption><thead><tr><th scope="col">Name</th><th scope="col">Kind</th><th scope="col">Size</th></tr></thead><tbody><tr data-file-id="app" data-location="source"><td><button class="file-browser-control" type="button" data-file-open="app">App.vue</button></td><td>Vue component</td><td>4 KB</td></tr><tr data-file-id="readme" data-location="docs"><td><button class="file-browser-control" type="button" data-file-open="readme">README.md</button></td><td>Documentation</td><td>2 KB</td></tr></tbody></table><p role="status" data-file-status="">2 files</p></div></section></j3w1-file-browser><script type="module" src="./runtime/register/file-browser.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>File browser · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-file-browser id="example-file-browser-default"><section class="file-browser" aria-label="Workspace files"><div class="file-browser-locations"><j3w1-tree><ul class="tree" role="tree" aria-label="Locations"><li role="treeitem" tabindex="0" aria-selected="true" data-location="all" id="example-file-browser-default-files-all" data-demo-focus-target=""><span data-tree-label="">All files</span></li><li role="treeitem" tabindex="-1" aria-selected="false" data-location="source" id="example-file-browser-default-files-source"><span data-tree-label="">Source</span></li></ul></j3w1-tree></div><div><label for="example-file-browser-default-files-query">Search files</label><input class="file-browser-control" id="example-file-browser-default-files-query" type="search" data-file-query=""><table><caption>Local file examples</caption><thead><tr><th scope="col">Name</th><th scope="col">Kind</th><th scope="col">Size</th></tr></thead><tbody><tr data-file-id="app" data-location="source"><td><button class="file-browser-control" type="button" data-file-open="app">App.vue</button></td><td>Vue component</td><td>4 KB</td></tr><tr data-file-id="readme" data-location="docs"><td><button class="file-browser-control" type="button" data-file-open="readme">README.md</button></td><td>Documentation</td><td>2 KB</td></tr></tbody></table><p role="status" data-file-status="">2 files</p></div></section></j3w1-file-browser><script type="module" src="./runtime/register/file-browser.js"></script></body></html>
diff --git a/packages/ui/dist/copy/file-browser/manifest.json b/packages/ui/dist/copy/file-browser/manifest.json
index 9a3b75e6c..d1dc4f590 100644
--- a/packages/ui/dist/copy/file-browser/manifest.json
+++ b/packages/ui/dist/copy/file-browser/manifest.json
@@ -5,32 +5,32 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/file-browser.md",
   "dependencies": [
     "register/file-browser.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "register/tree.js",
     "components/tree.js",
-    "chunks/advanced-DCpe8Ndv.js",
+    "chunks/advanced-CqBF0dSb.js",
     "chunks/markup-DeQ4bEMR.js",
     "components/file-browser.js",
-    "chunks/compositions-d6BkKTYf.js",
-    "chunks/navigation-Dt8ap-9J.js"
+    "chunks/compositions-D57dCsBz.js",
+    "chunks/navigation-BfNzDYZB.js"
   ],
   "files": {
-    "runtime/register/file-browser.js": "sha256-3aIWKczcdziEiQIR4gWOFhsKDAxyRTBDe0i3ynmVXis=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/register/tree.js": "sha256-xY8jWYnbMM8UlE/rdQJsu3/URGPvdUC06U1QmKsmFZQ=",
-    "runtime/components/tree.js": "sha256-1wgpPM9BoC1/T0Or37ZhoekuO2YZ3luXp+DpWKVKBcU=",
-    "runtime/chunks/advanced-DCpe8Ndv.js": "sha256-nr1LFdLYsGeTM4vDyldvuJygRm0F04sYonxatySPu1g=",
+    "runtime/register/file-browser.js": "sha256-6aZxofgHXmaSyrN62aRqrgBNsgXkVl76hwSUGwzsxpM=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/register/tree.js": "sha256-5FC2B/6Dr2k5l/nTb9KKizslYbXmQxe2nEoLuYG6zDg=",
+    "runtime/components/tree.js": "sha256-mYl4DYRuChSjXkRwM7LaJ31aYQZlvzP0RgTYmuNdC9U=",
+    "runtime/chunks/advanced-CqBF0dSb.js": "sha256-ozOzkRU6IeVGBqU3XQ0aLledkAi9vcs8dJdMQutVevs=",
     "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-    "runtime/components/file-browser.js": "sha256-mmsIwfdO+8Xy7vrRylWFBDIwAoWKfkgmb8J17rxDHVs=",
-    "runtime/chunks/compositions-d6BkKTYf.js": "sha256-El5csGAVMeeZWmJ1ztdXW3O3t2AQPrf3YrEOMkGX17c=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-jXsUncF3ZqNTAY54eALB2XHlOFiiumSXp+AnM14Tz1Q=",
+    "runtime/components/file-browser.js": "sha256-rX/Iibk2FD9zA2T7ojRVZgvx3P/v8vt8GOi0X/OOEOY=",
+    "runtime/chunks/compositions-D57dCsBz.js": "sha256-PEpI/vGgdD+LSznUd0iedSxxVE+5QxIO7BGKeQnCRjo=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-UxawfUHhz140JTldQCb8aDbVaLGRxrgbxNCkmCkXxmM=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-TbSmPr7cV31g3WqgPi6LboOGQdmgxz/89Tf/3ld2pfU=",
-    "index.html": "sha256-68VZEF9M4ZFNgI9IZ7yrpktM4/9dA+GR/D6aTo6ocn0=",
+    "index.html": "sha256-ghy6Hidly07DbSb9oIl+42dgKaIRi5V0gVlW8uwsoYs=",
     "README.md": "sha256-pldg7PuzlPHL6J8L3tFRBhM4Mqi8AlcED3V2DXOXZRU="
   }
 }
diff --git a/packages/ui/dist/copy/file-browser/runtime/chunks/advanced-DCpe8Ndv.js b/packages/ui/dist/copy/file-browser/runtime/chunks/advanced-CqBF0dSb.js
similarity index 97%
rename from packages/ui/dist/copy/file-browser/runtime/chunks/advanced-DCpe8Ndv.js
rename to packages/ui/dist/copy/file-browser/runtime/chunks/advanced-CqBF0dSb.js
index 3390a044c..4a5c45981 100644
--- a/packages/ui/dist/copy/file-browser/runtime/chunks/advanced-DCpe8Ndv.js
+++ b/packages/ui/dist/copy/file-browser/runtime/chunks/advanced-CqBF0dSb.js
@@ -1,4 +1,4 @@
-import { d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
+import { c as keyIndex, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
 import { t as IDREFS } from "./markup-DeQ4bEMR.js";
 //#region packages/ui/src/behaviors/advanced.js
 function tree(root, { on }) {
@@ -64,7 +64,12 @@ function tree(root, { on }) {
 			"End"
 		].includes(event.key)) {
 			event.preventDefault();
-			const next = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+			const next = keyIndex({
+				key: event.key,
+				index,
+				length: options.length,
+				wrap: false
+			});
 			rove(options, next);
 		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
 			event.preventDefault();
diff --git a/packages/ui/dist/copy/file-browser/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/file-browser/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/file-browser/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/file-browser/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/file-browser/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/file-browser/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/chunks/compositions-d6BkKTYf.js b/packages/ui/dist/copy/file-browser/runtime/chunks/compositions-D57dCsBz.js
similarity index 94%
rename from packages/ui/dist/chunks/compositions-d6BkKTYf.js
rename to packages/ui/dist/copy/file-browser/runtime/chunks/compositions-D57dCsBz.js
index 7d70275f2..f1da4562e 100644
--- a/packages/ui/dist/chunks/compositions-d6BkKTYf.js
+++ b/packages/ui/dist/copy/file-browser/runtime/chunks/compositions-D57dCsBz.js
@@ -1,5 +1,5 @@
-import { i as all, o as enabled } from "./choice-Db_w_BOQ.js";
-import { i as tabs } from "./navigation-Dt8ap-9J.js";
+import { i as all, o as enabled } from "./choice-B7mo5Eq3.js";
+import { i as tabs } from "./navigation-BfNzDYZB.js";
 //#region packages/ui/src/behaviors/compositions.js
 function fileBrowser(root, { on }) {
 	const query = root.querySelector("[data-file-query]"), rows = all(root, "tr[data-file-id]"), status = root.querySelector("[data-file-status]");
diff --git a/packages/ui/dist/copy/file-browser/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/file-browser/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/file-browser/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/file-browser/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/file-browser/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/file-browser/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/file-browser/runtime/chunks/navigation-BfNzDYZB.js b/packages/ui/dist/copy/file-browser/runtime/chunks/navigation-BfNzDYZB.js
new file mode 100644
index 000000000..db2779553
--- /dev/null
+++ b/packages/ui/dist/copy/file-browser/runtime/chunks/navigation-BfNzDYZB.js
@@ -0,0 +1,377 @@
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/navigation.js
+function tabs(root, { on }, listOverride) {
+	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
+	if (!list) return {};
+	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
+	const select = (id, focus = false) => {
+		const tab = items().find((item) => item.id === id);
+		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
+		all(list, "[role=\"tab\"]").forEach((item) => {
+			item.setAttribute("aria-selected", String(item === tab));
+			item.tabIndex = item === tab ? 0 : -1;
+		});
+		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
+			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
+			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
+		});
+		if (focus) tab.focus();
+		return tab;
+	};
+	const activate = (tab) => {
+		select(tab.id);
+		root.emit("select", {
+			id: tab.id,
+			panelId: tab.getAttribute("aria-controls")
+		});
+	};
+	on(list, "click", (event) => {
+		const tab = event.target.closest("[role=\"tab\"]");
+		if (tab && enabled(tab)) activate(tab);
+	});
+	on(list, "keydown", (event) => {
+		const current = event.target.closest("[role=\"tab\"]"), options = items();
+		if (!current) return;
+		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		let index = options.indexOf(current);
+		if (event.key === next) index++;
+		else if (event.key === previous) index--;
+		else if (event.key === "Home") index = 0;
+		else if (event.key === "End") index = options.length - 1;
+		else if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			activate(current);
+			return;
+		} else return;
+		event.preventDefault();
+		const tab = rove(options, index);
+		if (root.getAttribute("activation") !== "manual") activate(tab);
+	});
+	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
+	if (initial) select(initial.id);
+	return {
+		select,
+		get selectedId() {
+			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
+		},
+		set selectedId(id) {
+			select(id);
+		}
+	};
+}
+function toolbar(root, { on }) {
+	const bar = root.querySelector("[role=\"toolbar\"]");
+	if (!bar) return {};
+	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
+	const initial = controls();
+	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
+	on(bar, "focusin", (event) => {
+		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
+	});
+	on(bar, "keydown", (event) => {
+		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
+		const items = controls(), index = items.indexOf(event.target);
+		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		if (![
+			next,
+			prev,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		event.preventDefault();
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
+	});
+	on(bar, "click", (event) => {
+		const button = event.target.closest("button[aria-pressed]");
+		if (button && enabled(button)) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.dataset.action ?? button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		}
+	});
+	return {};
+}
+function disclosure(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button[aria-controls][aria-expanded]");
+		if (!button || !enabled(button)) return;
+		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
+		if (!target) return;
+		const expanded = button.getAttribute("aria-expanded") !== "true";
+		button.setAttribute("aria-expanded", String(expanded));
+		target.hidden = !expanded;
+		root.emit("toggle", {
+			id: target.id,
+			expanded
+		});
+	});
+	const details = root.querySelector("details");
+	on(details, "toggle", () => root.emit("toggle", {
+		id: details.id,
+		expanded: details.open
+	}));
+	return {
+		get open() {
+			return details?.open ?? false;
+		},
+		set open(value) {
+			if (details) details.open = Boolean(value);
+		}
+	};
+}
+function combobox(root, { on, signal }) {
+	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
+	if (!input || !list) return {};
+	identify(root, list, "options");
+	input.setAttribute("aria-controls", list.id);
+	let active = null, notifying = false;
+	const notify = () => {
+		notifying = true;
+		try {
+			nativeInput(input);
+			nativeInput(input, "change");
+		} finally {
+			notifying = false;
+		}
+	};
+	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
+	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
+	const setActive = (option) => {
+		active = option;
+		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
+		if (option) {
+			input.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		} else input.removeAttribute("aria-activedescendant");
+	};
+	const hide = () => {
+		list.hidden = true;
+		input.setAttribute("aria-expanded", "false");
+		setActive(null);
+	};
+	const filter = (query = input.value) => {
+		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
+		all(list, "[role=\"group\"]").forEach((group) => {
+			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
+		});
+		const empty = root.querySelector(".combobox-empty");
+		if (empty) {
+			empty.hidden = options().length !== 0;
+			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
+		}
+		if (!options().includes(active)) setActive(null);
+	};
+	const show = (allOptions = false) => {
+		if (!enabled(input) || input.readOnly) return;
+		filter(allOptions ? "" : input.value);
+		list.hidden = false;
+		input.setAttribute("aria-expanded", "true");
+		place(input, list);
+	};
+	const choose = (option) => {
+		if (!option || !enabled(option)) return;
+		input.value = option.dataset.value ?? option.textContent.trim();
+		hide();
+		notify();
+		input.focus();
+	};
+	on(input, "input", () => {
+		if (!notifying) {
+			show();
+			announce(root, `${options().length} options available.`);
+		}
+	});
+	on(input, "keydown", (event) => {
+		if (event.key === "Tab") {
+			hide();
+			return;
+		}
+		if (event.key === "Escape") {
+			if (!list.hidden) {
+				hide();
+				event.stopPropagation();
+			} else if (input.value) {
+				input.value = "";
+				notify();
+				event.stopPropagation();
+			}
+			event.preventDefault();
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			hide();
+			return;
+		}
+		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			if (list.hidden) show(true);
+			if (event.altKey) return;
+			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
+			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
+		} else if (event.key === "Enter" && !list.hidden && active) {
+			event.preventDefault();
+			choose(active);
+		}
+	});
+	on(list, "pointerdown", (event) => {
+		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
+	});
+	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
+	on(root.querySelector(".combobox-toggle"), "click", () => {
+		list.hidden ? show(true) : hide();
+		input.focus();
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide();
+	});
+	on(root, "focusout", () => queueMicrotask(() => {
+		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
+	}));
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!list.hidden) place(input, list);
+	});
+	on(root.ownerDocument, "scroll", (event) => {
+		if (!list.hidden && !list.contains(event.target)) place(input, list);
+	}, { capture: true });
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !list.hidden;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		get value() {
+			return input.value;
+		},
+		set value(value) {
+			input.value = String(value ?? "");
+			if (!list.hidden) filter();
+		},
+		cleanup: hide
+	};
+}
+function menu(root, { on }) {
+	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
+	if (!trigger || !main) return {};
+	identify(root, main, "menu");
+	trigger.setAttribute("aria-controls", main.id);
+	const lists = all(root, "[role=\"menu\"]");
+	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
+	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
+	const closeList = (list) => {
+		list.hidden = true;
+		controller(list)?.setAttribute("aria-expanded", "false");
+	};
+	const hide = (focus = true) => {
+		lists.forEach(closeList);
+		if (focus) trigger.focus();
+	};
+	const showList = (list, button, last = false) => {
+		list.hidden = false;
+		button.setAttribute("aria-expanded", "true");
+		place(button, list);
+		rove(items(list), last ? items(list).length - 1 : 0);
+	};
+	const show = () => {
+		if (enabled(trigger)) showList(main, trigger);
+	};
+	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
+	const activate = (item) => {
+		if (!enabled(item)) return;
+		const child = submenu(item);
+		if (child) {
+			showList(child, item);
+			return;
+		}
+		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
+		else hide();
+		root.emit("action", {
+			action: item.dataset.action ?? item.textContent.trim(),
+			checked: item.getAttribute("aria-checked") === "true"
+		});
+	};
+	on(trigger, "click", () => main.hidden ? show() : hide());
+	on(trigger, "keydown", (event) => {
+		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
+			event.preventDefault();
+			showList(main, trigger, event.key === "ArrowUp");
+		}
+	});
+	on(root, "click", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (item) activate(item);
+	});
+	on(root, "keydown", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (!item) return;
+		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
+		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (list !== main) {
+				closeList(list);
+				controller(list)?.focus();
+			} else hide();
+		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
+			event.preventDefault();
+			showList(submenu(item), item);
+		} else if (event.key === "Tab") hide();
+		else if (event.key.length === 1 && /\S/.test(event.key)) {
+			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+			if (found) {
+				event.preventDefault();
+				rove(options, options.indexOf(found));
+			}
+		}
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument, "focusin", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
+	hide(false);
+	return {
+		show,
+		hide,
+		get open() {
+			return !main.hidden;
+		},
+		set open(value) {
+			value ? show() : hide(false);
+		},
+		cleanup() {
+			hide(false);
+		}
+	};
+}
+//#endregion
+export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/file-browser/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/file-browser/runtime/chunks/navigation-Dt8ap-9J.js
deleted file mode 100644
index 81201c8d5..000000000
--- a/packages/ui/dist/copy/file-browser/runtime/chunks/navigation-Dt8ap-9J.js
+++ /dev/null
@@ -1,367 +0,0 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/navigation.js
-function tabs(root, { on }, listOverride) {
-	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
-	if (!list) return {};
-	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
-	const select = (id, focus = false) => {
-		const tab = items().find((item) => item.id === id);
-		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
-		all(list, "[role=\"tab\"]").forEach((item) => {
-			item.setAttribute("aria-selected", String(item === tab));
-			item.tabIndex = item === tab ? 0 : -1;
-		});
-		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
-			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
-			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
-		});
-		if (focus) tab.focus();
-		return tab;
-	};
-	const activate = (tab) => {
-		select(tab.id);
-		root.emit("select", {
-			id: tab.id,
-			panelId: tab.getAttribute("aria-controls")
-		});
-	};
-	on(list, "click", (event) => {
-		const tab = event.target.closest("[role=\"tab\"]");
-		if (tab && enabled(tab)) activate(tab);
-	});
-	on(list, "keydown", (event) => {
-		const current = event.target.closest("[role=\"tab\"]"), options = items();
-		if (!current) return;
-		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		let index = options.indexOf(current);
-		if (event.key === next) index++;
-		else if (event.key === previous) index--;
-		else if (event.key === "Home") index = 0;
-		else if (event.key === "End") index = options.length - 1;
-		else if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			activate(current);
-			return;
-		} else return;
-		event.preventDefault();
-		const tab = rove(options, index);
-		if (root.getAttribute("activation") !== "manual") activate(tab);
-	});
-	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
-	if (initial) select(initial.id);
-	return {
-		select,
-		get selectedId() {
-			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
-		},
-		set selectedId(id) {
-			select(id);
-		}
-	};
-}
-function toolbar(root, { on }) {
-	const bar = root.querySelector("[role=\"toolbar\"]");
-	if (!bar) return {};
-	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
-	const initial = controls();
-	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
-	on(bar, "focusin", (event) => {
-		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
-	});
-	on(bar, "keydown", (event) => {
-		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
-		const items = controls(), index = items.indexOf(event.target);
-		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		if (![
-			next,
-			prev,
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
-	});
-	on(bar, "click", (event) => {
-		const button = event.target.closest("button[aria-pressed]");
-		if (button && enabled(button)) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.dataset.action ?? button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		}
-	});
-	return {};
-}
-function disclosure(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button[aria-controls][aria-expanded]");
-		if (!button || !enabled(button)) return;
-		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
-		if (!target) return;
-		const expanded = button.getAttribute("aria-expanded") !== "true";
-		button.setAttribute("aria-expanded", String(expanded));
-		target.hidden = !expanded;
-		root.emit("toggle", {
-			id: target.id,
-			expanded
-		});
-	});
-	const details = root.querySelector("details");
-	on(details, "toggle", () => root.emit("toggle", {
-		id: details.id,
-		expanded: details.open
-	}));
-	return {
-		get open() {
-			return details?.open ?? false;
-		},
-		set open(value) {
-			if (details) details.open = Boolean(value);
-		}
-	};
-}
-function combobox(root, { on, signal }) {
-	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
-	if (!input || !list) return {};
-	identify(root, list, "options");
-	input.setAttribute("aria-controls", list.id);
-	let active = null, notifying = false;
-	const notify = () => {
-		notifying = true;
-		try {
-			nativeInput(input);
-			nativeInput(input, "change");
-		} finally {
-			notifying = false;
-		}
-	};
-	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
-	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
-	const setActive = (option) => {
-		active = option;
-		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
-		if (option) {
-			input.setAttribute("aria-activedescendant", option.id);
-			option.scrollIntoView({ block: "nearest" });
-		} else input.removeAttribute("aria-activedescendant");
-	};
-	const hide = () => {
-		list.hidden = true;
-		input.setAttribute("aria-expanded", "false");
-		setActive(null);
-	};
-	const filter = (query = input.value) => {
-		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-		all(list, "[role=\"group\"]").forEach((group) => {
-			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
-		});
-		const empty = root.querySelector(".combobox-empty");
-		if (empty) {
-			empty.hidden = options().length !== 0;
-			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
-		}
-		if (!options().includes(active)) setActive(null);
-	};
-	const show = (allOptions = false) => {
-		if (!enabled(input) || input.readOnly) return;
-		filter(allOptions ? "" : input.value);
-		list.hidden = false;
-		input.setAttribute("aria-expanded", "true");
-		place(input, list);
-	};
-	const choose = (option) => {
-		if (!option || !enabled(option)) return;
-		input.value = option.dataset.value ?? option.textContent.trim();
-		hide();
-		notify();
-		input.focus();
-	};
-	on(input, "input", () => {
-		if (!notifying) {
-			show();
-			announce(root, `${options().length} options available.`);
-		}
-	});
-	on(input, "keydown", (event) => {
-		if (event.key === "Tab") {
-			hide();
-			return;
-		}
-		if (event.key === "Escape") {
-			if (!list.hidden) {
-				hide();
-				event.stopPropagation();
-			} else if (input.value) {
-				input.value = "";
-				notify();
-				event.stopPropagation();
-			}
-			event.preventDefault();
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			hide();
-			return;
-		}
-		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-			event.preventDefault();
-			if (list.hidden) show(true);
-			if (event.altKey) return;
-			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
-			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
-		} else if (event.key === "Enter" && !list.hidden && active) {
-			event.preventDefault();
-			choose(active);
-		}
-	});
-	on(list, "pointerdown", (event) => {
-		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
-	});
-	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
-	on(root.querySelector(".combobox-toggle"), "click", () => {
-		list.hidden ? show(true) : hide();
-		input.focus();
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide();
-	});
-	on(root, "focusout", () => queueMicrotask(() => {
-		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
-	}));
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!list.hidden) place(input, list);
-	});
-	on(root.ownerDocument, "scroll", (event) => {
-		if (!list.hidden && !list.contains(event.target)) place(input, list);
-	}, { capture: true });
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !list.hidden;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		get value() {
-			return input.value;
-		},
-		set value(value) {
-			input.value = String(value ?? "");
-			if (!list.hidden) filter();
-		},
-		cleanup: hide
-	};
-}
-function menu(root, { on }) {
-	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
-	if (!trigger || !main) return {};
-	identify(root, main, "menu");
-	trigger.setAttribute("aria-controls", main.id);
-	const lists = all(root, "[role=\"menu\"]");
-	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
-	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
-	const closeList = (list) => {
-		list.hidden = true;
-		controller(list)?.setAttribute("aria-expanded", "false");
-	};
-	const hide = (focus = true) => {
-		lists.forEach(closeList);
-		if (focus) trigger.focus();
-	};
-	const showList = (list, button, last = false) => {
-		list.hidden = false;
-		button.setAttribute("aria-expanded", "true");
-		place(button, list);
-		rove(items(list), last ? items(list).length - 1 : 0);
-	};
-	const show = () => {
-		if (enabled(trigger)) showList(main, trigger);
-	};
-	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
-	const activate = (item) => {
-		if (!enabled(item)) return;
-		const child = submenu(item);
-		if (child) {
-			showList(child, item);
-			return;
-		}
-		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
-		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
-		else hide();
-		root.emit("action", {
-			action: item.dataset.action ?? item.textContent.trim(),
-			checked: item.getAttribute("aria-checked") === "true"
-		});
-	};
-	on(trigger, "click", () => main.hidden ? show() : hide());
-	on(trigger, "keydown", (event) => {
-		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
-			event.preventDefault();
-			showList(main, trigger, event.key === "ArrowUp");
-		}
-	});
-	on(root, "click", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (item) activate(item);
-	});
-	on(root, "keydown", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (!item) return;
-		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
-		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
-			event.preventDefault();
-			event.stopPropagation();
-			if (list !== main) {
-				closeList(list);
-				controller(list)?.focus();
-			} else hide();
-		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
-			event.preventDefault();
-			showList(submenu(item), item);
-		} else if (event.key === "Tab") hide();
-		else if (event.key.length === 1 && /\S/.test(event.key)) {
-			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-			if (found) {
-				event.preventDefault();
-				rove(options, options.indexOf(found));
-			}
-		}
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument, "focusin", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
-	hide(false);
-	return {
-		show,
-		hide,
-		get open() {
-			return !main.hidden;
-		},
-		set open(value) {
-			value ? show() : hide(false);
-		},
-		cleanup() {
-			hide(false);
-		}
-	};
-}
-//#endregion
-export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/file-browser/runtime/components/file-browser.js b/packages/ui/dist/copy/file-browser/runtime/components/file-browser.js
index 17d4a5a03..2c355a89a 100644
--- a/packages/ui/dist/copy/file-browser/runtime/components/file-browser.js
+++ b/packages/ui/dist/copy/file-browser/runtime/components/file-browser.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as fileBrowser } from "../chunks/compositions-d6BkKTYf.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as fileBrowser } from "../chunks/compositions-D57dCsBz.js";
 //#region .cache/ui-build/entries/components/file-browser.js
 var J3w1FileBrowser = class extends J3w1Element {
 	static componentId = "file-browser";
 	static version = "4.0.0";
-	static implementationId = "sha256-aX7ynrR8fIvhjh+E38lBwgWP8mffpXVi5toiJ1sIa9c=";
+	static implementationId = "sha256-XNnX1ARH1szUReH6kSeTR1njKOACxLiUhBCmo9iNz8s=";
 	static connect = fileBrowser;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/file-browser/runtime/components/tree.js b/packages/ui/dist/copy/file-browser/runtime/components/tree.js
index 8a8288b08..e0f6bd8da 100644
--- a/packages/ui/dist/copy/file-browser/runtime/components/tree.js
+++ b/packages/ui/dist/copy/file-browser/runtime/components/tree.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as tree } from "../chunks/advanced-DCpe8Ndv.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as tree } from "../chunks/advanced-CqBF0dSb.js";
 //#region .cache/ui-build/entries/components/tree.js
 var J3w1Tree = class extends J3w1Element {
 	static componentId = "tree";
 	static version = "4.0.0";
-	static implementationId = "sha256-MaBLx3mLOk+RW8kMweDInlVoWjSFctZly5Jz9BMRFRI=";
+	static implementationId = "sha256-8E6bGMMWEmhgjIAfuDs1+pxcabRicShQao3beIvcNBY=";
 	static connect = tree;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/file-browser/runtime/register/file-browser.js b/packages/ui/dist/copy/file-browser/runtime/register/file-browser.js
index 546633566..6d8b76ed5 100644
--- a/packages/ui/dist/copy/file-browser/runtime/register/file-browser.js
+++ b/packages/ui/dist/copy/file-browser/runtime/register/file-browser.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./tree.js";
 import { J3w1FileBrowser } from "../components/file-browser.js";
 //#region .cache/ui-build/entries/register/file-browser.js
diff --git a/packages/ui/dist/copy/file-browser/runtime/register/tree.js b/packages/ui/dist/copy/file-browser/runtime/register/tree.js
index c6b7d3d39..0ecee9bca 100644
--- a/packages/ui/dist/copy/file-browser/runtime/register/tree.js
+++ b/packages/ui/dist/copy/file-browser/runtime/register/tree.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Tree } from "../components/tree.js";
 //#region .cache/ui-build/entries/register/tree.js
 var element = registerElement("j3w1-tree", J3w1Tree);
diff --git a/packages/ui/dist/copy/file-browser/tokens.css b/packages/ui/dist/copy/file-browser/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/file-browser/tokens.css
+++ b/packages/ui/dist/copy/file-browser/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/file-input/component.css b/packages/ui/dist/copy/file-input/component.css
index 4f85e9867..ce2a49780 100644
--- a/packages/ui/dist/copy/file-input/component.css
+++ b/packages/ui/dist/copy/file-input/component.css
@@ -8,7 +8,7 @@ j3w1-file-input {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-file-input, j3w1-file-input *, j3w1-file-input *::before, j3w1-file-input *::after { box-sizing: border-box; }
-j3w1-file-input button, j3w1-file-input input, j3w1-file-input select, j3w1-file-input textarea { font: inherit; }
+j3w1-file-input :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-file-input ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,192 @@ j3w1-file-input .sr-only {
   border: 0;
 }
 
+j3w1-file-input .button,
+j3w1-file-input .dialog-button,
+j3w1-file-input .empty-state-action,
+j3w1-file-input .file-input-button,
+j3w1-file-input button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-file-input .button,
+j3w1-file-input .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-file-input .button-secondary,
+j3w1-file-input .dialog-button,
+j3w1-file-input .empty-state-action,
+j3w1-file-input .file-input-button,
+j3w1-file-input button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-file-input .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-file-input .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-file-input .button-destructive-filled,
+j3w1-file-input .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-file-input :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-file-input .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-file-input :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-file-input :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-file-input :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-file-input .dialog-button,
+  j3w1-file-input .empty-state-action,
+  j3w1-file-input .file-input-button,
+  j3w1-file-input button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-file-input :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+j3w1-file-input .combobox-label,
+j3w1-file-input .dialog-field-label,
+j3w1-file-input .field-label,
+j3w1-file-input .fieldset-label,
+j3w1-file-input .file-input-label,
+j3w1-file-input .number-field-label,
+j3w1-file-input .search-field-label,
+j3w1-file-input .select-label,
+j3w1-file-input .text-field-label,
+j3w1-file-input .textarea-label,
+j3w1-file-input .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-file-input .combobox-help,
+j3w1-file-input .date-picker-help,
+j3w1-file-input .dialog-field-help,
+j3w1-file-input .fieldset-help,
+j3w1-file-input .file-input-help,
+j3w1-file-input .number-field-help,
+j3w1-file-input .search-field-help,
+j3w1-file-input .select-help,
+j3w1-file-input .text-field-help,
+j3w1-file-input .textarea-help,
+j3w1-file-input .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-file-input .combobox-message,
+j3w1-file-input .date-picker-message,
+j3w1-file-input .file-input-message,
+j3w1-file-input .number-field-message,
+j3w1-file-input .radio-group-message,
+j3w1-file-input .select-message,
+j3w1-file-input .text-field-message,
+j3w1-file-input .textarea-message,
+j3w1-file-input .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-file-input .combobox-root,
+j3w1-file-input .date-picker-root,
+j3w1-file-input .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-file-input .file-input {
   position: relative;
   display: grid;
@@ -34,12 +220,6 @@ j3w1-file-input .file-input {
   color: var(--color-text-default);
 }
 
-j3w1-file-input .file-input-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-file-input .file-input-root {
   position: relative;
   display: flex;
@@ -70,19 +250,6 @@ j3w1-file-input .file-input-native {
   border: 0;
 }
 
-j3w1-file-input .file-input-button {
-  display: inline-flex;
-  align-items: center;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  white-space: nowrap;
-  cursor: pointer;
-}
-
 j3w1-file-input .file-input-status {
   min-width: 0;
   color: var(--color-text-muted);
@@ -119,7 +286,7 @@ j3w1-file-input .file-input-item {
   grid-template-columns: minmax(0, 1fr) auto auto;
   align-items: center;
   column-gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
 }
 
@@ -162,29 +329,6 @@ j3w1-file-input .file-input-error {
   font-size: var(--font-size-ui-sm);
   line-height: var(--font-line-height-ui-sm);
 }
-
-j3w1-file-input .file-input-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-file-input .file-input-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-j3w1-file-input .file-input-button:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-j3w1-file-input .file-input-button:active {
-  background: var(--color-action-secondary-pressed-bg);
-  border-color: var(--color-border-active);
-}
 j3w1-file-input .file-input-root:has(.file-input-native:focus-visible) .file-input-button {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
@@ -210,9 +354,13 @@ j3w1-file-input .file-input-root:has(.file-input-native[aria-invalid="true"]:foc
   outline-offset: var(--focus-offset-invalid);
 }
 j3w1-file-input .file-input-root:has(.file-input-native:disabled) .file-input-button {
-  background: var(--color-interaction-disabled-bg);
-  border-color: var(--color-border-disabled);
-  color: var(--color-text-disabled);
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
   cursor: not-allowed;
 }
 
@@ -228,14 +376,7 @@ j3w1-file-input .file-input[aria-busy="true"] .file-input-progress {
   display: block;
 }
 
-@media (hover: none) {
-  j3w1-file-input .file-input-button:hover {
-    background: var(--color-action-secondary-bg);
-  }
-}
-
 @media (prefers-reduced-motion: no-preference) {
-  j3w1-file-input .file-input-button,
   j3w1-file-input .file-input-root {
     transition: background-color var(--motion-duration-fast);
   }
diff --git a/packages/ui/dist/copy/file-input/index.html b/packages/ui/dist/copy/file-input/index.html
index a24e5b377..fa847e818 100644
--- a/packages/ui/dist/copy/file-input/index.html
+++ b/packages/ui/dist/copy/file-input/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>File input · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-file-input id="example-file-input-default"><div class="file-input">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>File input · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-file-input id="example-file-input-default"><div class="file-input">
   <label class="file-input-label" for="example-file-input-default-fi-attach">Attachments</label>
   <div class="file-input-root">
     <input class="file-input-native" id="example-file-input-default-fi-attach" type="file" multiple="" aria-describedby="example-file-input-default-fi-attach-help example-file-input-default-fi-attach-message" name="example-file-input-default-fi-attach">
diff --git a/packages/ui/dist/copy/file-input/manifest.json b/packages/ui/dist/copy/file-input/manifest.json
index dc709e031..e2f9a1ee6 100644
--- a/packages/ui/dist/copy/file-input/manifest.json
+++ b/packages/ui/dist/copy/file-input/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/file-input.md",
   "dependencies": [
     "register/file-input.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/file-input.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/file-input.js": "sha256-JVcVdlTDOCB4bLa+Gc4LHWSfojAaR3wRwOBxMeLa8z4=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/file-input.js": "sha256-b5A8PD7vS8/xWNzSdVbtt2pV33CllxtkKwdSPtC1CSI=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-ezg9wydBGR6KpQziZgvoKiTXURNTPkh+aD9h3vFuuW4=",
+    "runtime/register/file-input.js": "sha256-b3BX2Mpd3hOdCnJZepq1gTZKBfvGMgxtEWnrAg8yfHA=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/file-input.js": "sha256-kE0QDQfY2i/MZLrABzvzfCatNUO8IQsU+q/AXBy6hW4=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-r2nu02Ni7aaSzV1vpVpQpVBMSQlq1Vnl3xedr7c6Xl0=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-3MysNuXXyX6HzlWv0wFhnto4CU9Q/n0JHK2wx1ufwbE=",
-    "index.html": "sha256-fBkoQQjmYl2pS2ZhIJZ6zX3QXl6l6HTDfKsrsy4jmb8=",
+    "index.html": "sha256-Mruf4SRnwaZ2RK7LaKRse5q9c4QKhDHgEgCAG4hyL7s=",
     "README.md": "sha256-fT5UasqXVH/Um8vNgVGEXNG0Pk7WZ4Aq+K44FBlAdpk="
   }
 }
diff --git a/packages/ui/dist/copy/file-input/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/file-input/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/file-input/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/file-input/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/file-input/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/file-input/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/file-input/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/file-input/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/file-input/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/file-input/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/file-input/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/file-input/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/file-input/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/file-input/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/file-input/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/file-input/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/file-input/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/file-input/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/file-input/runtime/components/file-input.js b/packages/ui/dist/copy/file-input/runtime/components/file-input.js
index 228c9b229..e90ea78d1 100644
--- a/packages/ui/dist/copy/file-input/runtime/components/file-input.js
+++ b/packages/ui/dist/copy/file-input/runtime/components/file-input.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as fileInput } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as fileInput } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/file-input.js
 var J3w1FileInput = class extends J3w1Element {
 	static componentId = "file-input";
 	static version = "4.0.0";
-	static implementationId = "sha256-m0+3EjPTC3Wr2r8xF2V2Q+38R4z12VAJn9DB7iS0JPc=";
+	static implementationId = "sha256-DYtJ1M3W9zNvFy3MIif27+5jsw2JssfZ5mpXTXwGBCo=";
 	static connect = fileInput;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/file-input/runtime/register/file-input.js b/packages/ui/dist/copy/file-input/runtime/register/file-input.js
index e840437d0..33be9dd6d 100644
--- a/packages/ui/dist/copy/file-input/runtime/register/file-input.js
+++ b/packages/ui/dist/copy/file-input/runtime/register/file-input.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1FileInput } from "../components/file-input.js";
 //#region .cache/ui-build/entries/register/file-input.js
 var element = registerElement("j3w1-file-input", J3w1FileInput);
diff --git a/packages/ui/dist/copy/file-input/tokens.css b/packages/ui/dist/copy/file-input/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/file-input/tokens.css
+++ b/packages/ui/dist/copy/file-input/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/filterable-table/component.css b/packages/ui/dist/copy/filterable-table/component.css
index 0fea97a99..ef665025b 100644
--- a/packages/ui/dist/copy/filterable-table/component.css
+++ b/packages/ui/dist/copy/filterable-table/component.css
@@ -8,7 +8,7 @@ j3w1-filterable-table {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-filterable-table, j3w1-filterable-table *, j3w1-filterable-table *::before, j3w1-filterable-table *::after { box-sizing: border-box; }
-j3w1-filterable-table button, j3w1-filterable-table input, j3w1-filterable-table select, j3w1-filterable-table textarea { font: inherit; }
+j3w1-filterable-table :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-filterable-table ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -80,7 +80,7 @@ j3w1-filterable-table .filterable-table .filterable-table-new {
 j3w1-filterable-table .filterable-table-filters {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
   padding: 0 var(--space-8);
 }
@@ -166,7 +166,7 @@ j3w1-filterable-table .data-table .data-table-header {
   position: relative;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -182,7 +182,7 @@ j3w1-filterable-table .data-table tbody th { color: inherit; font-weight: var(--
 
 j3w1-filterable-table .data-table .data-table-header-select,
 j3w1-filterable-table .data-table .data-table-cell-select {
-  width: var(--density-control-height, 32px);
+  width: var(--density-control-height, 24px);
   padding-inline-end: 0;
   text-align: center;
 }
@@ -197,7 +197,7 @@ j3w1-filterable-table .data-table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -217,8 +217,8 @@ j3w1-filterable-table .data-table-checkbox {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   padding: 0;
   vertical-align: middle;
@@ -251,7 +251,7 @@ j3w1-filterable-table .data-table-select-all[aria-checked="mixed"] .data-table-c
 j3w1-filterable-table .data-table-checkbox:checked::before {
   content: "✓";
   color: var(--color-action-primary-text);
-  font-size: calc(var(--density-icon, 16px) * 0.75);
+  font-size: calc(var(--density-icon, 12px) * 0.75);
   line-height: 1;
 }
 
@@ -267,7 +267,7 @@ j3w1-filterable-table .data-table .data-table-body .data-table-row:first-child {
 
 j3w1-filterable-table .data-table .data-table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -339,7 +339,7 @@ j3w1-filterable-table .data-table .data-table-row[aria-selected="true"]:hover {
 }
 j3w1-filterable-table .data-table .data-table-row[aria-selected="true"]:focus-visible,
 j3w1-filterable-table .data-table .data-table-row:has(.data-table-checkbox:checked):focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-filterable-table .data-table .data-table-header[aria-sort="ascending"] .data-table-sort-glyph,
@@ -409,8 +409,8 @@ j3w1-filterable-table .menu-button {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -459,8 +459,8 @@ j3w1-filterable-table .menu-item {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -476,7 +476,7 @@ j3w1-filterable-table .menu-check {
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-text-bright);
   visibility: hidden;
 }
@@ -518,8 +518,8 @@ j3w1-filterable-table .menu-button:focus-visible {
 }
 
 j3w1-filterable-table .menu-item:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 j3w1-filterable-table .menu-button:focus:not(:focus-visible),
@@ -599,15 +599,15 @@ j3w1-filterable-table .menu-item[aria-disabled="true"]:hover {
 }
 
 j3w1-filterable-table :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-filterable-table .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-filterable-table .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-filterable-table .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-filterable-table .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-filterable-table .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-filterable-table .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-filterable-table .j3w1-temporal :focus-visible,j3w1-filterable-table .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -631,7 +631,7 @@ j3w1-filterable-table .j3w1-calendar [aria-pressed="true"] { background:var(--co
 j3w1-filterable-table .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-filterable-table .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-filterable-table .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-filterable-table .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-filterable-table .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-filterable-table .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-filterable-table .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-filterable-table .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -639,7 +639,7 @@ j3w1-filterable-table .j3w1-choice-trigger:focus-visible,j3w1-filterable-table .
 j3w1-filterable-table .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-filterable-table .j3w1-choice-list[popover] { inset: auto; }
 j3w1-filterable-table .j3w1-choice-list[hidden] { display: none; }
-j3w1-filterable-table .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-filterable-table .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-filterable-table .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-filterable-table .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-filterable-table .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -653,19 +653,79 @@ j3w1-filterable-table .j3w1-choice-error { display: block; color: var(--color-st
 j3w1-filterable-table .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-filterable-table .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-filterable-table :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+
+j3w1-filterable-table .combobox-label,
+j3w1-filterable-table .dialog-field-label,
+j3w1-filterable-table .field-label,
+j3w1-filterable-table .fieldset-label,
+j3w1-filterable-table .file-input-label,
+j3w1-filterable-table .number-field-label,
+j3w1-filterable-table .search-field-label,
+j3w1-filterable-table .select-label,
+j3w1-filterable-table .text-field-label,
+j3w1-filterable-table .textarea-label,
+j3w1-filterable-table .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-filterable-table .combobox-help,
+j3w1-filterable-table .date-picker-help,
+j3w1-filterable-table .dialog-field-help,
+j3w1-filterable-table .fieldset-help,
+j3w1-filterable-table .file-input-help,
+j3w1-filterable-table .number-field-help,
+j3w1-filterable-table .search-field-help,
+j3w1-filterable-table .select-help,
+j3w1-filterable-table .text-field-help,
+j3w1-filterable-table .textarea-help,
+j3w1-filterable-table .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-filterable-table .combobox-message,
+j3w1-filterable-table .date-picker-message,
+j3w1-filterable-table .file-input-message,
+j3w1-filterable-table .number-field-message,
+j3w1-filterable-table .radio-group-message,
+j3w1-filterable-table .select-message,
+j3w1-filterable-table .text-field-message,
+j3w1-filterable-table .textarea-message,
+j3w1-filterable-table .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-filterable-table .combobox-root,
+j3w1-filterable-table .date-picker-root,
+j3w1-filterable-table .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
 
 j3w1-filterable-table .select {
   position: relative;
@@ -676,12 +736,6 @@ j3w1-filterable-table .select {
   color: var(--color-text-default);
 }
 
-j3w1-filterable-table .select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-filterable-table .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -691,7 +745,7 @@ j3w1-filterable-table .select-root {
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -702,8 +756,8 @@ j3w1-filterable-table .select-control {
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -728,8 +782,8 @@ j3w1-filterable-table .select-control optgroup {
 }
 
 j3w1-filterable-table .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 j3w1-filterable-table .select-control optgroup {
@@ -743,7 +797,7 @@ j3w1-filterable-table .select-control option:checked {
 
 j3w1-filterable-table .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -752,21 +806,6 @@ j3w1-filterable-table .select-chevron {
   fill: none;
   pointer-events: none;
 }
-
-j3w1-filterable-table .select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-filterable-table .select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-filterable-table .select-root:hover {
     background: var(--color-interaction-hover-bg);
@@ -860,7 +899,7 @@ j3w1-filterable-table .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -882,7 +921,7 @@ j3w1-filterable-table .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -914,7 +953,7 @@ j3w1-filterable-table .table .table-body .table-row:first-child {
 
 j3w1-filterable-table .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -951,6 +990,21 @@ j3w1-filterable-table .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-filterable-table .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-filterable-table .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-filterable-table .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-filterable-table .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -972,7 +1026,7 @@ j3w1-filterable-table .table-row[aria-selected="true"]:hover {
 }
 j3w1-filterable-table .table-row[aria-selected="true"]:focus-visible,
 j3w1-filterable-table .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-filterable-table .table[data-container-inactive] .table-row[aria-selected="true"] {
@@ -1036,16 +1090,10 @@ j3w1-filterable-table .search-field {
   color: var(--color-text-default);
 }
 
-j3w1-filterable-table .search-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-filterable-table .search-field-root {
   display: flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding-inline-start: var(--space-8);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
@@ -1137,13 +1185,6 @@ j3w1-filterable-table .search-field-kbd {
   line-height: var(--font-line-height-ui-sm);
 }
 
-j3w1-filterable-table .search-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-filterable-table .search-field-status {
   display: none;
   margin: 0;
diff --git a/packages/ui/dist/copy/filterable-table/index.html b/packages/ui/dist/copy/filterable-table/index.html
index e2c584101..0a513c1d0 100644
--- a/packages/ui/dist/copy/filterable-table/index.html
+++ b/packages/ui/dist/copy/filterable-table/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Filterable table · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-filterable-table id="example-filterable-table-default"><section class="filterable-table" aria-label="Project records"><div class="filterable-table-toolbar"><j3w1-search-field><div class="search-field"><label class="search-field-label" for="example-filterable-table-default-records-search">Search projects</label><div class="search-field-root"><input class="search-field-input" id="example-filterable-table-default-records-search" type="search"><button class="search-field-clear" type="button" aria-label="Clear search">Clear</button></div></div></j3w1-search-field><label for="example-filterable-table-default-records-status">Status<select class="select-control" id="example-filterable-table-default-records-status" data-status-filter="" name="example-filterable-table-default-records-status"><option value="all">All statuses</option><option>Ready</option><option>In progress</option><option>Review</option></select></label></div><div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="data-table"><caption class="table-caption">Project records · synthetic fixture</caption><thead class="data-table-head"><tr><th class="data-table-header data-table-header-select" scope="col"><button class="data-table-select-all" type="button" role="checkbox" aria-checked="false" aria-label="Select all rows"><span class="data-table-check-glyph" aria-hidden="true">✓</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Project<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Owner<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Status<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Scope<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th></tr></thead><tbody class="data-table-body"><tr class="data-table-row" id="example-filterable-table-default-record-0" data-status="Ready" aria-selected="false" tabindex="0"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-0" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-0">Atlas library</td><td class="data-table-cell">Avery Kim</td><td class="data-table-cell">Ready</td><td class="data-table-cell">24</td></tr><tr class="data-table-row" id="example-filterable-table-default-record-1" data-status="In progress" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-1" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-1">Orion workspace</td><td class="data-table-cell">Jordan Lee</td><td class="data-table-cell">In progress</td><td class="data-table-cell">12</td></tr><tr class="data-table-row" id="example-filterable-table-default-record-2" data-status="Ready" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-2" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-2">Field notes</td><td class="data-table-cell">Morgan Noor</td><td class="data-table-cell">Ready</td><td class="data-table-cell">38</td></tr><tr class="data-table-row" id="example-filterable-table-default-record-3" data-status="Review" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-3" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-3">Signal monitor</td><td class="data-table-cell">Riley Stone</td><td class="data-table-cell">Review</td><td class="data-table-cell">6</td></tr><tr class="data-table-empty" hidden=""><td class="data-table-empty-cell" colspan="5">No rows match.</td></tr><tr class="data-table-loading" hidden=""><td colspan="5">⋯ Loading rows</td></tr></tbody></table></div><p class="filterable-table-count" role="status" data-table-status=""></p></section></j3w1-filterable-table><script type="module" src="./runtime/register/filterable-table.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Filterable table · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-filterable-table id="example-filterable-table-default"><section class="filterable-table" aria-label="Project records"><div class="filterable-table-toolbar"><j3w1-search-field><div class="search-field"><label class="search-field-label" for="example-filterable-table-default-records-search">Search projects</label><div class="search-field-root"><input class="search-field-input" id="example-filterable-table-default-records-search" type="search"><button class="search-field-clear" type="button" aria-label="Clear search">Clear</button></div></div></j3w1-search-field><label for="example-filterable-table-default-records-status">Status<select class="select-control" id="example-filterable-table-default-records-status" data-status-filter="" name="example-filterable-table-default-records-status"><option value="all">All statuses</option><option>Ready</option><option>In progress</option><option>Review</option></select></label></div><div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="data-table"><caption class="table-caption">Project records · synthetic fixture</caption><thead class="data-table-head"><tr><th class="data-table-header data-table-header-select" scope="col"><button class="data-table-select-all" type="button" role="checkbox" aria-checked="false" aria-label="Select all rows"><span class="data-table-check-glyph" aria-hidden="true">✓</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Project<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Owner<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Status<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="data-table-header" scope="col"><button class="data-table-sort" type="button">Scope<span class="data-table-sort-glyph" aria-hidden="true">↕</span></button></th></tr></thead><tbody class="data-table-body"><tr class="data-table-row" id="example-filterable-table-default-record-0" data-status="Ready" aria-selected="false" tabindex="0"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-0" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-0">Atlas library</td><td class="data-table-cell">Avery Kim</td><td class="data-table-cell">Ready</td><td class="data-table-cell">24</td></tr><tr class="data-table-row" id="example-filterable-table-default-record-1" data-status="In progress" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-1" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-1">Orion workspace</td><td class="data-table-cell">Jordan Lee</td><td class="data-table-cell">In progress</td><td class="data-table-cell">12</td></tr><tr class="data-table-row" id="example-filterable-table-default-record-2" data-status="Ready" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-2" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-2">Field notes</td><td class="data-table-cell">Morgan Noor</td><td class="data-table-cell">Ready</td><td class="data-table-cell">38</td></tr><tr class="data-table-row" id="example-filterable-table-default-record-3" data-status="Review" aria-selected="false" tabindex="-1"><td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="example-filterable-table-default-record-name-3" name="example-filterable-table-default-value"></td><td class="data-table-cell" id="example-filterable-table-default-record-name-3">Signal monitor</td><td class="data-table-cell">Riley Stone</td><td class="data-table-cell">Review</td><td class="data-table-cell">6</td></tr><tr class="data-table-empty" hidden=""><td class="data-table-empty-cell" colspan="5">No rows match.</td></tr><tr class="data-table-loading" hidden=""><td colspan="5">⋯ Loading rows</td></tr></tbody></table></div><p class="filterable-table-count" role="status" data-table-status=""></p></section></j3w1-filterable-table><script type="module" src="./runtime/register/filterable-table.js"></script></body></html>
diff --git a/packages/ui/dist/copy/filterable-table/manifest.json b/packages/ui/dist/copy/filterable-table/manifest.json
index 62392db41..6de3f0773 100644
--- a/packages/ui/dist/copy/filterable-table/manifest.json
+++ b/packages/ui/dist/copy/filterable-table/manifest.json
@@ -5,28 +5,28 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/filterable-table.md",
   "dependencies": [
     "register/filterable-table.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "register/search-field.js",
     "components/search-field.js",
-    "chunks/native-CAzZmDKR.js",
+    "chunks/native-BjBt1sUh.js",
     "components/filterable-table.js",
-    "chunks/tables-B25ydUHs.js"
+    "chunks/tables-Cjr1EIJz.js"
   ],
   "files": {
-    "runtime/register/filterable-table.js": "sha256-4o9WlQbHlOnAg8mdJws9+tapo3wueOwNMacJhswL7Hg=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/register/search-field.js": "sha256-Z6IeX4+LKGVQJUcQGuyUnCBL6ggQSoevMhrj75zYisw=",
-    "runtime/components/search-field.js": "sha256-2ODKfrgzC53SjMT+P7oaRa78AgRY37MG12M7HVRwfQU=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "runtime/components/filterable-table.js": "sha256-1tup9iQXvwHywM5vJL3oiz0gLiDGNw/xjkZ91AA+Sok=",
-    "runtime/chunks/tables-B25ydUHs.js": "sha256-XqRdyfrSS93rVybWHq6a0WhrmZgaboHi5n8ymgwRbM8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-ZpN1xEJy4fV/PBDvH91mkuN2CZqhCUo5wpeCs27jREo=",
+    "runtime/register/filterable-table.js": "sha256-14GtCkn2rDEs/16Zp9P3ejF4+WJRKBEjPP8iHA/QieY=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/register/search-field.js": "sha256-oIExIQ80Xzt1d5Y8KclVl+lAi+cgOMhKMFNPBz8fEXY=",
+    "runtime/components/search-field.js": "sha256-HCnoLO1ZZvDEqeON+Ir7Q+XChuArNr/tJ7H+lnVTJPw=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "runtime/components/filterable-table.js": "sha256-xbo/MykYle7VwG4ArKqnOAwxD6bA5BruTf9Mi33CxnE=",
+    "runtime/chunks/tables-Cjr1EIJz.js": "sha256-K6BF6M6xNawgWdL+NIcBRZmY98j45o69tBI034Ks4Bg=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-YC1B05BSsIggrfF5/xkh1/hc/k4XIxz/QKMVNwcSd/Y=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-3PbF9wWtnKy3q07M9x690D730biEbSwu20wHAcvPPEE=",
-    "index.html": "sha256-61p1J3mpIgWTPXP4+wTHI0p/MffdvGq+yeT7j0urEZA=",
+    "index.html": "sha256-L9dRgFL5Tl9EFw9DuTPQaPstK4H0R/A/bzroaL7tvHk=",
     "README.md": "sha256-eYSWLSbTgjyr+5CUJR+E3qhY267Qh6rmF+5P40UanuU="
   }
 }
diff --git a/packages/ui/dist/copy/filterable-table/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/filterable-table/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/filterable-table/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/filterable-table/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/filterable-table/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/filterable-table/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/filterable-table/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/filterable-table/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/filterable-table/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/filterable-table/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/filterable-table/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/filterable-table/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/filterable-table/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/filterable-table/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/filterable-table/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/filterable-table/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/filterable-table/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/filterable-table/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/pagination/runtime/chunks/tables-B25ydUHs.js b/packages/ui/dist/copy/filterable-table/runtime/chunks/tables-Cjr1EIJz.js
similarity index 96%
rename from packages/ui/dist/copy/pagination/runtime/chunks/tables-B25ydUHs.js
rename to packages/ui/dist/copy/filterable-table/runtime/chunks/tables-Cjr1EIJz.js
index 172bab830..f82aaf25e 100644
--- a/packages/ui/dist/copy/pagination/runtime/chunks/tables-B25ydUHs.js
+++ b/packages/ui/dist/copy/filterable-table/runtime/chunks/tables-Cjr1EIJz.js
@@ -1,4 +1,4 @@
-import { d as rove, i as all, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
+import { c as keyIndex, f as rove, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/tables.js
 function table(root, { on }) {
 	const element = root.querySelector("table"), body = element?.tBodies[0];
@@ -106,7 +106,12 @@ function table(root, { on }) {
 			"End"
 		].includes(event.key)) return;
 		event.preventDefault();
-		const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+		const nextIndex = keyIndex({
+			key: event.key,
+			index,
+			length: options.length,
+			wrap: false
+		});
 		const next = rove(options, nextIndex);
 		if (event.shiftKey && selectAll) {
 			anchor ??= row;
diff --git a/packages/ui/dist/copy/filterable-table/runtime/components/filterable-table.js b/packages/ui/dist/copy/filterable-table/runtime/components/filterable-table.js
index fdc624ffe..5eb0b2d55 100644
--- a/packages/ui/dist/copy/filterable-table/runtime/components/filterable-table.js
+++ b/packages/ui/dist/copy/filterable-table/runtime/components/filterable-table.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as table } from "../chunks/tables-B25ydUHs.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as table } from "../chunks/tables-Cjr1EIJz.js";
 //#region .cache/ui-build/entries/components/filterable-table.js
 var J3w1FilterableTable = class extends J3w1Element {
 	static componentId = "filterable-table";
 	static version = "4.0.0";
-	static implementationId = "sha256-X8YqHg+uk9WRKBEGt72ID1ciBCXv0ORCorTI2IiT8v8=";
+	static implementationId = "sha256-SJvvFZ+/THkuQJCx1F2i0vCQ2C54dLton+9ipWE3sS8=";
 	static connect = table;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/filterable-table/runtime/components/search-field.js b/packages/ui/dist/copy/filterable-table/runtime/components/search-field.js
index 4d97313b6..666ca6dde 100644
--- a/packages/ui/dist/copy/filterable-table/runtime/components/search-field.js
+++ b/packages/ui/dist/copy/filterable-table/runtime/components/search-field.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/search-field.js
 var J3w1SearchField = class extends J3w1Element {
 	static componentId = "search-field";
 	static version = "4.0.0";
-	static implementationId = "sha256-1DXqGUME/dceUQ+jjPOv/UDtTubfoV13HCjmaDde06w=";
+	static implementationId = "sha256-nopARV2ViNiuyBqGv6KjxLJ3uaaVqRJ3K7Mgtg/mS7Q=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/filterable-table/runtime/register/filterable-table.js b/packages/ui/dist/copy/filterable-table/runtime/register/filterable-table.js
index 067befcb7..25aeaaee0 100644
--- a/packages/ui/dist/copy/filterable-table/runtime/register/filterable-table.js
+++ b/packages/ui/dist/copy/filterable-table/runtime/register/filterable-table.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./search-field.js";
 import { J3w1FilterableTable } from "../components/filterable-table.js";
 //#region .cache/ui-build/entries/register/filterable-table.js
diff --git a/packages/ui/dist/copy/filterable-table/runtime/register/search-field.js b/packages/ui/dist/copy/filterable-table/runtime/register/search-field.js
index 63da3cd5b..169a29a47 100644
--- a/packages/ui/dist/copy/filterable-table/runtime/register/search-field.js
+++ b/packages/ui/dist/copy/filterable-table/runtime/register/search-field.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1SearchField } from "../components/search-field.js";
 //#region .cache/ui-build/entries/register/search-field.js
 var element = registerElement("j3w1-search-field", J3w1SearchField);
diff --git a/packages/ui/dist/copy/filterable-table/tokens.css b/packages/ui/dist/copy/filterable-table/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/filterable-table/tokens.css
+++ b/packages/ui/dist/copy/filterable-table/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/form-builder/component.css b/packages/ui/dist/copy/form-builder/component.css
index 64ef3f725..543ccd27e 100644
--- a/packages/ui/dist/copy/form-builder/component.css
+++ b/packages/ui/dist/copy/form-builder/component.css
@@ -8,7 +8,7 @@ j3w1-form-builder {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-form-builder, j3w1-form-builder *, j3w1-form-builder *::before, j3w1-form-builder *::after { box-sizing: border-box; }
-j3w1-form-builder button, j3w1-form-builder input, j3w1-form-builder select, j3w1-form-builder textarea { font: inherit; }
+j3w1-form-builder :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-form-builder ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -28,27 +28,24 @@ j3w1-form-builder .sr-only {
 j3w1-form-builder .form-builder { min-inline-size: 0; max-inline-size: calc(var(--font-size-ui-md) * 56); padding: var(--space-16); background: var(--color-surface-default); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-control); }
 j3w1-form-builder .form-builder-status { color: var(--color-text-muted); }
 j3w1-form-builder .form-builder-editor { display: grid; gap: var(--space-8); }
+j3w1-form-builder .form-builder-editor > .button { justify-self: start; }
 j3w1-form-builder .form-builder-editor label { display: grid; gap: var(--space-4); }
 j3w1-form-builder .form-builder-editor :is(input:not([type=checkbox]), textarea, select) { inline-size: 100%; min-inline-size: 0; box-sizing: border-box; background: var(--color-surface-input); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-control); padding: var(--space-8); font: inherit; }
 j3w1-form-builder .form-builder-editor label:has(input[type=checkbox]) { display: flex; }
 j3w1-form-builder .form-builder-list { padding-inline-start: var(--space-24); }
 j3w1-form-builder .form-builder-list li { margin-block: var(--space-16); overflow-wrap: anywhere; }
 
-j3w1-form-builder .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+j3w1-form-builder .button,
+j3w1-form-builder .dialog-button,
+j3w1-form-builder .empty-state-action,
+j3w1-form-builder .file-input-button,
+j3w1-form-builder button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -61,8 +58,23 @@ j3w1-form-builder .button {
   cursor: pointer;
   outline: 0;
 }
+j3w1-form-builder .button,
+j3w1-form-builder .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-j3w1-form-builder .button-secondary {
+j3w1-form-builder .button-secondary,
+j3w1-form-builder .dialog-button,
+j3w1-form-builder .empty-state-action,
+j3w1-form-builder .file-input-button,
+j3w1-form-builder button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -94,7 +106,8 @@ j3w1-form-builder .button-destructive {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-j3w1-form-builder .button-destructive-filled {
+j3w1-form-builder .button-destructive-filled,
+j3w1-form-builder .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -104,6 +117,49 @@ j3w1-form-builder .button-destructive-filled {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  j3w1-form-builder :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-form-builder .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-form-builder :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-form-builder :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-form-builder :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-form-builder .dialog-button,
+  j3w1-form-builder .empty-state-action,
+  j3w1-form-builder .file-input-button,
+  j3w1-form-builder button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-form-builder :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 j3w1-form-builder .button-icon {
   flex: none;
@@ -121,25 +177,6 @@ j3w1-form-builder .button-loading {
 j3w1-form-builder .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-form-builder .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-form-builder .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-form-builder .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-form-builder .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-form-builder .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -151,16 +188,6 @@ j3w1-form-builder .button[aria-busy="true"] .button-icon {
 j3w1-form-builder .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-form-builder .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-form-builder .button {
@@ -169,9 +196,66 @@ j3w1-form-builder .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-form-builder .button:focus-visible {
-    outline-color: Highlight;
-  }
+}
+
+j3w1-form-builder .combobox-label,
+j3w1-form-builder .dialog-field-label,
+j3w1-form-builder .field-label,
+j3w1-form-builder .fieldset-label,
+j3w1-form-builder .file-input-label,
+j3w1-form-builder .number-field-label,
+j3w1-form-builder .search-field-label,
+j3w1-form-builder .select-label,
+j3w1-form-builder .text-field-label,
+j3w1-form-builder .textarea-label,
+j3w1-form-builder .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-form-builder .combobox-help,
+j3w1-form-builder .date-picker-help,
+j3w1-form-builder .dialog-field-help,
+j3w1-form-builder .fieldset-help,
+j3w1-form-builder .file-input-help,
+j3w1-form-builder .number-field-help,
+j3w1-form-builder .search-field-help,
+j3w1-form-builder .select-help,
+j3w1-form-builder .text-field-help,
+j3w1-form-builder .textarea-help,
+j3w1-form-builder .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-form-builder .combobox-message,
+j3w1-form-builder .date-picker-message,
+j3w1-form-builder .file-input-message,
+j3w1-form-builder .number-field-message,
+j3w1-form-builder .radio-group-message,
+j3w1-form-builder .select-message,
+j3w1-form-builder .text-field-message,
+j3w1-form-builder .textarea-message,
+j3w1-form-builder .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-form-builder .combobox-root,
+j3w1-form-builder .date-picker-root,
+j3w1-form-builder .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
 }
 
 j3w1-form-builder .text-field {
@@ -183,12 +267,6 @@ j3w1-form-builder .text-field {
   color: var(--color-text-default);
 }
 
-j3w1-form-builder .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-form-builder .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -198,7 +276,7 @@ j3w1-form-builder .text-field-root {
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -207,7 +285,7 @@ j3w1-form-builder .text-field-root {
 j3w1-form-builder .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -283,21 +361,6 @@ j3w1-form-builder .text-field-loading {
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-j3w1-form-builder .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-form-builder .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-form-builder .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -381,12 +444,6 @@ j3w1-form-builder .textarea {
   color: var(--color-text-default);
 }
 
-j3w1-form-builder .textarea-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-form-builder .textarea-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -404,8 +461,8 @@ j3w1-form-builder .textarea-input {
   display: block;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) * 2);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) * 2);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -435,21 +492,6 @@ j3w1-form-builder .textarea-count {
   line-height: var(--font-line-height-ui-sm);
   font-variant-numeric: tabular-nums;
 }
-
-j3w1-form-builder .textarea-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-form-builder .textarea-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-form-builder .textarea-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -535,15 +577,15 @@ j3w1-form-builder .textarea-root:has(.textarea-input:read-only:focus-visible) {
 }
 
 j3w1-form-builder :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-form-builder :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-form-builder :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-form-builder :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-form-builder :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-form-builder :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-form-builder :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-form-builder :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-form-builder :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-form-builder .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-form-builder .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-form-builder .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-form-builder .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-form-builder .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-form-builder .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-form-builder .j3w1-temporal :focus-visible,j3w1-form-builder .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -567,7 +609,7 @@ j3w1-form-builder .j3w1-calendar [aria-pressed="true"] { background:var(--color-
 j3w1-form-builder .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-form-builder .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-form-builder .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-form-builder .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-form-builder .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-form-builder .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-form-builder .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-form-builder .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -575,7 +617,7 @@ j3w1-form-builder .j3w1-choice-trigger:focus-visible,j3w1-form-builder .j3w1-cho
 j3w1-form-builder .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-form-builder .j3w1-choice-list[popover] { inset: auto; }
 j3w1-form-builder .j3w1-choice-list[hidden] { display: none; }
-j3w1-form-builder .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-form-builder .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-form-builder .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-form-builder .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-form-builder .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -589,19 +631,19 @@ j3w1-form-builder .j3w1-choice-error { display: block; color: var(--color-status
 j3w1-form-builder .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-form-builder .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-form-builder :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
 
 j3w1-form-builder .select {
   position: relative;
@@ -612,12 +654,6 @@ j3w1-form-builder .select {
   color: var(--color-text-default);
 }
 
-j3w1-form-builder .select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-form-builder .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -627,7 +663,7 @@ j3w1-form-builder .select-root {
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -638,8 +674,8 @@ j3w1-form-builder .select-control {
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -664,8 +700,8 @@ j3w1-form-builder .select-control optgroup {
 }
 
 j3w1-form-builder .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 j3w1-form-builder .select-control optgroup {
@@ -679,7 +715,7 @@ j3w1-form-builder .select-control option:checked {
 
 j3w1-form-builder .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -688,21 +724,6 @@ j3w1-form-builder .select-chevron {
   fill: none;
   pointer-events: none;
 }
-
-j3w1-form-builder .select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-form-builder .select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-form-builder .select-root:hover {
     background: var(--color-interaction-hover-bg);
@@ -790,7 +811,7 @@ j3w1-form-builder .checkbox-required {
 
 j3w1-form-builder .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -800,8 +821,8 @@ j3w1-form-builder .checkbox-option {
 
 j3w1-form-builder .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -811,8 +832,8 @@ j3w1-form-builder .checkbox-control > * {
 
 j3w1-form-builder .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -824,8 +845,8 @@ j3w1-form-builder .checkbox-input {
 j3w1-form-builder .checkbox-check,
 j3w1-form-builder .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
@@ -964,7 +985,7 @@ j3w1-form-builder .radio-group-horizontal .radio-group-options {
 
 j3w1-form-builder .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -974,8 +995,8 @@ j3w1-form-builder .radio-group-option {
 
 j3w1-form-builder .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 j3w1-form-builder .radio-group-control > * {
@@ -984,8 +1005,8 @@ j3w1-form-builder .radio-group-control > * {
 
 j3w1-form-builder .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -1007,14 +1028,6 @@ j3w1-form-builder .radio-group-text {
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
-
-j3w1-form-builder .radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-form-builder .radio-group-option:hover .radio-group-input:not(:disabled) {
     background: var(--color-interaction-hover-bg);
@@ -1219,7 +1232,7 @@ j3w1-form-builder .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -1241,7 +1254,7 @@ j3w1-form-builder .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -1273,7 +1286,7 @@ j3w1-form-builder .table .table-body .table-row:first-child {
 
 j3w1-form-builder .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -1310,6 +1323,21 @@ j3w1-form-builder .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-form-builder .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-form-builder .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-form-builder .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-form-builder .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -1331,7 +1359,7 @@ j3w1-form-builder .table-row[aria-selected="true"]:hover {
 }
 j3w1-form-builder .table-row[aria-selected="true"]:focus-visible,
 j3w1-form-builder .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-form-builder .table[data-container-inactive] .table-row[aria-selected="true"] {
@@ -1492,12 +1520,6 @@ j3w1-form-builder .field {
   color: var(--color-text-default);
 }
 
-j3w1-form-builder .field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-form-builder .field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -1510,8 +1532,8 @@ j3w1-form-builder .field-control {
 
 j3w1-form-builder .field-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -1706,6 +1728,9 @@ j3w1-form-builder .form-tool { inline-size: 100%; max-inline-size: calc(var(--fo
 j3w1-form-builder .form-tool[hidden], j3w1-form-builder .form-tool [hidden] { display: none !important; }
 j3w1-form-builder .form-tool fieldset { min-inline-size: 0; }
 j3w1-form-builder .form-tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block: var(--space-16); }
+j3w1-form-builder .admin-form.form-tool form { display: grid; gap: var(--space-16); }
+j3w1-form-builder .admin-form.form-tool .form-tool-actions { margin-block: 0; }
+j3w1-form-builder .admin-form.form-tool > [data-status]:empty { position: absolute; }
 j3w1-form-builder .form-tool-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); border: 0; padding: 0; margin: 0; }
 j3w1-form-builder .form-field-help { color: var(--color-text-muted); margin: 0; font-size: var(--font-size-ui-sm); }
 j3w1-form-builder .form-tool-summary { margin-block: var(--space-4); }
diff --git a/packages/ui/dist/copy/form-builder/element.html b/packages/ui/dist/copy/form-builder/element.html
index c504fbb67..72ad127a6 100644
--- a/packages/ui/dist/copy/form-builder/element.html
+++ b/packages/ui/dist/copy/form-builder/element.html
@@ -1,6 +1,6 @@
 <j3w1-form-builder id="example-form-builder-default"><section class="form-builder form-tool" data-builder="" hidden="" aria-label="Form definition editor">
-<div class="form-builder-editor"><label for="example-form-builder-default-builder-kind">Field type<select id="example-form-builder-default-builder-kind" data-kind="" name="builder-kind"><option value="text">Text</option><option value="textarea">Textarea</option><option value="select">Select</option><option value="checkbox">Checkbox</option><option value="radio">Radio</option></select></label><button class="button" type="button" data-add="">Add field</button><label for="example-form-builder-default-builder-density">Preview density<select id="example-form-builder-default-builder-density" data-density-choice="" name="builder-density"><option value="compact">Compact</option><option value="comfortable">Comfortable</option></select></label></div>
+<div class="form-builder-editor"><label for="example-form-builder-default-builder-kind">Field type<select id="example-form-builder-default-builder-kind" data-kind="" name="builder-kind"><option value="text">Text</option><option value="textarea">Textarea</option><option value="select">Select</option><option value="checkbox">Checkbox</option><option value="radio">Radio</option></select></label><button class="button button-secondary" type="button" data-add="">Add field</button><label for="example-form-builder-default-builder-density">Preview density<select id="example-form-builder-default-builder-density" data-density-choice="" name="builder-density"><option value="compact">Compact</option><option value="comfortable">Comfortable</option></select></label></div>
 <p data-builder-status="" role="status"></p><p data-empty="">No fields yet. Choose a type and add your first field.</p><ol class="form-builder-list" data-field-list=""></ol>
-<form class="form-builder-editor" data-editor="" novalidate="" hidden=""><h2>Edit selected field</h2><label for="example-form-builder-default-builder-label">Field label<input id="example-form-builder-default-builder-label" name="label" maxlength="120" required=""></label><label for="example-form-builder-default-builder-help">Field help<textarea id="example-form-builder-default-builder-help" name="help" maxlength="400"></textarea></label><label for="example-form-builder-default-builder-required"><input id="example-form-builder-default-builder-required" name="required" type="checkbox">Required field</label><label for="example-form-builder-default-builder-options" data-options-label="">Options JSON<textarea id="example-form-builder-default-builder-options" name="options" rows="6" maxlength="65537" spellcheck="false"></textarea></label><p>Edit option IDs and labels as JSON. Keep each ID when changing its label. Select and radio fields need 1–20 options.</p><div class="form-tool-actions"><button class="button" type="submit">Save field definition</button><button class="button button-secondary" type="button" data-cancel="">Cancel edit</button></div></form>
-<h2>Preview</h2><p>Definition changes clear preview values. Review validates required values and choices.</p><div data-preview=""><section class="admin-form form-tool" data-workflow="builder-preview" hidden=""><h2 class="admin-form-title">Try the local workflow</h2><p>Values stay in this page. Reset clears them. No save request is sent.</p><form novalidate=""><div class="alert alert-danger form-tool-summary" data-errors="" role="alert" tabindex="-1" hidden=""></div><fieldset class="form-tool-fields" data-fields="" aria-label="Enter values"></fieldset><div class="form-tool-actions"><button class="button" type="submit" data-event="submit">Review values</button></div></form><table data-review="" class="table" hidden=""></table><p data-status="" role="status" tabindex="-1" id="example-form-builder-default-builder-preview-field-8-workflow-status"></p><div class="form-tool-actions"><button class="button" type="button" data-event="edit" hidden="">Edit values</button><button class="button" type="button" data-event="confirm" hidden="">Simulate save</button><button class="button" type="button" data-event="complete" hidden="">Complete simulation</button><button class="button" type="button" data-event="reset">Reset values</button></div></section></div>
-<h2>Transfer definition</h2><p>Schema version 1 accepts at most 64 KiB and 20 fields. Invalid imports leave the current definition unchanged. Export excludes entered preview values.</p><div class="form-builder-editor"><label for="example-form-builder-default-builder-json">Definition JSON<textarea id="example-form-builder-default-builder-json" data-json="" rows="10" spellcheck="false" maxlength="65537" name="builder-json"></textarea></label></div><div class="form-tool-actions"><button class="button" type="button" data-export="">Show definition JSON</button><button class="button button-secondary" type="button" data-download="">Download definition</button><button class="button button-secondary" type="button" data-import="">Import definition JSON</button><button class="button button-secondary" type="button" data-reset="">Reset builder</button></div></section><p>The bounded form editor requires JavaScript. Its definition is plain JSON with stable field IDs, labels, help, required flags and explicit option IDs.</p></j3w1-form-builder>
+<form class="form-builder-editor" data-editor="" novalidate="" hidden=""><h2>Edit selected field</h2><label for="example-form-builder-default-builder-label">Field label<input id="example-form-builder-default-builder-label" name="label" maxlength="120" required=""></label><label for="example-form-builder-default-builder-help">Field help<textarea id="example-form-builder-default-builder-help" name="help" maxlength="400"></textarea></label><label for="example-form-builder-default-builder-required"><input id="example-form-builder-default-builder-required" name="required" type="checkbox">Required field</label><label for="example-form-builder-default-builder-options" data-options-label="">Options JSON<textarea id="example-form-builder-default-builder-options" name="options" rows="6" maxlength="65537" spellcheck="false"></textarea></label><p>Edit option IDs and labels as JSON. Keep each ID when changing its label. Select and radio fields need 1–20 options.</p><div class="form-tool-actions"><button class="button button-secondary" type="submit">Save field definition</button><button class="button button-secondary" type="button" data-cancel="">Cancel edit</button></div></form>
+<h2>Preview</h2><p>Definition changes clear preview values. Review validates required values and choices.</p><div data-preview=""><section class="admin-form form-tool" data-workflow="builder-preview" hidden=""><h2 class="admin-form-title">Try the local workflow</h2><p>Values stay in this page. Reset clears them. No save request is sent.</p><form novalidate=""><div class="alert alert-danger form-tool-summary" data-errors="" role="alert" tabindex="-1" hidden=""></div><fieldset class="form-tool-fields" data-fields="" aria-label="Enter values"></fieldset><div class="form-tool-actions"><button class="button" type="submit" data-event="submit">Review values</button></div></form><table data-review="" class="table" hidden=""></table><p data-status="" role="status" tabindex="-1" id="example-form-builder-default-builder-preview-field-8-workflow-status"></p><div class="form-tool-actions"><button class="button button-secondary" type="button" data-event="edit" hidden="">Edit values</button><button class="button button-secondary" type="button" data-event="confirm" hidden="">Simulate save</button><button class="button button-secondary" type="button" data-event="complete" hidden="">Complete simulation</button><button class="button button-tertiary" type="button" data-event="reset">Reset values</button></div></section></div>
+<h2>Transfer definition</h2><p>Schema version 1 accepts at most 64 KiB and 20 fields. Invalid imports leave the current definition unchanged. Export excludes entered preview values.</p><div class="form-builder-editor"><label for="example-form-builder-default-builder-json">Definition JSON<textarea id="example-form-builder-default-builder-json" data-json="" rows="10" spellcheck="false" maxlength="65537" name="builder-json"></textarea></label></div><div class="form-tool-actions"><button class="button button-secondary" type="button" data-export="">Show definition JSON</button><button class="button button-secondary" type="button" data-download="">Download definition</button><button class="button button-secondary" type="button" data-import="">Import definition JSON</button><button class="button button-secondary" type="button" data-reset="">Reset builder</button></div></section><p>The bounded form editor requires JavaScript. Its definition is plain JSON with stable field IDs, labels, help, required flags and explicit option IDs.</p></j3w1-form-builder>
diff --git a/packages/ui/dist/copy/form-builder/index.html b/packages/ui/dist/copy/form-builder/index.html
index c00886c5c..4a3146923 100644
--- a/packages/ui/dist/copy/form-builder/index.html
+++ b/packages/ui/dist/copy/form-builder/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Form builder · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-form-builder id="example-form-builder-default"><section class="form-builder form-tool" data-builder="" hidden="" aria-label="Form definition editor">
-<div class="form-builder-editor"><label for="example-form-builder-default-builder-kind">Field type<select id="example-form-builder-default-builder-kind" data-kind="" name="builder-kind"><option value="text">Text</option><option value="textarea">Textarea</option><option value="select">Select</option><option value="checkbox">Checkbox</option><option value="radio">Radio</option></select></label><button class="button" type="button" data-add="">Add field</button><label for="example-form-builder-default-builder-density">Preview density<select id="example-form-builder-default-builder-density" data-density-choice="" name="builder-density"><option value="compact">Compact</option><option value="comfortable">Comfortable</option></select></label></div>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Form builder · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-form-builder id="example-form-builder-default"><section class="form-builder form-tool" data-builder="" hidden="" aria-label="Form definition editor">
+<div class="form-builder-editor"><label for="example-form-builder-default-builder-kind">Field type<select id="example-form-builder-default-builder-kind" data-kind="" name="builder-kind"><option value="text">Text</option><option value="textarea">Textarea</option><option value="select">Select</option><option value="checkbox">Checkbox</option><option value="radio">Radio</option></select></label><button class="button button-secondary" type="button" data-add="">Add field</button><label for="example-form-builder-default-builder-density">Preview density<select id="example-form-builder-default-builder-density" data-density-choice="" name="builder-density"><option value="compact">Compact</option><option value="comfortable">Comfortable</option></select></label></div>
 <p data-builder-status="" role="status"></p><p data-empty="">No fields yet. Choose a type and add your first field.</p><ol class="form-builder-list" data-field-list=""></ol>
-<form class="form-builder-editor" data-editor="" novalidate="" hidden=""><h2>Edit selected field</h2><label for="example-form-builder-default-builder-label">Field label<input id="example-form-builder-default-builder-label" name="label" maxlength="120" required=""></label><label for="example-form-builder-default-builder-help">Field help<textarea id="example-form-builder-default-builder-help" name="help" maxlength="400"></textarea></label><label for="example-form-builder-default-builder-required"><input id="example-form-builder-default-builder-required" name="required" type="checkbox">Required field</label><label for="example-form-builder-default-builder-options" data-options-label="">Options JSON<textarea id="example-form-builder-default-builder-options" name="options" rows="6" maxlength="65537" spellcheck="false"></textarea></label><p>Edit option IDs and labels as JSON. Keep each ID when changing its label. Select and radio fields need 1–20 options.</p><div class="form-tool-actions"><button class="button" type="submit">Save field definition</button><button class="button button-secondary" type="button" data-cancel="">Cancel edit</button></div></form>
-<h2>Preview</h2><p>Definition changes clear preview values. Review validates required values and choices.</p><div data-preview=""><section class="admin-form form-tool" data-workflow="builder-preview" hidden=""><h2 class="admin-form-title">Try the local workflow</h2><p>Values stay in this page. Reset clears them. No save request is sent.</p><form novalidate=""><div class="alert alert-danger form-tool-summary" data-errors="" role="alert" tabindex="-1" hidden=""></div><fieldset class="form-tool-fields" data-fields="" aria-label="Enter values"></fieldset><div class="form-tool-actions"><button class="button" type="submit" data-event="submit">Review values</button></div></form><table data-review="" class="table" hidden=""></table><p data-status="" role="status" tabindex="-1" id="example-form-builder-default-builder-preview-field-8-workflow-status"></p><div class="form-tool-actions"><button class="button" type="button" data-event="edit" hidden="">Edit values</button><button class="button" type="button" data-event="confirm" hidden="">Simulate save</button><button class="button" type="button" data-event="complete" hidden="">Complete simulation</button><button class="button" type="button" data-event="reset">Reset values</button></div></section></div>
-<h2>Transfer definition</h2><p>Schema version 1 accepts at most 64 KiB and 20 fields. Invalid imports leave the current definition unchanged. Export excludes entered preview values.</p><div class="form-builder-editor"><label for="example-form-builder-default-builder-json">Definition JSON<textarea id="example-form-builder-default-builder-json" data-json="" rows="10" spellcheck="false" maxlength="65537" name="builder-json"></textarea></label></div><div class="form-tool-actions"><button class="button" type="button" data-export="">Show definition JSON</button><button class="button button-secondary" type="button" data-download="">Download definition</button><button class="button button-secondary" type="button" data-import="">Import definition JSON</button><button class="button button-secondary" type="button" data-reset="">Reset builder</button></div></section><p>The bounded form editor requires JavaScript. Its definition is plain JSON with stable field IDs, labels, help, required flags and explicit option IDs.</p></j3w1-form-builder><script type="module" src="./runtime/register/form-builder.js"></script></body></html>
+<form class="form-builder-editor" data-editor="" novalidate="" hidden=""><h2>Edit selected field</h2><label for="example-form-builder-default-builder-label">Field label<input id="example-form-builder-default-builder-label" name="label" maxlength="120" required=""></label><label for="example-form-builder-default-builder-help">Field help<textarea id="example-form-builder-default-builder-help" name="help" maxlength="400"></textarea></label><label for="example-form-builder-default-builder-required"><input id="example-form-builder-default-builder-required" name="required" type="checkbox">Required field</label><label for="example-form-builder-default-builder-options" data-options-label="">Options JSON<textarea id="example-form-builder-default-builder-options" name="options" rows="6" maxlength="65537" spellcheck="false"></textarea></label><p>Edit option IDs and labels as JSON. Keep each ID when changing its label. Select and radio fields need 1–20 options.</p><div class="form-tool-actions"><button class="button button-secondary" type="submit">Save field definition</button><button class="button button-secondary" type="button" data-cancel="">Cancel edit</button></div></form>
+<h2>Preview</h2><p>Definition changes clear preview values. Review validates required values and choices.</p><div data-preview=""><section class="admin-form form-tool" data-workflow="builder-preview" hidden=""><h2 class="admin-form-title">Try the local workflow</h2><p>Values stay in this page. Reset clears them. No save request is sent.</p><form novalidate=""><div class="alert alert-danger form-tool-summary" data-errors="" role="alert" tabindex="-1" hidden=""></div><fieldset class="form-tool-fields" data-fields="" aria-label="Enter values"></fieldset><div class="form-tool-actions"><button class="button" type="submit" data-event="submit">Review values</button></div></form><table data-review="" class="table" hidden=""></table><p data-status="" role="status" tabindex="-1" id="example-form-builder-default-builder-preview-field-8-workflow-status"></p><div class="form-tool-actions"><button class="button button-secondary" type="button" data-event="edit" hidden="">Edit values</button><button class="button button-secondary" type="button" data-event="confirm" hidden="">Simulate save</button><button class="button button-secondary" type="button" data-event="complete" hidden="">Complete simulation</button><button class="button button-tertiary" type="button" data-event="reset">Reset values</button></div></section></div>
+<h2>Transfer definition</h2><p>Schema version 1 accepts at most 64 KiB and 20 fields. Invalid imports leave the current definition unchanged. Export excludes entered preview values.</p><div class="form-builder-editor"><label for="example-form-builder-default-builder-json">Definition JSON<textarea id="example-form-builder-default-builder-json" data-json="" rows="10" spellcheck="false" maxlength="65537" name="builder-json"></textarea></label></div><div class="form-tool-actions"><button class="button button-secondary" type="button" data-export="">Show definition JSON</button><button class="button button-secondary" type="button" data-download="">Download definition</button><button class="button button-secondary" type="button" data-import="">Import definition JSON</button><button class="button button-secondary" type="button" data-reset="">Reset builder</button></div></section><p>The bounded form editor requires JavaScript. Its definition is plain JSON with stable field IDs, labels, help, required flags and explicit option IDs.</p></j3w1-form-builder><script type="module" src="./runtime/register/form-builder.js"></script></body></html>
diff --git a/packages/ui/dist/copy/form-builder/manifest.json b/packages/ui/dist/copy/form-builder/manifest.json
index 805c0a843..3b9ed2546 100644
--- a/packages/ui/dist/copy/form-builder/manifest.json
+++ b/packages/ui/dist/copy/form-builder/manifest.json
@@ -5,26 +5,26 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/form-builder.md",
   "dependencies": [
     "register/form-builder.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
-    "chunks/form-builder-Dkweb1xD.js",
-    "chunks/form-builder-EQnl1AaR.js",
-    "chunks/form-workflow-DMGni-Gs.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
+    "chunks/form-builder-BKs59W9y.js",
+    "chunks/form-builder-CqcTkYZe.js",
+    "chunks/form-workflow-BKRLylvq.js",
     "chunks/markup-DeQ4bEMR.js"
   ],
   "files": {
-    "runtime/register/form-builder.js": "sha256-jo5ONsFuzPH0pmoDpmWyq6QVpkKeKDhZYbwW/vKQ+ic=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/chunks/form-builder-Dkweb1xD.js": "sha256-y1g6oI2gMoPy6c5S5Lgoec9Po3ydkEadsbsL5vVWFUI=",
-    "runtime/chunks/form-builder-EQnl1AaR.js": "sha256-lX4d482lke5Pljjn6rKPas9RRdIWgoifB609las09JY=",
-    "runtime/chunks/form-workflow-DMGni-Gs.js": "sha256-g3g/Afxx3XsClDK4ZfvWQjZKprT6z7Qp1lULS48F0rY=",
+    "runtime/register/form-builder.js": "sha256-AH2z8TKkGbsbFMHajeE4JxTg4tjDr5gEOwjyNAIVZvk=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/chunks/form-builder-BKs59W9y.js": "sha256-dY5vxMe1vQGS0OppYA63xRxadXFqVZOczLxh6Cdman8=",
+    "runtime/chunks/form-builder-CqcTkYZe.js": "sha256-kRXlrq4rK0PWiZHwFQSLuZftI0JuCq0ooYIuBhJ3L+M=",
+    "runtime/chunks/form-workflow-BKRLylvq.js": "sha256-LcDxqsGpnid91QErVgWLIaXtB5KQS8Uad6Q2shJ1Ohc=",
     "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-dgVsrgYuHrvBt6OjTg069abl7yU4iwgXOXUw3n9cB7g=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-MnUc6KN0qw+qINoU13CL+UM9TxKE9DfaVaeUs/Fy57E=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
-    "element.html": "sha256-vq61pWv0xeMFu0tTsDtRWWpAr16AFefjpz5JTSyF440=",
-    "index.html": "sha256-v74xLbiCzhGoMsKDM8vIO3nwDmWQJymihSOqXqvPlkk=",
+    "element.html": "sha256-WUjDiy4tZKp/CS/g5I/hIUQY0Mci0zrItPW5k4K7As4=",
+    "index.html": "sha256-640gpCzARRbVwXUct1TM0s5GcegFiYevcWBsg7VSOqI=",
     "README.md": "sha256-MGlPh4CEW6DLecBSj7Ym9ww3NAGe8r5V9uANRpZLY48="
   }
 }
diff --git a/packages/ui/dist/copy/form-builder/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/form-builder/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/form-builder/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/form-builder/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/form-builder/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/form-builder/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/form-builder/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/form-builder/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/form-builder/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/form-builder/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/form-builder/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/form-builder/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-Dkweb1xD.js b/packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-BKs59W9y.js
similarity index 89%
rename from packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-Dkweb1xD.js
rename to packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-BKs59W9y.js
index 18dfbad3c..106281223 100644
--- a/packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-Dkweb1xD.js
+++ b/packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-BKs59W9y.js
@@ -1,5 +1,5 @@
-import { t as J3w1Element } from "./element-C1XeXVYC.js";
-import { t as mountBuilder } from "./form-builder-EQnl1AaR.js";
+import { t as J3w1Element } from "./element-Dovcr9Ky.js";
+import { t as mountBuilder } from "./form-builder-CqcTkYZe.js";
 //#region packages/ui/src/behaviors/form-builder.js
 function formBuilder(root, { signal }) {
 	const editor = root.querySelector("[data-builder]");
@@ -22,7 +22,7 @@ function formBuilder(root, { signal }) {
 var J3w1FormBuilder = class extends J3w1Element {
 	static componentId = "form-builder";
 	static version = "4.0.0";
-	static implementationId = "sha256-QcTsnt2RqgWKuYJuM/x0uqMUtYY2cGEONH+jVvm2nuY=";
+	static implementationId = "sha256-41YE+uuaHQO+zqvZR2V4/ifVHjcZBY/i/HTBt2PoeK0=";
 	static connect = formBuilder;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/chunks/form-builder-EQnl1AaR.js b/packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-CqcTkYZe.js
similarity index 99%
rename from packages/ui/dist/chunks/form-builder-EQnl1AaR.js
rename to packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-CqcTkYZe.js
index bb6438b9f..25321f36f 100644
--- a/packages/ui/dist/chunks/form-builder-EQnl1AaR.js
+++ b/packages/ui/dist/copy/form-builder/runtime/chunks/form-builder-CqcTkYZe.js
@@ -1,4 +1,4 @@
-import { a as FORM_LIMITS, i as FIELD_TYPES, n as emptyValues, r as parseFormSchema, t as mountWorkflow } from "./form-workflow-DMGni-Gs.js";
+import { a as FORM_LIMITS, i as FIELD_TYPES, n as emptyValues, r as parseFormSchema, t as mountWorkflow } from "./form-workflow-BKRLylvq.js";
 //#region scripts/lib/form-builder.mjs
 var createBuilder = (theme) => ({
 	definition: {
@@ -69,7 +69,7 @@ var identity_default = {
 	name: "j3w1-theme",
 	version: "4.0.0",
 	profile: "default",
-	sourceDigest: "sha256-0pGYzXZFMWkGlbzNIlyxfInXr3Pog+Q6PuQTyO1Rbu0="
+	sourceDigest: "sha256-9w2X6Cih03PDyOMVu4XmMrmPqHs2iwGGaq5TvafCIUw="
 };
 //#endregion
 //#region packages/ui/src/internal/form-builder.js
diff --git a/packages/ui/dist/copy/form-builder/runtime/chunks/form-workflow-DMGni-Gs.js b/packages/ui/dist/copy/form-builder/runtime/chunks/form-workflow-BKRLylvq.js
similarity index 99%
rename from packages/ui/dist/copy/form-builder/runtime/chunks/form-workflow-DMGni-Gs.js
rename to packages/ui/dist/copy/form-builder/runtime/chunks/form-workflow-BKRLylvq.js
index cf001c7bc..6ef25ba0b 100644
--- a/packages/ui/dist/copy/form-builder/runtime/chunks/form-workflow-DMGni-Gs.js
+++ b/packages/ui/dist/copy/form-builder/runtime/chunks/form-workflow-BKRLylvq.js
@@ -26157,6 +26157,8 @@ function parseFragment(fragmentContext, html, options) {
 var anchorFor = {
 	verification: (id) => `v-${id}`,
 	component: (id) => `c-${id}`,
+	states: (id) => `${id}-states`,
+	heading: (kind, id, text) => `${kind === "component" ? "c" : "d"}-${id}--${text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")}`,
 	family: (id) => `f-${id}`,
 	doc: (id) => `d-${id}`,
 	decision: (id) => `d-decisions--${id.toLowerCase()}`,
diff --git a/packages/ui/dist/copy/form-builder/runtime/register/form-builder.js b/packages/ui/dist/copy/form-builder/runtime/register/form-builder.js
index a723c3c65..b4b8405d7 100644
--- a/packages/ui/dist/copy/form-builder/runtime/register/form-builder.js
+++ b/packages/ui/dist/copy/form-builder/runtime/register/form-builder.js
@@ -1,5 +1,5 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
-import { t as J3w1FormBuilder } from "../chunks/form-builder-Dkweb1xD.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
+import { t as J3w1FormBuilder } from "../chunks/form-builder-BKs59W9y.js";
 //#region .cache/ui-build/entries/register/form-builder.js
 var element = registerElement("j3w1-form-builder", J3w1FormBuilder);
 //#endregion
diff --git a/packages/ui/dist/copy/form-builder/tokens.css b/packages/ui/dist/copy/form-builder/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/form-builder/tokens.css
+++ b/packages/ui/dist/copy/form-builder/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/i3-window-frame/component.css b/packages/ui/dist/copy/i3-window-frame/component.css
index 7b235db43..18e9d96dd 100644
--- a/packages/ui/dist/copy/i3-window-frame/component.css
+++ b/packages/ui/dist/copy/i3-window-frame/component.css
@@ -8,7 +8,7 @@ j3w1-i3-window-frame {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-i3-window-frame, j3w1-i3-window-frame *, j3w1-i3-window-frame *::before, j3w1-i3-window-frame *::after { box-sizing: border-box; }
-j3w1-i3-window-frame button, j3w1-i3-window-frame input, j3w1-i3-window-frame select, j3w1-i3-window-frame textarea { font: inherit; }
+j3w1-i3-window-frame :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-i3-window-frame ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -98,7 +98,7 @@ j3w1-i3-window-frame .i3-window-frame-workspace:focus-visible {
 }
 
 j3w1-i3-window-frame .i3-window-frame-workspace[aria-selected="true"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 
 j3w1-i3-window-frame .i3-window-frame-workspace:focus:not(:focus-visible) {
@@ -523,6 +523,10 @@ j3w1-i3-window-frame .code-editor-ws {
   color: var(--color-code-whitespace);
 }
 
+j3w1-i3-window-frame .code-editor-ws::before {
+  content: attr(data-whitespace);
+}
+
 j3w1-i3-window-frame .code-editor-fold {
   display: inline-block;
   padding: 0 var(--space-4);
@@ -606,7 +610,7 @@ j3w1-i3-window-frame .tabs {
 
 j3w1-i3-window-frame .tabs-list {
   display: flex;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
@@ -617,8 +621,8 @@ j3w1-i3-window-frame .tabs-list {
 
 j3w1-i3-window-frame .tabs-tab {
   flex: 0 0 auto;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin-bottom: calc(-1 * var(--border-width-default));
   background: transparent;
   border: 0;
diff --git a/packages/ui/dist/copy/i3-window-frame/element.html b/packages/ui/dist/copy/i3-window-frame/element.html
index b3652c670..849c0b872 100644
--- a/packages/ui/dist/copy/i3-window-frame/element.html
+++ b/packages/ui/dist/copy/i3-window-frame/element.html
@@ -33,7 +33,7 @@
 <div class="code-editor" role="textbox" aria-multiline="true" aria-readonly="true" aria-label="title.js, read-only" tabindex="0">
   <pre class="code-editor-pre"><span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">1</span><span class="code-editor-text"><span class="code-editor-cm">// Compose the window title of the focused container.</span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">2</span><span class="code-editor-text"><span class="code-editor-kw">import</span> <span class="code-editor-punct">{</span> <span class="code-editor-type">Container</span> <span class="code-editor-punct">}</span> <span class="code-editor-kw">from</span> <span class="code-editor-str">"./tree.js"</span><span class="code-editor-punct">;</span></span></span>
-<span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">3</span><span class="code-editor-text"><span class="code-editor-kw">const</span> <span class="code-editor-const">MAX_LENGTH</span> <span class="code-editor-op">=</span> <span class="code-editor-num">48</span><span class="code-editor-punct">;</span><span class="code-editor-ws" aria-hidden="true">··</span></span></span>
+<span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">3</span><span class="code-editor-text"><span class="code-editor-kw">const</span> <span class="code-editor-const">MAX_LENGTH</span> <span class="code-editor-op">=</span> <span class="code-editor-num">48</span><span class="code-editor-punct">;</span><span class="code-editor-ws" aria-hidden="true" data-whitespace="··"></span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">4</span><span class="code-editor-text"><span class="code-editor-kw">export</span> <span class="code-editor-kw">function</span> <span class="code-editor-fn">title</span><span class="code-editor-punct code-editor-bracket">(</span><span class="code-editor-var">container</span><span class="code-editor-punct code-editor-bracket">)</span> <span class="code-editor-punct">{</span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">5</span><span class="code-editor-text"><span class="code-editor-indent">  </span><span class="code-editor-kw">const</span> <span class="code-editor-var">name</span> <span class="code-editor-op">=</span> <span class="code-editor-var">container</span><span class="code-editor-punct">.</span><span class="code-editor-prop">name</span> <span class="code-editor-op">??</span> <span class="code-editor-str">"untitled<span class="code-editor-esc">…</span>"</span><span class="code-editor-punct">;</span></span></span>
 <span class="code-editor-line code-editor-line-current"><span class="code-editor-ln" aria-hidden="true">6</span><span class="code-editor-text"><span class="code-editor-indent">  </span><span class="code-editor-kw">let</span> <span class="code-editor-var">label</span> <span class="code-editor-op">=</span> <span class="code-editor-str">`${</span><span class="code-editor-var">name</span><span class="code-editor-str">} (${</span><span class="code-editor-var">container</span><span class="code-editor-punct">.</span><span class="code-editor-prop">children</span><span class="code-editor-punct">.</span><span class="code-editor-prop">length</span><span class="code-editor-str">})`</span><span class="code-editor-punct">;</span><span class="code-editor-caret" aria-hidden="true"></span></span></span>
diff --git a/packages/ui/dist/copy/i3-window-frame/index.html b/packages/ui/dist/copy/i3-window-frame/index.html
index 4d0eca521..a04ad8722 100644
--- a/packages/ui/dist/copy/i3-window-frame/index.html
+++ b/packages/ui/dist/copy/i3-window-frame/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>i3 window frame · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-i3-window-frame id="example-i3-window-frame-default"><div class="i3-window-frame" role="region" aria-label="Workstation, workspace 1: theme, tiled">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>i3 window frame · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-i3-window-frame id="example-i3-window-frame-default"><div class="i3-window-frame" role="region" aria-label="Workstation, workspace 1: theme, tiled">
   <div class="i3-window-frame-bar" role="group" aria-label="i3 bar">
     <div class="i3-window-frame-workspaces" role="tablist" aria-label="Workspaces">
       <button class="i3-window-frame-workspace" type="button" role="tab" aria-selected="true" tabindex="0" id="example-i3-window-frame-default-workspace-tab-0" aria-controls="example-i3-window-frame-default-workspace-panel-0">1:theme</button>
@@ -34,7 +34,7 @@
 <div class="code-editor" role="textbox" aria-multiline="true" aria-readonly="true" aria-label="title.js, read-only" tabindex="0">
   <pre class="code-editor-pre"><span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">1</span><span class="code-editor-text"><span class="code-editor-cm">// Compose the window title of the focused container.</span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">2</span><span class="code-editor-text"><span class="code-editor-kw">import</span> <span class="code-editor-punct">{</span> <span class="code-editor-type">Container</span> <span class="code-editor-punct">}</span> <span class="code-editor-kw">from</span> <span class="code-editor-str">"./tree.js"</span><span class="code-editor-punct">;</span></span></span>
-<span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">3</span><span class="code-editor-text"><span class="code-editor-kw">const</span> <span class="code-editor-const">MAX_LENGTH</span> <span class="code-editor-op">=</span> <span class="code-editor-num">48</span><span class="code-editor-punct">;</span><span class="code-editor-ws" aria-hidden="true">··</span></span></span>
+<span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">3</span><span class="code-editor-text"><span class="code-editor-kw">const</span> <span class="code-editor-const">MAX_LENGTH</span> <span class="code-editor-op">=</span> <span class="code-editor-num">48</span><span class="code-editor-punct">;</span><span class="code-editor-ws" aria-hidden="true" data-whitespace="··"></span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">4</span><span class="code-editor-text"><span class="code-editor-kw">export</span> <span class="code-editor-kw">function</span> <span class="code-editor-fn">title</span><span class="code-editor-punct code-editor-bracket">(</span><span class="code-editor-var">container</span><span class="code-editor-punct code-editor-bracket">)</span> <span class="code-editor-punct">{</span></span></span>
 <span class="code-editor-line"><span class="code-editor-ln" aria-hidden="true">5</span><span class="code-editor-text"><span class="code-editor-indent">  </span><span class="code-editor-kw">const</span> <span class="code-editor-var">name</span> <span class="code-editor-op">=</span> <span class="code-editor-var">container</span><span class="code-editor-punct">.</span><span class="code-editor-prop">name</span> <span class="code-editor-op">??</span> <span class="code-editor-str">"untitled<span class="code-editor-esc">…</span>"</span><span class="code-editor-punct">;</span></span></span>
 <span class="code-editor-line code-editor-line-current"><span class="code-editor-ln" aria-hidden="true">6</span><span class="code-editor-text"><span class="code-editor-indent">  </span><span class="code-editor-kw">let</span> <span class="code-editor-var">label</span> <span class="code-editor-op">=</span> <span class="code-editor-str">`${</span><span class="code-editor-var">name</span><span class="code-editor-str">} (${</span><span class="code-editor-var">container</span><span class="code-editor-punct">.</span><span class="code-editor-prop">children</span><span class="code-editor-punct">.</span><span class="code-editor-prop">length</span><span class="code-editor-str">})`</span><span class="code-editor-punct">;</span><span class="code-editor-caret" aria-hidden="true"></span></span></span>
diff --git a/packages/ui/dist/copy/i3-window-frame/manifest.json b/packages/ui/dist/copy/i3-window-frame/manifest.json
index 049875715..7cd9602ec 100644
--- a/packages/ui/dist/copy/i3-window-frame/manifest.json
+++ b/packages/ui/dist/copy/i3-window-frame/manifest.json
@@ -5,24 +5,24 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/i3-window-frame.md",
   "dependencies": [
     "register/i3-window-frame.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/i3-window-frame.js",
-    "chunks/compositions-d6BkKTYf.js",
-    "chunks/navigation-Dt8ap-9J.js"
+    "chunks/compositions-D57dCsBz.js",
+    "chunks/navigation-BfNzDYZB.js"
   ],
   "files": {
-    "runtime/register/i3-window-frame.js": "sha256-T8BESQEwjGZsf7/+P5mPJcokXWquh+9IX+aeYr2odNE=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/i3-window-frame.js": "sha256-uqfVHNwkr/11a11fshN7f0r/dXipCi1Vfc0AlLb+i9c=",
-    "runtime/chunks/compositions-d6BkKTYf.js": "sha256-El5csGAVMeeZWmJ1ztdXW3O3t2AQPrf3YrEOMkGX17c=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-Yk/0tRkcDttUSZKxyg6O6C9kumrEAGehNElFt382jeA=",
+    "runtime/register/i3-window-frame.js": "sha256-qJqHg9H/tx8mSRirpY3qYPpAbM/tk7akOF7Sb6yIBVw=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/i3-window-frame.js": "sha256-Xeo48w2qLhBiwCVHaA6whyxItZy/aAj1xHVCQHHnGhk=",
+    "runtime/chunks/compositions-D57dCsBz.js": "sha256-PEpI/vGgdD+LSznUd0iedSxxVE+5QxIO7BGKeQnCRjo=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-j6gn6V0mtTIbd0cJHobuNavfKnCi+dJ0Xg8IoZdHp/U=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
-    "element.html": "sha256-nNyvwUVLU3Rdy3x0UcZN+IkCA1+Ot5CVwjUB54GDnq8=",
-    "index.html": "sha256-5VNshBKwk0GCY7ID/iL5fiZjb6VRrIZhEdVK/HjtiK0=",
+    "element.html": "sha256-r16RBHw/9BhmfwHsOtPnFIkDRIuIAmlN+RpR9z4LXMU=",
+    "index.html": "sha256-vsi84+uGu4rv5NlM/V/to85JQlSDYVg0XKREuwBARII=",
     "README.md": "sha256-C0hpJoSU0W6E5VFxM/5nRjno1clSop0NLti9ZjvJiO0="
   }
 }
diff --git a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/file-browser/runtime/chunks/compositions-d6BkKTYf.js b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/compositions-D57dCsBz.js
similarity index 94%
rename from packages/ui/dist/copy/file-browser/runtime/chunks/compositions-d6BkKTYf.js
rename to packages/ui/dist/copy/i3-window-frame/runtime/chunks/compositions-D57dCsBz.js
index 7d70275f2..f1da4562e 100644
--- a/packages/ui/dist/copy/file-browser/runtime/chunks/compositions-d6BkKTYf.js
+++ b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/compositions-D57dCsBz.js
@@ -1,5 +1,5 @@
-import { i as all, o as enabled } from "./choice-Db_w_BOQ.js";
-import { i as tabs } from "./navigation-Dt8ap-9J.js";
+import { i as all, o as enabled } from "./choice-B7mo5Eq3.js";
+import { i as tabs } from "./navigation-BfNzDYZB.js";
 //#region packages/ui/src/behaviors/compositions.js
 function fileBrowser(root, { on }) {
 	const query = root.querySelector("[data-file-query]"), rows = all(root, "tr[data-file-id]"), status = root.querySelector("[data-file-status]");
diff --git a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/navigation-BfNzDYZB.js b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/navigation-BfNzDYZB.js
new file mode 100644
index 000000000..db2779553
--- /dev/null
+++ b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/navigation-BfNzDYZB.js
@@ -0,0 +1,377 @@
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/navigation.js
+function tabs(root, { on }, listOverride) {
+	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
+	if (!list) return {};
+	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
+	const select = (id, focus = false) => {
+		const tab = items().find((item) => item.id === id);
+		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
+		all(list, "[role=\"tab\"]").forEach((item) => {
+			item.setAttribute("aria-selected", String(item === tab));
+			item.tabIndex = item === tab ? 0 : -1;
+		});
+		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
+			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
+			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
+		});
+		if (focus) tab.focus();
+		return tab;
+	};
+	const activate = (tab) => {
+		select(tab.id);
+		root.emit("select", {
+			id: tab.id,
+			panelId: tab.getAttribute("aria-controls")
+		});
+	};
+	on(list, "click", (event) => {
+		const tab = event.target.closest("[role=\"tab\"]");
+		if (tab && enabled(tab)) activate(tab);
+	});
+	on(list, "keydown", (event) => {
+		const current = event.target.closest("[role=\"tab\"]"), options = items();
+		if (!current) return;
+		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		let index = options.indexOf(current);
+		if (event.key === next) index++;
+		else if (event.key === previous) index--;
+		else if (event.key === "Home") index = 0;
+		else if (event.key === "End") index = options.length - 1;
+		else if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			activate(current);
+			return;
+		} else return;
+		event.preventDefault();
+		const tab = rove(options, index);
+		if (root.getAttribute("activation") !== "manual") activate(tab);
+	});
+	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
+	if (initial) select(initial.id);
+	return {
+		select,
+		get selectedId() {
+			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
+		},
+		set selectedId(id) {
+			select(id);
+		}
+	};
+}
+function toolbar(root, { on }) {
+	const bar = root.querySelector("[role=\"toolbar\"]");
+	if (!bar) return {};
+	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
+	const initial = controls();
+	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
+	on(bar, "focusin", (event) => {
+		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
+	});
+	on(bar, "keydown", (event) => {
+		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
+		const items = controls(), index = items.indexOf(event.target);
+		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		if (![
+			next,
+			prev,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		event.preventDefault();
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
+	});
+	on(bar, "click", (event) => {
+		const button = event.target.closest("button[aria-pressed]");
+		if (button && enabled(button)) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.dataset.action ?? button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		}
+	});
+	return {};
+}
+function disclosure(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button[aria-controls][aria-expanded]");
+		if (!button || !enabled(button)) return;
+		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
+		if (!target) return;
+		const expanded = button.getAttribute("aria-expanded") !== "true";
+		button.setAttribute("aria-expanded", String(expanded));
+		target.hidden = !expanded;
+		root.emit("toggle", {
+			id: target.id,
+			expanded
+		});
+	});
+	const details = root.querySelector("details");
+	on(details, "toggle", () => root.emit("toggle", {
+		id: details.id,
+		expanded: details.open
+	}));
+	return {
+		get open() {
+			return details?.open ?? false;
+		},
+		set open(value) {
+			if (details) details.open = Boolean(value);
+		}
+	};
+}
+function combobox(root, { on, signal }) {
+	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
+	if (!input || !list) return {};
+	identify(root, list, "options");
+	input.setAttribute("aria-controls", list.id);
+	let active = null, notifying = false;
+	const notify = () => {
+		notifying = true;
+		try {
+			nativeInput(input);
+			nativeInput(input, "change");
+		} finally {
+			notifying = false;
+		}
+	};
+	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
+	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
+	const setActive = (option) => {
+		active = option;
+		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
+		if (option) {
+			input.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		} else input.removeAttribute("aria-activedescendant");
+	};
+	const hide = () => {
+		list.hidden = true;
+		input.setAttribute("aria-expanded", "false");
+		setActive(null);
+	};
+	const filter = (query = input.value) => {
+		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
+		all(list, "[role=\"group\"]").forEach((group) => {
+			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
+		});
+		const empty = root.querySelector(".combobox-empty");
+		if (empty) {
+			empty.hidden = options().length !== 0;
+			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
+		}
+		if (!options().includes(active)) setActive(null);
+	};
+	const show = (allOptions = false) => {
+		if (!enabled(input) || input.readOnly) return;
+		filter(allOptions ? "" : input.value);
+		list.hidden = false;
+		input.setAttribute("aria-expanded", "true");
+		place(input, list);
+	};
+	const choose = (option) => {
+		if (!option || !enabled(option)) return;
+		input.value = option.dataset.value ?? option.textContent.trim();
+		hide();
+		notify();
+		input.focus();
+	};
+	on(input, "input", () => {
+		if (!notifying) {
+			show();
+			announce(root, `${options().length} options available.`);
+		}
+	});
+	on(input, "keydown", (event) => {
+		if (event.key === "Tab") {
+			hide();
+			return;
+		}
+		if (event.key === "Escape") {
+			if (!list.hidden) {
+				hide();
+				event.stopPropagation();
+			} else if (input.value) {
+				input.value = "";
+				notify();
+				event.stopPropagation();
+			}
+			event.preventDefault();
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			hide();
+			return;
+		}
+		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			if (list.hidden) show(true);
+			if (event.altKey) return;
+			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
+			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
+		} else if (event.key === "Enter" && !list.hidden && active) {
+			event.preventDefault();
+			choose(active);
+		}
+	});
+	on(list, "pointerdown", (event) => {
+		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
+	});
+	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
+	on(root.querySelector(".combobox-toggle"), "click", () => {
+		list.hidden ? show(true) : hide();
+		input.focus();
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide();
+	});
+	on(root, "focusout", () => queueMicrotask(() => {
+		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
+	}));
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!list.hidden) place(input, list);
+	});
+	on(root.ownerDocument, "scroll", (event) => {
+		if (!list.hidden && !list.contains(event.target)) place(input, list);
+	}, { capture: true });
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !list.hidden;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		get value() {
+			return input.value;
+		},
+		set value(value) {
+			input.value = String(value ?? "");
+			if (!list.hidden) filter();
+		},
+		cleanup: hide
+	};
+}
+function menu(root, { on }) {
+	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
+	if (!trigger || !main) return {};
+	identify(root, main, "menu");
+	trigger.setAttribute("aria-controls", main.id);
+	const lists = all(root, "[role=\"menu\"]");
+	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
+	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
+	const closeList = (list) => {
+		list.hidden = true;
+		controller(list)?.setAttribute("aria-expanded", "false");
+	};
+	const hide = (focus = true) => {
+		lists.forEach(closeList);
+		if (focus) trigger.focus();
+	};
+	const showList = (list, button, last = false) => {
+		list.hidden = false;
+		button.setAttribute("aria-expanded", "true");
+		place(button, list);
+		rove(items(list), last ? items(list).length - 1 : 0);
+	};
+	const show = () => {
+		if (enabled(trigger)) showList(main, trigger);
+	};
+	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
+	const activate = (item) => {
+		if (!enabled(item)) return;
+		const child = submenu(item);
+		if (child) {
+			showList(child, item);
+			return;
+		}
+		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
+		else hide();
+		root.emit("action", {
+			action: item.dataset.action ?? item.textContent.trim(),
+			checked: item.getAttribute("aria-checked") === "true"
+		});
+	};
+	on(trigger, "click", () => main.hidden ? show() : hide());
+	on(trigger, "keydown", (event) => {
+		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
+			event.preventDefault();
+			showList(main, trigger, event.key === "ArrowUp");
+		}
+	});
+	on(root, "click", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (item) activate(item);
+	});
+	on(root, "keydown", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (!item) return;
+		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
+		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (list !== main) {
+				closeList(list);
+				controller(list)?.focus();
+			} else hide();
+		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
+			event.preventDefault();
+			showList(submenu(item), item);
+		} else if (event.key === "Tab") hide();
+		else if (event.key.length === 1 && /\S/.test(event.key)) {
+			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+			if (found) {
+				event.preventDefault();
+				rove(options, options.indexOf(found));
+			}
+		}
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument, "focusin", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
+	hide(false);
+	return {
+		show,
+		hide,
+		get open() {
+			return !main.hidden;
+		},
+		set open(value) {
+			value ? show() : hide(false);
+		},
+		cleanup() {
+			hide(false);
+		}
+	};
+}
+//#endregion
+export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/i3-window-frame/runtime/chunks/navigation-Dt8ap-9J.js
deleted file mode 100644
index 81201c8d5..000000000
--- a/packages/ui/dist/copy/i3-window-frame/runtime/chunks/navigation-Dt8ap-9J.js
+++ /dev/null
@@ -1,367 +0,0 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/navigation.js
-function tabs(root, { on }, listOverride) {
-	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
-	if (!list) return {};
-	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
-	const select = (id, focus = false) => {
-		const tab = items().find((item) => item.id === id);
-		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
-		all(list, "[role=\"tab\"]").forEach((item) => {
-			item.setAttribute("aria-selected", String(item === tab));
-			item.tabIndex = item === tab ? 0 : -1;
-		});
-		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
-			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
-			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
-		});
-		if (focus) tab.focus();
-		return tab;
-	};
-	const activate = (tab) => {
-		select(tab.id);
-		root.emit("select", {
-			id: tab.id,
-			panelId: tab.getAttribute("aria-controls")
-		});
-	};
-	on(list, "click", (event) => {
-		const tab = event.target.closest("[role=\"tab\"]");
-		if (tab && enabled(tab)) activate(tab);
-	});
-	on(list, "keydown", (event) => {
-		const current = event.target.closest("[role=\"tab\"]"), options = items();
-		if (!current) return;
-		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		let index = options.indexOf(current);
-		if (event.key === next) index++;
-		else if (event.key === previous) index--;
-		else if (event.key === "Home") index = 0;
-		else if (event.key === "End") index = options.length - 1;
-		else if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			activate(current);
-			return;
-		} else return;
-		event.preventDefault();
-		const tab = rove(options, index);
-		if (root.getAttribute("activation") !== "manual") activate(tab);
-	});
-	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
-	if (initial) select(initial.id);
-	return {
-		select,
-		get selectedId() {
-			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
-		},
-		set selectedId(id) {
-			select(id);
-		}
-	};
-}
-function toolbar(root, { on }) {
-	const bar = root.querySelector("[role=\"toolbar\"]");
-	if (!bar) return {};
-	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
-	const initial = controls();
-	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
-	on(bar, "focusin", (event) => {
-		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
-	});
-	on(bar, "keydown", (event) => {
-		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
-		const items = controls(), index = items.indexOf(event.target);
-		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		if (![
-			next,
-			prev,
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
-	});
-	on(bar, "click", (event) => {
-		const button = event.target.closest("button[aria-pressed]");
-		if (button && enabled(button)) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.dataset.action ?? button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		}
-	});
-	return {};
-}
-function disclosure(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button[aria-controls][aria-expanded]");
-		if (!button || !enabled(button)) return;
-		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
-		if (!target) return;
-		const expanded = button.getAttribute("aria-expanded") !== "true";
-		button.setAttribute("aria-expanded", String(expanded));
-		target.hidden = !expanded;
-		root.emit("toggle", {
-			id: target.id,
-			expanded
-		});
-	});
-	const details = root.querySelector("details");
-	on(details, "toggle", () => root.emit("toggle", {
-		id: details.id,
-		expanded: details.open
-	}));
-	return {
-		get open() {
-			return details?.open ?? false;
-		},
-		set open(value) {
-			if (details) details.open = Boolean(value);
-		}
-	};
-}
-function combobox(root, { on, signal }) {
-	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
-	if (!input || !list) return {};
-	identify(root, list, "options");
-	input.setAttribute("aria-controls", list.id);
-	let active = null, notifying = false;
-	const notify = () => {
-		notifying = true;
-		try {
-			nativeInput(input);
-			nativeInput(input, "change");
-		} finally {
-			notifying = false;
-		}
-	};
-	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
-	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
-	const setActive = (option) => {
-		active = option;
-		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
-		if (option) {
-			input.setAttribute("aria-activedescendant", option.id);
-			option.scrollIntoView({ block: "nearest" });
-		} else input.removeAttribute("aria-activedescendant");
-	};
-	const hide = () => {
-		list.hidden = true;
-		input.setAttribute("aria-expanded", "false");
-		setActive(null);
-	};
-	const filter = (query = input.value) => {
-		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-		all(list, "[role=\"group\"]").forEach((group) => {
-			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
-		});
-		const empty = root.querySelector(".combobox-empty");
-		if (empty) {
-			empty.hidden = options().length !== 0;
-			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
-		}
-		if (!options().includes(active)) setActive(null);
-	};
-	const show = (allOptions = false) => {
-		if (!enabled(input) || input.readOnly) return;
-		filter(allOptions ? "" : input.value);
-		list.hidden = false;
-		input.setAttribute("aria-expanded", "true");
-		place(input, list);
-	};
-	const choose = (option) => {
-		if (!option || !enabled(option)) return;
-		input.value = option.dataset.value ?? option.textContent.trim();
-		hide();
-		notify();
-		input.focus();
-	};
-	on(input, "input", () => {
-		if (!notifying) {
-			show();
-			announce(root, `${options().length} options available.`);
-		}
-	});
-	on(input, "keydown", (event) => {
-		if (event.key === "Tab") {
-			hide();
-			return;
-		}
-		if (event.key === "Escape") {
-			if (!list.hidden) {
-				hide();
-				event.stopPropagation();
-			} else if (input.value) {
-				input.value = "";
-				notify();
-				event.stopPropagation();
-			}
-			event.preventDefault();
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			hide();
-			return;
-		}
-		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-			event.preventDefault();
-			if (list.hidden) show(true);
-			if (event.altKey) return;
-			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
-			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
-		} else if (event.key === "Enter" && !list.hidden && active) {
-			event.preventDefault();
-			choose(active);
-		}
-	});
-	on(list, "pointerdown", (event) => {
-		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
-	});
-	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
-	on(root.querySelector(".combobox-toggle"), "click", () => {
-		list.hidden ? show(true) : hide();
-		input.focus();
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide();
-	});
-	on(root, "focusout", () => queueMicrotask(() => {
-		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
-	}));
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!list.hidden) place(input, list);
-	});
-	on(root.ownerDocument, "scroll", (event) => {
-		if (!list.hidden && !list.contains(event.target)) place(input, list);
-	}, { capture: true });
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !list.hidden;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		get value() {
-			return input.value;
-		},
-		set value(value) {
-			input.value = String(value ?? "");
-			if (!list.hidden) filter();
-		},
-		cleanup: hide
-	};
-}
-function menu(root, { on }) {
-	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
-	if (!trigger || !main) return {};
-	identify(root, main, "menu");
-	trigger.setAttribute("aria-controls", main.id);
-	const lists = all(root, "[role=\"menu\"]");
-	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
-	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
-	const closeList = (list) => {
-		list.hidden = true;
-		controller(list)?.setAttribute("aria-expanded", "false");
-	};
-	const hide = (focus = true) => {
-		lists.forEach(closeList);
-		if (focus) trigger.focus();
-	};
-	const showList = (list, button, last = false) => {
-		list.hidden = false;
-		button.setAttribute("aria-expanded", "true");
-		place(button, list);
-		rove(items(list), last ? items(list).length - 1 : 0);
-	};
-	const show = () => {
-		if (enabled(trigger)) showList(main, trigger);
-	};
-	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
-	const activate = (item) => {
-		if (!enabled(item)) return;
-		const child = submenu(item);
-		if (child) {
-			showList(child, item);
-			return;
-		}
-		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
-		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
-		else hide();
-		root.emit("action", {
-			action: item.dataset.action ?? item.textContent.trim(),
-			checked: item.getAttribute("aria-checked") === "true"
-		});
-	};
-	on(trigger, "click", () => main.hidden ? show() : hide());
-	on(trigger, "keydown", (event) => {
-		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
-			event.preventDefault();
-			showList(main, trigger, event.key === "ArrowUp");
-		}
-	});
-	on(root, "click", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (item) activate(item);
-	});
-	on(root, "keydown", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (!item) return;
-		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
-		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
-			event.preventDefault();
-			event.stopPropagation();
-			if (list !== main) {
-				closeList(list);
-				controller(list)?.focus();
-			} else hide();
-		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
-			event.preventDefault();
-			showList(submenu(item), item);
-		} else if (event.key === "Tab") hide();
-		else if (event.key.length === 1 && /\S/.test(event.key)) {
-			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-			if (found) {
-				event.preventDefault();
-				rove(options, options.indexOf(found));
-			}
-		}
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument, "focusin", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
-	hide(false);
-	return {
-		show,
-		hide,
-		get open() {
-			return !main.hidden;
-		},
-		set open(value) {
-			value ? show() : hide(false);
-		},
-		cleanup() {
-			hide(false);
-		}
-	};
-}
-//#endregion
-export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/i3-window-frame/runtime/components/i3-window-frame.js b/packages/ui/dist/copy/i3-window-frame/runtime/components/i3-window-frame.js
index f7f1bfad9..b22fc628b 100644
--- a/packages/ui/dist/copy/i3-window-frame/runtime/components/i3-window-frame.js
+++ b/packages/ui/dist/copy/i3-window-frame/runtime/components/i3-window-frame.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as windowFrame } from "../chunks/compositions-d6BkKTYf.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as windowFrame } from "../chunks/compositions-D57dCsBz.js";
 //#region .cache/ui-build/entries/components/i3-window-frame.js
 var J3w1I3WindowFrame = class extends J3w1Element {
 	static componentId = "i3-window-frame";
 	static version = "4.0.0";
-	static implementationId = "sha256-Y4Ce7n8VcttdP/24Otj7l0Ls+ShSo3ACSeSkMKfZg4o=";
+	static implementationId = "sha256-aoVPpcLCR1nIgTxPmR2un0VYei4XlfuvYsAk1YW7+mU=";
 	static connect = windowFrame;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/i3-window-frame/runtime/register/i3-window-frame.js b/packages/ui/dist/copy/i3-window-frame/runtime/register/i3-window-frame.js
index dd2360632..75e3eb7d6 100644
--- a/packages/ui/dist/copy/i3-window-frame/runtime/register/i3-window-frame.js
+++ b/packages/ui/dist/copy/i3-window-frame/runtime/register/i3-window-frame.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1I3WindowFrame } from "../components/i3-window-frame.js";
 //#region .cache/ui-build/entries/register/i3-window-frame.js
 var element = registerElement("j3w1-i3-window-frame", J3w1I3WindowFrame);
diff --git a/packages/ui/dist/copy/i3-window-frame/tokens.css b/packages/ui/dist/copy/i3-window-frame/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/i3-window-frame/tokens.css
+++ b/packages/ui/dist/copy/i3-window-frame/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/icon-button/component.css b/packages/ui/dist/copy/icon-button/component.css
index 7c2fe5dd6..cbb520cb4 100644
--- a/packages/ui/dist/copy/icon-button/component.css
+++ b/packages/ui/dist/copy/icon-button/component.css
@@ -8,7 +8,7 @@ j3w1-icon-button {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-icon-button, j3w1-icon-button *, j3w1-icon-button *::before, j3w1-icon-button *::after { box-sizing: border-box; }
-j3w1-icon-button button, j3w1-icon-button input, j3w1-icon-button select, j3w1-icon-button textarea { font: inherit; }
+j3w1-icon-button :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-icon-button ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -29,8 +29,8 @@ j3w1-icon-button .icon-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--density-control-height, 32px);
-  height: var(--density-control-height, 32px);
+  width: var(--density-control-height, 24px);
+  height: var(--density-control-height, 24px);
   padding: 0;
   margin: 0;
   background: var(--color-action-secondary-bg);
@@ -73,7 +73,7 @@ j3w1-icon-button .icon-button[aria-pressed="true"] .icon-button-icon {
   fill: currentColor;
 }
 j3w1-icon-button .icon-button[aria-pressed="true"]:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-icon-button .icon-button:disabled {
diff --git a/packages/ui/dist/copy/icon-button/index.html b/packages/ui/dist/copy/icon-button/index.html
index 823a24c91..1d89f73e4 100644
--- a/packages/ui/dist/copy/icon-button/index.html
+++ b/packages/ui/dist/copy/icon-button/index.html
@@ -1,4 +1,4 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Icon button · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-icon-button id="example-icon-button-default"><button class="icon-button" type="button" aria-label="Close panel">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Icon button · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-icon-button id="example-icon-button-default"><button class="icon-button" type="button" aria-label="Close panel">
   <svg class="icon-button-icon" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9"></path></svg>
 </button></j3w1-icon-button><script type="module" src="./runtime/register/icon-button.js"></script></body></html>
diff --git a/packages/ui/dist/copy/icon-button/manifest.json b/packages/ui/dist/copy/icon-button/manifest.json
index 222e6e228..d2fc5d72f 100644
--- a/packages/ui/dist/copy/icon-button/manifest.json
+++ b/packages/ui/dist/copy/icon-button/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/icon-button.md",
   "dependencies": [
     "register/icon-button.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/icon-button.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/icon-button.js": "sha256-UWU2VaBVj42dfmtJg9c1yLb2JZ0ObB4FemDN0vyV/uM=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/icon-button.js": "sha256-GQlt7gcCt926nsvoxCtYRyCMMgdI9IZNyV0+40gv/RQ=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-oGnsvpT9vCQjmmGSRaHOeQIJDUE5f5LrSWgR9jdM6/s=",
+    "runtime/register/icon-button.js": "sha256-L08i/ocUFPtCTSEsrOlL0bHzGs89QBIj/rBasLRJtLo=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/icon-button.js": "sha256-vf1OEF/kOZCVO/ZtfRZNwQ9lE6RvDSCB/Ra1MK1iFVI=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-il6XyTxz1/FNWyp/lAP2zeoQKrY/yezCXO7+BWH4SLU=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-Zd5z+/mavK2J24Rl+RQLGhMT+nTLwoOf3bAJevwrz7s=",
-    "index.html": "sha256-1y5bo9Aq1K+z6CIM0Ef/YeTqqv1dTsU0UQCeeo8cxrs=",
+    "index.html": "sha256-KThGCU4j/urAhf3dBSdh3EZIfGyU5sUJD2tDkaUj7pU=",
     "README.md": "sha256-kfL9rqvRiTy+cXrhgmDnHSmrAvPR1uA5rKGMQPP1UIM="
   }
 }
diff --git a/packages/ui/dist/copy/icon-button/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/icon-button/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/icon-button/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/icon-button/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/icon-button/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/icon-button/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/icon-button/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/icon-button/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/icon-button/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/icon-button/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/icon-button/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/icon-button/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/icon-button/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/icon-button/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/icon-button/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/icon-button/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/icon-button/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/icon-button/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/icon-button/runtime/components/icon-button.js b/packages/ui/dist/copy/icon-button/runtime/components/icon-button.js
index 7a65f2c9a..1b617c987 100644
--- a/packages/ui/dist/copy/icon-button/runtime/components/icon-button.js
+++ b/packages/ui/dist/copy/icon-button/runtime/components/icon-button.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as actions } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as actions } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/icon-button.js
 var J3w1IconButton = class extends J3w1Element {
 	static componentId = "icon-button";
 	static version = "4.0.0";
-	static implementationId = "sha256-yIIam+ZjRGwxBMpAmgZARlOdFeFJZkhR1zP8PoO2q8g=";
+	static implementationId = "sha256-6B32745m5D4H8EEVZL8U0DDC44RJN37XJIm7LWa43Gg=";
 	static connect = actions;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...[
diff --git a/packages/ui/dist/copy/icon-button/runtime/register/icon-button.js b/packages/ui/dist/copy/icon-button/runtime/register/icon-button.js
index 4a1f9ef47..ffdd0ac88 100644
--- a/packages/ui/dist/copy/icon-button/runtime/register/icon-button.js
+++ b/packages/ui/dist/copy/icon-button/runtime/register/icon-button.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1IconButton } from "../components/icon-button.js";
 //#region .cache/ui-build/entries/register/icon-button.js
 var element = registerElement("j3w1-icon-button", J3w1IconButton);
diff --git a/packages/ui/dist/copy/icon-button/tokens.css b/packages/ui/dist/copy/icon-button/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/icon-button/tokens.css
+++ b/packages/ui/dist/copy/icon-button/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/kbd/component.css b/packages/ui/dist/copy/kbd/component.css
index 7de90e54e..81e2d7cd7 100644
--- a/packages/ui/dist/copy/kbd/component.css
+++ b/packages/ui/dist/copy/kbd/component.css
@@ -8,7 +8,7 @@ j3w1-kbd {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-kbd, j3w1-kbd *, j3w1-kbd *::before, j3w1-kbd *::after { box-sizing: border-box; }
-j3w1-kbd button, j3w1-kbd input, j3w1-kbd select, j3w1-kbd textarea { font: inherit; }
+j3w1-kbd :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-kbd ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,8 @@ j3w1-kbd .sr-only {
   border: 0;
 }
 
-j3w1-kbd .kbd {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-kbd .kbd :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-kbd .kbd {display:inline-block;min-width:1.5em;text-align:center;padding:var(--space-2) var(--space-4);font:inherit;border-bottom-width:var(--border-width-emphasis)}
+j3w1-kbd .kbd {box-sizing:border-box;display:inline-block;gap:var(--space-12);min-width:1.5em;padding:var(--space-2) var(--space-4);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;text-align:center;border-bottom-width:var(--border-width-emphasis)}
+j3w1-kbd .kbd :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 
 j3w1-kbd [hidden] { display: none !important; }
 j3w1-kbd .j3w1-visually-hidden {
diff --git a/packages/ui/dist/copy/kbd/index.html b/packages/ui/dist/copy/kbd/index.html
index 6eb4c6a09..8faf57727 100644
--- a/packages/ui/dist/copy/kbd/index.html
+++ b/packages/ui/dist/copy/kbd/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Keyboard key · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-kbd id="example-kbd-default"><span class="kbd-sequence"><kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">K</kbd></span></j3w1-kbd><script type="module" src="./runtime/register/kbd.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Keyboard key · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-kbd id="example-kbd-default"><span class="kbd-sequence"><kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">K</kbd></span></j3w1-kbd><script type="module" src="./runtime/register/kbd.js"></script></body></html>
diff --git a/packages/ui/dist/copy/kbd/manifest.json b/packages/ui/dist/copy/kbd/manifest.json
index 70b29f167..37887d1a1 100644
--- a/packages/ui/dist/copy/kbd/manifest.json
+++ b/packages/ui/dist/copy/kbd/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/kbd.md",
   "dependencies": [
     "register/kbd.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/kbd.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/kbd.js": "sha256-bIqjf3wmYiE5WXjgu0PbMLOsZ/LIWT+En7xpv6yWDNQ=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/kbd.js": "sha256-xi2+ei38C1TTd2xavWMW/PM7cQTzc0o4g+7LNPNHnUQ=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-sKesLjkvspbpsD6walvgEF0NFv1fsIWXNbBy+hhtAUE=",
+    "runtime/register/kbd.js": "sha256-92LQ/OR8FLn8svoWLL7M3e0cPXvFcgItaJ0rUFKh7E4=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/kbd.js": "sha256-lHOj6iq9s2QEMIGqbh8RGMmnU1sbrGNw4+mbuKuvByQ=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-BOKm1Tw9r1muXSVI33rhSJD46PIEFVs790GKSMxz6a8=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-tpH9QDJi6WP1xXEjkGhicB0miKDe2fe69wAALVp2X5A=",
-    "index.html": "sha256-n95EF5vEOXJJV0vVrIVOke9WC7Ja83CiFAFm4jiOY3w=",
+    "index.html": "sha256-LueXjvAoEkpUVPKmWgpUPrXdj3mYXVoeh7xRosvVy1w=",
     "README.md": "sha256-CY2b+9Xug3mHZLhawZDvq8BFYG/fjfij5F7sNanjAy4="
   }
 }
diff --git a/packages/ui/dist/copy/kbd/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/kbd/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/kbd/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/kbd/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/kbd/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/kbd/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/kbd/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/kbd/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/kbd/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/kbd/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/kbd/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/kbd/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/kbd/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/kbd/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/kbd/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/kbd/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/kbd/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/kbd/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/kbd/runtime/components/kbd.js b/packages/ui/dist/copy/kbd/runtime/components/kbd.js
index 9b1b92534..0556ef474 100644
--- a/packages/ui/dist/copy/kbd/runtime/components/kbd.js
+++ b/packages/ui/dist/copy/kbd/runtime/components/kbd.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/kbd.js
 var J3w1Kbd = class extends J3w1Element {
 	static componentId = "kbd";
 	static version = "4.0.0";
-	static implementationId = "sha256-M5H4/+6leZF7LAC7Shi1RDl/6HP+GYN6gzvNdgAGu0o=";
+	static implementationId = "sha256-/6a09jGbevstnOqzIMGZWFLfMuQtcqnGZ7oWyH64Xdg=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/kbd/runtime/register/kbd.js b/packages/ui/dist/copy/kbd/runtime/register/kbd.js
index eed420027..6ae12a7fc 100644
--- a/packages/ui/dist/copy/kbd/runtime/register/kbd.js
+++ b/packages/ui/dist/copy/kbd/runtime/register/kbd.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Kbd } from "../components/kbd.js";
 //#region .cache/ui-build/entries/register/kbd.js
 var element = registerElement("j3w1-kbd", J3w1Kbd);
diff --git a/packages/ui/dist/copy/kbd/tokens.css b/packages/ui/dist/copy/kbd/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/kbd/tokens.css
+++ b/packages/ui/dist/copy/kbd/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/link/component.css b/packages/ui/dist/copy/link/component.css
index 595a1ce5d..e1dac7fb5 100644
--- a/packages/ui/dist/copy/link/component.css
+++ b/packages/ui/dist/copy/link/component.css
@@ -8,7 +8,7 @@ j3w1-link {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-link, j3w1-link *, j3w1-link *::before, j3w1-link *::after { box-sizing: border-box; }
-j3w1-link button, j3w1-link input, j3w1-link select, j3w1-link textarea { font: inherit; }
+j3w1-link :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-link ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -49,7 +49,7 @@ j3w1-link .link-standalone {
   align-items: center;
   gap: var(--space-4);
   padding: 0 var(--space-4);
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
@@ -63,7 +63,7 @@ j3w1-link .link-icon {
 }
 @media (hover: hover) {
   j3w1-link .link:hover {
-    background: var(--color-interaction-hover-bg-strong);
+    background: var(--color-interaction-hover-bg);
     color: var(--color-text-link-hover);
     text-decoration-color: currentColor;
     text-decoration-thickness: var(--border-width-emphasis);
diff --git a/packages/ui/dist/copy/link/index.html b/packages/ui/dist/copy/link/index.html
index a1324a919..4dafbe998 100644
--- a/packages/ui/dist/copy/link/index.html
+++ b/packages/ui/dist/copy/link/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Link · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-link id="example-link-default"><p class="link-prose">Every value on this page comes from the <a class="link" href="#example-link-default-tokens">token tables</a>, which the exports embed by tag.</p><p id="example-link-default-tokens" tabindex="-1" class="j3w1-example-target">Example destination: tokens</p></j3w1-link><script type="module" src="./runtime/register/link.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Link · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-link id="example-link-default"><p class="link-prose">Every value on this page comes from the <a class="link" href="#example-link-default-tokens">token tables</a>, which the exports embed by tag.</p><p id="example-link-default-tokens" tabindex="-1" class="j3w1-example-target">Example destination: tokens</p></j3w1-link><script type="module" src="./runtime/register/link.js"></script></body></html>
diff --git a/packages/ui/dist/copy/link/manifest.json b/packages/ui/dist/copy/link/manifest.json
index fcd3173f8..ba8b57006 100644
--- a/packages/ui/dist/copy/link/manifest.json
+++ b/packages/ui/dist/copy/link/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/link.md",
   "dependencies": [
     "register/link.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/link.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/link.js": "sha256-sR0lpvEqWio1+xbGZ5p+TKd03qMnXyE+UkbdxPPGD9k=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/link.js": "sha256-WC8yN3SdZF28B84F96AQc4WHvgrfmotEdEXUDdPx+gI=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-bMMi6OLOyxVGAoiDlHUR/PYvzH66VbZ4i/UAzrXw4yo=",
+    "runtime/register/link.js": "sha256-U3xi1OrLtFVeA80lAjw3YJnW9ACONTzsce1B9Xf844w=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/link.js": "sha256-bR26HhC67XHGaYwnQAazew60MupqT70YRgV+2U5TNxA=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-uxvP2GjnvVzGp+CHY0D7UPQ+7qXQiFem1DAnSc7jCyY=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-I9IW2mf0VnX5LtCoHDI29AJHW7PXUxnRReiAbsbd094=",
-    "index.html": "sha256-kh0VS0IbzhJnHVnQwZQ2ZRbX2qADJqm2SjicvR49IB0=",
+    "index.html": "sha256-3ig1s+AQmoMBXGTeRFYZnQvO+kBuTk2gzuIniK+u1Rc=",
     "README.md": "sha256-x8NFY5DSM/rYjOcAeTMFjFuNeI2xoG8yxyGfTnk8/wk="
   }
 }
diff --git a/packages/ui/dist/copy/link/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/link/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/link/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/link/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/link/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/link/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/link/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/link/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/link/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/link/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/link/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/link/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/link/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/link/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/link/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/link/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/link/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/link/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/link/runtime/components/link.js b/packages/ui/dist/copy/link/runtime/components/link.js
index de2420838..2356d4084 100644
--- a/packages/ui/dist/copy/link/runtime/components/link.js
+++ b/packages/ui/dist/copy/link/runtime/components/link.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/link.js
 var J3w1Link = class extends J3w1Element {
 	static componentId = "link";
 	static version = "4.0.0";
-	static implementationId = "sha256-G30Bj9xANI38mlDOkDVPEfBPa0wZWo9ZLpoAHPXMAGE=";
+	static implementationId = "sha256-rEWDiPkjpyMkw7piXIpFnMc4x8xrVQVhLrBLQWgZXRM=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/link/runtime/register/link.js b/packages/ui/dist/copy/link/runtime/register/link.js
index 1ae8adb9e..669ae18ab 100644
--- a/packages/ui/dist/copy/link/runtime/register/link.js
+++ b/packages/ui/dist/copy/link/runtime/register/link.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Link } from "../components/link.js";
 //#region .cache/ui-build/entries/register/link.js
 var element = registerElement("j3w1-link", J3w1Link);
diff --git a/packages/ui/dist/copy/link/tokens.css b/packages/ui/dist/copy/link/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/link/tokens.css
+++ b/packages/ui/dist/copy/link/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/list/component.css b/packages/ui/dist/copy/list/component.css
index 4f55fe324..30ac632c7 100644
--- a/packages/ui/dist/copy/list/component.css
+++ b/packages/ui/dist/copy/list/component.css
@@ -8,7 +8,7 @@ j3w1-list {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-list, j3w1-list *, j3w1-list *::before, j3w1-list *::after { box-sizing: border-box; }
-j3w1-list button, j3w1-list input, j3w1-list select, j3w1-list textarea { font: inherit; }
+j3w1-list :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-list ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -41,8 +41,8 @@ j3w1-list .list-option {
   display: flex;
   align-items: center;
   gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-2) var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-2) var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   border-top: var(--border-width-default) solid var(--color-border-divider);
   color: var(--color-text-default);
@@ -57,7 +57,7 @@ j3w1-list .list-check {
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-interaction-selection-text);
   visibility: hidden;
 }
@@ -104,7 +104,7 @@ j3w1-list .list-option[aria-selected="true"]:hover {
   background: var(--color-interaction-selection-bg);
 }
 j3w1-list .list-option[aria-selected="true"]:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-list .list[data-container-inactive] .list-option[aria-selected="true"] {
diff --git a/packages/ui/dist/copy/list/index.html b/packages/ui/dist/copy/list/index.html
index 50296218b..ec7f75961 100644
--- a/packages/ui/dist/copy/list/index.html
+++ b/packages/ui/dist/copy/list/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>List · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-list id="example-list-single"><ul class="list" role="listbox" aria-label="Profiles">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>List · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-list id="example-list-single"><ul class="list" role="listbox" aria-label="Profiles">
   <li class="list-option" role="option" aria-selected="true" tabindex="0"><span class="list-check" aria-hidden="true">✓</span><span class="list-label">default</span></li>
   <li class="list-option list-option-demo-target" role="option" aria-selected="false" tabindex="-1"><span class="list-check" aria-hidden="true">✓</span><span class="list-label">extended</span></li>
   <li class="list-option" role="option" aria-selected="false" tabindex="-1"><span class="list-check" aria-hidden="true">✓</span><span class="list-label">high-contrast</span></li>
diff --git a/packages/ui/dist/copy/list/manifest.json b/packages/ui/dist/copy/list/manifest.json
index 20cb79ecd..ca9c7a9db 100644
--- a/packages/ui/dist/copy/list/manifest.json
+++ b/packages/ui/dist/copy/list/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/list.md",
   "dependencies": [
     "register/list.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/list.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/list.js": "sha256-wbjYHGmbf46FoJiajI+Z127P5eUpLr9c6BSonN2FqnQ=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/list.js": "sha256-EfhH50w/Jxw1dj4a/Ul3Xi6WmUlbeRhgpAeATkhO8EU=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-MSEasr2r2kyu8iJSxcX+m4nWTD2FHPKwBU7K8T/9844=",
+    "runtime/register/list.js": "sha256-f4HxPopmKcmXd3NOYv8arFYm1XmjhvpF0kbNynVYRUA=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/list.js": "sha256-X5HE772qpMx/n9b3NU6shv9zZWfmY9cjVn/IPAjFFMY=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-rYecTkHR0B1N85CpEe58zzTavkIhRIQVzj50yKfdefA=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-tiKX+fFUPCsBJEryliaQ7y9RhU4zlh8aEqMJ0aSO8Lk=",
-    "index.html": "sha256-sY1ilmVvk6pArKOSGuz/1p4PN883f3mu5PXF1sOLwX4=",
+    "index.html": "sha256-w1eB6AWS6U0cM/ElyxhXOk1yDvmU7RDilyxFWSKCjJg=",
     "README.md": "sha256-lw1NGV62/UGys6imJuVkK5qPyHaJqiOgSEuHCgehwNc="
   }
 }
diff --git a/packages/ui/dist/copy/list/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/list/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/list/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/list/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/list/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/list/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/list/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/list/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/list/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/list/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/list/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/list/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/list/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/list/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/list/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/list/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/list/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/list/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/list/runtime/components/list.js b/packages/ui/dist/copy/list/runtime/components/list.js
index 3e5713699..247cffcc3 100644
--- a/packages/ui/dist/copy/list/runtime/components/list.js
+++ b/packages/ui/dist/copy/list/runtime/components/list.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/list.js
 var J3w1List = class extends J3w1Element {
 	static componentId = "list";
 	static version = "4.0.0";
-	static implementationId = "sha256-bxsrs/DyJ6xpQGoZP+g3PJhsF5XpL6aWGvL7lM0TCNY=";
+	static implementationId = "sha256-14u9zr26qx+pniqBnH8sp+D6R9pyXRKm+KsUR/WnsOU=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/list/runtime/register/list.js b/packages/ui/dist/copy/list/runtime/register/list.js
index 46d02889b..2642fae97 100644
--- a/packages/ui/dist/copy/list/runtime/register/list.js
+++ b/packages/ui/dist/copy/list/runtime/register/list.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1List } from "../components/list.js";
 //#region .cache/ui-build/entries/register/list.js
 var element = registerElement("j3w1-list", J3w1List);
diff --git a/packages/ui/dist/copy/list/tokens.css b/packages/ui/dist/copy/list/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/list/tokens.css
+++ b/packages/ui/dist/copy/list/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/loading-indicator/component.css b/packages/ui/dist/copy/loading-indicator/component.css
index 5a1253df8..9354b4ab1 100644
--- a/packages/ui/dist/copy/loading-indicator/component.css
+++ b/packages/ui/dist/copy/loading-indicator/component.css
@@ -8,7 +8,7 @@ j3w1-loading-indicator {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-loading-indicator, j3w1-loading-indicator *, j3w1-loading-indicator *::before, j3w1-loading-indicator *::after { box-sizing: border-box; }
-j3w1-loading-indicator button, j3w1-loading-indicator input, j3w1-loading-indicator select, j3w1-loading-indicator textarea { font: inherit; }
+j3w1-loading-indicator :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-loading-indicator ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -44,7 +44,7 @@ j3w1-loading-indicator .loading-indicator-block {
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: calc(3 * var(--density-row-height, 36px));
+  min-height: calc(3 * var(--density-row-height, 28px));
   padding: var(--space-16);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-divider);
diff --git a/packages/ui/dist/copy/loading-indicator/index.html b/packages/ui/dist/copy/loading-indicator/index.html
index bbb0d864a..16d00802b 100644
--- a/packages/ui/dist/copy/loading-indicator/index.html
+++ b/packages/ui/dist/copy/loading-indicator/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Loading indicator · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-loading-indicator id="example-loading-indicator-inline"><span class="loading-indicator loading-indicator-inline" role="status" aria-busy="true"><span class="loading-indicator-glyph" aria-hidden="true">⋯</span><span class="loading-indicator-label">Loading fonts</span></span></j3w1-loading-indicator><script type="module" src="./runtime/register/loading-indicator.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Loading indicator · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-loading-indicator id="example-loading-indicator-inline"><span class="loading-indicator loading-indicator-inline" role="status" aria-busy="true"><span class="loading-indicator-glyph" aria-hidden="true">⋯</span><span class="loading-indicator-label">Loading fonts</span></span></j3w1-loading-indicator><script type="module" src="./runtime/register/loading-indicator.js"></script></body></html>
diff --git a/packages/ui/dist/copy/loading-indicator/manifest.json b/packages/ui/dist/copy/loading-indicator/manifest.json
index c14e243d0..f5746e904 100644
--- a/packages/ui/dist/copy/loading-indicator/manifest.json
+++ b/packages/ui/dist/copy/loading-indicator/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/loading-indicator.md",
   "dependencies": [
     "register/loading-indicator.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/loading-indicator.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/loading-indicator.js": "sha256-4wKk+e/O8cCnxAR2RouY4I5/K1UuOcPjh3ehR7I9oqo=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/loading-indicator.js": "sha256-iTQYSJMXD02jZHXKFvaFfVLsSwVgLrG7ERC0uWAqpvU=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-eNbtRNqnJDdDaKs9tYapfgCNRwMffdQ7e2TqjrYuL6w=",
+    "runtime/register/loading-indicator.js": "sha256-HHn/Y10+qdiLQ3DUo5i5OEHDhfg4ViJo8nI4ie7dJps=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/loading-indicator.js": "sha256-Z0q8XmSpQgrwC0AcFNlCQIZSt8tVvZ/ZF6McNG1rtBo=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-ombtuuRs2PXpBfR+/B6paDohN3ODM1V0aNbRSzOcrmQ=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-yiCrGr/OXo7SakIH4qRV3wDHbj09EqyJ2F7eTQHbnbc=",
-    "index.html": "sha256-MGxeLPPCJTIT6qFSP0xS4GBpdzFTGjBojEELvbNO6VY=",
+    "index.html": "sha256-2D4ozePauDWxVekXfRHx66zP4agX8tbRUgjo86Z3WjM=",
     "README.md": "sha256-YVFITjZXVN2sAQCTUcMZO5v0Xsc63owlmsQGMTQ42wY="
   }
 }
diff --git a/packages/ui/dist/copy/loading-indicator/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/loading-indicator/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/loading-indicator/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/loading-indicator/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/loading-indicator/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/loading-indicator/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/loading-indicator/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/loading-indicator/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/loading-indicator/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/loading-indicator/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/loading-indicator/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/loading-indicator/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/loading-indicator/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/loading-indicator/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/loading-indicator/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/loading-indicator/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/loading-indicator/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/loading-indicator/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/loading-indicator/runtime/components/loading-indicator.js b/packages/ui/dist/copy/loading-indicator/runtime/components/loading-indicator.js
index db1fc292b..85ead853a 100644
--- a/packages/ui/dist/copy/loading-indicator/runtime/components/loading-indicator.js
+++ b/packages/ui/dist/copy/loading-indicator/runtime/components/loading-indicator.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/loading-indicator.js
 var J3w1LoadingIndicator = class extends J3w1Element {
 	static componentId = "loading-indicator";
 	static version = "4.0.0";
-	static implementationId = "sha256-oylPiWm24mRL7UT6FnHzCqajisyWBH6qEks6sQ4t3Uc=";
+	static implementationId = "sha256-IeUo78vKcH/jhCptrFf5Js2XH0mNmrbHQA3dBow7Sb8=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/loading-indicator/runtime/register/loading-indicator.js b/packages/ui/dist/copy/loading-indicator/runtime/register/loading-indicator.js
index 20938b029..5e3a0b442 100644
--- a/packages/ui/dist/copy/loading-indicator/runtime/register/loading-indicator.js
+++ b/packages/ui/dist/copy/loading-indicator/runtime/register/loading-indicator.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1LoadingIndicator } from "../components/loading-indicator.js";
 //#region .cache/ui-build/entries/register/loading-indicator.js
 var element = registerElement("j3w1-loading-indicator", J3w1LoadingIndicator);
diff --git a/packages/ui/dist/copy/loading-indicator/tokens.css b/packages/ui/dist/copy/loading-indicator/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/loading-indicator/tokens.css
+++ b/packages/ui/dist/copy/loading-indicator/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/menu/component.css b/packages/ui/dist/copy/menu/component.css
index 633cc4b10..662d11914 100644
--- a/packages/ui/dist/copy/menu/component.css
+++ b/packages/ui/dist/copy/menu/component.css
@@ -8,7 +8,7 @@ j3w1-menu {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-menu, j3w1-menu *, j3w1-menu *::before, j3w1-menu *::after { box-sizing: border-box; }
-j3w1-menu button, j3w1-menu input, j3w1-menu select, j3w1-menu textarea { font: inherit; }
+j3w1-menu :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-menu ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -37,8 +37,8 @@ j3w1-menu .menu-button {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -87,8 +87,8 @@ j3w1-menu .menu-item {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -104,7 +104,7 @@ j3w1-menu .menu-check {
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-text-bright);
   visibility: hidden;
 }
@@ -146,8 +146,8 @@ j3w1-menu .menu-button:focus-visible {
 }
 
 j3w1-menu .menu-item:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 j3w1-menu .menu-button:focus:not(:focus-visible),
diff --git a/packages/ui/dist/copy/menu/index.html b/packages/ui/dist/copy/menu/index.html
index 29c0a0435..69741d43f 100644
--- a/packages/ui/dist/copy/menu/index.html
+++ b/packages/ui/dist/copy/menu/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Menu · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-menu id="example-menu-default"><div class="menu">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Menu · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-menu id="example-menu-default"><div class="menu">
   <button class="menu-button" type="button" id="example-menu-default-menu-file-button" aria-haspopup="menu" aria-expanded="true" aria-controls="example-menu-default-menu-file">File<span class="menu-chevron" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" focusable="false"><path d="M4 6l4 4 4-4"></path></svg></span></button>
   <ul class="menu-list" role="menu" id="example-menu-default-menu-file" aria-labelledby="example-menu-default-menu-file-button">
     <li role="none"><button class="menu-item" role="menuitem" type="button" tabindex="0"><span class="menu-check" aria-hidden="true">✓</span><span class="menu-label">New window</span><span class="menu-shortcut">Mod+Enter</span></button></li>
diff --git a/packages/ui/dist/copy/menu/manifest.json b/packages/ui/dist/copy/menu/manifest.json
index c6ebb52e1..ff2dece12 100644
--- a/packages/ui/dist/copy/menu/manifest.json
+++ b/packages/ui/dist/copy/menu/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/menu.md",
   "dependencies": [
     "register/menu.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/menu.js",
-    "chunks/navigation-Dt8ap-9J.js"
+    "chunks/navigation-BfNzDYZB.js"
   ],
   "files": {
-    "runtime/register/menu.js": "sha256-YX+9ydadaIbkPIBFhLWX4Jv3V9vIl4UY1qolxLGfZUg=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/menu.js": "sha256-AMtJth+M+4jqb8imqdn9VcM3aKvtgCWkPySfsI7htH8=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-SIubQgNKqhuy1abCUQB+rvpnPXZTQ9fiW5Yb6XWT5MQ=",
+    "runtime/register/menu.js": "sha256-6CvU7Rei9lC+olXvluxdbCPqh46GrPSvB2MGiudiMTk=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/menu.js": "sha256-As/aVex/jKXrmY4x/rG0tVMVUij8ZLPXK0kKS4ZBpSQ=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-k4+o5GOHUM88StftYskfdyFUCI7mkb7z/Q98q6IVoLs=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-0SXVO1pxUxzA5mgZzG5YXw21f3G/n81DtP3vy14Nv5M=",
-    "index.html": "sha256-nwGZ4fZm7plv8ayxNa3zbvZ6jTO5Efxv0EvQBeohNN8=",
+    "index.html": "sha256-nXwk+/iADkSMB6qGYcl8yRJh5+nE6XQAdTdECvt4i64=",
     "README.md": "sha256-ICc5PzI3f6/Kpyf9KXWame8aNgGPR8JKtgBhHc9HrsE="
   }
 }
diff --git a/packages/ui/dist/copy/menu/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/menu/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/menu/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/menu/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/menu/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/menu/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/menu/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/menu/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/menu/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/menu/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/menu/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/menu/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/menu/runtime/chunks/navigation-BfNzDYZB.js b/packages/ui/dist/copy/menu/runtime/chunks/navigation-BfNzDYZB.js
new file mode 100644
index 000000000..db2779553
--- /dev/null
+++ b/packages/ui/dist/copy/menu/runtime/chunks/navigation-BfNzDYZB.js
@@ -0,0 +1,377 @@
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/navigation.js
+function tabs(root, { on }, listOverride) {
+	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
+	if (!list) return {};
+	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
+	const select = (id, focus = false) => {
+		const tab = items().find((item) => item.id === id);
+		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
+		all(list, "[role=\"tab\"]").forEach((item) => {
+			item.setAttribute("aria-selected", String(item === tab));
+			item.tabIndex = item === tab ? 0 : -1;
+		});
+		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
+			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
+			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
+		});
+		if (focus) tab.focus();
+		return tab;
+	};
+	const activate = (tab) => {
+		select(tab.id);
+		root.emit("select", {
+			id: tab.id,
+			panelId: tab.getAttribute("aria-controls")
+		});
+	};
+	on(list, "click", (event) => {
+		const tab = event.target.closest("[role=\"tab\"]");
+		if (tab && enabled(tab)) activate(tab);
+	});
+	on(list, "keydown", (event) => {
+		const current = event.target.closest("[role=\"tab\"]"), options = items();
+		if (!current) return;
+		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		let index = options.indexOf(current);
+		if (event.key === next) index++;
+		else if (event.key === previous) index--;
+		else if (event.key === "Home") index = 0;
+		else if (event.key === "End") index = options.length - 1;
+		else if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			activate(current);
+			return;
+		} else return;
+		event.preventDefault();
+		const tab = rove(options, index);
+		if (root.getAttribute("activation") !== "manual") activate(tab);
+	});
+	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
+	if (initial) select(initial.id);
+	return {
+		select,
+		get selectedId() {
+			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
+		},
+		set selectedId(id) {
+			select(id);
+		}
+	};
+}
+function toolbar(root, { on }) {
+	const bar = root.querySelector("[role=\"toolbar\"]");
+	if (!bar) return {};
+	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
+	const initial = controls();
+	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
+	on(bar, "focusin", (event) => {
+		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
+	});
+	on(bar, "keydown", (event) => {
+		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
+		const items = controls(), index = items.indexOf(event.target);
+		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		if (![
+			next,
+			prev,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		event.preventDefault();
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
+	});
+	on(bar, "click", (event) => {
+		const button = event.target.closest("button[aria-pressed]");
+		if (button && enabled(button)) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.dataset.action ?? button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		}
+	});
+	return {};
+}
+function disclosure(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button[aria-controls][aria-expanded]");
+		if (!button || !enabled(button)) return;
+		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
+		if (!target) return;
+		const expanded = button.getAttribute("aria-expanded") !== "true";
+		button.setAttribute("aria-expanded", String(expanded));
+		target.hidden = !expanded;
+		root.emit("toggle", {
+			id: target.id,
+			expanded
+		});
+	});
+	const details = root.querySelector("details");
+	on(details, "toggle", () => root.emit("toggle", {
+		id: details.id,
+		expanded: details.open
+	}));
+	return {
+		get open() {
+			return details?.open ?? false;
+		},
+		set open(value) {
+			if (details) details.open = Boolean(value);
+		}
+	};
+}
+function combobox(root, { on, signal }) {
+	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
+	if (!input || !list) return {};
+	identify(root, list, "options");
+	input.setAttribute("aria-controls", list.id);
+	let active = null, notifying = false;
+	const notify = () => {
+		notifying = true;
+		try {
+			nativeInput(input);
+			nativeInput(input, "change");
+		} finally {
+			notifying = false;
+		}
+	};
+	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
+	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
+	const setActive = (option) => {
+		active = option;
+		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
+		if (option) {
+			input.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		} else input.removeAttribute("aria-activedescendant");
+	};
+	const hide = () => {
+		list.hidden = true;
+		input.setAttribute("aria-expanded", "false");
+		setActive(null);
+	};
+	const filter = (query = input.value) => {
+		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
+		all(list, "[role=\"group\"]").forEach((group) => {
+			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
+		});
+		const empty = root.querySelector(".combobox-empty");
+		if (empty) {
+			empty.hidden = options().length !== 0;
+			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
+		}
+		if (!options().includes(active)) setActive(null);
+	};
+	const show = (allOptions = false) => {
+		if (!enabled(input) || input.readOnly) return;
+		filter(allOptions ? "" : input.value);
+		list.hidden = false;
+		input.setAttribute("aria-expanded", "true");
+		place(input, list);
+	};
+	const choose = (option) => {
+		if (!option || !enabled(option)) return;
+		input.value = option.dataset.value ?? option.textContent.trim();
+		hide();
+		notify();
+		input.focus();
+	};
+	on(input, "input", () => {
+		if (!notifying) {
+			show();
+			announce(root, `${options().length} options available.`);
+		}
+	});
+	on(input, "keydown", (event) => {
+		if (event.key === "Tab") {
+			hide();
+			return;
+		}
+		if (event.key === "Escape") {
+			if (!list.hidden) {
+				hide();
+				event.stopPropagation();
+			} else if (input.value) {
+				input.value = "";
+				notify();
+				event.stopPropagation();
+			}
+			event.preventDefault();
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			hide();
+			return;
+		}
+		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			if (list.hidden) show(true);
+			if (event.altKey) return;
+			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
+			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
+		} else if (event.key === "Enter" && !list.hidden && active) {
+			event.preventDefault();
+			choose(active);
+		}
+	});
+	on(list, "pointerdown", (event) => {
+		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
+	});
+	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
+	on(root.querySelector(".combobox-toggle"), "click", () => {
+		list.hidden ? show(true) : hide();
+		input.focus();
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide();
+	});
+	on(root, "focusout", () => queueMicrotask(() => {
+		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
+	}));
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!list.hidden) place(input, list);
+	});
+	on(root.ownerDocument, "scroll", (event) => {
+		if (!list.hidden && !list.contains(event.target)) place(input, list);
+	}, { capture: true });
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !list.hidden;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		get value() {
+			return input.value;
+		},
+		set value(value) {
+			input.value = String(value ?? "");
+			if (!list.hidden) filter();
+		},
+		cleanup: hide
+	};
+}
+function menu(root, { on }) {
+	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
+	if (!trigger || !main) return {};
+	identify(root, main, "menu");
+	trigger.setAttribute("aria-controls", main.id);
+	const lists = all(root, "[role=\"menu\"]");
+	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
+	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
+	const closeList = (list) => {
+		list.hidden = true;
+		controller(list)?.setAttribute("aria-expanded", "false");
+	};
+	const hide = (focus = true) => {
+		lists.forEach(closeList);
+		if (focus) trigger.focus();
+	};
+	const showList = (list, button, last = false) => {
+		list.hidden = false;
+		button.setAttribute("aria-expanded", "true");
+		place(button, list);
+		rove(items(list), last ? items(list).length - 1 : 0);
+	};
+	const show = () => {
+		if (enabled(trigger)) showList(main, trigger);
+	};
+	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
+	const activate = (item) => {
+		if (!enabled(item)) return;
+		const child = submenu(item);
+		if (child) {
+			showList(child, item);
+			return;
+		}
+		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
+		else hide();
+		root.emit("action", {
+			action: item.dataset.action ?? item.textContent.trim(),
+			checked: item.getAttribute("aria-checked") === "true"
+		});
+	};
+	on(trigger, "click", () => main.hidden ? show() : hide());
+	on(trigger, "keydown", (event) => {
+		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
+			event.preventDefault();
+			showList(main, trigger, event.key === "ArrowUp");
+		}
+	});
+	on(root, "click", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (item) activate(item);
+	});
+	on(root, "keydown", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (!item) return;
+		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
+		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (list !== main) {
+				closeList(list);
+				controller(list)?.focus();
+			} else hide();
+		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
+			event.preventDefault();
+			showList(submenu(item), item);
+		} else if (event.key === "Tab") hide();
+		else if (event.key.length === 1 && /\S/.test(event.key)) {
+			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+			if (found) {
+				event.preventDefault();
+				rove(options, options.indexOf(found));
+			}
+		}
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument, "focusin", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
+	hide(false);
+	return {
+		show,
+		hide,
+		get open() {
+			return !main.hidden;
+		},
+		set open(value) {
+			value ? show() : hide(false);
+		},
+		cleanup() {
+			hide(false);
+		}
+	};
+}
+//#endregion
+export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/menu/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/menu/runtime/chunks/navigation-Dt8ap-9J.js
deleted file mode 100644
index 81201c8d5..000000000
--- a/packages/ui/dist/copy/menu/runtime/chunks/navigation-Dt8ap-9J.js
+++ /dev/null
@@ -1,367 +0,0 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/navigation.js
-function tabs(root, { on }, listOverride) {
-	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
-	if (!list) return {};
-	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
-	const select = (id, focus = false) => {
-		const tab = items().find((item) => item.id === id);
-		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
-		all(list, "[role=\"tab\"]").forEach((item) => {
-			item.setAttribute("aria-selected", String(item === tab));
-			item.tabIndex = item === tab ? 0 : -1;
-		});
-		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
-			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
-			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
-		});
-		if (focus) tab.focus();
-		return tab;
-	};
-	const activate = (tab) => {
-		select(tab.id);
-		root.emit("select", {
-			id: tab.id,
-			panelId: tab.getAttribute("aria-controls")
-		});
-	};
-	on(list, "click", (event) => {
-		const tab = event.target.closest("[role=\"tab\"]");
-		if (tab && enabled(tab)) activate(tab);
-	});
-	on(list, "keydown", (event) => {
-		const current = event.target.closest("[role=\"tab\"]"), options = items();
-		if (!current) return;
-		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		let index = options.indexOf(current);
-		if (event.key === next) index++;
-		else if (event.key === previous) index--;
-		else if (event.key === "Home") index = 0;
-		else if (event.key === "End") index = options.length - 1;
-		else if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			activate(current);
-			return;
-		} else return;
-		event.preventDefault();
-		const tab = rove(options, index);
-		if (root.getAttribute("activation") !== "manual") activate(tab);
-	});
-	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
-	if (initial) select(initial.id);
-	return {
-		select,
-		get selectedId() {
-			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
-		},
-		set selectedId(id) {
-			select(id);
-		}
-	};
-}
-function toolbar(root, { on }) {
-	const bar = root.querySelector("[role=\"toolbar\"]");
-	if (!bar) return {};
-	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
-	const initial = controls();
-	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
-	on(bar, "focusin", (event) => {
-		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
-	});
-	on(bar, "keydown", (event) => {
-		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
-		const items = controls(), index = items.indexOf(event.target);
-		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		if (![
-			next,
-			prev,
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
-	});
-	on(bar, "click", (event) => {
-		const button = event.target.closest("button[aria-pressed]");
-		if (button && enabled(button)) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.dataset.action ?? button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		}
-	});
-	return {};
-}
-function disclosure(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button[aria-controls][aria-expanded]");
-		if (!button || !enabled(button)) return;
-		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
-		if (!target) return;
-		const expanded = button.getAttribute("aria-expanded") !== "true";
-		button.setAttribute("aria-expanded", String(expanded));
-		target.hidden = !expanded;
-		root.emit("toggle", {
-			id: target.id,
-			expanded
-		});
-	});
-	const details = root.querySelector("details");
-	on(details, "toggle", () => root.emit("toggle", {
-		id: details.id,
-		expanded: details.open
-	}));
-	return {
-		get open() {
-			return details?.open ?? false;
-		},
-		set open(value) {
-			if (details) details.open = Boolean(value);
-		}
-	};
-}
-function combobox(root, { on, signal }) {
-	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
-	if (!input || !list) return {};
-	identify(root, list, "options");
-	input.setAttribute("aria-controls", list.id);
-	let active = null, notifying = false;
-	const notify = () => {
-		notifying = true;
-		try {
-			nativeInput(input);
-			nativeInput(input, "change");
-		} finally {
-			notifying = false;
-		}
-	};
-	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
-	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
-	const setActive = (option) => {
-		active = option;
-		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
-		if (option) {
-			input.setAttribute("aria-activedescendant", option.id);
-			option.scrollIntoView({ block: "nearest" });
-		} else input.removeAttribute("aria-activedescendant");
-	};
-	const hide = () => {
-		list.hidden = true;
-		input.setAttribute("aria-expanded", "false");
-		setActive(null);
-	};
-	const filter = (query = input.value) => {
-		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-		all(list, "[role=\"group\"]").forEach((group) => {
-			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
-		});
-		const empty = root.querySelector(".combobox-empty");
-		if (empty) {
-			empty.hidden = options().length !== 0;
-			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
-		}
-		if (!options().includes(active)) setActive(null);
-	};
-	const show = (allOptions = false) => {
-		if (!enabled(input) || input.readOnly) return;
-		filter(allOptions ? "" : input.value);
-		list.hidden = false;
-		input.setAttribute("aria-expanded", "true");
-		place(input, list);
-	};
-	const choose = (option) => {
-		if (!option || !enabled(option)) return;
-		input.value = option.dataset.value ?? option.textContent.trim();
-		hide();
-		notify();
-		input.focus();
-	};
-	on(input, "input", () => {
-		if (!notifying) {
-			show();
-			announce(root, `${options().length} options available.`);
-		}
-	});
-	on(input, "keydown", (event) => {
-		if (event.key === "Tab") {
-			hide();
-			return;
-		}
-		if (event.key === "Escape") {
-			if (!list.hidden) {
-				hide();
-				event.stopPropagation();
-			} else if (input.value) {
-				input.value = "";
-				notify();
-				event.stopPropagation();
-			}
-			event.preventDefault();
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			hide();
-			return;
-		}
-		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-			event.preventDefault();
-			if (list.hidden) show(true);
-			if (event.altKey) return;
-			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
-			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
-		} else if (event.key === "Enter" && !list.hidden && active) {
-			event.preventDefault();
-			choose(active);
-		}
-	});
-	on(list, "pointerdown", (event) => {
-		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
-	});
-	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
-	on(root.querySelector(".combobox-toggle"), "click", () => {
-		list.hidden ? show(true) : hide();
-		input.focus();
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide();
-	});
-	on(root, "focusout", () => queueMicrotask(() => {
-		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
-	}));
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!list.hidden) place(input, list);
-	});
-	on(root.ownerDocument, "scroll", (event) => {
-		if (!list.hidden && !list.contains(event.target)) place(input, list);
-	}, { capture: true });
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !list.hidden;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		get value() {
-			return input.value;
-		},
-		set value(value) {
-			input.value = String(value ?? "");
-			if (!list.hidden) filter();
-		},
-		cleanup: hide
-	};
-}
-function menu(root, { on }) {
-	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
-	if (!trigger || !main) return {};
-	identify(root, main, "menu");
-	trigger.setAttribute("aria-controls", main.id);
-	const lists = all(root, "[role=\"menu\"]");
-	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
-	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
-	const closeList = (list) => {
-		list.hidden = true;
-		controller(list)?.setAttribute("aria-expanded", "false");
-	};
-	const hide = (focus = true) => {
-		lists.forEach(closeList);
-		if (focus) trigger.focus();
-	};
-	const showList = (list, button, last = false) => {
-		list.hidden = false;
-		button.setAttribute("aria-expanded", "true");
-		place(button, list);
-		rove(items(list), last ? items(list).length - 1 : 0);
-	};
-	const show = () => {
-		if (enabled(trigger)) showList(main, trigger);
-	};
-	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
-	const activate = (item) => {
-		if (!enabled(item)) return;
-		const child = submenu(item);
-		if (child) {
-			showList(child, item);
-			return;
-		}
-		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
-		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
-		else hide();
-		root.emit("action", {
-			action: item.dataset.action ?? item.textContent.trim(),
-			checked: item.getAttribute("aria-checked") === "true"
-		});
-	};
-	on(trigger, "click", () => main.hidden ? show() : hide());
-	on(trigger, "keydown", (event) => {
-		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
-			event.preventDefault();
-			showList(main, trigger, event.key === "ArrowUp");
-		}
-	});
-	on(root, "click", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (item) activate(item);
-	});
-	on(root, "keydown", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (!item) return;
-		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
-		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
-			event.preventDefault();
-			event.stopPropagation();
-			if (list !== main) {
-				closeList(list);
-				controller(list)?.focus();
-			} else hide();
-		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
-			event.preventDefault();
-			showList(submenu(item), item);
-		} else if (event.key === "Tab") hide();
-		else if (event.key.length === 1 && /\S/.test(event.key)) {
-			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-			if (found) {
-				event.preventDefault();
-				rove(options, options.indexOf(found));
-			}
-		}
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument, "focusin", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
-	hide(false);
-	return {
-		show,
-		hide,
-		get open() {
-			return !main.hidden;
-		},
-		set open(value) {
-			value ? show() : hide(false);
-		},
-		cleanup() {
-			hide(false);
-		}
-	};
-}
-//#endregion
-export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/menu/runtime/components/menu.js b/packages/ui/dist/copy/menu/runtime/components/menu.js
index 3f1e4b50c..b35ceb43e 100644
--- a/packages/ui/dist/copy/menu/runtime/components/menu.js
+++ b/packages/ui/dist/copy/menu/runtime/components/menu.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as menu } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as menu } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/menu.js
 var J3w1Menu = class extends J3w1Element {
 	static componentId = "menu";
 	static version = "4.0.0";
-	static implementationId = "sha256-jIlJcU1Nx7Q5MB7Fqfcn4f9vr0IW1gmGwNdP5Rk72Aw=";
+	static implementationId = "sha256-oS0Ubl9rLRKcmk22aO7KDARBpUoA/Y7sR2AvyqabH+U=";
 	static connect = menu;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/menu/runtime/register/menu.js b/packages/ui/dist/copy/menu/runtime/register/menu.js
index 734c05e98..655b77a5a 100644
--- a/packages/ui/dist/copy/menu/runtime/register/menu.js
+++ b/packages/ui/dist/copy/menu/runtime/register/menu.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Menu } from "../components/menu.js";
 //#region .cache/ui-build/entries/register/menu.js
 var element = registerElement("j3w1-menu", J3w1Menu);
diff --git a/packages/ui/dist/copy/menu/tokens.css b/packages/ui/dist/copy/menu/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/menu/tokens.css
+++ b/packages/ui/dist/copy/menu/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/multiselect/component.css b/packages/ui/dist/copy/multiselect/component.css
index 42b330fcf..82a284ae7 100644
--- a/packages/ui/dist/copy/multiselect/component.css
+++ b/packages/ui/dist/copy/multiselect/component.css
@@ -8,7 +8,7 @@ j3w1-multiselect {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-multiselect, j3w1-multiselect *, j3w1-multiselect *::before, j3w1-multiselect *::after { box-sizing: border-box; }
-j3w1-multiselect button, j3w1-multiselect input, j3w1-multiselect select, j3w1-multiselect textarea { font: inherit; }
+j3w1-multiselect :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-multiselect ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -51,7 +51,7 @@ j3w1-multiselect .checkbox-required {
 
 j3w1-multiselect .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -61,8 +61,8 @@ j3w1-multiselect .checkbox-option {
 
 j3w1-multiselect .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -72,8 +72,8 @@ j3w1-multiselect .checkbox-control > * {
 
 j3w1-multiselect .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -85,8 +85,8 @@ j3w1-multiselect .checkbox-input {
 j3w1-multiselect .checkbox-check,
 j3w1-multiselect .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
@@ -187,11 +187,136 @@ j3w1-multiselect .checkbox:disabled .checkbox-legend {
   }
 }
 
+j3w1-multiselect .button,
+j3w1-multiselect .dialog-button,
+j3w1-multiselect .empty-state-action,
+j3w1-multiselect .file-input-button,
+j3w1-multiselect button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-multiselect .button,
+j3w1-multiselect .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-multiselect .button-secondary,
+j3w1-multiselect .dialog-button,
+j3w1-multiselect .empty-state-action,
+j3w1-multiselect .file-input-button,
+j3w1-multiselect button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-multiselect .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-multiselect .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-multiselect .button-destructive-filled,
+j3w1-multiselect .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-multiselect :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-multiselect .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-multiselect :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-multiselect :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-multiselect :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-multiselect .dialog-button,
+  j3w1-multiselect .empty-state-action,
+  j3w1-multiselect .file-input-button,
+  j3w1-multiselect button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-multiselect :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-multiselect .multiselect {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-multiselect .multiselect-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-multiselect .multiselect :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-multiselect .multiselect :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-multiselect .multiselect :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-j3w1-multiselect .multiselect-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 j3w1-multiselect .multiselect [data-options] {display:grid;gap:var(--space-8)}j3w1-multiselect .multiselect label {display:flex;gap:var(--space-8);align-items:center;min-height:var(--density-control-height)}j3w1-multiselect .multiselect input[type=checkbox] {accent-color:var(--color-action-primary-bg)}j3w1-multiselect .multiselect label:has(:checked) {border-inline-start:var(--border-width-emphasis) solid var(--color-border-active)}j3w1-multiselect .multiselect [data-selection-status] {color:var(--color-text-muted)}
 
 j3w1-multiselect [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/multiselect/index.html b/packages/ui/dist/copy/multiselect/index.html
index 640821991..f06673375 100644
--- a/packages/ui/dist/copy/multiselect/index.html
+++ b/packages/ui/dist/copy/multiselect/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Multiple selection · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-multiselect id="example-multiselect-default"><fieldset class="multiselect checkbox checkbox-group"><legend class="checkbox-legend">Notification topics</legend><label for="example-multiselect-default-multiselect-search">Filter topics</label><input class="multiselect-control" id="example-multiselect-default-multiselect-search" type="search" data-filter="" data-demo-focus-target=""><button class="multiselect-control" type="button" data-clear-selection="">Clear selection</button><div data-options=""><label class="checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="example-multiselect-default-topics" value="releases" checked=""><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Releases</span></label><label class="checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="example-multiselect-default-topics" value="components"><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Components</span></label><label class="checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="example-multiselect-default-topics" value="guides"><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Guides</span></label></div><p role="status" data-selection-status="">3 topics; 1 selected</p></fieldset></j3w1-multiselect><script type="module" src="./runtime/register/multiselect.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Multiple selection · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-multiselect id="example-multiselect-default"><fieldset class="multiselect checkbox checkbox-group"><legend class="checkbox-legend">Notification topics</legend><label for="example-multiselect-default-multiselect-search">Filter topics</label><input class="multiselect-control" id="example-multiselect-default-multiselect-search" type="search" data-filter="" data-demo-focus-target=""><button class="multiselect-control" type="button" data-clear-selection="">Clear selection</button><div data-options=""><label class="checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="example-multiselect-default-topics" value="releases" checked=""><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Releases</span></label><label class="checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="example-multiselect-default-topics" value="components"><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Components</span></label><label class="checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="example-multiselect-default-topics" value="guides"><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Guides</span></label></div><p role="status" data-selection-status="">3 topics; 1 selected</p></fieldset></j3w1-multiselect><script type="module" src="./runtime/register/multiselect.js"></script></body></html>
diff --git a/packages/ui/dist/copy/multiselect/manifest.json b/packages/ui/dist/copy/multiselect/manifest.json
index b0e7a1a23..c129c83c9 100644
--- a/packages/ui/dist/copy/multiselect/manifest.json
+++ b/packages/ui/dist/copy/multiselect/manifest.json
@@ -5,24 +5,24 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/multiselect.md",
   "dependencies": [
     "register/multiselect.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/multiselect.js",
-    "chunks/advanced-DCpe8Ndv.js",
+    "chunks/advanced-CqBF0dSb.js",
     "chunks/markup-DeQ4bEMR.js"
   ],
   "files": {
-    "runtime/register/multiselect.js": "sha256-96pmTEj2wLhjjLNib4gB1d7Twzrt5QcyklLK7RfzavA=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/multiselect.js": "sha256-8L2lHVliSgOdCXDMUzLPyUu9JYyowyYfha4hm57F5/E=",
-    "runtime/chunks/advanced-DCpe8Ndv.js": "sha256-nr1LFdLYsGeTM4vDyldvuJygRm0F04sYonxatySPu1g=",
+    "runtime/register/multiselect.js": "sha256-GvsBeg69jcyZ7oEUVcCdn1MKUx1TUf7RIO5QVAsXGH4=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/multiselect.js": "sha256-MllSXtT35z9jg4cXDS6YzVpSLSEHEdFav9snvf+mVPU=",
+    "runtime/chunks/advanced-CqBF0dSb.js": "sha256-ozOzkRU6IeVGBqU3XQ0aLledkAi9vcs8dJdMQutVevs=",
     "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-NHeO9yzX+pKu8X05cxcbMC+aba6f5KV7SQL1E+N/kKM=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-OdOVY82/KYMEbbzSxLU1DnV9RhLbEXpdY1Sgy6ylGwQ=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-1E4hftJizWZX+Gn6uhOJBXC2VAC62t50q2kwRpgS2pQ=",
-    "index.html": "sha256-/iSVBFFALSTS0ebIls1qu3/g280a8lbMULm2Al9zFMM=",
+    "index.html": "sha256-0lrVFcwbFER+XauYVRXJkM2wQcvKcobwcWzQsL4OQM8=",
     "README.md": "sha256-754Tt+bveWNGF8niAMoHQEB7D8SGYGEJhu6GpbhKpiU="
   }
 }
diff --git a/packages/ui/dist/copy/multiselect/runtime/chunks/advanced-DCpe8Ndv.js b/packages/ui/dist/copy/multiselect/runtime/chunks/advanced-CqBF0dSb.js
similarity index 97%
rename from packages/ui/dist/copy/multiselect/runtime/chunks/advanced-DCpe8Ndv.js
rename to packages/ui/dist/copy/multiselect/runtime/chunks/advanced-CqBF0dSb.js
index 3390a044c..4a5c45981 100644
--- a/packages/ui/dist/copy/multiselect/runtime/chunks/advanced-DCpe8Ndv.js
+++ b/packages/ui/dist/copy/multiselect/runtime/chunks/advanced-CqBF0dSb.js
@@ -1,4 +1,4 @@
-import { d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
+import { c as keyIndex, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
 import { t as IDREFS } from "./markup-DeQ4bEMR.js";
 //#region packages/ui/src/behaviors/advanced.js
 function tree(root, { on }) {
@@ -64,7 +64,12 @@ function tree(root, { on }) {
 			"End"
 		].includes(event.key)) {
 			event.preventDefault();
-			const next = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+			const next = keyIndex({
+				key: event.key,
+				index,
+				length: options.length,
+				wrap: false
+			});
 			rove(options, next);
 		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
 			event.preventDefault();
diff --git a/packages/ui/dist/copy/multiselect/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/multiselect/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/multiselect/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/multiselect/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/multiselect/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/multiselect/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/multiselect/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/multiselect/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/multiselect/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/multiselect/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/multiselect/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/multiselect/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/multiselect/runtime/components/multiselect.js b/packages/ui/dist/copy/multiselect/runtime/components/multiselect.js
index 20a588ed0..cb58ac304 100644
--- a/packages/ui/dist/copy/multiselect/runtime/components/multiselect.js
+++ b/packages/ui/dist/copy/multiselect/runtime/components/multiselect.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as multiselect } from "../chunks/advanced-DCpe8Ndv.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as multiselect } from "../chunks/advanced-CqBF0dSb.js";
 //#region .cache/ui-build/entries/components/multiselect.js
 var J3w1Multiselect = class extends J3w1Element {
 	static componentId = "multiselect";
 	static version = "4.0.0";
-	static implementationId = "sha256-OPa5V1nQSQlq4kVkfylH8e9/Aw6ID9xFd3Wd2jg9JT4=";
+	static implementationId = "sha256-M7eRaWl+u1uQgXFKvnBd0GCc8U7xIWfp5yT7U9eMjTg=";
 	static connect = multiselect;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/multiselect/runtime/register/multiselect.js b/packages/ui/dist/copy/multiselect/runtime/register/multiselect.js
index 8a91da5b0..9183e5e5a 100644
--- a/packages/ui/dist/copy/multiselect/runtime/register/multiselect.js
+++ b/packages/ui/dist/copy/multiselect/runtime/register/multiselect.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Multiselect } from "../components/multiselect.js";
 //#region .cache/ui-build/entries/register/multiselect.js
 var element = registerElement("j3w1-multiselect", J3w1Multiselect);
diff --git a/packages/ui/dist/copy/multiselect/tokens.css b/packages/ui/dist/copy/multiselect/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/multiselect/tokens.css
+++ b/packages/ui/dist/copy/multiselect/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/number-field/component.css b/packages/ui/dist/copy/number-field/component.css
index cfe0753fc..6a4c5f21d 100644
--- a/packages/ui/dist/copy/number-field/component.css
+++ b/packages/ui/dist/copy/number-field/component.css
@@ -8,7 +8,7 @@ j3w1-number-field {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-number-field, j3w1-number-field *, j3w1-number-field *::before, j3w1-number-field *::after { box-sizing: border-box; }
-j3w1-number-field button, j3w1-number-field input, j3w1-number-field select, j3w1-number-field textarea { font: inherit; }
+j3w1-number-field :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-number-field ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,15 +26,15 @@ j3w1-number-field .sr-only {
 }
 
 j3w1-number-field :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-number-field :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-number-field :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-number-field :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-number-field :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-number-field :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-number-field :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-number-field :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-number-field :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-number-field .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-number-field .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-number-field .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-number-field .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-number-field .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-number-field .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-number-field .j3w1-temporal :focus-visible,j3w1-number-field .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -58,7 +58,7 @@ j3w1-number-field .j3w1-calendar [aria-pressed="true"] { background:var(--color-
 j3w1-number-field .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-number-field .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-number-field .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-number-field .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-number-field .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-number-field .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-number-field .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-number-field .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -66,7 +66,7 @@ j3w1-number-field .j3w1-choice-trigger:focus-visible,j3w1-number-field .j3w1-cho
 j3w1-number-field .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-number-field .j3w1-choice-list[popover] { inset: auto; }
 j3w1-number-field .j3w1-choice-list[hidden] { display: none; }
-j3w1-number-field .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-number-field .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-number-field .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-number-field .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-number-field .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -80,48 +80,93 @@ j3w1-number-field .j3w1-choice-error { display: block; color: var(--color-status
 j3w1-number-field .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-number-field .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-number-field :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-number-field input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-number-field input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
 
-j3w1-number-field .number-field {
-  position: relative;
-  display: grid;
-  gap: var(--space-4);
-  min-width: 0;
-  max-width: calc(var(--font-size-ui-md) * 20);
-  color: var(--color-text-default);
+j3w1-number-field .combobox-label,
+j3w1-number-field .dialog-field-label,
+j3w1-number-field .field-label,
+j3w1-number-field .fieldset-label,
+j3w1-number-field .file-input-label,
+j3w1-number-field .number-field-label,
+j3w1-number-field .search-field-label,
+j3w1-number-field .select-label,
+j3w1-number-field .text-field-label,
+j3w1-number-field .textarea-label,
+j3w1-number-field .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
 }
 
-j3w1-number-field .number-field-label {
-  color: var(--color-text-bright);
+j3w1-number-field .combobox-help,
+j3w1-number-field .date-picker-help,
+j3w1-number-field .dialog-field-help,
+j3w1-number-field .fieldset-help,
+j3w1-number-field .file-input-help,
+j3w1-number-field .number-field-help,
+j3w1-number-field .search-field-help,
+j3w1-number-field .select-help,
+j3w1-number-field .text-field-help,
+j3w1-number-field .textarea-help,
+j3w1-number-field .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-number-field .combobox-message,
+j3w1-number-field .date-picker-message,
+j3w1-number-field .file-input-message,
+j3w1-number-field .number-field-message,
+j3w1-number-field .radio-group-message,
+j3w1-number-field .select-message,
+j3w1-number-field .text-field-message,
+j3w1-number-field .textarea-message,
+j3w1-number-field .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
   font-size: var(--font-size-ui-sm);
   line-height: var(--font-line-height-ui-sm);
 }
 
+j3w1-number-field .combobox-root,
+j3w1-number-field .date-picker-root,
 j3w1-number-field .number-field-root {
   display: flex;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
 }
 
+j3w1-number-field .number-field {
+  position: relative;
+  display: grid;
+  gap: var(--space-4);
+  min-width: 0;
+  max-width: calc(var(--font-size-ui-md) * 20);
+  color: var(--color-text-default);
+}
+
 j3w1-number-field .number-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -177,21 +222,6 @@ j3w1-number-field .number-field-action {
 j3w1-number-field .number-field-action + .number-field-action {
   border-top: var(--border-width-default) solid var(--color-border-divider);
 }
-
-j3w1-number-field .number-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-number-field .number-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-number-field .number-field-root:hover {
     background: var(--color-interaction-hover-bg);
diff --git a/packages/ui/dist/copy/number-field/index.html b/packages/ui/dist/copy/number-field/index.html
index 47064c1f5..940039bb8 100644
--- a/packages/ui/dist/copy/number-field/index.html
+++ b/packages/ui/dist/copy/number-field/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Number field · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-number-field id="example-number-field-default"><div class="number-field">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Number field · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-number-field id="example-number-field-default"><div class="number-field">
   <label class="number-field-label" for="example-number-field-default-nf-workspaces">Workspaces</label>
   <div class="number-field-root">
     <input class="number-field-input" id="example-number-field-default-nf-workspaces" type="number" value="10" min="1" max="20" step="1" aria-describedby="example-number-field-default-nf-workspaces-help example-number-field-default-nf-workspaces-message" name="example-number-field-default-nf-workspaces">
diff --git a/packages/ui/dist/copy/number-field/manifest.json b/packages/ui/dist/copy/number-field/manifest.json
index 81e54310c..01a2c8957 100644
--- a/packages/ui/dist/copy/number-field/manifest.json
+++ b/packages/ui/dist/copy/number-field/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/number-field.md",
   "dependencies": [
     "register/number-field.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/number-field.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/number-field.js": "sha256-jCevLNvnx84VrjcqcaLN+LoayqMvlOZqbeB0vfcKCTw=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/number-field.js": "sha256-27HebtimgA50TSf1kwNGySNCBamP+Cu+9VCSbvOxcDg=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-agyrkFz7FiKZpcU4J9QsaeTNRYBw7yWJQcMOdSd8SPc=",
+    "runtime/register/number-field.js": "sha256-hzql0aRe655T+FCjYFhxlfYh24YEAwm8mSKqaRvncg8=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/number-field.js": "sha256-XejyUXzeklfHnLge+zZzoxBqpQGWSXtTLGhXpkm4Sew=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-NcQq0uVZpogHRNRdmQQtShHxXmwI4M2nuuIY7BYYxhE=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-wabUKPjMJ+zn/+oKJMogtcDlppICQ8zTGXEbhGwm+iQ=",
-    "index.html": "sha256-yH23EzsY61NhYO5ZTaRXcpIb2OUYezkZl+VlqSSVS/M=",
+    "index.html": "sha256-5LArzp8P8o/Sx/BfjJC3wIFgD1V0XbJ+7wgFK1xiKTY=",
     "README.md": "sha256-ZNn4SinUkL66soe9hksIPf65yrk5SCJshryFP1N2GnI="
   }
 }
diff --git a/packages/ui/dist/copy/number-field/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/number-field/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/number-field/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/number-field/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/number-field/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/number-field/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/number-field/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/number-field/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/number-field/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/number-field/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/number-field/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/number-field/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/number-field/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/number-field/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/number-field/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/number-field/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/number-field/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/number-field/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/number-field/runtime/components/number-field.js b/packages/ui/dist/copy/number-field/runtime/components/number-field.js
index af0b10715..41733ea16 100644
--- a/packages/ui/dist/copy/number-field/runtime/components/number-field.js
+++ b/packages/ui/dist/copy/number-field/runtime/components/number-field.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/number-field.js
 var J3w1NumberField = class extends J3w1Element {
 	static componentId = "number-field";
 	static version = "4.0.0";
-	static implementationId = "sha256-gb44C85yifc6xKGrJuKPEX7vvpX08h4rRm5NPWN3woo=";
+	static implementationId = "sha256-XSucS362OAqtU9RKAYp52Tc3M6K6uMWKmB6UdK8+/o0=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/number-field/runtime/register/number-field.js b/packages/ui/dist/copy/number-field/runtime/register/number-field.js
index c8e0e7c36..8553c5a33 100644
--- a/packages/ui/dist/copy/number-field/runtime/register/number-field.js
+++ b/packages/ui/dist/copy/number-field/runtime/register/number-field.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1NumberField } from "../components/number-field.js";
 //#region .cache/ui-build/entries/register/number-field.js
 var element = registerElement("j3w1-number-field", J3w1NumberField);
diff --git a/packages/ui/dist/copy/number-field/tokens.css b/packages/ui/dist/copy/number-field/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/number-field/tokens.css
+++ b/packages/ui/dist/copy/number-field/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/pagination/component.css b/packages/ui/dist/copy/pagination/component.css
index 6dd76ee87..ac67bb50b 100644
--- a/packages/ui/dist/copy/pagination/component.css
+++ b/packages/ui/dist/copy/pagination/component.css
@@ -8,7 +8,7 @@ j3w1-pagination {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-pagination, j3w1-pagination *, j3w1-pagination *::before, j3w1-pagination *::after { box-sizing: border-box; }
-j3w1-pagination button, j3w1-pagination input, j3w1-pagination select, j3w1-pagination textarea { font: inherit; }
+j3w1-pagination :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-pagination ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -35,7 +35,7 @@ j3w1-pagination .pagination-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -54,8 +54,8 @@ j3w1-pagination .pagination-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-8);
   background: transparent;
   border-radius: var(--radius-none);
@@ -66,7 +66,7 @@ j3w1-pagination .pagination-link {
 }
 
 j3w1-pagination .pagination-edge {
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
 }
 
 j3w1-pagination .pagination-glyph {
@@ -77,8 +77,8 @@ j3w1-pagination .pagination-gap {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
   color: var(--color-text-muted);
   user-select: none;
 }
@@ -86,7 +86,7 @@ j3w1-pagination .pagination-gap {
 j3w1-pagination .pagination-status {
   display: inline-flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-8);
   color: var(--color-text-default);
   font-variant-numeric: tabular-nums;
@@ -122,7 +122,7 @@ j3w1-pagination .pagination-link[aria-current="page"]:hover {
 }
 
 j3w1-pagination .pagination-link[aria-current="page"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 j3w1-pagination .pagination-link[aria-disabled="true"] {
   color: var(--color-text-disabled);
diff --git a/packages/ui/dist/copy/pagination/index.html b/packages/ui/dist/copy/pagination/index.html
index 4ec7f300a..676adb57c 100644
--- a/packages/ui/dist/copy/pagination/index.html
+++ b/packages/ui/dist/copy/pagination/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Pagination · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-pagination id="example-pagination-default"><nav class="pagination" aria-label="Pagination">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Pagination · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-pagination id="example-pagination-default"><nav class="pagination" aria-label="Pagination">
   <ul class="pagination-list">
     <li class="pagination-item"><a class="pagination-link pagination-edge pagination-prev" href="#example-pagination-default-pg-2" aria-label="Previous page, 2"><span class="pagination-glyph" aria-hidden="true">‹</span> Prev</a></li>
     <li class="pagination-item"><a class="pagination-link" href="#example-pagination-default-pg-1" aria-label="Page 1" data-page="1">1</a></li>
diff --git a/packages/ui/dist/copy/pagination/manifest.json b/packages/ui/dist/copy/pagination/manifest.json
index fcd1065f0..6495fcae6 100644
--- a/packages/ui/dist/copy/pagination/manifest.json
+++ b/packages/ui/dist/copy/pagination/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/pagination.md",
   "dependencies": [
     "register/pagination.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/pagination.js",
-    "chunks/tables-B25ydUHs.js"
+    "chunks/tables-Cjr1EIJz.js"
   ],
   "files": {
-    "runtime/register/pagination.js": "sha256-pgp0U5vF4tER52b++qgmdpAuRSmpiybgRt6HfLmtBqU=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/pagination.js": "sha256-yrEJa21eYjbFYfF3K/IdLp2FXFcKGFkLEVD4bxibWrE=",
-    "runtime/chunks/tables-B25ydUHs.js": "sha256-XqRdyfrSS93rVybWHq6a0WhrmZgaboHi5n8ymgwRbM8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-J6AIVbVHNyS581oA3enNH84ZCf3yRHxSsjlqUa9Z6d0=",
+    "runtime/register/pagination.js": "sha256-brgdYKMAD7bcv2S/lK/pvq48lAK2y+31j4L/TNZAAAc=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/pagination.js": "sha256-B00TORk80D679cwO2BDfd3MFyKRhgzAoaWxrqC1AoYs=",
+    "runtime/chunks/tables-Cjr1EIJz.js": "sha256-K6BF6M6xNawgWdL+NIcBRZmY98j45o69tBI034Ks4Bg=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-Y82QrGBuuCOolKEvjfgUe1uRkUY8RAPoLEiVsEUahxg=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-jp4BjPewAxszUnraKXf7iG6Zty7ZB7J8SdFyHQg7hL4=",
-    "index.html": "sha256-/fV58cVZi1JLHRPrv8jsrMD51D/264mvCsNHTj4WEYM=",
+    "index.html": "sha256-QfAgrl9jbgESweQA3i2v7JR2ghU8LgF8X0cY9hqDnWY=",
     "README.md": "sha256-CkmYa5gHgFCQLGpkV2WpwdaxjhezkCTRRw8d9KDRUqg="
   }
 }
diff --git a/packages/ui/dist/copy/pagination/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/pagination/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/pagination/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/pagination/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/pagination/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/pagination/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/pagination/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/pagination/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/pagination/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/pagination/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/pagination/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/pagination/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/chunks/tables-B25ydUHs.js b/packages/ui/dist/copy/pagination/runtime/chunks/tables-Cjr1EIJz.js
similarity index 96%
rename from packages/ui/dist/chunks/tables-B25ydUHs.js
rename to packages/ui/dist/copy/pagination/runtime/chunks/tables-Cjr1EIJz.js
index 172bab830..f82aaf25e 100644
--- a/packages/ui/dist/chunks/tables-B25ydUHs.js
+++ b/packages/ui/dist/copy/pagination/runtime/chunks/tables-Cjr1EIJz.js
@@ -1,4 +1,4 @@
-import { d as rove, i as all, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
+import { c as keyIndex, f as rove, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/tables.js
 function table(root, { on }) {
 	const element = root.querySelector("table"), body = element?.tBodies[0];
@@ -106,7 +106,12 @@ function table(root, { on }) {
 			"End"
 		].includes(event.key)) return;
 		event.preventDefault();
-		const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+		const nextIndex = keyIndex({
+			key: event.key,
+			index,
+			length: options.length,
+			wrap: false
+		});
 		const next = rove(options, nextIndex);
 		if (event.shiftKey && selectAll) {
 			anchor ??= row;
diff --git a/packages/ui/dist/copy/pagination/runtime/components/pagination.js b/packages/ui/dist/copy/pagination/runtime/components/pagination.js
index ef3f9cb03..140293f27 100644
--- a/packages/ui/dist/copy/pagination/runtime/components/pagination.js
+++ b/packages/ui/dist/copy/pagination/runtime/components/pagination.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as pagination } from "../chunks/tables-B25ydUHs.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as pagination } from "../chunks/tables-Cjr1EIJz.js";
 //#region .cache/ui-build/entries/components/pagination.js
 var J3w1Pagination = class extends J3w1Element {
 	static componentId = "pagination";
 	static version = "4.0.0";
-	static implementationId = "sha256-euvVvLa2uqHPWf4lao8liCwhVeUZHrDFF8Z30hRttNg=";
+	static implementationId = "sha256-HgWIYJ3ex0Ayw+BLic3BdN3dNV9ChkM7wiwgp/qkkAE=";
 	static connect = pagination;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/pagination/runtime/register/pagination.js b/packages/ui/dist/copy/pagination/runtime/register/pagination.js
index 2dfeec151..26680a048 100644
--- a/packages/ui/dist/copy/pagination/runtime/register/pagination.js
+++ b/packages/ui/dist/copy/pagination/runtime/register/pagination.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Pagination } from "../components/pagination.js";
 //#region .cache/ui-build/entries/register/pagination.js
 var element = registerElement("j3w1-pagination", J3w1Pagination);
diff --git a/packages/ui/dist/copy/pagination/tokens.css b/packages/ui/dist/copy/pagination/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/pagination/tokens.css
+++ b/packages/ui/dist/copy/pagination/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/popover/component.css b/packages/ui/dist/copy/popover/component.css
index 04d0fd9e3..0c3e40a03 100644
--- a/packages/ui/dist/copy/popover/component.css
+++ b/packages/ui/dist/copy/popover/component.css
@@ -8,7 +8,7 @@ j3w1-popover {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-popover, j3w1-popover *, j3w1-popover *::before, j3w1-popover *::after { box-sizing: border-box; }
-j3w1-popover button, j3w1-popover input, j3w1-popover select, j3w1-popover textarea { font: inherit; }
+j3w1-popover :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-popover ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,135 @@ j3w1-popover .sr-only {
   border: 0;
 }
 
+j3w1-popover .button,
+j3w1-popover .dialog-button,
+j3w1-popover .empty-state-action,
+j3w1-popover .file-input-button,
+j3w1-popover button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-popover .button,
+j3w1-popover .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-popover .button-secondary,
+j3w1-popover .dialog-button,
+j3w1-popover .empty-state-action,
+j3w1-popover .file-input-button,
+j3w1-popover button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-popover .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-popover .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-popover .button-destructive-filled,
+j3w1-popover .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-popover :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-popover .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-popover :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-popover :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-popover :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-popover .dialog-button,
+  j3w1-popover .empty-state-action,
+  j3w1-popover .file-input-button,
+  j3w1-popover button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-popover :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-popover .popover {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-popover .popover-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-popover .popover :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-popover .popover :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-popover .popover-panel {padding:var(--space-16);max-width:min(calc(var(--font-size-ui-md) * 24),90vw);background:var(--color-surface-overlay);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-overlay);border-radius:var(--radius-none);margin:0}j3w1-popover .popover-panel::backdrop {background:transparent}j3w1-popover .popover-panel[hidden] {display:none}
 
 j3w1-popover [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/popover/index.html b/packages/ui/dist/copy/popover/index.html
index c0ed92292..925d558da 100644
--- a/packages/ui/dist/copy/popover/index.html
+++ b/packages/ui/dist/copy/popover/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Popover · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-popover id="example-popover-default"><div class="popover"><button class="popover-control" type="button" data-popover-trigger="" aria-expanded="false" aria-controls="example-popover-default-popover-help" data-demo-focus-target="">Connection information</button><section class="popover-panel" id="example-popover-default-popover-help" data-popover-panel="" aria-label="Connection information"><p>This workspace uses synthetic local data.</p><button class="popover-control" type="button" data-close="">Close</button></section></div></j3w1-popover><script type="module" src="./runtime/register/popover.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Popover · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-popover id="example-popover-default"><div class="popover"><button class="popover-control" type="button" data-popover-trigger="" aria-expanded="false" aria-controls="example-popover-default-popover-help" data-demo-focus-target="">Connection information</button><section class="popover-panel" id="example-popover-default-popover-help" data-popover-panel="" aria-label="Connection information"><p>This workspace uses synthetic local data.</p><button class="popover-control" type="button" data-close="">Close</button></section></div></j3w1-popover><script type="module" src="./runtime/register/popover.js"></script></body></html>
diff --git a/packages/ui/dist/copy/popover/manifest.json b/packages/ui/dist/copy/popover/manifest.json
index 46b80a225..1c87b80b8 100644
--- a/packages/ui/dist/copy/popover/manifest.json
+++ b/packages/ui/dist/copy/popover/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/popover.md",
   "dependencies": [
     "register/popover.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/popover.js",
-    "chunks/overlays-C6nlCHqg.js"
+    "chunks/overlays-Bw8SSDKz.js"
   ],
   "files": {
-    "runtime/register/popover.js": "sha256-eWKTLAUIMPauNqccfCSWaTkpN6Eyrj+GtlvM7FRaKHc=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/popover.js": "sha256-P63Ou+ew1qtVXdZkxnO6uM5ZG7w9hOBlPK+HNXQbkAU=",
-    "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-53zGKZZyZMB+sdGIbnQk30oFXcLvjoplsW7FfQ9W0u0=",
+    "runtime/register/popover.js": "sha256-NDvrOkPFLsVu6H7xsvbIrVzEyB991xTSx7kQeyplwJo=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/popover.js": "sha256-qVz5uQ2xxsSVcKXfgit5JgjSZ3kzPvm9/Mt3A4X1NEg=",
+    "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-xmMasEZmjEVePt3EbtGTGv48RqUg6XWxZKYkmzUQlQY=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-tBbkSUEedfklBWmTm/lh13o3rlYHe/9AGgvmXp+p/Lo=",
-    "index.html": "sha256-qj6qyYYBmNfnfn4cPT10GeMQN/ToGtN/ZB6H3yjUV/g=",
+    "index.html": "sha256-EXPyGAfu1NC/kmTVCftVrEr6TsOglaJBB5amGR0C4K0=",
     "README.md": "sha256-2w2CMw7jTANV0wE6ux5POoe9QeMf/7BVerq3YrpiziI="
   }
 }
diff --git a/packages/ui/dist/copy/popover/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/popover/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/popover/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/popover/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/popover/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/popover/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/popover/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/popover/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/popover/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/popover/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/popover/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/popover/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/popover/runtime/chunks/overlays-Bw8SSDKz.js b/packages/ui/dist/copy/popover/runtime/chunks/overlays-Bw8SSDKz.js
new file mode 100644
index 000000000..3eeb8ff0d
--- /dev/null
+++ b/packages/ui/dist/copy/popover/runtime/chunks/overlays-Bw8SSDKz.js
@@ -0,0 +1,236 @@
+import { d as place, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/overlays.js
+function modal(root, { on }) {
+	const dialog = root.querySelector("dialog");
+	if (!dialog) return {};
+	let opener = null;
+	const show = (trigger = root.ownerDocument.activeElement) => {
+		if (dialog.open || root.hasAttribute("disabled")) return;
+		opener = trigger;
+		dialog.showModal();
+		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
+		root.emit("open", {});
+	};
+	const close = (value = "") => {
+		if (dialog.open) dialog.close(String(value));
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (button?.matches("[data-open]")) {
+			show(button);
+			return;
+		}
+		if (button && dialog.contains(button) && enabled(button)) {
+			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
+			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
+		}
+		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
+	});
+	on(dialog, "cancel", (event) => {
+		if (!root.emit("cancel", {})) event.preventDefault();
+	});
+	on(dialog, "close", () => {
+		if (opener?.isConnected) opener.focus();
+		root.emit("close", { returnValue: dialog.returnValue });
+	});
+	return {
+		show,
+		close,
+		get open() {
+			return dialog.open;
+		},
+		set open(value) {
+			value ? show() : close();
+		},
+		get returnValue() {
+			return dialog.returnValue;
+		},
+		cleanup() {
+			if (dialog.open) dialog.close();
+		}
+	};
+}
+function tooltip(root, { on }) {
+	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
+	if (!trigger || !popup) return {};
+	identify(root, popup, "tooltip");
+	trigger.setAttribute("aria-describedby", popup.id);
+	let timer, dismissed = false, hovering = false;
+	const stop = () => {
+		clearTimeout(timer);
+	};
+	const hide = () => {
+		stop();
+		popup.hidden = true;
+	};
+	const show = () => {
+		stop();
+		if (!dismissed) {
+			popup.hidden = false;
+			place(trigger, popup);
+		}
+	};
+	on(trigger, "pointerenter", (event) => {
+		if (event.pointerType !== "touch") {
+			hovering = true;
+			dismissed = false;
+			timer = setTimeout(show, 300);
+		}
+	});
+	on(root, "pointerleave", (event) => {
+		if (!root.contains(event.relatedTarget)) {
+			hovering = false;
+			dismissed = false;
+			if (root.ownerDocument.activeElement !== trigger) hide();
+		}
+	});
+	on(popup, "pointerenter", () => {
+		hovering = true;
+		stop();
+	});
+	on(trigger, "focus", () => {
+		dismissed = false;
+		show();
+	});
+	on(trigger, "blur", () => {
+		if (!hovering) hide();
+	});
+	on(trigger, "click", () => {
+		dismissed = true;
+		hide();
+	});
+	on(trigger, "pointerdown", (event) => {
+		if (event.pointerType === "touch") {
+			dismissed = false;
+			timer = setTimeout(show, 500);
+		}
+	});
+	on(trigger, "pointerup", stop);
+	on(trigger, "pointercancel", stop);
+	on(root.ownerDocument, "keydown", (event) => {
+		if (event.key === "Escape" && !popup.hidden) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			dismissed = true;
+			hide();
+		}
+	}, { capture: true });
+	on(root.ownerDocument, "scroll", () => {
+		if (!popup.hidden) place(trigger, popup);
+	}, { capture: true });
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!popup.hidden) place(trigger, popup);
+	});
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !popup.hidden;
+		},
+		cleanup: hide
+	};
+}
+function popover(root, { on }) {
+	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
+	if (!trigger || !panel) return {};
+	identify(root, panel, "popover");
+	trigger.setAttribute("aria-controls", panel.id);
+	const native = typeof panel.showPopover === "function";
+	if (native) {
+		panel.setAttribute("popover", "auto");
+		panel.hidden = false;
+	} else panel.hidden = true;
+	let open = false;
+	const sync = (value) => {
+		open = value;
+		trigger.setAttribute("aria-expanded", String(value));
+		root.emit("toggle", { expanded: value });
+	};
+	const show = () => {
+		if (open || !enabled(trigger)) return;
+		native ? panel.showPopover() : panel.hidden = false;
+		sync(true);
+		place(trigger, panel);
+	};
+	const hide = (focus = false) => {
+		if (!open) return;
+		native ? panel.hidePopover() : panel.hidden = true;
+		sync(false);
+		if (focus) trigger.focus();
+	};
+	on(trigger, "click", () => open ? hide() : show());
+	on(panel, "beforetoggle", (event) => {
+		open = event.newState === "open";
+		trigger.setAttribute("aria-expanded", String(open));
+	});
+	on(panel, "click", (event) => {
+		if (event.target.closest("[data-close]")) hide(true);
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!native && !root.contains(event.target)) hide();
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			hide(true);
+		}
+	});
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (open) place(trigger, panel);
+	});
+	trigger.setAttribute("aria-expanded", "false");
+	return {
+		show,
+		hide,
+		get open() {
+			return open;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		cleanup() {
+			hide();
+		}
+	};
+}
+function feedback(root, { on }) {
+	const dismiss = (item) => {
+		if (!item || !root.emit("dismiss", { id: item.id })) return;
+		const hadFocus = item.contains(root.ownerDocument.activeElement);
+		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
+		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
+		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
+		item.hidden = true;
+		if (hadFocus) next?.focus();
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button)) return;
+		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
+		else if (button.matches(".chip-filter")) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		} else if (button.matches("[data-retry]")) root.emit("retry", {});
+		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape") {
+			const toast = event.target.closest(".toast");
+			if (toast) {
+				event.preventDefault();
+				event.stopPropagation();
+				dismiss(toast);
+			}
+		}
+	});
+	return { dismiss(id) {
+		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
+	} };
+}
+//#endregion
+export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/popover/runtime/chunks/overlays-C6nlCHqg.js b/packages/ui/dist/copy/popover/runtime/chunks/overlays-C6nlCHqg.js
deleted file mode 100644
index 9df8503ec..000000000
--- a/packages/ui/dist/copy/popover/runtime/chunks/overlays-C6nlCHqg.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import { i as all, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/overlays.js
-function modal(root, { on }) {
-	const dialog = root.querySelector("dialog");
-	if (!dialog) return {};
-	let opener = null;
-	const show = (trigger = root.ownerDocument.activeElement) => {
-		if (dialog.open || root.hasAttribute("disabled")) return;
-		opener = trigger;
-		dialog.showModal();
-		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
-		root.emit("open", {});
-	};
-	const close = (value = "") => {
-		if (dialog.open) dialog.close(String(value));
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (button?.matches("[data-open]")) {
-			show(button);
-			return;
-		}
-		if (button && dialog.contains(button) && enabled(button)) {
-			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
-			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
-		}
-		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
-	});
-	on(dialog, "cancel", (event) => {
-		if (!root.emit("cancel", {})) event.preventDefault();
-	});
-	on(dialog, "close", () => {
-		if (opener?.isConnected) opener.focus();
-		root.emit("close", { returnValue: dialog.returnValue });
-	});
-	return {
-		show,
-		close,
-		get open() {
-			return dialog.open;
-		},
-		set open(value) {
-			value ? show() : close();
-		},
-		get returnValue() {
-			return dialog.returnValue;
-		},
-		cleanup() {
-			if (dialog.open) dialog.close();
-		}
-	};
-}
-function tooltip(root, { on }) {
-	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
-	if (!trigger || !popup) return {};
-	identify(root, popup, "tooltip");
-	trigger.setAttribute("aria-describedby", popup.id);
-	let timer, dismissed = false, hovering = false;
-	const stop = () => {
-		clearTimeout(timer);
-	};
-	const hide = () => {
-		stop();
-		popup.hidden = true;
-	};
-	const show = () => {
-		stop();
-		if (!dismissed) {
-			popup.hidden = false;
-			place(trigger, popup);
-		}
-	};
-	on(trigger, "pointerenter", (event) => {
-		if (event.pointerType !== "touch") {
-			hovering = true;
-			dismissed = false;
-			timer = setTimeout(show, 300);
-		}
-	});
-	on(root, "pointerleave", (event) => {
-		if (!root.contains(event.relatedTarget)) {
-			hovering = false;
-			dismissed = false;
-			if (root.ownerDocument.activeElement !== trigger) hide();
-		}
-	});
-	on(popup, "pointerenter", () => {
-		hovering = true;
-		stop();
-	});
-	on(trigger, "focus", () => {
-		dismissed = false;
-		show();
-	});
-	on(trigger, "blur", () => {
-		if (!hovering) hide();
-	});
-	on(trigger, "click", () => {
-		dismissed = true;
-		hide();
-	});
-	on(trigger, "pointerdown", (event) => {
-		if (event.pointerType === "touch") {
-			dismissed = false;
-			timer = setTimeout(show, 500);
-		}
-	});
-	on(trigger, "pointerup", stop);
-	on(trigger, "pointercancel", stop);
-	on(root.ownerDocument, "keydown", (event) => {
-		if (event.key === "Escape" && !popup.hidden) {
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			dismissed = true;
-			hide();
-		}
-	}, { capture: true });
-	on(root.ownerDocument, "scroll", () => {
-		if (!popup.hidden) place(trigger, popup);
-	}, { capture: true });
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!popup.hidden) place(trigger, popup);
-	});
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !popup.hidden;
-		},
-		cleanup: hide
-	};
-}
-function popover(root, { on }) {
-	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
-	if (!trigger || !panel) return {};
-	identify(root, panel, "popover");
-	trigger.setAttribute("aria-controls", panel.id);
-	const native = typeof panel.showPopover === "function";
-	if (native) {
-		panel.setAttribute("popover", "auto");
-		panel.hidden = false;
-	} else panel.hidden = true;
-	let open = false;
-	const sync = (value) => {
-		open = value;
-		trigger.setAttribute("aria-expanded", String(value));
-		root.emit("toggle", { expanded: value });
-	};
-	const show = () => {
-		if (open || !enabled(trigger)) return;
-		native ? panel.showPopover() : panel.hidden = false;
-		sync(true);
-		place(trigger, panel);
-	};
-	const hide = (focus = false) => {
-		if (!open) return;
-		native ? panel.hidePopover() : panel.hidden = true;
-		sync(false);
-		if (focus) trigger.focus();
-	};
-	on(trigger, "click", () => open ? hide() : show());
-	on(panel, "beforetoggle", (event) => {
-		open = event.newState === "open";
-		trigger.setAttribute("aria-expanded", String(open));
-	});
-	on(panel, "click", (event) => {
-		if (event.target.closest("[data-close]")) hide(true);
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!native && !root.contains(event.target)) hide();
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape" && open) {
-			event.preventDefault();
-			event.stopPropagation();
-			hide(true);
-		}
-	});
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (open) place(trigger, panel);
-	});
-	trigger.setAttribute("aria-expanded", "false");
-	return {
-		show,
-		hide,
-		get open() {
-			return open;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		cleanup() {
-			hide();
-		}
-	};
-}
-function feedback(root, { on }) {
-	const dismiss = (item) => {
-		if (!item || !root.emit("dismiss", { id: item.id })) return;
-		const hadFocus = item.contains(root.ownerDocument.activeElement);
-		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
-		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
-		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
-		item.hidden = true;
-		if (hadFocus) next?.focus();
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button)) return;
-		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
-		else if (button.matches(".chip-filter")) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		} else if (button.matches("[data-retry]")) root.emit("retry", {});
-		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape") {
-			const toast = event.target.closest(".toast");
-			if (toast) {
-				event.preventDefault();
-				event.stopPropagation();
-				dismiss(toast);
-			}
-		}
-	});
-	return { dismiss(id) {
-		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
-	} };
-}
-//#endregion
-export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/popover/runtime/components/popover.js b/packages/ui/dist/copy/popover/runtime/components/popover.js
index bbc79107c..4ca710f90 100644
--- a/packages/ui/dist/copy/popover/runtime/components/popover.js
+++ b/packages/ui/dist/copy/popover/runtime/components/popover.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as popover } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as popover } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/popover.js
 var J3w1Popover = class extends J3w1Element {
 	static componentId = "popover";
 	static version = "4.0.0";
-	static implementationId = "sha256-R3mF1UXSn1CBWM10egGi9EjTZGc775igXYWKiLNBZSY=";
+	static implementationId = "sha256-8KG7XOC5HTOmJW+CysUIXfhkV3COWEwpPzmG6HXdN80=";
 	static connect = popover;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/popover/runtime/register/popover.js b/packages/ui/dist/copy/popover/runtime/register/popover.js
index 4a5798987..5f801317f 100644
--- a/packages/ui/dist/copy/popover/runtime/register/popover.js
+++ b/packages/ui/dist/copy/popover/runtime/register/popover.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Popover } from "../components/popover.js";
 //#region .cache/ui-build/entries/register/popover.js
 var element = registerElement("j3w1-popover", J3w1Popover);
diff --git a/packages/ui/dist/copy/popover/tokens.css b/packages/ui/dist/copy/popover/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/popover/tokens.css
+++ b/packages/ui/dist/copy/popover/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/progress/component.css b/packages/ui/dist/copy/progress/component.css
index e52e21a69..500205e3a 100644
--- a/packages/ui/dist/copy/progress/component.css
+++ b/packages/ui/dist/copy/progress/component.css
@@ -8,7 +8,7 @@ j3w1-progress {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-progress, j3w1-progress *, j3w1-progress *::before, j3w1-progress *::after { box-sizing: border-box; }
-j3w1-progress button, j3w1-progress input, j3w1-progress select, j3w1-progress textarea { font: inherit; }
+j3w1-progress :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-progress ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/packages/ui/dist/copy/progress/index.html b/packages/ui/dist/copy/progress/index.html
index 1e7848d70..30da0e733 100644
--- a/packages/ui/dist/copy/progress/index.html
+++ b/packages/ui/dist/copy/progress/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Progress · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-progress id="example-progress-determinate"><div class="progress">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Progress · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-progress id="example-progress-determinate"><div class="progress">
   <div class="progress-header">
     <label class="progress-label" for="example-progress-determinate-pg-upload">Uploading theme.json<span class="progress-error-glyph" aria-hidden="true"> ✕</span></label>
     <span class="progress-value">62%</span>
diff --git a/packages/ui/dist/copy/progress/manifest.json b/packages/ui/dist/copy/progress/manifest.json
index 0d2348a89..b879553a0 100644
--- a/packages/ui/dist/copy/progress/manifest.json
+++ b/packages/ui/dist/copy/progress/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/progress.md",
   "dependencies": [
     "register/progress.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/progress.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/progress.js": "sha256-wcMNQVWBoGiWoasImip5urxM4QZkIIiDqdTbDHFb09c=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/progress.js": "sha256-SoIKI41QOIzDVzCbEX4RjUwuYIgyVdRipglbNI30PdE=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-qVh6/s9QPg2t6WrczrtP5i8fP1blV8a6S9OZUF5oJdY=",
+    "runtime/register/progress.js": "sha256-njMsMaNTGgxOBV8TIDHAQYyRI8+ERzh0jbkOW22fUzc=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/progress.js": "sha256-nQLxDlUaGyc+Y+OKp0jTGxlgHN79YT/NpaldZf1fxSY=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-UwXFHO6OA2kZ3cHUZ8xWNx21ZB+espmS0o/GDj19Q4I=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-Bm2XYmsDcMrSYl/yKw1emmfA++ea/EjE5wzSjdg0eyw=",
-    "index.html": "sha256-PMCQa/n0AlL1bSbPiT96VPfHTQgJmUowUoHElZGYf5k=",
+    "index.html": "sha256-eR6RiF/n8XvphWFe6R1Htt1DNndZuhW1zRV0M5wb1lM=",
     "README.md": "sha256-oXXC+n+f426Xr1+uHSEamfpzBwqmaBbe41P73puQ9p4="
   }
 }
diff --git a/packages/ui/dist/copy/progress/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/progress/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/progress/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/progress/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/progress/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/progress/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/progress/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/progress/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/progress/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/progress/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/progress/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/progress/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/progress/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/progress/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/progress/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/progress/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/progress/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/progress/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/progress/runtime/components/progress.js b/packages/ui/dist/copy/progress/runtime/components/progress.js
index 2328cc005..c4664d716 100644
--- a/packages/ui/dist/copy/progress/runtime/components/progress.js
+++ b/packages/ui/dist/copy/progress/runtime/components/progress.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/progress.js
 var J3w1Progress = class extends J3w1Element {
 	static componentId = "progress";
 	static version = "4.0.0";
-	static implementationId = "sha256-pb/hnKbLN1fkkVEzliJMaxoY12bTHrD8nlVbfWNTXGE=";
+	static implementationId = "sha256-ayNpjS/tJF/VzILGmci24aDE3GR3edKDd1sGAVN7HtQ=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/progress/runtime/register/progress.js b/packages/ui/dist/copy/progress/runtime/register/progress.js
index 54bd975e5..29de54fb7 100644
--- a/packages/ui/dist/copy/progress/runtime/register/progress.js
+++ b/packages/ui/dist/copy/progress/runtime/register/progress.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Progress } from "../components/progress.js";
 //#region .cache/ui-build/entries/register/progress.js
 var element = registerElement("j3w1-progress", J3w1Progress);
diff --git a/packages/ui/dist/copy/progress/tokens.css b/packages/ui/dist/copy/progress/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/progress/tokens.css
+++ b/packages/ui/dist/copy/progress/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/radio-group/component.css b/packages/ui/dist/copy/radio-group/component.css
index a416e16f3..7dd7c53a5 100644
--- a/packages/ui/dist/copy/radio-group/component.css
+++ b/packages/ui/dist/copy/radio-group/component.css
@@ -8,7 +8,7 @@ j3w1-radio-group {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-radio-group, j3w1-radio-group *, j3w1-radio-group *::before, j3w1-radio-group *::after { box-sizing: border-box; }
-j3w1-radio-group button, j3w1-radio-group input, j3w1-radio-group select, j3w1-radio-group textarea { font: inherit; }
+j3w1-radio-group :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-radio-group ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-radio-group .sr-only {
   border: 0;
 }
 
+j3w1-radio-group .combobox-label,
+j3w1-radio-group .dialog-field-label,
+j3w1-radio-group .field-label,
+j3w1-radio-group .fieldset-label,
+j3w1-radio-group .file-input-label,
+j3w1-radio-group .number-field-label,
+j3w1-radio-group .search-field-label,
+j3w1-radio-group .select-label,
+j3w1-radio-group .text-field-label,
+j3w1-radio-group .textarea-label,
+j3w1-radio-group .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-radio-group .combobox-help,
+j3w1-radio-group .date-picker-help,
+j3w1-radio-group .dialog-field-help,
+j3w1-radio-group .fieldset-help,
+j3w1-radio-group .file-input-help,
+j3w1-radio-group .number-field-help,
+j3w1-radio-group .search-field-help,
+j3w1-radio-group .select-help,
+j3w1-radio-group .text-field-help,
+j3w1-radio-group .textarea-help,
+j3w1-radio-group .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-radio-group .combobox-message,
+j3w1-radio-group .date-picker-message,
+j3w1-radio-group .file-input-message,
+j3w1-radio-group .number-field-message,
+j3w1-radio-group .radio-group-message,
+j3w1-radio-group .select-message,
+j3w1-radio-group .text-field-message,
+j3w1-radio-group .textarea-message,
+j3w1-radio-group .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-radio-group .combobox-root,
+j3w1-radio-group .date-picker-root,
+j3w1-radio-group .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-radio-group .radio-group {
   display: grid;
   gap: var(--space-4);
@@ -63,7 +123,7 @@ j3w1-radio-group .radio-group-horizontal .radio-group-options {
 
 j3w1-radio-group .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -73,8 +133,8 @@ j3w1-radio-group .radio-group-option {
 
 j3w1-radio-group .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 j3w1-radio-group .radio-group-control > * {
@@ -83,8 +143,8 @@ j3w1-radio-group .radio-group-control > * {
 
 j3w1-radio-group .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -106,14 +166,6 @@ j3w1-radio-group .radio-group-text {
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
-
-j3w1-radio-group .radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-radio-group .radio-group-option:hover .radio-group-input:not(:disabled) {
     background: var(--color-interaction-hover-bg);
diff --git a/packages/ui/dist/copy/radio-group/index.html b/packages/ui/dist/copy/radio-group/index.html
index 1452bd105..9b184d585 100644
--- a/packages/ui/dist/copy/radio-group/index.html
+++ b/packages/ui/dist/copy/radio-group/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Radio group · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-radio-group id="example-radio-group-default"><fieldset class="radio-group" aria-describedby="example-radio-group-default-rg-layout-message">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Radio group · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-radio-group id="example-radio-group-default"><fieldset class="radio-group" aria-describedby="example-radio-group-default-rg-layout-message">
   <legend class="radio-group-legend">Default layout <span class="radio-group-required" aria-hidden="true">*</span><span class="radio-group-required sr-only"> required</span></legend>
   <div class="radio-group-options">
     <label class="radio-group-option">
diff --git a/packages/ui/dist/copy/radio-group/manifest.json b/packages/ui/dist/copy/radio-group/manifest.json
index 3ebb3cfe1..eea3484ca 100644
--- a/packages/ui/dist/copy/radio-group/manifest.json
+++ b/packages/ui/dist/copy/radio-group/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/radio-group.md",
   "dependencies": [
     "register/radio-group.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/radio-group.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/radio-group.js": "sha256-L7TPdkL+uckYkNZ8nwZWjfTisSvOmPO7rqB3QlmfaTI=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/radio-group.js": "sha256-UtfAZUI/Cr3R29YvS/0As27FUks0dSZ5e2Jcx6yDfxk=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-Ig6nuF1jMxOL71ppi7cvN8DjEKs9unk/ugZ0b1XTImY=",
+    "runtime/register/radio-group.js": "sha256-ewlJRFup1XukqJJNHbI7o4+IBxMHYc4zRErGTSTTCOE=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/radio-group.js": "sha256-2H9k0HsCH7vOePvpZIurg4X8R/tWx69+wbMsKbawdJQ=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-H+SbIsTUcbJYlW9LE6upB3zGttJxr9Wa/0GAcfv9Q6M=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-6HA7gvr2JUQeKZ5jWPcVyfSw5t4FmaqlAA/+mhuSJjc=",
-    "index.html": "sha256-4ptm1dy28zuJlLU04Zd8QtEveiw6njq8DNNQd89W/1w=",
+    "index.html": "sha256-JXkdz3Ty4ygZ8c9K7ftH4J8rbquZw4UXpB47/g2uw1g=",
     "README.md": "sha256-L+Z3W5VfP83lnvB20pwCI2E1gQ/vKF4Yvd/mDw4diyE="
   }
 }
diff --git a/packages/ui/dist/copy/radio-group/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/radio-group/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/radio-group/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/radio-group/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/radio-group/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/radio-group/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/radio-group/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/radio-group/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/radio-group/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/radio-group/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/radio-group/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/radio-group/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/radio-group/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/radio-group/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/radio-group/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/radio-group/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/radio-group/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/radio-group/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/radio-group/runtime/components/radio-group.js b/packages/ui/dist/copy/radio-group/runtime/components/radio-group.js
index e82d3422f..9c5100135 100644
--- a/packages/ui/dist/copy/radio-group/runtime/components/radio-group.js
+++ b/packages/ui/dist/copy/radio-group/runtime/components/radio-group.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/radio-group.js
 var J3w1RadioGroup = class extends J3w1Element {
 	static componentId = "radio-group";
 	static version = "4.0.0";
-	static implementationId = "sha256-zaWExle/kKyvESOFtr11ZVTV64fMoCjROxiCHKlvwyY=";
+	static implementationId = "sha256-qoOHybVksZNlma+H614aGdgiZ/u0EegTSeDcIojBXA0=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/radio-group/runtime/register/radio-group.js b/packages/ui/dist/copy/radio-group/runtime/register/radio-group.js
index e40f29b44..a41f213ff 100644
--- a/packages/ui/dist/copy/radio-group/runtime/register/radio-group.js
+++ b/packages/ui/dist/copy/radio-group/runtime/register/radio-group.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1RadioGroup } from "../components/radio-group.js";
 //#region .cache/ui-build/entries/register/radio-group.js
 var element = registerElement("j3w1-radio-group", J3w1RadioGroup);
diff --git a/packages/ui/dist/copy/radio-group/tokens.css b/packages/ui/dist/copy/radio-group/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/radio-group/tokens.css
+++ b/packages/ui/dist/copy/radio-group/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/range/component.css b/packages/ui/dist/copy/range/component.css
index 279ce659f..71b20e111 100644
--- a/packages/ui/dist/copy/range/component.css
+++ b/packages/ui/dist/copy/range/component.css
@@ -8,7 +8,7 @@ j3w1-range {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-range, j3w1-range *, j3w1-range *::before, j3w1-range *::after { box-sizing: border-box; }
-j3w1-range button, j3w1-range input, j3w1-range select, j3w1-range textarea { font: inherit; }
+j3w1-range :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-range ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,15 +26,15 @@ j3w1-range .sr-only {
 }
 
 j3w1-range :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-range :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-range :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-range :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-range :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-range :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-range :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-range :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-range :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-range .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-range .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-range .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-range .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-range .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-range .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-range .j3w1-temporal :focus-visible,j3w1-range .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -58,7 +58,7 @@ j3w1-range .j3w1-calendar [aria-pressed="true"] { background:var(--color-interac
 j3w1-range .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-range .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-range .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-range .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-range .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-range .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-range .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-range .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -66,7 +66,7 @@ j3w1-range .j3w1-choice-trigger:focus-visible,j3w1-range .j3w1-choice-list:focus
 j3w1-range .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-range .j3w1-choice-list[popover] { inset: auto; }
 j3w1-range .j3w1-choice-list[hidden] { display: none; }
-j3w1-range .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-range .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-range .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-range .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-range .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -80,25 +80,23 @@ j3w1-range .j3w1-choice-error { display: block; color: var(--color-status-danger
 j3w1-range .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-range .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-range :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-range input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-range input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-range input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-range input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-range input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-range input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-range input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-range input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-range input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-range input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-range input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-range input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-range input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-range input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-range input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-range input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-range input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-range input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
 
 j3w1-range .range {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-range .range-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-range .range :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-range .range :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-range .range :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-j3w1-range .range-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 j3w1-range .range input {width:100%;min-height:var(--density-control-height);accent-color:var(--color-action-primary-bg)}j3w1-range .range output {font-variant-numeric:tabular-nums}
 
 j3w1-range [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/range/index.html b/packages/ui/dist/copy/range/index.html
index 8d5adb3d3..abd9cb6ff 100644
--- a/packages/ui/dist/copy/range/index.html
+++ b/packages/ui/dist/copy/range/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Range · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-range id="example-range-default"><div class="range"><label for="example-range-default-range-value">Preview volume</label><input id="example-range-default-range-value" name="example-range-default-volume" type="range" min="0" max="100" step="5" value="40" data-demo-focus-target=""><output for="example-range-default-range-value">40</output></div></j3w1-range><script type="module" src="./runtime/register/range.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Range · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-range id="example-range-default"><div class="range"><label for="example-range-default-range-value">Preview volume</label><input id="example-range-default-range-value" name="example-range-default-volume" type="range" min="0" max="100" step="5" value="40" data-demo-focus-target=""><output for="example-range-default-range-value">40</output></div></j3w1-range><script type="module" src="./runtime/register/range.js"></script></body></html>
diff --git a/packages/ui/dist/copy/range/manifest.json b/packages/ui/dist/copy/range/manifest.json
index 056ca641d..de1c1eb16 100644
--- a/packages/ui/dist/copy/range/manifest.json
+++ b/packages/ui/dist/copy/range/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/range.md",
   "dependencies": [
     "register/range.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/range.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/range.js": "sha256-g8jU/JKj2ySLza7/G+XS4TC2NE8Gwuw6lyc+G1k9pi4=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/range.js": "sha256-uAqR2sA5IXjunYSDuvl+0MoUbuwonAPLwhQFCExPI/I=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-XwLMipanpFGzjbmGs1VEzJL/+7DPUuYTewuadW6x3zE=",
+    "runtime/register/range.js": "sha256-HYsfnS/M/wjcD+spw64Qas+a8kndWqTvSRdBedy0U6g=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/range.js": "sha256-UOtb5bcowunT33yEodiHV5YKGl/OTUl5qSsO3xxwSHY=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-4ayZ4hpLNMgckII249GLN4LXptEvABeXopUcVCG8gLc=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-F3TYZf5Pysp2EfVbSAxBHmgiviXyRS3/dKjUdvZrzF0=",
-    "index.html": "sha256-xuKPgkTCOPNTZ8muQffKPJpVLWZpA03yfkf+90bVZmw=",
+    "index.html": "sha256-1VRc632ZL0iJ4ZwPDOH9ZKFqS1JtFx995UBRKpNUDTU=",
     "README.md": "sha256-lW1eqkbbrr3cTilmwEqgWHViJTPEMEDqDOHhsAizE1I="
   }
 }
diff --git a/packages/ui/dist/copy/range/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/range/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/range/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/range/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/range/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/range/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/range/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/range/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/range/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/range/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/range/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/range/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/range/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/range/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/range/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/range/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/range/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/range/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/range/runtime/components/range.js b/packages/ui/dist/copy/range/runtime/components/range.js
index 8c18e09bc..b560b2a51 100644
--- a/packages/ui/dist/copy/range/runtime/components/range.js
+++ b/packages/ui/dist/copy/range/runtime/components/range.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/range.js
 var J3w1Range = class extends J3w1Element {
 	static componentId = "range";
 	static version = "4.0.0";
-	static implementationId = "sha256-775qtEkdJpV+XXDTSY5Jta+nPBg9zq9OpoCwXoM1X30=";
+	static implementationId = "sha256-zCJuNTps0+QV29mUu6dGnyhnpifuS7WnpWWjLJtkpdo=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/range/runtime/register/range.js b/packages/ui/dist/copy/range/runtime/register/range.js
index 9711437a7..63b83eab7 100644
--- a/packages/ui/dist/copy/range/runtime/register/range.js
+++ b/packages/ui/dist/copy/range/runtime/register/range.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Range } from "../components/range.js";
 //#region .cache/ui-build/entries/register/range.js
 var element = registerElement("j3w1-range", J3w1Range);
diff --git a/packages/ui/dist/copy/range/tokens.css b/packages/ui/dist/copy/range/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/range/tokens.css
+++ b/packages/ui/dist/copy/range/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/repeater/component.css b/packages/ui/dist/copy/repeater/component.css
index 2c984d3a4..dbc3ffc79 100644
--- a/packages/ui/dist/copy/repeater/component.css
+++ b/packages/ui/dist/copy/repeater/component.css
@@ -8,7 +8,7 @@ j3w1-repeater {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-repeater, j3w1-repeater *, j3w1-repeater *::before, j3w1-repeater *::after { box-sizing: border-box; }
-j3w1-repeater button, j3w1-repeater input, j3w1-repeater select, j3w1-repeater textarea { font: inherit; }
+j3w1-repeater :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-repeater ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,135 @@ j3w1-repeater .sr-only {
   border: 0;
 }
 
+j3w1-repeater .button,
+j3w1-repeater .dialog-button,
+j3w1-repeater .empty-state-action,
+j3w1-repeater .file-input-button,
+j3w1-repeater button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-repeater .button,
+j3w1-repeater .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-repeater .button-secondary,
+j3w1-repeater .dialog-button,
+j3w1-repeater .empty-state-action,
+j3w1-repeater .file-input-button,
+j3w1-repeater button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-repeater .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-repeater .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-repeater .button-destructive-filled,
+j3w1-repeater .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-repeater :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-repeater .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-repeater :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-repeater :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-repeater :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-repeater .dialog-button,
+  j3w1-repeater .empty-state-action,
+  j3w1-repeater .file-input-button,
+  j3w1-repeater button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-repeater :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-repeater .repeater {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-repeater .repeater-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-repeater .repeater :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-repeater .repeater :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-repeater .repeater :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
 j3w1-repeater .repeater-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 j3w1-repeater .repeater ol {display:grid;gap:var(--space-12);padding-inline-start:var(--space-24)}j3w1-repeater .repeater [data-empty] {color:var(--color-text-muted)}
diff --git a/packages/ui/dist/copy/repeater/index.html b/packages/ui/dist/copy/repeater/index.html
index fd21c7aab..554ca7c9f 100644
--- a/packages/ui/dist/copy/repeater/index.html
+++ b/packages/ui/dist/copy/repeater/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Repeater · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-repeater id="example-repeater-default" max="10"><section class="repeater" aria-label="Additional contacts"><ol data-rows=""></ol><template data-row-template=""><li class="repeater-item"><label for="example-repeater-default-contact-name">Contact name</label><input class="repeater-control" id="example-repeater-default-contact-name" name="example-repeater-default-contact" required=""><div class="repeater-actions"><button class="repeater-control" type="button" data-move="-1">Move up</button><button class="repeater-control" type="button" data-move="1">Move down</button><button class="repeater-control" type="button" data-remove="">Remove</button></div></li></template><p data-empty="">No contacts added.</p><button class="repeater-control" type="button" data-add="" data-demo-focus-target="">Add contact</button><p role="status" data-repeater-status=""></p></section></j3w1-repeater><script type="module" src="./runtime/register/repeater.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Repeater · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-repeater id="example-repeater-default" max="10"><section class="repeater" aria-label="Additional contacts"><ol data-rows=""></ol><template data-row-template=""><li class="repeater-item"><label for="example-repeater-default-contact-name">Contact name</label><input class="repeater-control" id="example-repeater-default-contact-name" name="example-repeater-default-contact" required=""><div class="repeater-actions"><button class="repeater-control" type="button" data-move="-1">Move up</button><button class="repeater-control" type="button" data-move="1">Move down</button><button class="repeater-control" type="button" data-remove="">Remove</button></div></li></template><p data-empty="">No contacts added.</p><button class="repeater-control" type="button" data-add="" data-demo-focus-target="">Add contact</button><p role="status" data-repeater-status=""></p></section></j3w1-repeater><script type="module" src="./runtime/register/repeater.js"></script></body></html>
diff --git a/packages/ui/dist/copy/repeater/manifest.json b/packages/ui/dist/copy/repeater/manifest.json
index 25ce83f73..e634f44b6 100644
--- a/packages/ui/dist/copy/repeater/manifest.json
+++ b/packages/ui/dist/copy/repeater/manifest.json
@@ -5,24 +5,24 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/repeater.md",
   "dependencies": [
     "register/repeater.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/repeater.js",
-    "chunks/advanced-DCpe8Ndv.js",
+    "chunks/advanced-CqBF0dSb.js",
     "chunks/markup-DeQ4bEMR.js"
   ],
   "files": {
-    "runtime/register/repeater.js": "sha256-CL1MU0vVSqQyPhS6UQWzKLVZqxO0fbuljqqDRE9GvUA=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/repeater.js": "sha256-pe+MgGoQpseF+J8HpfkS5wU84MsVLuCJl6BAzoyS+lU=",
-    "runtime/chunks/advanced-DCpe8Ndv.js": "sha256-nr1LFdLYsGeTM4vDyldvuJygRm0F04sYonxatySPu1g=",
+    "runtime/register/repeater.js": "sha256-+BJGwFC4ULsZj2rUXucqIP4bkN1LZVFvuFrN1eK5zsw=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/repeater.js": "sha256-S5GJEE4PdeXjexdZXmIgJnjsOURVZHpQCSJzc+huJXc=",
+    "runtime/chunks/advanced-CqBF0dSb.js": "sha256-ozOzkRU6IeVGBqU3XQ0aLledkAi9vcs8dJdMQutVevs=",
     "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-IEhREL5vlXFRdDmE8HHaqwhAbMJ8feOqTJ5MMrQGztk=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-rx26lMPjdf1Z/n5dSt0W680aeH4/Vf/JHj+aVD7Yd0g=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-DSCQzrRbDwFOKtw5YmpR+3oYWMIBJFIPnJpes5bSMPY=",
-    "index.html": "sha256-c0jxp+wZ+Fh6pdflIdXG673av6oOTGx7HobpD63O2Sk=",
+    "index.html": "sha256-NcmqHhIALqiMTfxl0qPl+bYykJcUXvHzjXqS4Po+QCI=",
     "README.md": "sha256-iFFjPHWI+gh/aJ7+flDL4I/Qaclwv1yCfGRuJ06o6tE="
   }
 }
diff --git a/packages/ui/dist/copy/repeater/runtime/chunks/advanced-CqBF0dSb.js b/packages/ui/dist/copy/repeater/runtime/chunks/advanced-CqBF0dSb.js
new file mode 100644
index 000000000..4a5c45981
--- /dev/null
+++ b/packages/ui/dist/copy/repeater/runtime/chunks/advanced-CqBF0dSb.js
@@ -0,0 +1,345 @@
+import { c as keyIndex, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
+import { t as IDREFS } from "./markup-DeQ4bEMR.js";
+//#region packages/ui/src/behaviors/advanced.js
+function tree(root, { on }) {
+	const treeRoot = root.querySelector("[role=\"tree\"]");
+	if (!treeRoot) return {};
+	const items = () => all(treeRoot, "[role=\"treeitem\"]");
+	const shown = () => items().filter(visible);
+	const group = (item) => [...item.children].find((node) => node.getAttribute("role") === "group");
+	const parent = (item) => item.parentElement.closest("[role=\"treeitem\"]");
+	items().forEach((item, index) => {
+		identify(root, item, `node-${index}`);
+		const children = group(item);
+		if (children) {
+			if (!item.hasAttribute("aria-expanded")) item.setAttribute("aria-expanded", "false");
+			children.hidden = item.getAttribute("aria-expanded") !== "true";
+		}
+	});
+	const select = (id) => {
+		const item = items().find((node) => node.id === id);
+		if (!item || !enabled(item)) throw new RangeError(`Unknown enabled tree item: ${id}`);
+		items().forEach((node) => node.setAttribute("aria-selected", String(node === item)));
+	};
+	const expand = (id, expanded = true) => {
+		const item = items().find((node) => node.id === id), children = item && group(item);
+		if (!children) throw new RangeError(`Unknown tree parent: ${id}`);
+		if (!expanded && children.contains(root.ownerDocument.activeElement)) rove(items(), items().indexOf(item));
+		item.setAttribute("aria-expanded", String(Boolean(expanded)));
+		children.hidden = !expanded;
+		const toggle = item.querySelector(":scope > [data-tree-label] > [data-tree-toggle]");
+		if (toggle) toggle.setAttribute("aria-label", expanded ? "Collapse" : "Expand");
+		root.emit("toggle", {
+			id,
+			expanded: Boolean(expanded)
+		});
+	};
+	const activate = (item) => {
+		if (enabled(item)) {
+			select(item.id);
+			root.emit("select", { id: item.id });
+		}
+	};
+	const initial = shown();
+	rove(initial, Math.max(0, initial.findIndex((item) => item.tabIndex === 0)), false);
+	on(treeRoot, "click", (event) => {
+		const item = event.target.closest("[role=\"treeitem\"]");
+		if (!item) return;
+		rove(shown(), shown().indexOf(item));
+		if (event.target.closest("[data-tree-toggle]") && group(item)) expand(item.id, item.getAttribute("aria-expanded") !== "true");
+		else activate(item);
+	});
+	on(treeRoot, "dblclick", (event) => {
+		const item = event.target.closest("[role=\"treeitem\"]");
+		if (item && group(item) && !event.target.closest("[data-tree-toggle]")) expand(item.id, item.getAttribute("aria-expanded") !== "true");
+	});
+	on(treeRoot, "keydown", (event) => {
+		const item = event.target.closest("[role=\"treeitem\"]");
+		if (!item) return;
+		const options = shown(), index = options.indexOf(item), rtl = getComputedStyle(treeRoot).direction === "rtl";
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = keyIndex({
+				key: event.key,
+				index,
+				length: options.length,
+				wrap: false
+			});
+			rove(options, next);
+		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
+			event.preventDefault();
+			if (group(item)) {
+				if (item.getAttribute("aria-expanded") !== "true") expand(item.id);
+				else rove(shown(), shown().indexOf(item) + 1);
+			}
+		} else if (event.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
+			event.preventDefault();
+			if (group(item) && item.getAttribute("aria-expanded") === "true") expand(item.id, false);
+			else if (parent(item)) rove(options, options.indexOf(parent(item)));
+		} else if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			activate(item);
+		} else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(":scope > [data-tree-label]")?.textContent ?? node.firstChild?.textContent ?? "").trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+			if (found) {
+				event.preventDefault();
+				rove(options, options.indexOf(found));
+			}
+		}
+	});
+	return {
+		expand,
+		get selectedId() {
+			return items().find((item) => item.getAttribute("aria-selected") === "true")?.id ?? "";
+		},
+		set selectedId(id) {
+			select(id);
+		}
+	};
+}
+function multiselect(root, { on, signal }) {
+	const query = root.querySelector("[data-filter]"), status = root.querySelector("[data-selection-status]"), boxes = all(root, "input[type=\"checkbox\"]");
+	const values = () => boxes.filter((box) => box.checked).map((box) => box.value);
+	const draw = () => {
+		let matches = 0;
+		for (const box of boxes) {
+			const label = box.closest("label");
+			if (!label) continue;
+			label.hidden = !label.textContent.toLocaleLowerCase().includes((query?.value ?? "").toLocaleLowerCase());
+			if (!label.hidden) matches++;
+		}
+		if (status) status.textContent = `${matches} matching options; ${values().length} selected`;
+	};
+	const report = () => {
+		draw();
+		root.emit("selection", { values: values() });
+	};
+	const setValues = (selected) => {
+		if (!Array.isArray(selected) || selected.some((value) => !boxes.some((box) => box.value === value))) throw new TypeError("values must contain known checkbox values");
+		boxes.forEach((box) => {
+			box.checked = selected.includes(box.value);
+		});
+		draw();
+	};
+	const clear = () => {
+		if (root.hasAttribute("disabled")) return;
+		boxes.filter(enabled).forEach((box) => {
+			if (box.checked) {
+				box.checked = false;
+				nativeInput(box);
+				nativeInput(box, "change");
+			}
+		});
+		report();
+	};
+	on(query, "input", draw);
+	on(query, "keydown", (event) => {
+		if (event.key === "Escape" && query.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			query.value = "";
+			draw();
+		}
+	});
+	on(root.querySelector("[data-clear-selection]"), "click", clear);
+	boxes.forEach((box) => on(box, "change", report));
+	on(boxes[0]?.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		clear,
+		get values() {
+			return values();
+		},
+		set values(selected) {
+			setValues(selected);
+		}
+	};
+}
+function repeater(root, { on }) {
+	const rows = root.querySelector("[data-rows]"), template = root.querySelector("template[data-row-template]"), addButton = root.querySelector("[data-add]"), status = root.querySelector("[data-repeater-status]");
+	if (!rows || !template) return {};
+	let sequence = Number(root.dataset.rowSequence ?? 0);
+	const maximum = () => {
+		const value = Number(root.getAttribute("max") ?? 10);
+		if (!Number.isInteger(value) || value < 1 || value > 100) throw new RangeError("max must be an integer from 1 to 100");
+		return value;
+	};
+	const children = () => [...rows.children];
+	const draw = (message) => {
+		const items = children();
+		if (addButton) addButton.disabled = root.hasAttribute("disabled") || items.length >= maximum();
+		const empty = root.querySelector("[data-empty]");
+		if (empty) empty.hidden = items.length !== 0;
+		items.forEach((row, index) => {
+			all(row, "[data-move]").forEach((button) => {
+				button.disabled = root.hasAttribute("disabled") || (Number(button.dataset.move) < 0 ? index === 0 : index === items.length - 1);
+			});
+		});
+		if (message && status) status.textContent = message;
+	};
+	const report = (message) => {
+		draw(message);
+		root.emit("rows", { ids: children().map((row) => row.id) });
+	};
+	const add = () => {
+		if (children().length >= maximum() || root.hasAttribute("disabled")) return null;
+		const row = template.content.firstElementChild.cloneNode(true);
+		const id = `${root.id}-row-${++sequence}`;
+		root.dataset.rowSequence = String(sequence);
+		row.id = id;
+		const ids = /* @__PURE__ */ new Map();
+		all(row, "[id]").forEach((node) => {
+			ids.set(node.id, `${id}-${node.id}`);
+			node.id = ids.get(node.id);
+		});
+		for (const node of all(row, "*")) for (const attr of [...node.attributes]) {
+			if (IDREFS.has(attr.name)) node.setAttribute(attr.name, attr.value.split(/\s+/).map((value) => ids.get(value) ?? value).join(" "));
+			if (attr.name === "name") node.name = `${id}[${attr.value}]`;
+		}
+		rows.append(row);
+		report("Row added.");
+		row.querySelector("input,select,textarea,button")?.focus();
+		return id;
+	};
+	const remove = (id) => {
+		const items = children(), index = items.findIndex((row) => row.id === id);
+		if (index < 0) throw new RangeError(`Unknown row: ${id}`);
+		if (root.hasAttribute("disabled")) return;
+		const hadFocus = items[index].contains(root.ownerDocument.activeElement);
+		items[index].remove();
+		report("Row removed.");
+		if (hadFocus) (children()[Math.min(index, children().length - 1)]?.querySelector("input,select,textarea,button") ?? addButton)?.focus();
+	};
+	const move = (id, direction) => {
+		if (![-1, 1].includes(direction)) throw new RangeError("direction must be -1 or 1");
+		const items = children(), index = items.findIndex((row) => row.id === id), target = index + direction;
+		if (index < 0) throw new RangeError(`Unknown row: ${id}`);
+		if (target < 0 || target >= items.length || root.hasAttribute("disabled")) return;
+		const focused = root.ownerDocument.activeElement;
+		if (direction < 0) rows.insertBefore(items[index], items[target]);
+		else rows.insertBefore(items[target], items[index]);
+		report(direction < 0 ? "Row moved up." : "Row moved down.");
+		if (items[index].contains(focused) && !focused.disabled) focused.focus();
+		else items[index].querySelector("input,select,textarea,button:not(:disabled)")?.focus();
+	};
+	on(addButton, "click", add);
+	on(rows, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button)) return;
+		const row = children().find((item) => item.contains(button));
+		if (button.hasAttribute("data-remove")) remove(row.id);
+		else if (button.hasAttribute("data-move")) move(row.id, Number(button.dataset.move));
+	});
+	draw();
+	return {
+		add,
+		remove,
+		move,
+		get rowIds() {
+			return children().map((row) => row.id);
+		},
+		attributeChanged() {
+			draw();
+		}
+	};
+}
+function commandPalette(root, { on }) {
+	const dialog = root.querySelector("dialog"), input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]"), status = root.querySelector("[data-command-status]");
+	if (!dialog || !input || !list) return {};
+	let opener, active = null;
+	all(list, "[role=\"option\"]").forEach((option, index) => {
+		identify(root, option, `command-${index}`);
+		option.tabIndex = -1;
+	});
+	const options = () => all(list, "[role=\"option\"]").filter((option) => enabled(option) && !option.hidden);
+	const select = (option) => {
+		active = option;
+		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
+		if (option) {
+			input.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		} else input.removeAttribute("aria-activedescendant");
+	};
+	const filter = () => {
+		all(list, "[role=\"option\"]").forEach((option) => {
+			option.hidden = !option.textContent.toLocaleLowerCase().includes(input.value.toLocaleLowerCase());
+		});
+		select(options()[0] ?? null);
+		if (status) status.textContent = `${options().length} commands`;
+	};
+	const show = (trigger = root.ownerDocument.activeElement) => {
+		if (dialog.open || root.hasAttribute("disabled")) return;
+		opener = trigger;
+		dialog.showModal();
+		filter();
+		input.focus();
+	};
+	const close = () => {
+		if (dialog.open) dialog.close();
+	};
+	const invoke = (option) => {
+		if (!option || !enabled(option)) return;
+		const link = option.matches("a[href]") ? option : option.querySelector("a[href]");
+		const proceed = root.emit("command", {
+			action: option.dataset.action ?? option.id,
+			href: link?.getAttribute("href") ?? null
+		});
+		close();
+		if (proceed && link) root.ownerDocument.defaultView.location.assign(link.href);
+	};
+	on(root, "click", (event) => {
+		const trigger = event.target.closest("[data-open]");
+		if (trigger) show(trigger);
+		else if (event.target.closest("[data-close]")) close();
+		else {
+			const option = event.target.closest("[role=\"option\"]");
+			if (option) {
+				event.preventDefault();
+				invoke(option);
+			}
+		}
+	});
+	on(input, "input", filter);
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close();
+		} else if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			const items = options(), index = items.indexOf(active);
+			if (items.length) select(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			invoke(active);
+		}
+	});
+	on(dialog, "close", () => {
+		if (opener?.isConnected) opener.focus();
+	});
+	on(root.ownerDocument, "keydown", (event) => {
+		if (root.hasAttribute("shortcut") && (event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "k" && !event.defaultPrevented) {
+			event.preventDefault();
+			dialog.open ? close() : show();
+		}
+	});
+	return {
+		show,
+		close,
+		get open() {
+			return dialog.open;
+		},
+		set open(value) {
+			value ? show() : close();
+		},
+		cleanup: close
+	};
+}
+//#endregion
+export { tree as i, multiselect as n, repeater as r, commandPalette as t };
diff --git a/packages/ui/dist/copy/repeater/runtime/chunks/advanced-DCpe8Ndv.js b/packages/ui/dist/copy/repeater/runtime/chunks/advanced-DCpe8Ndv.js
deleted file mode 100644
index 3390a044c..000000000
--- a/packages/ui/dist/copy/repeater/runtime/chunks/advanced-DCpe8Ndv.js
+++ /dev/null
@@ -1,340 +0,0 @@
-import { d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
-import { t as IDREFS } from "./markup-DeQ4bEMR.js";
-//#region packages/ui/src/behaviors/advanced.js
-function tree(root, { on }) {
-	const treeRoot = root.querySelector("[role=\"tree\"]");
-	if (!treeRoot) return {};
-	const items = () => all(treeRoot, "[role=\"treeitem\"]");
-	const shown = () => items().filter(visible);
-	const group = (item) => [...item.children].find((node) => node.getAttribute("role") === "group");
-	const parent = (item) => item.parentElement.closest("[role=\"treeitem\"]");
-	items().forEach((item, index) => {
-		identify(root, item, `node-${index}`);
-		const children = group(item);
-		if (children) {
-			if (!item.hasAttribute("aria-expanded")) item.setAttribute("aria-expanded", "false");
-			children.hidden = item.getAttribute("aria-expanded") !== "true";
-		}
-	});
-	const select = (id) => {
-		const item = items().find((node) => node.id === id);
-		if (!item || !enabled(item)) throw new RangeError(`Unknown enabled tree item: ${id}`);
-		items().forEach((node) => node.setAttribute("aria-selected", String(node === item)));
-	};
-	const expand = (id, expanded = true) => {
-		const item = items().find((node) => node.id === id), children = item && group(item);
-		if (!children) throw new RangeError(`Unknown tree parent: ${id}`);
-		if (!expanded && children.contains(root.ownerDocument.activeElement)) rove(items(), items().indexOf(item));
-		item.setAttribute("aria-expanded", String(Boolean(expanded)));
-		children.hidden = !expanded;
-		const toggle = item.querySelector(":scope > [data-tree-label] > [data-tree-toggle]");
-		if (toggle) toggle.setAttribute("aria-label", expanded ? "Collapse" : "Expand");
-		root.emit("toggle", {
-			id,
-			expanded: Boolean(expanded)
-		});
-	};
-	const activate = (item) => {
-		if (enabled(item)) {
-			select(item.id);
-			root.emit("select", { id: item.id });
-		}
-	};
-	const initial = shown();
-	rove(initial, Math.max(0, initial.findIndex((item) => item.tabIndex === 0)), false);
-	on(treeRoot, "click", (event) => {
-		const item = event.target.closest("[role=\"treeitem\"]");
-		if (!item) return;
-		rove(shown(), shown().indexOf(item));
-		if (event.target.closest("[data-tree-toggle]") && group(item)) expand(item.id, item.getAttribute("aria-expanded") !== "true");
-		else activate(item);
-	});
-	on(treeRoot, "dblclick", (event) => {
-		const item = event.target.closest("[role=\"treeitem\"]");
-		if (item && group(item) && !event.target.closest("[data-tree-toggle]")) expand(item.id, item.getAttribute("aria-expanded") !== "true");
-	});
-	on(treeRoot, "keydown", (event) => {
-		const item = event.target.closest("[role=\"treeitem\"]");
-		if (!item) return;
-		const options = shown(), index = options.indexOf(item), rtl = getComputedStyle(treeRoot).direction === "rtl";
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
-			rove(options, next);
-		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
-			event.preventDefault();
-			if (group(item)) {
-				if (item.getAttribute("aria-expanded") !== "true") expand(item.id);
-				else rove(shown(), shown().indexOf(item) + 1);
-			}
-		} else if (event.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
-			event.preventDefault();
-			if (group(item) && item.getAttribute("aria-expanded") === "true") expand(item.id, false);
-			else if (parent(item)) rove(options, options.indexOf(parent(item)));
-		} else if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			activate(item);
-		} else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(":scope > [data-tree-label]")?.textContent ?? node.firstChild?.textContent ?? "").trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-			if (found) {
-				event.preventDefault();
-				rove(options, options.indexOf(found));
-			}
-		}
-	});
-	return {
-		expand,
-		get selectedId() {
-			return items().find((item) => item.getAttribute("aria-selected") === "true")?.id ?? "";
-		},
-		set selectedId(id) {
-			select(id);
-		}
-	};
-}
-function multiselect(root, { on, signal }) {
-	const query = root.querySelector("[data-filter]"), status = root.querySelector("[data-selection-status]"), boxes = all(root, "input[type=\"checkbox\"]");
-	const values = () => boxes.filter((box) => box.checked).map((box) => box.value);
-	const draw = () => {
-		let matches = 0;
-		for (const box of boxes) {
-			const label = box.closest("label");
-			if (!label) continue;
-			label.hidden = !label.textContent.toLocaleLowerCase().includes((query?.value ?? "").toLocaleLowerCase());
-			if (!label.hidden) matches++;
-		}
-		if (status) status.textContent = `${matches} matching options; ${values().length} selected`;
-	};
-	const report = () => {
-		draw();
-		root.emit("selection", { values: values() });
-	};
-	const setValues = (selected) => {
-		if (!Array.isArray(selected) || selected.some((value) => !boxes.some((box) => box.value === value))) throw new TypeError("values must contain known checkbox values");
-		boxes.forEach((box) => {
-			box.checked = selected.includes(box.value);
-		});
-		draw();
-	};
-	const clear = () => {
-		if (root.hasAttribute("disabled")) return;
-		boxes.filter(enabled).forEach((box) => {
-			if (box.checked) {
-				box.checked = false;
-				nativeInput(box);
-				nativeInput(box, "change");
-			}
-		});
-		report();
-	};
-	on(query, "input", draw);
-	on(query, "keydown", (event) => {
-		if (event.key === "Escape" && query.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			query.value = "";
-			draw();
-		}
-	});
-	on(root.querySelector("[data-clear-selection]"), "click", clear);
-	boxes.forEach((box) => on(box, "change", report));
-	on(boxes[0]?.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		clear,
-		get values() {
-			return values();
-		},
-		set values(selected) {
-			setValues(selected);
-		}
-	};
-}
-function repeater(root, { on }) {
-	const rows = root.querySelector("[data-rows]"), template = root.querySelector("template[data-row-template]"), addButton = root.querySelector("[data-add]"), status = root.querySelector("[data-repeater-status]");
-	if (!rows || !template) return {};
-	let sequence = Number(root.dataset.rowSequence ?? 0);
-	const maximum = () => {
-		const value = Number(root.getAttribute("max") ?? 10);
-		if (!Number.isInteger(value) || value < 1 || value > 100) throw new RangeError("max must be an integer from 1 to 100");
-		return value;
-	};
-	const children = () => [...rows.children];
-	const draw = (message) => {
-		const items = children();
-		if (addButton) addButton.disabled = root.hasAttribute("disabled") || items.length >= maximum();
-		const empty = root.querySelector("[data-empty]");
-		if (empty) empty.hidden = items.length !== 0;
-		items.forEach((row, index) => {
-			all(row, "[data-move]").forEach((button) => {
-				button.disabled = root.hasAttribute("disabled") || (Number(button.dataset.move) < 0 ? index === 0 : index === items.length - 1);
-			});
-		});
-		if (message && status) status.textContent = message;
-	};
-	const report = (message) => {
-		draw(message);
-		root.emit("rows", { ids: children().map((row) => row.id) });
-	};
-	const add = () => {
-		if (children().length >= maximum() || root.hasAttribute("disabled")) return null;
-		const row = template.content.firstElementChild.cloneNode(true);
-		const id = `${root.id}-row-${++sequence}`;
-		root.dataset.rowSequence = String(sequence);
-		row.id = id;
-		const ids = /* @__PURE__ */ new Map();
-		all(row, "[id]").forEach((node) => {
-			ids.set(node.id, `${id}-${node.id}`);
-			node.id = ids.get(node.id);
-		});
-		for (const node of all(row, "*")) for (const attr of [...node.attributes]) {
-			if (IDREFS.has(attr.name)) node.setAttribute(attr.name, attr.value.split(/\s+/).map((value) => ids.get(value) ?? value).join(" "));
-			if (attr.name === "name") node.name = `${id}[${attr.value}]`;
-		}
-		rows.append(row);
-		report("Row added.");
-		row.querySelector("input,select,textarea,button")?.focus();
-		return id;
-	};
-	const remove = (id) => {
-		const items = children(), index = items.findIndex((row) => row.id === id);
-		if (index < 0) throw new RangeError(`Unknown row: ${id}`);
-		if (root.hasAttribute("disabled")) return;
-		const hadFocus = items[index].contains(root.ownerDocument.activeElement);
-		items[index].remove();
-		report("Row removed.");
-		if (hadFocus) (children()[Math.min(index, children().length - 1)]?.querySelector("input,select,textarea,button") ?? addButton)?.focus();
-	};
-	const move = (id, direction) => {
-		if (![-1, 1].includes(direction)) throw new RangeError("direction must be -1 or 1");
-		const items = children(), index = items.findIndex((row) => row.id === id), target = index + direction;
-		if (index < 0) throw new RangeError(`Unknown row: ${id}`);
-		if (target < 0 || target >= items.length || root.hasAttribute("disabled")) return;
-		const focused = root.ownerDocument.activeElement;
-		if (direction < 0) rows.insertBefore(items[index], items[target]);
-		else rows.insertBefore(items[target], items[index]);
-		report(direction < 0 ? "Row moved up." : "Row moved down.");
-		if (items[index].contains(focused) && !focused.disabled) focused.focus();
-		else items[index].querySelector("input,select,textarea,button:not(:disabled)")?.focus();
-	};
-	on(addButton, "click", add);
-	on(rows, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button)) return;
-		const row = children().find((item) => item.contains(button));
-		if (button.hasAttribute("data-remove")) remove(row.id);
-		else if (button.hasAttribute("data-move")) move(row.id, Number(button.dataset.move));
-	});
-	draw();
-	return {
-		add,
-		remove,
-		move,
-		get rowIds() {
-			return children().map((row) => row.id);
-		},
-		attributeChanged() {
-			draw();
-		}
-	};
-}
-function commandPalette(root, { on }) {
-	const dialog = root.querySelector("dialog"), input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]"), status = root.querySelector("[data-command-status]");
-	if (!dialog || !input || !list) return {};
-	let opener, active = null;
-	all(list, "[role=\"option\"]").forEach((option, index) => {
-		identify(root, option, `command-${index}`);
-		option.tabIndex = -1;
-	});
-	const options = () => all(list, "[role=\"option\"]").filter((option) => enabled(option) && !option.hidden);
-	const select = (option) => {
-		active = option;
-		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
-		if (option) {
-			input.setAttribute("aria-activedescendant", option.id);
-			option.scrollIntoView({ block: "nearest" });
-		} else input.removeAttribute("aria-activedescendant");
-	};
-	const filter = () => {
-		all(list, "[role=\"option\"]").forEach((option) => {
-			option.hidden = !option.textContent.toLocaleLowerCase().includes(input.value.toLocaleLowerCase());
-		});
-		select(options()[0] ?? null);
-		if (status) status.textContent = `${options().length} commands`;
-	};
-	const show = (trigger = root.ownerDocument.activeElement) => {
-		if (dialog.open || root.hasAttribute("disabled")) return;
-		opener = trigger;
-		dialog.showModal();
-		filter();
-		input.focus();
-	};
-	const close = () => {
-		if (dialog.open) dialog.close();
-	};
-	const invoke = (option) => {
-		if (!option || !enabled(option)) return;
-		const link = option.matches("a[href]") ? option : option.querySelector("a[href]");
-		const proceed = root.emit("command", {
-			action: option.dataset.action ?? option.id,
-			href: link?.getAttribute("href") ?? null
-		});
-		close();
-		if (proceed && link) root.ownerDocument.defaultView.location.assign(link.href);
-	};
-	on(root, "click", (event) => {
-		const trigger = event.target.closest("[data-open]");
-		if (trigger) show(trigger);
-		else if (event.target.closest("[data-close]")) close();
-		else {
-			const option = event.target.closest("[role=\"option\"]");
-			if (option) {
-				event.preventDefault();
-				invoke(option);
-			}
-		}
-	});
-	on(input, "input", filter);
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			close();
-		} else if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-			event.preventDefault();
-			const items = options(), index = items.indexOf(active);
-			if (items.length) select(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
-		} else if (event.key === "Enter") {
-			event.preventDefault();
-			invoke(active);
-		}
-	});
-	on(dialog, "close", () => {
-		if (opener?.isConnected) opener.focus();
-	});
-	on(root.ownerDocument, "keydown", (event) => {
-		if (root.hasAttribute("shortcut") && (event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "k" && !event.defaultPrevented) {
-			event.preventDefault();
-			dialog.open ? close() : show();
-		}
-	});
-	return {
-		show,
-		close,
-		get open() {
-			return dialog.open;
-		},
-		set open(value) {
-			value ? show() : close();
-		},
-		cleanup: close
-	};
-}
-//#endregion
-export { tree as i, multiselect as n, repeater as r, commandPalette as t };
diff --git a/packages/ui/dist/copy/repeater/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/repeater/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/repeater/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/repeater/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/repeater/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/repeater/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/repeater/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/repeater/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/repeater/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/repeater/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/repeater/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/repeater/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/repeater/runtime/components/repeater.js b/packages/ui/dist/copy/repeater/runtime/components/repeater.js
index 1660aee7c..0874370f2 100644
--- a/packages/ui/dist/copy/repeater/runtime/components/repeater.js
+++ b/packages/ui/dist/copy/repeater/runtime/components/repeater.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as repeater } from "../chunks/advanced-DCpe8Ndv.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as repeater } from "../chunks/advanced-CqBF0dSb.js";
 //#region .cache/ui-build/entries/components/repeater.js
 var J3w1Repeater = class extends J3w1Element {
 	static componentId = "repeater";
 	static version = "4.0.0";
-	static implementationId = "sha256-Tx+pvPHZeC66CE52/uMEXatMD8QBTtQd+OahbHnBVuY=";
+	static implementationId = "sha256-G3uVYtEsLo70OmMPhofMD2YylFEq1kezRvUEMrNnRII=";
 	static connect = repeater;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...[
diff --git a/packages/ui/dist/copy/repeater/runtime/register/repeater.js b/packages/ui/dist/copy/repeater/runtime/register/repeater.js
index b53fb3ce5..6565442ff 100644
--- a/packages/ui/dist/copy/repeater/runtime/register/repeater.js
+++ b/packages/ui/dist/copy/repeater/runtime/register/repeater.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Repeater } from "../components/repeater.js";
 //#region .cache/ui-build/entries/register/repeater.js
 var element = registerElement("j3w1-repeater", J3w1Repeater);
diff --git a/packages/ui/dist/copy/repeater/tokens.css b/packages/ui/dist/copy/repeater/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/repeater/tokens.css
+++ b/packages/ui/dist/copy/repeater/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/search-field/component.css b/packages/ui/dist/copy/search-field/component.css
index 33b0aca34..dbc0ae6e8 100644
--- a/packages/ui/dist/copy/search-field/component.css
+++ b/packages/ui/dist/copy/search-field/component.css
@@ -8,7 +8,7 @@ j3w1-search-field {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-search-field, j3w1-search-field *, j3w1-search-field *::before, j3w1-search-field *::after { box-sizing: border-box; }
-j3w1-search-field button, j3w1-search-field input, j3w1-search-field select, j3w1-search-field textarea { font: inherit; }
+j3w1-search-field :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-search-field ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-search-field .sr-only {
   border: 0;
 }
 
+j3w1-search-field .combobox-label,
+j3w1-search-field .dialog-field-label,
+j3w1-search-field .field-label,
+j3w1-search-field .fieldset-label,
+j3w1-search-field .file-input-label,
+j3w1-search-field .number-field-label,
+j3w1-search-field .search-field-label,
+j3w1-search-field .select-label,
+j3w1-search-field .text-field-label,
+j3w1-search-field .textarea-label,
+j3w1-search-field .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-search-field .combobox-help,
+j3w1-search-field .date-picker-help,
+j3w1-search-field .dialog-field-help,
+j3w1-search-field .fieldset-help,
+j3w1-search-field .file-input-help,
+j3w1-search-field .number-field-help,
+j3w1-search-field .search-field-help,
+j3w1-search-field .select-help,
+j3w1-search-field .text-field-help,
+j3w1-search-field .textarea-help,
+j3w1-search-field .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-search-field .combobox-message,
+j3w1-search-field .date-picker-message,
+j3w1-search-field .file-input-message,
+j3w1-search-field .number-field-message,
+j3w1-search-field .radio-group-message,
+j3w1-search-field .select-message,
+j3w1-search-field .text-field-message,
+j3w1-search-field .textarea-message,
+j3w1-search-field .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-search-field .combobox-root,
+j3w1-search-field .date-picker-root,
+j3w1-search-field .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-search-field .search-field {
   display: grid;
   gap: var(--space-4);
@@ -33,16 +93,10 @@ j3w1-search-field .search-field {
   color: var(--color-text-default);
 }
 
-j3w1-search-field .search-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-search-field .search-field-root {
   display: flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding-inline-start: var(--space-8);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
@@ -134,13 +188,6 @@ j3w1-search-field .search-field-kbd {
   line-height: var(--font-line-height-ui-sm);
 }
 
-j3w1-search-field .search-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-search-field .search-field-status {
   display: none;
   margin: 0;
diff --git a/packages/ui/dist/copy/search-field/index.html b/packages/ui/dist/copy/search-field/index.html
index 3f3d9ccaa..58a104f8e 100644
--- a/packages/ui/dist/copy/search-field/index.html
+++ b/packages/ui/dist/copy/search-field/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Search field · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-search-field id="example-search-field-default"><div class="search-field" role="search">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Search field · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-search-field id="example-search-field-default"><div class="search-field" role="search">
   <label class="search-field-label" for="example-search-field-default-sf-files">Search files</label>
   <div class="search-field-root">
     <svg class="search-field-icon" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M10.5 10.5L14 14"></path><rect x="2" y="2" width="9" height="9"></rect></svg>
diff --git a/packages/ui/dist/copy/search-field/manifest.json b/packages/ui/dist/copy/search-field/manifest.json
index 23f79a60d..870396370 100644
--- a/packages/ui/dist/copy/search-field/manifest.json
+++ b/packages/ui/dist/copy/search-field/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/search-field.md",
   "dependencies": [
     "register/search-field.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/search-field.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/search-field.js": "sha256-Z6IeX4+LKGVQJUcQGuyUnCBL6ggQSoevMhrj75zYisw=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/search-field.js": "sha256-2ODKfrgzC53SjMT+P7oaRa78AgRY37MG12M7HVRwfQU=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-LKiZdfWdQXHUoEdFnG1o5Aka8mOS8NP98IdndPFnsbQ=",
+    "runtime/register/search-field.js": "sha256-oIExIQ80Xzt1d5Y8KclVl+lAi+cgOMhKMFNPBz8fEXY=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/search-field.js": "sha256-HCnoLO1ZZvDEqeON+Ir7Q+XChuArNr/tJ7H+lnVTJPw=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-wwF2mPKTtvrFcPXYn8OoWoeJPj5KgkmPbjay/kNVq6s=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-HUFhtyi3m/bOmHYH5vU0uD/8e/TFVZ6EmUZzoucKCCM=",
-    "index.html": "sha256-pNWMnOcTZTr/TNcGVa53Ac8S3/6iWYnBj5B5CjnTcVI=",
+    "index.html": "sha256-hCiVxJ7XVQjEcEeSYLpYgSmV9Wn9MIgxJm1EWMzoeKo=",
     "README.md": "sha256-aDgof37yYQAYKjMAPaaPxNDPtVVxOfCjHh2aT60B4xo="
   }
 }
diff --git a/packages/ui/dist/copy/search-field/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/search-field/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/search-field/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/search-field/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/search-field/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/search-field/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/search-field/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/search-field/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/search-field/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/search-field/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/search-field/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/search-field/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/search-field/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/search-field/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/search-field/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/search-field/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/search-field/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/search-field/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/search-field/runtime/components/search-field.js b/packages/ui/dist/copy/search-field/runtime/components/search-field.js
index 4d97313b6..666ca6dde 100644
--- a/packages/ui/dist/copy/search-field/runtime/components/search-field.js
+++ b/packages/ui/dist/copy/search-field/runtime/components/search-field.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/search-field.js
 var J3w1SearchField = class extends J3w1Element {
 	static componentId = "search-field";
 	static version = "4.0.0";
-	static implementationId = "sha256-1DXqGUME/dceUQ+jjPOv/UDtTubfoV13HCjmaDde06w=";
+	static implementationId = "sha256-nopARV2ViNiuyBqGv6KjxLJ3uaaVqRJ3K7Mgtg/mS7Q=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/search-field/runtime/register/search-field.js b/packages/ui/dist/copy/search-field/runtime/register/search-field.js
index 63da3cd5b..169a29a47 100644
--- a/packages/ui/dist/copy/search-field/runtime/register/search-field.js
+++ b/packages/ui/dist/copy/search-field/runtime/register/search-field.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1SearchField } from "../components/search-field.js";
 //#region .cache/ui-build/entries/register/search-field.js
 var element = registerElement("j3w1-search-field", J3w1SearchField);
diff --git a/packages/ui/dist/copy/search-field/tokens.css b/packages/ui/dist/copy/search-field/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/search-field/tokens.css
+++ b/packages/ui/dist/copy/search-field/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/segmented-control/component.css b/packages/ui/dist/copy/segmented-control/component.css
index 37d84f220..3c94d95f8 100644
--- a/packages/ui/dist/copy/segmented-control/component.css
+++ b/packages/ui/dist/copy/segmented-control/component.css
@@ -8,7 +8,7 @@ j3w1-segmented-control {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-segmented-control, j3w1-segmented-control *, j3w1-segmented-control *::before, j3w1-segmented-control *::after { box-sizing: border-box; }
-j3w1-segmented-control button, j3w1-segmented-control input, j3w1-segmented-control select, j3w1-segmented-control textarea { font: inherit; }
+j3w1-segmented-control :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-segmented-control ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-segmented-control .sr-only {
   border: 0;
 }
 
+j3w1-segmented-control .combobox-label,
+j3w1-segmented-control .dialog-field-label,
+j3w1-segmented-control .field-label,
+j3w1-segmented-control .fieldset-label,
+j3w1-segmented-control .file-input-label,
+j3w1-segmented-control .number-field-label,
+j3w1-segmented-control .search-field-label,
+j3w1-segmented-control .select-label,
+j3w1-segmented-control .text-field-label,
+j3w1-segmented-control .textarea-label,
+j3w1-segmented-control .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-segmented-control .combobox-help,
+j3w1-segmented-control .date-picker-help,
+j3w1-segmented-control .dialog-field-help,
+j3w1-segmented-control .fieldset-help,
+j3w1-segmented-control .file-input-help,
+j3w1-segmented-control .number-field-help,
+j3w1-segmented-control .search-field-help,
+j3w1-segmented-control .select-help,
+j3w1-segmented-control .text-field-help,
+j3w1-segmented-control .textarea-help,
+j3w1-segmented-control .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-segmented-control .combobox-message,
+j3w1-segmented-control .date-picker-message,
+j3w1-segmented-control .file-input-message,
+j3w1-segmented-control .number-field-message,
+j3w1-segmented-control .radio-group-message,
+j3w1-segmented-control .select-message,
+j3w1-segmented-control .text-field-message,
+j3w1-segmented-control .textarea-message,
+j3w1-segmented-control .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-segmented-control .combobox-root,
+j3w1-segmented-control .date-picker-root,
+j3w1-segmented-control .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-segmented-control .radio-group {
   display: grid;
   gap: var(--space-4);
@@ -63,7 +123,7 @@ j3w1-segmented-control .radio-group-horizontal .radio-group-options {
 
 j3w1-segmented-control .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -73,8 +133,8 @@ j3w1-segmented-control .radio-group-option {
 
 j3w1-segmented-control .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 j3w1-segmented-control .radio-group-control > * {
@@ -83,8 +143,8 @@ j3w1-segmented-control .radio-group-control > * {
 
 j3w1-segmented-control .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -106,14 +166,6 @@ j3w1-segmented-control .radio-group-text {
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
-
-j3w1-segmented-control .radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-segmented-control .radio-group-option:hover .radio-group-input:not(:disabled) {
     background: var(--color-interaction-hover-bg);
@@ -183,10 +235,8 @@ j3w1-segmented-control .radio-group:disabled .radio-group-legend {
 }
 
 j3w1-segmented-control .segmented-control {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-segmented-control .segmented-control-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-segmented-control .segmented-control :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-segmented-control .segmented-control :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-segmented-control .segmented-control :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-j3w1-segmented-control .segmented-control-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 j3w1-segmented-control .segmented-control-options {display:flex;flex-wrap:wrap}j3w1-segmented-control .segmented-control label {display:flex;align-items:center;gap:var(--space-4);padding:var(--space-8);border:var(--border-width-default) solid var(--color-border-control)}j3w1-segmented-control .segmented-control label:has(:checked) {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text)}j3w1-segmented-control .segmented-control input {accent-color:var(--color-action-primary-bg)}
 
 j3w1-segmented-control .segmented-control input:checked:focus-visible {outline-color:var(--color-interaction-focus-ring-container)}
diff --git a/packages/ui/dist/copy/segmented-control/index.html b/packages/ui/dist/copy/segmented-control/index.html
index d33a3d872..cfd91e8a7 100644
--- a/packages/ui/dist/copy/segmented-control/index.html
+++ b/packages/ui/dist/copy/segmented-control/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Segmented control · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-segmented-control id="example-segmented-control-default"><fieldset class="segmented-control radio-group radio-group-horizontal"><legend class="radio-group-legend">View density</legend><div class="segmented-control-options radio-group-options"><label class="radio-group-option"><span class="radio-group-control"><input class="radio-group-input" type="radio" name="example-segmented-control-default-density" value="compact" checked="" data-demo-focus-target=""><span class="radio-group-dot" aria-hidden="true"></span></span><span class="radio-group-text">Compact</span></label><label class="radio-group-option"><span class="radio-group-control"><input class="radio-group-input" type="radio" name="example-segmented-control-default-density" value="comfortable"><span class="radio-group-dot" aria-hidden="true"></span></span><span class="radio-group-text">Comfortable</span></label></div></fieldset></j3w1-segmented-control><script type="module" src="./runtime/register/segmented-control.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Segmented control · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-segmented-control id="example-segmented-control-default"><fieldset class="segmented-control radio-group radio-group-horizontal"><legend class="radio-group-legend">View density</legend><div class="segmented-control-options radio-group-options"><label class="radio-group-option"><span class="radio-group-control"><input class="radio-group-input" type="radio" name="example-segmented-control-default-density" value="compact" checked="" data-demo-focus-target=""><span class="radio-group-dot" aria-hidden="true"></span></span><span class="radio-group-text">Compact</span></label><label class="radio-group-option"><span class="radio-group-control"><input class="radio-group-input" type="radio" name="example-segmented-control-default-density" value="comfortable"><span class="radio-group-dot" aria-hidden="true"></span></span><span class="radio-group-text">Comfortable</span></label></div></fieldset></j3w1-segmented-control><script type="module" src="./runtime/register/segmented-control.js"></script></body></html>
diff --git a/packages/ui/dist/copy/segmented-control/manifest.json b/packages/ui/dist/copy/segmented-control/manifest.json
index 449250032..2a7b8e658 100644
--- a/packages/ui/dist/copy/segmented-control/manifest.json
+++ b/packages/ui/dist/copy/segmented-control/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/segmented-control.md",
   "dependencies": [
     "register/segmented-control.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/segmented-control.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/segmented-control.js": "sha256-Hp1iRTlBtVJffhsTkXPWleCnHa8ag50yeW35VsnXQ4c=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/segmented-control.js": "sha256-xN4DQLVyEFJSMDcuTBBrd//fR3iSCEjqnQHkYV4GtbE=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-Dq4r47NU2yi+AVRCcT0g+RV5YoPw7Z3JUhDMJqtUoJM=",
+    "runtime/register/segmented-control.js": "sha256-n6tsq/njNAYhqF4fvBMTvNQc+KRA4dsIBCmrUsrTA+U=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/segmented-control.js": "sha256-8hAeFwje9ZkB0c6k2tQrV2hjw4TCznTY3w0tOFD/egQ=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-DOkYci+UZ8ocvIWeqGN9xO6tCAzSiesUej367W8BMAI=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-/y5XrVYeuiIc2/pZ/wdJWuadUAGF48in7tED7hWQGYI=",
-    "index.html": "sha256-zUD5N3s3EYsmNmV+t33T6lt+kNsDMoRbcdyTYDikNPI=",
+    "index.html": "sha256-1knSx3CNDwcXYtsJuGWn26xP1MjuCfSw99/6QgvIyBM=",
     "README.md": "sha256-lEaJfO3PJMUKPPqSK45yRRL6euErAHItarIyeoshEI4="
   }
 }
diff --git a/packages/ui/dist/copy/segmented-control/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/segmented-control/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/segmented-control/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/segmented-control/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/segmented-control/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/segmented-control/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/segmented-control/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/segmented-control/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/segmented-control/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/segmented-control/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/segmented-control/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/segmented-control/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/segmented-control/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/segmented-control/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/segmented-control/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/segmented-control/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/segmented-control/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/segmented-control/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/segmented-control/runtime/components/segmented-control.js b/packages/ui/dist/copy/segmented-control/runtime/components/segmented-control.js
index e72128f6a..6ffc9b94e 100644
--- a/packages/ui/dist/copy/segmented-control/runtime/components/segmented-control.js
+++ b/packages/ui/dist/copy/segmented-control/runtime/components/segmented-control.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/segmented-control.js
 var J3w1SegmentedControl = class extends J3w1Element {
 	static componentId = "segmented-control";
 	static version = "4.0.0";
-	static implementationId = "sha256-9PLNL13EHbz4Q4W5X5YLzVqofRhbsR0BeD0TPmji/8Q=";
+	static implementationId = "sha256-ULY50CCb++GAub0Bdb1hOwDWjDszJVNB0Fwnbmwbg1c=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/segmented-control/runtime/register/segmented-control.js b/packages/ui/dist/copy/segmented-control/runtime/register/segmented-control.js
index 20f7f4d8a..526fd7f71 100644
--- a/packages/ui/dist/copy/segmented-control/runtime/register/segmented-control.js
+++ b/packages/ui/dist/copy/segmented-control/runtime/register/segmented-control.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1SegmentedControl } from "../components/segmented-control.js";
 //#region .cache/ui-build/entries/register/segmented-control.js
 var element = registerElement("j3w1-segmented-control", J3w1SegmentedControl);
diff --git a/packages/ui/dist/copy/segmented-control/tokens.css b/packages/ui/dist/copy/segmented-control/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/segmented-control/tokens.css
+++ b/packages/ui/dist/copy/segmented-control/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/select/component.css b/packages/ui/dist/copy/select/component.css
index 41989576a..415554828 100644
--- a/packages/ui/dist/copy/select/component.css
+++ b/packages/ui/dist/copy/select/component.css
@@ -8,7 +8,7 @@ j3w1-select {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-select, j3w1-select *, j3w1-select *::before, j3w1-select *::after { box-sizing: border-box; }
-j3w1-select button, j3w1-select input, j3w1-select select, j3w1-select textarea { font: inherit; }
+j3w1-select :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-select ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,15 +26,15 @@ j3w1-select .sr-only {
 }
 
 j3w1-select :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-select :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-select :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-select :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-select :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-select :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-select :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-select :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-select :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-select .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-select .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-select .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-select .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-select .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-select .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-select .j3w1-temporal :focus-visible,j3w1-select .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -58,7 +58,7 @@ j3w1-select .j3w1-calendar [aria-pressed="true"] { background:var(--color-intera
 j3w1-select .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-select .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-select .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-select .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-select .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-select .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-select .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-select .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -66,7 +66,7 @@ j3w1-select .j3w1-choice-trigger:focus-visible,j3w1-select .j3w1-choice-list:foc
 j3w1-select .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-select .j3w1-choice-list[popover] { inset: auto; }
 j3w1-select .j3w1-choice-list[hidden] { display: none; }
-j3w1-select .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-select .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-select .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-select .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-select .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -80,19 +80,79 @@ j3w1-select .j3w1-choice-error { display: block; color: var(--color-status-dange
 j3w1-select .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-select .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-select :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-select input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-select input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-select input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-select input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-select input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-select input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-select input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-select input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-select input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-select input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-select input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-select input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-select input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-select input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-select input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-select input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-select input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-select input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+
+j3w1-select .combobox-label,
+j3w1-select .dialog-field-label,
+j3w1-select .field-label,
+j3w1-select .fieldset-label,
+j3w1-select .file-input-label,
+j3w1-select .number-field-label,
+j3w1-select .search-field-label,
+j3w1-select .select-label,
+j3w1-select .text-field-label,
+j3w1-select .textarea-label,
+j3w1-select .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-select .combobox-help,
+j3w1-select .date-picker-help,
+j3w1-select .dialog-field-help,
+j3w1-select .fieldset-help,
+j3w1-select .file-input-help,
+j3w1-select .number-field-help,
+j3w1-select .search-field-help,
+j3w1-select .select-help,
+j3w1-select .text-field-help,
+j3w1-select .textarea-help,
+j3w1-select .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-select .combobox-message,
+j3w1-select .date-picker-message,
+j3w1-select .file-input-message,
+j3w1-select .number-field-message,
+j3w1-select .radio-group-message,
+j3w1-select .select-message,
+j3w1-select .text-field-message,
+j3w1-select .textarea-message,
+j3w1-select .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-select .combobox-root,
+j3w1-select .date-picker-root,
+j3w1-select .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
 
 j3w1-select .select {
   position: relative;
@@ -103,12 +163,6 @@ j3w1-select .select {
   color: var(--color-text-default);
 }
 
-j3w1-select .select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-select .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -118,7 +172,7 @@ j3w1-select .select-root {
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -129,8 +183,8 @@ j3w1-select .select-control {
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -155,8 +209,8 @@ j3w1-select .select-control optgroup {
 }
 
 j3w1-select .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 j3w1-select .select-control optgroup {
@@ -170,7 +224,7 @@ j3w1-select .select-control option:checked {
 
 j3w1-select .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -179,21 +233,6 @@ j3w1-select .select-chevron {
   fill: none;
   pointer-events: none;
 }
-
-j3w1-select .select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-select .select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-select .select-root:hover {
     background: var(--color-interaction-hover-bg);
diff --git a/packages/ui/dist/copy/select/index.html b/packages/ui/dist/copy/select/index.html
index 2d74d1d19..9c57c73d3 100644
--- a/packages/ui/dist/copy/select/index.html
+++ b/packages/ui/dist/copy/select/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Select · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-select id="example-select-default"><div class="select">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Select · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-select id="example-select-default"><div class="select">
   <label class="select-label" for="example-select-default-sel-workspace">Workspace <span class="select-required" aria-hidden="true">*</span><span class="select-required sr-only"> required</span></label>
   <div class="select-root">
     <select class="select-control" id="example-select-default-sel-workspace" aria-describedby="example-select-default-sel-workspace-help example-select-default-sel-workspace-message" name="example-select-default-sel-workspace">
diff --git a/packages/ui/dist/copy/select/manifest.json b/packages/ui/dist/copy/select/manifest.json
index 454416f74..b7c1b0ad2 100644
--- a/packages/ui/dist/copy/select/manifest.json
+++ b/packages/ui/dist/copy/select/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/select.md",
   "dependencies": [
     "register/select.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/select.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/select.js": "sha256-zXXuJRnrp9EVnk1A8VpgUzF/JPShcAImY9zRc6nQasQ=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/select.js": "sha256-yyq0jsJOysQGTPpFoA1C1aRWSIukrk+M4Ro2ZwCyWbw=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-F7S6++WxoGrwiPfTq2NRQciL64rhre0zZKEhwee9I1E=",
+    "runtime/register/select.js": "sha256-TN7apnaEDR69Eobpnesx4c3Yr2iU33xNGj/q9i+nFtw=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/select.js": "sha256-QSO5F4fiwtnnIHZ9/a9n62yVZRlGUIofNkw2oXYIzGY=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-ThIndr85n+voMGPm5jrL7fIGCICUMso0Ljr2/CRyupI=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-1rMGJynWvvm/FG3mKaD7Cc+QHA+zhkGFyc7tL4Ul37Q=",
-    "index.html": "sha256-f4rQyCq7pkNwF1oV2xWbeCAut4dwtAt0CPyZLBiz+1Y=",
+    "index.html": "sha256-qUab8G+JxhJZ5W/BmBgl23HVr/q8JLQmyIi5tTTX4JU=",
     "README.md": "sha256-MrNAdB126mt16m2mdh0VynM3ujESd5+tjBkbyYHVpQw="
   }
 }
diff --git a/packages/ui/dist/copy/select/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/select/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/select/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/select/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/select/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/select/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/select/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/select/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/select/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/select/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/select/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/select/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/select/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/select/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/select/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/select/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/select/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/select/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/select/runtime/components/select.js b/packages/ui/dist/copy/select/runtime/components/select.js
index f15a0462d..a59b0acab 100644
--- a/packages/ui/dist/copy/select/runtime/components/select.js
+++ b/packages/ui/dist/copy/select/runtime/components/select.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/select.js
 var J3w1Select = class extends J3w1Element {
 	static componentId = "select";
 	static version = "4.0.0";
-	static implementationId = "sha256-x5f4XAk757Fq5+Tl0cEgt1x3VCTPpITjazQZUo+WpvQ=";
+	static implementationId = "sha256-/4CAqDSF84DTC0pEcQUtcmmtAaVge6ifWVX3elTZzLM=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/select/runtime/register/select.js b/packages/ui/dist/copy/select/runtime/register/select.js
index b97661d55..6fcd3d855 100644
--- a/packages/ui/dist/copy/select/runtime/register/select.js
+++ b/packages/ui/dist/copy/select/runtime/register/select.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Select } from "../components/select.js";
 //#region .cache/ui-build/entries/register/select.js
 var element = registerElement("j3w1-select", J3w1Select);
diff --git a/packages/ui/dist/copy/select/tokens.css b/packages/ui/dist/copy/select/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/select/tokens.css
+++ b/packages/ui/dist/copy/select/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/settings-panel/component.css b/packages/ui/dist/copy/settings-panel/component.css
index 750f4e7c4..790879fd6 100644
--- a/packages/ui/dist/copy/settings-panel/component.css
+++ b/packages/ui/dist/copy/settings-panel/component.css
@@ -8,7 +8,7 @@ j3w1-settings-panel {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-settings-panel, j3w1-settings-panel *, j3w1-settings-panel *::before, j3w1-settings-panel *::after { box-sizing: border-box; }
-j3w1-settings-panel button, j3w1-settings-panel input, j3w1-settings-panel select, j3w1-settings-panel textarea { font: inherit; }
+j3w1-settings-panel :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-settings-panel ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -102,7 +102,7 @@ j3w1-settings-panel .settings-panel-footer {
 
   j3w1-settings-panel .settings-panel-nav .sidebar-nav-list {
     display: flex;
-    gap: var(--density-gap, 4px);
+    gap: var(--density-gap, 2px);
     overflow-x: auto;
     scrollbar-width: thin;
   }
@@ -113,8 +113,8 @@ j3w1-settings-panel .settings-panel-footer {
 
   j3w1-settings-panel .settings-panel-nav .sidebar-nav-link {
     width: auto;
-    min-height: var(--density-control-height, 32px);
-    padding: 0 var(--density-control-padding-x, 12px);
+    min-height: var(--density-control-height, 24px);
+    padding: 0 var(--density-control-padding-x, 8px);
     margin-bottom: calc(-1 * var(--border-width-default));
     border-inline-start: 0;
     border-bottom: var(--border-width-emphasis) solid transparent;
@@ -144,21 +144,17 @@ j3w1-settings-panel .settings-panel[aria-busy="true"] .settings-panel-apply {
   }
 }
 
-j3w1-settings-panel .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+j3w1-settings-panel .button,
+j3w1-settings-panel .dialog-button,
+j3w1-settings-panel .empty-state-action,
+j3w1-settings-panel .file-input-button,
+j3w1-settings-panel button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -171,8 +167,23 @@ j3w1-settings-panel .button {
   cursor: pointer;
   outline: 0;
 }
+j3w1-settings-panel .button,
+j3w1-settings-panel .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-j3w1-settings-panel .button-secondary {
+j3w1-settings-panel .button-secondary,
+j3w1-settings-panel .dialog-button,
+j3w1-settings-panel .empty-state-action,
+j3w1-settings-panel .file-input-button,
+j3w1-settings-panel button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -204,7 +215,8 @@ j3w1-settings-panel .button-destructive {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-j3w1-settings-panel .button-destructive-filled {
+j3w1-settings-panel .button-destructive-filled,
+j3w1-settings-panel .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -214,6 +226,49 @@ j3w1-settings-panel .button-destructive-filled {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  j3w1-settings-panel :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-settings-panel .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-settings-panel :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-settings-panel :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-settings-panel :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-settings-panel .dialog-button,
+  j3w1-settings-panel .empty-state-action,
+  j3w1-settings-panel .file-input-button,
+  j3w1-settings-panel button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-settings-panel :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 j3w1-settings-panel .button-icon {
   flex: none;
@@ -231,25 +286,6 @@ j3w1-settings-panel .button-loading {
 j3w1-settings-panel .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-settings-panel .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-settings-panel .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-settings-panel .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-settings-panel .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-settings-panel .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -261,16 +297,6 @@ j3w1-settings-panel .button[aria-busy="true"] .button-icon {
 j3w1-settings-panel .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-settings-panel .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-settings-panel .button {
@@ -279,9 +305,66 @@ j3w1-settings-panel .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-settings-panel .button:focus-visible {
-    outline-color: Highlight;
-  }
+}
+
+j3w1-settings-panel .combobox-label,
+j3w1-settings-panel .dialog-field-label,
+j3w1-settings-panel .field-label,
+j3w1-settings-panel .fieldset-label,
+j3w1-settings-panel .file-input-label,
+j3w1-settings-panel .number-field-label,
+j3w1-settings-panel .search-field-label,
+j3w1-settings-panel .select-label,
+j3w1-settings-panel .text-field-label,
+j3w1-settings-panel .textarea-label,
+j3w1-settings-panel .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-settings-panel .combobox-help,
+j3w1-settings-panel .date-picker-help,
+j3w1-settings-panel .dialog-field-help,
+j3w1-settings-panel .fieldset-help,
+j3w1-settings-panel .file-input-help,
+j3w1-settings-panel .number-field-help,
+j3w1-settings-panel .search-field-help,
+j3w1-settings-panel .select-help,
+j3w1-settings-panel .text-field-help,
+j3w1-settings-panel .textarea-help,
+j3w1-settings-panel .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-settings-panel .combobox-message,
+j3w1-settings-panel .date-picker-message,
+j3w1-settings-panel .file-input-message,
+j3w1-settings-panel .number-field-message,
+j3w1-settings-panel .radio-group-message,
+j3w1-settings-panel .select-message,
+j3w1-settings-panel .text-field-message,
+j3w1-settings-panel .textarea-message,
+j3w1-settings-panel .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-settings-panel .combobox-root,
+j3w1-settings-panel .date-picker-root,
+j3w1-settings-panel .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
 }
 
 j3w1-settings-panel .field {
@@ -293,12 +376,6 @@ j3w1-settings-panel .field {
   color: var(--color-text-default);
 }
 
-j3w1-settings-panel .field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-settings-panel .field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -311,8 +388,8 @@ j3w1-settings-panel .field-control {
 
 j3w1-settings-panel .field-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -387,12 +464,6 @@ j3w1-settings-panel .text-field {
   color: var(--color-text-default);
 }
 
-j3w1-settings-panel .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-settings-panel .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -402,7 +473,7 @@ j3w1-settings-panel .text-field-root {
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -411,7 +482,7 @@ j3w1-settings-panel .text-field-root {
 j3w1-settings-panel .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -487,21 +558,6 @@ j3w1-settings-panel .text-field-loading {
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-j3w1-settings-panel .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-settings-panel .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-settings-panel .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -602,7 +658,7 @@ j3w1-settings-panel .checkbox-required {
 
 j3w1-settings-panel .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -612,8 +668,8 @@ j3w1-settings-panel .checkbox-option {
 
 j3w1-settings-panel .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -623,8 +679,8 @@ j3w1-settings-panel .checkbox-control > * {
 
 j3w1-settings-panel .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -636,8 +692,8 @@ j3w1-settings-panel .checkbox-input {
 j3w1-settings-panel .checkbox-check,
 j3w1-settings-panel .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
@@ -776,7 +832,7 @@ j3w1-settings-panel .radio-group-horizontal .radio-group-options {
 
 j3w1-settings-panel .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -786,8 +842,8 @@ j3w1-settings-panel .radio-group-option {
 
 j3w1-settings-panel .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 j3w1-settings-panel .radio-group-control > * {
@@ -796,8 +852,8 @@ j3w1-settings-panel .radio-group-control > * {
 
 j3w1-settings-panel .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -819,14 +875,6 @@ j3w1-settings-panel .radio-group-text {
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
-
-j3w1-settings-panel .radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-settings-panel .radio-group-option:hover .radio-group-input:not(:disabled) {
     background: var(--color-interaction-hover-bg);
@@ -896,15 +944,15 @@ j3w1-settings-panel .radio-group:disabled .radio-group-legend {
 }
 
 j3w1-settings-panel :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-settings-panel .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-settings-panel .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-settings-panel .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-settings-panel .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-settings-panel .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-settings-panel .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-settings-panel .j3w1-temporal :focus-visible,j3w1-settings-panel .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -928,7 +976,7 @@ j3w1-settings-panel .j3w1-calendar [aria-pressed="true"] { background:var(--colo
 j3w1-settings-panel .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-settings-panel .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-settings-panel .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-settings-panel .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-settings-panel .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-settings-panel .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-settings-panel .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-settings-panel .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -936,7 +984,7 @@ j3w1-settings-panel .j3w1-choice-trigger:focus-visible,j3w1-settings-panel .j3w1
 j3w1-settings-panel .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-settings-panel .j3w1-choice-list[popover] { inset: auto; }
 j3w1-settings-panel .j3w1-choice-list[hidden] { display: none; }
-j3w1-settings-panel .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-settings-panel .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-settings-panel .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-settings-panel .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-settings-panel .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -950,19 +998,19 @@ j3w1-settings-panel .j3w1-choice-error { display: block; color: var(--color-stat
 j3w1-settings-panel .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-settings-panel .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-settings-panel :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
 
 j3w1-settings-panel .select {
   position: relative;
@@ -973,12 +1021,6 @@ j3w1-settings-panel .select {
   color: var(--color-text-default);
 }
 
-j3w1-settings-panel .select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-settings-panel .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -988,7 +1030,7 @@ j3w1-settings-panel .select-root {
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -999,8 +1041,8 @@ j3w1-settings-panel .select-control {
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -1025,8 +1067,8 @@ j3w1-settings-panel .select-control optgroup {
 }
 
 j3w1-settings-panel .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 j3w1-settings-panel .select-control optgroup {
@@ -1040,7 +1082,7 @@ j3w1-settings-panel .select-control option:checked {
 
 j3w1-settings-panel .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -1049,21 +1091,6 @@ j3w1-settings-panel .select-chevron {
   fill: none;
   pointer-events: none;
 }
-
-j3w1-settings-panel .select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-settings-panel .select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-settings-panel .select-root:hover {
     background: var(--color-interaction-hover-bg);
@@ -1251,7 +1278,7 @@ j3w1-settings-panel .switch:disabled .switch-state {
 }
 
 j3w1-settings-panel .sidebar-nav {
-  --_indent: calc(var(--density-icon, 16px) + var(--space-8));
+  --_indent: calc(var(--density-icon, 12px) + var(--space-8));
   min-width: 0;
   max-width: calc(var(--font-size-ui-md) * 15);
   padding: var(--space-4) 0;
@@ -1283,9 +1310,9 @@ j3w1-settings-panel .sidebar-nav-link {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
-  padding-inline-start: calc(var(--density-control-padding-x, 12px) - var(--border-width-emphasis));
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
+  padding-inline-start: calc(var(--density-control-padding-x, 8px) - var(--border-width-emphasis));
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -1301,8 +1328,8 @@ j3w1-settings-panel .sidebar-nav-link {
 j3w1-settings-panel .sidebar-nav-icon {
   display: inline-flex;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-icon-default);
 }
 
@@ -1344,12 +1371,12 @@ j3w1-settings-panel .sidebar-nav-link:focus-visible {
 j3w1-settings-panel .sidebar-nav-link:focus:not(:focus-visible) {
   outline: 0;
 }
-j3w1-settings-panel .sidebar-nav-link[aria-current="page"] {
+j3w1-settings-panel .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) {
   border-inline-start-color: var(--color-border-selected-indicator);
   color: var(--color-text-bright);
 }
 
-j3w1-settings-panel .sidebar-nav-link[aria-current="page"] .sidebar-nav-icon {
+j3w1-settings-panel .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) .sidebar-nav-icon {
   color: var(--color-text-bright);
 }
 j3w1-settings-panel .sidebar-nav-link[aria-selected="true"] {
@@ -1362,7 +1389,7 @@ j3w1-settings-panel .sidebar-nav-link[aria-selected="true"] .sidebar-nav-icon {
 }
 
 j3w1-settings-panel .sidebar-nav-link[aria-selected="true"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 j3w1-settings-panel .sidebar-nav[data-container-inactive] .sidebar-nav-link[aria-selected="true"] {
   background: var(--color-interaction-selection-inactive-bg);
@@ -1407,6 +1434,37 @@ j3w1-settings-panel .sidebar-nav-collapsed .sidebar-nav-link {
   padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
 }
 
+@media (min-width: 900px) and (max-width: 1279.98px) {
+j3w1-settings-panel .site-rail {
+  max-width: none;
+  width: max-content;
+}
+
+j3w1-settings-panel .site-rail .sidebar-nav-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+j3w1-settings-panel .site-rail .sidebar-nav-chevron {
+  display: none;
+}
+
+j3w1-settings-panel .site-rail .sidebar-nav-sublist {
+  padding-inline-start: 0;
+}
+
+j3w1-settings-panel .site-rail .sidebar-nav-link {
+  justify-content: center;
+  padding-inline: var(--space-8);
+  padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
+}
+
+}
+
 @media (hover: none) {
   j3w1-settings-panel .sidebar-nav-link:hover {
     background: transparent;
@@ -1428,7 +1486,7 @@ j3w1-settings-panel .sidebar-nav-collapsed .sidebar-nav-link {
     outline-color: Highlight;
   }
 
-  j3w1-settings-panel .sidebar-nav-link[aria-current="page"] {
+  j3w1-settings-panel .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) {
     border-inline-start-color: Highlight;
   }
 
@@ -1468,16 +1526,10 @@ j3w1-settings-panel .fieldset-field {
   min-width: 0;
 }
 
-j3w1-settings-panel .fieldset-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-settings-panel .fieldset-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -1491,13 +1543,6 @@ j3w1-settings-panel .fieldset-input:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-j3w1-settings-panel .fieldset-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-settings-panel .fieldset:disabled .fieldset-legend,
 j3w1-settings-panel .fieldset:disabled .fieldset-label {
   color: var(--color-text-disabled);
diff --git a/packages/ui/dist/copy/settings-panel/index.html b/packages/ui/dist/copy/settings-panel/index.html
index 1d842052f..4c00313aa 100644
--- a/packages/ui/dist/copy/settings-panel/index.html
+++ b/packages/ui/dist/copy/settings-panel/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Settings panel · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-settings-panel id="example-settings-panel-default"><form><div class="settings-panel" role="region" aria-labelledby="example-settings-panel-default-sp-title">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Settings panel · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-settings-panel id="example-settings-panel-default"><form><div class="settings-panel" role="region" aria-labelledby="example-settings-panel-default-sp-title">
   <div class="settings-panel-nav">
     <nav class="sidebar-nav" aria-label="Settings sections">
       <ul class="sidebar-nav-list">
diff --git a/packages/ui/dist/copy/settings-panel/manifest.json b/packages/ui/dist/copy/settings-panel/manifest.json
index 3def1e66b..3c0d701c3 100644
--- a/packages/ui/dist/copy/settings-panel/manifest.json
+++ b/packages/ui/dist/copy/settings-panel/manifest.json
@@ -5,28 +5,28 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/settings-panel.md",
   "dependencies": [
     "register/settings-panel.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "register/switch.js",
     "components/switch.js",
-    "chunks/native-CAzZmDKR.js",
+    "chunks/native-BjBt1sUh.js",
     "components/settings-panel.js",
-    "chunks/forms-BT3z7lNC.js"
+    "chunks/forms-CE_hP1hg.js"
   ],
   "files": {
-    "runtime/register/settings-panel.js": "sha256-tecYNnB3mOO1ir+NYaorlqzgeTXRhGpkaMeZZ5TKo7k=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/register/switch.js": "sha256-WA0Avt/JJmz7DqxDx8v5Rnw3WCZFaVGJjPdibTQKkSc=",
-    "runtime/components/switch.js": "sha256-Cad08u/MHjqLKKV0MpUQNKaHz1fLJnvy5dfayoqsjvI=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "runtime/components/settings-panel.js": "sha256-eL+HBTD98ipggaB6cWxKOgb2UXkBgKT50n7xxlWPHn0=",
-    "runtime/chunks/forms-BT3z7lNC.js": "sha256-Txmae07dWLj1H/FL869U0Kv84TQxzpdFeOg0g8zGK6I=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-bKV+vxJoQcQ+/WSkUADY0AkxpU9pAMAviGj+BrOQK1w=",
+    "runtime/register/settings-panel.js": "sha256-Ob0kL9R4vmbYJ7EqPNT3788vg2FpTs87xAsE1TbqHeg=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/register/switch.js": "sha256-6l7gxY7bHWXI4K8WMdikGfg6Itnf2Uy8hSbsvn+XCYM=",
+    "runtime/components/switch.js": "sha256-sdfSvJlKylAeDbhRKPMRUZ+piEOzKs1aV52BDvjOV/o=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "runtime/components/settings-panel.js": "sha256-2/vcKktPpt7/9RBfexqEoFAPjNDcISoi6AALg6/CVTw=",
+    "runtime/chunks/forms-CE_hP1hg.js": "sha256-uOnoMuSkUbm9C/GfR+PDLYCykyHOQ1Ni7g59c4YMOS0=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-KvYopMeuJv2HW0li1RcLpCJp645gkxeby6o5WD+bx8o=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-Z1ZqDdIXySN8gWG0bvhT8iMaa+GaOyHy/vumYpCsYt8=",
-    "index.html": "sha256-jGGdyR2U7IytSpOvqtrVJUJKtnNfW/khN9J+vCUatNM=",
+    "index.html": "sha256-o83BpK03vkko3vqQPfArOayVjD634LtFPrmdQbjqbQ8=",
     "README.md": "sha256-Jbd8VDlivmCdwjmixGLdZrE/QQ9xdJyk+UIIOcLDqZE="
   }
 }
diff --git a/packages/ui/dist/copy/settings-panel/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/settings-panel/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/settings-panel/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/settings-panel/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/settings-panel/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/settings-panel/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/settings-panel/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/settings-panel/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/settings-panel/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/settings-panel/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/settings-panel/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/settings-panel/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/admin-form/runtime/chunks/forms-BT3z7lNC.js b/packages/ui/dist/copy/settings-panel/runtime/chunks/forms-CE_hP1hg.js
similarity index 98%
rename from packages/ui/dist/copy/admin-form/runtime/chunks/forms-BT3z7lNC.js
rename to packages/ui/dist/copy/settings-panel/runtime/chunks/forms-CE_hP1hg.js
index 65f1f0e71..6ad3b48f5 100644
--- a/packages/ui/dist/copy/admin-form/runtime/chunks/forms-BT3z7lNC.js
+++ b/packages/ui/dist/copy/settings-panel/runtime/chunks/forms-CE_hP1hg.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/forms.js
 function wizard(root, { on }) {
 	const panels = all(root, ".wizard-panel"), steps = all(root, ".wizard-step-button"), backButton = root.querySelector(".wizard-back"), nextButton = root.querySelector(".wizard-next");
diff --git a/packages/ui/dist/copy/settings-panel/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/settings-panel/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/settings-panel/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/settings-panel/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/settings-panel/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/settings-panel/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/settings-panel/runtime/components/settings-panel.js b/packages/ui/dist/copy/settings-panel/runtime/components/settings-panel.js
index 0d8bf3d6a..4d48521a3 100644
--- a/packages/ui/dist/copy/settings-panel/runtime/components/settings-panel.js
+++ b/packages/ui/dist/copy/settings-panel/runtime/components/settings-panel.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as formComposition } from "../chunks/forms-BT3z7lNC.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as formComposition } from "../chunks/forms-CE_hP1hg.js";
 //#region .cache/ui-build/entries/components/settings-panel.js
 var J3w1SettingsPanel = class extends J3w1Element {
 	static componentId = "settings-panel";
 	static version = "4.0.0";
-	static implementationId = "sha256-EIIJELO3DpCDTENzI+0vWiDG0OCBjrf8QBh5vGHkR/M=";
+	static implementationId = "sha256-Or1edewP4Rk9HC/kFygK+IUyEoPDHJFEyWO9Acv3Ge4=";
 	static connect = formComposition;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/settings-panel/runtime/components/switch.js b/packages/ui/dist/copy/settings-panel/runtime/components/switch.js
index 8dd46651f..87c027482 100644
--- a/packages/ui/dist/copy/settings-panel/runtime/components/switch.js
+++ b/packages/ui/dist/copy/settings-panel/runtime/components/switch.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { a as switchControl } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { a as switchControl } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/switch.js
 var J3w1Switch = class extends J3w1Element {
 	static componentId = "switch";
 	static version = "4.0.0";
-	static implementationId = "sha256-Wsym3Y7lkfx+vDtiTBtZS2h3anSfvc8bYabeqBAc4ms=";
+	static implementationId = "sha256-FqTv7TNhvOBWq10QKBC1FBB+4Wxd4wo2qtt4bCUEvbA=";
 	static connect = switchControl;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/settings-panel/runtime/register/settings-panel.js b/packages/ui/dist/copy/settings-panel/runtime/register/settings-panel.js
index 20c582b67..0067d590e 100644
--- a/packages/ui/dist/copy/settings-panel/runtime/register/settings-panel.js
+++ b/packages/ui/dist/copy/settings-panel/runtime/register/settings-panel.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./switch.js";
 import { J3w1SettingsPanel } from "../components/settings-panel.js";
 //#region .cache/ui-build/entries/register/settings-panel.js
diff --git a/packages/ui/dist/copy/settings-panel/runtime/register/switch.js b/packages/ui/dist/copy/settings-panel/runtime/register/switch.js
index 05a2f592f..5e227ec0d 100644
--- a/packages/ui/dist/copy/settings-panel/runtime/register/switch.js
+++ b/packages/ui/dist/copy/settings-panel/runtime/register/switch.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Switch } from "../components/switch.js";
 //#region .cache/ui-build/entries/register/switch.js
 var element = registerElement("j3w1-switch", J3w1Switch);
diff --git a/packages/ui/dist/copy/settings-panel/tokens.css b/packages/ui/dist/copy/settings-panel/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/settings-panel/tokens.css
+++ b/packages/ui/dist/copy/settings-panel/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/sidebar-nav/component.css b/packages/ui/dist/copy/sidebar-nav/component.css
index 6c0db4a9f..a75c2d4f3 100644
--- a/packages/ui/dist/copy/sidebar-nav/component.css
+++ b/packages/ui/dist/copy/sidebar-nav/component.css
@@ -8,7 +8,7 @@ j3w1-sidebar-nav {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-sidebar-nav, j3w1-sidebar-nav *, j3w1-sidebar-nav *::before, j3w1-sidebar-nav *::after { box-sizing: border-box; }
-j3w1-sidebar-nav button, j3w1-sidebar-nav input, j3w1-sidebar-nav select, j3w1-sidebar-nav textarea { font: inherit; }
+j3w1-sidebar-nav :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-sidebar-nav ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,7 +26,7 @@ j3w1-sidebar-nav .sr-only {
 }
 
 j3w1-sidebar-nav .sidebar-nav {
-  --_indent: calc(var(--density-icon, 16px) + var(--space-8));
+  --_indent: calc(var(--density-icon, 12px) + var(--space-8));
   min-width: 0;
   max-width: calc(var(--font-size-ui-md) * 15);
   padding: var(--space-4) 0;
@@ -58,9 +58,9 @@ j3w1-sidebar-nav .sidebar-nav-link {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
-  padding-inline-start: calc(var(--density-control-padding-x, 12px) - var(--border-width-emphasis));
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
+  padding-inline-start: calc(var(--density-control-padding-x, 8px) - var(--border-width-emphasis));
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -76,8 +76,8 @@ j3w1-sidebar-nav .sidebar-nav-link {
 j3w1-sidebar-nav .sidebar-nav-icon {
   display: inline-flex;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-icon-default);
 }
 
@@ -119,12 +119,12 @@ j3w1-sidebar-nav .sidebar-nav-link:focus-visible {
 j3w1-sidebar-nav .sidebar-nav-link:focus:not(:focus-visible) {
   outline: 0;
 }
-j3w1-sidebar-nav .sidebar-nav-link[aria-current="page"] {
+j3w1-sidebar-nav .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) {
   border-inline-start-color: var(--color-border-selected-indicator);
   color: var(--color-text-bright);
 }
 
-j3w1-sidebar-nav .sidebar-nav-link[aria-current="page"] .sidebar-nav-icon {
+j3w1-sidebar-nav .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) .sidebar-nav-icon {
   color: var(--color-text-bright);
 }
 j3w1-sidebar-nav .sidebar-nav-link[aria-selected="true"] {
@@ -137,7 +137,7 @@ j3w1-sidebar-nav .sidebar-nav-link[aria-selected="true"] .sidebar-nav-icon {
 }
 
 j3w1-sidebar-nav .sidebar-nav-link[aria-selected="true"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 j3w1-sidebar-nav .sidebar-nav[data-container-inactive] .sidebar-nav-link[aria-selected="true"] {
   background: var(--color-interaction-selection-inactive-bg);
@@ -182,6 +182,37 @@ j3w1-sidebar-nav .sidebar-nav-collapsed .sidebar-nav-link {
   padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
 }
 
+@media (min-width: 900px) and (max-width: 1279.98px) {
+j3w1-sidebar-nav .site-rail {
+  max-width: none;
+  width: max-content;
+}
+
+j3w1-sidebar-nav .site-rail .sidebar-nav-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+j3w1-sidebar-nav .site-rail .sidebar-nav-chevron {
+  display: none;
+}
+
+j3w1-sidebar-nav .site-rail .sidebar-nav-sublist {
+  padding-inline-start: 0;
+}
+
+j3w1-sidebar-nav .site-rail .sidebar-nav-link {
+  justify-content: center;
+  padding-inline: var(--space-8);
+  padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
+}
+
+}
+
 @media (hover: none) {
   j3w1-sidebar-nav .sidebar-nav-link:hover {
     background: transparent;
@@ -203,7 +234,7 @@ j3w1-sidebar-nav .sidebar-nav-collapsed .sidebar-nav-link {
     outline-color: Highlight;
   }
 
-  j3w1-sidebar-nav .sidebar-nav-link[aria-current="page"] {
+  j3w1-sidebar-nav .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) {
     border-inline-start-color: Highlight;
   }
 
diff --git a/packages/ui/dist/copy/sidebar-nav/index.html b/packages/ui/dist/copy/sidebar-nav/index.html
index b0c24289e..af770a91b 100644
--- a/packages/ui/dist/copy/sidebar-nav/index.html
+++ b/packages/ui/dist/copy/sidebar-nav/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sidebar navigation · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-sidebar-nav id="example-sidebar-nav-default"><nav class="sidebar-nav" aria-label="Sections">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sidebar navigation · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-sidebar-nav id="example-sidebar-nav-default"><nav class="sidebar-nav" aria-label="Sections">
   <ul class="sidebar-nav-list">
     <li class="sidebar-nav-item"><a class="sidebar-nav-link sidebar-nav-current" href="#example-sidebar-nav-default-sn-overview" aria-current="page"><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><rect x="2.5" y="2.5" width="11" height="11"></rect></svg></span><span class="sidebar-nav-label">Overview</span></a></li>
     <li class="sidebar-nav-item"><a class="sidebar-nav-link sidebar-nav-link-demo-target" href="#example-sidebar-nav-default-sn-tokens"><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><circle cx="8" cy="8" r="5.5"></circle></svg></span><span class="sidebar-nav-label">Tokens</span></a></li>
diff --git a/packages/ui/dist/copy/sidebar-nav/manifest.json b/packages/ui/dist/copy/sidebar-nav/manifest.json
index a48fa15ec..5b35854b3 100644
--- a/packages/ui/dist/copy/sidebar-nav/manifest.json
+++ b/packages/ui/dist/copy/sidebar-nav/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/sidebar-nav.md",
   "dependencies": [
     "register/sidebar-nav.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/sidebar-nav.js",
-    "chunks/navigation-Dt8ap-9J.js"
+    "chunks/navigation-BfNzDYZB.js"
   ],
   "files": {
-    "runtime/register/sidebar-nav.js": "sha256-X/t0V38SB2UnmTa0KqYTvD4OKdvRFtsN75azWmcPa90=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/sidebar-nav.js": "sha256-LfEAicAsreVm6Jp/H/ocft61HelJ6RZo1rIPWFWRCCU=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-daIsd5K5mOs8Mmspd3m8ktJKgxTzPCRGoQY/6MQCDww=",
+    "runtime/register/sidebar-nav.js": "sha256-wezN/wQaG+kQGmgqJIj3iSl5mFjjKr0DJLl9jLsnRFA=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/sidebar-nav.js": "sha256-DZRlRYGAhBJm3yZ1nqAoW67+PcYUqE3uCTEEnKa9NFQ=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-LJ8LLDvQsYO50EORdep12yfyTFwnO4BxbDzOwHYpciA=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-LBoiPSLgtVIozM1wEFWbV78DaFWbIW+6OgOjaCSim8g=",
-    "index.html": "sha256-iigY56T4Y5udSqoBZloU6658GNUHY+ynrBQSOg/+UIc=",
+    "index.html": "sha256-dOEwMnbaj98YMfD6CXUGCi5NU1carEGBEl7w+wp1Aok=",
     "README.md": "sha256-QjtvSq2sHwF8bsMsDu3BpvOyATxZ0oanPWICItjaETU="
   }
 }
diff --git a/packages/ui/dist/copy/sidebar-nav/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/sidebar-nav/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/sidebar-nav/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/sidebar-nav/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/sidebar-nav/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/sidebar-nav/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/sidebar-nav/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/sidebar-nav/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/sidebar-nav/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/sidebar-nav/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/sidebar-nav/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/sidebar-nav/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/sidebar-nav/runtime/chunks/navigation-BfNzDYZB.js b/packages/ui/dist/copy/sidebar-nav/runtime/chunks/navigation-BfNzDYZB.js
new file mode 100644
index 000000000..db2779553
--- /dev/null
+++ b/packages/ui/dist/copy/sidebar-nav/runtime/chunks/navigation-BfNzDYZB.js
@@ -0,0 +1,377 @@
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/navigation.js
+function tabs(root, { on }, listOverride) {
+	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
+	if (!list) return {};
+	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
+	const select = (id, focus = false) => {
+		const tab = items().find((item) => item.id === id);
+		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
+		all(list, "[role=\"tab\"]").forEach((item) => {
+			item.setAttribute("aria-selected", String(item === tab));
+			item.tabIndex = item === tab ? 0 : -1;
+		});
+		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
+			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
+			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
+		});
+		if (focus) tab.focus();
+		return tab;
+	};
+	const activate = (tab) => {
+		select(tab.id);
+		root.emit("select", {
+			id: tab.id,
+			panelId: tab.getAttribute("aria-controls")
+		});
+	};
+	on(list, "click", (event) => {
+		const tab = event.target.closest("[role=\"tab\"]");
+		if (tab && enabled(tab)) activate(tab);
+	});
+	on(list, "keydown", (event) => {
+		const current = event.target.closest("[role=\"tab\"]"), options = items();
+		if (!current) return;
+		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		let index = options.indexOf(current);
+		if (event.key === next) index++;
+		else if (event.key === previous) index--;
+		else if (event.key === "Home") index = 0;
+		else if (event.key === "End") index = options.length - 1;
+		else if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			activate(current);
+			return;
+		} else return;
+		event.preventDefault();
+		const tab = rove(options, index);
+		if (root.getAttribute("activation") !== "manual") activate(tab);
+	});
+	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
+	if (initial) select(initial.id);
+	return {
+		select,
+		get selectedId() {
+			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
+		},
+		set selectedId(id) {
+			select(id);
+		}
+	};
+}
+function toolbar(root, { on }) {
+	const bar = root.querySelector("[role=\"toolbar\"]");
+	if (!bar) return {};
+	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
+	const initial = controls();
+	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
+	on(bar, "focusin", (event) => {
+		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
+	});
+	on(bar, "keydown", (event) => {
+		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
+		const items = controls(), index = items.indexOf(event.target);
+		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		if (![
+			next,
+			prev,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		event.preventDefault();
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
+	});
+	on(bar, "click", (event) => {
+		const button = event.target.closest("button[aria-pressed]");
+		if (button && enabled(button)) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.dataset.action ?? button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		}
+	});
+	return {};
+}
+function disclosure(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button[aria-controls][aria-expanded]");
+		if (!button || !enabled(button)) return;
+		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
+		if (!target) return;
+		const expanded = button.getAttribute("aria-expanded") !== "true";
+		button.setAttribute("aria-expanded", String(expanded));
+		target.hidden = !expanded;
+		root.emit("toggle", {
+			id: target.id,
+			expanded
+		});
+	});
+	const details = root.querySelector("details");
+	on(details, "toggle", () => root.emit("toggle", {
+		id: details.id,
+		expanded: details.open
+	}));
+	return {
+		get open() {
+			return details?.open ?? false;
+		},
+		set open(value) {
+			if (details) details.open = Boolean(value);
+		}
+	};
+}
+function combobox(root, { on, signal }) {
+	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
+	if (!input || !list) return {};
+	identify(root, list, "options");
+	input.setAttribute("aria-controls", list.id);
+	let active = null, notifying = false;
+	const notify = () => {
+		notifying = true;
+		try {
+			nativeInput(input);
+			nativeInput(input, "change");
+		} finally {
+			notifying = false;
+		}
+	};
+	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
+	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
+	const setActive = (option) => {
+		active = option;
+		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
+		if (option) {
+			input.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		} else input.removeAttribute("aria-activedescendant");
+	};
+	const hide = () => {
+		list.hidden = true;
+		input.setAttribute("aria-expanded", "false");
+		setActive(null);
+	};
+	const filter = (query = input.value) => {
+		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
+		all(list, "[role=\"group\"]").forEach((group) => {
+			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
+		});
+		const empty = root.querySelector(".combobox-empty");
+		if (empty) {
+			empty.hidden = options().length !== 0;
+			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
+		}
+		if (!options().includes(active)) setActive(null);
+	};
+	const show = (allOptions = false) => {
+		if (!enabled(input) || input.readOnly) return;
+		filter(allOptions ? "" : input.value);
+		list.hidden = false;
+		input.setAttribute("aria-expanded", "true");
+		place(input, list);
+	};
+	const choose = (option) => {
+		if (!option || !enabled(option)) return;
+		input.value = option.dataset.value ?? option.textContent.trim();
+		hide();
+		notify();
+		input.focus();
+	};
+	on(input, "input", () => {
+		if (!notifying) {
+			show();
+			announce(root, `${options().length} options available.`);
+		}
+	});
+	on(input, "keydown", (event) => {
+		if (event.key === "Tab") {
+			hide();
+			return;
+		}
+		if (event.key === "Escape") {
+			if (!list.hidden) {
+				hide();
+				event.stopPropagation();
+			} else if (input.value) {
+				input.value = "";
+				notify();
+				event.stopPropagation();
+			}
+			event.preventDefault();
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			hide();
+			return;
+		}
+		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			if (list.hidden) show(true);
+			if (event.altKey) return;
+			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
+			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
+		} else if (event.key === "Enter" && !list.hidden && active) {
+			event.preventDefault();
+			choose(active);
+		}
+	});
+	on(list, "pointerdown", (event) => {
+		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
+	});
+	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
+	on(root.querySelector(".combobox-toggle"), "click", () => {
+		list.hidden ? show(true) : hide();
+		input.focus();
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide();
+	});
+	on(root, "focusout", () => queueMicrotask(() => {
+		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
+	}));
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!list.hidden) place(input, list);
+	});
+	on(root.ownerDocument, "scroll", (event) => {
+		if (!list.hidden && !list.contains(event.target)) place(input, list);
+	}, { capture: true });
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !list.hidden;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		get value() {
+			return input.value;
+		},
+		set value(value) {
+			input.value = String(value ?? "");
+			if (!list.hidden) filter();
+		},
+		cleanup: hide
+	};
+}
+function menu(root, { on }) {
+	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
+	if (!trigger || !main) return {};
+	identify(root, main, "menu");
+	trigger.setAttribute("aria-controls", main.id);
+	const lists = all(root, "[role=\"menu\"]");
+	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
+	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
+	const closeList = (list) => {
+		list.hidden = true;
+		controller(list)?.setAttribute("aria-expanded", "false");
+	};
+	const hide = (focus = true) => {
+		lists.forEach(closeList);
+		if (focus) trigger.focus();
+	};
+	const showList = (list, button, last = false) => {
+		list.hidden = false;
+		button.setAttribute("aria-expanded", "true");
+		place(button, list);
+		rove(items(list), last ? items(list).length - 1 : 0);
+	};
+	const show = () => {
+		if (enabled(trigger)) showList(main, trigger);
+	};
+	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
+	const activate = (item) => {
+		if (!enabled(item)) return;
+		const child = submenu(item);
+		if (child) {
+			showList(child, item);
+			return;
+		}
+		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
+		else hide();
+		root.emit("action", {
+			action: item.dataset.action ?? item.textContent.trim(),
+			checked: item.getAttribute("aria-checked") === "true"
+		});
+	};
+	on(trigger, "click", () => main.hidden ? show() : hide());
+	on(trigger, "keydown", (event) => {
+		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
+			event.preventDefault();
+			showList(main, trigger, event.key === "ArrowUp");
+		}
+	});
+	on(root, "click", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (item) activate(item);
+	});
+	on(root, "keydown", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (!item) return;
+		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
+		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (list !== main) {
+				closeList(list);
+				controller(list)?.focus();
+			} else hide();
+		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
+			event.preventDefault();
+			showList(submenu(item), item);
+		} else if (event.key === "Tab") hide();
+		else if (event.key.length === 1 && /\S/.test(event.key)) {
+			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+			if (found) {
+				event.preventDefault();
+				rove(options, options.indexOf(found));
+			}
+		}
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument, "focusin", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
+	hide(false);
+	return {
+		show,
+		hide,
+		get open() {
+			return !main.hidden;
+		},
+		set open(value) {
+			value ? show() : hide(false);
+		},
+		cleanup() {
+			hide(false);
+		}
+	};
+}
+//#endregion
+export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/sidebar-nav/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/sidebar-nav/runtime/chunks/navigation-Dt8ap-9J.js
deleted file mode 100644
index 81201c8d5..000000000
--- a/packages/ui/dist/copy/sidebar-nav/runtime/chunks/navigation-Dt8ap-9J.js
+++ /dev/null
@@ -1,367 +0,0 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/navigation.js
-function tabs(root, { on }, listOverride) {
-	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
-	if (!list) return {};
-	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
-	const select = (id, focus = false) => {
-		const tab = items().find((item) => item.id === id);
-		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
-		all(list, "[role=\"tab\"]").forEach((item) => {
-			item.setAttribute("aria-selected", String(item === tab));
-			item.tabIndex = item === tab ? 0 : -1;
-		});
-		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
-			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
-			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
-		});
-		if (focus) tab.focus();
-		return tab;
-	};
-	const activate = (tab) => {
-		select(tab.id);
-		root.emit("select", {
-			id: tab.id,
-			panelId: tab.getAttribute("aria-controls")
-		});
-	};
-	on(list, "click", (event) => {
-		const tab = event.target.closest("[role=\"tab\"]");
-		if (tab && enabled(tab)) activate(tab);
-	});
-	on(list, "keydown", (event) => {
-		const current = event.target.closest("[role=\"tab\"]"), options = items();
-		if (!current) return;
-		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		let index = options.indexOf(current);
-		if (event.key === next) index++;
-		else if (event.key === previous) index--;
-		else if (event.key === "Home") index = 0;
-		else if (event.key === "End") index = options.length - 1;
-		else if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			activate(current);
-			return;
-		} else return;
-		event.preventDefault();
-		const tab = rove(options, index);
-		if (root.getAttribute("activation") !== "manual") activate(tab);
-	});
-	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
-	if (initial) select(initial.id);
-	return {
-		select,
-		get selectedId() {
-			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
-		},
-		set selectedId(id) {
-			select(id);
-		}
-	};
-}
-function toolbar(root, { on }) {
-	const bar = root.querySelector("[role=\"toolbar\"]");
-	if (!bar) return {};
-	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
-	const initial = controls();
-	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
-	on(bar, "focusin", (event) => {
-		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
-	});
-	on(bar, "keydown", (event) => {
-		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
-		const items = controls(), index = items.indexOf(event.target);
-		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		if (![
-			next,
-			prev,
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
-	});
-	on(bar, "click", (event) => {
-		const button = event.target.closest("button[aria-pressed]");
-		if (button && enabled(button)) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.dataset.action ?? button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		}
-	});
-	return {};
-}
-function disclosure(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button[aria-controls][aria-expanded]");
-		if (!button || !enabled(button)) return;
-		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
-		if (!target) return;
-		const expanded = button.getAttribute("aria-expanded") !== "true";
-		button.setAttribute("aria-expanded", String(expanded));
-		target.hidden = !expanded;
-		root.emit("toggle", {
-			id: target.id,
-			expanded
-		});
-	});
-	const details = root.querySelector("details");
-	on(details, "toggle", () => root.emit("toggle", {
-		id: details.id,
-		expanded: details.open
-	}));
-	return {
-		get open() {
-			return details?.open ?? false;
-		},
-		set open(value) {
-			if (details) details.open = Boolean(value);
-		}
-	};
-}
-function combobox(root, { on, signal }) {
-	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
-	if (!input || !list) return {};
-	identify(root, list, "options");
-	input.setAttribute("aria-controls", list.id);
-	let active = null, notifying = false;
-	const notify = () => {
-		notifying = true;
-		try {
-			nativeInput(input);
-			nativeInput(input, "change");
-		} finally {
-			notifying = false;
-		}
-	};
-	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
-	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
-	const setActive = (option) => {
-		active = option;
-		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
-		if (option) {
-			input.setAttribute("aria-activedescendant", option.id);
-			option.scrollIntoView({ block: "nearest" });
-		} else input.removeAttribute("aria-activedescendant");
-	};
-	const hide = () => {
-		list.hidden = true;
-		input.setAttribute("aria-expanded", "false");
-		setActive(null);
-	};
-	const filter = (query = input.value) => {
-		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-		all(list, "[role=\"group\"]").forEach((group) => {
-			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
-		});
-		const empty = root.querySelector(".combobox-empty");
-		if (empty) {
-			empty.hidden = options().length !== 0;
-			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
-		}
-		if (!options().includes(active)) setActive(null);
-	};
-	const show = (allOptions = false) => {
-		if (!enabled(input) || input.readOnly) return;
-		filter(allOptions ? "" : input.value);
-		list.hidden = false;
-		input.setAttribute("aria-expanded", "true");
-		place(input, list);
-	};
-	const choose = (option) => {
-		if (!option || !enabled(option)) return;
-		input.value = option.dataset.value ?? option.textContent.trim();
-		hide();
-		notify();
-		input.focus();
-	};
-	on(input, "input", () => {
-		if (!notifying) {
-			show();
-			announce(root, `${options().length} options available.`);
-		}
-	});
-	on(input, "keydown", (event) => {
-		if (event.key === "Tab") {
-			hide();
-			return;
-		}
-		if (event.key === "Escape") {
-			if (!list.hidden) {
-				hide();
-				event.stopPropagation();
-			} else if (input.value) {
-				input.value = "";
-				notify();
-				event.stopPropagation();
-			}
-			event.preventDefault();
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			hide();
-			return;
-		}
-		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-			event.preventDefault();
-			if (list.hidden) show(true);
-			if (event.altKey) return;
-			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
-			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
-		} else if (event.key === "Enter" && !list.hidden && active) {
-			event.preventDefault();
-			choose(active);
-		}
-	});
-	on(list, "pointerdown", (event) => {
-		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
-	});
-	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
-	on(root.querySelector(".combobox-toggle"), "click", () => {
-		list.hidden ? show(true) : hide();
-		input.focus();
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide();
-	});
-	on(root, "focusout", () => queueMicrotask(() => {
-		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
-	}));
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!list.hidden) place(input, list);
-	});
-	on(root.ownerDocument, "scroll", (event) => {
-		if (!list.hidden && !list.contains(event.target)) place(input, list);
-	}, { capture: true });
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !list.hidden;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		get value() {
-			return input.value;
-		},
-		set value(value) {
-			input.value = String(value ?? "");
-			if (!list.hidden) filter();
-		},
-		cleanup: hide
-	};
-}
-function menu(root, { on }) {
-	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
-	if (!trigger || !main) return {};
-	identify(root, main, "menu");
-	trigger.setAttribute("aria-controls", main.id);
-	const lists = all(root, "[role=\"menu\"]");
-	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
-	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
-	const closeList = (list) => {
-		list.hidden = true;
-		controller(list)?.setAttribute("aria-expanded", "false");
-	};
-	const hide = (focus = true) => {
-		lists.forEach(closeList);
-		if (focus) trigger.focus();
-	};
-	const showList = (list, button, last = false) => {
-		list.hidden = false;
-		button.setAttribute("aria-expanded", "true");
-		place(button, list);
-		rove(items(list), last ? items(list).length - 1 : 0);
-	};
-	const show = () => {
-		if (enabled(trigger)) showList(main, trigger);
-	};
-	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
-	const activate = (item) => {
-		if (!enabled(item)) return;
-		const child = submenu(item);
-		if (child) {
-			showList(child, item);
-			return;
-		}
-		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
-		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
-		else hide();
-		root.emit("action", {
-			action: item.dataset.action ?? item.textContent.trim(),
-			checked: item.getAttribute("aria-checked") === "true"
-		});
-	};
-	on(trigger, "click", () => main.hidden ? show() : hide());
-	on(trigger, "keydown", (event) => {
-		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
-			event.preventDefault();
-			showList(main, trigger, event.key === "ArrowUp");
-		}
-	});
-	on(root, "click", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (item) activate(item);
-	});
-	on(root, "keydown", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (!item) return;
-		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
-		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
-			event.preventDefault();
-			event.stopPropagation();
-			if (list !== main) {
-				closeList(list);
-				controller(list)?.focus();
-			} else hide();
-		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
-			event.preventDefault();
-			showList(submenu(item), item);
-		} else if (event.key === "Tab") hide();
-		else if (event.key.length === 1 && /\S/.test(event.key)) {
-			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-			if (found) {
-				event.preventDefault();
-				rove(options, options.indexOf(found));
-			}
-		}
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument, "focusin", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
-	hide(false);
-	return {
-		show,
-		hide,
-		get open() {
-			return !main.hidden;
-		},
-		set open(value) {
-			value ? show() : hide(false);
-		},
-		cleanup() {
-			hide(false);
-		}
-	};
-}
-//#endregion
-export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/sidebar-nav/runtime/components/sidebar-nav.js b/packages/ui/dist/copy/sidebar-nav/runtime/components/sidebar-nav.js
index 17b99366b..03f391cbd 100644
--- a/packages/ui/dist/copy/sidebar-nav/runtime/components/sidebar-nav.js
+++ b/packages/ui/dist/copy/sidebar-nav/runtime/components/sidebar-nav.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as disclosure } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as disclosure } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/sidebar-nav.js
 var J3w1SidebarNav = class extends J3w1Element {
 	static componentId = "sidebar-nav";
 	static version = "4.0.0";
-	static implementationId = "sha256-7P+xFrwVfLOcV9jD54m5q0GPgMxEknJwkB/ex41V9/E=";
+	static implementationId = "sha256-rKjBWaKv0/VZBCTIvYNnUx/X/HyPypn7MJrL9+nt6cM=";
 	static connect = disclosure;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/sidebar-nav/runtime/register/sidebar-nav.js b/packages/ui/dist/copy/sidebar-nav/runtime/register/sidebar-nav.js
index 8f0297afb..59f4cc44a 100644
--- a/packages/ui/dist/copy/sidebar-nav/runtime/register/sidebar-nav.js
+++ b/packages/ui/dist/copy/sidebar-nav/runtime/register/sidebar-nav.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1SidebarNav } from "../components/sidebar-nav.js";
 //#region .cache/ui-build/entries/register/sidebar-nav.js
 var element = registerElement("j3w1-sidebar-nav", J3w1SidebarNav);
diff --git a/packages/ui/dist/copy/sidebar-nav/tokens.css b/packages/ui/dist/copy/sidebar-nav/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/sidebar-nav/tokens.css
+++ b/packages/ui/dist/copy/sidebar-nav/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/skeleton/component.css b/packages/ui/dist/copy/skeleton/component.css
index 32202be67..7b8326bc3 100644
--- a/packages/ui/dist/copy/skeleton/component.css
+++ b/packages/ui/dist/copy/skeleton/component.css
@@ -8,7 +8,7 @@ j3w1-skeleton {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-skeleton, j3w1-skeleton *, j3w1-skeleton *::before, j3w1-skeleton *::after { box-sizing: border-box; }
-j3w1-skeleton button, j3w1-skeleton input, j3w1-skeleton select, j3w1-skeleton textarea { font: inherit; }
+j3w1-skeleton :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-skeleton ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,7 +26,7 @@ j3w1-skeleton .sr-only {
 }
 
 j3w1-skeleton .skeleton {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-skeleton .skeleton :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-skeleton .skeleton :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-skeleton .skeleton-block {height:var(--space-16);background:var(--color-surface-raised);border:var(--border-width-default) solid var(--color-border-divider)}j3w1-skeleton .skeleton-short {width:60%}j3w1-skeleton .skeleton[aria-busy=true] {animation:none;transition:none}
 
 j3w1-skeleton [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/skeleton/index.html b/packages/ui/dist/copy/skeleton/index.html
index a6f66885f..47c672e01 100644
--- a/packages/ui/dist/copy/skeleton/index.html
+++ b/packages/ui/dist/copy/skeleton/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Skeleton · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-skeleton id="example-skeleton-default"><div class="skeleton" aria-busy="true"><p role="status">Loading project details…</p><div class="skeleton-block" aria-hidden="true"></div><div class="skeleton-block skeleton-short" aria-hidden="true"></div></div></j3w1-skeleton><script type="module" src="./runtime/register/skeleton.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Skeleton · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-skeleton id="example-skeleton-default"><div class="skeleton" aria-busy="true"><p role="status">Loading project details…</p><div class="skeleton-block" aria-hidden="true"></div><div class="skeleton-block skeleton-short" aria-hidden="true"></div></div></j3w1-skeleton><script type="module" src="./runtime/register/skeleton.js"></script></body></html>
diff --git a/packages/ui/dist/copy/skeleton/manifest.json b/packages/ui/dist/copy/skeleton/manifest.json
index 5a3cbca38..15d4f79e7 100644
--- a/packages/ui/dist/copy/skeleton/manifest.json
+++ b/packages/ui/dist/copy/skeleton/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/skeleton.md",
   "dependencies": [
     "register/skeleton.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/skeleton.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/skeleton.js": "sha256-LZWZWuDy/lr/JDq+2VL59KCkU2EurStRQaUsuNF4US4=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/skeleton.js": "sha256-Ou8+/8NCHGRzG6ik6k6762M8G4PMLaBQXj4aPynetXo=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-JI92x7GOktbjpIm0AQnODJ4rVTJnEQA4DLP34bflM4k=",
+    "runtime/register/skeleton.js": "sha256-JdObZ43D4BCk7fNL7BZvz8hcDULGiVrwvC7nVz4lwFE=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/skeleton.js": "sha256-WSpVLmYkqKadgGqtEfd4Hma86gL9cG2QQC4FW0BXHKw=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-Fdg05sQx+/Q5Ia/CN1d6mo9ueZkpbJnBwTnVSbNePgA=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-/g7jxryHfbaG3yxoxK8NfCh2k5U92wPPELD/107+2Ps=",
-    "index.html": "sha256-wOHcfVLjvDJzcjrxHt2FdIU6zvsgQKyM+mk68FWiW1g=",
+    "index.html": "sha256-fI+dNiKndtDjzLJEq6oahe+GPWudTAPb9j0TFGRIf78=",
     "README.md": "sha256-nzNnLPK+pu75MG+iTs+EMp/xOyJFTC/9GM9JCwIoCno="
   }
 }
diff --git a/packages/ui/dist/copy/skeleton/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/skeleton/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/skeleton/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/skeleton/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/skeleton/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/skeleton/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/skeleton/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/skeleton/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/skeleton/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/skeleton/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/skeleton/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/skeleton/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/skeleton/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/skeleton/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/skeleton/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/skeleton/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/skeleton/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/skeleton/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/skeleton/runtime/components/skeleton.js b/packages/ui/dist/copy/skeleton/runtime/components/skeleton.js
index c6e8e7fc4..16c0393a3 100644
--- a/packages/ui/dist/copy/skeleton/runtime/components/skeleton.js
+++ b/packages/ui/dist/copy/skeleton/runtime/components/skeleton.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/skeleton.js
 var J3w1Skeleton = class extends J3w1Element {
 	static componentId = "skeleton";
 	static version = "4.0.0";
-	static implementationId = "sha256-fM5rtzoVG8RbNxxxkZnyxAlMU2Y7X34uknqD80CcjkA=";
+	static implementationId = "sha256-ZyHv2dS6YAfZGShU1uHi9YjORc4siAkmG4ledp4rX5I=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/skeleton/runtime/register/skeleton.js b/packages/ui/dist/copy/skeleton/runtime/register/skeleton.js
index 71f911e98..ed0ab489a 100644
--- a/packages/ui/dist/copy/skeleton/runtime/register/skeleton.js
+++ b/packages/ui/dist/copy/skeleton/runtime/register/skeleton.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Skeleton } from "../components/skeleton.js";
 //#region .cache/ui-build/entries/register/skeleton.js
 var element = registerElement("j3w1-skeleton", J3w1Skeleton);
diff --git a/packages/ui/dist/copy/skeleton/tokens.css b/packages/ui/dist/copy/skeleton/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/skeleton/tokens.css
+++ b/packages/ui/dist/copy/skeleton/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/skip-link/component.css b/packages/ui/dist/copy/skip-link/component.css
index d6d1e5361..b12e669db 100644
--- a/packages/ui/dist/copy/skip-link/component.css
+++ b/packages/ui/dist/copy/skip-link/component.css
@@ -8,7 +8,7 @@ j3w1-skip-link {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-skip-link, j3w1-skip-link *, j3w1-skip-link *::before, j3w1-skip-link *::after { box-sizing: border-box; }
-j3w1-skip-link button, j3w1-skip-link input, j3w1-skip-link select, j3w1-skip-link textarea { font: inherit; }
+j3w1-skip-link :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-skip-link ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -30,7 +30,7 @@ j3w1-skip-link .skip-link {
   inset-inline-start: var(--space-8);
   top: calc(-1 * var(--space-48));
   z-index: var(--z-skip-link);
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: var(--space-4) var(--space-8);
   box-sizing: border-box;
   background: var(--color-surface-raised);
@@ -49,11 +49,6 @@ j3w1-skip-link .skip-link:focus-visible {
 j3w1-skip-link .skip-link:focus:not(:focus-visible) {
   outline: 0;
 }
-j3w1-skip-link .skip-link-demo {
-  position: relative;
-  min-height: calc(var(--density-control-height, 32px) + var(--space-16));
-  overflow: hidden;
-}
 
 @media (forced-colors: active) {
   j3w1-skip-link .skip-link:focus-visible {
diff --git a/packages/ui/dist/copy/skip-link/index.html b/packages/ui/dist/copy/skip-link/index.html
index 00728e05f..2850b9347 100644
--- a/packages/ui/dist/copy/skip-link/index.html
+++ b/packages/ui/dist/copy/skip-link/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Skip link · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-skip-link id="example-skip-link-default"><a class="skip-link" href="#example-skip-link-default-main">Skip to content</a><p id="example-skip-link-default-main" tabindex="-1" class="j3w1-example-target">Example destination: main</p></j3w1-skip-link><script type="module" src="./runtime/register/skip-link.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Skip link · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-skip-link id="example-skip-link-default"><a class="skip-link" href="#example-skip-link-default-main">Skip to content</a><p id="example-skip-link-default-main" tabindex="-1" class="j3w1-example-target">Example destination: main</p></j3w1-skip-link><script type="module" src="./runtime/register/skip-link.js"></script></body></html>
diff --git a/packages/ui/dist/copy/skip-link/manifest.json b/packages/ui/dist/copy/skip-link/manifest.json
index 77946ee8c..70c40cce2 100644
--- a/packages/ui/dist/copy/skip-link/manifest.json
+++ b/packages/ui/dist/copy/skip-link/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/skip-link.md",
   "dependencies": [
     "register/skip-link.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/skip-link.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/skip-link.js": "sha256-J3W8TBKgxKkjPInemg2o0yMPFluGS5Q/lPN9NQYBXAo=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/skip-link.js": "sha256-PjQqYJSg0aTsGAbfb9qa+aisYGXDJgGgWN+ZwS/vgFQ=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-KCkIExZyQJQhySZCEQIOrm9lPtDzOq95R9+IED0MI8A=",
+    "runtime/register/skip-link.js": "sha256-GO29Wu/J6tcKAaNSyJEft5Nuiyn1QXF0x+VY1acaNuA=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/skip-link.js": "sha256-MomchP1kmj8/eRX8uVLTPeXPPhyYI18353abxwxtqTo=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-AX9f8HRHYyMt1utmAsrIP+UncKsDILTwMv4qUMxNku0=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-TllH5VfEO0Xn2+KsNK2k/W4RJWPv9CVLWE38btvoOpw=",
-    "index.html": "sha256-/HDnZh+ZTER/j0o82CsKR1s11+5KNWqzGpG3Q+RrG1Q=",
+    "index.html": "sha256-g9qP8QdXNXioXgABunl8DwcIBtkCTZH2B6+LuBrOPX0=",
     "README.md": "sha256-YX3Ch7JuUJRqIpsiYPlIc/09irmjC9OLqMTSPNUidYM="
   }
 }
diff --git a/packages/ui/dist/copy/skip-link/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/skip-link/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/skip-link/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/skip-link/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/skip-link/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/skip-link/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/skip-link/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/skip-link/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/skip-link/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/skip-link/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/skip-link/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/skip-link/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/skip-link/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/skip-link/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/skip-link/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/skip-link/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/skip-link/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/skip-link/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/skip-link/runtime/components/skip-link.js b/packages/ui/dist/copy/skip-link/runtime/components/skip-link.js
index 31537fda3..65021bd9d 100644
--- a/packages/ui/dist/copy/skip-link/runtime/components/skip-link.js
+++ b/packages/ui/dist/copy/skip-link/runtime/components/skip-link.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/skip-link.js
 var J3w1SkipLink = class extends J3w1Element {
 	static componentId = "skip-link";
 	static version = "4.0.0";
-	static implementationId = "sha256-KdblE6x/JhgGz9zwqnBxtLslwBM2YaG4D+gQYhv8+U8=";
+	static implementationId = "sha256-S77cz706XKgfI8OMLIyAhZab0PRCJkMplNQrcZjKP3c=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/skip-link/runtime/register/skip-link.js b/packages/ui/dist/copy/skip-link/runtime/register/skip-link.js
index 24e9f3d0c..7f93eeef8 100644
--- a/packages/ui/dist/copy/skip-link/runtime/register/skip-link.js
+++ b/packages/ui/dist/copy/skip-link/runtime/register/skip-link.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1SkipLink } from "../components/skip-link.js";
 //#region .cache/ui-build/entries/register/skip-link.js
 var element = registerElement("j3w1-skip-link", J3w1SkipLink);
diff --git a/packages/ui/dist/copy/skip-link/tokens.css b/packages/ui/dist/copy/skip-link/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/skip-link/tokens.css
+++ b/packages/ui/dist/copy/skip-link/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/switch/component.css b/packages/ui/dist/copy/switch/component.css
index 39df894b0..c71e16c18 100644
--- a/packages/ui/dist/copy/switch/component.css
+++ b/packages/ui/dist/copy/switch/component.css
@@ -8,7 +8,7 @@ j3w1-switch {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-switch, j3w1-switch *, j3w1-switch *::before, j3w1-switch *::after { box-sizing: border-box; }
-j3w1-switch button, j3w1-switch input, j3w1-switch select, j3w1-switch textarea { font: inherit; }
+j3w1-switch :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-switch ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/packages/ui/dist/copy/switch/index.html b/packages/ui/dist/copy/switch/index.html
index ba715084d..bef0eb690 100644
--- a/packages/ui/dist/copy/switch/index.html
+++ b/packages/ui/dist/copy/switch/index.html
@@ -1,4 +1,4 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Switch · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-switch id="example-switch-default"><button class="switch" type="button" role="switch" aria-checked="false" aria-label="Wrap long lines">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Switch · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-switch id="example-switch-default"><button class="switch" type="button" role="switch" aria-checked="false" aria-label="Wrap long lines">
   <span class="switch-track"><span class="switch-thumb"></span></span>
 </button></j3w1-switch><script type="module" src="./runtime/register/switch.js"></script></body></html>
diff --git a/packages/ui/dist/copy/switch/manifest.json b/packages/ui/dist/copy/switch/manifest.json
index 10ebfb915..f6f05163a 100644
--- a/packages/ui/dist/copy/switch/manifest.json
+++ b/packages/ui/dist/copy/switch/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/switch.md",
   "dependencies": [
     "register/switch.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/switch.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/switch.js": "sha256-WA0Avt/JJmz7DqxDx8v5Rnw3WCZFaVGJjPdibTQKkSc=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/switch.js": "sha256-Cad08u/MHjqLKKV0MpUQNKaHz1fLJnvy5dfayoqsjvI=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-wQ5f/FFGWolJtnjyPar452XqRgkIhBLJEQbc8ziQvag=",
+    "runtime/register/switch.js": "sha256-6l7gxY7bHWXI4K8WMdikGfg6Itnf2Uy8hSbsvn+XCYM=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/switch.js": "sha256-sdfSvJlKylAeDbhRKPMRUZ+piEOzKs1aV52BDvjOV/o=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-HDlOyl2v6b36H0XdR4UOL3DcPMLKHXlvJ/+7QqF1sVA=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-bja8BqOYebPhAJ/84m7EUQysf7pqQJ3wMJ10wj4YBz4=",
-    "index.html": "sha256-UZvqjISxPBGEl7MJkilEMem3b7sjRYRpBJpzJneqq/Q=",
+    "index.html": "sha256-IF4S7//PahcEGINA+vv8hBV9DUViABqK+t6Eyfb0B1Y=",
     "README.md": "sha256-9Yw9PXXsjkMqCnWGR6UbhauQtlI0q6dR39YdGBbG71A="
   }
 }
diff --git a/packages/ui/dist/copy/switch/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/switch/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/switch/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/switch/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/switch/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/switch/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/switch/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/switch/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/switch/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/switch/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/switch/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/switch/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/switch/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/switch/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/switch/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/switch/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/switch/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/switch/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/switch/runtime/components/switch.js b/packages/ui/dist/copy/switch/runtime/components/switch.js
index 8dd46651f..87c027482 100644
--- a/packages/ui/dist/copy/switch/runtime/components/switch.js
+++ b/packages/ui/dist/copy/switch/runtime/components/switch.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { a as switchControl } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { a as switchControl } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/switch.js
 var J3w1Switch = class extends J3w1Element {
 	static componentId = "switch";
 	static version = "4.0.0";
-	static implementationId = "sha256-Wsym3Y7lkfx+vDtiTBtZS2h3anSfvc8bYabeqBAc4ms=";
+	static implementationId = "sha256-FqTv7TNhvOBWq10QKBC1FBB+4Wxd4wo2qtt4bCUEvbA=";
 	static connect = switchControl;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/switch/runtime/register/switch.js b/packages/ui/dist/copy/switch/runtime/register/switch.js
index 05a2f592f..5e227ec0d 100644
--- a/packages/ui/dist/copy/switch/runtime/register/switch.js
+++ b/packages/ui/dist/copy/switch/runtime/register/switch.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Switch } from "../components/switch.js";
 //#region .cache/ui-build/entries/register/switch.js
 var element = registerElement("j3w1-switch", J3w1Switch);
diff --git a/packages/ui/dist/copy/switch/tokens.css b/packages/ui/dist/copy/switch/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/switch/tokens.css
+++ b/packages/ui/dist/copy/switch/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/table/component.css b/packages/ui/dist/copy/table/component.css
index 07ed29952..8104196ce 100644
--- a/packages/ui/dist/copy/table/component.css
+++ b/packages/ui/dist/copy/table/component.css
@@ -8,7 +8,7 @@ j3w1-table {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-table, j3w1-table *, j3w1-table *::before, j3w1-table *::after { box-sizing: border-box; }
-j3w1-table button, j3w1-table input, j3w1-table select, j3w1-table textarea { font: inherit; }
+j3w1-table :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-table ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -57,7 +57,7 @@ j3w1-table .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -79,7 +79,7 @@ j3w1-table .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -111,7 +111,7 @@ j3w1-table .table .table-body .table-row:first-child {
 
 j3w1-table .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -148,6 +148,21 @@ j3w1-table .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-table .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-table .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-table .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-table .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -169,7 +184,7 @@ j3w1-table .table-row[aria-selected="true"]:hover {
 }
 j3w1-table .table-row[aria-selected="true"]:focus-visible,
 j3w1-table .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-table .table[data-container-inactive] .table-row[aria-selected="true"] {
diff --git a/packages/ui/dist/copy/table/index.html b/packages/ui/dist/copy/table/index.html
index 8d60fa528..cb0fa1a30 100644
--- a/packages/ui/dist/copy/table/index.html
+++ b/packages/ui/dist/copy/table/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Table · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-table id="example-table-default"><div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="table"><caption class="table-caption">Project records · synthetic fixture</caption><thead class="table-head"><tr><th class="table-header" scope="col"><button class="table-sort" type="button">Project<span class="table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="table-header" scope="col"><button class="table-sort" type="button">Owner<span class="table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="table-header" scope="col"><button class="table-sort" type="button">Status<span class="table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="table-header" scope="col"><button class="table-sort" type="button">Scope<span class="table-sort-glyph" aria-hidden="true">↕</span></button></th></tr></thead><tbody class="table-body"><tr class="table-row" id="example-table-default-record-0" data-status="Ready"><td class="table-cell" id="example-table-default-record-name-0">Atlas library</td><td class="table-cell">Avery Kim</td><td class="table-cell">Ready</td><td class="table-cell">24</td></tr><tr class="table-row" id="example-table-default-record-1" data-status="In progress"><td class="table-cell" id="example-table-default-record-name-1">Orion workspace</td><td class="table-cell">Jordan Lee</td><td class="table-cell">In progress</td><td class="table-cell">12</td></tr><tr class="table-row" id="example-table-default-record-2" data-status="Ready"><td class="table-cell" id="example-table-default-record-name-2">Field notes</td><td class="table-cell">Morgan Noor</td><td class="table-cell">Ready</td><td class="table-cell">38</td></tr><tr class="table-row" id="example-table-default-record-3" data-status="Review"><td class="table-cell" id="example-table-default-record-name-3">Signal monitor</td><td class="table-cell">Riley Stone</td><td class="table-cell">Review</td><td class="table-cell">6</td></tr><tr class="table-empty" hidden=""><td class="table-empty-cell" colspan="4">No rows match.</td></tr><tr class="table-loading" hidden=""><td colspan="4">⋯ Loading rows</td></tr></tbody></table></div></j3w1-table><script type="module" src="./runtime/register/table.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Table · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-table id="example-table-default"><div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="table"><caption class="table-caption">Project records · synthetic fixture</caption><thead class="table-head"><tr><th class="table-header" scope="col"><button class="table-sort" type="button">Project<span class="table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="table-header" scope="col"><button class="table-sort" type="button">Owner<span class="table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="table-header" scope="col"><button class="table-sort" type="button">Status<span class="table-sort-glyph" aria-hidden="true">↕</span></button></th><th class="table-header" scope="col"><button class="table-sort" type="button">Scope<span class="table-sort-glyph" aria-hidden="true">↕</span></button></th></tr></thead><tbody class="table-body"><tr class="table-row" id="example-table-default-record-0" data-status="Ready"><td class="table-cell" id="example-table-default-record-name-0">Atlas library</td><td class="table-cell">Avery Kim</td><td class="table-cell">Ready</td><td class="table-cell">24</td></tr><tr class="table-row" id="example-table-default-record-1" data-status="In progress"><td class="table-cell" id="example-table-default-record-name-1">Orion workspace</td><td class="table-cell">Jordan Lee</td><td class="table-cell">In progress</td><td class="table-cell">12</td></tr><tr class="table-row" id="example-table-default-record-2" data-status="Ready"><td class="table-cell" id="example-table-default-record-name-2">Field notes</td><td class="table-cell">Morgan Noor</td><td class="table-cell">Ready</td><td class="table-cell">38</td></tr><tr class="table-row" id="example-table-default-record-3" data-status="Review"><td class="table-cell" id="example-table-default-record-name-3">Signal monitor</td><td class="table-cell">Riley Stone</td><td class="table-cell">Review</td><td class="table-cell">6</td></tr><tr class="table-empty" hidden=""><td class="table-empty-cell" colspan="4">No rows match.</td></tr><tr class="table-loading" hidden=""><td colspan="4">⋯ Loading rows</td></tr></tbody></table></div></j3w1-table><script type="module" src="./runtime/register/table.js"></script></body></html>
diff --git a/packages/ui/dist/copy/table/manifest.json b/packages/ui/dist/copy/table/manifest.json
index 159c2eecd..bf2f1cdcb 100644
--- a/packages/ui/dist/copy/table/manifest.json
+++ b/packages/ui/dist/copy/table/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/table.md",
   "dependencies": [
     "register/table.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/table.js",
-    "chunks/tables-B25ydUHs.js"
+    "chunks/tables-Cjr1EIJz.js"
   ],
   "files": {
-    "runtime/register/table.js": "sha256-MdQKdnzPN7NGGdLpVWq6qbgJvHQFdZaIpYLaOLJxRfo=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/table.js": "sha256-leonu0udFEH8CaIXE0yhLXubdVcLX8V/g+fDayFea7E=",
-    "runtime/chunks/tables-B25ydUHs.js": "sha256-XqRdyfrSS93rVybWHq6a0WhrmZgaboHi5n8ymgwRbM8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-ZLczhksx4+OpxZGChcR6o/jBIHldhOt8XpRDJPyDfeU=",
+    "runtime/register/table.js": "sha256-+Up9lgrfevvvIUF9vuOOwKxw0nDOAU/VctLLKZ73sd8=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/table.js": "sha256-CcoLzw/lwTUDE+3sCYBoQQoZAlE++zhK1ZLZELpyYN4=",
+    "runtime/chunks/tables-Cjr1EIJz.js": "sha256-K6BF6M6xNawgWdL+NIcBRZmY98j45o69tBI034Ks4Bg=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-FsyIsB3w0mFPeVNG2Yq+D6/h7aeVKJpEALxaD4j3afY=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-eTlfzsTldT7TjA25qNYpX+MAAskuYiA9Y+zZW9/B+MU=",
-    "index.html": "sha256-wHPL38nEdZyiESe+MlLb9ZgRLg+MfbRXMzN538tD0pE=",
+    "index.html": "sha256-A21rR2XTwrPTwfZuz8lsPvFXneXhrFjzL0/Xdpfmo6o=",
     "README.md": "sha256-hZvyqPLVQoQuOKc7t2j0cESQRW84E8XfCL/ad6sXIdw="
   }
 }
diff --git a/packages/ui/dist/copy/table/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/table/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/table/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/table/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/table/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/table/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/table/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/table/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/table/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/table/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/table/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/table/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/table/runtime/chunks/tables-B25ydUHs.js b/packages/ui/dist/copy/table/runtime/chunks/tables-B25ydUHs.js
deleted file mode 100644
index 172bab830..000000000
--- a/packages/ui/dist/copy/table/runtime/chunks/tables-B25ydUHs.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { d as rove, i as all, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/tables.js
-function table(root, { on }) {
-	const element = root.querySelector("table"), body = element?.tBodies[0];
-	if (!element || !body) return {};
-	const rows = () => [...body.rows].filter((row) => !row.matches(".table-empty,.table-loading,.data-table-empty,.data-table-loading,[data-empty],[data-loading]"));
-	const shown = () => rows().filter((row) => !row.hidden);
-	const interactive = element.classList.contains("data-table");
-	const selectAll = element.querySelector(".data-table-select-all");
-	let anchor = null, query = "";
-	rows().forEach((row, index) => identify(root, row, `row-${index}`));
-	const selected = () => rows().filter((row) => row.getAttribute("aria-selected") === "true");
-	const syncSelection = () => {
-		for (const row of rows()) {
-			const box = row.querySelector("input[type=\"checkbox\"]");
-			if (box) box.checked = row.getAttribute("aria-selected") === "true";
-		}
-		if (selectAll) {
-			const count = shown().filter((row) => row.getAttribute("aria-selected") === "true").length;
-			selectAll.setAttribute("aria-checked", count === 0 ? "false" : count === shown().length ? "true" : "mixed");
-		}
-	};
-	const reportSelection = () => {
-		syncSelection();
-		root.emit("selection", { ids: selected().map((row) => row.id) });
-	};
-	const setSelected = (ids) => {
-		if (!Array.isArray(ids) || ids.some((id) => !rows().some((row) => row.id === id))) throw new RangeError("Selection contains an unknown row");
-		rows().forEach((row) => row.setAttribute("aria-selected", String(ids.includes(row.id))));
-		syncSelection();
-	};
-	const sort = (column, direction = "ascending") => {
-		const headers = [...element.tHead.rows[0].cells];
-		if (!Number.isInteger(column) || column < 0 || column >= headers.length || !["ascending", "descending"].includes(direction)) throw new RangeError("Invalid sort column or direction");
-		const compare = new Intl.Collator(void 0, {
-			numeric: true,
-			sensitivity: "base"
-		});
-		const value = (row) => row.cells[column]?.dataset.sortValue ?? row.cells[column]?.textContent.trim() ?? "";
-		rows().sort((a, b) => compare.compare(value(a), value(b)) * (direction === "ascending" ? 1 : -1)).forEach((row) => body.append(row));
-		headers.forEach((header) => {
-			if (header === headers[column]) header.setAttribute("aria-sort", direction);
-			else header.removeAttribute("aria-sort");
-		});
-		root.emit("sort", {
-			column,
-			direction
-		});
-	};
-	const filter = (text) => {
-		query = String(text ?? "");
-		const status = root.querySelector("select[data-status-filter]")?.value ?? "all";
-		for (const row of rows()) row.hidden = !row.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase()) || status !== "all" && row.dataset.status !== status;
-		const count = shown().length;
-		const empty = body.querySelector(".table-empty,.data-table-empty,[data-empty]");
-		if (empty) empty.hidden = count !== 0 || element.getAttribute("aria-busy") === "true";
-		const output = root.querySelector("[data-table-status],.filterable-table-count,.search-field-status");
-		if (output) output.textContent = `${count} matching records`;
-		if (interactive) {
-			const focused = shown().find((row) => row.tabIndex === 0) ?? shown()[0];
-			if (focused) rove(rows(), rows().indexOf(focused), false);
-		}
-		syncSelection();
-	};
-	on(element, "click", (event) => {
-		const button = event.target.closest(".table-sort,.data-table-sort");
-		if (button && enabled(button)) {
-			const header = button.closest("th");
-			sort(header.cellIndex, header.getAttribute("aria-sort") === "ascending" ? "descending" : "ascending");
-		}
-	});
-	on(selectAll, "click", () => {
-		if (!enabled(selectAll)) return;
-		const checked = selectAll.getAttribute("aria-checked") !== "true";
-		shown().forEach((row) => row.setAttribute("aria-selected", String(checked)));
-		reportSelection();
-	});
-	on(body, "change", (event) => {
-		if (event.target.matches("input[type=\"checkbox\"]")) {
-			event.target.closest("tr").setAttribute("aria-selected", String(event.target.checked));
-			reportSelection();
-		}
-	});
-	on(body, "keydown", (event) => {
-		if (!interactive || event.target.matches("input,button,a,select,textarea")) return;
-		const row = event.target.closest("tr"), options = shown(), index = options.indexOf(row);
-		if (index < 0) return;
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
-			event.preventDefault();
-			options.forEach((item) => item.setAttribute("aria-selected", "true"));
-			reportSelection();
-			return;
-		}
-		if (event.key === " ") {
-			event.preventDefault();
-			if (!selectAll) rows().filter((item) => item !== row).forEach((item) => item.setAttribute("aria-selected", "false"));
-			row.setAttribute("aria-selected", String(row.getAttribute("aria-selected") !== "true"));
-			anchor = row;
-			reportSelection();
-			return;
-		}
-		if (![
-			"ArrowUp",
-			"ArrowDown",
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		event.preventDefault();
-		const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
-		const next = rove(options, nextIndex);
-		if (event.shiftKey && selectAll) {
-			anchor ??= row;
-			const start = options.indexOf(anchor);
-			options.forEach((item, i) => item.setAttribute("aria-selected", String(i >= Math.min(start, nextIndex) && i <= Math.max(start, nextIndex))));
-			reportSelection();
-		} else if (!selectAll) {
-			setSelected([next.id]);
-			reportSelection();
-			anchor = next;
-		} else anchor = next;
-	});
-	const input = root.querySelector("input[type=\"search\"]");
-	on(input, "input", () => filter(input.value));
-	on(root.querySelector("select[data-status-filter]"), "change", () => filter(input?.value ?? query));
-	let drag = null;
-	const sizes = /* @__PURE__ */ new Map();
-	const resize = (header, width) => {
-		const value = Math.max(64, Math.min(1200, width));
-		header.style.width = `${value}px`;
-		header.style.minWidth = `${value}px`;
-		sizes.set(header, value);
-	};
-	all(element, ".data-table-resize").forEach((handle) => {
-		const header = handle.closest("th");
-		on(handle, "pointerdown", (event) => {
-			if (event.button !== 0) return;
-			event.preventDefault();
-			drag = {
-				header,
-				x: event.clientX,
-				width: header.getBoundingClientRect().width,
-				rtl: getComputedStyle(header).direction === "rtl"
-			};
-			handle.setPointerCapture?.(event.pointerId);
-		});
-	});
-	on(root.ownerDocument, "pointermove", (event) => {
-		if (drag) resize(drag.header, drag.width + (event.clientX - drag.x) * (drag.rtl ? -1 : 1));
-	});
-	on(root.ownerDocument, "pointerup", () => {
-		drag = null;
-	});
-	on(root.ownerDocument, "pointercancel", () => {
-		drag = null;
-	});
-	on(root, "j3w1-action", (event) => {
-		const match = /^resize:(\d+):(narrow|widen|reset)$/.exec(event.detail.action ?? "");
-		if (!match) return;
-		const header = element.tHead.rows[0].cells[Number(match[1])];
-		if (!header) return;
-		if (match[2] === "reset") {
-			header.style.removeProperty("width");
-			header.style.removeProperty("min-width");
-			sizes.delete(header);
-		} else resize(header, (sizes.get(header) ?? header.getBoundingClientRect().width) + (match[2] === "narrow" ? -24 : 24));
-	});
-	syncSelection();
-	filter(input?.value ?? "");
-	return {
-		sort,
-		filter,
-		get selectedIds() {
-			return selected().map((row) => row.id);
-		},
-		set selectedIds(ids) {
-			setSelected(ids);
-		},
-		cleanup() {
-			drag = null;
-		}
-	};
-}
-function pagination(root, { on }) {
-	let current = Number(root.querySelector("[aria-current=\"page\"]")?.dataset.page ?? 1);
-	const setPage = (page) => {
-		if (!Number.isInteger(page) || page < 1) throw new RangeError("page must be a positive integer");
-		current = page;
-		all(root, "[data-page]").forEach((control) => {
-			if (Number(control.dataset.page) === page) control.setAttribute("aria-current", "page");
-			else control.removeAttribute("aria-current");
-		});
-		const output = root.querySelector(".pagination-status-current");
-		if (output) output.textContent = String(page);
-	};
-	on(root, "click", (event) => {
-		const control = event.target.closest("[data-page]");
-		if (!control || !enabled(control)) return;
-		const page = Number(control.dataset.page);
-		setPage(page);
-		if (!root.emit("page", { page })) event.preventDefault();
-	});
-	return {
-		get page() {
-			return current;
-		},
-		set page(value) {
-			setPage(value);
-		}
-	};
-}
-//#endregion
-export { table as n, pagination as t };
diff --git a/packages/ui/dist/copy/table/runtime/chunks/tables-Cjr1EIJz.js b/packages/ui/dist/copy/table/runtime/chunks/tables-Cjr1EIJz.js
new file mode 100644
index 000000000..f82aaf25e
--- /dev/null
+++ b/packages/ui/dist/copy/table/runtime/chunks/tables-Cjr1EIJz.js
@@ -0,0 +1,217 @@
+import { c as keyIndex, f as rove, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/tables.js
+function table(root, { on }) {
+	const element = root.querySelector("table"), body = element?.tBodies[0];
+	if (!element || !body) return {};
+	const rows = () => [...body.rows].filter((row) => !row.matches(".table-empty,.table-loading,.data-table-empty,.data-table-loading,[data-empty],[data-loading]"));
+	const shown = () => rows().filter((row) => !row.hidden);
+	const interactive = element.classList.contains("data-table");
+	const selectAll = element.querySelector(".data-table-select-all");
+	let anchor = null, query = "";
+	rows().forEach((row, index) => identify(root, row, `row-${index}`));
+	const selected = () => rows().filter((row) => row.getAttribute("aria-selected") === "true");
+	const syncSelection = () => {
+		for (const row of rows()) {
+			const box = row.querySelector("input[type=\"checkbox\"]");
+			if (box) box.checked = row.getAttribute("aria-selected") === "true";
+		}
+		if (selectAll) {
+			const count = shown().filter((row) => row.getAttribute("aria-selected") === "true").length;
+			selectAll.setAttribute("aria-checked", count === 0 ? "false" : count === shown().length ? "true" : "mixed");
+		}
+	};
+	const reportSelection = () => {
+		syncSelection();
+		root.emit("selection", { ids: selected().map((row) => row.id) });
+	};
+	const setSelected = (ids) => {
+		if (!Array.isArray(ids) || ids.some((id) => !rows().some((row) => row.id === id))) throw new RangeError("Selection contains an unknown row");
+		rows().forEach((row) => row.setAttribute("aria-selected", String(ids.includes(row.id))));
+		syncSelection();
+	};
+	const sort = (column, direction = "ascending") => {
+		const headers = [...element.tHead.rows[0].cells];
+		if (!Number.isInteger(column) || column < 0 || column >= headers.length || !["ascending", "descending"].includes(direction)) throw new RangeError("Invalid sort column or direction");
+		const compare = new Intl.Collator(void 0, {
+			numeric: true,
+			sensitivity: "base"
+		});
+		const value = (row) => row.cells[column]?.dataset.sortValue ?? row.cells[column]?.textContent.trim() ?? "";
+		rows().sort((a, b) => compare.compare(value(a), value(b)) * (direction === "ascending" ? 1 : -1)).forEach((row) => body.append(row));
+		headers.forEach((header) => {
+			if (header === headers[column]) header.setAttribute("aria-sort", direction);
+			else header.removeAttribute("aria-sort");
+		});
+		root.emit("sort", {
+			column,
+			direction
+		});
+	};
+	const filter = (text) => {
+		query = String(text ?? "");
+		const status = root.querySelector("select[data-status-filter]")?.value ?? "all";
+		for (const row of rows()) row.hidden = !row.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase()) || status !== "all" && row.dataset.status !== status;
+		const count = shown().length;
+		const empty = body.querySelector(".table-empty,.data-table-empty,[data-empty]");
+		if (empty) empty.hidden = count !== 0 || element.getAttribute("aria-busy") === "true";
+		const output = root.querySelector("[data-table-status],.filterable-table-count,.search-field-status");
+		if (output) output.textContent = `${count} matching records`;
+		if (interactive) {
+			const focused = shown().find((row) => row.tabIndex === 0) ?? shown()[0];
+			if (focused) rove(rows(), rows().indexOf(focused), false);
+		}
+		syncSelection();
+	};
+	on(element, "click", (event) => {
+		const button = event.target.closest(".table-sort,.data-table-sort");
+		if (button && enabled(button)) {
+			const header = button.closest("th");
+			sort(header.cellIndex, header.getAttribute("aria-sort") === "ascending" ? "descending" : "ascending");
+		}
+	});
+	on(selectAll, "click", () => {
+		if (!enabled(selectAll)) return;
+		const checked = selectAll.getAttribute("aria-checked") !== "true";
+		shown().forEach((row) => row.setAttribute("aria-selected", String(checked)));
+		reportSelection();
+	});
+	on(body, "change", (event) => {
+		if (event.target.matches("input[type=\"checkbox\"]")) {
+			event.target.closest("tr").setAttribute("aria-selected", String(event.target.checked));
+			reportSelection();
+		}
+	});
+	on(body, "keydown", (event) => {
+		if (!interactive || event.target.matches("input,button,a,select,textarea")) return;
+		const row = event.target.closest("tr"), options = shown(), index = options.indexOf(row);
+		if (index < 0) return;
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
+			event.preventDefault();
+			options.forEach((item) => item.setAttribute("aria-selected", "true"));
+			reportSelection();
+			return;
+		}
+		if (event.key === " ") {
+			event.preventDefault();
+			if (!selectAll) rows().filter((item) => item !== row).forEach((item) => item.setAttribute("aria-selected", "false"));
+			row.setAttribute("aria-selected", String(row.getAttribute("aria-selected") !== "true"));
+			anchor = row;
+			reportSelection();
+			return;
+		}
+		if (![
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		event.preventDefault();
+		const nextIndex = keyIndex({
+			key: event.key,
+			index,
+			length: options.length,
+			wrap: false
+		});
+		const next = rove(options, nextIndex);
+		if (event.shiftKey && selectAll) {
+			anchor ??= row;
+			const start = options.indexOf(anchor);
+			options.forEach((item, i) => item.setAttribute("aria-selected", String(i >= Math.min(start, nextIndex) && i <= Math.max(start, nextIndex))));
+			reportSelection();
+		} else if (!selectAll) {
+			setSelected([next.id]);
+			reportSelection();
+			anchor = next;
+		} else anchor = next;
+	});
+	const input = root.querySelector("input[type=\"search\"]");
+	on(input, "input", () => filter(input.value));
+	on(root.querySelector("select[data-status-filter]"), "change", () => filter(input?.value ?? query));
+	let drag = null;
+	const sizes = /* @__PURE__ */ new Map();
+	const resize = (header, width) => {
+		const value = Math.max(64, Math.min(1200, width));
+		header.style.width = `${value}px`;
+		header.style.minWidth = `${value}px`;
+		sizes.set(header, value);
+	};
+	all(element, ".data-table-resize").forEach((handle) => {
+		const header = handle.closest("th");
+		on(handle, "pointerdown", (event) => {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			drag = {
+				header,
+				x: event.clientX,
+				width: header.getBoundingClientRect().width,
+				rtl: getComputedStyle(header).direction === "rtl"
+			};
+			handle.setPointerCapture?.(event.pointerId);
+		});
+	});
+	on(root.ownerDocument, "pointermove", (event) => {
+		if (drag) resize(drag.header, drag.width + (event.clientX - drag.x) * (drag.rtl ? -1 : 1));
+	});
+	on(root.ownerDocument, "pointerup", () => {
+		drag = null;
+	});
+	on(root.ownerDocument, "pointercancel", () => {
+		drag = null;
+	});
+	on(root, "j3w1-action", (event) => {
+		const match = /^resize:(\d+):(narrow|widen|reset)$/.exec(event.detail.action ?? "");
+		if (!match) return;
+		const header = element.tHead.rows[0].cells[Number(match[1])];
+		if (!header) return;
+		if (match[2] === "reset") {
+			header.style.removeProperty("width");
+			header.style.removeProperty("min-width");
+			sizes.delete(header);
+		} else resize(header, (sizes.get(header) ?? header.getBoundingClientRect().width) + (match[2] === "narrow" ? -24 : 24));
+	});
+	syncSelection();
+	filter(input?.value ?? "");
+	return {
+		sort,
+		filter,
+		get selectedIds() {
+			return selected().map((row) => row.id);
+		},
+		set selectedIds(ids) {
+			setSelected(ids);
+		},
+		cleanup() {
+			drag = null;
+		}
+	};
+}
+function pagination(root, { on }) {
+	let current = Number(root.querySelector("[aria-current=\"page\"]")?.dataset.page ?? 1);
+	const setPage = (page) => {
+		if (!Number.isInteger(page) || page < 1) throw new RangeError("page must be a positive integer");
+		current = page;
+		all(root, "[data-page]").forEach((control) => {
+			if (Number(control.dataset.page) === page) control.setAttribute("aria-current", "page");
+			else control.removeAttribute("aria-current");
+		});
+		const output = root.querySelector(".pagination-status-current");
+		if (output) output.textContent = String(page);
+	};
+	on(root, "click", (event) => {
+		const control = event.target.closest("[data-page]");
+		if (!control || !enabled(control)) return;
+		const page = Number(control.dataset.page);
+		setPage(page);
+		if (!root.emit("page", { page })) event.preventDefault();
+	});
+	return {
+		get page() {
+			return current;
+		},
+		set page(value) {
+			setPage(value);
+		}
+	};
+}
+//#endregion
+export { table as n, pagination as t };
diff --git a/packages/ui/dist/copy/table/runtime/components/table.js b/packages/ui/dist/copy/table/runtime/components/table.js
index 747e23ad7..a79632ad4 100644
--- a/packages/ui/dist/copy/table/runtime/components/table.js
+++ b/packages/ui/dist/copy/table/runtime/components/table.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as table } from "../chunks/tables-B25ydUHs.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as table } from "../chunks/tables-Cjr1EIJz.js";
 //#region .cache/ui-build/entries/components/table.js
 var J3w1Table = class extends J3w1Element {
 	static componentId = "table";
 	static version = "4.0.0";
-	static implementationId = "sha256-1o7THlBOZhryugncv5/v3bAs3dEZx7OD0QGD47Fx2q4=";
+	static implementationId = "sha256-dYinCl3vod1TSMh+SSPtibWEFlVRwhAF7TZ09eviokw=";
 	static connect = table;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/table/runtime/register/table.js b/packages/ui/dist/copy/table/runtime/register/table.js
index 10a75676a..b8eda4f9d 100644
--- a/packages/ui/dist/copy/table/runtime/register/table.js
+++ b/packages/ui/dist/copy/table/runtime/register/table.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Table } from "../components/table.js";
 //#region .cache/ui-build/entries/register/table.js
 var element = registerElement("j3w1-table", J3w1Table);
diff --git a/packages/ui/dist/copy/table/tokens.css b/packages/ui/dist/copy/table/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/table/tokens.css
+++ b/packages/ui/dist/copy/table/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/tabs/component.css b/packages/ui/dist/copy/tabs/component.css
index 276e935d1..bdeab9ba6 100644
--- a/packages/ui/dist/copy/tabs/component.css
+++ b/packages/ui/dist/copy/tabs/component.css
@@ -8,7 +8,7 @@ j3w1-tabs {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-tabs, j3w1-tabs *, j3w1-tabs *::before, j3w1-tabs *::after { box-sizing: border-box; }
-j3w1-tabs button, j3w1-tabs input, j3w1-tabs select, j3w1-tabs textarea { font: inherit; }
+j3w1-tabs :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-tabs ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -33,7 +33,7 @@ j3w1-tabs .tabs {
 
 j3w1-tabs .tabs-list {
   display: flex;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
@@ -44,8 +44,8 @@ j3w1-tabs .tabs-list {
 
 j3w1-tabs .tabs-tab {
   flex: 0 0 auto;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin-bottom: calc(-1 * var(--border-width-default));
   background: transparent;
   border: 0;
diff --git a/packages/ui/dist/copy/tabs/index.html b/packages/ui/dist/copy/tabs/index.html
index a2bbe567a..03e43dd9f 100644
--- a/packages/ui/dist/copy/tabs/index.html
+++ b/packages/ui/dist/copy/tabs/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Tabs · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-tabs id="example-tabs-default"><div class="tabs">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Tabs · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-tabs id="example-tabs-default"><div class="tabs">
   <div class="tabs-list" role="tablist" aria-label="Settings sections">
     <button class="tabs-tab" role="tab" type="button" id="example-tabs-default-tabs-general" aria-selected="true" aria-controls="example-tabs-default-tabs-panel-general" tabindex="0">General</button>
     <button class="tabs-tab tabs-tab-demo-target" role="tab" type="button" id="example-tabs-default-tabs-appearance" aria-selected="false" aria-controls="example-tabs-default-tabs-panel-appearance" tabindex="-1">Appearance</button>
diff --git a/packages/ui/dist/copy/tabs/manifest.json b/packages/ui/dist/copy/tabs/manifest.json
index 8a25bae6e..579026708 100644
--- a/packages/ui/dist/copy/tabs/manifest.json
+++ b/packages/ui/dist/copy/tabs/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/tabs.md",
   "dependencies": [
     "register/tabs.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/tabs.js",
-    "chunks/navigation-Dt8ap-9J.js"
+    "chunks/navigation-BfNzDYZB.js"
   ],
   "files": {
-    "runtime/register/tabs.js": "sha256-ZNIa4RlyyzL89jDO8N637zceDABaxE+yPzulw77+N9c=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/tabs.js": "sha256-42FcvN/By1ouS+HE0CiZ9FaasHLpN8HY7TiypjcFkdQ=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-zVXkxQteKGqZmvOgx444SE+3ubxZ6YdRaGci9hT3GeU=",
+    "runtime/register/tabs.js": "sha256-l7XwbcEZ8OmMB88/x9pUtN1ecLySUw198ASEleD+hZs=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/tabs.js": "sha256-2AWArhhBdqbiE1BHWeiumCgXyKi847dzv/cMGGfCfuA=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-fstv2PtC0k8ABx0bciCb6VX0pPTRl3oa8iGdR+6QR0Y=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-xe4UR+a4C9oNodr9UlW5OGE5DR5R9JErwW0UAalo8oE=",
-    "index.html": "sha256-w1fTqm25U4WCS0w6RvFvuUPfonjfue1T0ZJN83ccPr0=",
+    "index.html": "sha256-Lg89PWgkBGwJzhoQfiPykrsJ82dYys7yJEdQ1+tHpWM=",
     "README.md": "sha256-uBwdwc6EkHrqha/dCs9PWntoU1l7EAJb7Y6nx+zzrqI="
   }
 }
diff --git a/packages/ui/dist/copy/tabs/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/tabs/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/tabs/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/tabs/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/tabs/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/tabs/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/tabs/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/tabs/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/tabs/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/tabs/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/tabs/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/tabs/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/tabs/runtime/chunks/navigation-BfNzDYZB.js b/packages/ui/dist/copy/tabs/runtime/chunks/navigation-BfNzDYZB.js
new file mode 100644
index 000000000..db2779553
--- /dev/null
+++ b/packages/ui/dist/copy/tabs/runtime/chunks/navigation-BfNzDYZB.js
@@ -0,0 +1,377 @@
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/navigation.js
+function tabs(root, { on }, listOverride) {
+	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
+	if (!list) return {};
+	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
+	const select = (id, focus = false) => {
+		const tab = items().find((item) => item.id === id);
+		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
+		all(list, "[role=\"tab\"]").forEach((item) => {
+			item.setAttribute("aria-selected", String(item === tab));
+			item.tabIndex = item === tab ? 0 : -1;
+		});
+		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
+			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
+			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
+		});
+		if (focus) tab.focus();
+		return tab;
+	};
+	const activate = (tab) => {
+		select(tab.id);
+		root.emit("select", {
+			id: tab.id,
+			panelId: tab.getAttribute("aria-controls")
+		});
+	};
+	on(list, "click", (event) => {
+		const tab = event.target.closest("[role=\"tab\"]");
+		if (tab && enabled(tab)) activate(tab);
+	});
+	on(list, "keydown", (event) => {
+		const current = event.target.closest("[role=\"tab\"]"), options = items();
+		if (!current) return;
+		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		let index = options.indexOf(current);
+		if (event.key === next) index++;
+		else if (event.key === previous) index--;
+		else if (event.key === "Home") index = 0;
+		else if (event.key === "End") index = options.length - 1;
+		else if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			activate(current);
+			return;
+		} else return;
+		event.preventDefault();
+		const tab = rove(options, index);
+		if (root.getAttribute("activation") !== "manual") activate(tab);
+	});
+	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
+	if (initial) select(initial.id);
+	return {
+		select,
+		get selectedId() {
+			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
+		},
+		set selectedId(id) {
+			select(id);
+		}
+	};
+}
+function toolbar(root, { on }) {
+	const bar = root.querySelector("[role=\"toolbar\"]");
+	if (!bar) return {};
+	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
+	const initial = controls();
+	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
+	on(bar, "focusin", (event) => {
+		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
+	});
+	on(bar, "keydown", (event) => {
+		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
+		const items = controls(), index = items.indexOf(event.target);
+		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		if (![
+			next,
+			prev,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		event.preventDefault();
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
+	});
+	on(bar, "click", (event) => {
+		const button = event.target.closest("button[aria-pressed]");
+		if (button && enabled(button)) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.dataset.action ?? button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		}
+	});
+	return {};
+}
+function disclosure(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button[aria-controls][aria-expanded]");
+		if (!button || !enabled(button)) return;
+		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
+		if (!target) return;
+		const expanded = button.getAttribute("aria-expanded") !== "true";
+		button.setAttribute("aria-expanded", String(expanded));
+		target.hidden = !expanded;
+		root.emit("toggle", {
+			id: target.id,
+			expanded
+		});
+	});
+	const details = root.querySelector("details");
+	on(details, "toggle", () => root.emit("toggle", {
+		id: details.id,
+		expanded: details.open
+	}));
+	return {
+		get open() {
+			return details?.open ?? false;
+		},
+		set open(value) {
+			if (details) details.open = Boolean(value);
+		}
+	};
+}
+function combobox(root, { on, signal }) {
+	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
+	if (!input || !list) return {};
+	identify(root, list, "options");
+	input.setAttribute("aria-controls", list.id);
+	let active = null, notifying = false;
+	const notify = () => {
+		notifying = true;
+		try {
+			nativeInput(input);
+			nativeInput(input, "change");
+		} finally {
+			notifying = false;
+		}
+	};
+	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
+	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
+	const setActive = (option) => {
+		active = option;
+		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
+		if (option) {
+			input.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		} else input.removeAttribute("aria-activedescendant");
+	};
+	const hide = () => {
+		list.hidden = true;
+		input.setAttribute("aria-expanded", "false");
+		setActive(null);
+	};
+	const filter = (query = input.value) => {
+		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
+		all(list, "[role=\"group\"]").forEach((group) => {
+			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
+		});
+		const empty = root.querySelector(".combobox-empty");
+		if (empty) {
+			empty.hidden = options().length !== 0;
+			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
+		}
+		if (!options().includes(active)) setActive(null);
+	};
+	const show = (allOptions = false) => {
+		if (!enabled(input) || input.readOnly) return;
+		filter(allOptions ? "" : input.value);
+		list.hidden = false;
+		input.setAttribute("aria-expanded", "true");
+		place(input, list);
+	};
+	const choose = (option) => {
+		if (!option || !enabled(option)) return;
+		input.value = option.dataset.value ?? option.textContent.trim();
+		hide();
+		notify();
+		input.focus();
+	};
+	on(input, "input", () => {
+		if (!notifying) {
+			show();
+			announce(root, `${options().length} options available.`);
+		}
+	});
+	on(input, "keydown", (event) => {
+		if (event.key === "Tab") {
+			hide();
+			return;
+		}
+		if (event.key === "Escape") {
+			if (!list.hidden) {
+				hide();
+				event.stopPropagation();
+			} else if (input.value) {
+				input.value = "";
+				notify();
+				event.stopPropagation();
+			}
+			event.preventDefault();
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			hide();
+			return;
+		}
+		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			if (list.hidden) show(true);
+			if (event.altKey) return;
+			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
+			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
+		} else if (event.key === "Enter" && !list.hidden && active) {
+			event.preventDefault();
+			choose(active);
+		}
+	});
+	on(list, "pointerdown", (event) => {
+		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
+	});
+	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
+	on(root.querySelector(".combobox-toggle"), "click", () => {
+		list.hidden ? show(true) : hide();
+		input.focus();
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide();
+	});
+	on(root, "focusout", () => queueMicrotask(() => {
+		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
+	}));
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!list.hidden) place(input, list);
+	});
+	on(root.ownerDocument, "scroll", (event) => {
+		if (!list.hidden && !list.contains(event.target)) place(input, list);
+	}, { capture: true });
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !list.hidden;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		get value() {
+			return input.value;
+		},
+		set value(value) {
+			input.value = String(value ?? "");
+			if (!list.hidden) filter();
+		},
+		cleanup: hide
+	};
+}
+function menu(root, { on }) {
+	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
+	if (!trigger || !main) return {};
+	identify(root, main, "menu");
+	trigger.setAttribute("aria-controls", main.id);
+	const lists = all(root, "[role=\"menu\"]");
+	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
+	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
+	const closeList = (list) => {
+		list.hidden = true;
+		controller(list)?.setAttribute("aria-expanded", "false");
+	};
+	const hide = (focus = true) => {
+		lists.forEach(closeList);
+		if (focus) trigger.focus();
+	};
+	const showList = (list, button, last = false) => {
+		list.hidden = false;
+		button.setAttribute("aria-expanded", "true");
+		place(button, list);
+		rove(items(list), last ? items(list).length - 1 : 0);
+	};
+	const show = () => {
+		if (enabled(trigger)) showList(main, trigger);
+	};
+	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
+	const activate = (item) => {
+		if (!enabled(item)) return;
+		const child = submenu(item);
+		if (child) {
+			showList(child, item);
+			return;
+		}
+		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
+		else hide();
+		root.emit("action", {
+			action: item.dataset.action ?? item.textContent.trim(),
+			checked: item.getAttribute("aria-checked") === "true"
+		});
+	};
+	on(trigger, "click", () => main.hidden ? show() : hide());
+	on(trigger, "keydown", (event) => {
+		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
+			event.preventDefault();
+			showList(main, trigger, event.key === "ArrowUp");
+		}
+	});
+	on(root, "click", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (item) activate(item);
+	});
+	on(root, "keydown", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (!item) return;
+		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
+		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (list !== main) {
+				closeList(list);
+				controller(list)?.focus();
+			} else hide();
+		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
+			event.preventDefault();
+			showList(submenu(item), item);
+		} else if (event.key === "Tab") hide();
+		else if (event.key.length === 1 && /\S/.test(event.key)) {
+			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+			if (found) {
+				event.preventDefault();
+				rove(options, options.indexOf(found));
+			}
+		}
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument, "focusin", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
+	hide(false);
+	return {
+		show,
+		hide,
+		get open() {
+			return !main.hidden;
+		},
+		set open(value) {
+			value ? show() : hide(false);
+		},
+		cleanup() {
+			hide(false);
+		}
+	};
+}
+//#endregion
+export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/tabs/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/tabs/runtime/chunks/navigation-Dt8ap-9J.js
deleted file mode 100644
index 81201c8d5..000000000
--- a/packages/ui/dist/copy/tabs/runtime/chunks/navigation-Dt8ap-9J.js
+++ /dev/null
@@ -1,367 +0,0 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/navigation.js
-function tabs(root, { on }, listOverride) {
-	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
-	if (!list) return {};
-	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
-	const select = (id, focus = false) => {
-		const tab = items().find((item) => item.id === id);
-		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
-		all(list, "[role=\"tab\"]").forEach((item) => {
-			item.setAttribute("aria-selected", String(item === tab));
-			item.tabIndex = item === tab ? 0 : -1;
-		});
-		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
-			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
-			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
-		});
-		if (focus) tab.focus();
-		return tab;
-	};
-	const activate = (tab) => {
-		select(tab.id);
-		root.emit("select", {
-			id: tab.id,
-			panelId: tab.getAttribute("aria-controls")
-		});
-	};
-	on(list, "click", (event) => {
-		const tab = event.target.closest("[role=\"tab\"]");
-		if (tab && enabled(tab)) activate(tab);
-	});
-	on(list, "keydown", (event) => {
-		const current = event.target.closest("[role=\"tab\"]"), options = items();
-		if (!current) return;
-		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		let index = options.indexOf(current);
-		if (event.key === next) index++;
-		else if (event.key === previous) index--;
-		else if (event.key === "Home") index = 0;
-		else if (event.key === "End") index = options.length - 1;
-		else if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			activate(current);
-			return;
-		} else return;
-		event.preventDefault();
-		const tab = rove(options, index);
-		if (root.getAttribute("activation") !== "manual") activate(tab);
-	});
-	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
-	if (initial) select(initial.id);
-	return {
-		select,
-		get selectedId() {
-			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
-		},
-		set selectedId(id) {
-			select(id);
-		}
-	};
-}
-function toolbar(root, { on }) {
-	const bar = root.querySelector("[role=\"toolbar\"]");
-	if (!bar) return {};
-	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
-	const initial = controls();
-	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
-	on(bar, "focusin", (event) => {
-		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
-	});
-	on(bar, "keydown", (event) => {
-		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
-		const items = controls(), index = items.indexOf(event.target);
-		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		if (![
-			next,
-			prev,
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
-	});
-	on(bar, "click", (event) => {
-		const button = event.target.closest("button[aria-pressed]");
-		if (button && enabled(button)) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.dataset.action ?? button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		}
-	});
-	return {};
-}
-function disclosure(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button[aria-controls][aria-expanded]");
-		if (!button || !enabled(button)) return;
-		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
-		if (!target) return;
-		const expanded = button.getAttribute("aria-expanded") !== "true";
-		button.setAttribute("aria-expanded", String(expanded));
-		target.hidden = !expanded;
-		root.emit("toggle", {
-			id: target.id,
-			expanded
-		});
-	});
-	const details = root.querySelector("details");
-	on(details, "toggle", () => root.emit("toggle", {
-		id: details.id,
-		expanded: details.open
-	}));
-	return {
-		get open() {
-			return details?.open ?? false;
-		},
-		set open(value) {
-			if (details) details.open = Boolean(value);
-		}
-	};
-}
-function combobox(root, { on, signal }) {
-	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
-	if (!input || !list) return {};
-	identify(root, list, "options");
-	input.setAttribute("aria-controls", list.id);
-	let active = null, notifying = false;
-	const notify = () => {
-		notifying = true;
-		try {
-			nativeInput(input);
-			nativeInput(input, "change");
-		} finally {
-			notifying = false;
-		}
-	};
-	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
-	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
-	const setActive = (option) => {
-		active = option;
-		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
-		if (option) {
-			input.setAttribute("aria-activedescendant", option.id);
-			option.scrollIntoView({ block: "nearest" });
-		} else input.removeAttribute("aria-activedescendant");
-	};
-	const hide = () => {
-		list.hidden = true;
-		input.setAttribute("aria-expanded", "false");
-		setActive(null);
-	};
-	const filter = (query = input.value) => {
-		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-		all(list, "[role=\"group\"]").forEach((group) => {
-			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
-		});
-		const empty = root.querySelector(".combobox-empty");
-		if (empty) {
-			empty.hidden = options().length !== 0;
-			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
-		}
-		if (!options().includes(active)) setActive(null);
-	};
-	const show = (allOptions = false) => {
-		if (!enabled(input) || input.readOnly) return;
-		filter(allOptions ? "" : input.value);
-		list.hidden = false;
-		input.setAttribute("aria-expanded", "true");
-		place(input, list);
-	};
-	const choose = (option) => {
-		if (!option || !enabled(option)) return;
-		input.value = option.dataset.value ?? option.textContent.trim();
-		hide();
-		notify();
-		input.focus();
-	};
-	on(input, "input", () => {
-		if (!notifying) {
-			show();
-			announce(root, `${options().length} options available.`);
-		}
-	});
-	on(input, "keydown", (event) => {
-		if (event.key === "Tab") {
-			hide();
-			return;
-		}
-		if (event.key === "Escape") {
-			if (!list.hidden) {
-				hide();
-				event.stopPropagation();
-			} else if (input.value) {
-				input.value = "";
-				notify();
-				event.stopPropagation();
-			}
-			event.preventDefault();
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			hide();
-			return;
-		}
-		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-			event.preventDefault();
-			if (list.hidden) show(true);
-			if (event.altKey) return;
-			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
-			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
-		} else if (event.key === "Enter" && !list.hidden && active) {
-			event.preventDefault();
-			choose(active);
-		}
-	});
-	on(list, "pointerdown", (event) => {
-		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
-	});
-	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
-	on(root.querySelector(".combobox-toggle"), "click", () => {
-		list.hidden ? show(true) : hide();
-		input.focus();
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide();
-	});
-	on(root, "focusout", () => queueMicrotask(() => {
-		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
-	}));
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!list.hidden) place(input, list);
-	});
-	on(root.ownerDocument, "scroll", (event) => {
-		if (!list.hidden && !list.contains(event.target)) place(input, list);
-	}, { capture: true });
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !list.hidden;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		get value() {
-			return input.value;
-		},
-		set value(value) {
-			input.value = String(value ?? "");
-			if (!list.hidden) filter();
-		},
-		cleanup: hide
-	};
-}
-function menu(root, { on }) {
-	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
-	if (!trigger || !main) return {};
-	identify(root, main, "menu");
-	trigger.setAttribute("aria-controls", main.id);
-	const lists = all(root, "[role=\"menu\"]");
-	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
-	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
-	const closeList = (list) => {
-		list.hidden = true;
-		controller(list)?.setAttribute("aria-expanded", "false");
-	};
-	const hide = (focus = true) => {
-		lists.forEach(closeList);
-		if (focus) trigger.focus();
-	};
-	const showList = (list, button, last = false) => {
-		list.hidden = false;
-		button.setAttribute("aria-expanded", "true");
-		place(button, list);
-		rove(items(list), last ? items(list).length - 1 : 0);
-	};
-	const show = () => {
-		if (enabled(trigger)) showList(main, trigger);
-	};
-	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
-	const activate = (item) => {
-		if (!enabled(item)) return;
-		const child = submenu(item);
-		if (child) {
-			showList(child, item);
-			return;
-		}
-		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
-		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
-		else hide();
-		root.emit("action", {
-			action: item.dataset.action ?? item.textContent.trim(),
-			checked: item.getAttribute("aria-checked") === "true"
-		});
-	};
-	on(trigger, "click", () => main.hidden ? show() : hide());
-	on(trigger, "keydown", (event) => {
-		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
-			event.preventDefault();
-			showList(main, trigger, event.key === "ArrowUp");
-		}
-	});
-	on(root, "click", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (item) activate(item);
-	});
-	on(root, "keydown", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (!item) return;
-		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
-		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
-			event.preventDefault();
-			event.stopPropagation();
-			if (list !== main) {
-				closeList(list);
-				controller(list)?.focus();
-			} else hide();
-		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
-			event.preventDefault();
-			showList(submenu(item), item);
-		} else if (event.key === "Tab") hide();
-		else if (event.key.length === 1 && /\S/.test(event.key)) {
-			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-			if (found) {
-				event.preventDefault();
-				rove(options, options.indexOf(found));
-			}
-		}
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument, "focusin", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
-	hide(false);
-	return {
-		show,
-		hide,
-		get open() {
-			return !main.hidden;
-		},
-		set open(value) {
-			value ? show() : hide(false);
-		},
-		cleanup() {
-			hide(false);
-		}
-	};
-}
-//#endregion
-export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/tabs/runtime/components/tabs.js b/packages/ui/dist/copy/tabs/runtime/components/tabs.js
index dfdc18518..448e73b8b 100644
--- a/packages/ui/dist/copy/tabs/runtime/components/tabs.js
+++ b/packages/ui/dist/copy/tabs/runtime/components/tabs.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as tabs } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as tabs } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/tabs.js
 var J3w1Tabs = class extends J3w1Element {
 	static componentId = "tabs";
 	static version = "4.0.0";
-	static implementationId = "sha256-yl6ifi/c/BHYGqaMMbePuD6uCP50aeMMOiJFXfy/C6s=";
+	static implementationId = "sha256-vWyT4Mr1GxnXVkpNXHK/nd/+0BmdRogsb7+eE6EnQ7A=";
 	static connect = tabs;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/tabs/runtime/register/tabs.js b/packages/ui/dist/copy/tabs/runtime/register/tabs.js
index d2f3bb53e..218ebc6da 100644
--- a/packages/ui/dist/copy/tabs/runtime/register/tabs.js
+++ b/packages/ui/dist/copy/tabs/runtime/register/tabs.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Tabs } from "../components/tabs.js";
 //#region .cache/ui-build/entries/register/tabs.js
 var element = registerElement("j3w1-tabs", J3w1Tabs);
diff --git a/packages/ui/dist/copy/tabs/tokens.css b/packages/ui/dist/copy/tabs/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/tabs/tokens.css
+++ b/packages/ui/dist/copy/tabs/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/terminal/component.css b/packages/ui/dist/copy/terminal/component.css
index 6a2eaadaa..8ee7089f2 100644
--- a/packages/ui/dist/copy/terminal/component.css
+++ b/packages/ui/dist/copy/terminal/component.css
@@ -8,7 +8,7 @@ j3w1-terminal {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-terminal, j3w1-terminal *, j3w1-terminal *::before, j3w1-terminal *::after { box-sizing: border-box; }
-j3w1-terminal button, j3w1-terminal input, j3w1-terminal select, j3w1-terminal textarea { font: inherit; }
+j3w1-terminal :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-terminal ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/packages/ui/dist/copy/terminal/index.html b/packages/ui/dist/copy/terminal/index.html
index 855733f81..f6e344f77 100644
--- a/packages/ui/dist/copy/terminal/index.html
+++ b/packages/ui/dist/copy/terminal/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Terminal · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-terminal id="example-terminal-default"><pre class="terminal terminal-transcript" role="log" aria-label="Shell transcript" tabindex="0"><span class="terminal-line"><span class="terminal-prompt"><span class="terminal-prompt-path"> ~/theme </span><span class="terminal-prompt-arrow terminal-prompt-arrow-path" aria-hidden="true">▶</span><span class="terminal-prompt-branch"> main </span><span class="terminal-prompt-arrow terminal-prompt-arrow-branch" aria-hidden="true">▶</span></span> ls -l ports</span>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Terminal · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-terminal id="example-terminal-default"><pre class="terminal terminal-transcript" role="log" aria-label="Shell transcript" tabindex="0"><span class="terminal-line"><span class="terminal-prompt"><span class="terminal-prompt-path"> ~/theme </span><span class="terminal-prompt-arrow terminal-prompt-arrow-path" aria-hidden="true">▶</span><span class="terminal-prompt-branch"> main </span><span class="terminal-prompt-arrow terminal-prompt-arrow-branch" aria-hidden="true">▶</span></span> ls -l ports</span>
 <span class="terminal-line">total 5</span>
 <span class="terminal-line">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class="terminal-fg-5 terminal-bold">alacritty</span></span>
 <span class="terminal-line">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class="terminal-fg-5 terminal-bold">gtk</span></span>
diff --git a/packages/ui/dist/copy/terminal/manifest.json b/packages/ui/dist/copy/terminal/manifest.json
index 8a1f625d7..2fa16d648 100644
--- a/packages/ui/dist/copy/terminal/manifest.json
+++ b/packages/ui/dist/copy/terminal/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/terminal.md",
   "dependencies": [
     "register/terminal.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/terminal.js",
-    "chunks/display-dj9YaBfn.js"
+    "chunks/display-Jm9bAsnb.js"
   ],
   "files": {
-    "runtime/register/terminal.js": "sha256-HI+Ed6H0sblV3/oR4o14WYg9OG1oLmgIOC/HbV2sFos=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/terminal.js": "sha256-nnvO5VIA3kECyTshxbykc7AqrK88ML0IDEe6bYvfsQs=",
-    "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-U9mukzoAnquuoQ1KFzbK6bI+fxJdrdrhSiZgfwulwJM=",
+    "runtime/register/terminal.js": "sha256-DtAEqikNcqq/nXccSq0pFsKXxE0BPFgM8N6lScud0Ic=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/terminal.js": "sha256-LBmUT0u6uCLNgKHb3qON4Yl1HjbBCYOByCIC8bGXv2c=",
+    "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-qVvYtOU0V9tpTXLiTfobfn2Bv+Ec58ZxsvFuoOO3zqA=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-WyXNyoxiAXNq3bLZRmrc1qS2XzgHghN+5tO+9HpocVA=",
-    "index.html": "sha256-7nIjP5H9Tnolb/DAw1vtVGkOfqf2/oL9ZxMvSounzKk=",
+    "index.html": "sha256-u2hUMomyNUZvWxfeRu+YXJNwoBZRQAU9c+Wlnmdt/uc=",
     "README.md": "sha256-JMb0MyBFXbZ2TBIQrpRDNUjcH0R6qtmsRDfzwcOAY6o="
   }
 }
diff --git a/packages/ui/dist/copy/terminal/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/terminal/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/terminal/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/terminal/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/terminal/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/terminal/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/terminal/runtime/chunks/display-Jm9bAsnb.js b/packages/ui/dist/copy/terminal/runtime/chunks/display-Jm9bAsnb.js
new file mode 100644
index 000000000..5bc817830
--- /dev/null
+++ b/packages/ui/dist/copy/terminal/runtime/chunks/display-Jm9bAsnb.js
@@ -0,0 +1,212 @@
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/display.js
+function avatar(root, { on }) {
+	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
+	if (!frame || !fallback) return {};
+	let image = frame.querySelector("img");
+	if (!image) {
+		image = make(root, "img", {
+			alt: "",
+			hidden: ""
+		});
+		frame.prepend(image);
+	}
+	let source = image.getAttribute("src") ?? "";
+	const update = (value) => {
+		source = String(value ?? "");
+		image.hidden = true;
+		fallback.hidden = false;
+		delete frame.dataset.error;
+		if (!source) {
+			image.removeAttribute("src");
+			delete frame.dataset.loading;
+			return;
+		}
+		frame.dataset.loading = "true";
+		image.src = source;
+	};
+	on(image, "load", () => {
+		delete frame.dataset.loading;
+		image.hidden = false;
+		fallback.hidden = true;
+	});
+	on(image, "error", () => {
+		delete frame.dataset.loading;
+		frame.dataset.error = "true";
+		image.hidden = true;
+		fallback.hidden = false;
+	});
+	update(root.getAttribute("src") ?? source);
+	return {
+		get src() {
+			return source;
+		},
+		set src(value) {
+			update(value);
+		},
+		attributeChanged(name) {
+			if (name === "src") update(root.getAttribute("src"));
+		}
+	};
+}
+function chart(root) {
+	const figure = root.querySelector("figure"), svg = figure?.querySelector("svg"), tbody = figure?.querySelector("tbody");
+	if (!figure || !svg || !tbody) return {};
+	let values = all(tbody, "tr").map((row) => ({
+		label: row.cells[0]?.textContent.trim() ?? "",
+		value: Number(row.cells[1]?.textContent)
+	}));
+	const update = (data) => {
+		if (!Array.isArray(data) || data.length > 200 || data.some((row) => typeof row.label !== "string" || typeof row.value !== "number" || !Number.isFinite(row.value) || row.value < 0)) throw new TypeError("data must contain at most 200 labelled finite non-negative values");
+		values = data.map((row) => ({
+			label: row.label,
+			value: row.value
+		}));
+		svg.replaceChildren();
+		tbody.replaceChildren();
+		const ns = "http://www.w3.org/2000/svg";
+		const group = root.ownerDocument.createElementNS(ns, "g");
+		group.setAttribute("class", "chart-series");
+		svg.append(group);
+		const width = Math.max(300, values.length * 32), max = Math.max(1, ...values.map((row) => row.value));
+		svg.setAttribute("viewBox", `0 0 ${width} 140`);
+		svg.setAttribute("aria-label", values.length ? values.map((row) => `${row.label}: ${row.value}`).join("; ") : "No data available");
+		for (const [index, row] of values.entries()) {
+			const bar = root.ownerDocument.createElementNS(ns, "rect"), step = (width - 20) / values.length, height = row.value / max * 100;
+			for (const [name, value] of Object.entries({
+				x: 10 + index * step + step * .15,
+				y: 110 - height,
+				width: step * .7,
+				height
+			})) bar.setAttribute(name, String(value));
+			const title = root.ownerDocument.createElementNS(ns, "title");
+			title.textContent = `${row.label}: ${row.value}`;
+			bar.append(title);
+			group.append(bar);
+			const tr = make(root, "tr");
+			tr.append(make(root, "th", { scope: "row" }, row.label), make(root, "td", {}, row.value));
+			tbody.append(tr);
+		}
+		svg.toggleAttribute("hidden", !values.length);
+		const empty = figure.querySelector("[data-chart-empty]");
+		if (empty) empty.hidden = values.length !== 0;
+	};
+	return {
+		get data() {
+			return values.map((row) => ({ ...row }));
+		},
+		set data(data) {
+			update(data);
+		}
+	};
+}
+function editorSearch(root, { on }) {
+	const input = root.querySelector("[data-query]"), pre = root.querySelector("[data-source]"), status = root.querySelector("[data-search-status]");
+	if (!input || !pre) return {};
+	let source = pre.textContent, current = -1, matches = [];
+	const previous = root.querySelector("[data-previous]"), following = root.querySelector("[data-next]");
+	const select = (index) => {
+		current = matches.length ? (index + matches.length) % matches.length : -1;
+		all(pre, "mark").forEach((mark, i) => mark.toggleAttribute("data-current", i === current));
+		if (status) status.textContent = !input.value ? "Enter text to search." : matches.length ? `Match ${current + 1} of ${matches.length}` : "No matches.";
+	};
+	const search = () => {
+		matches = [];
+		pre.replaceChildren();
+		const query = input.value.toLocaleLowerCase();
+		let folded = "", offset = 0;
+		const starts = [], ends = [];
+		for (const char of source) {
+			const text = char.toLocaleLowerCase();
+			for (let i = 0; i < text.length; i++) {
+				starts.push(offset);
+				ends.push(offset + char.length);
+			}
+			folded += text;
+			offset += char.length;
+		}
+		if (query) {
+			let position = 0;
+			while ((position = folded.indexOf(query, position)) >= 0) {
+				const start = starts[position], end = ends[position + query.length - 1];
+				if (!matches.length || start >= matches.at(-1).end) matches.push({
+					start,
+					end
+				});
+				position += query.length;
+			}
+		}
+		let cursor = 0;
+		for (const match of matches) {
+			pre.append(root.ownerDocument.createTextNode(source.slice(cursor, match.start)), make(root, "mark", {}, source.slice(match.start, match.end)));
+			cursor = match.end;
+		}
+		pre.append(root.ownerDocument.createTextNode(source.slice(cursor)));
+		if (previous) previous.disabled = !matches.length;
+		if (following) following.disabled = !matches.length;
+		select(0);
+	};
+	const next = (direction = 1) => {
+		if (!matches.length) return;
+		select(current + (direction < 0 ? -1 : 1));
+		all(pre, "mark")[current]?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	};
+	on(input, "input", search);
+	on(input, "keydown", (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			next(event.shiftKey ? -1 : 1);
+		} else if (event.key === "Escape" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			input.value = "";
+			search();
+		}
+	});
+	on(previous, "click", () => next(-1));
+	on(following, "click", () => next());
+	search();
+	return {
+		next,
+		get source() {
+			return source;
+		},
+		set source(text) {
+			source = String(text);
+			search();
+		},
+		get query() {
+			return input.value;
+		},
+		set query(value) {
+			input.value = String(value);
+			search();
+		},
+		get matchCount() {
+			return matches.length;
+		}
+	};
+}
+function developerView(root, { on }) {
+	on(root, "click", (event) => {
+		const action = event.target.closest("button,[data-action]");
+		if (action && enabled(action)) root.emit("action", { action: action.dataset.action ?? action.textContent.trim() });
+	});
+	return { setText(text) {
+		let pre = root.querySelector("pre");
+		if (!pre) {
+			pre = make(root, "pre", {
+				class: "j3w1-readonly-text",
+				tabindex: "0",
+				"aria-label": "Read-only text"
+			});
+			root.firstElementChild.replaceChildren(pre);
+		}
+		pre.textContent = String(text);
+	} };
+}
+//#endregion
+export { editorSearch as i, chart as n, developerView as r, avatar as t };
diff --git a/packages/ui/dist/copy/terminal/runtime/chunks/display-dj9YaBfn.js b/packages/ui/dist/copy/terminal/runtime/chunks/display-dj9YaBfn.js
deleted file mode 100644
index 80833d5da..000000000
--- a/packages/ui/dist/copy/terminal/runtime/chunks/display-dj9YaBfn.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/display.js
-function avatar(root, { on }) {
-	const frame = root.querySelector(".avatar"), fallback = root.querySelector("[data-avatar-fallback]");
-	if (!frame || !fallback) return {};
-	let image = frame.querySelector("img");
-	if (!image) {
-		image = make(root, "img", {
-			alt: "",
-			hidden: ""
-		});
-		frame.prepend(image);
-	}
-	let source = image.getAttribute("src") ?? "";
-	const update = (value) => {
-		source = String(value ?? "");
-		image.hidden = true;
-		fallback.hidden = false;
-		delete frame.dataset.error;
-		if (!source) {
-			image.removeAttribute("src");
-			delete frame.dataset.loading;
-			return;
-		}
-		frame.dataset.loading = "true";
-		image.src = source;
-	};
-	on(image, "load", () => {
-		delete frame.dataset.loading;
-		image.hidden = false;
-		fallback.hidden = true;
-	});
-	on(image, "error", () => {
-		delete frame.dataset.loading;
-		frame.dataset.error = "true";
-		image.hidden = true;
-		fallback.hidden = false;
-	});
-	update(root.getAttribute("src") ?? source);
-	return {
-		get src() {
-			return source;
-		},
-		set src(value) {
-			update(value);
-		},
-		attributeChanged(name) {
-			if (name === "src") update(root.getAttribute("src"));
-		}
-	};
-}
-function chart(root) {
-	const figure = root.querySelector("figure"), svg = figure?.querySelector("svg"), tbody = figure?.querySelector("tbody");
-	if (!figure || !svg || !tbody) return {};
-	let values = all(tbody, "tr").map((row) => ({
-		label: row.cells[0]?.textContent.trim() ?? "",
-		value: Number(row.cells[1]?.textContent)
-	}));
-	const update = (data) => {
-		if (!Array.isArray(data) || data.length > 200 || data.some((row) => typeof row.label !== "string" || typeof row.value !== "number" || !Number.isFinite(row.value) || row.value < 0)) throw new TypeError("data must contain at most 200 labelled finite non-negative values");
-		values = data.map((row) => ({
-			label: row.label,
-			value: row.value
-		}));
-		svg.replaceChildren();
-		tbody.replaceChildren();
-		const ns = "http://www.w3.org/2000/svg";
-		const group = root.ownerDocument.createElementNS(ns, "g");
-		group.setAttribute("class", "chart-series");
-		svg.append(group);
-		const width = Math.max(300, values.length * 32), max = Math.max(1, ...values.map((row) => row.value));
-		svg.setAttribute("viewBox", `0 0 ${width} 140`);
-		svg.setAttribute("aria-label", values.length ? values.map((row) => `${row.label}: ${row.value}`).join("; ") : "No data available");
-		for (const [index, row] of values.entries()) {
-			const bar = root.ownerDocument.createElementNS(ns, "rect"), step = (width - 20) / values.length, height = row.value / max * 100;
-			for (const [name, value] of Object.entries({
-				x: 10 + index * step + step * .15,
-				y: 110 - height,
-				width: step * .7,
-				height
-			})) bar.setAttribute(name, String(value));
-			const title = root.ownerDocument.createElementNS(ns, "title");
-			title.textContent = `${row.label}: ${row.value}`;
-			bar.append(title);
-			group.append(bar);
-			const tr = make(root, "tr");
-			tr.append(make(root, "th", { scope: "row" }, row.label), make(root, "td", {}, row.value));
-			tbody.append(tr);
-		}
-		svg.toggleAttribute("hidden", !values.length);
-		const empty = figure.querySelector("[data-chart-empty]");
-		if (empty) empty.hidden = values.length !== 0;
-	};
-	return {
-		get data() {
-			return values.map((row) => ({ ...row }));
-		},
-		set data(data) {
-			update(data);
-		}
-	};
-}
-function editorSearch(root, { on }) {
-	const input = root.querySelector("[data-query]"), pre = root.querySelector("[data-source]"), status = root.querySelector("[data-search-status]");
-	if (!input || !pre) return {};
-	let source = pre.textContent, current = -1, matches = [];
-	const previous = root.querySelector("[data-previous]"), following = root.querySelector("[data-next]");
-	const select = (index) => {
-		current = matches.length ? (index + matches.length) % matches.length : -1;
-		all(pre, "mark").forEach((mark, i) => mark.toggleAttribute("data-current", i === current));
-		if (status) status.textContent = !input.value ? "Enter text to search." : matches.length ? `Match ${current + 1} of ${matches.length}` : "No matches.";
-	};
-	const search = () => {
-		matches = [];
-		pre.replaceChildren();
-		const query = input.value.toLocaleLowerCase();
-		let folded = "", offset = 0;
-		const starts = [], ends = [];
-		for (const char of source) {
-			const text = char.toLocaleLowerCase();
-			for (let i = 0; i < text.length; i++) {
-				starts.push(offset);
-				ends.push(offset + char.length);
-			}
-			folded += text;
-			offset += char.length;
-		}
-		if (query) {
-			let position = 0;
-			while ((position = folded.indexOf(query, position)) >= 0) {
-				const start = starts[position], end = ends[position + query.length - 1];
-				if (!matches.length || start >= matches.at(-1).end) matches.push({
-					start,
-					end
-				});
-				position += query.length;
-			}
-		}
-		let cursor = 0;
-		for (const match of matches) {
-			pre.append(root.ownerDocument.createTextNode(source.slice(cursor, match.start)), make(root, "mark", {}, source.slice(match.start, match.end)));
-			cursor = match.end;
-		}
-		pre.append(root.ownerDocument.createTextNode(source.slice(cursor)));
-		if (previous) previous.disabled = !matches.length;
-		if (following) following.disabled = !matches.length;
-		select(0);
-	};
-	const next = (direction = 1) => {
-		if (!matches.length) return;
-		select(current + (direction < 0 ? -1 : 1));
-		all(pre, "mark")[current]?.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	};
-	on(input, "input", search);
-	on(input, "keydown", (event) => {
-		if (event.key === "Enter") {
-			event.preventDefault();
-			next(event.shiftKey ? -1 : 1);
-		} else if (event.key === "Escape" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			input.value = "";
-			search();
-		}
-	});
-	on(previous, "click", () => next(-1));
-	on(following, "click", () => next());
-	search();
-	return {
-		next,
-		get source() {
-			return source;
-		},
-		set source(text) {
-			source = String(text);
-			search();
-		},
-		get query() {
-			return input.value;
-		},
-		set query(value) {
-			input.value = String(value);
-			search();
-		},
-		get matchCount() {
-			return matches.length;
-		}
-	};
-}
-function developerView(root, { on }) {
-	on(root, "click", (event) => {
-		const action = event.target.closest("button,[data-action]");
-		if (action && enabled(action)) root.emit("action", { action: action.dataset.action ?? action.textContent.trim() });
-	});
-	return { setText(text) {
-		let pre = root.querySelector("pre");
-		if (!pre) {
-			pre = make(root, "pre", {
-				class: "j3w1-readonly-text",
-				tabindex: "0",
-				"aria-label": "Read-only text"
-			});
-			root.firstElementChild.replaceChildren(pre);
-		}
-		pre.textContent = String(text);
-	} };
-}
-//#endregion
-export { editorSearch as i, chart as n, developerView as r, avatar as t };
diff --git a/packages/ui/dist/copy/terminal/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/terminal/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/terminal/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/terminal/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/terminal/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/terminal/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/terminal/runtime/components/terminal.js b/packages/ui/dist/copy/terminal/runtime/components/terminal.js
index b6b36123c..d9c12358a 100644
--- a/packages/ui/dist/copy/terminal/runtime/components/terminal.js
+++ b/packages/ui/dist/copy/terminal/runtime/components/terminal.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as developerView } from "../chunks/display-dj9YaBfn.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as developerView } from "../chunks/display-Jm9bAsnb.js";
 //#region .cache/ui-build/entries/components/terminal.js
 var J3w1Terminal = class extends J3w1Element {
 	static componentId = "terminal";
 	static version = "4.0.0";
-	static implementationId = "sha256-YtjoIQGA3MHvquAi/l7AGweWpTNBe/ruD7iYJIEkkoc=";
+	static implementationId = "sha256-vnYvMfEFdH6UbGXHQ5OrfeJTspczt8hiaTWYnXnhlJc=";
 	static connect = developerView;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/terminal/runtime/register/terminal.js b/packages/ui/dist/copy/terminal/runtime/register/terminal.js
index 252927e52..0f41964d0 100644
--- a/packages/ui/dist/copy/terminal/runtime/register/terminal.js
+++ b/packages/ui/dist/copy/terminal/runtime/register/terminal.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Terminal } from "../components/terminal.js";
 //#region .cache/ui-build/entries/register/terminal.js
 var element = registerElement("j3w1-terminal", J3w1Terminal);
diff --git a/packages/ui/dist/copy/terminal/tokens.css b/packages/ui/dist/copy/terminal/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/terminal/tokens.css
+++ b/packages/ui/dist/copy/terminal/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/text-field/component.css b/packages/ui/dist/copy/text-field/component.css
index 4f7803669..ae3d2440f 100644
--- a/packages/ui/dist/copy/text-field/component.css
+++ b/packages/ui/dist/copy/text-field/component.css
@@ -8,7 +8,7 @@ j3w1-text-field {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-text-field, j3w1-text-field *, j3w1-text-field *::before, j3w1-text-field *::after { box-sizing: border-box; }
-j3w1-text-field button, j3w1-text-field input, j3w1-text-field select, j3w1-text-field textarea { font: inherit; }
+j3w1-text-field :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-text-field ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-text-field .sr-only {
   border: 0;
 }
 
+j3w1-text-field .combobox-label,
+j3w1-text-field .dialog-field-label,
+j3w1-text-field .field-label,
+j3w1-text-field .fieldset-label,
+j3w1-text-field .file-input-label,
+j3w1-text-field .number-field-label,
+j3w1-text-field .search-field-label,
+j3w1-text-field .select-label,
+j3w1-text-field .text-field-label,
+j3w1-text-field .textarea-label,
+j3w1-text-field .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-text-field .combobox-help,
+j3w1-text-field .date-picker-help,
+j3w1-text-field .dialog-field-help,
+j3w1-text-field .fieldset-help,
+j3w1-text-field .file-input-help,
+j3w1-text-field .number-field-help,
+j3w1-text-field .search-field-help,
+j3w1-text-field .select-help,
+j3w1-text-field .text-field-help,
+j3w1-text-field .textarea-help,
+j3w1-text-field .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-text-field .combobox-message,
+j3w1-text-field .date-picker-message,
+j3w1-text-field .file-input-message,
+j3w1-text-field .number-field-message,
+j3w1-text-field .radio-group-message,
+j3w1-text-field .select-message,
+j3w1-text-field .text-field-message,
+j3w1-text-field .textarea-message,
+j3w1-text-field .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-text-field .combobox-root,
+j3w1-text-field .date-picker-root,
+j3w1-text-field .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-text-field .text-field {
   position: relative;
   display: grid;
@@ -34,12 +94,6 @@ j3w1-text-field .text-field {
   color: var(--color-text-default);
 }
 
-j3w1-text-field .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-text-field .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -49,7 +103,7 @@ j3w1-text-field .text-field-root {
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -58,7 +112,7 @@ j3w1-text-field .text-field-root {
 j3w1-text-field .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -134,21 +188,6 @@ j3w1-text-field .text-field-loading {
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-j3w1-text-field .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-text-field .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-text-field .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/copy/text-field/index.html b/packages/ui/dist/copy/text-field/index.html
index 3c1a3d926..a1ab3ce47 100644
--- a/packages/ui/dist/copy/text-field/index.html
+++ b/packages/ui/dist/copy/text-field/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Text field · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-text-field id="example-text-field-default"><div class="text-field">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Text field · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-text-field id="example-text-field-default"><div class="text-field">
   <label class="text-field-label" for="example-text-field-default-tf-name">Display name <span class="text-field-required" aria-hidden="true">*</span><span class="text-field-required sr-only"> required</span></label>
   <div class="text-field-root">
     <input class="text-field-input" id="example-text-field-default-tf-name" type="text" value="j3w1" placeholder="Your name" aria-describedby="example-text-field-default-tf-name-help example-text-field-default-tf-name-message" name="example-text-field-default-tf-name">
diff --git a/packages/ui/dist/copy/text-field/manifest.json b/packages/ui/dist/copy/text-field/manifest.json
index 0b09c1b30..c37892c75 100644
--- a/packages/ui/dist/copy/text-field/manifest.json
+++ b/packages/ui/dist/copy/text-field/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/text-field.md",
   "dependencies": [
     "register/text-field.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/text-field.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/text-field.js": "sha256-DD+ctMlKClOK6B/glshiJwIjKilewzY171GvKtVGf1A=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/text-field.js": "sha256-6f5tLWwF57IFY+uH5zM0afiU3g09PW3M4772zC7zD4Q=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-Y3xQDYeeCQmNtobwOfTiTh/OVHOCJt5If76c4411/ns=",
+    "runtime/register/text-field.js": "sha256-gmqyzVDUD/VCnOF5nDRA0n1F4I7q7lE02AdZeBCFrUk=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/text-field.js": "sha256-4c47ee0iFW2YWW+dVR1PBSJMwOOa5rmKhJSalXzm+Zo=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-LugCfo9ZckPpZogBcNDZlTUOev4kjUm9Et1bzrVzJ+A=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-R8UtNVXLOQSMMT+NPAGht8BHx8b1yIjvTii2pQlPs8k=",
-    "index.html": "sha256-J9hbLzXuEnbSdeQVzpl5q51KXvGGqGz+Y21d3vAb3a4=",
+    "index.html": "sha256-ss2KbC0xuZHLx75wVTAJ1qD3+NlEUPn/1dOG4DGQX1g=",
     "README.md": "sha256-U5UskFkuRc314VHTU09nhnEvLqV//5UXlnD2tS0RftI="
   }
 }
diff --git a/packages/ui/dist/copy/text-field/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/text-field/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/text-field/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/text-field/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/text-field/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/text-field/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/text-field/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/text-field/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/text-field/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/text-field/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/text-field/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/text-field/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/text-field/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/text-field/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/text-field/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/text-field/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/text-field/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/text-field/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/text-field/runtime/components/text-field.js b/packages/ui/dist/copy/text-field/runtime/components/text-field.js
index 469ab73da..5f6946538 100644
--- a/packages/ui/dist/copy/text-field/runtime/components/text-field.js
+++ b/packages/ui/dist/copy/text-field/runtime/components/text-field.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/text-field.js
 var J3w1TextField = class extends J3w1Element {
 	static componentId = "text-field";
 	static version = "4.0.0";
-	static implementationId = "sha256-zLqXpOHelLAc+ttryZKIkoe3xzw0YRD1AHJXXSXMwdg=";
+	static implementationId = "sha256-k06i0LBPa/oPe2VNmxbJkBzisp1zcAENq3MeVnKZzAo=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/text-field/runtime/register/text-field.js b/packages/ui/dist/copy/text-field/runtime/register/text-field.js
index e3bf71d74..01007e107 100644
--- a/packages/ui/dist/copy/text-field/runtime/register/text-field.js
+++ b/packages/ui/dist/copy/text-field/runtime/register/text-field.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1TextField } from "../components/text-field.js";
 //#region .cache/ui-build/entries/register/text-field.js
 var element = registerElement("j3w1-text-field", J3w1TextField);
diff --git a/packages/ui/dist/copy/text-field/tokens.css b/packages/ui/dist/copy/text-field/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/text-field/tokens.css
+++ b/packages/ui/dist/copy/text-field/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/textarea/component.css b/packages/ui/dist/copy/textarea/component.css
index d53a4e29c..8597fa1ce 100644
--- a/packages/ui/dist/copy/textarea/component.css
+++ b/packages/ui/dist/copy/textarea/component.css
@@ -8,7 +8,7 @@ j3w1-textarea {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-textarea, j3w1-textarea *, j3w1-textarea *::before, j3w1-textarea *::after { box-sizing: border-box; }
-j3w1-textarea button, j3w1-textarea input, j3w1-textarea select, j3w1-textarea textarea { font: inherit; }
+j3w1-textarea :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-textarea ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-textarea .sr-only {
   border: 0;
 }
 
+j3w1-textarea .combobox-label,
+j3w1-textarea .dialog-field-label,
+j3w1-textarea .field-label,
+j3w1-textarea .fieldset-label,
+j3w1-textarea .file-input-label,
+j3w1-textarea .number-field-label,
+j3w1-textarea .search-field-label,
+j3w1-textarea .select-label,
+j3w1-textarea .text-field-label,
+j3w1-textarea .textarea-label,
+j3w1-textarea .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-textarea .combobox-help,
+j3w1-textarea .date-picker-help,
+j3w1-textarea .dialog-field-help,
+j3w1-textarea .fieldset-help,
+j3w1-textarea .file-input-help,
+j3w1-textarea .number-field-help,
+j3w1-textarea .search-field-help,
+j3w1-textarea .select-help,
+j3w1-textarea .text-field-help,
+j3w1-textarea .textarea-help,
+j3w1-textarea .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-textarea .combobox-message,
+j3w1-textarea .date-picker-message,
+j3w1-textarea .file-input-message,
+j3w1-textarea .number-field-message,
+j3w1-textarea .radio-group-message,
+j3w1-textarea .select-message,
+j3w1-textarea .text-field-message,
+j3w1-textarea .textarea-message,
+j3w1-textarea .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-textarea .combobox-root,
+j3w1-textarea .date-picker-root,
+j3w1-textarea .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-textarea .textarea {
   position: relative;
   display: grid;
@@ -34,12 +94,6 @@ j3w1-textarea .textarea {
   color: var(--color-text-default);
 }
 
-j3w1-textarea .textarea-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-textarea .textarea-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -57,8 +111,8 @@ j3w1-textarea .textarea-input {
   display: block;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) * 2);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) * 2);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -88,21 +142,6 @@ j3w1-textarea .textarea-count {
   line-height: var(--font-line-height-ui-sm);
   font-variant-numeric: tabular-nums;
 }
-
-j3w1-textarea .textarea-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-textarea .textarea-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-textarea .textarea-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/copy/textarea/index.html b/packages/ui/dist/copy/textarea/index.html
index 22d984ab8..12777aeed 100644
--- a/packages/ui/dist/copy/textarea/index.html
+++ b/packages/ui/dist/copy/textarea/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Textarea · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-textarea id="example-textarea-default"><div class="textarea">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Textarea · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-textarea id="example-textarea-default"><div class="textarea">
   <label class="textarea-label" for="example-textarea-default-ta-notes">Release notes <span class="textarea-required" aria-hidden="true">*</span><span class="textarea-required sr-only"> required</span></label>
   <div class="textarea-root">
     <textarea class="textarea-input" id="example-textarea-default-ta-notes" rows="3" placeholder="What changed and why" aria-describedby="example-textarea-default-ta-notes-help example-textarea-default-ta-notes-message" name="example-textarea-default-ta-notes">Focus rings now recolour on filled surfaces.
diff --git a/packages/ui/dist/copy/textarea/manifest.json b/packages/ui/dist/copy/textarea/manifest.json
index 658201928..0e2ec271c 100644
--- a/packages/ui/dist/copy/textarea/manifest.json
+++ b/packages/ui/dist/copy/textarea/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/textarea.md",
   "dependencies": [
     "register/textarea.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/textarea.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/textarea.js": "sha256-H+BMjmdgnMxVEA9KvLSSKoOlHTAH91Qy7+pjUiTlgEE=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/textarea.js": "sha256-qJqDEskuaVeBUFjefVF+KSbJV3s6vpaKCtd4aQ4QtoY=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-BbcGdXHTnD7C55UItp05tibzn6AUyioSMT0hgk45J68=",
+    "runtime/register/textarea.js": "sha256-OGjZrk++zzTI91HXv7chKm86kRb5xICVcoOOdMidF2g=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/textarea.js": "sha256-pi3Oj4itdBVYU/EaRSZ64BqAEsBdeUH4LCG2kwSUKfw=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-mb8M4759fIYX3Wie6cMYfT3+8rTtVkhxg9jNUrssylc=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-FrTRU04fY9wZ6rThXepEiAOHAf/WPEcefiPDsYvSLsM=",
-    "index.html": "sha256-xM2w2jkYyi5BE0Nc6YGqICrh5wAW+DKYGmHHjEB1tOM=",
+    "index.html": "sha256-O3FxWIEbLMDDY8Ok2G+bKB16TiTYtpgkOAaF9Q1gYYo=",
     "README.md": "sha256-F6nGVVbKhFVOmZH/GiI2JV5yeoVGMJCFzjcytVdyGrs="
   }
 }
diff --git a/packages/ui/dist/copy/textarea/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/textarea/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/textarea/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/textarea/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/textarea/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/textarea/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/textarea/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/textarea/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/textarea/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/textarea/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/textarea/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/textarea/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/textarea/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/textarea/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/textarea/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/textarea/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/textarea/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/textarea/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/textarea/runtime/components/textarea.js b/packages/ui/dist/copy/textarea/runtime/components/textarea.js
index 35ed045a1..850762b41 100644
--- a/packages/ui/dist/copy/textarea/runtime/components/textarea.js
+++ b/packages/ui/dist/copy/textarea/runtime/components/textarea.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/textarea.js
 var J3w1Textarea = class extends J3w1Element {
 	static componentId = "textarea";
 	static version = "4.0.0";
-	static implementationId = "sha256-hrpvVFypogHx9xxUI1Lemq3AlNYBkdbjqujfPFl8BM0=";
+	static implementationId = "sha256-BoVEmVsZUWTLPVMKc4WLoQfNpjGc4Wy8j7o7zHck1uQ=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/textarea/runtime/register/textarea.js b/packages/ui/dist/copy/textarea/runtime/register/textarea.js
index ea76ce485..2e9a5db69 100644
--- a/packages/ui/dist/copy/textarea/runtime/register/textarea.js
+++ b/packages/ui/dist/copy/textarea/runtime/register/textarea.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Textarea } from "../components/textarea.js";
 //#region .cache/ui-build/entries/register/textarea.js
 var element = registerElement("j3w1-textarea", J3w1Textarea);
diff --git a/packages/ui/dist/copy/textarea/tokens.css b/packages/ui/dist/copy/textarea/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/textarea/tokens.css
+++ b/packages/ui/dist/copy/textarea/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/time-picker/component.css b/packages/ui/dist/copy/time-picker/component.css
index 7312e174f..49984f7e2 100644
--- a/packages/ui/dist/copy/time-picker/component.css
+++ b/packages/ui/dist/copy/time-picker/component.css
@@ -8,7 +8,7 @@ j3w1-time-picker {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-time-picker, j3w1-time-picker *, j3w1-time-picker *::before, j3w1-time-picker *::after { box-sizing: border-box; }
-j3w1-time-picker button, j3w1-time-picker input, j3w1-time-picker select, j3w1-time-picker textarea { font: inherit; }
+j3w1-time-picker :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-time-picker ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,15 +26,15 @@ j3w1-time-picker .sr-only {
 }
 
 j3w1-time-picker :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-time-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-time-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-time-picker :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-time-picker :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-time-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-time-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-time-picker :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-time-picker :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-time-picker .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-time-picker .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-time-picker .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-time-picker .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-time-picker .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-time-picker .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-time-picker .j3w1-temporal :focus-visible,j3w1-time-picker .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -58,7 +58,7 @@ j3w1-time-picker .j3w1-calendar [aria-pressed="true"] { background:var(--color-i
 j3w1-time-picker .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-time-picker .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-time-picker .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-time-picker .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-time-picker .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-time-picker .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-time-picker .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-time-picker .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -66,7 +66,7 @@ j3w1-time-picker .j3w1-choice-trigger:focus-visible,j3w1-time-picker .j3w1-choic
 j3w1-time-picker .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-time-picker .j3w1-choice-list[popover] { inset: auto; }
 j3w1-time-picker .j3w1-choice-list[hidden] { display: none; }
-j3w1-time-picker .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-time-picker .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-time-picker .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-time-picker .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-time-picker .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -80,19 +80,79 @@ j3w1-time-picker .j3w1-choice-error { display: block; color: var(--color-status-
 j3w1-time-picker .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-time-picker .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-time-picker :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+
+j3w1-time-picker .combobox-label,
+j3w1-time-picker .dialog-field-label,
+j3w1-time-picker .field-label,
+j3w1-time-picker .fieldset-label,
+j3w1-time-picker .file-input-label,
+j3w1-time-picker .number-field-label,
+j3w1-time-picker .search-field-label,
+j3w1-time-picker .select-label,
+j3w1-time-picker .text-field-label,
+j3w1-time-picker .textarea-label,
+j3w1-time-picker .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-time-picker .combobox-help,
+j3w1-time-picker .date-picker-help,
+j3w1-time-picker .dialog-field-help,
+j3w1-time-picker .fieldset-help,
+j3w1-time-picker .file-input-help,
+j3w1-time-picker .number-field-help,
+j3w1-time-picker .search-field-help,
+j3w1-time-picker .select-help,
+j3w1-time-picker .text-field-help,
+j3w1-time-picker .textarea-help,
+j3w1-time-picker .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-time-picker .combobox-message,
+j3w1-time-picker .date-picker-message,
+j3w1-time-picker .file-input-message,
+j3w1-time-picker .number-field-message,
+j3w1-time-picker .radio-group-message,
+j3w1-time-picker .select-message,
+j3w1-time-picker .text-field-message,
+j3w1-time-picker .textarea-message,
+j3w1-time-picker .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-time-picker .combobox-root,
+j3w1-time-picker .date-picker-root,
+j3w1-time-picker .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
 
 j3w1-time-picker .time-picker {
   position: relative;
@@ -104,16 +164,10 @@ j3w1-time-picker .time-picker {
   color: var(--color-text-default);
 }
 
-j3w1-time-picker .time-picker-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-time-picker .time-picker-root {
   display: inline-flex;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -121,7 +175,7 @@ j3w1-time-picker .time-picker-root {
 
 j3w1-time-picker .time-picker-input {
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -140,21 +194,6 @@ j3w1-time-picker .time-picker-input::selection {
 j3w1-time-picker .time-picker-input::-webkit-calendar-picker-indicator {
   cursor: pointer;
 }
-
-j3w1-time-picker .time-picker-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-time-picker .time-picker-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-time-picker .time-picker-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/copy/time-picker/index.html b/packages/ui/dist/copy/time-picker/index.html
index 585a66024..7f05f4130 100644
--- a/packages/ui/dist/copy/time-picker/index.html
+++ b/packages/ui/dist/copy/time-picker/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Time picker · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-time-picker id="example-time-picker-default"><div class="time-picker">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Time picker · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-time-picker id="example-time-picker-default"><div class="time-picker">
   <label class="time-picker-label" for="example-time-picker-default-tp-start">Start time</label>
   <div class="time-picker-root">
     <input class="time-picker-input" id="example-time-picker-default-tp-start" type="time" value="09:30" min="06:00" max="22:00" step="300" aria-describedby="example-time-picker-default-tp-start-help example-time-picker-default-tp-start-message" name="example-time-picker-default-tp-start">
diff --git a/packages/ui/dist/copy/time-picker/manifest.json b/packages/ui/dist/copy/time-picker/manifest.json
index b055ccf2d..1ea87db8c 100644
--- a/packages/ui/dist/copy/time-picker/manifest.json
+++ b/packages/ui/dist/copy/time-picker/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/time-picker.md",
   "dependencies": [
     "register/time-picker.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/time-picker.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/time-picker.js": "sha256-2BVpwqf8Gmd8NnGgY7TdxAtrN4oIOg8cMn0kMOqj9Y4=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/time-picker.js": "sha256-K1tUYKUlk8oOLnC7XwOpKWl/CUzqs0NmsRJ38SjjI1U=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-J5VoJUQp+zDREm8yqwh0jq7TRzMH+H8XMK+3CWxjgIU=",
+    "runtime/register/time-picker.js": "sha256-Y3N2tnRzLjdmpYzxx3rCbl+joREEqSwDzaFTVHIudjM=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/time-picker.js": "sha256-8R5WT2w1+ieYWJkWby33LbGCbBuQiWHFaETY+vXANpc=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-2s5SaHG9dQPlt9Hz78tPTWZDZz5kXliFR2zE0tmPbus=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-RLfLhDEtkzyeISgOb1Njmp8QsxMKjIUzebwrMAg9GNk=",
-    "index.html": "sha256-0uRkUg8W3uzjOeM45/CL0JXuey7R36hf4eL2pcTXKZY=",
+    "index.html": "sha256-HBltgH+aaDfBk6fcYX4waQKdoApT3zk0+wUOtaTyO0g=",
     "README.md": "sha256-bK7PieiUKZ/3zwSldV/HlWMak7kwtWyvgpYy1YfAmbM="
   }
 }
diff --git a/packages/ui/dist/copy/time-picker/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/time-picker/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/time-picker/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/time-picker/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/time-picker/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/time-picker/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/time-picker/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/time-picker/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/time-picker/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/time-picker/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/time-picker/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/time-picker/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/time-picker/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/time-picker/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/time-picker/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/time-picker/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/time-picker/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/time-picker/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/time-picker/runtime/components/time-picker.js b/packages/ui/dist/copy/time-picker/runtime/components/time-picker.js
index 384dca63b..182becce4 100644
--- a/packages/ui/dist/copy/time-picker/runtime/components/time-picker.js
+++ b/packages/ui/dist/copy/time-picker/runtime/components/time-picker.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as fields } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as fields } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/time-picker.js
 var J3w1TimePicker = class extends J3w1Element {
 	static componentId = "time-picker";
 	static version = "4.0.0";
-	static implementationId = "sha256-NixIqVSP1+pZBmD/nUflx8v6ZEWVt0qAVhGMMZv7eWQ=";
+	static implementationId = "sha256-IYFVpO+yyMztyk5IQgkfuuyrieY/xyLgcisHM1D02DA=";
 	static connect = fields;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/time-picker/runtime/register/time-picker.js b/packages/ui/dist/copy/time-picker/runtime/register/time-picker.js
index 244c895c6..f69ab0f23 100644
--- a/packages/ui/dist/copy/time-picker/runtime/register/time-picker.js
+++ b/packages/ui/dist/copy/time-picker/runtime/register/time-picker.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1TimePicker } from "../components/time-picker.js";
 //#region .cache/ui-build/entries/register/time-picker.js
 var element = registerElement("j3w1-time-picker", J3w1TimePicker);
diff --git a/packages/ui/dist/copy/time-picker/tokens.css b/packages/ui/dist/copy/time-picker/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/time-picker/tokens.css
+++ b/packages/ui/dist/copy/time-picker/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/timeline/component.css b/packages/ui/dist/copy/timeline/component.css
index 96bc853f9..1663b31a3 100644
--- a/packages/ui/dist/copy/timeline/component.css
+++ b/packages/ui/dist/copy/timeline/component.css
@@ -8,7 +8,7 @@ j3w1-timeline {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-timeline, j3w1-timeline *, j3w1-timeline *::before, j3w1-timeline *::after { box-sizing: border-box; }
-j3w1-timeline button, j3w1-timeline input, j3w1-timeline select, j3w1-timeline textarea { font: inherit; }
+j3w1-timeline :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-timeline ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,7 +26,7 @@ j3w1-timeline .sr-only {
 }
 
 j3w1-timeline .timeline {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-timeline .timeline :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-timeline .timeline :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-timeline .timeline {list-style:none;margin:0}j3w1-timeline .timeline-item {display:grid;grid-template-columns:calc(var(--font-size-ui-md) * 6) 1fr;gap:var(--space-12);padding:var(--space-12);border-inline-start:var(--border-width-default) solid var(--color-border-divider)}j3w1-timeline .timeline-item[aria-current] {border-inline-start:var(--border-width-emphasis) solid var(--color-border-active)}j3w1-timeline .timeline p {margin:var(--space-4) 0 0}j3w1-timeline .timeline time {color:var(--color-text-muted)}
 
 j3w1-timeline [hidden] { display: none !important; }
diff --git a/packages/ui/dist/copy/timeline/index.html b/packages/ui/dist/copy/timeline/index.html
index 7d107463c..96075e2d6 100644
--- a/packages/ui/dist/copy/timeline/index.html
+++ b/packages/ui/dist/copy/timeline/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Timeline · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-timeline id="example-timeline-default"><ol class="timeline"><li class="timeline-item"><time datetime="2026-01-12">12 Jan</time><div><strong>Foundation prepared</strong><p>Completed · tokens generated.</p></div></li><li class="timeline-item" aria-current="step"><time datetime="2026-01-13">13 Jan</time><div><strong>Components in review</strong><p>Current · interaction checks underway.</p></div></li></ol></j3w1-timeline><script type="module" src="./runtime/register/timeline.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Timeline · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-timeline id="example-timeline-default"><ol class="timeline"><li class="timeline-item"><time datetime="2026-01-12">12 Jan</time><div><strong>Foundation prepared</strong><p>Completed · tokens generated.</p></div></li><li class="timeline-item" aria-current="step"><time datetime="2026-01-13">13 Jan</time><div><strong>Components in review</strong><p>Current · interaction checks underway.</p></div></li></ol></j3w1-timeline><script type="module" src="./runtime/register/timeline.js"></script></body></html>
diff --git a/packages/ui/dist/copy/timeline/manifest.json b/packages/ui/dist/copy/timeline/manifest.json
index b4e2203bc..e4acf2d6c 100644
--- a/packages/ui/dist/copy/timeline/manifest.json
+++ b/packages/ui/dist/copy/timeline/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/timeline.md",
   "dependencies": [
     "register/timeline.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/timeline.js",
-    "chunks/native-CAzZmDKR.js"
+    "chunks/native-BjBt1sUh.js"
   ],
   "files": {
-    "runtime/register/timeline.js": "sha256-DmcJVvF9PvFZM0ka0qgQH9L6lE7TCHhDf56kHMV+SA4=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/timeline.js": "sha256-c1+8tebuE76i5IkY1RRqwNlDkRBrhVwBH4BiCMTSBs4=",
-    "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-VnvBxMC1c6IWen0gQ3RLi0m3FOelH4E8j4xG+B5Zoas=",
+    "runtime/register/timeline.js": "sha256-uXCGuHnZsZSnhQMl00/o559cmYMJo79IrZ1j4ZNySb0=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/timeline.js": "sha256-qOO9Ngp7Zj87zq3HaROWETcECMB8hz5rgR4ryNoEh34=",
+    "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-Af6JACyiwzdqViRAgkXYbYmHSNOZKW+lyj7uVYBMHkc=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-pj/LmsP7e5l3NZI2ZWOLcerU4j0Vn1w2EloUpExz0nw=",
-    "index.html": "sha256-Ob/LUhVAfw+2yZ5HV+/MpGcf5gBqNfOvKXpabGlMOEs=",
+    "index.html": "sha256-8pkUBLof0Lbt5c0AhMfnzIpsfpfVFIObjqvMlRbud38=",
     "README.md": "sha256-CNaX7w50n7r2LnTaBiC5oWdtQN0tep2SK/Q0ggYScgo="
   }
 }
diff --git a/packages/ui/dist/copy/timeline/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/timeline/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/timeline/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/timeline/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/timeline/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/timeline/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/timeline/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/timeline/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/timeline/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/timeline/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/timeline/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/timeline/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/timeline/runtime/chunks/native-BjBt1sUh.js b/packages/ui/dist/copy/timeline/runtime/chunks/native-BjBt1sUh.js
new file mode 100644
index 000000000..032f76c74
--- /dev/null
+++ b/packages/ui/dist/copy/timeline/runtime/chunks/native-BjBt1sUh.js
@@ -0,0 +1,289 @@
+import { i as all, l as make, n as mountChoice, o as enabled, r as mountTemporal, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/native.js
+function content() {
+	return {};
+}
+function actions(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
+		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+		if (!root.emit("action", {
+			action: button.dataset.action ?? button.value ?? "",
+			pressed: button.getAttribute("aria-pressed") === "true"
+		})) event.preventDefault();
+	});
+	return {};
+}
+function fields(root, { on, signal }) {
+	const input = root.querySelector("input,textarea,select");
+	if (!input) return {};
+	if (input.tagName === "SELECT") {
+		const choice = mountChoice(input);
+		return {
+			get values() {
+				return [...input.selectedOptions].map((option) => option.value);
+			},
+			set values(values) {
+				if (!Array.isArray(values)) throw new TypeError("values must be an array");
+				const selected = new Set(values.map(String));
+				[...input.options].forEach((option) => {
+					option.selected = selected.has(option.value);
+				});
+				choice.sync();
+			},
+			clear() {
+				if (input.matches(":disabled")) return;
+				input.value = "";
+				choice.sync();
+				nativeInput(input);
+				nativeInput(input, "change");
+			},
+			attributeChanged: choice.sync,
+			valueChanged: choice.sync,
+			cleanup: choice.destroy
+		};
+	}
+	const count = root.querySelector(".textarea-count,output");
+	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
+	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
+	const sync = () => {
+		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
+		clearButtons.forEach((button) => {
+			button.hidden = !input.value;
+			button.disabled = input.disabled || input.readOnly;
+		});
+		temporal.forEach((control) => control.sync());
+	};
+	const change = () => {
+		sync();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	const clear = () => {
+		if (!enabled(input) || input.readOnly) return;
+		input.value = "";
+		change();
+		input.focus();
+	};
+	clearButtons.forEach((button) => on(button, "click", clear));
+	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
+	if (reveal) on(reveal, "click", () => {
+		if (!enabled(input)) return;
+		const showing = input.type === "password";
+		input.type = showing ? "text" : "password";
+		reveal.setAttribute("aria-pressed", String(showing));
+		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
+	});
+	const step = (direction) => {
+		if (!enabled(input) || input.readOnly || input.type !== "number") return;
+		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
+		change();
+	};
+	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape" && input.type === "search" && input.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			clear();
+		}
+		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			step(event.key === "ArrowUp" ? 10 : -10);
+		}
+	});
+	const dates = all(root, "input[type=\"date\"]");
+	const validateRange = () => {
+		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
+	};
+	on(root, "input", () => {
+		sync();
+		validateRange();
+	});
+	on(root.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!signal.aborted && !event.defaultPrevented) {
+				sync();
+				validateRange();
+			}
+		});
+	}, { capture: true });
+	sync();
+	validateRange();
+	return {
+		clear,
+		stepBy: step,
+		get indeterminate() {
+			return Boolean(input.indeterminate);
+		},
+		set indeterminate(value) {
+			if (input.type === "checkbox") input.indeterminate = Boolean(value);
+		},
+		get values() {
+			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
+		},
+		set values(values) {
+			if (!Array.isArray(values)) throw new TypeError("values must be an array");
+			const chosen = new Set(values.map(String));
+			if (input.multiple) [...input.options].forEach((option) => {
+				option.selected = chosen.has(option.value);
+			});
+			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
+				box.checked = chosen.has(box.value);
+			});
+		},
+		attributeChanged() {
+			sync();
+			validateRange();
+		},
+		valueChanged() {
+			sync();
+			validateRange();
+		},
+		cleanup() {
+			temporal.forEach((control) => control.destroy());
+		}
+	};
+}
+function switchControl(root, { on, signal }) {
+	const button = root.querySelector("[role=\"switch\"]");
+	if (!button) return {};
+	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
+	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
+	button.dataset.defaultChecked = String(defaultChecked);
+	let checked = initial;
+	let successful = root.querySelector("input[data-switch-value]");
+	if (!successful) {
+		successful = make(root, "input", {
+			type: "hidden",
+			"data-switch-value": ""
+		});
+		root.append(successful);
+	}
+	const sync = () => {
+		button.setAttribute("aria-checked", String(checked));
+		successful.name = root.getAttribute("name") ?? "";
+		successful.value = root.getAttribute("value") ?? "on";
+		successful.disabled = !checked || !enabled(button);
+	};
+	on(button, "click", () => {
+		if (enabled(button)) {
+			checked = !checked;
+			sync();
+			root.emit("change", {
+				checked,
+				value: successful.value,
+				name: successful.name
+			});
+		}
+	});
+	on(button.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) {
+			checked = defaultChecked;
+			sync();
+		}
+	}));
+	sync();
+	return {
+		get checked() {
+			return checked;
+		},
+		set checked(value) {
+			checked = Boolean(value);
+			sync();
+		},
+		attributeChanged(name) {
+			if (name === "checked") {
+				defaultChecked = checked = root.hasAttribute("checked");
+				button.dataset.defaultChecked = String(defaultChecked);
+			}
+			sync();
+		}
+	};
+}
+function fileInput(root, { on, signal }) {
+	const input = root.querySelector("input[type=\"file\"]");
+	if (!input) return {};
+	let list = root.querySelector(".file-input-list");
+	if (!list) {
+		list = make(root, "ul", {
+			class: "file-input-list",
+			"aria-label": "Chosen files"
+		});
+		root.append(list);
+	}
+	const status = root.querySelector(".file-input-status");
+	const draw = () => {
+		list.replaceChildren();
+		const files = [...input.files];
+		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
+		for (const [index, file] of files.entries()) {
+			const item = make(root, "li", { class: "file-input-item" });
+			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
+			const remove = make(root, "button", {
+				type: "button",
+				class: "file-input-remove",
+				"aria-label": `Remove ${file.name}`,
+				"data-remove-index": index
+			}, "✕");
+			remove.disabled = input.disabled;
+			item.append(remove);
+			list.append(item);
+		}
+	};
+	const assign = (files) => {
+		if (!enabled(input)) return;
+		const transfer = new DataTransfer();
+		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
+		input.files = transfer.files;
+		draw();
+		nativeInput(input);
+		nativeInput(input, "change");
+	};
+	on(list, "click", (event) => {
+		const button = event.target.closest("[data-remove-index]");
+		if (!button || !enabled(button)) return;
+		const index = Number(button.dataset.removeIndex);
+		assign([...input.files].filter((_, i) => i !== index));
+		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
+	});
+	on(list, "keydown", (event) => {
+		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
+			event.preventDefault();
+			event.target.click();
+		}
+	});
+	const zone = root.querySelector(".file-input-zone");
+	if (zone) {
+		on(zone, "dragover", (event) => {
+			if (enabled(input)) {
+				event.preventDefault();
+				zone.dataset.dragging = "true";
+			}
+		});
+		on(zone, "dragleave", () => {
+			delete zone.dataset.dragging;
+		});
+		on(zone, "drop", (event) => {
+			event.preventDefault();
+			delete zone.dataset.dragging;
+			assign([...event.dataTransfer.files]);
+		});
+	}
+	on(input, "change", draw);
+	on(input.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		get files() {
+			return [...input.files];
+		},
+		clear() {
+			assign([]);
+		},
+		attributeChanged: draw
+	};
+}
+//#endregion
+export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/timeline/runtime/chunks/native-CAzZmDKR.js b/packages/ui/dist/copy/timeline/runtime/chunks/native-CAzZmDKR.js
deleted file mode 100644
index 558c774e5..000000000
--- a/packages/ui/dist/copy/timeline/runtime/chunks/native-CAzZmDKR.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import { c as make, i as all, l as nativeInput, n as mountChoice, o as enabled, r as mountTemporal } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/native.js
-function content() {
-	return {};
-}
-function actions(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button) || button.closest("[data-j3w1-component]") !== root) return;
-		if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-		if (!root.emit("action", {
-			action: button.dataset.action ?? button.value ?? "",
-			pressed: button.getAttribute("aria-pressed") === "true"
-		})) event.preventDefault();
-	});
-	return {};
-}
-function fields(root, { on, signal }) {
-	const input = root.querySelector("input,textarea,select");
-	if (!input) return {};
-	if (input.tagName === "SELECT") {
-		const choice = mountChoice(input);
-		return {
-			get values() {
-				return [...input.selectedOptions].map((option) => option.value);
-			},
-			set values(values) {
-				if (!Array.isArray(values)) throw new TypeError("values must be an array");
-				const selected = new Set(values.map(String));
-				[...input.options].forEach((option) => {
-					option.selected = selected.has(option.value);
-				});
-				choice.sync();
-			},
-			clear() {
-				if (input.matches(":disabled")) return;
-				input.value = "";
-				choice.sync();
-				nativeInput(input);
-				nativeInput(input, "change");
-			},
-			attributeChanged: choice.sync,
-			valueChanged: choice.sync,
-			cleanup: choice.destroy
-		};
-	}
-	const count = root.querySelector(".textarea-count,output");
-	const temporal = all(root, "input[type=\"date\"],input[type=\"time\"]").map(mountTemporal);
-	const clearButtons = all(root, "[data-clear],.search-field-clear,button[aria-label^=\"Clear\"]");
-	const sync = () => {
-		if (count) count.textContent = input.type === "range" ? input.value : `${input.value.length}${input.maxLength > 0 ? ` / ${input.maxLength}` : ""}`;
-		clearButtons.forEach((button) => {
-			button.hidden = !input.value;
-			button.disabled = input.disabled || input.readOnly;
-		});
-		temporal.forEach((control) => control.sync());
-	};
-	const change = () => {
-		sync();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	const clear = () => {
-		if (!enabled(input) || input.readOnly) return;
-		input.value = "";
-		change();
-		input.focus();
-	};
-	clearButtons.forEach((button) => on(button, "click", clear));
-	const reveal = root.querySelector("[data-reveal],button[aria-label*=\"password\"]");
-	if (reveal) on(reveal, "click", () => {
-		if (!enabled(input)) return;
-		const showing = input.type === "password";
-		input.type = showing ? "text" : "password";
-		reveal.setAttribute("aria-pressed", String(showing));
-		reveal.setAttribute("aria-label", showing ? "Hide password" : "Show password");
-	});
-	const step = (direction) => {
-		if (!enabled(input) || input.readOnly || input.type !== "number") return;
-		direction > 0 ? input.stepUp(direction) : input.stepDown(-direction);
-		change();
-	};
-	all(root, "[data-step],button[aria-label^=\"Increase\"],button[aria-label^=\"Decrease\"]").forEach((button) => on(button, "click", () => step(Number(button.dataset.step ?? (button.getAttribute("aria-label").startsWith("Decrease") ? -1 : 1)))));
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape" && input.type === "search" && input.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			clear();
-		}
-		if (input.type === "number" && event.shiftKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
-			event.preventDefault();
-			step(event.key === "ArrowUp" ? 10 : -10);
-		}
-	});
-	const dates = all(root, "input[type=\"date\"]");
-	const validateRange = () => {
-		if (dates.length === 2) dates[1].setCustomValidity(dates[0].value && dates[1].value && dates[1].value < dates[0].value ? "End date must be on or after the start date." : "");
-	};
-	on(root, "input", () => {
-		sync();
-		validateRange();
-	});
-	on(root.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!signal.aborted && !event.defaultPrevented) {
-				sync();
-				validateRange();
-			}
-		});
-	}, { capture: true });
-	sync();
-	validateRange();
-	return {
-		clear,
-		stepBy: step,
-		get indeterminate() {
-			return Boolean(input.indeterminate);
-		},
-		set indeterminate(value) {
-			if (input.type === "checkbox") input.indeterminate = Boolean(value);
-		},
-		get values() {
-			return input.multiple ? [...input.selectedOptions].map((option) => option.value) : all(root, "input[type=\"checkbox\"]:checked").map((box) => box.value);
-		},
-		set values(values) {
-			if (!Array.isArray(values)) throw new TypeError("values must be an array");
-			const chosen = new Set(values.map(String));
-			if (input.multiple) [...input.options].forEach((option) => {
-				option.selected = chosen.has(option.value);
-			});
-			else all(root, "input[type=\"checkbox\"]").forEach((box) => {
-				box.checked = chosen.has(box.value);
-			});
-		},
-		attributeChanged() {
-			sync();
-			validateRange();
-		},
-		valueChanged() {
-			sync();
-			validateRange();
-		},
-		cleanup() {
-			temporal.forEach((control) => control.destroy());
-		}
-	};
-}
-function switchControl(root, { on, signal }) {
-	const button = root.querySelector("[role=\"switch\"]");
-	if (!button) return {};
-	const initial = root.hasAttribute("checked") || button.getAttribute("aria-checked") === "true";
-	let defaultChecked = button.dataset.defaultChecked === void 0 ? initial : button.dataset.defaultChecked === "true";
-	button.dataset.defaultChecked = String(defaultChecked);
-	let checked = initial;
-	let successful = root.querySelector("input[data-switch-value]");
-	if (!successful) {
-		successful = make(root, "input", {
-			type: "hidden",
-			"data-switch-value": ""
-		});
-		root.append(successful);
-	}
-	const sync = () => {
-		button.setAttribute("aria-checked", String(checked));
-		successful.name = root.getAttribute("name") ?? "";
-		successful.value = root.getAttribute("value") ?? "on";
-		successful.disabled = !checked || !enabled(button);
-	};
-	on(button, "click", () => {
-		if (enabled(button)) {
-			checked = !checked;
-			sync();
-			root.emit("change", {
-				checked,
-				value: successful.value,
-				name: successful.name
-			});
-		}
-	});
-	on(button.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) {
-			checked = defaultChecked;
-			sync();
-		}
-	}));
-	sync();
-	return {
-		get checked() {
-			return checked;
-		},
-		set checked(value) {
-			checked = Boolean(value);
-			sync();
-		},
-		attributeChanged(name) {
-			if (name === "checked") {
-				defaultChecked = checked = root.hasAttribute("checked");
-				button.dataset.defaultChecked = String(defaultChecked);
-			}
-			sync();
-		}
-	};
-}
-function fileInput(root, { on, signal }) {
-	const input = root.querySelector("input[type=\"file\"]");
-	if (!input) return {};
-	let list = root.querySelector(".file-input-list");
-	if (!list) {
-		list = make(root, "ul", {
-			class: "file-input-list",
-			"aria-label": "Chosen files"
-		});
-		root.append(list);
-	}
-	const status = root.querySelector(".file-input-status");
-	const draw = () => {
-		list.replaceChildren();
-		const files = [...input.files];
-		if (status) status.textContent = files.length ? `${files.length} file${files.length === 1 ? "" : "s"} chosen` : "No file chosen";
-		for (const [index, file] of files.entries()) {
-			const item = make(root, "li", { class: "file-input-item" });
-			item.append(make(root, "span", { class: "file-input-name" }, file.name), make(root, "span", { class: "file-input-size" }, `${file.size} bytes`));
-			const remove = make(root, "button", {
-				type: "button",
-				class: "file-input-remove",
-				"aria-label": `Remove ${file.name}`,
-				"data-remove-index": index
-			}, "✕");
-			remove.disabled = input.disabled;
-			item.append(remove);
-			list.append(item);
-		}
-	};
-	const assign = (files) => {
-		if (!enabled(input)) return;
-		const transfer = new DataTransfer();
-		for (const file of input.multiple ? files : files.slice(0, 1)) transfer.items.add(file);
-		input.files = transfer.files;
-		draw();
-		nativeInput(input);
-		nativeInput(input, "change");
-	};
-	on(list, "click", (event) => {
-		const button = event.target.closest("[data-remove-index]");
-		if (!button || !enabled(button)) return;
-		const index = Number(button.dataset.removeIndex);
-		assign([...input.files].filter((_, i) => i !== index));
-		(list.querySelectorAll("button")[Math.min(index, input.files.length - 1)] ?? input).focus();
-	});
-	on(list, "keydown", (event) => {
-		if (["Delete", "Backspace"].includes(event.key) && event.target.matches("button")) {
-			event.preventDefault();
-			event.target.click();
-		}
-	});
-	const zone = root.querySelector(".file-input-zone");
-	if (zone) {
-		on(zone, "dragover", (event) => {
-			if (enabled(input)) {
-				event.preventDefault();
-				zone.dataset.dragging = "true";
-			}
-		});
-		on(zone, "dragleave", () => {
-			delete zone.dataset.dragging;
-		});
-		on(zone, "drop", (event) => {
-			event.preventDefault();
-			delete zone.dataset.dragging;
-			assign([...event.dataTransfer.files]);
-		});
-	}
-	on(input, "change", draw);
-	on(input.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		get files() {
-			return [...input.files];
-		},
-		clear() {
-			assign([]);
-		},
-		attributeChanged: draw
-	};
-}
-//#endregion
-export { switchControl as a, fileInput as i, content as n, fields as r, actions as t };
diff --git a/packages/ui/dist/copy/timeline/runtime/components/timeline.js b/packages/ui/dist/copy/timeline/runtime/components/timeline.js
index 49eeb39d4..b5e0249ea 100644
--- a/packages/ui/dist/copy/timeline/runtime/components/timeline.js
+++ b/packages/ui/dist/copy/timeline/runtime/components/timeline.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as content } from "../chunks/native-CAzZmDKR.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as content } from "../chunks/native-BjBt1sUh.js";
 //#region .cache/ui-build/entries/components/timeline.js
 var J3w1Timeline = class extends J3w1Element {
 	static componentId = "timeline";
 	static version = "4.0.0";
-	static implementationId = "sha256-CHqFmIx9nQ6y8hgR0WE3+faD/i7oj5KwbMMOpibojI4=";
+	static implementationId = "sha256-AeDLITSMVmcqyJwXO1iz+6eWe9/9kWYL6lepUxS5ZtU=";
 	static connect = content;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/timeline/runtime/register/timeline.js b/packages/ui/dist/copy/timeline/runtime/register/timeline.js
index 82d652b24..6b8f4b354 100644
--- a/packages/ui/dist/copy/timeline/runtime/register/timeline.js
+++ b/packages/ui/dist/copy/timeline/runtime/register/timeline.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Timeline } from "../components/timeline.js";
 //#region .cache/ui-build/entries/register/timeline.js
 var element = registerElement("j3w1-timeline", J3w1Timeline);
diff --git a/packages/ui/dist/copy/timeline/tokens.css b/packages/ui/dist/copy/timeline/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/timeline/tokens.css
+++ b/packages/ui/dist/copy/timeline/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/toast/component.css b/packages/ui/dist/copy/toast/component.css
index 9e9803ff7..dfdf9a695 100644
--- a/packages/ui/dist/copy/toast/component.css
+++ b/packages/ui/dist/copy/toast/component.css
@@ -8,7 +8,7 @@ j3w1-toast {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-toast, j3w1-toast *, j3w1-toast *::before, j3w1-toast *::after { box-sizing: border-box; }
-j3w1-toast button, j3w1-toast input, j3w1-toast select, j3w1-toast textarea { font: inherit; }
+j3w1-toast :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-toast ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -144,7 +144,7 @@ j3w1-toast .toast-close:hover {
 }
 
 j3w1-toast .toast-action:hover {
-  background: var(--color-interaction-hover-bg-strong);
+  background: var(--color-interaction-hover-bg);
   color: var(--color-text-link-hover);
   text-decoration-thickness: 2px;
 }
diff --git a/packages/ui/dist/copy/toast/index.html b/packages/ui/dist/copy/toast/index.html
index f01df756d..f4bde004b 100644
--- a/packages/ui/dist/copy/toast/index.html
+++ b/packages/ui/dist/copy/toast/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Toast · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-toast id="example-toast-default"><div class="toast-stack" role="region" aria-label="Notifications">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Toast · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-toast id="example-toast-default"><div class="toast-stack" role="region" aria-label="Notifications">
   <div class="toast" role="status">
     <span class="toast-glyph" aria-hidden="true">i</span>
     <p class="toast-text">Settings saved.</p>
diff --git a/packages/ui/dist/copy/toast/manifest.json b/packages/ui/dist/copy/toast/manifest.json
index abfd35dc6..a07b1341c 100644
--- a/packages/ui/dist/copy/toast/manifest.json
+++ b/packages/ui/dist/copy/toast/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/toast.md",
   "dependencies": [
     "register/toast.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/toast.js",
-    "chunks/overlays-C6nlCHqg.js"
+    "chunks/overlays-Bw8SSDKz.js"
   ],
   "files": {
-    "runtime/register/toast.js": "sha256-IdIE1uz4eUV1mu94jhavw3kQx9Omawr6aMO+ij/EIRU=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/toast.js": "sha256-v6J5D8moC3m7GxC2mVYytkK8MOkwHSwODcmKmj1Kkgk=",
-    "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-dMp7q8HbznH2LxwbeRaoK7WL/2M2GeVwkitql3aJ3GE=",
+    "runtime/register/toast.js": "sha256-3boFTJqHNwJ4he43NpdsZK8ttLeqvz9HMoUtwFjVwtk=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/toast.js": "sha256-WIMDZ+G0PKE8LTL9S9wLE1enIZrIXAt4h0Isi5xnGTU=",
+    "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-uDOVAGMFD+o43PgFLYIr3brOp1t4nrDGrE8jaKF7S2U=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-2DXrOBOlEPzc9p3N5SEbw98qHHSMYTxlOnR6gT91kkU=",
-    "index.html": "sha256-UfXmgxl10YQJyIiSccW0Sy7gHSjlICq9a865B0vR+7Q=",
+    "index.html": "sha256-pfILKUsTjhG02CF143yBVB1w9s3PoEzh0CXq+YfLKdU=",
     "README.md": "sha256-Gqkqv+2L4+y8mTQfPGpUxoV4B+6QJazzN5XtXWfyj4w="
   }
 }
diff --git a/packages/ui/dist/copy/toast/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/toast/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/toast/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/toast/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/toast/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/toast/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/toast/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/toast/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/toast/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/toast/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/toast/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/toast/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/toast/runtime/chunks/overlays-Bw8SSDKz.js b/packages/ui/dist/copy/toast/runtime/chunks/overlays-Bw8SSDKz.js
new file mode 100644
index 000000000..3eeb8ff0d
--- /dev/null
+++ b/packages/ui/dist/copy/toast/runtime/chunks/overlays-Bw8SSDKz.js
@@ -0,0 +1,236 @@
+import { d as place, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/overlays.js
+function modal(root, { on }) {
+	const dialog = root.querySelector("dialog");
+	if (!dialog) return {};
+	let opener = null;
+	const show = (trigger = root.ownerDocument.activeElement) => {
+		if (dialog.open || root.hasAttribute("disabled")) return;
+		opener = trigger;
+		dialog.showModal();
+		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
+		root.emit("open", {});
+	};
+	const close = (value = "") => {
+		if (dialog.open) dialog.close(String(value));
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (button?.matches("[data-open]")) {
+			show(button);
+			return;
+		}
+		if (button && dialog.contains(button) && enabled(button)) {
+			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
+			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
+		}
+		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
+	});
+	on(dialog, "cancel", (event) => {
+		if (!root.emit("cancel", {})) event.preventDefault();
+	});
+	on(dialog, "close", () => {
+		if (opener?.isConnected) opener.focus();
+		root.emit("close", { returnValue: dialog.returnValue });
+	});
+	return {
+		show,
+		close,
+		get open() {
+			return dialog.open;
+		},
+		set open(value) {
+			value ? show() : close();
+		},
+		get returnValue() {
+			return dialog.returnValue;
+		},
+		cleanup() {
+			if (dialog.open) dialog.close();
+		}
+	};
+}
+function tooltip(root, { on }) {
+	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
+	if (!trigger || !popup) return {};
+	identify(root, popup, "tooltip");
+	trigger.setAttribute("aria-describedby", popup.id);
+	let timer, dismissed = false, hovering = false;
+	const stop = () => {
+		clearTimeout(timer);
+	};
+	const hide = () => {
+		stop();
+		popup.hidden = true;
+	};
+	const show = () => {
+		stop();
+		if (!dismissed) {
+			popup.hidden = false;
+			place(trigger, popup);
+		}
+	};
+	on(trigger, "pointerenter", (event) => {
+		if (event.pointerType !== "touch") {
+			hovering = true;
+			dismissed = false;
+			timer = setTimeout(show, 300);
+		}
+	});
+	on(root, "pointerleave", (event) => {
+		if (!root.contains(event.relatedTarget)) {
+			hovering = false;
+			dismissed = false;
+			if (root.ownerDocument.activeElement !== trigger) hide();
+		}
+	});
+	on(popup, "pointerenter", () => {
+		hovering = true;
+		stop();
+	});
+	on(trigger, "focus", () => {
+		dismissed = false;
+		show();
+	});
+	on(trigger, "blur", () => {
+		if (!hovering) hide();
+	});
+	on(trigger, "click", () => {
+		dismissed = true;
+		hide();
+	});
+	on(trigger, "pointerdown", (event) => {
+		if (event.pointerType === "touch") {
+			dismissed = false;
+			timer = setTimeout(show, 500);
+		}
+	});
+	on(trigger, "pointerup", stop);
+	on(trigger, "pointercancel", stop);
+	on(root.ownerDocument, "keydown", (event) => {
+		if (event.key === "Escape" && !popup.hidden) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			dismissed = true;
+			hide();
+		}
+	}, { capture: true });
+	on(root.ownerDocument, "scroll", () => {
+		if (!popup.hidden) place(trigger, popup);
+	}, { capture: true });
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!popup.hidden) place(trigger, popup);
+	});
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !popup.hidden;
+		},
+		cleanup: hide
+	};
+}
+function popover(root, { on }) {
+	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
+	if (!trigger || !panel) return {};
+	identify(root, panel, "popover");
+	trigger.setAttribute("aria-controls", panel.id);
+	const native = typeof panel.showPopover === "function";
+	if (native) {
+		panel.setAttribute("popover", "auto");
+		panel.hidden = false;
+	} else panel.hidden = true;
+	let open = false;
+	const sync = (value) => {
+		open = value;
+		trigger.setAttribute("aria-expanded", String(value));
+		root.emit("toggle", { expanded: value });
+	};
+	const show = () => {
+		if (open || !enabled(trigger)) return;
+		native ? panel.showPopover() : panel.hidden = false;
+		sync(true);
+		place(trigger, panel);
+	};
+	const hide = (focus = false) => {
+		if (!open) return;
+		native ? panel.hidePopover() : panel.hidden = true;
+		sync(false);
+		if (focus) trigger.focus();
+	};
+	on(trigger, "click", () => open ? hide() : show());
+	on(panel, "beforetoggle", (event) => {
+		open = event.newState === "open";
+		trigger.setAttribute("aria-expanded", String(open));
+	});
+	on(panel, "click", (event) => {
+		if (event.target.closest("[data-close]")) hide(true);
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!native && !root.contains(event.target)) hide();
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			hide(true);
+		}
+	});
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (open) place(trigger, panel);
+	});
+	trigger.setAttribute("aria-expanded", "false");
+	return {
+		show,
+		hide,
+		get open() {
+			return open;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		cleanup() {
+			hide();
+		}
+	};
+}
+function feedback(root, { on }) {
+	const dismiss = (item) => {
+		if (!item || !root.emit("dismiss", { id: item.id })) return;
+		const hadFocus = item.contains(root.ownerDocument.activeElement);
+		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
+		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
+		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
+		item.hidden = true;
+		if (hadFocus) next?.focus();
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button)) return;
+		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
+		else if (button.matches(".chip-filter")) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		} else if (button.matches("[data-retry]")) root.emit("retry", {});
+		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape") {
+			const toast = event.target.closest(".toast");
+			if (toast) {
+				event.preventDefault();
+				event.stopPropagation();
+				dismiss(toast);
+			}
+		}
+	});
+	return { dismiss(id) {
+		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
+	} };
+}
+//#endregion
+export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/toast/runtime/chunks/overlays-C6nlCHqg.js b/packages/ui/dist/copy/toast/runtime/chunks/overlays-C6nlCHqg.js
deleted file mode 100644
index 9df8503ec..000000000
--- a/packages/ui/dist/copy/toast/runtime/chunks/overlays-C6nlCHqg.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import { i as all, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/overlays.js
-function modal(root, { on }) {
-	const dialog = root.querySelector("dialog");
-	if (!dialog) return {};
-	let opener = null;
-	const show = (trigger = root.ownerDocument.activeElement) => {
-		if (dialog.open || root.hasAttribute("disabled")) return;
-		opener = trigger;
-		dialog.showModal();
-		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
-		root.emit("open", {});
-	};
-	const close = (value = "") => {
-		if (dialog.open) dialog.close(String(value));
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (button?.matches("[data-open]")) {
-			show(button);
-			return;
-		}
-		if (button && dialog.contains(button) && enabled(button)) {
-			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
-			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
-		}
-		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
-	});
-	on(dialog, "cancel", (event) => {
-		if (!root.emit("cancel", {})) event.preventDefault();
-	});
-	on(dialog, "close", () => {
-		if (opener?.isConnected) opener.focus();
-		root.emit("close", { returnValue: dialog.returnValue });
-	});
-	return {
-		show,
-		close,
-		get open() {
-			return dialog.open;
-		},
-		set open(value) {
-			value ? show() : close();
-		},
-		get returnValue() {
-			return dialog.returnValue;
-		},
-		cleanup() {
-			if (dialog.open) dialog.close();
-		}
-	};
-}
-function tooltip(root, { on }) {
-	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
-	if (!trigger || !popup) return {};
-	identify(root, popup, "tooltip");
-	trigger.setAttribute("aria-describedby", popup.id);
-	let timer, dismissed = false, hovering = false;
-	const stop = () => {
-		clearTimeout(timer);
-	};
-	const hide = () => {
-		stop();
-		popup.hidden = true;
-	};
-	const show = () => {
-		stop();
-		if (!dismissed) {
-			popup.hidden = false;
-			place(trigger, popup);
-		}
-	};
-	on(trigger, "pointerenter", (event) => {
-		if (event.pointerType !== "touch") {
-			hovering = true;
-			dismissed = false;
-			timer = setTimeout(show, 300);
-		}
-	});
-	on(root, "pointerleave", (event) => {
-		if (!root.contains(event.relatedTarget)) {
-			hovering = false;
-			dismissed = false;
-			if (root.ownerDocument.activeElement !== trigger) hide();
-		}
-	});
-	on(popup, "pointerenter", () => {
-		hovering = true;
-		stop();
-	});
-	on(trigger, "focus", () => {
-		dismissed = false;
-		show();
-	});
-	on(trigger, "blur", () => {
-		if (!hovering) hide();
-	});
-	on(trigger, "click", () => {
-		dismissed = true;
-		hide();
-	});
-	on(trigger, "pointerdown", (event) => {
-		if (event.pointerType === "touch") {
-			dismissed = false;
-			timer = setTimeout(show, 500);
-		}
-	});
-	on(trigger, "pointerup", stop);
-	on(trigger, "pointercancel", stop);
-	on(root.ownerDocument, "keydown", (event) => {
-		if (event.key === "Escape" && !popup.hidden) {
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			dismissed = true;
-			hide();
-		}
-	}, { capture: true });
-	on(root.ownerDocument, "scroll", () => {
-		if (!popup.hidden) place(trigger, popup);
-	}, { capture: true });
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!popup.hidden) place(trigger, popup);
-	});
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !popup.hidden;
-		},
-		cleanup: hide
-	};
-}
-function popover(root, { on }) {
-	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
-	if (!trigger || !panel) return {};
-	identify(root, panel, "popover");
-	trigger.setAttribute("aria-controls", panel.id);
-	const native = typeof panel.showPopover === "function";
-	if (native) {
-		panel.setAttribute("popover", "auto");
-		panel.hidden = false;
-	} else panel.hidden = true;
-	let open = false;
-	const sync = (value) => {
-		open = value;
-		trigger.setAttribute("aria-expanded", String(value));
-		root.emit("toggle", { expanded: value });
-	};
-	const show = () => {
-		if (open || !enabled(trigger)) return;
-		native ? panel.showPopover() : panel.hidden = false;
-		sync(true);
-		place(trigger, panel);
-	};
-	const hide = (focus = false) => {
-		if (!open) return;
-		native ? panel.hidePopover() : panel.hidden = true;
-		sync(false);
-		if (focus) trigger.focus();
-	};
-	on(trigger, "click", () => open ? hide() : show());
-	on(panel, "beforetoggle", (event) => {
-		open = event.newState === "open";
-		trigger.setAttribute("aria-expanded", String(open));
-	});
-	on(panel, "click", (event) => {
-		if (event.target.closest("[data-close]")) hide(true);
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!native && !root.contains(event.target)) hide();
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape" && open) {
-			event.preventDefault();
-			event.stopPropagation();
-			hide(true);
-		}
-	});
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (open) place(trigger, panel);
-	});
-	trigger.setAttribute("aria-expanded", "false");
-	return {
-		show,
-		hide,
-		get open() {
-			return open;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		cleanup() {
-			hide();
-		}
-	};
-}
-function feedback(root, { on }) {
-	const dismiss = (item) => {
-		if (!item || !root.emit("dismiss", { id: item.id })) return;
-		const hadFocus = item.contains(root.ownerDocument.activeElement);
-		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
-		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
-		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
-		item.hidden = true;
-		if (hadFocus) next?.focus();
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button)) return;
-		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
-		else if (button.matches(".chip-filter")) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		} else if (button.matches("[data-retry]")) root.emit("retry", {});
-		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape") {
-			const toast = event.target.closest(".toast");
-			if (toast) {
-				event.preventDefault();
-				event.stopPropagation();
-				dismiss(toast);
-			}
-		}
-	});
-	return { dismiss(id) {
-		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
-	} };
-}
-//#endregion
-export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/toast/runtime/components/toast.js b/packages/ui/dist/copy/toast/runtime/components/toast.js
index bfce21732..b400752aa 100644
--- a/packages/ui/dist/copy/toast/runtime/components/toast.js
+++ b/packages/ui/dist/copy/toast/runtime/components/toast.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { t as feedback } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { t as feedback } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/toast.js
 var J3w1Toast = class extends J3w1Element {
 	static componentId = "toast";
 	static version = "4.0.0";
-	static implementationId = "sha256-rhHX0XsrYevsAon0WzlROHjbfJksZhr/XraWeBmZhxA=";
+	static implementationId = "sha256-BqW1X3i3Z1X0gaHK/29B1mrUpyhmHpV2a30eW/aK+y4=";
 	static connect = feedback;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/toast/runtime/register/toast.js b/packages/ui/dist/copy/toast/runtime/register/toast.js
index 39672f0fe..55941b8ec 100644
--- a/packages/ui/dist/copy/toast/runtime/register/toast.js
+++ b/packages/ui/dist/copy/toast/runtime/register/toast.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Toast } from "../components/toast.js";
 //#region .cache/ui-build/entries/register/toast.js
 var element = registerElement("j3w1-toast", J3w1Toast);
diff --git a/packages/ui/dist/copy/toast/tokens.css b/packages/ui/dist/copy/toast/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/toast/tokens.css
+++ b/packages/ui/dist/copy/toast/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/toolbar/component.css b/packages/ui/dist/copy/toolbar/component.css
index a340245ca..90cbe4126 100644
--- a/packages/ui/dist/copy/toolbar/component.css
+++ b/packages/ui/dist/copy/toolbar/component.css
@@ -8,7 +8,7 @@ j3w1-toolbar {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-toolbar, j3w1-toolbar *, j3w1-toolbar *::before, j3w1-toolbar *::after { box-sizing: border-box; }
-j3w1-toolbar button, j3w1-toolbar input, j3w1-toolbar select, j3w1-toolbar textarea { font: inherit; }
+j3w1-toolbar :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-toolbar ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -28,9 +28,9 @@ j3w1-toolbar .sr-only {
 j3w1-toolbar .toolbar {
   display: flex;
   align-items: center;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   padding: var(--space-2) var(--space-4);
   overflow: hidden;
   background: var(--color-surface-chrome);
@@ -43,9 +43,9 @@ j3w1-toolbar .toolbar-button {
   align-items: center;
   gap: var(--space-4);
   flex: 0 0 auto;
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: var(--border-width-default) solid transparent;
   border-radius: var(--radius-none);
@@ -154,8 +154,8 @@ j3w1-toolbar .menu-button {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -204,8 +204,8 @@ j3w1-toolbar .menu-item {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -221,7 +221,7 @@ j3w1-toolbar .menu-check {
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-text-bright);
   visibility: hidden;
 }
@@ -263,8 +263,8 @@ j3w1-toolbar .menu-button:focus-visible {
 }
 
 j3w1-toolbar .menu-item:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 j3w1-toolbar .menu-button:focus:not(:focus-visible),
diff --git a/packages/ui/dist/copy/toolbar/index.html b/packages/ui/dist/copy/toolbar/index.html
index 6ae2edee6..5876221f6 100644
--- a/packages/ui/dist/copy/toolbar/index.html
+++ b/packages/ui/dist/copy/toolbar/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Toolbar · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-toolbar id="example-toolbar-default"><div class="toolbar" role="toolbar" aria-label="Editor" aria-orientation="horizontal">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Toolbar · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-toolbar id="example-toolbar-default"><div class="toolbar" role="toolbar" aria-label="Editor" aria-orientation="horizontal">
   <button class="toolbar-button" type="button" tabindex="0">Undo</button>
   <button class="toolbar-button" type="button" tabindex="-1">Redo</button>
   <div class="toolbar-separator" role="separator" aria-orientation="vertical"></div>
diff --git a/packages/ui/dist/copy/toolbar/manifest.json b/packages/ui/dist/copy/toolbar/manifest.json
index b7d91907b..4e38950b2 100644
--- a/packages/ui/dist/copy/toolbar/manifest.json
+++ b/packages/ui/dist/copy/toolbar/manifest.json
@@ -5,26 +5,26 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/toolbar.md",
   "dependencies": [
     "register/toolbar.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/toolbar.js",
-    "chunks/navigation-Dt8ap-9J.js",
+    "chunks/navigation-BfNzDYZB.js",
     "register/menu.js",
     "components/menu.js"
   ],
   "files": {
-    "runtime/register/toolbar.js": "sha256-OSMJIpjPl64KP4YMacdMSLwBugQjcBJHhX/8qyJT0aM=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/toolbar.js": "sha256-xBBCFoguW9JGO+jaNyPrdGYVP2YwJ4BhX3FWPRxoqfs=",
-    "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-    "runtime/register/menu.js": "sha256-YX+9ydadaIbkPIBFhLWX4Jv3V9vIl4UY1qolxLGfZUg=",
-    "runtime/components/menu.js": "sha256-AMtJth+M+4jqb8imqdn9VcM3aKvtgCWkPySfsI7htH8=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-uTfyFdWFrx91RdklrAzqAHNf5B2q1psaqjlF71eT+Xc=",
+    "runtime/register/toolbar.js": "sha256-0i+oWvmcjNoFTB9ChlJSM3r3Ig4bYjlkdy/lkmNBlmA=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/toolbar.js": "sha256-kGWjidatkl+BJM+S2e/e9pYaok6mLuLLl520Nn8h86E=",
+    "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+    "runtime/register/menu.js": "sha256-6CvU7Rei9lC+olXvluxdbCPqh46GrPSvB2MGiudiMTk=",
+    "runtime/components/menu.js": "sha256-As/aVex/jKXrmY4x/rG0tVMVUij8ZLPXK0kKS4ZBpSQ=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-zD6jRNAjuf7XM9+QaxwzEY+F2cFUrQbgUKNLTCc7Q/Y=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-MRU95stqvOm7gd3wzi8XadrYOLU9MRKqdwFO/bmSaPY=",
-    "index.html": "sha256-qzep40OKd67lZTxeQflCRA+sfx2A6/zxVgtV4re8LgY=",
+    "index.html": "sha256-AJ2jXzyPYjQufetc6mGuf1SQv8HGS9+yyaOcQo9pOIQ=",
     "README.md": "sha256-jPzt7MdgG4yEEJJ6qWZk3Cgw9KNNNHEKkwz/nnKK3co="
   }
 }
diff --git a/packages/ui/dist/copy/toolbar/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/toolbar/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/toolbar/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/toolbar/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/toolbar/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/toolbar/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/toolbar/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/toolbar/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/toolbar/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/toolbar/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/toolbar/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/toolbar/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/toolbar/runtime/chunks/navigation-BfNzDYZB.js b/packages/ui/dist/copy/toolbar/runtime/chunks/navigation-BfNzDYZB.js
new file mode 100644
index 000000000..db2779553
--- /dev/null
+++ b/packages/ui/dist/copy/toolbar/runtime/chunks/navigation-BfNzDYZB.js
@@ -0,0 +1,377 @@
+import { a as announce, c as keyIndex, d as place, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/navigation.js
+function tabs(root, { on }, listOverride) {
+	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
+	if (!list) return {};
+	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
+	const select = (id, focus = false) => {
+		const tab = items().find((item) => item.id === id);
+		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
+		all(list, "[role=\"tab\"]").forEach((item) => {
+			item.setAttribute("aria-selected", String(item === tab));
+			item.tabIndex = item === tab ? 0 : -1;
+		});
+		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
+			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
+			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
+		});
+		if (focus) tab.focus();
+		return tab;
+	};
+	const activate = (tab) => {
+		select(tab.id);
+		root.emit("select", {
+			id: tab.id,
+			panelId: tab.getAttribute("aria-controls")
+		});
+	};
+	on(list, "click", (event) => {
+		const tab = event.target.closest("[role=\"tab\"]");
+		if (tab && enabled(tab)) activate(tab);
+	});
+	on(list, "keydown", (event) => {
+		const current = event.target.closest("[role=\"tab\"]"), options = items();
+		if (!current) return;
+		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		let index = options.indexOf(current);
+		if (event.key === next) index++;
+		else if (event.key === previous) index--;
+		else if (event.key === "Home") index = 0;
+		else if (event.key === "End") index = options.length - 1;
+		else if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			activate(current);
+			return;
+		} else return;
+		event.preventDefault();
+		const tab = rove(options, index);
+		if (root.getAttribute("activation") !== "manual") activate(tab);
+	});
+	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
+	if (initial) select(initial.id);
+	return {
+		select,
+		get selectedId() {
+			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
+		},
+		set selectedId(id) {
+			select(id);
+		}
+	};
+}
+function toolbar(root, { on }) {
+	const bar = root.querySelector("[role=\"toolbar\"]");
+	if (!bar) return {};
+	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
+	const initial = controls();
+	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
+	on(bar, "focusin", (event) => {
+		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
+	});
+	on(bar, "keydown", (event) => {
+		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
+		const items = controls(), index = items.indexOf(event.target);
+		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
+		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		if (![
+			next,
+			prev,
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		event.preventDefault();
+		rove(items, keyIndex({
+			key: event.key,
+			index,
+			length: items.length,
+			next,
+			previous: prev
+		}));
+	});
+	on(bar, "click", (event) => {
+		const button = event.target.closest("button[aria-pressed]");
+		if (button && enabled(button)) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.dataset.action ?? button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		}
+	});
+	return {};
+}
+function disclosure(root, { on }) {
+	on(root, "click", (event) => {
+		const button = event.target.closest("button[aria-controls][aria-expanded]");
+		if (!button || !enabled(button)) return;
+		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
+		if (!target) return;
+		const expanded = button.getAttribute("aria-expanded") !== "true";
+		button.setAttribute("aria-expanded", String(expanded));
+		target.hidden = !expanded;
+		root.emit("toggle", {
+			id: target.id,
+			expanded
+		});
+	});
+	const details = root.querySelector("details");
+	on(details, "toggle", () => root.emit("toggle", {
+		id: details.id,
+		expanded: details.open
+	}));
+	return {
+		get open() {
+			return details?.open ?? false;
+		},
+		set open(value) {
+			if (details) details.open = Boolean(value);
+		}
+	};
+}
+function combobox(root, { on, signal }) {
+	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
+	if (!input || !list) return {};
+	identify(root, list, "options");
+	input.setAttribute("aria-controls", list.id);
+	let active = null, notifying = false;
+	const notify = () => {
+		notifying = true;
+		try {
+			nativeInput(input);
+			nativeInput(input, "change");
+		} finally {
+			notifying = false;
+		}
+	};
+	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
+	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
+	const setActive = (option) => {
+		active = option;
+		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
+		if (option) {
+			input.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		} else input.removeAttribute("aria-activedescendant");
+	};
+	const hide = () => {
+		list.hidden = true;
+		input.setAttribute("aria-expanded", "false");
+		setActive(null);
+	};
+	const filter = (query = input.value) => {
+		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
+		all(list, "[role=\"group\"]").forEach((group) => {
+			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
+		});
+		const empty = root.querySelector(".combobox-empty");
+		if (empty) {
+			empty.hidden = options().length !== 0;
+			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
+		}
+		if (!options().includes(active)) setActive(null);
+	};
+	const show = (allOptions = false) => {
+		if (!enabled(input) || input.readOnly) return;
+		filter(allOptions ? "" : input.value);
+		list.hidden = false;
+		input.setAttribute("aria-expanded", "true");
+		place(input, list);
+	};
+	const choose = (option) => {
+		if (!option || !enabled(option)) return;
+		input.value = option.dataset.value ?? option.textContent.trim();
+		hide();
+		notify();
+		input.focus();
+	};
+	on(input, "input", () => {
+		if (!notifying) {
+			show();
+			announce(root, `${options().length} options available.`);
+		}
+	});
+	on(input, "keydown", (event) => {
+		if (event.key === "Tab") {
+			hide();
+			return;
+		}
+		if (event.key === "Escape") {
+			if (!list.hidden) {
+				hide();
+				event.stopPropagation();
+			} else if (input.value) {
+				input.value = "";
+				notify();
+				event.stopPropagation();
+			}
+			event.preventDefault();
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			hide();
+			return;
+		}
+		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			if (list.hidden) show(true);
+			if (event.altKey) return;
+			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
+			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
+		} else if (event.key === "Enter" && !list.hidden && active) {
+			event.preventDefault();
+			choose(active);
+		}
+	});
+	on(list, "pointerdown", (event) => {
+		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
+	});
+	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
+	on(root.querySelector(".combobox-toggle"), "click", () => {
+		list.hidden ? show(true) : hide();
+		input.focus();
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide();
+	});
+	on(root, "focusout", () => queueMicrotask(() => {
+		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
+	}));
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!list.hidden) place(input, list);
+	});
+	on(root.ownerDocument, "scroll", (event) => {
+		if (!list.hidden && !list.contains(event.target)) place(input, list);
+	}, { capture: true });
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !list.hidden;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		get value() {
+			return input.value;
+		},
+		set value(value) {
+			input.value = String(value ?? "");
+			if (!list.hidden) filter();
+		},
+		cleanup: hide
+	};
+}
+function menu(root, { on }) {
+	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
+	if (!trigger || !main) return {};
+	identify(root, main, "menu");
+	trigger.setAttribute("aria-controls", main.id);
+	const lists = all(root, "[role=\"menu\"]");
+	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
+	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
+	const closeList = (list) => {
+		list.hidden = true;
+		controller(list)?.setAttribute("aria-expanded", "false");
+	};
+	const hide = (focus = true) => {
+		lists.forEach(closeList);
+		if (focus) trigger.focus();
+	};
+	const showList = (list, button, last = false) => {
+		list.hidden = false;
+		button.setAttribute("aria-expanded", "true");
+		place(button, list);
+		rove(items(list), last ? items(list).length - 1 : 0);
+	};
+	const show = () => {
+		if (enabled(trigger)) showList(main, trigger);
+	};
+	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
+	const activate = (item) => {
+		if (!enabled(item)) return;
+		const child = submenu(item);
+		if (child) {
+			showList(child, item);
+			return;
+		}
+		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
+		else hide();
+		root.emit("action", {
+			action: item.dataset.action ?? item.textContent.trim(),
+			checked: item.getAttribute("aria-checked") === "true"
+		});
+	};
+	on(trigger, "click", () => main.hidden ? show() : hide());
+	on(trigger, "keydown", (event) => {
+		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
+			event.preventDefault();
+			showList(main, trigger, event.key === "ArrowUp");
+		}
+	});
+	on(root, "click", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (item) activate(item);
+	});
+	on(root, "keydown", (event) => {
+		const item = event.target.closest("[role^=\"menuitem\"]");
+		if (!item) return;
+		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			rove(options, keyIndex({
+				key: event.key,
+				index,
+				length: options.length
+			}));
+		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (list !== main) {
+				closeList(list);
+				controller(list)?.focus();
+			} else hide();
+		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
+			event.preventDefault();
+			showList(submenu(item), item);
+		} else if (event.key === "Tab") hide();
+		else if (event.key.length === 1 && /\S/.test(event.key)) {
+			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+			if (found) {
+				event.preventDefault();
+				rove(options, options.indexOf(found));
+			}
+		}
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument, "focusin", (event) => {
+		if (!root.contains(event.target)) hide(false);
+	});
+	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
+	hide(false);
+	return {
+		show,
+		hide,
+		get open() {
+			return !main.hidden;
+		},
+		set open(value) {
+			value ? show() : hide(false);
+		},
+		cleanup() {
+			hide(false);
+		}
+	};
+}
+//#endregion
+export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/toolbar/runtime/chunks/navigation-Dt8ap-9J.js b/packages/ui/dist/copy/toolbar/runtime/chunks/navigation-Dt8ap-9J.js
deleted file mode 100644
index 81201c8d5..000000000
--- a/packages/ui/dist/copy/toolbar/runtime/chunks/navigation-Dt8ap-9J.js
+++ /dev/null
@@ -1,367 +0,0 @@
-import { a as announce, d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/navigation.js
-function tabs(root, { on }, listOverride) {
-	const list = listOverride ?? root.querySelector("[role=\"tablist\"]");
-	if (!list) return {};
-	const items = () => all(list, "[role=\"tab\"]").filter(enabled);
-	const select = (id, focus = false) => {
-		const tab = items().find((item) => item.id === id);
-		if (!tab) throw new RangeError(`Unknown enabled tab: ${id}`);
-		all(list, "[role=\"tab\"]").forEach((item) => {
-			item.setAttribute("aria-selected", String(item === tab));
-			item.tabIndex = item === tab ? 0 : -1;
-		});
-		all(root, "[role=\"tabpanel\"]").filter((panel) => all(list, "[role=\"tab\"]").some((tab) => tab.getAttribute("aria-controls") === panel.id)).forEach((panel) => {
-			panel.hidden = panel.id !== tab.getAttribute("aria-controls");
-			if (!panel.hidden && !panel.querySelector("a[href],button,input,select,textarea,[tabindex='0']")) panel.tabIndex = 0;
-		});
-		if (focus) tab.focus();
-		return tab;
-	};
-	const activate = (tab) => {
-		select(tab.id);
-		root.emit("select", {
-			id: tab.id,
-			panelId: tab.getAttribute("aria-controls")
-		});
-	};
-	on(list, "click", (event) => {
-		const tab = event.target.closest("[role=\"tab\"]");
-		if (tab && enabled(tab)) activate(tab);
-	});
-	on(list, "keydown", (event) => {
-		const current = event.target.closest("[role=\"tab\"]"), options = items();
-		if (!current) return;
-		const vertical = list.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(list).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previous = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		let index = options.indexOf(current);
-		if (event.key === next) index++;
-		else if (event.key === previous) index--;
-		else if (event.key === "Home") index = 0;
-		else if (event.key === "End") index = options.length - 1;
-		else if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			activate(current);
-			return;
-		} else return;
-		event.preventDefault();
-		const tab = rove(options, index);
-		if (root.getAttribute("activation") !== "manual") activate(tab);
-	});
-	const initial = items().find((item) => item.getAttribute("aria-selected") === "true") ?? items()[0];
-	if (initial) select(initial.id);
-	return {
-		select,
-		get selectedId() {
-			return list.querySelector("[aria-selected=\"true\"]")?.id ?? "";
-		},
-		set selectedId(id) {
-			select(id);
-		}
-	};
-}
-function toolbar(root, { on }) {
-	const bar = root.querySelector("[role=\"toolbar\"]");
-	if (!bar) return {};
-	const controls = () => all(bar, "button,a[href],input,select").filter((node) => enabled(node) && visible(node) && !node.closest("[role=\"menu\"]"));
-	const initial = controls();
-	rove(initial, Math.max(0, initial.findIndex((node) => node.tabIndex === 0)), false);
-	on(bar, "focusin", (event) => {
-		if (controls().includes(event.target)) rove(controls(), controls().indexOf(event.target), false);
-	});
-	on(bar, "keydown", (event) => {
-		if (event.target.matches("input,select,textarea") || event.target.closest("[role=\"menu\"]")) return;
-		const items = controls(), index = items.indexOf(event.target);
-		const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		if (![
-			next,
-			prev,
-			"Home",
-			"End"
-		].includes(event.key)) return;
-		event.preventDefault();
-		rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
-	});
-	on(bar, "click", (event) => {
-		const button = event.target.closest("button[aria-pressed]");
-		if (button && enabled(button)) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.dataset.action ?? button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		}
-	});
-	return {};
-}
-function disclosure(root, { on }) {
-	on(root, "click", (event) => {
-		const button = event.target.closest("button[aria-controls][aria-expanded]");
-		if (!button || !enabled(button)) return;
-		const target = root.querySelector(`#${CSS.escape(button.getAttribute("aria-controls"))}`);
-		if (!target) return;
-		const expanded = button.getAttribute("aria-expanded") !== "true";
-		button.setAttribute("aria-expanded", String(expanded));
-		target.hidden = !expanded;
-		root.emit("toggle", {
-			id: target.id,
-			expanded
-		});
-	});
-	const details = root.querySelector("details");
-	on(details, "toggle", () => root.emit("toggle", {
-		id: details.id,
-		expanded: details.open
-	}));
-	return {
-		get open() {
-			return details?.open ?? false;
-		},
-		set open(value) {
-			if (details) details.open = Boolean(value);
-		}
-	};
-}
-function combobox(root, { on, signal }) {
-	const input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]");
-	if (!input || !list) return {};
-	identify(root, list, "options");
-	input.setAttribute("aria-controls", list.id);
-	let active = null, notifying = false;
-	const notify = () => {
-		notifying = true;
-		try {
-			nativeInput(input);
-			nativeInput(input, "change");
-		} finally {
-			notifying = false;
-		}
-	};
-	const options = () => all(list, "[role=\"option\"]").filter((node) => enabled(node) && !node.hidden && !node.closest("[role=\"group\"][hidden]"));
-	all(list, "[role=\"option\"]").forEach((option, index) => identify(root, option, `option-${index}`));
-	const setActive = (option) => {
-		active = option;
-		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
-		if (option) {
-			input.setAttribute("aria-activedescendant", option.id);
-			option.scrollIntoView({ block: "nearest" });
-		} else input.removeAttribute("aria-activedescendant");
-	};
-	const hide = () => {
-		list.hidden = true;
-		input.setAttribute("aria-expanded", "false");
-		setActive(null);
-	};
-	const filter = (query = input.value) => {
-		for (const option of all(list, "[role=\"option\"]")) if (enabled(option)) option.hidden = !option.textContent.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-		all(list, "[role=\"group\"]").forEach((group) => {
-			group.hidden = !all(group, "[role=\"option\"]").some((node) => enabled(node) && !node.hidden);
-		});
-		const empty = root.querySelector(".combobox-empty");
-		if (empty) {
-			empty.hidden = options().length !== 0;
-			empty.classList.toggle("combobox-empty-shown", !empty.hidden);
-		}
-		if (!options().includes(active)) setActive(null);
-	};
-	const show = (allOptions = false) => {
-		if (!enabled(input) || input.readOnly) return;
-		filter(allOptions ? "" : input.value);
-		list.hidden = false;
-		input.setAttribute("aria-expanded", "true");
-		place(input, list);
-	};
-	const choose = (option) => {
-		if (!option || !enabled(option)) return;
-		input.value = option.dataset.value ?? option.textContent.trim();
-		hide();
-		notify();
-		input.focus();
-	};
-	on(input, "input", () => {
-		if (!notifying) {
-			show();
-			announce(root, `${options().length} options available.`);
-		}
-	});
-	on(input, "keydown", (event) => {
-		if (event.key === "Tab") {
-			hide();
-			return;
-		}
-		if (event.key === "Escape") {
-			if (!list.hidden) {
-				hide();
-				event.stopPropagation();
-			} else if (input.value) {
-				input.value = "";
-				notify();
-				event.stopPropagation();
-			}
-			event.preventDefault();
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			hide();
-			return;
-		}
-		if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-			event.preventDefault();
-			if (list.hidden) show(true);
-			if (event.altKey) return;
-			const items = options(), index = active ? items.indexOf(active) : event.key === "ArrowDown" ? -1 : 0;
-			if (items.length) setActive(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
-		} else if (event.key === "Enter" && !list.hidden && active) {
-			event.preventDefault();
-			choose(active);
-		}
-	});
-	on(list, "pointerdown", (event) => {
-		if (event.target.closest("[role=\"option\"]")) event.preventDefault();
-	});
-	on(list, "click", (event) => choose(event.target.closest("[role=\"option\"]")));
-	on(root.querySelector(".combobox-toggle"), "click", () => {
-		list.hidden ? show(true) : hide();
-		input.focus();
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide();
-	});
-	on(root, "focusout", () => queueMicrotask(() => {
-		if (!signal.aborted && !root.contains(root.ownerDocument.activeElement)) hide();
-	}));
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!list.hidden) place(input, list);
-	});
-	on(root.ownerDocument, "scroll", (event) => {
-		if (!list.hidden && !list.contains(event.target)) place(input, list);
-	}, { capture: true });
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !list.hidden;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		get value() {
-			return input.value;
-		},
-		set value(value) {
-			input.value = String(value ?? "");
-			if (!list.hidden) filter();
-		},
-		cleanup: hide
-	};
-}
-function menu(root, { on }) {
-	const trigger = root.querySelector("button[aria-haspopup=\"menu\"]"), main = root.querySelector("[role=\"menu\"]");
-	if (!trigger || !main) return {};
-	identify(root, main, "menu");
-	trigger.setAttribute("aria-controls", main.id);
-	const lists = all(root, "[role=\"menu\"]");
-	const items = (list) => all(list, "[role^=\"menuitem\"]").filter((item) => item.closest("[role=\"menu\"]") === list);
-	const controller = (list) => all(root, "[aria-controls]").find((node) => node.getAttribute("aria-controls") === list.id);
-	const closeList = (list) => {
-		list.hidden = true;
-		controller(list)?.setAttribute("aria-expanded", "false");
-	};
-	const hide = (focus = true) => {
-		lists.forEach(closeList);
-		if (focus) trigger.focus();
-	};
-	const showList = (list, button, last = false) => {
-		list.hidden = false;
-		button.setAttribute("aria-expanded", "true");
-		place(button, list);
-		rove(items(list), last ? items(list).length - 1 : 0);
-	};
-	const show = () => {
-		if (enabled(trigger)) showList(main, trigger);
-	};
-	const submenu = (button) => button.hasAttribute("aria-haspopup") ? lists.find((list) => list.id === button.getAttribute("aria-controls")) : null;
-	const activate = (item) => {
-		if (!enabled(item)) return;
-		const child = submenu(item);
-		if (child) {
-			showList(child, item);
-			return;
-		}
-		if (item.getAttribute("role") === "menuitemcheckbox") item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
-		else if (item.getAttribute("role") === "menuitemradio") items(item.closest("[role=\"menu\"]")).filter((node) => node.getAttribute("role") === "menuitemradio").forEach((node) => node.setAttribute("aria-checked", String(node === item)));
-		else hide();
-		root.emit("action", {
-			action: item.dataset.action ?? item.textContent.trim(),
-			checked: item.getAttribute("aria-checked") === "true"
-		});
-	};
-	on(trigger, "click", () => main.hidden ? show() : hide());
-	on(trigger, "keydown", (event) => {
-		if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled(trigger)) {
-			event.preventDefault();
-			showList(main, trigger, event.key === "ArrowUp");
-		}
-	});
-	on(root, "click", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (item) activate(item);
-	});
-	on(root, "keydown", (event) => {
-		const item = event.target.closest("[role^=\"menuitem\"]");
-		if (!item) return;
-		const list = item.closest("[role=\"menu\"]"), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
-		} else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) {
-			event.preventDefault();
-			event.stopPropagation();
-			if (list !== main) {
-				closeList(list);
-				controller(list)?.focus();
-			} else hide();
-		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) {
-			event.preventDefault();
-			showList(submenu(item), item);
-		} else if (event.key === "Tab") hide();
-		else if (event.key.length === 1 && /\S/.test(event.key)) {
-			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(".menu-label") ?? node).textContent.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-			if (found) {
-				event.preventDefault();
-				rove(options, options.indexOf(found));
-			}
-		}
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument, "focusin", (event) => {
-		if (!root.contains(event.target)) hide(false);
-	});
-	on(root.ownerDocument.defaultView, "resize", () => lists.filter((list) => !list.hidden).forEach((list) => place(controller(list), list)));
-	hide(false);
-	return {
-		show,
-		hide,
-		get open() {
-			return !main.hidden;
-		},
-		set open(value) {
-			value ? show() : hide(false);
-		},
-		cleanup() {
-			hide(false);
-		}
-	};
-}
-//#endregion
-export { toolbar as a, tabs as i, disclosure as n, menu as r, combobox as t };
diff --git a/packages/ui/dist/copy/toolbar/runtime/components/menu.js b/packages/ui/dist/copy/toolbar/runtime/components/menu.js
index 3f1e4b50c..b35ceb43e 100644
--- a/packages/ui/dist/copy/toolbar/runtime/components/menu.js
+++ b/packages/ui/dist/copy/toolbar/runtime/components/menu.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { r as menu } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { r as menu } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/menu.js
 var J3w1Menu = class extends J3w1Element {
 	static componentId = "menu";
 	static version = "4.0.0";
-	static implementationId = "sha256-jIlJcU1Nx7Q5MB7Fqfcn4f9vr0IW1gmGwNdP5Rk72Aw=";
+	static implementationId = "sha256-oS0Ubl9rLRKcmk22aO7KDARBpUoA/Y7sR2AvyqabH+U=";
 	static connect = menu;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/toolbar/runtime/components/toolbar.js b/packages/ui/dist/copy/toolbar/runtime/components/toolbar.js
index c2b5f4a84..195494e1d 100644
--- a/packages/ui/dist/copy/toolbar/runtime/components/toolbar.js
+++ b/packages/ui/dist/copy/toolbar/runtime/components/toolbar.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { a as toolbar } from "../chunks/navigation-Dt8ap-9J.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { a as toolbar } from "../chunks/navigation-BfNzDYZB.js";
 //#region .cache/ui-build/entries/components/toolbar.js
 var J3w1Toolbar = class extends J3w1Element {
 	static componentId = "toolbar";
 	static version = "4.0.0";
-	static implementationId = "sha256-7FoTDU41k2QPRk6gXO/G9yZKsFEuxE/63FSt+FSMAlQ=";
+	static implementationId = "sha256-VCE2y9mKILLuKe6e6CYb+KzHmhM/oKWGD3XWHaHGRw0=";
 	static connect = toolbar;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/toolbar/runtime/register/menu.js b/packages/ui/dist/copy/toolbar/runtime/register/menu.js
index 734c05e98..655b77a5a 100644
--- a/packages/ui/dist/copy/toolbar/runtime/register/menu.js
+++ b/packages/ui/dist/copy/toolbar/runtime/register/menu.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Menu } from "../components/menu.js";
 //#region .cache/ui-build/entries/register/menu.js
 var element = registerElement("j3w1-menu", J3w1Menu);
diff --git a/packages/ui/dist/copy/toolbar/runtime/register/toolbar.js b/packages/ui/dist/copy/toolbar/runtime/register/toolbar.js
index e39eab7da..0de0d853e 100644
--- a/packages/ui/dist/copy/toolbar/runtime/register/toolbar.js
+++ b/packages/ui/dist/copy/toolbar/runtime/register/toolbar.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Toolbar } from "../components/toolbar.js";
 import "./menu.js";
 //#region .cache/ui-build/entries/register/toolbar.js
diff --git a/packages/ui/dist/copy/toolbar/tokens.css b/packages/ui/dist/copy/toolbar/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/toolbar/tokens.css
+++ b/packages/ui/dist/copy/toolbar/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/tooltip/component.css b/packages/ui/dist/copy/tooltip/component.css
index 39b5cdb8c..8053c9bfd 100644
--- a/packages/ui/dist/copy/tooltip/component.css
+++ b/packages/ui/dist/copy/tooltip/component.css
@@ -8,7 +8,7 @@ j3w1-tooltip {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-tooltip, j3w1-tooltip *, j3w1-tooltip *::before, j3w1-tooltip *::after { box-sizing: border-box; }
-j3w1-tooltip button, j3w1-tooltip input, j3w1-tooltip select, j3w1-tooltip textarea { font: inherit; }
+j3w1-tooltip :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-tooltip ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -36,8 +36,8 @@ j3w1-tooltip .tooltip {
 j3w1-tooltip .tooltip-trigger {
   display: inline-flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
diff --git a/packages/ui/dist/copy/tooltip/index.html b/packages/ui/dist/copy/tooltip/index.html
index 011beaec3..e82ca4d2a 100644
--- a/packages/ui/dist/copy/tooltip/index.html
+++ b/packages/ui/dist/copy/tooltip/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Tooltip · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-tooltip id="example-tooltip-default"><div class="tooltip">
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Tooltip · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-tooltip id="example-tooltip-default"><div class="tooltip">
   <button class="tooltip-trigger" type="button" aria-describedby="example-tooltip-default-tt-reload">Reload</button>
   <div class="tooltip-popup" role="tooltip" id="example-tooltip-default-tt-reload">Reload the window and keep the layout.</div>
 </div></j3w1-tooltip><script type="module" src="./runtime/register/tooltip.js"></script></body></html>
diff --git a/packages/ui/dist/copy/tooltip/manifest.json b/packages/ui/dist/copy/tooltip/manifest.json
index fea800f7e..1cddeb32a 100644
--- a/packages/ui/dist/copy/tooltip/manifest.json
+++ b/packages/ui/dist/copy/tooltip/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/tooltip.md",
   "dependencies": [
     "register/tooltip.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/tooltip.js",
-    "chunks/overlays-C6nlCHqg.js"
+    "chunks/overlays-Bw8SSDKz.js"
   ],
   "files": {
-    "runtime/register/tooltip.js": "sha256-HkIZuQ8Gs11kQ0MzBEIBWrfaPopBPdUh+ODRas1HzLk=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/tooltip.js": "sha256-3/N04wmhF1WPLWW0LBMN2pFnpLGTy7p7toYw2pZpNw0=",
-    "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-Skdu3czE82hMaq0VZwtG6ERV4Hud75l3iMhOfMR7K7U=",
+    "runtime/register/tooltip.js": "sha256-G4uAYJmQJk4eTEhF1uHV44mtO+Vefw1Onc1nq3+iWlU=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/tooltip.js": "sha256-MhBgu8Nu2Vx7dqARBvSKFOY+LCcOut1TAcB/5QSwPPI=",
+    "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-qYB8NrU6j0LSeluhANQt7hX4GwZJkfsCr7sElkRObAs=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-+kSohyFbJg7z8/YUnlkzY1UQAu9ZLX7qE1eFLvk/1hI=",
-    "index.html": "sha256-E+iyir+kE7FZW4yp4r+zjaBJSIcRsJGbvmwPckUJga0=",
+    "index.html": "sha256-H8VqbExkj5zBn+UMGOUurqozbkho78wvT0O1LxdqEXs=",
     "README.md": "sha256-gCdLT45+37bldGYfH9LhZjTXGX04d3jZOS7ARTD3bCE="
   }
 }
diff --git a/packages/ui/dist/copy/tooltip/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/tooltip/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/tooltip/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/tooltip/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/tooltip/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/tooltip/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/tooltip/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/tooltip/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/tooltip/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/tooltip/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/tooltip/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/tooltip/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/tooltip/runtime/chunks/overlays-Bw8SSDKz.js b/packages/ui/dist/copy/tooltip/runtime/chunks/overlays-Bw8SSDKz.js
new file mode 100644
index 000000000..3eeb8ff0d
--- /dev/null
+++ b/packages/ui/dist/copy/tooltip/runtime/chunks/overlays-Bw8SSDKz.js
@@ -0,0 +1,236 @@
+import { d as place, i as all, o as enabled, s as identify } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/behaviors/overlays.js
+function modal(root, { on }) {
+	const dialog = root.querySelector("dialog");
+	if (!dialog) return {};
+	let opener = null;
+	const show = (trigger = root.ownerDocument.activeElement) => {
+		if (dialog.open || root.hasAttribute("disabled")) return;
+		opener = trigger;
+		dialog.showModal();
+		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
+		root.emit("open", {});
+	};
+	const close = (value = "") => {
+		if (dialog.open) dialog.close(String(value));
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (button?.matches("[data-open]")) {
+			show(button);
+			return;
+		}
+		if (button && dialog.contains(button) && enabled(button)) {
+			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
+			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
+		}
+		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
+	});
+	on(dialog, "cancel", (event) => {
+		if (!root.emit("cancel", {})) event.preventDefault();
+	});
+	on(dialog, "close", () => {
+		if (opener?.isConnected) opener.focus();
+		root.emit("close", { returnValue: dialog.returnValue });
+	});
+	return {
+		show,
+		close,
+		get open() {
+			return dialog.open;
+		},
+		set open(value) {
+			value ? show() : close();
+		},
+		get returnValue() {
+			return dialog.returnValue;
+		},
+		cleanup() {
+			if (dialog.open) dialog.close();
+		}
+	};
+}
+function tooltip(root, { on }) {
+	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
+	if (!trigger || !popup) return {};
+	identify(root, popup, "tooltip");
+	trigger.setAttribute("aria-describedby", popup.id);
+	let timer, dismissed = false, hovering = false;
+	const stop = () => {
+		clearTimeout(timer);
+	};
+	const hide = () => {
+		stop();
+		popup.hidden = true;
+	};
+	const show = () => {
+		stop();
+		if (!dismissed) {
+			popup.hidden = false;
+			place(trigger, popup);
+		}
+	};
+	on(trigger, "pointerenter", (event) => {
+		if (event.pointerType !== "touch") {
+			hovering = true;
+			dismissed = false;
+			timer = setTimeout(show, 300);
+		}
+	});
+	on(root, "pointerleave", (event) => {
+		if (!root.contains(event.relatedTarget)) {
+			hovering = false;
+			dismissed = false;
+			if (root.ownerDocument.activeElement !== trigger) hide();
+		}
+	});
+	on(popup, "pointerenter", () => {
+		hovering = true;
+		stop();
+	});
+	on(trigger, "focus", () => {
+		dismissed = false;
+		show();
+	});
+	on(trigger, "blur", () => {
+		if (!hovering) hide();
+	});
+	on(trigger, "click", () => {
+		dismissed = true;
+		hide();
+	});
+	on(trigger, "pointerdown", (event) => {
+		if (event.pointerType === "touch") {
+			dismissed = false;
+			timer = setTimeout(show, 500);
+		}
+	});
+	on(trigger, "pointerup", stop);
+	on(trigger, "pointercancel", stop);
+	on(root.ownerDocument, "keydown", (event) => {
+		if (event.key === "Escape" && !popup.hidden) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			dismissed = true;
+			hide();
+		}
+	}, { capture: true });
+	on(root.ownerDocument, "scroll", () => {
+		if (!popup.hidden) place(trigger, popup);
+	}, { capture: true });
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (!popup.hidden) place(trigger, popup);
+	});
+	hide();
+	return {
+		show,
+		hide,
+		get open() {
+			return !popup.hidden;
+		},
+		cleanup: hide
+	};
+}
+function popover(root, { on }) {
+	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
+	if (!trigger || !panel) return {};
+	identify(root, panel, "popover");
+	trigger.setAttribute("aria-controls", panel.id);
+	const native = typeof panel.showPopover === "function";
+	if (native) {
+		panel.setAttribute("popover", "auto");
+		panel.hidden = false;
+	} else panel.hidden = true;
+	let open = false;
+	const sync = (value) => {
+		open = value;
+		trigger.setAttribute("aria-expanded", String(value));
+		root.emit("toggle", { expanded: value });
+	};
+	const show = () => {
+		if (open || !enabled(trigger)) return;
+		native ? panel.showPopover() : panel.hidden = false;
+		sync(true);
+		place(trigger, panel);
+	};
+	const hide = (focus = false) => {
+		if (!open) return;
+		native ? panel.hidePopover() : panel.hidden = true;
+		sync(false);
+		if (focus) trigger.focus();
+	};
+	on(trigger, "click", () => open ? hide() : show());
+	on(panel, "beforetoggle", (event) => {
+		open = event.newState === "open";
+		trigger.setAttribute("aria-expanded", String(open));
+	});
+	on(panel, "click", (event) => {
+		if (event.target.closest("[data-close]")) hide(true);
+	});
+	on(root.ownerDocument, "pointerdown", (event) => {
+		if (!native && !root.contains(event.target)) hide();
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			hide(true);
+		}
+	});
+	on(root.ownerDocument.defaultView, "resize", () => {
+		if (open) place(trigger, panel);
+	});
+	trigger.setAttribute("aria-expanded", "false");
+	return {
+		show,
+		hide,
+		get open() {
+			return open;
+		},
+		set open(value) {
+			value ? show() : hide();
+		},
+		cleanup() {
+			hide();
+		}
+	};
+}
+function feedback(root, { on }) {
+	const dismiss = (item) => {
+		if (!item || !root.emit("dismiss", { id: item.id })) return;
+		const hadFocus = item.contains(root.ownerDocument.activeElement);
+		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
+		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
+		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
+		item.hidden = true;
+		if (hadFocus) next?.focus();
+	};
+	on(root, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button)) return;
+		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
+		else if (button.matches(".chip-filter")) {
+			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
+			root.emit("action", {
+				action: button.textContent.trim(),
+				pressed: button.getAttribute("aria-pressed") === "true"
+			});
+		} else if (button.matches("[data-retry]")) root.emit("retry", {});
+		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
+	});
+	on(root, "keydown", (event) => {
+		if (event.key === "Escape") {
+			const toast = event.target.closest(".toast");
+			if (toast) {
+				event.preventDefault();
+				event.stopPropagation();
+				dismiss(toast);
+			}
+		}
+	});
+	return { dismiss(id) {
+		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
+	} };
+}
+//#endregion
+export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/tooltip/runtime/chunks/overlays-C6nlCHqg.js b/packages/ui/dist/copy/tooltip/runtime/chunks/overlays-C6nlCHqg.js
deleted file mode 100644
index 9df8503ec..000000000
--- a/packages/ui/dist/copy/tooltip/runtime/chunks/overlays-C6nlCHqg.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import { i as all, o as enabled, s as identify, u as place } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/behaviors/overlays.js
-function modal(root, { on }) {
-	const dialog = root.querySelector("dialog");
-	if (!dialog) return {};
-	let opener = null;
-	const show = (trigger = root.ownerDocument.activeElement) => {
-		if (dialog.open || root.hasAttribute("disabled")) return;
-		opener = trigger;
-		dialog.showModal();
-		(dialog.querySelector("[autofocus]") ?? dialog.querySelector("button:not(.dialog-button-destructive)"))?.focus();
-		root.emit("open", {});
-	};
-	const close = (value = "") => {
-		if (dialog.open) dialog.close(String(value));
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (button?.matches("[data-open]")) {
-			show(button);
-			return;
-		}
-		if (button && dialog.contains(button) && enabled(button)) {
-			if (button.matches("[data-close],.dialog-close,.drawer-close")) close(button.dataset.close ?? "cancel");
-			else if (button.dataset.action && root.emit("action", { action: button.dataset.action })) close(button.dataset.action);
-		}
-		if (root.constructor.componentId === "drawer" && event.target.closest("a[href]") && dialog.contains(event.target)) close("navigate");
-	});
-	on(dialog, "cancel", (event) => {
-		if (!root.emit("cancel", {})) event.preventDefault();
-	});
-	on(dialog, "close", () => {
-		if (opener?.isConnected) opener.focus();
-		root.emit("close", { returnValue: dialog.returnValue });
-	});
-	return {
-		show,
-		close,
-		get open() {
-			return dialog.open;
-		},
-		set open(value) {
-			value ? show() : close();
-		},
-		get returnValue() {
-			return dialog.returnValue;
-		},
-		cleanup() {
-			if (dialog.open) dialog.close();
-		}
-	};
-}
-function tooltip(root, { on }) {
-	const trigger = root.querySelector(".tooltip-trigger"), popup = root.querySelector("[role=\"tooltip\"]");
-	if (!trigger || !popup) return {};
-	identify(root, popup, "tooltip");
-	trigger.setAttribute("aria-describedby", popup.id);
-	let timer, dismissed = false, hovering = false;
-	const stop = () => {
-		clearTimeout(timer);
-	};
-	const hide = () => {
-		stop();
-		popup.hidden = true;
-	};
-	const show = () => {
-		stop();
-		if (!dismissed) {
-			popup.hidden = false;
-			place(trigger, popup);
-		}
-	};
-	on(trigger, "pointerenter", (event) => {
-		if (event.pointerType !== "touch") {
-			hovering = true;
-			dismissed = false;
-			timer = setTimeout(show, 300);
-		}
-	});
-	on(root, "pointerleave", (event) => {
-		if (!root.contains(event.relatedTarget)) {
-			hovering = false;
-			dismissed = false;
-			if (root.ownerDocument.activeElement !== trigger) hide();
-		}
-	});
-	on(popup, "pointerenter", () => {
-		hovering = true;
-		stop();
-	});
-	on(trigger, "focus", () => {
-		dismissed = false;
-		show();
-	});
-	on(trigger, "blur", () => {
-		if (!hovering) hide();
-	});
-	on(trigger, "click", () => {
-		dismissed = true;
-		hide();
-	});
-	on(trigger, "pointerdown", (event) => {
-		if (event.pointerType === "touch") {
-			dismissed = false;
-			timer = setTimeout(show, 500);
-		}
-	});
-	on(trigger, "pointerup", stop);
-	on(trigger, "pointercancel", stop);
-	on(root.ownerDocument, "keydown", (event) => {
-		if (event.key === "Escape" && !popup.hidden) {
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			dismissed = true;
-			hide();
-		}
-	}, { capture: true });
-	on(root.ownerDocument, "scroll", () => {
-		if (!popup.hidden) place(trigger, popup);
-	}, { capture: true });
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (!popup.hidden) place(trigger, popup);
-	});
-	hide();
-	return {
-		show,
-		hide,
-		get open() {
-			return !popup.hidden;
-		},
-		cleanup: hide
-	};
-}
-function popover(root, { on }) {
-	const trigger = root.querySelector("[data-popover-trigger]"), panel = root.querySelector("[data-popover-panel]");
-	if (!trigger || !panel) return {};
-	identify(root, panel, "popover");
-	trigger.setAttribute("aria-controls", panel.id);
-	const native = typeof panel.showPopover === "function";
-	if (native) {
-		panel.setAttribute("popover", "auto");
-		panel.hidden = false;
-	} else panel.hidden = true;
-	let open = false;
-	const sync = (value) => {
-		open = value;
-		trigger.setAttribute("aria-expanded", String(value));
-		root.emit("toggle", { expanded: value });
-	};
-	const show = () => {
-		if (open || !enabled(trigger)) return;
-		native ? panel.showPopover() : panel.hidden = false;
-		sync(true);
-		place(trigger, panel);
-	};
-	const hide = (focus = false) => {
-		if (!open) return;
-		native ? panel.hidePopover() : panel.hidden = true;
-		sync(false);
-		if (focus) trigger.focus();
-	};
-	on(trigger, "click", () => open ? hide() : show());
-	on(panel, "beforetoggle", (event) => {
-		open = event.newState === "open";
-		trigger.setAttribute("aria-expanded", String(open));
-	});
-	on(panel, "click", (event) => {
-		if (event.target.closest("[data-close]")) hide(true);
-	});
-	on(root.ownerDocument, "pointerdown", (event) => {
-		if (!native && !root.contains(event.target)) hide();
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape" && open) {
-			event.preventDefault();
-			event.stopPropagation();
-			hide(true);
-		}
-	});
-	on(root.ownerDocument.defaultView, "resize", () => {
-		if (open) place(trigger, panel);
-	});
-	trigger.setAttribute("aria-expanded", "false");
-	return {
-		show,
-		hide,
-		get open() {
-			return open;
-		},
-		set open(value) {
-			value ? show() : hide();
-		},
-		cleanup() {
-			hide();
-		}
-	};
-}
-function feedback(root, { on }) {
-	const dismiss = (item) => {
-		if (!item || !root.emit("dismiss", { id: item.id })) return;
-		const hadFocus = item.contains(root.ownerDocument.activeElement);
-		const focusable = all(root.ownerDocument, "button,a[href],input,select,textarea,[tabindex='0']").filter((node) => enabled(node) && !node.closest("[hidden]"));
-		const currentIndex = focusable.indexOf(root.ownerDocument.activeElement);
-		const next = focusable.slice(currentIndex + 1).find((node) => !item.contains(node)) ?? focusable.slice(0, currentIndex).reverse().find((node) => !item.contains(node));
-		item.hidden = true;
-		if (hadFocus) next?.focus();
-	};
-	on(root, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button)) return;
-		if (button.matches(".toast-close,.alert-close,.chip-remove,[data-dismiss]")) dismiss(button.closest(".toast,.alert,.chip") ?? root);
-		else if (button.matches(".chip-filter")) {
-			button.setAttribute("aria-pressed", String(button.getAttribute("aria-pressed") !== "true"));
-			root.emit("action", {
-				action: button.textContent.trim(),
-				pressed: button.getAttribute("aria-pressed") === "true"
-			});
-		} else if (button.matches("[data-retry]")) root.emit("retry", {});
-		else root.emit("action", { action: button.dataset.action ?? button.textContent.trim() });
-	});
-	on(root, "keydown", (event) => {
-		if (event.key === "Escape") {
-			const toast = event.target.closest(".toast");
-			if (toast) {
-				event.preventDefault();
-				event.stopPropagation();
-				dismiss(toast);
-			}
-		}
-	});
-	return { dismiss(id) {
-		dismiss(id ? root.querySelector(`#${CSS.escape(id)}`) : root.querySelector(".toast,.alert") ?? root);
-	} };
-}
-//#endregion
-export { tooltip as i, modal as n, popover as r, feedback as t };
diff --git a/packages/ui/dist/copy/tooltip/runtime/components/tooltip.js b/packages/ui/dist/copy/tooltip/runtime/components/tooltip.js
index a796e5788..e641fa5b8 100644
--- a/packages/ui/dist/copy/tooltip/runtime/components/tooltip.js
+++ b/packages/ui/dist/copy/tooltip/runtime/components/tooltip.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as tooltip } from "../chunks/overlays-C6nlCHqg.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as tooltip } from "../chunks/overlays-Bw8SSDKz.js";
 //#region .cache/ui-build/entries/components/tooltip.js
 var J3w1Tooltip = class extends J3w1Element {
 	static componentId = "tooltip";
 	static version = "4.0.0";
-	static implementationId = "sha256-nhRIjLsKxdM5/M6c+0RvOzlv1sK6VJDshft6xhMUbtE=";
+	static implementationId = "sha256-GLt9uL8KQ+UknDKUAP+CEU7bTChO5TO3WPwmpJzH62M=";
 	static connect = tooltip;
 	static upgradeProperties = ["disabled", "name"];
 	static observedAttributes = [...J3w1Element.observedAttributes, ...["disabled", "loading"]];
diff --git a/packages/ui/dist/copy/tooltip/runtime/register/tooltip.js b/packages/ui/dist/copy/tooltip/runtime/register/tooltip.js
index b8308dd65..262fbe4be 100644
--- a/packages/ui/dist/copy/tooltip/runtime/register/tooltip.js
+++ b/packages/ui/dist/copy/tooltip/runtime/register/tooltip.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Tooltip } from "../components/tooltip.js";
 //#region .cache/ui-build/entries/register/tooltip.js
 var element = registerElement("j3w1-tooltip", J3w1Tooltip);
diff --git a/packages/ui/dist/copy/tooltip/tokens.css b/packages/ui/dist/copy/tooltip/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/tooltip/tokens.css
+++ b/packages/ui/dist/copy/tooltip/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/tree/component.css b/packages/ui/dist/copy/tree/component.css
index 59bb6e5bf..b7690fa9e 100644
--- a/packages/ui/dist/copy/tree/component.css
+++ b/packages/ui/dist/copy/tree/component.css
@@ -8,7 +8,7 @@ j3w1-tree {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-tree, j3w1-tree *, j3w1-tree *::before, j3w1-tree *::after { box-sizing: border-box; }
-j3w1-tree button, j3w1-tree input, j3w1-tree select, j3w1-tree textarea { font: inherit; }
+j3w1-tree :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-tree ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,8 +26,15 @@ j3w1-tree .sr-only {
 }
 
 j3w1-tree .tree {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-tree .tree-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-tree .tree,j3w1-tree .tree [role=group] {list-style:none;padding:0;margin:0}j3w1-tree .tree [role=group] {padding-inline-start:var(--space-16)}j3w1-tree .tree [data-tree-label] {display:block;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent}j3w1-tree .tree [aria-expanded]>[data-tree-label]::before {content:'▸ '}j3w1-tree .tree [aria-expanded=true]>[data-tree-label]::before {content:'▾ '}j3w1-tree .tree [aria-selected=true]>[data-tree-label] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}j3w1-tree .tree [role=treeitem]:focus-visible>[data-tree-label] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}j3w1-tree .tree [aria-expanded=false]>[role=group] {display:none}j3w1-tree .tree [aria-disabled=true]>[data-tree-label] {color:var(--color-text-disabled)}
+j3w1-tree .tree,j3w1-tree .tree [role=group] {list-style:none;padding:0;margin:0}
+j3w1-tree .tree [role=group] {padding-inline-start:var(--space-16)}
+j3w1-tree .tree [data-tree-label] {display:block;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent}
+j3w1-tree .tree [aria-expanded]>[data-tree-label]::before {content:'▸ '}
+j3w1-tree .tree [aria-expanded=true]>[data-tree-label]::before {content:'▾ '}
+j3w1-tree .tree [aria-selected=true]>[data-tree-label] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}
+j3w1-tree .tree [role=treeitem]:focus-visible>[data-tree-label] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+j3w1-tree .tree [aria-expanded=false]>[role=group] {display:none}
+j3w1-tree .tree [aria-disabled=true]>[data-tree-label] {color:var(--color-text-disabled)}
 
 j3w1-tree .tree [aria-selected=true]:focus-visible>[data-tree-label] {outline-color:var(--color-interaction-focus-ring)}
 
diff --git a/packages/ui/dist/copy/tree/index.html b/packages/ui/dist/copy/tree/index.html
index 20bb42b06..21cb3794a 100644
--- a/packages/ui/dist/copy/tree/index.html
+++ b/packages/ui/dist/copy/tree/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Tree · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-tree id="example-tree-default"><ul class="tree" role="tree" aria-label="Workspace files"><li role="treeitem" id="example-tree-default-tree-source" aria-expanded="true" tabindex="0" data-demo-focus-target=""><span data-tree-label="">Source<button type="button" tabindex="-1" data-tree-toggle="" aria-label="Toggle children">▸</button></span><ul role="group"><li role="treeitem" id="example-tree-default-tree-app" tabindex="-1" aria-selected="true"><span data-tree-label="">App.vue</span></li><li role="treeitem" id="example-tree-default-tree-styles" tabindex="-1" aria-selected="false"><span data-tree-label="">styles.css</span></li></ul></li><li role="treeitem" id="example-tree-default-tree-readme" tabindex="-1" aria-selected="false"><span data-tree-label="">README.md</span></li></ul></j3w1-tree><script type="module" src="./runtime/register/tree.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Tree · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-tree id="example-tree-default"><ul class="tree" role="tree" aria-label="Workspace files"><li role="treeitem" id="example-tree-default-tree-source" aria-expanded="true" tabindex="0" data-demo-focus-target=""><span data-tree-label="">Source<button type="button" tabindex="-1" data-tree-toggle="" aria-label="Toggle children">▸</button></span><ul role="group"><li role="treeitem" id="example-tree-default-tree-app" tabindex="-1" aria-selected="true"><span data-tree-label="">App.vue</span></li><li role="treeitem" id="example-tree-default-tree-styles" tabindex="-1" aria-selected="false"><span data-tree-label="">styles.css</span></li></ul></li><li role="treeitem" id="example-tree-default-tree-readme" tabindex="-1" aria-selected="false"><span data-tree-label="">README.md</span></li></ul></j3w1-tree><script type="module" src="./runtime/register/tree.js"></script></body></html>
diff --git a/packages/ui/dist/copy/tree/manifest.json b/packages/ui/dist/copy/tree/manifest.json
index 23667f515..db8797fa2 100644
--- a/packages/ui/dist/copy/tree/manifest.json
+++ b/packages/ui/dist/copy/tree/manifest.json
@@ -5,24 +5,24 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/tree.md",
   "dependencies": [
     "register/tree.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/tree.js",
-    "chunks/advanced-DCpe8Ndv.js",
+    "chunks/advanced-CqBF0dSb.js",
     "chunks/markup-DeQ4bEMR.js"
   ],
   "files": {
-    "runtime/register/tree.js": "sha256-xY8jWYnbMM8UlE/rdQJsu3/URGPvdUC06U1QmKsmFZQ=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/tree.js": "sha256-1wgpPM9BoC1/T0Or37ZhoekuO2YZ3luXp+DpWKVKBcU=",
-    "runtime/chunks/advanced-DCpe8Ndv.js": "sha256-nr1LFdLYsGeTM4vDyldvuJygRm0F04sYonxatySPu1g=",
+    "runtime/register/tree.js": "sha256-5FC2B/6Dr2k5l/nTb9KKizslYbXmQxe2nEoLuYG6zDg=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/tree.js": "sha256-mYl4DYRuChSjXkRwM7LaJ31aYQZlvzP0RgTYmuNdC9U=",
+    "runtime/chunks/advanced-CqBF0dSb.js": "sha256-ozOzkRU6IeVGBqU3XQ0aLledkAi9vcs8dJdMQutVevs=",
     "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-CMMLz+0autEo86UbTxzkyHVpMoNtyKskesgbIua+YiQ=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-znFzezcYcv10Qwb2tH/UwaG4XQgCXophAwo2Z8cOiyg=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-F1zSdM5xw3/jlndjR4iQRRyZ7K9gfkgofh1Oin9xUAo=",
-    "index.html": "sha256-+NV68HiyyQfXclh/Z5F0O/9UwWGzR6RouwMjxM/4DZI=",
+    "index.html": "sha256-/VmRV653lNaKNt7NO3oiJk/gDJfd6DAwSN1hvX6+viA=",
     "README.md": "sha256-rkAg9VO8TxgNCrXXP8dhUJ24Zori5pT/6k3w7gj4ixA="
   }
 }
diff --git a/packages/ui/dist/copy/tree/runtime/chunks/advanced-CqBF0dSb.js b/packages/ui/dist/copy/tree/runtime/chunks/advanced-CqBF0dSb.js
new file mode 100644
index 000000000..4a5c45981
--- /dev/null
+++ b/packages/ui/dist/copy/tree/runtime/chunks/advanced-CqBF0dSb.js
@@ -0,0 +1,345 @@
+import { c as keyIndex, f as rove, i as all, o as enabled, p as visible, s as identify, u as nativeInput } from "./choice-B7mo5Eq3.js";
+import { t as IDREFS } from "./markup-DeQ4bEMR.js";
+//#region packages/ui/src/behaviors/advanced.js
+function tree(root, { on }) {
+	const treeRoot = root.querySelector("[role=\"tree\"]");
+	if (!treeRoot) return {};
+	const items = () => all(treeRoot, "[role=\"treeitem\"]");
+	const shown = () => items().filter(visible);
+	const group = (item) => [...item.children].find((node) => node.getAttribute("role") === "group");
+	const parent = (item) => item.parentElement.closest("[role=\"treeitem\"]");
+	items().forEach((item, index) => {
+		identify(root, item, `node-${index}`);
+		const children = group(item);
+		if (children) {
+			if (!item.hasAttribute("aria-expanded")) item.setAttribute("aria-expanded", "false");
+			children.hidden = item.getAttribute("aria-expanded") !== "true";
+		}
+	});
+	const select = (id) => {
+		const item = items().find((node) => node.id === id);
+		if (!item || !enabled(item)) throw new RangeError(`Unknown enabled tree item: ${id}`);
+		items().forEach((node) => node.setAttribute("aria-selected", String(node === item)));
+	};
+	const expand = (id, expanded = true) => {
+		const item = items().find((node) => node.id === id), children = item && group(item);
+		if (!children) throw new RangeError(`Unknown tree parent: ${id}`);
+		if (!expanded && children.contains(root.ownerDocument.activeElement)) rove(items(), items().indexOf(item));
+		item.setAttribute("aria-expanded", String(Boolean(expanded)));
+		children.hidden = !expanded;
+		const toggle = item.querySelector(":scope > [data-tree-label] > [data-tree-toggle]");
+		if (toggle) toggle.setAttribute("aria-label", expanded ? "Collapse" : "Expand");
+		root.emit("toggle", {
+			id,
+			expanded: Boolean(expanded)
+		});
+	};
+	const activate = (item) => {
+		if (enabled(item)) {
+			select(item.id);
+			root.emit("select", { id: item.id });
+		}
+	};
+	const initial = shown();
+	rove(initial, Math.max(0, initial.findIndex((item) => item.tabIndex === 0)), false);
+	on(treeRoot, "click", (event) => {
+		const item = event.target.closest("[role=\"treeitem\"]");
+		if (!item) return;
+		rove(shown(), shown().indexOf(item));
+		if (event.target.closest("[data-tree-toggle]") && group(item)) expand(item.id, item.getAttribute("aria-expanded") !== "true");
+		else activate(item);
+	});
+	on(treeRoot, "dblclick", (event) => {
+		const item = event.target.closest("[role=\"treeitem\"]");
+		if (item && group(item) && !event.target.closest("[data-tree-toggle]")) expand(item.id, item.getAttribute("aria-expanded") !== "true");
+	});
+	on(treeRoot, "keydown", (event) => {
+		const item = event.target.closest("[role=\"treeitem\"]");
+		if (!item) return;
+		const options = shown(), index = options.indexOf(item), rtl = getComputedStyle(treeRoot).direction === "rtl";
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = keyIndex({
+				key: event.key,
+				index,
+				length: options.length,
+				wrap: false
+			});
+			rove(options, next);
+		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
+			event.preventDefault();
+			if (group(item)) {
+				if (item.getAttribute("aria-expanded") !== "true") expand(item.id);
+				else rove(shown(), shown().indexOf(item) + 1);
+			}
+		} else if (event.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
+			event.preventDefault();
+			if (group(item) && item.getAttribute("aria-expanded") === "true") expand(item.id, false);
+			else if (parent(item)) rove(options, options.indexOf(parent(item)));
+		} else if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			activate(item);
+		} else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(":scope > [data-tree-label]")?.textContent ?? node.firstChild?.textContent ?? "").trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+			if (found) {
+				event.preventDefault();
+				rove(options, options.indexOf(found));
+			}
+		}
+	});
+	return {
+		expand,
+		get selectedId() {
+			return items().find((item) => item.getAttribute("aria-selected") === "true")?.id ?? "";
+		},
+		set selectedId(id) {
+			select(id);
+		}
+	};
+}
+function multiselect(root, { on, signal }) {
+	const query = root.querySelector("[data-filter]"), status = root.querySelector("[data-selection-status]"), boxes = all(root, "input[type=\"checkbox\"]");
+	const values = () => boxes.filter((box) => box.checked).map((box) => box.value);
+	const draw = () => {
+		let matches = 0;
+		for (const box of boxes) {
+			const label = box.closest("label");
+			if (!label) continue;
+			label.hidden = !label.textContent.toLocaleLowerCase().includes((query?.value ?? "").toLocaleLowerCase());
+			if (!label.hidden) matches++;
+		}
+		if (status) status.textContent = `${matches} matching options; ${values().length} selected`;
+	};
+	const report = () => {
+		draw();
+		root.emit("selection", { values: values() });
+	};
+	const setValues = (selected) => {
+		if (!Array.isArray(selected) || selected.some((value) => !boxes.some((box) => box.value === value))) throw new TypeError("values must contain known checkbox values");
+		boxes.forEach((box) => {
+			box.checked = selected.includes(box.value);
+		});
+		draw();
+	};
+	const clear = () => {
+		if (root.hasAttribute("disabled")) return;
+		boxes.filter(enabled).forEach((box) => {
+			if (box.checked) {
+				box.checked = false;
+				nativeInput(box);
+				nativeInput(box, "change");
+			}
+		});
+		report();
+	};
+	on(query, "input", draw);
+	on(query, "keydown", (event) => {
+		if (event.key === "Escape" && query.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			query.value = "";
+			draw();
+		}
+	});
+	on(root.querySelector("[data-clear-selection]"), "click", clear);
+	boxes.forEach((box) => on(box, "change", report));
+	on(boxes[0]?.form, "reset", () => queueMicrotask(() => {
+		if (!signal.aborted) draw();
+	}));
+	draw();
+	return {
+		clear,
+		get values() {
+			return values();
+		},
+		set values(selected) {
+			setValues(selected);
+		}
+	};
+}
+function repeater(root, { on }) {
+	const rows = root.querySelector("[data-rows]"), template = root.querySelector("template[data-row-template]"), addButton = root.querySelector("[data-add]"), status = root.querySelector("[data-repeater-status]");
+	if (!rows || !template) return {};
+	let sequence = Number(root.dataset.rowSequence ?? 0);
+	const maximum = () => {
+		const value = Number(root.getAttribute("max") ?? 10);
+		if (!Number.isInteger(value) || value < 1 || value > 100) throw new RangeError("max must be an integer from 1 to 100");
+		return value;
+	};
+	const children = () => [...rows.children];
+	const draw = (message) => {
+		const items = children();
+		if (addButton) addButton.disabled = root.hasAttribute("disabled") || items.length >= maximum();
+		const empty = root.querySelector("[data-empty]");
+		if (empty) empty.hidden = items.length !== 0;
+		items.forEach((row, index) => {
+			all(row, "[data-move]").forEach((button) => {
+				button.disabled = root.hasAttribute("disabled") || (Number(button.dataset.move) < 0 ? index === 0 : index === items.length - 1);
+			});
+		});
+		if (message && status) status.textContent = message;
+	};
+	const report = (message) => {
+		draw(message);
+		root.emit("rows", { ids: children().map((row) => row.id) });
+	};
+	const add = () => {
+		if (children().length >= maximum() || root.hasAttribute("disabled")) return null;
+		const row = template.content.firstElementChild.cloneNode(true);
+		const id = `${root.id}-row-${++sequence}`;
+		root.dataset.rowSequence = String(sequence);
+		row.id = id;
+		const ids = /* @__PURE__ */ new Map();
+		all(row, "[id]").forEach((node) => {
+			ids.set(node.id, `${id}-${node.id}`);
+			node.id = ids.get(node.id);
+		});
+		for (const node of all(row, "*")) for (const attr of [...node.attributes]) {
+			if (IDREFS.has(attr.name)) node.setAttribute(attr.name, attr.value.split(/\s+/).map((value) => ids.get(value) ?? value).join(" "));
+			if (attr.name === "name") node.name = `${id}[${attr.value}]`;
+		}
+		rows.append(row);
+		report("Row added.");
+		row.querySelector("input,select,textarea,button")?.focus();
+		return id;
+	};
+	const remove = (id) => {
+		const items = children(), index = items.findIndex((row) => row.id === id);
+		if (index < 0) throw new RangeError(`Unknown row: ${id}`);
+		if (root.hasAttribute("disabled")) return;
+		const hadFocus = items[index].contains(root.ownerDocument.activeElement);
+		items[index].remove();
+		report("Row removed.");
+		if (hadFocus) (children()[Math.min(index, children().length - 1)]?.querySelector("input,select,textarea,button") ?? addButton)?.focus();
+	};
+	const move = (id, direction) => {
+		if (![-1, 1].includes(direction)) throw new RangeError("direction must be -1 or 1");
+		const items = children(), index = items.findIndex((row) => row.id === id), target = index + direction;
+		if (index < 0) throw new RangeError(`Unknown row: ${id}`);
+		if (target < 0 || target >= items.length || root.hasAttribute("disabled")) return;
+		const focused = root.ownerDocument.activeElement;
+		if (direction < 0) rows.insertBefore(items[index], items[target]);
+		else rows.insertBefore(items[target], items[index]);
+		report(direction < 0 ? "Row moved up." : "Row moved down.");
+		if (items[index].contains(focused) && !focused.disabled) focused.focus();
+		else items[index].querySelector("input,select,textarea,button:not(:disabled)")?.focus();
+	};
+	on(addButton, "click", add);
+	on(rows, "click", (event) => {
+		const button = event.target.closest("button");
+		if (!button || !enabled(button)) return;
+		const row = children().find((item) => item.contains(button));
+		if (button.hasAttribute("data-remove")) remove(row.id);
+		else if (button.hasAttribute("data-move")) move(row.id, Number(button.dataset.move));
+	});
+	draw();
+	return {
+		add,
+		remove,
+		move,
+		get rowIds() {
+			return children().map((row) => row.id);
+		},
+		attributeChanged() {
+			draw();
+		}
+	};
+}
+function commandPalette(root, { on }) {
+	const dialog = root.querySelector("dialog"), input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]"), status = root.querySelector("[data-command-status]");
+	if (!dialog || !input || !list) return {};
+	let opener, active = null;
+	all(list, "[role=\"option\"]").forEach((option, index) => {
+		identify(root, option, `command-${index}`);
+		option.tabIndex = -1;
+	});
+	const options = () => all(list, "[role=\"option\"]").filter((option) => enabled(option) && !option.hidden);
+	const select = (option) => {
+		active = option;
+		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
+		if (option) {
+			input.setAttribute("aria-activedescendant", option.id);
+			option.scrollIntoView({ block: "nearest" });
+		} else input.removeAttribute("aria-activedescendant");
+	};
+	const filter = () => {
+		all(list, "[role=\"option\"]").forEach((option) => {
+			option.hidden = !option.textContent.toLocaleLowerCase().includes(input.value.toLocaleLowerCase());
+		});
+		select(options()[0] ?? null);
+		if (status) status.textContent = `${options().length} commands`;
+	};
+	const show = (trigger = root.ownerDocument.activeElement) => {
+		if (dialog.open || root.hasAttribute("disabled")) return;
+		opener = trigger;
+		dialog.showModal();
+		filter();
+		input.focus();
+	};
+	const close = () => {
+		if (dialog.open) dialog.close();
+	};
+	const invoke = (option) => {
+		if (!option || !enabled(option)) return;
+		const link = option.matches("a[href]") ? option : option.querySelector("a[href]");
+		const proceed = root.emit("command", {
+			action: option.dataset.action ?? option.id,
+			href: link?.getAttribute("href") ?? null
+		});
+		close();
+		if (proceed && link) root.ownerDocument.defaultView.location.assign(link.href);
+	};
+	on(root, "click", (event) => {
+		const trigger = event.target.closest("[data-open]");
+		if (trigger) show(trigger);
+		else if (event.target.closest("[data-close]")) close();
+		else {
+			const option = event.target.closest("[role=\"option\"]");
+			if (option) {
+				event.preventDefault();
+				invoke(option);
+			}
+		}
+	});
+	on(input, "input", filter);
+	on(input, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close();
+		} else if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			const items = options(), index = items.indexOf(active);
+			if (items.length) select(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			invoke(active);
+		}
+	});
+	on(dialog, "close", () => {
+		if (opener?.isConnected) opener.focus();
+	});
+	on(root.ownerDocument, "keydown", (event) => {
+		if (root.hasAttribute("shortcut") && (event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "k" && !event.defaultPrevented) {
+			event.preventDefault();
+			dialog.open ? close() : show();
+		}
+	});
+	return {
+		show,
+		close,
+		get open() {
+			return dialog.open;
+		},
+		set open(value) {
+			value ? show() : close();
+		},
+		cleanup: close
+	};
+}
+//#endregion
+export { tree as i, multiselect as n, repeater as r, commandPalette as t };
diff --git a/packages/ui/dist/copy/tree/runtime/chunks/advanced-DCpe8Ndv.js b/packages/ui/dist/copy/tree/runtime/chunks/advanced-DCpe8Ndv.js
deleted file mode 100644
index 3390a044c..000000000
--- a/packages/ui/dist/copy/tree/runtime/chunks/advanced-DCpe8Ndv.js
+++ /dev/null
@@ -1,340 +0,0 @@
-import { d as rove, f as visible, i as all, l as nativeInput, o as enabled, s as identify } from "./choice-Db_w_BOQ.js";
-import { t as IDREFS } from "./markup-DeQ4bEMR.js";
-//#region packages/ui/src/behaviors/advanced.js
-function tree(root, { on }) {
-	const treeRoot = root.querySelector("[role=\"tree\"]");
-	if (!treeRoot) return {};
-	const items = () => all(treeRoot, "[role=\"treeitem\"]");
-	const shown = () => items().filter(visible);
-	const group = (item) => [...item.children].find((node) => node.getAttribute("role") === "group");
-	const parent = (item) => item.parentElement.closest("[role=\"treeitem\"]");
-	items().forEach((item, index) => {
-		identify(root, item, `node-${index}`);
-		const children = group(item);
-		if (children) {
-			if (!item.hasAttribute("aria-expanded")) item.setAttribute("aria-expanded", "false");
-			children.hidden = item.getAttribute("aria-expanded") !== "true";
-		}
-	});
-	const select = (id) => {
-		const item = items().find((node) => node.id === id);
-		if (!item || !enabled(item)) throw new RangeError(`Unknown enabled tree item: ${id}`);
-		items().forEach((node) => node.setAttribute("aria-selected", String(node === item)));
-	};
-	const expand = (id, expanded = true) => {
-		const item = items().find((node) => node.id === id), children = item && group(item);
-		if (!children) throw new RangeError(`Unknown tree parent: ${id}`);
-		if (!expanded && children.contains(root.ownerDocument.activeElement)) rove(items(), items().indexOf(item));
-		item.setAttribute("aria-expanded", String(Boolean(expanded)));
-		children.hidden = !expanded;
-		const toggle = item.querySelector(":scope > [data-tree-label] > [data-tree-toggle]");
-		if (toggle) toggle.setAttribute("aria-label", expanded ? "Collapse" : "Expand");
-		root.emit("toggle", {
-			id,
-			expanded: Boolean(expanded)
-		});
-	};
-	const activate = (item) => {
-		if (enabled(item)) {
-			select(item.id);
-			root.emit("select", { id: item.id });
-		}
-	};
-	const initial = shown();
-	rove(initial, Math.max(0, initial.findIndex((item) => item.tabIndex === 0)), false);
-	on(treeRoot, "click", (event) => {
-		const item = event.target.closest("[role=\"treeitem\"]");
-		if (!item) return;
-		rove(shown(), shown().indexOf(item));
-		if (event.target.closest("[data-tree-toggle]") && group(item)) expand(item.id, item.getAttribute("aria-expanded") !== "true");
-		else activate(item);
-	});
-	on(treeRoot, "dblclick", (event) => {
-		const item = event.target.closest("[role=\"treeitem\"]");
-		if (item && group(item) && !event.target.closest("[data-tree-toggle]")) expand(item.id, item.getAttribute("aria-expanded") !== "true");
-	});
-	on(treeRoot, "keydown", (event) => {
-		const item = event.target.closest("[role=\"treeitem\"]");
-		if (!item) return;
-		const options = shown(), index = options.indexOf(item), rtl = getComputedStyle(treeRoot).direction === "rtl";
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
-			rove(options, next);
-		} else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
-			event.preventDefault();
-			if (group(item)) {
-				if (item.getAttribute("aria-expanded") !== "true") expand(item.id);
-				else rove(shown(), shown().indexOf(item) + 1);
-			}
-		} else if (event.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
-			event.preventDefault();
-			if (group(item) && item.getAttribute("aria-expanded") === "true") expand(item.id, false);
-			else if (parent(item)) rove(options, options.indexOf(parent(item)));
-		} else if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			activate(item);
-		} else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			const found = [...options.slice(index + 1), ...options.slice(0, index + 1)].find((node) => (node.querySelector(":scope > [data-tree-label]")?.textContent ?? node.firstChild?.textContent ?? "").trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-			if (found) {
-				event.preventDefault();
-				rove(options, options.indexOf(found));
-			}
-		}
-	});
-	return {
-		expand,
-		get selectedId() {
-			return items().find((item) => item.getAttribute("aria-selected") === "true")?.id ?? "";
-		},
-		set selectedId(id) {
-			select(id);
-		}
-	};
-}
-function multiselect(root, { on, signal }) {
-	const query = root.querySelector("[data-filter]"), status = root.querySelector("[data-selection-status]"), boxes = all(root, "input[type=\"checkbox\"]");
-	const values = () => boxes.filter((box) => box.checked).map((box) => box.value);
-	const draw = () => {
-		let matches = 0;
-		for (const box of boxes) {
-			const label = box.closest("label");
-			if (!label) continue;
-			label.hidden = !label.textContent.toLocaleLowerCase().includes((query?.value ?? "").toLocaleLowerCase());
-			if (!label.hidden) matches++;
-		}
-		if (status) status.textContent = `${matches} matching options; ${values().length} selected`;
-	};
-	const report = () => {
-		draw();
-		root.emit("selection", { values: values() });
-	};
-	const setValues = (selected) => {
-		if (!Array.isArray(selected) || selected.some((value) => !boxes.some((box) => box.value === value))) throw new TypeError("values must contain known checkbox values");
-		boxes.forEach((box) => {
-			box.checked = selected.includes(box.value);
-		});
-		draw();
-	};
-	const clear = () => {
-		if (root.hasAttribute("disabled")) return;
-		boxes.filter(enabled).forEach((box) => {
-			if (box.checked) {
-				box.checked = false;
-				nativeInput(box);
-				nativeInput(box, "change");
-			}
-		});
-		report();
-	};
-	on(query, "input", draw);
-	on(query, "keydown", (event) => {
-		if (event.key === "Escape" && query.value) {
-			event.preventDefault();
-			event.stopPropagation();
-			query.value = "";
-			draw();
-		}
-	});
-	on(root.querySelector("[data-clear-selection]"), "click", clear);
-	boxes.forEach((box) => on(box, "change", report));
-	on(boxes[0]?.form, "reset", () => queueMicrotask(() => {
-		if (!signal.aborted) draw();
-	}));
-	draw();
-	return {
-		clear,
-		get values() {
-			return values();
-		},
-		set values(selected) {
-			setValues(selected);
-		}
-	};
-}
-function repeater(root, { on }) {
-	const rows = root.querySelector("[data-rows]"), template = root.querySelector("template[data-row-template]"), addButton = root.querySelector("[data-add]"), status = root.querySelector("[data-repeater-status]");
-	if (!rows || !template) return {};
-	let sequence = Number(root.dataset.rowSequence ?? 0);
-	const maximum = () => {
-		const value = Number(root.getAttribute("max") ?? 10);
-		if (!Number.isInteger(value) || value < 1 || value > 100) throw new RangeError("max must be an integer from 1 to 100");
-		return value;
-	};
-	const children = () => [...rows.children];
-	const draw = (message) => {
-		const items = children();
-		if (addButton) addButton.disabled = root.hasAttribute("disabled") || items.length >= maximum();
-		const empty = root.querySelector("[data-empty]");
-		if (empty) empty.hidden = items.length !== 0;
-		items.forEach((row, index) => {
-			all(row, "[data-move]").forEach((button) => {
-				button.disabled = root.hasAttribute("disabled") || (Number(button.dataset.move) < 0 ? index === 0 : index === items.length - 1);
-			});
-		});
-		if (message && status) status.textContent = message;
-	};
-	const report = (message) => {
-		draw(message);
-		root.emit("rows", { ids: children().map((row) => row.id) });
-	};
-	const add = () => {
-		if (children().length >= maximum() || root.hasAttribute("disabled")) return null;
-		const row = template.content.firstElementChild.cloneNode(true);
-		const id = `${root.id}-row-${++sequence}`;
-		root.dataset.rowSequence = String(sequence);
-		row.id = id;
-		const ids = /* @__PURE__ */ new Map();
-		all(row, "[id]").forEach((node) => {
-			ids.set(node.id, `${id}-${node.id}`);
-			node.id = ids.get(node.id);
-		});
-		for (const node of all(row, "*")) for (const attr of [...node.attributes]) {
-			if (IDREFS.has(attr.name)) node.setAttribute(attr.name, attr.value.split(/\s+/).map((value) => ids.get(value) ?? value).join(" "));
-			if (attr.name === "name") node.name = `${id}[${attr.value}]`;
-		}
-		rows.append(row);
-		report("Row added.");
-		row.querySelector("input,select,textarea,button")?.focus();
-		return id;
-	};
-	const remove = (id) => {
-		const items = children(), index = items.findIndex((row) => row.id === id);
-		if (index < 0) throw new RangeError(`Unknown row: ${id}`);
-		if (root.hasAttribute("disabled")) return;
-		const hadFocus = items[index].contains(root.ownerDocument.activeElement);
-		items[index].remove();
-		report("Row removed.");
-		if (hadFocus) (children()[Math.min(index, children().length - 1)]?.querySelector("input,select,textarea,button") ?? addButton)?.focus();
-	};
-	const move = (id, direction) => {
-		if (![-1, 1].includes(direction)) throw new RangeError("direction must be -1 or 1");
-		const items = children(), index = items.findIndex((row) => row.id === id), target = index + direction;
-		if (index < 0) throw new RangeError(`Unknown row: ${id}`);
-		if (target < 0 || target >= items.length || root.hasAttribute("disabled")) return;
-		const focused = root.ownerDocument.activeElement;
-		if (direction < 0) rows.insertBefore(items[index], items[target]);
-		else rows.insertBefore(items[target], items[index]);
-		report(direction < 0 ? "Row moved up." : "Row moved down.");
-		if (items[index].contains(focused) && !focused.disabled) focused.focus();
-		else items[index].querySelector("input,select,textarea,button:not(:disabled)")?.focus();
-	};
-	on(addButton, "click", add);
-	on(rows, "click", (event) => {
-		const button = event.target.closest("button");
-		if (!button || !enabled(button)) return;
-		const row = children().find((item) => item.contains(button));
-		if (button.hasAttribute("data-remove")) remove(row.id);
-		else if (button.hasAttribute("data-move")) move(row.id, Number(button.dataset.move));
-	});
-	draw();
-	return {
-		add,
-		remove,
-		move,
-		get rowIds() {
-			return children().map((row) => row.id);
-		},
-		attributeChanged() {
-			draw();
-		}
-	};
-}
-function commandPalette(root, { on }) {
-	const dialog = root.querySelector("dialog"), input = root.querySelector("input[role=\"combobox\"]"), list = root.querySelector("[role=\"listbox\"]"), status = root.querySelector("[data-command-status]");
-	if (!dialog || !input || !list) return {};
-	let opener, active = null;
-	all(list, "[role=\"option\"]").forEach((option, index) => {
-		identify(root, option, `command-${index}`);
-		option.tabIndex = -1;
-	});
-	const options = () => all(list, "[role=\"option\"]").filter((option) => enabled(option) && !option.hidden);
-	const select = (option) => {
-		active = option;
-		all(list, "[role=\"option\"]").forEach((node) => node.setAttribute("aria-selected", String(node === option)));
-		if (option) {
-			input.setAttribute("aria-activedescendant", option.id);
-			option.scrollIntoView({ block: "nearest" });
-		} else input.removeAttribute("aria-activedescendant");
-	};
-	const filter = () => {
-		all(list, "[role=\"option\"]").forEach((option) => {
-			option.hidden = !option.textContent.toLocaleLowerCase().includes(input.value.toLocaleLowerCase());
-		});
-		select(options()[0] ?? null);
-		if (status) status.textContent = `${options().length} commands`;
-	};
-	const show = (trigger = root.ownerDocument.activeElement) => {
-		if (dialog.open || root.hasAttribute("disabled")) return;
-		opener = trigger;
-		dialog.showModal();
-		filter();
-		input.focus();
-	};
-	const close = () => {
-		if (dialog.open) dialog.close();
-	};
-	const invoke = (option) => {
-		if (!option || !enabled(option)) return;
-		const link = option.matches("a[href]") ? option : option.querySelector("a[href]");
-		const proceed = root.emit("command", {
-			action: option.dataset.action ?? option.id,
-			href: link?.getAttribute("href") ?? null
-		});
-		close();
-		if (proceed && link) root.ownerDocument.defaultView.location.assign(link.href);
-	};
-	on(root, "click", (event) => {
-		const trigger = event.target.closest("[data-open]");
-		if (trigger) show(trigger);
-		else if (event.target.closest("[data-close]")) close();
-		else {
-			const option = event.target.closest("[role=\"option\"]");
-			if (option) {
-				event.preventDefault();
-				invoke(option);
-			}
-		}
-	});
-	on(input, "input", filter);
-	on(input, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			close();
-		} else if (["ArrowDown", "ArrowUp"].includes(event.key)) {
-			event.preventDefault();
-			const items = options(), index = items.indexOf(active);
-			if (items.length) select(items[(index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]);
-		} else if (event.key === "Enter") {
-			event.preventDefault();
-			invoke(active);
-		}
-	});
-	on(dialog, "close", () => {
-		if (opener?.isConnected) opener.focus();
-	});
-	on(root.ownerDocument, "keydown", (event) => {
-		if (root.hasAttribute("shortcut") && (event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "k" && !event.defaultPrevented) {
-			event.preventDefault();
-			dialog.open ? close() : show();
-		}
-	});
-	return {
-		show,
-		close,
-		get open() {
-			return dialog.open;
-		},
-		set open(value) {
-			value ? show() : close();
-		},
-		cleanup: close
-	};
-}
-//#endregion
-export { tree as i, multiselect as n, repeater as r, commandPalette as t };
diff --git a/packages/ui/dist/copy/tree/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/tree/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/tree/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/tree/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/tree/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/tree/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/tree/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/tree/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/tree/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/tree/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/tree/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/tree/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/tree/runtime/components/tree.js b/packages/ui/dist/copy/tree/runtime/components/tree.js
index 8a8288b08..e0f6bd8da 100644
--- a/packages/ui/dist/copy/tree/runtime/components/tree.js
+++ b/packages/ui/dist/copy/tree/runtime/components/tree.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { i as tree } from "../chunks/advanced-DCpe8Ndv.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { i as tree } from "../chunks/advanced-CqBF0dSb.js";
 //#region .cache/ui-build/entries/components/tree.js
 var J3w1Tree = class extends J3w1Element {
 	static componentId = "tree";
 	static version = "4.0.0";
-	static implementationId = "sha256-MaBLx3mLOk+RW8kMweDInlVoWjSFctZly5Jz9BMRFRI=";
+	static implementationId = "sha256-8E6bGMMWEmhgjIAfuDs1+pxcabRicShQao3beIvcNBY=";
 	static connect = tree;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/tree/runtime/register/tree.js b/packages/ui/dist/copy/tree/runtime/register/tree.js
index c6b7d3d39..0ecee9bca 100644
--- a/packages/ui/dist/copy/tree/runtime/register/tree.js
+++ b/packages/ui/dist/copy/tree/runtime/register/tree.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Tree } from "../components/tree.js";
 //#region .cache/ui-build/entries/register/tree.js
 var element = registerElement("j3w1-tree", J3w1Tree);
diff --git a/packages/ui/dist/copy/tree/tokens.css b/packages/ui/dist/copy/tree/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/tree/tokens.css
+++ b/packages/ui/dist/copy/tree/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/copy/wizard/component.css b/packages/ui/dist/copy/wizard/component.css
index 94b6fe859..4edc706e8 100644
--- a/packages/ui/dist/copy/wizard/component.css
+++ b/packages/ui/dist/copy/wizard/component.css
@@ -8,7 +8,7 @@ j3w1-wizard {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-wizard, j3w1-wizard *, j3w1-wizard *::before, j3w1-wizard *::after { box-sizing: border-box; }
-j3w1-wizard button, j3w1-wizard input, j3w1-wizard select, j3w1-wizard textarea { font: inherit; }
+j3w1-wizard :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-wizard ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -52,8 +52,8 @@ j3w1-wizard .wizard-step-button {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   border-bottom: var(--border-width-emphasis) solid transparent;
@@ -119,8 +119,8 @@ j3w1-wizard .wizard-next {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   border: var(--border-width-default) solid;
   border-radius: var(--radius-none);
   font: inherit;
@@ -247,6 +247,66 @@ j3w1-wizard .wizard[aria-busy="true"] .wizard-next {
   }
 }
 
+j3w1-wizard .combobox-label,
+j3w1-wizard .dialog-field-label,
+j3w1-wizard .field-label,
+j3w1-wizard .fieldset-label,
+j3w1-wizard .file-input-label,
+j3w1-wizard .number-field-label,
+j3w1-wizard .search-field-label,
+j3w1-wizard .select-label,
+j3w1-wizard .text-field-label,
+j3w1-wizard .textarea-label,
+j3w1-wizard .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-wizard .combobox-help,
+j3w1-wizard .date-picker-help,
+j3w1-wizard .dialog-field-help,
+j3w1-wizard .fieldset-help,
+j3w1-wizard .file-input-help,
+j3w1-wizard .number-field-help,
+j3w1-wizard .search-field-help,
+j3w1-wizard .select-help,
+j3w1-wizard .text-field-help,
+j3w1-wizard .textarea-help,
+j3w1-wizard .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-wizard .combobox-message,
+j3w1-wizard .date-picker-message,
+j3w1-wizard .file-input-message,
+j3w1-wizard .number-field-message,
+j3w1-wizard .radio-group-message,
+j3w1-wizard .select-message,
+j3w1-wizard .text-field-message,
+j3w1-wizard .textarea-message,
+j3w1-wizard .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-wizard .combobox-root,
+j3w1-wizard .date-picker-root,
+j3w1-wizard .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-wizard .text-field {
   position: relative;
   display: grid;
@@ -256,12 +316,6 @@ j3w1-wizard .text-field {
   color: var(--color-text-default);
 }
 
-j3w1-wizard .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-wizard .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -271,7 +325,7 @@ j3w1-wizard .text-field-root {
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -280,7 +334,7 @@ j3w1-wizard .text-field-root {
 j3w1-wizard .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -356,21 +410,6 @@ j3w1-wizard .text-field-loading {
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-j3w1-wizard .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-wizard .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-wizard .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/copy/wizard/index.html b/packages/ui/dist/copy/wizard/index.html
index 5785d91a6..264595235 100644
--- a/packages/ui/dist/copy/wizard/index.html
+++ b/packages/ui/dist/copy/wizard/index.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Wizard · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-wizard id="example-wizard-numbered"><div class="wizard" aria-label="Set up a local project"><ol class="wizard-steps"><li class="wizard-step"><button class="wizard-step-button" type="button" aria-current="step"><span class="wizard-step-marker" aria-hidden="true">1</span><span class="wizard-step-name">Project</span></button></li><li class="wizard-step"><button class="wizard-step-button" type="button" disabled=""><span class="wizard-step-marker" aria-hidden="true">2</span><span class="wizard-step-name">Preferences</span></button></li><li class="wizard-step"><button class="wizard-step-button" type="button" disabled=""><span class="wizard-step-marker" aria-hidden="true">3</span><span class="wizard-step-name">Review</span></button></li></ol><section class="wizard-panel" aria-labelledby="example-wizard-numbered-wizard-title-0"><h3 class="wizard-title" id="example-wizard-numbered-wizard-title-0">Step 1 of 3: Project</h3><label for="example-wizard-numbered-wizard-value-0">Project name</label><input class="text-field-input" id="example-wizard-numbered-wizard-value-0" name="example-wizard-numbered-step-0" required=""></section><section class="wizard-panel" aria-labelledby="example-wizard-numbered-wizard-title-1" hidden=""><h3 class="wizard-title" id="example-wizard-numbered-wizard-title-1">Step 2 of 3: Preferences</h3><label for="example-wizard-numbered-wizard-value-1">Preferences name</label><input class="text-field-input" id="example-wizard-numbered-wizard-value-1" name="example-wizard-numbered-step-1" required=""></section><section class="wizard-panel" aria-labelledby="example-wizard-numbered-wizard-title-2" hidden=""><h3 class="wizard-title" id="example-wizard-numbered-wizard-title-2">Step 3 of 3: Review</h3><p class="wizard-text">All previous values remain available. Complete requests host handling; it does not send a network request.</p></section><div class="wizard-actions"><button class="wizard-back" type="button">Back</button><button class="wizard-next" type="button">Next / complete</button></div></div></j3w1-wizard><script type="module" src="./runtime/register/wizard.js"></script></body></html>
+<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Wizard · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body><j3w1-wizard id="example-wizard-numbered"><div class="wizard" aria-label="Set up a local project"><ol class="wizard-steps"><li class="wizard-step"><button class="wizard-step-button" type="button" aria-current="step"><span class="wizard-step-marker" aria-hidden="true">1</span><span class="wizard-step-name">Project</span></button></li><li class="wizard-step"><button class="wizard-step-button" type="button" disabled=""><span class="wizard-step-marker" aria-hidden="true">2</span><span class="wizard-step-name">Preferences</span></button></li><li class="wizard-step"><button class="wizard-step-button" type="button" disabled=""><span class="wizard-step-marker" aria-hidden="true">3</span><span class="wizard-step-name">Review</span></button></li></ol><section class="wizard-panel" aria-labelledby="example-wizard-numbered-wizard-title-0"><h3 class="wizard-title" id="example-wizard-numbered-wizard-title-0">Step 1 of 3: Project</h3><label for="example-wizard-numbered-wizard-value-0">Project name</label><input class="text-field-input" id="example-wizard-numbered-wizard-value-0" name="example-wizard-numbered-step-0" required=""></section><section class="wizard-panel" aria-labelledby="example-wizard-numbered-wizard-title-1" hidden=""><h3 class="wizard-title" id="example-wizard-numbered-wizard-title-1">Step 2 of 3: Preferences</h3><label for="example-wizard-numbered-wizard-value-1">Preferences name</label><input class="text-field-input" id="example-wizard-numbered-wizard-value-1" name="example-wizard-numbered-step-1" required=""></section><section class="wizard-panel" aria-labelledby="example-wizard-numbered-wizard-title-2" hidden=""><h3 class="wizard-title" id="example-wizard-numbered-wizard-title-2">Step 3 of 3: Review</h3><p class="wizard-text">All previous values remain available. Complete requests host handling; it does not send a network request.</p></section><div class="wizard-actions"><button class="wizard-back" type="button">Back</button><button class="wizard-next" type="button">Next / complete</button></div></div></j3w1-wizard><script type="module" src="./runtime/register/wizard.js"></script></body></html>
diff --git a/packages/ui/dist/copy/wizard/manifest.json b/packages/ui/dist/copy/wizard/manifest.json
index 955453147..f79f13ae8 100644
--- a/packages/ui/dist/copy/wizard/manifest.json
+++ b/packages/ui/dist/copy/wizard/manifest.json
@@ -5,22 +5,22 @@
   "contract": "https://github.com/j3w1/theme/blob/v4.0.0/spec/components/wizard.md",
   "dependencies": [
     "register/wizard.js",
-    "chunks/element-C1XeXVYC.js",
-    "chunks/choice-Db_w_BOQ.js",
+    "chunks/element-Dovcr9Ky.js",
+    "chunks/choice-B7mo5Eq3.js",
     "components/wizard.js",
-    "chunks/forms-BT3z7lNC.js"
+    "chunks/forms-CE_hP1hg.js"
   ],
   "files": {
-    "runtime/register/wizard.js": "sha256-8JwKlLD2lG42fsQh0+nf+OZ0pvg6Vy7Uexn7bdkWEe0=",
-    "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-    "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-    "runtime/components/wizard.js": "sha256-WMaA9QqPtqe0dUBowMDw++tHyL+HZFO8+VoCJpn+HXM=",
-    "runtime/chunks/forms-BT3z7lNC.js": "sha256-Txmae07dWLj1H/FL869U0Kv84TQxzpdFeOg0g8zGK6I=",
-    "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-    "component.css": "sha256-TIsUn3die+vDqK/B4+HqIiSctLsbfAW5EflsX5y1oJA=",
+    "runtime/register/wizard.js": "sha256-j1MmLx8Vq3Ou/t3+hX/UD2AWZq1D7MRHwwvCLStmpFw=",
+    "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+    "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+    "runtime/components/wizard.js": "sha256-iMzWia0NibbI8OZR3lt0VNBXQXq/OjK7Mz8n9BHkt5c=",
+    "runtime/chunks/forms-CE_hP1hg.js": "sha256-uOnoMuSkUbm9C/GfR+PDLYCykyHOQ1Ni7g59c4YMOS0=",
+    "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+    "component.css": "sha256-dbs7z77ZMyB5via+UcpI8DKAl1gPwQO5PnMB4GL8ANA=",
     "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
     "element.html": "sha256-T5EJ8DcqnD1rFEoCwvdUpmBCh0hH9dJSmq5oOkC+mi4=",
-    "index.html": "sha256-x7w0JHEaRfh3sRM0TmJcKmqI73CDTfRHzbgURIS3m80=",
+    "index.html": "sha256-iWmkWU3qxvtjRPPPDLUFT5Sd9bw1krZug4ntOGEYRIU=",
     "README.md": "sha256-B9klMh35GlqO5l2mxI77I6x2Gwfl8AMNSH6P+up7GdY="
   }
 }
diff --git a/packages/ui/dist/copy/wizard/runtime/chunks/choice-B7mo5Eq3.js b/packages/ui/dist/copy/wizard/runtime/chunks/choice-B7mo5Eq3.js
new file mode 100644
index 000000000..849c80b8b
--- /dev/null
+++ b/packages/ui/dist/copy/wizard/runtime/chunks/choice-B7mo5Eq3.js
@@ -0,0 +1,938 @@
+//#region packages/ui/src/internal/dom.js
+var all = (root, selector) => [...root.querySelectorAll(selector)];
+var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
+var visible = (node) => !node.closest("[hidden]");
+function controlLabelText(labels) {
+	const text = (node) => {
+		if (node.nodeType === 3) return node.textContent;
+		if (node.nodeType !== 1) return "";
+		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
+		const style = node.ownerDocument.defaultView.getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return "";
+		return [...node.childNodes].map(text).join("");
+	};
+	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
+}
+function announce(root, message) {
+	let status = root.querySelector("[data-j3w1-status]");
+	if (!status) {
+		status = root.ownerDocument.createElement("p");
+		status.dataset.j3w1Status = "";
+		status.className = "j3w1-visually-hidden";
+		status.setAttribute("role", "status");
+		root.append(status);
+	}
+	status.textContent = message;
+}
+function identify(root, node, suffix) {
+	if (node && !node.id) node.id = `${root.id}-${suffix}`;
+	return node?.id;
+}
+function nativeInput(input, type = "input") {
+	input.dispatchEvent(new Event(type, { bubbles: true }));
+}
+function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+	if (key === "Home") return 0;
+	if (key === "End") return length - 1;
+	const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+	return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+function rove(items, index, focus = true) {
+	if (!items.length) return null;
+	const next = items[(index + items.length) % items.length];
+	items.forEach((item) => {
+		item.tabIndex = item === next ? 0 : -1;
+	});
+	if (focus) next.focus();
+	return next;
+}
+function make(root, tag, attrs = {}, text) {
+	const node = root.ownerDocument.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+	if (text !== void 0) node.textContent = String(text);
+	return node;
+}
+function makeIcon(root, d, attrs = {}) {
+	const ns = "http://www.w3.org/2000/svg";
+	const svg = root.ownerDocument.createElementNS(ns, "svg");
+	for (const [key, value] of Object.entries({
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		"aria-hidden": "true",
+		focusable: "false",
+		...attrs
+	})) svg.setAttribute(key, String(value));
+	const path = root.ownerDocument.createElementNS(ns, "path");
+	for (const [key, value] of Object.entries({
+		d,
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	})) path.setAttribute(key, value);
+	svg.append(path);
+	return svg;
+}
+function place(trigger, popup) {
+	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
+	const doc = trigger.ownerDocument.documentElement;
+	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
+	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
+	Object.assign(popup.style, {
+		position: "fixed",
+		insetInlineStart: "auto",
+		insetInlineEnd: "auto",
+		left: `${left}px`,
+		top: `${top}px`,
+		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
+		overflowY: "auto"
+	});
+}
+//#endregion
+//#region packages/ui/src/internal/temporal.js
+var instances = /* @__PURE__ */ new WeakMap();
+var sequence$1 = 0;
+function mountTemporal(input) {
+	if (instances.has(input)) return instances.get(input);
+	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
+	const numeric = (value) => {
+		if (date) {
+			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
+			const stamp = Date.parse(`${value}T00:00:00Z`);
+			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
+		}
+		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
+		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
+		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
+	};
+	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
+	const constraint = (value) => {
+		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
+		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
+		if (!date && min > max) {
+			if (number < min && number > max) return "Choose a time within the allowed range.";
+		} else if (number < min || number > max) return "Choose a value within the allowed range.";
+		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
+		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
+		return "";
+	};
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	let id;
+	do
+		id = `j3w1-temporal-${++sequence$1}`;
+	while (input.ownerDocument.getElementById(`${id}-input`));
+	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
+	const editor = make(input, "input", {
+		id: `${id}-input`,
+		type: "text",
+		class: "j3w1-temporal-input",
+		autocomplete: "off",
+		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
+		inputmode: "text"
+	});
+	const message = make(input, "span", {
+		id: `${id}-error`,
+		class: "j3w1-choice-error",
+		role: "status",
+		hidden: ""
+	});
+	const popup = make(input, "span", {
+		class: "j3w1-calendar",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": "Choose date",
+		popover: "manual",
+		hidden: ""
+	});
+	const opener = make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": date ? "Open calendar" : "Increase time"
+	}, date ? "▦" : "+");
+	row.append(editor, opener);
+	const decrease = date ? null : make(input, "button", {
+		type: "button",
+		class: "j3w1-temporal-action",
+		"aria-label": "Decrease time"
+	}, "−");
+	if (decrease) row.append(decrease);
+	shell.append(row, message);
+	if (date) shell.append(popup);
+	input.after(shell);
+	const labels = [...input.labels ?? []];
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = editor.id;
+		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const attributes = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, input.getAttribute(name)]));
+	input.hidden = true;
+	input.setAttribute("aria-hidden", "true");
+	input.tabIndex = -1;
+	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
+	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
+	const labelText = () => controlLabelText(labels);
+	const close = (focus = false) => {
+		if (popup.matches(":popover-open")) popup.hidePopover();
+		popup.hidden = true;
+		open = false;
+		opener.setAttribute("aria-expanded", "false");
+		if (focus) editor.focus();
+	};
+	const sync = () => {
+		if (abort.signal.aborted) return;
+		if (!writing) editor.value = input.value;
+		editor.disabled = input.matches(":disabled");
+		editor.readOnly = input.readOnly;
+		editor.required = input.required;
+		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
+		else editor.removeAttribute("form");
+		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
+		if (decrease) decrease.disabled = opener.disabled;
+		if (opener.disabled) close();
+		const labelled = input.getAttribute("aria-labelledby");
+		if (labelled) {
+			editor.setAttribute("aria-labelledby", labelled);
+			editor.removeAttribute("aria-label");
+		} else {
+			editor.removeAttribute("aria-labelledby");
+			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
+		}
+		if (!nativeTemporal) {
+			if (input.validationMessage === fallbackError) input.setCustomValidity("");
+			fallbackError = constraint(editor.value);
+			if (!input.validationMessage) input.setCustomValidity(fallbackError);
+		}
+		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
+		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
+		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
+		editor.setAttribute("aria-invalid", String(invalid));
+		message.hidden = !invalid;
+		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
+		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
+		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
+			class: "j3w1-temporal-hint",
+			id: `${id}-hint`
+		}, described[1]));
+		editor.setAttribute("aria-describedby", [
+			described[0],
+			`${id}-hint`,
+			invalid ? message.id : ""
+		].filter(Boolean).join(" "));
+	};
+	const write = (value, change = false) => {
+		writing = true;
+		editor.value = value;
+		input.value = Number.isFinite(numeric(value)) ? value : "";
+		nativeInput(input);
+		if (change) {
+			touched = true;
+			nativeInput(input, "change");
+		}
+		sync();
+		writing = false;
+	};
+	const enabledDay = (value) => !constraint(value);
+	const draw = () => {
+		popup.replaceChildren();
+		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
+			type: "button",
+			"data-month": "-1",
+			"aria-label": "Previous month"
+		}, "←"), next = make(input, "button", {
+			type: "button",
+			"data-month": "1",
+			"aria-label": "Next month"
+		}, "→");
+		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
+			month: "long",
+			year: "numeric"
+		}));
+		heading.append(previous, title, next);
+		popup.append(heading);
+		const grid = make(input, "span", {
+			role: "grid",
+			"aria-labelledby": title.id,
+			class: "j3w1-calendar-grid"
+		});
+		const header = make(input, "span", {
+			role: "row",
+			class: "j3w1-calendar-week"
+		});
+		for (const day of [
+			"Su",
+			"Mo",
+			"Tu",
+			"We",
+			"Th",
+			"Fr",
+			"Sa"
+		]) header.append(make(input, "span", { role: "columnheader" }, day));
+		grid.append(header);
+		const first = new Date(view);
+		first.setDate(1);
+		const last = new Date(first);
+		last.setMonth(last.getMonth() + 1);
+		last.setDate(0);
+		let week;
+		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
+			if (index % 7 === 0) {
+				week = make(input, "span", {
+					role: "row",
+					class: "j3w1-calendar-week"
+				});
+				grid.append(week);
+			}
+			const cell = make(input, "span", { role: "gridcell" });
+			week.append(cell);
+			const day = index - first.getDay() + 1;
+			if (day < 1) continue;
+			const current = new Date(first);
+			current.setDate(day);
+			const value = format(current), button = make(input, "button", {
+				type: "button",
+				"data-date": value,
+				tabindex: value === activeDay ? "0" : "-1",
+				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
+				"aria-pressed": String(value === input.value)
+			}, day);
+			button.disabled = !enabledDay(value);
+			cell.append(button);
+		}
+		popup.append(grid);
+		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
+			const first = popup.querySelector("button[data-date]:not(:disabled)");
+			if (first) {
+				first.tabIndex = 0;
+				activeDay = first.dataset.date;
+			}
+		}
+		if (open) place(opener, popup);
+	};
+	const show = () => {
+		if (opener.disabled) return;
+		const selected = parse(input.value);
+		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
+		activeDay = format(view);
+		open = true;
+		popup.hidden = false;
+		opener.setAttribute("aria-expanded", "true");
+		draw();
+		if (typeof popup.showPopover === "function") popup.showPopover();
+		place(opener, popup);
+		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
+	};
+	if (date) {
+		opener.setAttribute("aria-haspopup", "dialog");
+		opener.setAttribute("aria-expanded", "false");
+		on(opener, "click", () => open ? close(true) : show());
+	} else {
+		const step = (amount) => {
+			if (nativeTemporal) {
+				amount > 0 ? input.stepUp() : input.stepDown();
+				write(input.value, true);
+			} else {
+				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
+				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
+				if (value >= 0 && value < 86400) {
+					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
+					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
+					if (!constraint(text)) write(text, true);
+				}
+			}
+			editor.focus();
+		};
+		on(opener, "click", () => step(1));
+		on(decrease, "click", () => step(-1));
+	}
+	on(editor, "input", (event) => {
+		event.stopPropagation();
+		write(editor.value);
+	});
+	on(editor, "change", (event) => {
+		event.stopPropagation();
+		write(editor.value, true);
+	});
+	for (const control of [editor, input]) on(control, "invalid", (event) => {
+		event.preventDefault();
+		touched = true;
+		writing = true;
+		sync();
+		writing = false;
+		editor.focus();
+	});
+	on(input, "input", () => {
+		if (!writing) sync();
+	});
+	on(input, "change", () => {
+		if (!writing) sync();
+	});
+	on(popup, "click", (event) => {
+		const day = event.target.closest("[data-date]");
+		if (day && !day.disabled) {
+			write(day.dataset.date, true);
+			close(true);
+		}
+		const month = event.target.closest("[data-month]");
+		if (month) {
+			view.setDate(1);
+			view.setMonth(view.getMonth() + Number(month.dataset.month));
+			draw();
+			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
+		}
+	});
+	on(popup, "keydown", (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+			return;
+		}
+		const button = event.target.closest("[data-date]");
+		if (!button) return;
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[event.key];
+		if (delta !== void 0 || [
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			event.preventDefault();
+			const next = parse(button.dataset.date);
+			if (delta !== void 0) next.setDate(next.getDate() + delta);
+			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
+			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
+			else {
+				const day = next.getDate();
+				next.setDate(1);
+				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
+				const end = new Date(next);
+				end.setMonth(end.getMonth() + 1);
+				end.setDate(0);
+				next.setDate(Math.min(day, end.getDate()));
+			}
+			if (enabledDay(format(next))) {
+				view = next;
+				activeDay = format(next);
+				draw();
+				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
+			}
+		}
+	});
+	on(editor, "keydown", (event) => {
+		if (date && event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		}
+	});
+	on(input.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(input.ownerDocument.activeElement)) close();
+	}));
+	on(input.ownerDocument, "reset", (event) => {
+		if (event.target === input.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				touched = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(input.ownerDocument.defaultView, "resize", () => {
+		if (open) place(opener, popup);
+	});
+	const observer = new MutationObserver(sync);
+	observer.observe(input, {
+		attributes: true,
+		attributeFilter: [
+			"value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"readonly",
+			"required",
+			"form",
+			"aria-invalid",
+			"aria-describedby",
+			"aria-label",
+			"aria-labelledby"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
+	if (!Object.hasOwn(input, "value")) {
+		Object.defineProperty(input, "value", {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(value) {
+				descriptor.set.call(this, value);
+				if (!writing) sync();
+			}
+		});
+		restore.push(() => delete input.value);
+	}
+	if (!Object.hasOwn(input, "focus")) {
+		Object.defineProperty(input, "focus", {
+			configurable: true,
+			value: (options) => editor.focus(options)
+		});
+		restore.push(() => delete input.focus);
+	}
+	sync();
+	const api = {
+		sync,
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restore.forEach((fn) => fn());
+			shell.remove();
+			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
+			instances.delete(input);
+		}
+	};
+	instances.set(input, api);
+	return api;
+}
+//#endregion
+//#region packages/ui/src/internal/choice.js
+var mounted = /* @__PURE__ */ new WeakMap();
+var sequence = 0;
+function mountChoice(select) {
+	if (mounted.has(select)) return mounted.get(select);
+	const abort = new AbortController(), restorers = [];
+	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
+		...options,
+		signal: abort.signal
+	});
+	const multiple = select.multiple;
+	let id;
+	do
+		id = `j3w1-choice-${++sequence}`;
+	while (select.ownerDocument.getElementById(`${id}-control`));
+	const shell = make(select, "span", {
+		class: "j3w1-choice",
+		"data-choice-for": select.id
+	});
+	const list = make(select, "span", {
+		class: "j3w1-choice-list",
+		id: `${id}-list`,
+		role: "listbox"
+	});
+	const control = multiple ? list : make(select, "button", {
+		class: "j3w1-choice-trigger",
+		type: "button",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-controls": list.id,
+		"aria-expanded": "false"
+	});
+	const value = make(select, "span", { class: "j3w1-choice-value" });
+	const message = make(select, "span", {
+		class: "j3w1-choice-error",
+		id: `${id}-error`,
+		role: "status",
+		hidden: ""
+	});
+	if (multiple) {
+		list.setAttribute("aria-multiselectable", "true");
+		list.tabIndex = 0;
+	} else {
+		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
+		list.hidden = true;
+		list.setAttribute("popover", "manual");
+		shell.append(control);
+	}
+	shell.append(list, message);
+	select.after(shell);
+	const saved = new Map([
+		"hidden",
+		"aria-hidden",
+		"tabindex"
+	].map((name) => [name, select.getAttribute(name)]));
+	select.hidden = true;
+	select.setAttribute("aria-hidden", "true");
+	select.tabIndex = -1;
+	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
+	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
+	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
+	const labels = [...select.labels ?? []];
+	control.id = `${id}-control`;
+	for (const label of labels) {
+		const previous = label.getAttribute("for");
+		label.htmlFor = control.id;
+		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
+	}
+	const labelText = () => controlLabelText(labels);
+	const close = () => {
+		if (multiple) return;
+		if (list.matches(":popover-open")) list.hidePopover();
+		list.hidden = true;
+		open = false;
+		control.setAttribute("aria-expanded", "false");
+		control.removeAttribute("aria-activedescendant");
+	};
+	const focus = (options) => {
+		if (!select.matches(":disabled")) control.focus(options);
+	};
+	const mark = (index) => {
+		active = index;
+		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
+		if (items[active] && (multiple || open)) {
+			control.setAttribute("aria-activedescendant", items[active].node.id);
+			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
+		} else control.removeAttribute("aria-activedescendant");
+	};
+	const sync = () => {
+		if (updating || abort.signal.aborted) return;
+		const off = select.matches(":disabled");
+		control.setAttribute("aria-disabled", String(off));
+		control.tabIndex = off ? -1 : 0;
+		if (!multiple) control.disabled = off;
+		if (off) close();
+		const labelled = select.getAttribute("aria-labelledby");
+		if (labelled) {
+			control.setAttribute("aria-labelledby", labelled);
+			control.removeAttribute("aria-label");
+		} else {
+			control.removeAttribute("aria-labelledby");
+			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
+		}
+		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
+		control.setAttribute("aria-required", String(select.required));
+		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
+		control.setAttribute("aria-invalid", String(bad));
+		message.hidden = !bad;
+		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
+		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
+		if (described) control.setAttribute("aria-describedby", described);
+		else control.removeAttribute("aria-describedby");
+		items.forEach(({ option, node }) => {
+			node.setAttribute("aria-selected", String(option.selected));
+			node.setAttribute("aria-disabled", String(disabled(option)));
+			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
+		});
+		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
+		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
+	};
+	const hook = (object, name, changed) => {
+		if (Object.getOwnPropertyDescriptor(object, name)) return;
+		let proto = Object.getPrototypeOf(object), descriptor;
+		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
+		if (!descriptor?.set || !descriptor.get) return;
+		Object.defineProperty(object, name, {
+			configurable: true,
+			get() {
+				return descriptor.get.call(this);
+			},
+			set(next) {
+				descriptor.set.call(this, next);
+				changed();
+			}
+		});
+		restorers.push(() => delete object[name]);
+	};
+	const watched = /* @__PURE__ */ new WeakSet();
+	const rebuild = () => {
+		const current = items[active]?.option;
+		list.replaceChildren();
+		items = [];
+		for (const child of select.children) {
+			let parent = list;
+			if (child.tagName === "OPTGROUP") {
+				parent = make(select, "span", {
+					role: "group",
+					"aria-label": child.label,
+					class: "j3w1-choice-group"
+				});
+				parent.append(make(select, "span", {
+					class: "j3w1-choice-group-label",
+					"aria-hidden": "true"
+				}, child.label));
+				list.append(parent);
+			}
+			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
+				const node = make(select, "span", {
+					class: "j3w1-choice-option",
+					role: "option",
+					id: `${id}-option-${items.length}`,
+					"data-choice-value": option.value
+				});
+				node.append(make(select, "span", {
+					class: "j3w1-choice-check",
+					"aria-hidden": "true"
+				}, "✓"), make(select, "span", {}, option.label));
+				parent.append(node);
+				items.push({
+					option,
+					node
+				});
+				if (!watched.has(option)) {
+					hook(option, "selected", sync);
+					watched.add(option);
+				}
+			}
+		}
+		active = items.findIndex((item) => item.option === current);
+		sync();
+	};
+	const show = () => {
+		if (multiple || select.matches(":disabled")) return;
+		sync();
+		list.hidden = false;
+		open = true;
+		control.setAttribute("aria-expanded", "true");
+		list.style.width = `${control.getBoundingClientRect().width}px`;
+		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
+		place(control, list);
+		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
+	};
+	const commit = (index, range = false) => {
+		const item = items[index];
+		if (!item || disabled(item.option) || select.matches(":disabled")) return;
+		updating = true;
+		if (multiple) {
+			if (range && anchor >= 0) items.forEach((entry, i) => {
+				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
+			});
+			else {
+				item.option.selected = !item.option.selected;
+				anchor = index;
+			}
+		} else select.selectedIndex = [...select.options].indexOf(item.option);
+		updating = false;
+		invalid = true;
+		sync();
+		if (!multiple) close();
+		nativeInput(select);
+		nativeInput(select, "change");
+		if (control.isConnected) focus();
+	};
+	on(control, "keydown", (event) => {
+		if (select.matches(":disabled")) return;
+		const indices = usable();
+		if (event.key === "Escape") {
+			if (open) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			}
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			return;
+		}
+		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
+			event.preventDefault();
+			updating = true;
+			const all = indices.every((i) => items[i].option.selected);
+			indices.forEach((i) => {
+				items[i].option.selected = !all;
+			});
+			updating = false;
+			sync();
+			nativeInput(select);
+			nativeInput(select, "change");
+			return;
+		}
+		if (["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			else commit(active, event.shiftKey);
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			close();
+			return;
+		}
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const wasOpen = open;
+			if (!multiple && !open) show();
+			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
+			const position = indices.indexOf(active);
+			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
+			mark(next);
+			if (multiple && event.shiftKey) commit(next, true);
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!multiple && !open) show();
+			const now = Date.now();
+			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
+			typedAt = now;
+			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
+			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
+			if (next !== void 0) mark(next);
+		}
+	});
+	if (!multiple) on(control, "click", (event) => {
+		event.preventDefault();
+		focus();
+		open ? close() : show();
+	});
+	on(list, "pointerdown", (event) => event.preventDefault());
+	on(list, "click", (event) => {
+		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
+		if (index < 0) return;
+		event.preventDefault();
+		mark(index);
+		commit(index, event.shiftKey);
+	});
+	on(select, "input", sync);
+	on(select, "change", sync);
+	on(select, "invalid", (event) => {
+		event.preventDefault();
+		invalid = true;
+		sync();
+		focus();
+	});
+	on(select.ownerDocument, "reset", (event) => {
+		if (event.target === select.form) queueMicrotask(() => {
+			if (!event.defaultPrevented) {
+				invalid = false;
+				close();
+				sync();
+			}
+		});
+	}, { capture: true });
+	on(select.ownerDocument, "pointerdown", (event) => {
+		if (!shell.contains(event.target)) close();
+	});
+	on(shell, "focusout", () => queueMicrotask(() => {
+		if (!shell.contains(select.ownerDocument.activeElement)) close();
+	}));
+	on(select.ownerDocument.defaultView, "resize", () => {
+		if (open) place(control, list);
+	});
+	on(select.ownerDocument, "scroll", (event) => {
+		if (open && !list.contains(event.target)) place(control, list);
+	}, { capture: true });
+	for (const label of labels) on(label, "click", (event) => {
+		if (!shell.contains(event.target)) {
+			event.preventDefault();
+			focus();
+		}
+	});
+	const observer = new MutationObserver(rebuild);
+	observer.observe(select, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"disabled",
+			"required",
+			"label",
+			"value",
+			"selected",
+			"hidden",
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby",
+			"aria-invalid"
+		]
+	});
+	const fieldsets = new MutationObserver(sync);
+	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
+		attributes: true,
+		attributeFilter: ["disabled"]
+	});
+	hook(select, "value", sync);
+	hook(select, "selectedIndex", sync);
+	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
+		Object.defineProperty(select, "focus", {
+			configurable: true,
+			value: focus
+		});
+		restorers.push(() => delete select.focus);
+	}
+	rebuild();
+	const api = {
+		sync,
+		focus,
+		show,
+		hide: close,
+		get open() {
+			return open;
+		},
+		destroy() {
+			if (abort.signal.aborted) return;
+			close();
+			abort.abort();
+			observer.disconnect();
+			fieldsets.disconnect();
+			restorers.forEach((restore) => restore());
+			shell.remove();
+			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
+			mounted.delete(select);
+		}
+	};
+	mounted.set(select, api);
+	return api;
+}
+function enhanceControls(root) {
+	const choices = /* @__PURE__ */ new Map();
+	root.setAttribute("data-j3w1-controls", "");
+	const refresh = () => {
+		for (const [select, api] of choices) if (!root.contains(select)) {
+			api.destroy();
+			choices.delete(select);
+		}
+		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
+			let owner = select.parentElement;
+			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
+			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
+		}
+	};
+	const observer = new MutationObserver(refresh);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	refresh();
+	return {
+		refresh,
+		destroy() {
+			observer.disconnect();
+			choices.forEach((api) => api.destroy());
+			choices.clear();
+			root.removeAttribute("data-j3w1-controls");
+		}
+	};
+}
+//#endregion
+export { announce as a, keyIndex as c, place as d, rove as f, all as i, make as l, mountChoice as n, enabled as o, visible as p, mountTemporal as r, identify as s, enhanceControls as t, nativeInput as u };
diff --git a/packages/ui/dist/copy/wizard/runtime/chunks/choice-Db_w_BOQ.js b/packages/ui/dist/copy/wizard/runtime/chunks/choice-Db_w_BOQ.js
deleted file mode 100644
index aebc478b6..000000000
--- a/packages/ui/dist/copy/wizard/runtime/chunks/choice-Db_w_BOQ.js
+++ /dev/null
@@ -1,932 +0,0 @@
-//#region packages/ui/src/internal/dom.js
-var all = (root, selector) => [...root.querySelectorAll(selector)];
-var enabled = (node) => !node.matches(":disabled") && node.getAttribute("aria-disabled") !== "true";
-var visible = (node) => !node.closest("[hidden]");
-function controlLabelText(labels) {
-	const text = (node) => {
-		if (node.nodeType === 3) return node.textContent;
-		if (node.nodeType !== 1) return "";
-		if (node.matches("input,select,textarea,.j3w1-choice,.j3w1-temporal,[aria-hidden=\"true\"],[hidden]")) return "";
-		const style = node.ownerDocument.defaultView.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return "";
-		return [...node.childNodes].map(text).join("");
-	};
-	return labels.map((label) => [...label.childNodes].map(text).join("").trim()).join(" ");
-}
-function announce(root, message) {
-	let status = root.querySelector("[data-j3w1-status]");
-	if (!status) {
-		status = root.ownerDocument.createElement("p");
-		status.dataset.j3w1Status = "";
-		status.className = "j3w1-visually-hidden";
-		status.setAttribute("role", "status");
-		root.append(status);
-	}
-	status.textContent = message;
-}
-function identify(root, node, suffix) {
-	if (node && !node.id) node.id = `${root.id}-${suffix}`;
-	return node?.id;
-}
-function nativeInput(input, type = "input") {
-	input.dispatchEvent(new Event(type, { bubbles: true }));
-}
-function rove(items, index, focus = true) {
-	if (!items.length) return null;
-	const next = items[(index + items.length) % items.length];
-	items.forEach((item) => {
-		item.tabIndex = item === next ? 0 : -1;
-	});
-	if (focus) next.focus();
-	return next;
-}
-function make(root, tag, attrs = {}, text) {
-	const node = root.ownerDocument.createElement(tag);
-	for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
-	if (text !== void 0) node.textContent = String(text);
-	return node;
-}
-function makeIcon(root, d, attrs = {}) {
-	const ns = "http://www.w3.org/2000/svg";
-	const svg = root.ownerDocument.createElementNS(ns, "svg");
-	for (const [key, value] of Object.entries({
-		viewBox: "0 0 16 16",
-		width: "16",
-		height: "16",
-		"aria-hidden": "true",
-		focusable: "false",
-		...attrs
-	})) svg.setAttribute(key, String(value));
-	const path = root.ownerDocument.createElementNS(ns, "path");
-	for (const [key, value] of Object.entries({
-		d,
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5"
-	})) path.setAttribute(key, value);
-	svg.append(path);
-	return svg;
-}
-function place(trigger, popup) {
-	const r = trigger.getBoundingClientRect(), p = popup.getBoundingClientRect();
-	const doc = trigger.ownerDocument.documentElement;
-	const left = Math.max(8, Math.min(r.left, doc.clientWidth - p.width - 8));
-	const top = r.bottom + p.height + 8 > doc.clientHeight ? Math.max(8, r.top - p.height) : r.bottom;
-	Object.assign(popup.style, {
-		position: "fixed",
-		insetInlineStart: "auto",
-		insetInlineEnd: "auto",
-		left: `${left}px`,
-		top: `${top}px`,
-		maxHeight: `${Math.max(120, doc.clientHeight - top - 8)}px`,
-		overflowY: "auto"
-	});
-}
-//#endregion
-//#region packages/ui/src/internal/temporal.js
-var instances = /* @__PURE__ */ new WeakMap();
-var sequence$1 = 0;
-function mountTemporal(input) {
-	if (instances.has(input)) return instances.get(input);
-	const abort = new AbortController(), restore = [], date = input.getAttribute("type") === "date", nativeTemporal = input.type === input.getAttribute("type");
-	const numeric = (value) => {
-		if (date) {
-			if (!/^\d{4,}-\d{2}-\d{2}$/.test(value)) return NaN;
-			const stamp = Date.parse(`${value}T00:00:00Z`);
-			return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp / 864e5 : NaN;
-		}
-		const match = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/.exec(value);
-		if (!match || Number(match[1]) > 23 || Number(match[2]) > 59 || Number(match[3] ?? 0) > 59) return NaN;
-		return Number(match[1]) * 3600 + Number(match[2]) * 60 + Number(match[3] ?? 0) + Number(`0.${match[4] ?? 0}`);
-	};
-	const stepSize = () => Number(input.step) > 0 ? Number(input.step) : date ? 1 : 60;
-	const constraint = (value) => {
-		const number = numeric(value), min = numeric(input.min), max = numeric(input.max);
-		if (!Number.isFinite(number)) return value ? "Enter a valid value." : input.required ? "Choose a value." : "";
-		if (!date && min > max) {
-			if (number < min && number > max) return "Choose a time within the allowed range.";
-		} else if (number < min || number > max) return "Choose a value within the allowed range.";
-		const base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0;
-		if (input.step !== "any" && Math.abs((number - base) / stepSize() - Math.round((number - base) / stepSize())) > 1e-7) return "Choose a value matching the allowed step.";
-		return "";
-	};
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	let id;
-	do
-		id = `j3w1-temporal-${++sequence$1}`;
-	while (input.ownerDocument.getElementById(`${id}-input`));
-	const shell = make(input, "span", { class: "j3w1-temporal" }), row = make(input, "span", { class: "j3w1-temporal-row" });
-	const editor = make(input, "input", {
-		id: `${id}-input`,
-		type: "text",
-		class: "j3w1-temporal-input",
-		autocomplete: "off",
-		placeholder: date ? "YYYY-MM-DD" : "HH:MM",
-		inputmode: "text"
-	});
-	const message = make(input, "span", {
-		id: `${id}-error`,
-		class: "j3w1-choice-error",
-		role: "status",
-		hidden: ""
-	});
-	const popup = make(input, "span", {
-		class: "j3w1-calendar",
-		role: "dialog",
-		"aria-modal": "false",
-		"aria-label": "Choose date",
-		popover: "manual",
-		hidden: ""
-	});
-	const opener = make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": date ? "Open calendar" : "Increase time"
-	}, date ? "▦" : "+");
-	row.append(editor, opener);
-	const decrease = date ? null : make(input, "button", {
-		type: "button",
-		class: "j3w1-temporal-action",
-		"aria-label": "Decrease time"
-	}, "−");
-	if (decrease) row.append(decrease);
-	shell.append(row, message);
-	if (date) shell.append(popup);
-	input.after(shell);
-	const labels = [...input.labels ?? []];
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = editor.id;
-		restore.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const attributes = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, input.getAttribute(name)]));
-	input.hidden = true;
-	input.setAttribute("aria-hidden", "true");
-	input.tabIndex = -1;
-	let touched = false, writing = false, open = false, view = /* @__PURE__ */ new Date(), activeDay = null, fallbackError = "";
-	const format = (value) => `${String(value.getFullYear()).padStart(4, "0")}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
-	const parse = (value) => /* @__PURE__ */ new Date(`${value}T12:00:00`);
-	const labelText = () => controlLabelText(labels);
-	const close = (focus = false) => {
-		if (popup.matches(":popover-open")) popup.hidePopover();
-		popup.hidden = true;
-		open = false;
-		opener.setAttribute("aria-expanded", "false");
-		if (focus) editor.focus();
-	};
-	const sync = () => {
-		if (abort.signal.aborted) return;
-		if (!writing) editor.value = input.value;
-		editor.disabled = input.matches(":disabled");
-		editor.readOnly = input.readOnly;
-		editor.required = input.required;
-		if (input.hasAttribute("form")) editor.setAttribute("form", input.getAttribute("form"));
-		else editor.removeAttribute("form");
-		opener.disabled = editor.disabled || editor.readOnly || !date && input.step === "any";
-		if (decrease) decrease.disabled = opener.disabled;
-		if (opener.disabled) close();
-		const labelled = input.getAttribute("aria-labelledby");
-		if (labelled) {
-			editor.setAttribute("aria-labelledby", labelled);
-			editor.removeAttribute("aria-label");
-		} else {
-			editor.removeAttribute("aria-labelledby");
-			editor.setAttribute("aria-label", input.getAttribute("aria-label") || labelText() || (date ? "Date" : "Time"));
-		}
-		if (!nativeTemporal) {
-			if (input.validationMessage === fallbackError) input.setCustomValidity("");
-			fallbackError = constraint(editor.value);
-			if (!input.validationMessage) input.setCustomValidity(fallbackError);
-		}
-		const malformed = Boolean(editor.value && !Number.isFinite(numeric(editor.value)));
-		editor.setCustomValidity(malformed ? `Enter a valid ${date ? "date in YYYY-MM-DD format" : "time in HH:MM or HH:MM:SS format"}.` : input.validationMessage);
-		const invalid = touched && !editor.validity.valid || input.getAttribute("aria-invalid") === "true";
-		editor.setAttribute("aria-invalid", String(invalid));
-		message.hidden = !invalid;
-		message.textContent = invalid ? editor.validationMessage || "Enter a valid value." : "";
-		const described = [input.getAttribute("aria-describedby"), date ? "Use YYYY-MM-DD format." : "Use HH:MM or HH:MM:SS format."];
-		if (!shell.querySelector(".j3w1-temporal-hint")) shell.append(make(input, "span", {
-			class: "j3w1-temporal-hint",
-			id: `${id}-hint`
-		}, described[1]));
-		editor.setAttribute("aria-describedby", [
-			described[0],
-			`${id}-hint`,
-			invalid ? message.id : ""
-		].filter(Boolean).join(" "));
-	};
-	const write = (value, change = false) => {
-		writing = true;
-		editor.value = value;
-		input.value = Number.isFinite(numeric(value)) ? value : "";
-		nativeInput(input);
-		if (change) {
-			touched = true;
-			nativeInput(input, "change");
-		}
-		sync();
-		writing = false;
-	};
-	const enabledDay = (value) => !constraint(value);
-	const draw = () => {
-		popup.replaceChildren();
-		const heading = make(input, "span", { class: "j3w1-calendar-heading" }), previous = make(input, "button", {
-			type: "button",
-			"data-month": "-1",
-			"aria-label": "Previous month"
-		}, "←"), next = make(input, "button", {
-			type: "button",
-			"data-month": "1",
-			"aria-label": "Next month"
-		}, "→");
-		const title = make(input, "strong", { id: `${id}-month` }, view.toLocaleDateString(void 0, {
-			month: "long",
-			year: "numeric"
-		}));
-		heading.append(previous, title, next);
-		popup.append(heading);
-		const grid = make(input, "span", {
-			role: "grid",
-			"aria-labelledby": title.id,
-			class: "j3w1-calendar-grid"
-		});
-		const header = make(input, "span", {
-			role: "row",
-			class: "j3w1-calendar-week"
-		});
-		for (const day of [
-			"Su",
-			"Mo",
-			"Tu",
-			"We",
-			"Th",
-			"Fr",
-			"Sa"
-		]) header.append(make(input, "span", { role: "columnheader" }, day));
-		grid.append(header);
-		const first = new Date(view);
-		first.setDate(1);
-		const last = new Date(first);
-		last.setMonth(last.getMonth() + 1);
-		last.setDate(0);
-		let week;
-		for (let index = 0; index < first.getDay() + last.getDate(); index++) {
-			if (index % 7 === 0) {
-				week = make(input, "span", {
-					role: "row",
-					class: "j3w1-calendar-week"
-				});
-				grid.append(week);
-			}
-			const cell = make(input, "span", { role: "gridcell" });
-			week.append(cell);
-			const day = index - first.getDay() + 1;
-			if (day < 1) continue;
-			const current = new Date(first);
-			current.setDate(day);
-			const value = format(current), button = make(input, "button", {
-				type: "button",
-				"data-date": value,
-				tabindex: value === activeDay ? "0" : "-1",
-				"aria-label": current.toLocaleDateString(void 0, { dateStyle: "full" }),
-				"aria-pressed": String(value === input.value)
-			}, day);
-			button.disabled = !enabledDay(value);
-			cell.append(button);
-		}
-		popup.append(grid);
-		if (!popup.querySelector("button[data-date][tabindex=\"0\"]:not(:disabled)")) {
-			const first = popup.querySelector("button[data-date]:not(:disabled)");
-			if (first) {
-				first.tabIndex = 0;
-				activeDay = first.dataset.date;
-			}
-		}
-		if (open) place(opener, popup);
-	};
-	const show = () => {
-		if (opener.disabled) return;
-		const selected = parse(input.value);
-		view = Number.isNaN(selected.valueOf()) ? /* @__PURE__ */ new Date() : selected;
-		activeDay = format(view);
-		open = true;
-		popup.hidden = false;
-		opener.setAttribute("aria-expanded", "true");
-		draw();
-		if (typeof popup.showPopover === "function") popup.showPopover();
-		place(opener, popup);
-		popup.querySelector("[data-date][tabindex=\"0\"]")?.focus();
-	};
-	if (date) {
-		opener.setAttribute("aria-haspopup", "dialog");
-		opener.setAttribute("aria-expanded", "false");
-		on(opener, "click", () => open ? close(true) : show());
-	} else {
-		const step = (amount) => {
-			if (nativeTemporal) {
-				amount > 0 ? input.stepUp() : input.stepDown();
-				write(input.value, true);
-			} else {
-				const min = numeric(input.min), current = numeric(input.value), base = Number.isFinite(min) ? min : Number.isFinite(numeric(input.defaultValue)) ? numeric(input.defaultValue) : 0, size = stepSize(), position = ((Number.isFinite(current) ? current : base) - base) / size;
-				const value = base + (amount > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1) * size;
-				if (value >= 0 && value < 86400) {
-					const hours = String(Math.floor(value / 3600)).padStart(2, "0"), minutes = String(Math.floor(value % 3600 / 60)).padStart(2, "0"), seconds = String(Math.floor(value % 60)).padStart(2, "0"), fraction = Math.round(value % 1 * 1e3);
-					const text = `${hours}:${minutes}${value % 60 ? `:${seconds}${fraction ? `.${String(fraction).padStart(3, "0")}` : ""}` : ""}`;
-					if (!constraint(text)) write(text, true);
-				}
-			}
-			editor.focus();
-		};
-		on(opener, "click", () => step(1));
-		on(decrease, "click", () => step(-1));
-	}
-	on(editor, "input", (event) => {
-		event.stopPropagation();
-		write(editor.value);
-	});
-	on(editor, "change", (event) => {
-		event.stopPropagation();
-		write(editor.value, true);
-	});
-	for (const control of [editor, input]) on(control, "invalid", (event) => {
-		event.preventDefault();
-		touched = true;
-		writing = true;
-		sync();
-		writing = false;
-		editor.focus();
-	});
-	on(input, "input", () => {
-		if (!writing) sync();
-	});
-	on(input, "change", () => {
-		if (!writing) sync();
-	});
-	on(popup, "click", (event) => {
-		const day = event.target.closest("[data-date]");
-		if (day && !day.disabled) {
-			write(day.dataset.date, true);
-			close(true);
-		}
-		const month = event.target.closest("[data-month]");
-		if (month) {
-			view.setDate(1);
-			view.setMonth(view.getMonth() + Number(month.dataset.month));
-			draw();
-			popup.querySelector(`[data-month="${month.dataset.month}"]`)?.focus();
-		}
-	});
-	on(popup, "keydown", (event) => {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			close(true);
-			return;
-		}
-		const button = event.target.closest("[data-date]");
-		if (!button) return;
-		const delta = {
-			ArrowLeft: -1,
-			ArrowRight: 1,
-			ArrowUp: -7,
-			ArrowDown: 7
-		}[event.key];
-		if (delta !== void 0 || [
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown"
-		].includes(event.key)) {
-			event.preventDefault();
-			const next = parse(button.dataset.date);
-			if (delta !== void 0) next.setDate(next.getDate() + delta);
-			else if (event.key === "Home") next.setDate(next.getDate() - next.getDay());
-			else if (event.key === "End") next.setDate(next.getDate() + 6 - next.getDay());
-			else {
-				const day = next.getDate();
-				next.setDate(1);
-				next.setMonth(next.getMonth() + (event.key === "PageDown" ? 1 : -1));
-				const end = new Date(next);
-				end.setMonth(end.getMonth() + 1);
-				end.setDate(0);
-				next.setDate(Math.min(day, end.getDate()));
-			}
-			if (enabledDay(format(next))) {
-				view = next;
-				activeDay = format(next);
-				draw();
-				popup.querySelector(`[data-date="${activeDay}"]`)?.focus();
-			}
-		}
-	});
-	on(editor, "keydown", (event) => {
-		if (date && event.altKey && event.key === "ArrowDown") {
-			event.preventDefault();
-			show();
-		}
-	});
-	on(input.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(input.ownerDocument.activeElement)) close();
-	}));
-	on(input.ownerDocument, "reset", (event) => {
-		if (event.target === input.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				touched = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(input.ownerDocument.defaultView, "resize", () => {
-		if (open) place(opener, popup);
-	});
-	const observer = new MutationObserver(sync);
-	observer.observe(input, {
-		attributes: true,
-		attributeFilter: [
-			"value",
-			"min",
-			"max",
-			"step",
-			"disabled",
-			"readonly",
-			"required",
-			"form",
-			"aria-invalid",
-			"aria-describedby",
-			"aria-label",
-			"aria-labelledby"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let node = input.parentElement; node; node = node.parentElement) if (node.tagName === "FIELDSET") fieldsets.observe(node, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value");
-	if (!Object.hasOwn(input, "value")) {
-		Object.defineProperty(input, "value", {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(value) {
-				descriptor.set.call(this, value);
-				if (!writing) sync();
-			}
-		});
-		restore.push(() => delete input.value);
-	}
-	if (!Object.hasOwn(input, "focus")) {
-		Object.defineProperty(input, "focus", {
-			configurable: true,
-			value: (options) => editor.focus(options)
-		});
-		restore.push(() => delete input.focus);
-	}
-	sync();
-	const api = {
-		sync,
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restore.forEach((fn) => fn());
-			shell.remove();
-			for (const [name, value] of attributes) value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-			instances.delete(input);
-		}
-	};
-	instances.set(input, api);
-	return api;
-}
-//#endregion
-//#region packages/ui/src/internal/choice.js
-var mounted = /* @__PURE__ */ new WeakMap();
-var sequence = 0;
-function mountChoice(select) {
-	if (mounted.has(select)) return mounted.get(select);
-	const abort = new AbortController(), restorers = [];
-	const on = (node, type, fn, options = {}) => node?.addEventListener(type, fn, {
-		...options,
-		signal: abort.signal
-	});
-	const multiple = select.multiple;
-	let id;
-	do
-		id = `j3w1-choice-${++sequence}`;
-	while (select.ownerDocument.getElementById(`${id}-control`));
-	const shell = make(select, "span", {
-		class: "j3w1-choice",
-		"data-choice-for": select.id
-	});
-	const list = make(select, "span", {
-		class: "j3w1-choice-list",
-		id: `${id}-list`,
-		role: "listbox"
-	});
-	const control = multiple ? list : make(select, "button", {
-		class: "j3w1-choice-trigger",
-		type: "button",
-		role: "combobox",
-		"aria-haspopup": "listbox",
-		"aria-controls": list.id,
-		"aria-expanded": "false"
-	});
-	const value = make(select, "span", { class: "j3w1-choice-value" });
-	const message = make(select, "span", {
-		class: "j3w1-choice-error",
-		id: `${id}-error`,
-		role: "status",
-		hidden: ""
-	});
-	if (multiple) {
-		list.setAttribute("aria-multiselectable", "true");
-		list.tabIndex = 0;
-	} else {
-		control.append(value, makeIcon(select, "M3.5 6 8 10.5 12.5 6", { class: "j3w1-choice-chevron" }));
-		list.hidden = true;
-		list.setAttribute("popover", "manual");
-		shell.append(control);
-	}
-	shell.append(list, message);
-	select.after(shell);
-	const saved = new Map([
-		"hidden",
-		"aria-hidden",
-		"tabindex"
-	].map((name) => [name, select.getAttribute(name)]));
-	select.hidden = true;
-	select.setAttribute("aria-hidden", "true");
-	select.tabIndex = -1;
-	let items = [], active = -1, anchor = -1, open = false, updating = false, invalid = false, buffer = "", typedAt = 0;
-	const disabled = (option) => option.disabled || option.parentElement?.matches("optgroup:disabled, optgroup[hidden]") || option.hidden;
-	const usable = () => items.map((item, index) => disabled(item.option) ? -1 : index).filter((index) => index >= 0);
-	const labels = [...select.labels ?? []];
-	control.id = `${id}-control`;
-	for (const label of labels) {
-		const previous = label.getAttribute("for");
-		label.htmlFor = control.id;
-		restorers.push(() => previous === null ? label.removeAttribute("for") : label.setAttribute("for", previous));
-	}
-	const labelText = () => controlLabelText(labels);
-	const close = () => {
-		if (multiple) return;
-		if (list.matches(":popover-open")) list.hidePopover();
-		list.hidden = true;
-		open = false;
-		control.setAttribute("aria-expanded", "false");
-		control.removeAttribute("aria-activedescendant");
-	};
-	const focus = (options) => {
-		if (!select.matches(":disabled")) control.focus(options);
-	};
-	const mark = (index) => {
-		active = index;
-		items.forEach((item, i) => item.node.toggleAttribute("data-active", i === active));
-		if (items[active] && (multiple || open)) {
-			control.setAttribute("aria-activedescendant", items[active].node.id);
-			if (open || select.ownerDocument.activeElement === control) items[active].node.scrollIntoView({ block: "nearest" });
-		} else control.removeAttribute("aria-activedescendant");
-	};
-	const sync = () => {
-		if (updating || abort.signal.aborted) return;
-		const off = select.matches(":disabled");
-		control.setAttribute("aria-disabled", String(off));
-		control.tabIndex = off ? -1 : 0;
-		if (!multiple) control.disabled = off;
-		if (off) close();
-		const labelled = select.getAttribute("aria-labelledby");
-		if (labelled) {
-			control.setAttribute("aria-labelledby", labelled);
-			control.removeAttribute("aria-label");
-		} else {
-			control.removeAttribute("aria-labelledby");
-			control.setAttribute("aria-label", select.getAttribute("aria-label") || labelText() || select.name || "Choose an option");
-		}
-		if (!multiple) list.setAttribute("aria-label", control.getAttribute("aria-label") || labelText() || "Options");
-		control.setAttribute("aria-required", String(select.required));
-		const bad = invalid && !select.validity.valid || select.getAttribute("aria-invalid") === "true";
-		control.setAttribute("aria-invalid", String(bad));
-		message.hidden = !bad;
-		message.textContent = bad ? select.validationMessage || "Choose a valid option." : "";
-		const described = [select.getAttribute("aria-describedby"), bad ? message.id : ""].filter(Boolean).join(" ");
-		if (described) control.setAttribute("aria-describedby", described);
-		else control.removeAttribute("aria-describedby");
-		items.forEach(({ option, node }) => {
-			node.setAttribute("aria-selected", String(option.selected));
-			node.setAttribute("aria-disabled", String(disabled(option)));
-			node.hidden = option.hidden || Boolean(option.parentElement?.matches("optgroup[hidden]"));
-		});
-		value.textContent = [...select.selectedOptions].map((option) => option.label).join(", ") || "Choose an option";
-		if (!items[active] || disabled(items[active].option)) mark(usable()[0] ?? -1);
-	};
-	const hook = (object, name, changed) => {
-		if (Object.getOwnPropertyDescriptor(object, name)) return;
-		let proto = Object.getPrototypeOf(object), descriptor;
-		while (proto && !(descriptor = Object.getOwnPropertyDescriptor(proto, name))) proto = Object.getPrototypeOf(proto);
-		if (!descriptor?.set || !descriptor.get) return;
-		Object.defineProperty(object, name, {
-			configurable: true,
-			get() {
-				return descriptor.get.call(this);
-			},
-			set(next) {
-				descriptor.set.call(this, next);
-				changed();
-			}
-		});
-		restorers.push(() => delete object[name]);
-	};
-	const watched = /* @__PURE__ */ new WeakSet();
-	const rebuild = () => {
-		const current = items[active]?.option;
-		list.replaceChildren();
-		items = [];
-		for (const child of select.children) {
-			let parent = list;
-			if (child.tagName === "OPTGROUP") {
-				parent = make(select, "span", {
-					role: "group",
-					"aria-label": child.label,
-					class: "j3w1-choice-group"
-				});
-				parent.append(make(select, "span", {
-					class: "j3w1-choice-group-label",
-					"aria-hidden": "true"
-				}, child.label));
-				list.append(parent);
-			}
-			for (const option of child.tagName === "OPTION" ? [child] : child.querySelectorAll("option")) {
-				const node = make(select, "span", {
-					class: "j3w1-choice-option",
-					role: "option",
-					id: `${id}-option-${items.length}`,
-					"data-choice-value": option.value
-				});
-				node.append(make(select, "span", {
-					class: "j3w1-choice-check",
-					"aria-hidden": "true"
-				}, "✓"), make(select, "span", {}, option.label));
-				parent.append(node);
-				items.push({
-					option,
-					node
-				});
-				if (!watched.has(option)) {
-					hook(option, "selected", sync);
-					watched.add(option);
-				}
-			}
-		}
-		active = items.findIndex((item) => item.option === current);
-		sync();
-	};
-	const show = () => {
-		if (multiple || select.matches(":disabled")) return;
-		sync();
-		list.hidden = false;
-		open = true;
-		control.setAttribute("aria-expanded", "true");
-		list.style.width = `${control.getBoundingClientRect().width}px`;
-		if (typeof list.showPopover === "function" && !list.matches(":popover-open")) list.showPopover();
-		place(control, list);
-		mark(items.findIndex((item) => item.option.selected && !disabled(item.option)) >= 0 ? items.findIndex((item) => item.option.selected && !disabled(item.option)) : usable()[0] ?? -1);
-	};
-	const commit = (index, range = false) => {
-		const item = items[index];
-		if (!item || disabled(item.option) || select.matches(":disabled")) return;
-		updating = true;
-		if (multiple) {
-			if (range && anchor >= 0) items.forEach((entry, i) => {
-				if (!disabled(entry.option)) entry.option.selected = i >= Math.min(anchor, index) && i <= Math.max(anchor, index);
-			});
-			else {
-				item.option.selected = !item.option.selected;
-				anchor = index;
-			}
-		} else select.selectedIndex = [...select.options].indexOf(item.option);
-		updating = false;
-		invalid = true;
-		sync();
-		if (!multiple) close();
-		nativeInput(select);
-		nativeInput(select, "change");
-		if (control.isConnected) focus();
-	};
-	on(control, "keydown", (event) => {
-		if (select.matches(":disabled")) return;
-		const indices = usable();
-		if (event.key === "Escape") {
-			if (open) {
-				event.preventDefault();
-				event.stopPropagation();
-				close();
-			}
-			return;
-		}
-		if (event.key === "Tab") {
-			close();
-			return;
-		}
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a" && multiple) {
-			event.preventDefault();
-			updating = true;
-			const all = indices.every((i) => items[i].option.selected);
-			indices.forEach((i) => {
-				items[i].option.selected = !all;
-			});
-			updating = false;
-			sync();
-			nativeInput(select);
-			nativeInput(select, "change");
-			return;
-		}
-		if (["Enter", " "].includes(event.key)) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			else commit(active, event.shiftKey);
-			return;
-		}
-		if (event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			close();
-			return;
-		}
-		if ([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End"
-		].includes(event.key)) {
-			event.preventDefault();
-			const wasOpen = open;
-			if (!multiple && !open) show();
-			if (!indices.length || event.altKey || !multiple && !wasOpen && !["Home", "End"].includes(event.key)) return;
-			const position = indices.indexOf(active);
-			const next = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[Math.max(0, Math.min(indices.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)))];
-			mark(next);
-			if (multiple && event.shiftKey) commit(next, true);
-			return;
-		}
-		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			event.preventDefault();
-			if (!multiple && !open) show();
-			const now = Date.now();
-			buffer = now - typedAt > 700 ? event.key : buffer + event.key;
-			typedAt = now;
-			const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
-			const start = query.length === 1 ? indices.indexOf(active) + 1 : 0;
-			const next = [...indices.slice(start), ...indices.slice(0, start)].find((i) => items[i].option.label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()));
-			if (next !== void 0) mark(next);
-		}
-	});
-	if (!multiple) on(control, "click", (event) => {
-		event.preventDefault();
-		focus();
-		open ? close() : show();
-	});
-	on(list, "pointerdown", (event) => event.preventDefault());
-	on(list, "click", (event) => {
-		const index = items.findIndex((item) => item.node === event.target.closest("[role=\"option\"]"));
-		if (index < 0) return;
-		event.preventDefault();
-		mark(index);
-		commit(index, event.shiftKey);
-	});
-	on(select, "input", sync);
-	on(select, "change", sync);
-	on(select, "invalid", (event) => {
-		event.preventDefault();
-		invalid = true;
-		sync();
-		focus();
-	});
-	on(select.ownerDocument, "reset", (event) => {
-		if (event.target === select.form) queueMicrotask(() => {
-			if (!event.defaultPrevented) {
-				invalid = false;
-				close();
-				sync();
-			}
-		});
-	}, { capture: true });
-	on(select.ownerDocument, "pointerdown", (event) => {
-		if (!shell.contains(event.target)) close();
-	});
-	on(shell, "focusout", () => queueMicrotask(() => {
-		if (!shell.contains(select.ownerDocument.activeElement)) close();
-	}));
-	on(select.ownerDocument.defaultView, "resize", () => {
-		if (open) place(control, list);
-	});
-	on(select.ownerDocument, "scroll", (event) => {
-		if (open && !list.contains(event.target)) place(control, list);
-	}, { capture: true });
-	for (const label of labels) on(label, "click", (event) => {
-		if (!shell.contains(event.target)) {
-			event.preventDefault();
-			focus();
-		}
-	});
-	const observer = new MutationObserver(rebuild);
-	observer.observe(select, {
-		subtree: true,
-		childList: true,
-		characterData: true,
-		attributes: true,
-		attributeFilter: [
-			"disabled",
-			"required",
-			"label",
-			"value",
-			"selected",
-			"hidden",
-			"aria-label",
-			"aria-labelledby",
-			"aria-describedby",
-			"aria-invalid"
-		]
-	});
-	const fieldsets = new MutationObserver(sync);
-	for (let parent = select.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "FIELDSET") fieldsets.observe(parent, {
-		attributes: true,
-		attributeFilter: ["disabled"]
-	});
-	hook(select, "value", sync);
-	hook(select, "selectedIndex", sync);
-	if (!Object.getOwnPropertyDescriptor(select, "focus")) {
-		Object.defineProperty(select, "focus", {
-			configurable: true,
-			value: focus
-		});
-		restorers.push(() => delete select.focus);
-	}
-	rebuild();
-	const api = {
-		sync,
-		focus,
-		show,
-		hide: close,
-		get open() {
-			return open;
-		},
-		destroy() {
-			if (abort.signal.aborted) return;
-			close();
-			abort.abort();
-			observer.disconnect();
-			fieldsets.disconnect();
-			restorers.forEach((restore) => restore());
-			shell.remove();
-			for (const [name, value] of saved) value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-			mounted.delete(select);
-		}
-	};
-	mounted.set(select, api);
-	return api;
-}
-function enhanceControls(root) {
-	const choices = /* @__PURE__ */ new Map();
-	root.setAttribute("data-j3w1-controls", "");
-	const refresh = () => {
-		for (const [select, api] of choices) if (!root.contains(select)) {
-			api.destroy();
-			choices.delete(select);
-		}
-		for (const select of root.querySelectorAll("select,input[type=\"date\"],input[type=\"time\"]")) {
-			let owner = select.parentElement;
-			while (owner && !owner.localName.startsWith("j3w1-")) owner = owner.parentElement;
-			if (!select.closest("j3w1-select,j3w1-date-picker,j3w1-time-picker") && (!owner || owner === root) && !choices.has(select)) choices.set(select, select.tagName === "SELECT" ? mountChoice(select) : mountTemporal(select));
-		}
-	};
-	const observer = new MutationObserver(refresh);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	refresh();
-	return {
-		refresh,
-		destroy() {
-			observer.disconnect();
-			choices.forEach((api) => api.destroy());
-			choices.clear();
-			root.removeAttribute("data-j3w1-controls");
-		}
-	};
-}
-//#endregion
-export { announce as a, make as c, rove as d, visible as f, all as i, nativeInput as l, mountChoice as n, enabled as o, mountTemporal as r, identify as s, enhanceControls as t, place as u };
diff --git a/packages/ui/dist/copy/wizard/runtime/chunks/element-C1XeXVYC.js b/packages/ui/dist/copy/wizard/runtime/chunks/element-C1XeXVYC.js
deleted file mode 100644
index a943f150d..000000000
--- a/packages/ui/dist/copy/wizard/runtime/chunks/element-C1XeXVYC.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import { t as enhanceControls } from "./choice-Db_w_BOQ.js";
-//#region packages/ui/src/internal/element.js
-var HTMLElementBase = globalThis.HTMLElement ?? class {};
-var nextInstance = 0;
-var J3w1Element = class extends HTMLElementBase {
-	static observedAttributes = [
-		"disabled",
-		"required",
-		"readonly",
-		"name",
-		"value",
-		"checked",
-		"loading",
-		"tone"
-	];
-	#abort;
-	#cleanup;
-	#queued = false;
-	#disabledChildren = /* @__PURE__ */ new Map();
-	#retained = /* @__PURE__ */ new Map();
-	#controllerState;
-	#initializedControls = /* @__PURE__ */ new WeakSet();
-	get control() {
-		return this.querySelector("input,select,textarea,button,progress");
-	}
-	get controls() {
-		return [...this.querySelectorAll("input,select,textarea,button")];
-	}
-	get value() {
-		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
-		return this.control?.value ?? this.getAttribute("value") ?? "";
-	}
-	set value(value) {
-		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-			input.checked = input.value === String(value);
-		});
-		else if (this.control) this.control.value = String(value ?? "");
-		else this.setAttribute("value", String(value ?? ""));
-		this._api?.valueChanged?.();
-	}
-	get checked() {
-		return this.control?.checked ?? this.hasAttribute("checked");
-	}
-	set checked(value) {
-		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
-		else this.toggleAttribute("checked", Boolean(value));
-	}
-	get disabled() {
-		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
-	}
-	set disabled(value) {
-		this.toggleAttribute("disabled", Boolean(value));
-	}
-	get required() {
-		return this.control?.required ?? this.hasAttribute("required");
-	}
-	set required(value) {
-		this.toggleAttribute("required", Boolean(value));
-	}
-	get readOnly() {
-		return this.control?.readOnly ?? this.hasAttribute("readonly");
-	}
-	set readOnly(value) {
-		this.toggleAttribute("readonly", Boolean(value));
-	}
-	get name() {
-		return this.control?.name ?? this.getAttribute("name") ?? "";
-	}
-	set name(value) {
-		this.setAttribute("name", String(value));
-	}
-	get form() {
-		return this.control?.form ?? null;
-	}
-	checkValidity() {
-		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
-	}
-	reportValidity() {
-		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
-		return true;
-	}
-	focus(options) {
-		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
-	}
-	connectedCallback() {
-		if (this.#queued) return;
-		this.#queued = true;
-		queueMicrotask(() => {
-			this.#queued = false;
-			if (this.isConnected) this.refresh();
-		});
-	}
-	disconnectedCallback() {
-		if (this._api) {
-			this.#controllerState = this._api.snapshot?.();
-			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
-		}
-		this.#abort?.abort();
-		this.#cleanup?.();
-		this.#cleanup = void 0;
-		this._api = void 0;
-	}
-	attributeChangedCallback(name, oldValue, value) {
-		if (oldValue === value) return;
-		this.applyAttribute(name, value);
-		this._api?.attributeChanged?.(name, oldValue, value);
-	}
-	applyAttribute(name, value) {
-		const control = this.control;
-		if (!control) return;
-		if (name === "disabled") {
-			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
-			for (const node of this.controls) if (value !== null) {
-				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
-				node.disabled = true;
-			} else if (this.#disabledChildren.has(node)) {
-				node.disabled = this.#disabledChildren.get(node);
-				this.#disabledChildren.delete(node);
-			}
-		} else if (["required", "readonly"].includes(name)) {
-			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
-		} else if (name === "checked" && "checked" in control) {
-			control.defaultChecked = value !== null;
-			control.checked = value !== null;
-		} else if (name === "value") {
-			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
-				input.defaultChecked = input.value === value;
-				input.checked = input.value === value;
-			});
-			else {
-				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
-				control.value = value ?? "";
-			}
-			this._api?.valueChanged?.();
-		} else if (name === "name") {
-			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
-				input.name = value ?? "";
-			});
-			else control.name = value ?? "";
-		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
-		else if (name === "tone" && control.matches("button")) for (const tone of [
-			"secondary",
-			"tertiary",
-			"destructive"
-		]) control.classList.toggle(`button-${tone}`, value === tone);
-	}
-	emit(type, detail = {}) {
-		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
-			detail,
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}));
-	}
-	refresh() {
-		this.disconnectedCallback();
-		this.#abort = new AbortController();
-		const signal = this.#abort.signal;
-		this.dataset.j3w1Component = this.constructor.componentId;
-		this.dataset.j3w1Version = this.constructor.version;
-		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
-		const control = this.control;
-		for (const name of this.constructor.observedAttributes) {
-			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
-			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
-		}
-		if (control) this.#initializedControls.add(control);
-		this.addEventListener("click", (event) => {
-			const control = event.target.closest("button,a,input");
-			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-			}
-		}, {
-			capture: true,
-			signal
-		});
-		this.addEventListener("change", (event) => {
-			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
-				value: event.target.value,
-				checked: event.target.checked,
-				name: event.target.name
-			});
-		}, { signal });
-		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
-			...options,
-			signal
-		});
-		const connection = this.constructor.connect?.(this, {
-			on,
-			signal
-		});
-		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
-		const controls = enhanceControls(this);
-		this.#cleanup = () => {
-			controls.destroy();
-			cleanup?.();
-		};
-		this._api = typeof connection === "object" ? connection : void 0;
-		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
-		this.#controllerState = void 0;
-		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
-		this.#retained.clear();
-		for (const name of /* @__PURE__ */ new Set([
-			"value",
-			"checked",
-			"disabled",
-			"required",
-			"readOnly",
-			"name",
-			...this.constructor.upgradeProperties ?? []
-		])) if (Object.hasOwn(this, name)) {
-			const value = this[name];
-			delete this[name];
-			this[name] = value;
-		}
-	}
-};
-function registerElement(name, Constructor, registry = globalThis.customElements) {
-	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
-	const current = registry.get(name);
-	const sameBuild = current && [
-		"componentId",
-		"version",
-		"implementationId"
-	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
-	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
-	if (!current) registry.define(name, Constructor);
-	return current ?? Constructor;
-}
-//#endregion
-export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/wizard/runtime/chunks/element-Dovcr9Ky.js b/packages/ui/dist/copy/wizard/runtime/chunks/element-Dovcr9Ky.js
new file mode 100644
index 000000000..aa7a67cb4
--- /dev/null
+++ b/packages/ui/dist/copy/wizard/runtime/chunks/element-Dovcr9Ky.js
@@ -0,0 +1,232 @@
+import { t as enhanceControls } from "./choice-B7mo5Eq3.js";
+//#region packages/ui/src/internal/element.js
+var HTMLElementBase = globalThis.HTMLElement ?? class {};
+var nextInstance = 0;
+var J3w1Element = class extends HTMLElementBase {
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"readonly",
+		"name",
+		"value",
+		"checked",
+		"loading",
+		"tone"
+	];
+	#abort;
+	#cleanup;
+	#queued = false;
+	#disabledChildren = /* @__PURE__ */ new Map();
+	#retained = /* @__PURE__ */ new Map();
+	#controllerState;
+	#initializedControls = /* @__PURE__ */ new WeakSet();
+	get control() {
+		return this.querySelector("input,select,textarea,button,progress");
+	}
+	get controls() {
+		return [...this.querySelectorAll("input,select,textarea,button")];
+	}
+	get value() {
+		if (this.control?.type === "radio") return this.querySelector("input[type=\"radio\"]:checked")?.value ?? "";
+		return this.control?.value ?? this.getAttribute("value") ?? "";
+	}
+	set value(value) {
+		if (this.control?.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+			input.checked = input.value === String(value);
+		});
+		else if (this.control) this.control.value = String(value ?? "");
+		else this.setAttribute("value", String(value ?? ""));
+		this._api?.valueChanged?.();
+	}
+	get checked() {
+		return this.control?.checked ?? this.hasAttribute("checked");
+	}
+	set checked(value) {
+		if (this.control && "checked" in this.control) this.control.checked = Boolean(value);
+		else this.toggleAttribute("checked", Boolean(value));
+	}
+	get disabled() {
+		return this.control?.matches(":disabled") ?? this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	get required() {
+		return this.control?.required ?? this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	get readOnly() {
+		return this.control?.readOnly ?? this.hasAttribute("readonly");
+	}
+	set readOnly(value) {
+		this.toggleAttribute("readonly", Boolean(value));
+	}
+	get name() {
+		return this.control?.name ?? this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", String(value));
+	}
+	get form() {
+		return this.control?.form ?? null;
+	}
+	checkValidity() {
+		return this.controls.every((control) => !control.checkValidity || control.checkValidity());
+	}
+	reportValidity() {
+		for (const control of this.controls) if (control.reportValidity && !control.reportValidity()) return false;
+		return true;
+	}
+	focus(options) {
+		(this.querySelector("input:not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),a[href],summary,[tabindex=\"0\"]") ?? this.control)?.focus(options);
+	}
+	connectedCallback() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.isConnected) this.refresh();
+		});
+	}
+	disconnectedCallback() {
+		if (this._api) {
+			this.#controllerState = this._api.snapshot?.();
+			for (const name of this.constructor.upgradeProperties ?? []) if (name in this._api) this.#retained.set(name, this._api[name]);
+		}
+		this.#abort?.abort();
+		this.#cleanup?.();
+		this.#cleanup = void 0;
+		this._api = void 0;
+	}
+	attributeChangedCallback(name, oldValue, value) {
+		if (oldValue === value) return;
+		this.applyAttribute(name, value);
+		this._api?.attributeChanged?.(name, oldValue, value);
+	}
+	applyAttribute(name, value) {
+		const control = this.control;
+		if (!control) return;
+		if (name === "disabled") {
+			for (const node of this.#disabledChildren.keys()) if (!this.contains(node)) this.#disabledChildren.delete(node);
+			for (const node of this.controls) if (value !== null) {
+				if (!this.#disabledChildren.has(node)) this.#disabledChildren.set(node, node.disabled);
+				node.disabled = true;
+			} else if (this.#disabledChildren.has(node)) {
+				node.disabled = this.#disabledChildren.get(node);
+				this.#disabledChildren.delete(node);
+			}
+		} else if (["required", "readonly"].includes(name)) {
+			if (control.matches("input,select,textarea")) control.toggleAttribute(name, value !== null);
+		} else if (name === "checked" && "checked" in control) {
+			control.defaultChecked = value !== null;
+			control.checked = value !== null;
+		} else if (name === "value") {
+			if (control.type === "radio") this.querySelectorAll("input[type=\"radio\"]").forEach((input) => {
+				input.defaultChecked = input.value === value;
+				input.checked = input.value === value;
+			});
+			else {
+				if ("defaultValue" in control && control.type !== "file") control.defaultValue = value ?? "";
+				control.value = value ?? "";
+			}
+			this._api?.valueChanged?.();
+		} else if (name === "name") {
+			if (["radio", "checkbox"].includes(control.type)) this.querySelectorAll(`input[type="${control.type}"]`).forEach((input) => {
+				input.name = value ?? "";
+			});
+			else control.name = value ?? "";
+		} else if (name === "loading") control.setAttribute("aria-busy", String(value !== null));
+		else if (name === "tone" && control.matches("button")) for (const tone of [
+			"secondary",
+			"tertiary",
+			"destructive"
+		]) control.classList.toggle(`button-${tone}`, value === tone);
+	}
+	emit(type, detail = {}) {
+		return this.dispatchEvent(new CustomEvent(`j3w1-${type}`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	refresh() {
+		this.disconnectedCallback();
+		this.#abort = new AbortController();
+		const signal = this.#abort.signal;
+		this.dataset.j3w1Component = this.constructor.componentId;
+		this.dataset.j3w1Version = this.constructor.version;
+		if (!this.id) this.id = `j3w1-instance-${++nextInstance}`;
+		const control = this.control;
+		for (const name of this.constructor.observedAttributes) {
+			if (["value", "checked"].includes(name) && control && this.#initializedControls.has(control)) continue;
+			if (this.hasAttribute(name)) this.applyAttribute(name, this.getAttribute(name));
+		}
+		if (control) this.#initializedControls.add(control);
+		this.addEventListener("click", (event) => {
+			const control = event.target.closest("button,a,input");
+			if (control && (control.getAttribute("aria-disabled") === "true" || this.hasAttribute("loading"))) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, {
+			capture: true,
+			signal
+		});
+		this.addEventListener("change", (event) => {
+			if (event.target.closest("[data-j3w1-component]") === this) this.emit("change", {
+				value: event.target.value,
+				checked: event.target.checked,
+				name: event.target.name
+			});
+		}, { signal });
+		const on = (target, type, fn, options = {}) => target?.addEventListener(type, fn, {
+			...options,
+			signal
+		});
+		const connection = this.constructor.connect?.(this, {
+			on,
+			signal
+		});
+		const cleanup = typeof connection === "function" ? connection : connection?.cleanup;
+		const controls = enhanceControls(this);
+		this.#cleanup = () => {
+			controls.destroy();
+			cleanup?.();
+		};
+		this._api = typeof connection === "object" ? connection : void 0;
+		if (this.#controllerState !== void 0) this._api?.restore?.(this.#controllerState);
+		this.#controllerState = void 0;
+		for (const [name, value] of this.#retained) if (!Object.hasOwn(this, name) && !Object.is(this[name], value)) this[name] = value;
+		this.#retained.clear();
+		for (const name of /* @__PURE__ */ new Set([
+			"value",
+			"checked",
+			"disabled",
+			"required",
+			"readOnly",
+			"name",
+			...this.constructor.upgradeProperties ?? []
+		])) if (Object.hasOwn(this, name)) {
+			const value = this[name];
+			delete this[name];
+			this[name] = value;
+		}
+	}
+};
+function registerElement(name, Constructor, registry = globalThis.customElements) {
+	if (!registry) throw new Error("Register components in a browser with Custom Elements support.");
+	const current = registry.get(name);
+	const sameBuild = current && [
+		"componentId",
+		"version",
+		"implementationId"
+	].every((key) => typeof Constructor[key] === "string" && Constructor[key].length > 0 && current[key] === Constructor[key]);
+	if (current && current !== Constructor && !sameBuild) throw new Error(`A different implementation already owns ${name}`);
+	if (!current) registry.define(name, Constructor);
+	return current ?? Constructor;
+}
+//#endregion
+export { registerElement as n, J3w1Element as t };
diff --git a/packages/ui/dist/copy/wizard/runtime/chunks/forms-BT3z7lNC.js b/packages/ui/dist/copy/wizard/runtime/chunks/forms-CE_hP1hg.js
similarity index 98%
rename from packages/ui/dist/copy/wizard/runtime/chunks/forms-BT3z7lNC.js
rename to packages/ui/dist/copy/wizard/runtime/chunks/forms-CE_hP1hg.js
index 65f1f0e71..6ad3b48f5 100644
--- a/packages/ui/dist/copy/wizard/runtime/chunks/forms-BT3z7lNC.js
+++ b/packages/ui/dist/copy/wizard/runtime/chunks/forms-CE_hP1hg.js
@@ -1,4 +1,4 @@
-import { c as make, i as all, o as enabled } from "./choice-Db_w_BOQ.js";
+import { i as all, l as make, o as enabled } from "./choice-B7mo5Eq3.js";
 //#region packages/ui/src/behaviors/forms.js
 function wizard(root, { on }) {
 	const panels = all(root, ".wizard-panel"), steps = all(root, ".wizard-step-button"), backButton = root.querySelector(".wizard-back"), nextButton = root.querySelector(".wizard-next");
diff --git a/packages/ui/dist/copy/wizard/runtime/components/wizard.js b/packages/ui/dist/copy/wizard/runtime/components/wizard.js
index 4d9bbaefc..852097735 100644
--- a/packages/ui/dist/copy/wizard/runtime/components/wizard.js
+++ b/packages/ui/dist/copy/wizard/runtime/components/wizard.js
@@ -1,10 +1,10 @@
-import { t as J3w1Element } from "../chunks/element-C1XeXVYC.js";
-import { n as wizard } from "../chunks/forms-BT3z7lNC.js";
+import { t as J3w1Element } from "../chunks/element-Dovcr9Ky.js";
+import { n as wizard } from "../chunks/forms-CE_hP1hg.js";
 //#region .cache/ui-build/entries/components/wizard.js
 var J3w1Wizard = class extends J3w1Element {
 	static componentId = "wizard";
 	static version = "4.0.0";
-	static implementationId = "sha256-io0DYHj45iX5Dvck9xDTbxK9av2V6Z42KQERETAWGb4=";
+	static implementationId = "sha256-RPzZPFnWZYndDTCn4JxgWR8s+kGEDCPgKxzzaesMZdk=";
 	static connect = wizard;
 	static upgradeProperties = [
 		"disabled",
diff --git a/packages/ui/dist/copy/wizard/runtime/register/wizard.js b/packages/ui/dist/copy/wizard/runtime/register/wizard.js
index e78c20e3e..df8a879a1 100644
--- a/packages/ui/dist/copy/wizard/runtime/register/wizard.js
+++ b/packages/ui/dist/copy/wizard/runtime/register/wizard.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Wizard } from "../components/wizard.js";
 //#region .cache/ui-build/entries/register/wizard.js
 var element = registerElement("j3w1-wizard", J3w1Wizard);
diff --git a/packages/ui/dist/copy/wizard/tokens.css b/packages/ui/dist/copy/wizard/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/copy/wizard/tokens.css
+++ b/packages/ui/dist/copy/wizard/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/dist/enhance/choice.js b/packages/ui/dist/enhance/choice.js
index 518c7eb43..7b9f12b2c 100644
--- a/packages/ui/dist/enhance/choice.js
+++ b/packages/ui/dist/enhance/choice.js
@@ -1 +1 @@
-export { t as enhanceControls } from "../chunks/choice-Db_w_BOQ.js";
+export { t as enhanceControls } from "../chunks/choice-B7mo5Eq3.js";
diff --git a/packages/ui/dist/enhance/form-builder.js b/packages/ui/dist/enhance/form-builder.js
index 67def171f..528377299 100644
--- a/packages/ui/dist/enhance/form-builder.js
+++ b/packages/ui/dist/enhance/form-builder.js
@@ -1 +1 @@
-export { t as mountBuilder } from "../chunks/form-builder-EQnl1AaR.js";
+export { t as mountBuilder } from "../chunks/form-builder-CqcTkYZe.js";
diff --git a/packages/ui/dist/enhance/form-workflow.js b/packages/ui/dist/enhance/form-workflow.js
index b9ac69d15..07eb153fe 100644
--- a/packages/ui/dist/enhance/form-workflow.js
+++ b/packages/ui/dist/enhance/form-workflow.js
@@ -1 +1 @@
-export { t as mountWorkflow } from "../chunks/form-workflow-DMGni-Gs.js";
+export { t as mountWorkflow } from "../chunks/form-workflow-BKRLylvq.js";
diff --git a/packages/ui/dist/examples.json b/packages/ui/dist/examples.json
index bcb95cf26..c369a2602 100644
--- a/packages/ui/dist/examples.json
+++ b/packages/ui/dist/examples.json
@@ -93,7 +93,7 @@
     "icons": "<j3w1-wizard id=\"example-wizard-icons\"><div class=\"wizard\" aria-label=\"Set up a local project\"><ol class=\"wizard-steps\"><li class=\"wizard-step\"><button class=\"wizard-step-button\" type=\"button\" aria-current=\"step\"><span class=\"wizard-step-marker\" aria-hidden=\"true\">1</span><span class=\"wizard-step-name\">Source</span></button></li><li class=\"wizard-step\"><button class=\"wizard-step-button\" type=\"button\" disabled=\"\"><span class=\"wizard-step-marker\" aria-hidden=\"true\">2</span><span class=\"wizard-step-name\">Workspaces</span></button></li><li class=\"wizard-step\"><button class=\"wizard-step-button\" type=\"button\" disabled=\"\"><span class=\"wizard-step-marker\" aria-hidden=\"true\">3</span><span class=\"wizard-step-name\">Bindings</span></button></li><li class=\"wizard-step\"><button class=\"wizard-step-button\" type=\"button\" disabled=\"\"><span class=\"wizard-step-marker\" aria-hidden=\"true\">4</span><span class=\"wizard-step-name\">Review</span></button></li></ol><section class=\"wizard-panel\" aria-labelledby=\"example-wizard-icons-wizard-title-0\"><h3 class=\"wizard-title\" id=\"example-wizard-icons-wizard-title-0\">Step 1 of 4: Source</h3><label for=\"example-wizard-icons-wizard-value-0\">Source name</label><input class=\"text-field-input\" id=\"example-wizard-icons-wizard-value-0\" name=\"example-wizard-icons-step-0\" required=\"\"></section><section class=\"wizard-panel\" aria-labelledby=\"example-wizard-icons-wizard-title-1\" hidden=\"\"><h3 class=\"wizard-title\" id=\"example-wizard-icons-wizard-title-1\">Step 2 of 4: Workspaces</h3><label for=\"example-wizard-icons-wizard-value-1\">Workspaces name</label><input class=\"text-field-input\" id=\"example-wizard-icons-wizard-value-1\" name=\"example-wizard-icons-step-1\" required=\"\"></section><section class=\"wizard-panel\" aria-labelledby=\"example-wizard-icons-wizard-title-2\" hidden=\"\"><h3 class=\"wizard-title\" id=\"example-wizard-icons-wizard-title-2\">Step 3 of 4: Bindings</h3><label for=\"example-wizard-icons-wizard-value-2\">Bindings name</label><input class=\"text-field-input\" id=\"example-wizard-icons-wizard-value-2\" name=\"example-wizard-icons-step-2\" required=\"\"></section><section class=\"wizard-panel\" aria-labelledby=\"example-wizard-icons-wizard-title-3\" hidden=\"\"><h3 class=\"wizard-title\" id=\"example-wizard-icons-wizard-title-3\">Step 4 of 4: Review</h3><p class=\"wizard-text\">All previous values remain available. Complete requests host handling; it does not send a network request.</p></section><div class=\"wizard-actions\"><button class=\"wizard-back\" type=\"button\">Back</button><button class=\"wizard-next\" type=\"button\">Next / complete</button></div></div></j3w1-wizard>"
   },
   "form-builder": {
-    "default": "<j3w1-form-builder id=\"example-form-builder-default\"><section class=\"form-builder form-tool\" data-builder=\"\" hidden=\"\" aria-label=\"Form definition editor\">\n<div class=\"form-builder-editor\"><label for=\"example-form-builder-default-builder-kind\">Field type<select id=\"example-form-builder-default-builder-kind\" data-kind=\"\" name=\"builder-kind\"><option value=\"text\">Text</option><option value=\"textarea\">Textarea</option><option value=\"select\">Select</option><option value=\"checkbox\">Checkbox</option><option value=\"radio\">Radio</option></select></label><button class=\"button\" type=\"button\" data-add=\"\">Add field</button><label for=\"example-form-builder-default-builder-density\">Preview density<select id=\"example-form-builder-default-builder-density\" data-density-choice=\"\" name=\"builder-density\"><option value=\"compact\">Compact</option><option value=\"comfortable\">Comfortable</option></select></label></div>\n<p data-builder-status=\"\" role=\"status\"></p><p data-empty=\"\">No fields yet. Choose a type and add your first field.</p><ol class=\"form-builder-list\" data-field-list=\"\"></ol>\n<form class=\"form-builder-editor\" data-editor=\"\" novalidate=\"\" hidden=\"\"><h2>Edit selected field</h2><label for=\"example-form-builder-default-builder-label\">Field label<input id=\"example-form-builder-default-builder-label\" name=\"label\" maxlength=\"120\" required=\"\"></label><label for=\"example-form-builder-default-builder-help\">Field help<textarea id=\"example-form-builder-default-builder-help\" name=\"help\" maxlength=\"400\"></textarea></label><label for=\"example-form-builder-default-builder-required\"><input id=\"example-form-builder-default-builder-required\" name=\"required\" type=\"checkbox\">Required field</label><label for=\"example-form-builder-default-builder-options\" data-options-label=\"\">Options JSON<textarea id=\"example-form-builder-default-builder-options\" name=\"options\" rows=\"6\" maxlength=\"65537\" spellcheck=\"false\"></textarea></label><p>Edit option IDs and labels as JSON. Keep each ID when changing its label. Select and radio fields need 1–20 options.</p><div class=\"form-tool-actions\"><button class=\"button\" type=\"submit\">Save field definition</button><button class=\"button button-secondary\" type=\"button\" data-cancel=\"\">Cancel edit</button></div></form>\n<h2>Preview</h2><p>Definition changes clear preview values. Review validates required values and choices.</p><div data-preview=\"\"><section class=\"admin-form form-tool\" data-workflow=\"builder-preview\" hidden=\"\"><h2 class=\"admin-form-title\">Try the local workflow</h2><p>Values stay in this page. Reset clears them. No save request is sent.</p><form novalidate=\"\"><div class=\"alert alert-danger form-tool-summary\" data-errors=\"\" role=\"alert\" tabindex=\"-1\" hidden=\"\"></div><fieldset class=\"form-tool-fields\" data-fields=\"\" aria-label=\"Enter values\"></fieldset><div class=\"form-tool-actions\"><button class=\"button\" type=\"submit\" data-event=\"submit\">Review values</button></div></form><table data-review=\"\" class=\"table\" hidden=\"\"></table><p data-status=\"\" role=\"status\" tabindex=\"-1\" id=\"example-form-builder-default-builder-preview-field-8-workflow-status\"></p><div class=\"form-tool-actions\"><button class=\"button\" type=\"button\" data-event=\"edit\" hidden=\"\">Edit values</button><button class=\"button\" type=\"button\" data-event=\"confirm\" hidden=\"\">Simulate save</button><button class=\"button\" type=\"button\" data-event=\"complete\" hidden=\"\">Complete simulation</button><button class=\"button\" type=\"button\" data-event=\"reset\">Reset values</button></div></section></div>\n<h2>Transfer definition</h2><p>Schema version 1 accepts at most 64 KiB and 20 fields. Invalid imports leave the current definition unchanged. Export excludes entered preview values.</p><div class=\"form-builder-editor\"><label for=\"example-form-builder-default-builder-json\">Definition JSON<textarea id=\"example-form-builder-default-builder-json\" data-json=\"\" rows=\"10\" spellcheck=\"false\" maxlength=\"65537\" name=\"builder-json\"></textarea></label></div><div class=\"form-tool-actions\"><button class=\"button\" type=\"button\" data-export=\"\">Show definition JSON</button><button class=\"button button-secondary\" type=\"button\" data-download=\"\">Download definition</button><button class=\"button button-secondary\" type=\"button\" data-import=\"\">Import definition JSON</button><button class=\"button button-secondary\" type=\"button\" data-reset=\"\">Reset builder</button></div></section><p>The bounded form editor requires JavaScript. Its definition is plain JSON with stable field IDs, labels, help, required flags and explicit option IDs.</p></j3w1-form-builder>"
+    "default": "<j3w1-form-builder id=\"example-form-builder-default\"><section class=\"form-builder form-tool\" data-builder=\"\" hidden=\"\" aria-label=\"Form definition editor\">\n<div class=\"form-builder-editor\"><label for=\"example-form-builder-default-builder-kind\">Field type<select id=\"example-form-builder-default-builder-kind\" data-kind=\"\" name=\"builder-kind\"><option value=\"text\">Text</option><option value=\"textarea\">Textarea</option><option value=\"select\">Select</option><option value=\"checkbox\">Checkbox</option><option value=\"radio\">Radio</option></select></label><button class=\"button button-secondary\" type=\"button\" data-add=\"\">Add field</button><label for=\"example-form-builder-default-builder-density\">Preview density<select id=\"example-form-builder-default-builder-density\" data-density-choice=\"\" name=\"builder-density\"><option value=\"compact\">Compact</option><option value=\"comfortable\">Comfortable</option></select></label></div>\n<p data-builder-status=\"\" role=\"status\"></p><p data-empty=\"\">No fields yet. Choose a type and add your first field.</p><ol class=\"form-builder-list\" data-field-list=\"\"></ol>\n<form class=\"form-builder-editor\" data-editor=\"\" novalidate=\"\" hidden=\"\"><h2>Edit selected field</h2><label for=\"example-form-builder-default-builder-label\">Field label<input id=\"example-form-builder-default-builder-label\" name=\"label\" maxlength=\"120\" required=\"\"></label><label for=\"example-form-builder-default-builder-help\">Field help<textarea id=\"example-form-builder-default-builder-help\" name=\"help\" maxlength=\"400\"></textarea></label><label for=\"example-form-builder-default-builder-required\"><input id=\"example-form-builder-default-builder-required\" name=\"required\" type=\"checkbox\">Required field</label><label for=\"example-form-builder-default-builder-options\" data-options-label=\"\">Options JSON<textarea id=\"example-form-builder-default-builder-options\" name=\"options\" rows=\"6\" maxlength=\"65537\" spellcheck=\"false\"></textarea></label><p>Edit option IDs and labels as JSON. Keep each ID when changing its label. Select and radio fields need 1–20 options.</p><div class=\"form-tool-actions\"><button class=\"button button-secondary\" type=\"submit\">Save field definition</button><button class=\"button button-secondary\" type=\"button\" data-cancel=\"\">Cancel edit</button></div></form>\n<h2>Preview</h2><p>Definition changes clear preview values. Review validates required values and choices.</p><div data-preview=\"\"><section class=\"admin-form form-tool\" data-workflow=\"builder-preview\" hidden=\"\"><h2 class=\"admin-form-title\">Try the local workflow</h2><p>Values stay in this page. Reset clears them. No save request is sent.</p><form novalidate=\"\"><div class=\"alert alert-danger form-tool-summary\" data-errors=\"\" role=\"alert\" tabindex=\"-1\" hidden=\"\"></div><fieldset class=\"form-tool-fields\" data-fields=\"\" aria-label=\"Enter values\"></fieldset><div class=\"form-tool-actions\"><button class=\"button\" type=\"submit\" data-event=\"submit\">Review values</button></div></form><table data-review=\"\" class=\"table\" hidden=\"\"></table><p data-status=\"\" role=\"status\" tabindex=\"-1\" id=\"example-form-builder-default-builder-preview-field-8-workflow-status\"></p><div class=\"form-tool-actions\"><button class=\"button button-secondary\" type=\"button\" data-event=\"edit\" hidden=\"\">Edit values</button><button class=\"button button-secondary\" type=\"button\" data-event=\"confirm\" hidden=\"\">Simulate save</button><button class=\"button button-secondary\" type=\"button\" data-event=\"complete\" hidden=\"\">Complete simulation</button><button class=\"button button-tertiary\" type=\"button\" data-event=\"reset\">Reset values</button></div></section></div>\n<h2>Transfer definition</h2><p>Schema version 1 accepts at most 64 KiB and 20 fields. Invalid imports leave the current definition unchanged. Export excludes entered preview values.</p><div class=\"form-builder-editor\"><label for=\"example-form-builder-default-builder-json\">Definition JSON<textarea id=\"example-form-builder-default-builder-json\" data-json=\"\" rows=\"10\" spellcheck=\"false\" maxlength=\"65537\" name=\"builder-json\"></textarea></label></div><div class=\"form-tool-actions\"><button class=\"button button-secondary\" type=\"button\" data-export=\"\">Show definition JSON</button><button class=\"button button-secondary\" type=\"button\" data-download=\"\">Download definition</button><button class=\"button button-secondary\" type=\"button\" data-import=\"\">Import definition JSON</button><button class=\"button button-secondary\" type=\"button\" data-reset=\"\">Reset builder</button></div></section><p>The bounded form editor requires JavaScript. Its definition is plain JSON with stable field IDs, labels, help, required flags and explicit option IDs.</p></j3w1-form-builder>"
   },
   "tabs": {
     "default": "<j3w1-tabs id=\"example-tabs-default\"><div class=\"tabs\">\n  <div class=\"tabs-list\" role=\"tablist\" aria-label=\"Settings sections\">\n    <button class=\"tabs-tab\" role=\"tab\" type=\"button\" id=\"example-tabs-default-tabs-general\" aria-selected=\"true\" aria-controls=\"example-tabs-default-tabs-panel-general\" tabindex=\"0\">General</button>\n    <button class=\"tabs-tab tabs-tab-demo-target\" role=\"tab\" type=\"button\" id=\"example-tabs-default-tabs-appearance\" aria-selected=\"false\" aria-controls=\"example-tabs-default-tabs-panel-appearance\" tabindex=\"-1\">Appearance</button>\n    <button class=\"tabs-tab\" role=\"tab\" type=\"button\" id=\"example-tabs-default-tabs-keys\" aria-selected=\"false\" aria-controls=\"example-tabs-default-tabs-panel-keys\" tabindex=\"-1\">Keys</button>\n  </div>\n  <div class=\"tabs-panel\" role=\"tabpanel\" id=\"example-tabs-default-tabs-panel-general\" aria-labelledby=\"example-tabs-default-tabs-general\" tabindex=\"0\">\n    <p class=\"tabs-panel-text\">Window gaps, bar height and the focus follows mouse setting.</p>\n  </div>\n  <div class=\"tabs-panel\" role=\"tabpanel\" id=\"example-tabs-default-tabs-panel-appearance\" aria-labelledby=\"example-tabs-default-tabs-appearance\" hidden=\"\">\n    <p class=\"tabs-panel-text\">Profile, font and density.</p>\n  </div>\n  <div class=\"tabs-panel\" role=\"tabpanel\" id=\"example-tabs-default-tabs-panel-keys\" aria-labelledby=\"example-tabs-default-tabs-keys\" hidden=\"\">\n    <p class=\"tabs-panel-text\">Bindings for the window manager and the editor.</p>\n  </div>\n</div></j3w1-tabs>",
@@ -228,9 +228,9 @@
     "default": "<j3w1-error-state id=\"example-error-state-default\"><section class=\"error-state\" aria-labelledby=\"example-error-state-default-error-title\"><h3 id=\"example-error-state-default-error-title\">✕ Project list unavailable</h3><p>The demonstration request failed. Retry to load the local example records.</p><button class=\"error-state-control\" type=\"button\" data-retry=\"\" data-demo-focus-target=\"\">Retry loading</button></section></j3w1-error-state>"
   },
   "code-editor": {
-    "default": "<j3w1-code-editor id=\"example-code-editor-default\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\">··</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div></j3w1-code-editor>",
-    "markup": "<j3w1-code-editor id=\"example-code-editor-markup\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"frame.html, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;!</span><span class=\"code-editor-kw\">doctype</span> <span class=\"code-editor-attr\">html</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">&lt;!-- window frame specimen --&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">html</span> <span class=\"code-editor-attr\">lang</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"en\"</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">head</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">title</span><span class=\"code-editor-punct\">&gt;</span>j3w1 <span class=\"code-editor-esc\">&amp;mdash;</span> theme<span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">title</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">head</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">body</span> <span class=\"code-editor-attr\">class</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"frame\"</span> <span class=\"code-editor-attr\">data-density</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"compact\"</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct code-editor-bracket\">&lt;</span><span class=\"code-editor-tag\">h1</span><span class=\"code-editor-punct code-editor-bracket\">&gt;</span><span class=\"code-editor-heading\">Window frame</span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">h1</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag code-editor-deprecated\">marquee</span><span class=\"code-editor-punct\">&gt;</span>obsolete<span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag code-editor-deprecated\">marquee</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">p</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-sel\">Focus is a ring; selection is a fill.</span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">p</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-sel\"><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">body</span><span class=\"code-editor-punct\">&gt;</span></span><span class=\"code-editor-ws\" aria-hidden=\"true\">·</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">html</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-invalid\">&lt;</span></span></span></pre>\n</div></j3w1-code-editor>",
-    "folded": "<j3w1-code-editor id=\"example-code-editor-folded\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js with a folded region, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled\"</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\"><span class=\"code-editor-fold-gutter\">›</span>7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span> <span class=\"code-editor-fold\" role=\"img\" aria-label=\"3 folded lines\">⋯</span> <span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span></span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span><span class=\"code-editor-ws\" aria-hidden=\"true\">·</span></span></span></pre>\n</div></j3w1-code-editor>"
+    "default": "<j3w1-code-editor id=\"example-code-editor-default\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"··\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div></j3w1-code-editor>",
+    "markup": "<j3w1-code-editor id=\"example-code-editor-markup\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"frame.html, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;!</span><span class=\"code-editor-kw\">doctype</span> <span class=\"code-editor-attr\">html</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">&lt;!-- window frame specimen --&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">html</span> <span class=\"code-editor-attr\">lang</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"en\"</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">head</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">title</span><span class=\"code-editor-punct\">&gt;</span>j3w1 <span class=\"code-editor-esc\">&amp;mdash;</span> theme<span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">title</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">head</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">body</span> <span class=\"code-editor-attr\">class</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"frame\"</span> <span class=\"code-editor-attr\">data-density</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"compact\"</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct code-editor-bracket\">&lt;</span><span class=\"code-editor-tag\">h1</span><span class=\"code-editor-punct code-editor-bracket\">&gt;</span><span class=\"code-editor-heading\">Window frame</span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">h1</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag code-editor-deprecated\">marquee</span><span class=\"code-editor-punct\">&gt;</span>obsolete<span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag code-editor-deprecated\">marquee</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">p</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-sel\">Focus is a ring; selection is a fill.</span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">p</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-sel\"><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">body</span><span class=\"code-editor-punct\">&gt;</span></span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"·\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">html</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-invalid\">&lt;</span></span></span></pre>\n</div></j3w1-code-editor>",
+    "folded": "<j3w1-code-editor id=\"example-code-editor-folded\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js with a folded region, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled\"</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\"><span class=\"code-editor-fold-gutter\">›</span>7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span> <span class=\"code-editor-fold\" role=\"img\" aria-label=\"3 folded lines\">⋯</span> <span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span></span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"·\"></span></span></span></pre>\n</div></j3w1-code-editor>"
   },
   "editor-search": {
     "default": "<j3w1-editor-search id=\"example-editor-search-default\"><section class=\"editor-search\" aria-label=\"Search source\"><label for=\"example-editor-search-default-editor-query\">Find in source</label><input class=\"editor-search-control\" id=\"example-editor-search-default-editor-query\" type=\"search\" data-query=\"\" data-demo-focus-target=\"\"><div class=\"editor-search-actions\"><button class=\"editor-search-control\" type=\"button\" data-previous=\"\">Previous match</button><button class=\"editor-search-control\" type=\"button\" data-next=\"\">Next match</button></div><p role=\"status\" data-search-status=\"\">Enter text to search.</p><pre data-source=\"\">const theme = 'j3w1';\nconst mode = 'dark';\nexport { theme, mode };</pre></section></j3w1-editor-search>"
@@ -264,9 +264,9 @@
     "loading": "<j3w1-filterable-table id=\"example-filterable-table-loading\"><section class=\"filterable-table\" aria-label=\"Project records\"><div class=\"filterable-table-toolbar\"><j3w1-search-field><div class=\"search-field\"><label class=\"search-field-label\" for=\"example-filterable-table-loading-records-search\">Search projects</label><div class=\"search-field-root\"><input class=\"search-field-input\" id=\"example-filterable-table-loading-records-search\" type=\"search\"><button class=\"search-field-clear\" type=\"button\" aria-label=\"Clear search\">Clear</button></div></div></j3w1-search-field><label for=\"example-filterable-table-loading-records-status\">Status<select class=\"select-control\" id=\"example-filterable-table-loading-records-status\" data-status-filter=\"\" name=\"example-filterable-table-loading-records-status\"><option value=\"all\">All statuses</option><option>Ready</option><option>In progress</option><option>Review</option></select></label></div><div class=\"table-scroller\" tabindex=\"0\" role=\"region\" aria-label=\"Project records\"><table class=\"data-table\" aria-busy=\"true\"><caption class=\"table-caption\">Project records · synthetic fixture</caption><thead class=\"data-table-head\"><tr><th class=\"data-table-header data-table-header-select\" scope=\"col\"><button class=\"data-table-select-all\" type=\"button\" role=\"checkbox\" aria-checked=\"false\" aria-label=\"Select all rows\"><span class=\"data-table-check-glyph\" aria-hidden=\"true\">✓</span></button></th><th class=\"data-table-header\" scope=\"col\"><button class=\"data-table-sort\" type=\"button\">Project<span class=\"data-table-sort-glyph\" aria-hidden=\"true\">↕</span></button></th><th class=\"data-table-header\" scope=\"col\"><button class=\"data-table-sort\" type=\"button\">Owner<span class=\"data-table-sort-glyph\" aria-hidden=\"true\">↕</span></button></th><th class=\"data-table-header\" scope=\"col\"><button class=\"data-table-sort\" type=\"button\">Status<span class=\"data-table-sort-glyph\" aria-hidden=\"true\">↕</span></button></th><th class=\"data-table-header\" scope=\"col\"><button class=\"data-table-sort\" type=\"button\">Scope<span class=\"data-table-sort-glyph\" aria-hidden=\"true\">↕</span></button></th></tr></thead><tbody class=\"data-table-body\"><tr class=\"data-table-row\" id=\"example-filterable-table-loading-record-0\" data-status=\"Ready\" aria-selected=\"false\" tabindex=\"0\"><td class=\"data-table-cell data-table-cell-select\"><input class=\"data-table-checkbox\" type=\"checkbox\" aria-labelledby=\"example-filterable-table-loading-record-name-0\" name=\"example-filterable-table-loading-value\"></td><td class=\"data-table-cell\" id=\"example-filterable-table-loading-record-name-0\">Atlas library</td><td class=\"data-table-cell\">Avery Kim</td><td class=\"data-table-cell\">Ready</td><td class=\"data-table-cell\">24</td></tr><tr class=\"data-table-row\" id=\"example-filterable-table-loading-record-1\" data-status=\"In progress\" aria-selected=\"false\" tabindex=\"-1\"><td class=\"data-table-cell data-table-cell-select\"><input class=\"data-table-checkbox\" type=\"checkbox\" aria-labelledby=\"example-filterable-table-loading-record-name-1\" name=\"example-filterable-table-loading-value\"></td><td class=\"data-table-cell\" id=\"example-filterable-table-loading-record-name-1\">Orion workspace</td><td class=\"data-table-cell\">Jordan Lee</td><td class=\"data-table-cell\">In progress</td><td class=\"data-table-cell\">12</td></tr><tr class=\"data-table-row\" id=\"example-filterable-table-loading-record-2\" data-status=\"Ready\" aria-selected=\"false\" tabindex=\"-1\"><td class=\"data-table-cell data-table-cell-select\"><input class=\"data-table-checkbox\" type=\"checkbox\" aria-labelledby=\"example-filterable-table-loading-record-name-2\" name=\"example-filterable-table-loading-value\"></td><td class=\"data-table-cell\" id=\"example-filterable-table-loading-record-name-2\">Field notes</td><td class=\"data-table-cell\">Morgan Noor</td><td class=\"data-table-cell\">Ready</td><td class=\"data-table-cell\">38</td></tr><tr class=\"data-table-row\" id=\"example-filterable-table-loading-record-3\" data-status=\"Review\" aria-selected=\"false\" tabindex=\"-1\"><td class=\"data-table-cell data-table-cell-select\"><input class=\"data-table-checkbox\" type=\"checkbox\" aria-labelledby=\"example-filterable-table-loading-record-name-3\" name=\"example-filterable-table-loading-value\"></td><td class=\"data-table-cell\" id=\"example-filterable-table-loading-record-name-3\">Signal monitor</td><td class=\"data-table-cell\">Riley Stone</td><td class=\"data-table-cell\">Review</td><td class=\"data-table-cell\">6</td></tr><tr class=\"data-table-empty\" hidden=\"\"><td class=\"data-table-empty-cell\" colspan=\"5\">No rows match.</td></tr><tr class=\"data-table-loading\"><td colspan=\"5\">⋯ Loading rows</td></tr></tbody></table></div><p class=\"filterable-table-count\" role=\"status\" data-table-status=\"\"></p></section></j3w1-filterable-table>"
   },
   "i3-window-frame": {
-    "default": "<j3w1-i3-window-frame id=\"example-i3-window-frame-default\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, tiled\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-default-workspace-tab-0\" aria-controls=\"example-i3-window-frame-default-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-default-workspace-tab-1\" aria-controls=\"example-i3-window-frame-default-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-default-workspace-tab-2\" aria-controls=\"example-i3-window-frame-default-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-0\"><div class=\"i3-window-frame-area\">\n    <div class=\"i3-window-frame-window i3-window-frame-focused\" role=\"group\" aria-label=\"Terminal window, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">~/theme — zsh</div>\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n    </div>\n    <div class=\"i3-window-frame-window\" role=\"group\" aria-label=\"Editor window\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">title.js — editor</div>\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\">··</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>",
-    "tabbed": "<j3w1-i3-window-frame id=\"example-i3-window-frame-tabbed\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, tabbed\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-tabbed-workspace-tab-0\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-tabbed-workspace-tab-1\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-tabbed-workspace-tab-2\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-0\"><div class=\"i3-window-frame-area\">\n    <div class=\"i3-window-frame-container i3-window-frame-focused\" role=\"group\" aria-label=\"Tabbed container, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-tabs\" role=\"tablist\" aria-label=\"Windows in the container\">\n        <button class=\"i3-window-frame-tab\" type=\"button\" role=\"tab\" id=\"example-i3-window-frame-tabbed-i3-tab-terminal\" aria-selected=\"true\" aria-controls=\"example-i3-window-frame-tabbed-i3-panel-terminal\" tabindex=\"0\">~/theme — zsh</button>\n        <button class=\"i3-window-frame-tab\" type=\"button\" role=\"tab\" id=\"example-i3-window-frame-tabbed-i3-tab-editor\" aria-selected=\"false\" aria-controls=\"example-i3-window-frame-tabbed-i3-panel-editor\" tabindex=\"-1\">title.js — editor</button>\n      </div>\n      <div class=\"i3-window-frame-panel\" role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-i3-panel-terminal\" aria-labelledby=\"example-i3-window-frame-tabbed-i3-tab-terminal\">\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n      </div>\n      <div class=\"i3-window-frame-panel\" role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-i3-panel-editor\" aria-labelledby=\"example-i3-window-frame-tabbed-i3-tab-editor\" hidden=\"\">\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\">··</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n      </div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>",
-    "floating": "<j3w1-i3-window-frame id=\"example-i3-window-frame-floating\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, with a floating window\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-floating-workspace-tab-0\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-floating-workspace-tab-1\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-floating-workspace-tab-2\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-0\"><div class=\"i3-window-frame-area i3-window-frame-area-floating\">\n    <div class=\"i3-window-frame-window\" role=\"group\" aria-label=\"Terminal window\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">~/theme — zsh</div>\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n    </div>\n    <div class=\"i3-window-frame-window i3-window-frame-floating i3-window-frame-focused\" role=\"group\" aria-label=\"Editor window, floating, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">title.js — editor</div>\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\">··</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>"
+    "default": "<j3w1-i3-window-frame id=\"example-i3-window-frame-default\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, tiled\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-default-workspace-tab-0\" aria-controls=\"example-i3-window-frame-default-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-default-workspace-tab-1\" aria-controls=\"example-i3-window-frame-default-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-default-workspace-tab-2\" aria-controls=\"example-i3-window-frame-default-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-0\"><div class=\"i3-window-frame-area\">\n    <div class=\"i3-window-frame-window i3-window-frame-focused\" role=\"group\" aria-label=\"Terminal window, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">~/theme — zsh</div>\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n    </div>\n    <div class=\"i3-window-frame-window\" role=\"group\" aria-label=\"Editor window\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">title.js — editor</div>\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"··\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>",
+    "tabbed": "<j3w1-i3-window-frame id=\"example-i3-window-frame-tabbed\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, tabbed\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-tabbed-workspace-tab-0\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-tabbed-workspace-tab-1\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-tabbed-workspace-tab-2\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-0\"><div class=\"i3-window-frame-area\">\n    <div class=\"i3-window-frame-container i3-window-frame-focused\" role=\"group\" aria-label=\"Tabbed container, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-tabs\" role=\"tablist\" aria-label=\"Windows in the container\">\n        <button class=\"i3-window-frame-tab\" type=\"button\" role=\"tab\" id=\"example-i3-window-frame-tabbed-i3-tab-terminal\" aria-selected=\"true\" aria-controls=\"example-i3-window-frame-tabbed-i3-panel-terminal\" tabindex=\"0\">~/theme — zsh</button>\n        <button class=\"i3-window-frame-tab\" type=\"button\" role=\"tab\" id=\"example-i3-window-frame-tabbed-i3-tab-editor\" aria-selected=\"false\" aria-controls=\"example-i3-window-frame-tabbed-i3-panel-editor\" tabindex=\"-1\">title.js — editor</button>\n      </div>\n      <div class=\"i3-window-frame-panel\" role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-i3-panel-terminal\" aria-labelledby=\"example-i3-window-frame-tabbed-i3-tab-terminal\">\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n      </div>\n      <div class=\"i3-window-frame-panel\" role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-i3-panel-editor\" aria-labelledby=\"example-i3-window-frame-tabbed-i3-tab-editor\" hidden=\"\">\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"··\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n      </div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>",
+    "floating": "<j3w1-i3-window-frame id=\"example-i3-window-frame-floating\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, with a floating window\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-floating-workspace-tab-0\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-floating-workspace-tab-1\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-floating-workspace-tab-2\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-0\"><div class=\"i3-window-frame-area i3-window-frame-area-floating\">\n    <div class=\"i3-window-frame-window\" role=\"group\" aria-label=\"Terminal window\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">~/theme — zsh</div>\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n    </div>\n    <div class=\"i3-window-frame-window i3-window-frame-floating i3-window-frame-focused\" role=\"group\" aria-label=\"Editor window, floating, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">title.js — editor</div>\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"··\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>"
   },
   "file-browser": {
     "default": "<j3w1-file-browser id=\"example-file-browser-default\"><section class=\"file-browser\" aria-label=\"Workspace files\"><div class=\"file-browser-locations\"><j3w1-tree><ul class=\"tree\" role=\"tree\" aria-label=\"Locations\"><li role=\"treeitem\" tabindex=\"0\" aria-selected=\"true\" data-location=\"all\" id=\"example-file-browser-default-files-all\" data-demo-focus-target=\"\"><span data-tree-label=\"\">All files</span></li><li role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\" data-location=\"source\" id=\"example-file-browser-default-files-source\"><span data-tree-label=\"\">Source</span></li></ul></j3w1-tree></div><div><label for=\"example-file-browser-default-files-query\">Search files</label><input class=\"file-browser-control\" id=\"example-file-browser-default-files-query\" type=\"search\" data-file-query=\"\"><table><caption>Local file examples</caption><thead><tr><th scope=\"col\">Name</th><th scope=\"col\">Kind</th><th scope=\"col\">Size</th></tr></thead><tbody><tr data-file-id=\"app\" data-location=\"source\"><td><button class=\"file-browser-control\" type=\"button\" data-file-open=\"app\">App.vue</button></td><td>Vue component</td><td>4 KB</td></tr><tr data-file-id=\"readme\" data-location=\"docs\"><td><button class=\"file-browser-control\" type=\"button\" data-file-open=\"readme\">README.md</button></td><td>Documentation</td><td>2 KB</td></tr></tbody></table><p role=\"status\" data-file-status=\"\">2 files</p></div></section></j3w1-file-browser>"
diff --git a/packages/ui/dist/examples/code-editor.json b/packages/ui/dist/examples/code-editor.json
index c1636c168..c71c0297a 100644
--- a/packages/ui/dist/examples/code-editor.json
+++ b/packages/ui/dist/examples/code-editor.json
@@ -1,5 +1,5 @@
 {
-  "default": "<j3w1-code-editor id=\"example-code-editor-default\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\">··</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div></j3w1-code-editor>",
-  "markup": "<j3w1-code-editor id=\"example-code-editor-markup\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"frame.html, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;!</span><span class=\"code-editor-kw\">doctype</span> <span class=\"code-editor-attr\">html</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">&lt;!-- window frame specimen --&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">html</span> <span class=\"code-editor-attr\">lang</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"en\"</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">head</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">title</span><span class=\"code-editor-punct\">&gt;</span>j3w1 <span class=\"code-editor-esc\">&amp;mdash;</span> theme<span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">title</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">head</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">body</span> <span class=\"code-editor-attr\">class</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"frame\"</span> <span class=\"code-editor-attr\">data-density</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"compact\"</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct code-editor-bracket\">&lt;</span><span class=\"code-editor-tag\">h1</span><span class=\"code-editor-punct code-editor-bracket\">&gt;</span><span class=\"code-editor-heading\">Window frame</span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">h1</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag code-editor-deprecated\">marquee</span><span class=\"code-editor-punct\">&gt;</span>obsolete<span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag code-editor-deprecated\">marquee</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">p</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-sel\">Focus is a ring; selection is a fill.</span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">p</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-sel\"><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">body</span><span class=\"code-editor-punct\">&gt;</span></span><span class=\"code-editor-ws\" aria-hidden=\"true\">·</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">html</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-invalid\">&lt;</span></span></span></pre>\n</div></j3w1-code-editor>",
-  "folded": "<j3w1-code-editor id=\"example-code-editor-folded\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js with a folded region, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled\"</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\"><span class=\"code-editor-fold-gutter\">›</span>7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span> <span class=\"code-editor-fold\" role=\"img\" aria-label=\"3 folded lines\">⋯</span> <span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span></span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span><span class=\"code-editor-ws\" aria-hidden=\"true\">·</span></span></span></pre>\n</div></j3w1-code-editor>"
+  "default": "<j3w1-code-editor id=\"example-code-editor-default\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"··\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div></j3w1-code-editor>",
+  "markup": "<j3w1-code-editor id=\"example-code-editor-markup\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"frame.html, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;!</span><span class=\"code-editor-kw\">doctype</span> <span class=\"code-editor-attr\">html</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">&lt;!-- window frame specimen --&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">html</span> <span class=\"code-editor-attr\">lang</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"en\"</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">head</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">title</span><span class=\"code-editor-punct\">&gt;</span>j3w1 <span class=\"code-editor-esc\">&amp;mdash;</span> theme<span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">title</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">head</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">body</span> <span class=\"code-editor-attr\">class</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"frame\"</span> <span class=\"code-editor-attr\">data-density</span><span class=\"code-editor-op\">=</span><span class=\"code-editor-str\">\"compact\"</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct code-editor-bracket\">&lt;</span><span class=\"code-editor-tag\">h1</span><span class=\"code-editor-punct code-editor-bracket\">&gt;</span><span class=\"code-editor-heading\">Window frame</span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">h1</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag code-editor-deprecated\">marquee</span><span class=\"code-editor-punct\">&gt;</span>obsolete<span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag code-editor-deprecated\">marquee</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">&lt;</span><span class=\"code-editor-tag\">p</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-sel\">Focus is a ring; selection is a fill.</span><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">p</span><span class=\"code-editor-punct\">&gt;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-sel\"><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">body</span><span class=\"code-editor-punct\">&gt;</span></span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"·\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">&lt;/</span><span class=\"code-editor-tag\">html</span><span class=\"code-editor-punct\">&gt;</span><span class=\"code-editor-invalid\">&lt;</span></span></span></pre>\n</div></j3w1-code-editor>",
+  "folded": "<j3w1-code-editor id=\"example-code-editor-folded\"><div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js with a folded region, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled\"</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\"><span class=\"code-editor-fold-gutter\">›</span>7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span> <span class=\"code-editor-fold\" role=\"img\" aria-label=\"3 folded lines\">⋯</span> <span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span></span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"·\"></span></span></span></pre>\n</div></j3w1-code-editor>"
 }
diff --git a/packages/ui/dist/examples/form-builder.json b/packages/ui/dist/examples/form-builder.json
index 03446a8dd..1cee742fa 100644
--- a/packages/ui/dist/examples/form-builder.json
+++ b/packages/ui/dist/examples/form-builder.json
@@ -1,3 +1,3 @@
 {
-  "default": "<j3w1-form-builder id=\"example-form-builder-default\"><section class=\"form-builder form-tool\" data-builder=\"\" hidden=\"\" aria-label=\"Form definition editor\">\n<div class=\"form-builder-editor\"><label for=\"example-form-builder-default-builder-kind\">Field type<select id=\"example-form-builder-default-builder-kind\" data-kind=\"\" name=\"builder-kind\"><option value=\"text\">Text</option><option value=\"textarea\">Textarea</option><option value=\"select\">Select</option><option value=\"checkbox\">Checkbox</option><option value=\"radio\">Radio</option></select></label><button class=\"button\" type=\"button\" data-add=\"\">Add field</button><label for=\"example-form-builder-default-builder-density\">Preview density<select id=\"example-form-builder-default-builder-density\" data-density-choice=\"\" name=\"builder-density\"><option value=\"compact\">Compact</option><option value=\"comfortable\">Comfortable</option></select></label></div>\n<p data-builder-status=\"\" role=\"status\"></p><p data-empty=\"\">No fields yet. Choose a type and add your first field.</p><ol class=\"form-builder-list\" data-field-list=\"\"></ol>\n<form class=\"form-builder-editor\" data-editor=\"\" novalidate=\"\" hidden=\"\"><h2>Edit selected field</h2><label for=\"example-form-builder-default-builder-label\">Field label<input id=\"example-form-builder-default-builder-label\" name=\"label\" maxlength=\"120\" required=\"\"></label><label for=\"example-form-builder-default-builder-help\">Field help<textarea id=\"example-form-builder-default-builder-help\" name=\"help\" maxlength=\"400\"></textarea></label><label for=\"example-form-builder-default-builder-required\"><input id=\"example-form-builder-default-builder-required\" name=\"required\" type=\"checkbox\">Required field</label><label for=\"example-form-builder-default-builder-options\" data-options-label=\"\">Options JSON<textarea id=\"example-form-builder-default-builder-options\" name=\"options\" rows=\"6\" maxlength=\"65537\" spellcheck=\"false\"></textarea></label><p>Edit option IDs and labels as JSON. Keep each ID when changing its label. Select and radio fields need 1–20 options.</p><div class=\"form-tool-actions\"><button class=\"button\" type=\"submit\">Save field definition</button><button class=\"button button-secondary\" type=\"button\" data-cancel=\"\">Cancel edit</button></div></form>\n<h2>Preview</h2><p>Definition changes clear preview values. Review validates required values and choices.</p><div data-preview=\"\"><section class=\"admin-form form-tool\" data-workflow=\"builder-preview\" hidden=\"\"><h2 class=\"admin-form-title\">Try the local workflow</h2><p>Values stay in this page. Reset clears them. No save request is sent.</p><form novalidate=\"\"><div class=\"alert alert-danger form-tool-summary\" data-errors=\"\" role=\"alert\" tabindex=\"-1\" hidden=\"\"></div><fieldset class=\"form-tool-fields\" data-fields=\"\" aria-label=\"Enter values\"></fieldset><div class=\"form-tool-actions\"><button class=\"button\" type=\"submit\" data-event=\"submit\">Review values</button></div></form><table data-review=\"\" class=\"table\" hidden=\"\"></table><p data-status=\"\" role=\"status\" tabindex=\"-1\" id=\"example-form-builder-default-builder-preview-field-8-workflow-status\"></p><div class=\"form-tool-actions\"><button class=\"button\" type=\"button\" data-event=\"edit\" hidden=\"\">Edit values</button><button class=\"button\" type=\"button\" data-event=\"confirm\" hidden=\"\">Simulate save</button><button class=\"button\" type=\"button\" data-event=\"complete\" hidden=\"\">Complete simulation</button><button class=\"button\" type=\"button\" data-event=\"reset\">Reset values</button></div></section></div>\n<h2>Transfer definition</h2><p>Schema version 1 accepts at most 64 KiB and 20 fields. Invalid imports leave the current definition unchanged. Export excludes entered preview values.</p><div class=\"form-builder-editor\"><label for=\"example-form-builder-default-builder-json\">Definition JSON<textarea id=\"example-form-builder-default-builder-json\" data-json=\"\" rows=\"10\" spellcheck=\"false\" maxlength=\"65537\" name=\"builder-json\"></textarea></label></div><div class=\"form-tool-actions\"><button class=\"button\" type=\"button\" data-export=\"\">Show definition JSON</button><button class=\"button button-secondary\" type=\"button\" data-download=\"\">Download definition</button><button class=\"button button-secondary\" type=\"button\" data-import=\"\">Import definition JSON</button><button class=\"button button-secondary\" type=\"button\" data-reset=\"\">Reset builder</button></div></section><p>The bounded form editor requires JavaScript. Its definition is plain JSON with stable field IDs, labels, help, required flags and explicit option IDs.</p></j3w1-form-builder>"
+  "default": "<j3w1-form-builder id=\"example-form-builder-default\"><section class=\"form-builder form-tool\" data-builder=\"\" hidden=\"\" aria-label=\"Form definition editor\">\n<div class=\"form-builder-editor\"><label for=\"example-form-builder-default-builder-kind\">Field type<select id=\"example-form-builder-default-builder-kind\" data-kind=\"\" name=\"builder-kind\"><option value=\"text\">Text</option><option value=\"textarea\">Textarea</option><option value=\"select\">Select</option><option value=\"checkbox\">Checkbox</option><option value=\"radio\">Radio</option></select></label><button class=\"button button-secondary\" type=\"button\" data-add=\"\">Add field</button><label for=\"example-form-builder-default-builder-density\">Preview density<select id=\"example-form-builder-default-builder-density\" data-density-choice=\"\" name=\"builder-density\"><option value=\"compact\">Compact</option><option value=\"comfortable\">Comfortable</option></select></label></div>\n<p data-builder-status=\"\" role=\"status\"></p><p data-empty=\"\">No fields yet. Choose a type and add your first field.</p><ol class=\"form-builder-list\" data-field-list=\"\"></ol>\n<form class=\"form-builder-editor\" data-editor=\"\" novalidate=\"\" hidden=\"\"><h2>Edit selected field</h2><label for=\"example-form-builder-default-builder-label\">Field label<input id=\"example-form-builder-default-builder-label\" name=\"label\" maxlength=\"120\" required=\"\"></label><label for=\"example-form-builder-default-builder-help\">Field help<textarea id=\"example-form-builder-default-builder-help\" name=\"help\" maxlength=\"400\"></textarea></label><label for=\"example-form-builder-default-builder-required\"><input id=\"example-form-builder-default-builder-required\" name=\"required\" type=\"checkbox\">Required field</label><label for=\"example-form-builder-default-builder-options\" data-options-label=\"\">Options JSON<textarea id=\"example-form-builder-default-builder-options\" name=\"options\" rows=\"6\" maxlength=\"65537\" spellcheck=\"false\"></textarea></label><p>Edit option IDs and labels as JSON. Keep each ID when changing its label. Select and radio fields need 1–20 options.</p><div class=\"form-tool-actions\"><button class=\"button button-secondary\" type=\"submit\">Save field definition</button><button class=\"button button-secondary\" type=\"button\" data-cancel=\"\">Cancel edit</button></div></form>\n<h2>Preview</h2><p>Definition changes clear preview values. Review validates required values and choices.</p><div data-preview=\"\"><section class=\"admin-form form-tool\" data-workflow=\"builder-preview\" hidden=\"\"><h2 class=\"admin-form-title\">Try the local workflow</h2><p>Values stay in this page. Reset clears them. No save request is sent.</p><form novalidate=\"\"><div class=\"alert alert-danger form-tool-summary\" data-errors=\"\" role=\"alert\" tabindex=\"-1\" hidden=\"\"></div><fieldset class=\"form-tool-fields\" data-fields=\"\" aria-label=\"Enter values\"></fieldset><div class=\"form-tool-actions\"><button class=\"button\" type=\"submit\" data-event=\"submit\">Review values</button></div></form><table data-review=\"\" class=\"table\" hidden=\"\"></table><p data-status=\"\" role=\"status\" tabindex=\"-1\" id=\"example-form-builder-default-builder-preview-field-8-workflow-status\"></p><div class=\"form-tool-actions\"><button class=\"button button-secondary\" type=\"button\" data-event=\"edit\" hidden=\"\">Edit values</button><button class=\"button button-secondary\" type=\"button\" data-event=\"confirm\" hidden=\"\">Simulate save</button><button class=\"button button-secondary\" type=\"button\" data-event=\"complete\" hidden=\"\">Complete simulation</button><button class=\"button button-tertiary\" type=\"button\" data-event=\"reset\">Reset values</button></div></section></div>\n<h2>Transfer definition</h2><p>Schema version 1 accepts at most 64 KiB and 20 fields. Invalid imports leave the current definition unchanged. Export excludes entered preview values.</p><div class=\"form-builder-editor\"><label for=\"example-form-builder-default-builder-json\">Definition JSON<textarea id=\"example-form-builder-default-builder-json\" data-json=\"\" rows=\"10\" spellcheck=\"false\" maxlength=\"65537\" name=\"builder-json\"></textarea></label></div><div class=\"form-tool-actions\"><button class=\"button button-secondary\" type=\"button\" data-export=\"\">Show definition JSON</button><button class=\"button button-secondary\" type=\"button\" data-download=\"\">Download definition</button><button class=\"button button-secondary\" type=\"button\" data-import=\"\">Import definition JSON</button><button class=\"button button-secondary\" type=\"button\" data-reset=\"\">Reset builder</button></div></section><p>The bounded form editor requires JavaScript. Its definition is plain JSON with stable field IDs, labels, help, required flags and explicit option IDs.</p></j3w1-form-builder>"
 }
diff --git a/packages/ui/dist/examples/i3-window-frame.json b/packages/ui/dist/examples/i3-window-frame.json
index a054224fa..6044682ce 100644
--- a/packages/ui/dist/examples/i3-window-frame.json
+++ b/packages/ui/dist/examples/i3-window-frame.json
@@ -1,5 +1,5 @@
 {
-  "default": "<j3w1-i3-window-frame id=\"example-i3-window-frame-default\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, tiled\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-default-workspace-tab-0\" aria-controls=\"example-i3-window-frame-default-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-default-workspace-tab-1\" aria-controls=\"example-i3-window-frame-default-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-default-workspace-tab-2\" aria-controls=\"example-i3-window-frame-default-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-0\"><div class=\"i3-window-frame-area\">\n    <div class=\"i3-window-frame-window i3-window-frame-focused\" role=\"group\" aria-label=\"Terminal window, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">~/theme — zsh</div>\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n    </div>\n    <div class=\"i3-window-frame-window\" role=\"group\" aria-label=\"Editor window\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">title.js — editor</div>\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\">··</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>",
-  "tabbed": "<j3w1-i3-window-frame id=\"example-i3-window-frame-tabbed\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, tabbed\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-tabbed-workspace-tab-0\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-tabbed-workspace-tab-1\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-tabbed-workspace-tab-2\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-0\"><div class=\"i3-window-frame-area\">\n    <div class=\"i3-window-frame-container i3-window-frame-focused\" role=\"group\" aria-label=\"Tabbed container, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-tabs\" role=\"tablist\" aria-label=\"Windows in the container\">\n        <button class=\"i3-window-frame-tab\" type=\"button\" role=\"tab\" id=\"example-i3-window-frame-tabbed-i3-tab-terminal\" aria-selected=\"true\" aria-controls=\"example-i3-window-frame-tabbed-i3-panel-terminal\" tabindex=\"0\">~/theme — zsh</button>\n        <button class=\"i3-window-frame-tab\" type=\"button\" role=\"tab\" id=\"example-i3-window-frame-tabbed-i3-tab-editor\" aria-selected=\"false\" aria-controls=\"example-i3-window-frame-tabbed-i3-panel-editor\" tabindex=\"-1\">title.js — editor</button>\n      </div>\n      <div class=\"i3-window-frame-panel\" role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-i3-panel-terminal\" aria-labelledby=\"example-i3-window-frame-tabbed-i3-tab-terminal\">\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n      </div>\n      <div class=\"i3-window-frame-panel\" role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-i3-panel-editor\" aria-labelledby=\"example-i3-window-frame-tabbed-i3-tab-editor\" hidden=\"\">\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\">··</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n      </div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>",
-  "floating": "<j3w1-i3-window-frame id=\"example-i3-window-frame-floating\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, with a floating window\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-floating-workspace-tab-0\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-floating-workspace-tab-1\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-floating-workspace-tab-2\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-0\"><div class=\"i3-window-frame-area i3-window-frame-area-floating\">\n    <div class=\"i3-window-frame-window\" role=\"group\" aria-label=\"Terminal window\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">~/theme — zsh</div>\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n    </div>\n    <div class=\"i3-window-frame-window i3-window-frame-floating i3-window-frame-focused\" role=\"group\" aria-label=\"Editor window, floating, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">title.js — editor</div>\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\">··</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>"
+  "default": "<j3w1-i3-window-frame id=\"example-i3-window-frame-default\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, tiled\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-default-workspace-tab-0\" aria-controls=\"example-i3-window-frame-default-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-default-workspace-tab-1\" aria-controls=\"example-i3-window-frame-default-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-default-workspace-tab-2\" aria-controls=\"example-i3-window-frame-default-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-0\"><div class=\"i3-window-frame-area\">\n    <div class=\"i3-window-frame-window i3-window-frame-focused\" role=\"group\" aria-label=\"Terminal window, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">~/theme — zsh</div>\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n    </div>\n    <div class=\"i3-window-frame-window\" role=\"group\" aria-label=\"Editor window\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">title.js — editor</div>\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"··\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-default-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-default-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>",
+  "tabbed": "<j3w1-i3-window-frame id=\"example-i3-window-frame-tabbed\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, tabbed\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-tabbed-workspace-tab-0\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-tabbed-workspace-tab-1\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-tabbed-workspace-tab-2\" aria-controls=\"example-i3-window-frame-tabbed-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-0\"><div class=\"i3-window-frame-area\">\n    <div class=\"i3-window-frame-container i3-window-frame-focused\" role=\"group\" aria-label=\"Tabbed container, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-tabs\" role=\"tablist\" aria-label=\"Windows in the container\">\n        <button class=\"i3-window-frame-tab\" type=\"button\" role=\"tab\" id=\"example-i3-window-frame-tabbed-i3-tab-terminal\" aria-selected=\"true\" aria-controls=\"example-i3-window-frame-tabbed-i3-panel-terminal\" tabindex=\"0\">~/theme — zsh</button>\n        <button class=\"i3-window-frame-tab\" type=\"button\" role=\"tab\" id=\"example-i3-window-frame-tabbed-i3-tab-editor\" aria-selected=\"false\" aria-controls=\"example-i3-window-frame-tabbed-i3-panel-editor\" tabindex=\"-1\">title.js — editor</button>\n      </div>\n      <div class=\"i3-window-frame-panel\" role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-i3-panel-terminal\" aria-labelledby=\"example-i3-window-frame-tabbed-i3-tab-terminal\">\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n      </div>\n      <div class=\"i3-window-frame-panel\" role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-i3-panel-editor\" aria-labelledby=\"example-i3-window-frame-tabbed-i3-tab-editor\" hidden=\"\">\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"··\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n      </div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-tabbed-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-tabbed-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>",
+  "floating": "<j3w1-i3-window-frame id=\"example-i3-window-frame-floating\"><div class=\"i3-window-frame\" role=\"region\" aria-label=\"Workstation, workspace 1: theme, with a floating window\">\n  <div class=\"i3-window-frame-bar\" role=\"group\" aria-label=\"i3 bar\">\n    <div class=\"i3-window-frame-workspaces\" role=\"tablist\" aria-label=\"Workspaces\">\n      <button class=\"i3-window-frame-workspace\" type=\"button\" role=\"tab\" aria-selected=\"true\" tabindex=\"0\" id=\"example-i3-window-frame-floating-workspace-tab-0\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-0\">1:theme</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-demo-target\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-floating-workspace-tab-1\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-1\">2:reference</button>\n      <button class=\"i3-window-frame-workspace i3-window-frame-workspace-urgent\" type=\"button\" role=\"tab\" aria-selected=\"false\" tabindex=\"-1\" id=\"example-i3-window-frame-floating-workspace-tab-2\" aria-controls=\"example-i3-window-frame-floating-workspace-panel-2\">3:ports<span class=\"i3-window-frame-urgent-mark\">!<span class=\"sr-only\"> urgent</span></span></button>\n    </div>\n    <div class=\"i3-window-frame-status\" role=\"group\" lang=\"zh\" aria-label=\"状态\">\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 处理器 12%</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 内存储器 3.1G</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 局域网 up</span>\n      <span class=\"i3-window-frame-block\"><span class=\"i3-window-frame-glyph\" aria-hidden=\"true\"></span> 电池 87%</span>\n      <time class=\"i3-window-frame-block i3-window-frame-clock\" datetime=\"2026-09-06T14:32:07\">09月06号 14时32分07秒</time>\n    </div>\n  </div>\n  <section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-0\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-0\"><div class=\"i3-window-frame-area i3-window-frame-area-floating\">\n    <div class=\"i3-window-frame-window\" role=\"group\" aria-label=\"Terminal window\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">~/theme — zsh</div>\n<pre class=\"terminal terminal-transcript\" role=\"log\" aria-label=\"Shell transcript\" tabindex=\"0\"><span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> ls -l ports</span>\n<span class=\"terminal-line\">total 5</span>\n<span class=\"terminal-line\">drwxr-xr-x  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">alacritty</span></span>\n<span class=\"terminal-line\">drwx------  2 j3w1 j3w1  4096 Sep  6 09:12 <span class=\"terminal-fg-5 terminal-bold\">gtk</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1  1180 Sep  6 09:12 <span class=\"terminal-sel\">README.md</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-sel\">-rwxr-xr-x  1 j3w1 j3w1   512 Sep  6 09:12 </span><span class=\"terminal-sel terminal-fg-3\">verify.sh</span></span>\n<span class=\"terminal-line\">lrwxrwxrwx  1 j3w1 j3w1    11 Sep  6 09:12 <span class=\"terminal-fg-7\">xresources</span> -&gt; <span class=\"terminal-fg-2\">../tokens/</span></span>\n<span class=\"terminal-line\">-rw-r--r--  1 j3w1 j3w1 20480 Sep  6 09:12 <span class=\"terminal-fg-11\">evidence.tar.gz</span></span>\n<span class=\"terminal-line\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> cat ports/gtk/port.json</span>\n<span class=\"terminal-line terminal-fg-5\">cat: ports/gtk/port.json: No such file or directory</span>\n<span class=\"terminal-line terminal-line-cursor\"><span class=\"terminal-prompt\"><span class=\"terminal-prompt-path\"> ~/theme </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-path\" aria-hidden=\"true\">▶</span><span class=\"terminal-prompt-branch\"> main </span><span class=\"terminal-prompt-arrow terminal-prompt-arrow-branch\" aria-hidden=\"true\">▶</span></span> npm run validate<span class=\"terminal-cursor\" aria-hidden=\"true\"> </span></span></pre>\n    </div>\n    <div class=\"i3-window-frame-window i3-window-frame-floating i3-window-frame-focused\" role=\"group\" aria-label=\"Editor window, floating, focused\" tabindex=\"0\">\n      <div class=\"i3-window-frame-title\">title.js — editor</div>\n<div class=\"code-editor\" role=\"textbox\" aria-multiline=\"true\" aria-readonly=\"true\" aria-label=\"title.js, read-only\" tabindex=\"0\">\n  <pre class=\"code-editor-pre\"><span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">1</span><span class=\"code-editor-text\"><span class=\"code-editor-cm\">// Compose the window title of the focused container.</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">2</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">import</span> <span class=\"code-editor-punct\">{</span> <span class=\"code-editor-type\">Container</span> <span class=\"code-editor-punct\">}</span> <span class=\"code-editor-kw\">from</span> <span class=\"code-editor-str\">\"./tree.js\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">3</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-const\">MAX_LENGTH</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">48</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-ws\" aria-hidden=\"true\" data-whitespace=\"··\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">4</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">export</span> <span class=\"code-editor-kw\">function</span> <span class=\"code-editor-fn\">title</span><span class=\"code-editor-punct code-editor-bracket\">(</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct code-editor-bracket\">)</span> <span class=\"code-editor-punct\">{</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">5</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">name</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">name</span> <span class=\"code-editor-op\">??</span> <span class=\"code-editor-str\">\"untitled<span class=\"code-editor-esc\">…</span>\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line code-editor-line-current\"><span class=\"code-editor-ln\" aria-hidden=\"true\">6</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">let</span> <span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-str\">`${</span><span class=\"code-editor-var\">name</span><span class=\"code-editor-str\">} (${</span><span class=\"code-editor-var\">container</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">children</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span><span class=\"code-editor-str\">})`</span><span class=\"code-editor-punct\">;</span><span class=\"code-editor-caret\" aria-hidden=\"true\"></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">7</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">if</span> <span class=\"code-editor-punct\">(</span><span class=\"code-editor-sel\"><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-prop\">length</span> <span class=\"code-editor-op\">&gt;</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span> <span class=\"code-editor-punct\">{</span></span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">8</span><span class=\"code-editor-text\"><span class=\"code-editor-sel\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-indent\">  </span><span class=\"code-editor-var\">label</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">.</span><span class=\"code-editor-fn\">slice</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-num\">0</span><span class=\"code-editor-punct\">,</span> <span class=\"code-editor-const\">MAX_LENGTH</span><span class=\"code-editor-punct\">)</span></span> <span class=\"code-editor-op\">+</span> <span class=\"code-editor-str\">\"…\"</span><span class=\"code-editor-punct\">;</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">9</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">10</span><span class=\"code-editor-text\"><span class=\"code-editor-indent\">  </span><span class=\"code-editor-kw\">return</span> <span class=\"code-editor-fn code-editor-deprecated\">escape</span><span class=\"code-editor-punct\">(</span><span class=\"code-editor-var\">label</span><span class=\"code-editor-punct\">);</span> <span class=\"code-editor-cm\">/* escape() is deprecated */</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">11</span><span class=\"code-editor-text\"><span class=\"code-editor-punct\">}</span></span></span>\n<span class=\"code-editor-line\"><span class=\"code-editor-ln\" aria-hidden=\"true\">12</span><span class=\"code-editor-text\"><span class=\"code-editor-kw\">const</span> <span class=\"code-editor-var\">broken</span> <span class=\"code-editor-op\">=</span> <span class=\"code-editor-num\">0x1</span><span class=\"code-editor-invalid\">G</span><span class=\"code-editor-punct\">;</span></span></span></pre>\n</div>\n    </div>\n  </div></section>\n<section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-1\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-1\" hidden=\"\"><p>Workspace 2 is empty.</p></section><section role=\"tabpanel\" id=\"example-i3-window-frame-floating-workspace-panel-2\" aria-labelledby=\"example-i3-window-frame-floating-workspace-tab-2\" hidden=\"\"><p>Workspace 3 is empty.</p></section></div></j3w1-i3-window-frame>"
 }
diff --git a/packages/ui/dist/frameworks/astro/src/pages/index.astro b/packages/ui/dist/frameworks/astro/src/pages/index.astro
index 845bc5158..078d25633 100644
--- a/packages/ui/dist/frameworks/astro/src/pages/index.astro
+++ b/packages/ui/dist/frameworks/astro/src/pages/index.astro
@@ -4,4 +4,4 @@ import '@j3w1/ui/styles/button.css';
 import '@j3w1/ui/styles/text-field.css';
 import '@j3w1/ui/styles/checkbox.css';
 ---
-<!doctype html><html lang="en" data-density="comfortable"><head><meta charset="utf-8"/><title>Independent consumer</title><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body><main><h1>Independent consumer</h1><form id="consumer-form"><fieldset id="fields"><j3w1-text-field id="field"><div class="text-field"><label class="text-field-label" for="project">Project</label><input class="text-field-input" id="project" name="project" value="Initial" required></div></j3w1-text-field><j3w1-checkbox id="check"><label class="checkbox checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="enabled" value="yes"><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Enabled</span></label></j3w1-checkbox><j3w1-button><button class="button" type="submit">Save</button></j3w1-button><j3w1-button><button class="button button-secondary" type="reset">Reset</button></j3w1-button></fieldset></form><p role="status" id="result">Ready</p></main><script>import '@j3w1/ui/register/button';import '@j3w1/ui/register/text-field';import '@j3w1/ui/register/checkbox';document.querySelector('form').addEventListener('submit',event=>{event.preventDefault();document.querySelector('#result').textContent=JSON.stringify(Object.fromEntries(new FormData(event.currentTarget)));});</script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en" data-density="compact"><head><meta charset="utf-8"/><title>Independent consumer</title><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body><main><h1>Independent consumer</h1><form id="consumer-form"><fieldset id="fields"><j3w1-text-field id="field"><div class="text-field"><label class="text-field-label" for="project">Project</label><input class="text-field-input" id="project" name="project" value="Initial" required></div></j3w1-text-field><j3w1-checkbox id="check"><label class="checkbox checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="enabled" value="yes"><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Enabled</span></label></j3w1-checkbox><j3w1-button><button class="button" type="submit">Save</button></j3w1-button><j3w1-button><button class="button button-secondary" type="reset">Reset</button></j3w1-button></fieldset></form><p role="status" id="result">Ready</p></main><script>import '@j3w1/ui/register/button';import '@j3w1/ui/register/text-field';import '@j3w1/ui/register/checkbox';document.querySelector('form').addEventListener('submit',event=>{event.preventDefault();document.querySelector('#result').textContent=JSON.stringify(Object.fromEntries(new FormData(event.currentTarget)));});</script></body></html>
\ No newline at end of file
diff --git a/packages/ui/dist/frameworks/html/index.html b/packages/ui/dist/frameworks/html/index.html
index 516ed2623..050af313f 100644
--- a/packages/ui/dist/frameworks/html/index.html
+++ b/packages/ui/dist/frameworks/html/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en" data-density="comfortable"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Independent consumer</title></head><body><main><h1>Independent consumer</h1><form id="consumer-form"><fieldset id="fields"><j3w1-text-field id="field"><div class="text-field"><label class="text-field-label" for="project">Project</label><input class="text-field-input" id="project" name="project" value="Initial" required></div></j3w1-text-field><j3w1-checkbox id="check"><label class="checkbox checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="enabled" value="yes"><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Enabled</span></label></j3w1-checkbox><j3w1-button><button class="button" type="submit">Save</button></j3w1-button><j3w1-button><button class="button button-secondary" type="reset">Reset</button></j3w1-button></fieldset></form><p role="status" id="result">Ready</p></main><script type="module" src="./main.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en" data-density="compact"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Independent consumer</title></head><body><main><h1>Independent consumer</h1><form id="consumer-form"><fieldset id="fields"><j3w1-text-field id="field"><div class="text-field"><label class="text-field-label" for="project">Project</label><input class="text-field-input" id="project" name="project" value="Initial" required></div></j3w1-text-field><j3w1-checkbox id="check"><label class="checkbox checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="enabled" value="yes"><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Enabled</span></label></j3w1-checkbox><j3w1-button><button class="button" type="submit">Save</button></j3w1-button><j3w1-button><button class="button button-secondary" type="reset">Reset</button></j3w1-button></fieldset></form><p role="status" id="result">Ready</p></main><script type="module" src="./main.js"></script></body></html>
\ No newline at end of file
diff --git a/packages/ui/dist/frameworks/react/index.html b/packages/ui/dist/frameworks/react/index.html
index 6c28cda35..3f02d3671 100644
--- a/packages/ui/dist/frameworks/react/index.html
+++ b/packages/ui/dist/frameworks/react/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en" data-density="comfortable"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Independent consumer</title></head><body><div id="app"></div><script type="module" src="./main.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en" data-density="compact"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Independent consumer</title></head><body><div id="app"></div><script type="module" src="./main.js"></script></body></html>
\ No newline at end of file
diff --git a/packages/ui/dist/frameworks/vue/index.html b/packages/ui/dist/frameworks/vue/index.html
index 6c28cda35..3f02d3671 100644
--- a/packages/ui/dist/frameworks/vue/index.html
+++ b/packages/ui/dist/frameworks/vue/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en" data-density="comfortable"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Independent consumer</title></head><body><div id="app"></div><script type="module" src="./main.js"></script></body></html>
\ No newline at end of file
+<!doctype html><html lang="en" data-density="compact"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Independent consumer</title></head><body><div id="app"></div><script type="module" src="./main.js"></script></body></html>
\ No newline at end of file
diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index eb9a41fd4..07faa7d3c 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -21,7 +21,7 @@ import { J3w1TimePicker } from "./components/time-picker.js";
 import { J3w1FileInput } from "./components/file-input.js";
 import { J3w1Repeater } from "./components/repeater.js";
 import { J3w1Wizard } from "./components/wizard.js";
-import { t as J3w1FormBuilder } from "./chunks/form-builder-Dkweb1xD.js";
+import { t as J3w1FormBuilder } from "./chunks/form-builder-BKs59W9y.js";
 import { J3w1Tabs } from "./components/tabs.js";
 import { J3w1Breadcrumbs } from "./components/breadcrumbs.js";
 import { J3w1Pagination } from "./components/pagination.js";
diff --git a/packages/ui/dist/manifest.json b/packages/ui/dist/manifest.json
index 307a78af9..d5781cac5 100644
--- a/packages/ui/dist/manifest.json
+++ b/packages/ui/dist/manifest.json
@@ -516,18 +516,18 @@
       "copy": {
         "directory": "copy/button/",
         "files": {
-          "runtime/register/button.js": "sha256-nrgSUK+JnRhipV1b5VKANBtP+ap6ANYd4xnpZYpHYM0=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/button.js": "sha256-uMPPvidQWPs9e0OGW6Q+cI2izylinOUSgrBAM94vxAA=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-79ycU5ojNv1Z2yHzJ6KXDmshFL1we3mQNOoIwfMXnyg=",
+          "runtime/register/button.js": "sha256-HvNFbu03EVUxXcYT4la11XNeC522dyJdNi3USEnMuL0=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/button.js": "sha256-csyoBHNGYp8/JTgXnOjZuGEFG9u6KytBLHY3MtJdxcs=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-3CHgfHOT+xBve253iRY/PvSWDiyrTR4uMxiCy2jC7OQ=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-kLEcMMhF4Tv+byKkImEgGIqqR+QYh6uOOCz/mg5hkPs=",
-          "index.html": "sha256-uj00vnflsiaqN+2apiLHqJpCJQQxYasFb7KAWllw5dM=",
+          "index.html": "sha256-O3BLqD/CIvh8B0MWobTc8e8XgjfKiYym6Ekh+jLDiGU=",
           "README.md": "sha256-q0HhyjwcljqPHR5pUVYK1uw9OCz+qKStetrXmYwvBR0=",
-          "manifest.json": "sha256-Bat7CbXli1BVcEmYLAyJ42OAFKhWDW0Y3N9ebMbsR+k="
+          "manifest.json": "sha256-fC+Ph4zr0NqxpT/nYbZS8dMMVe6RUzS7yYl7a8ZXfDY="
         }
       }
     },
@@ -629,7 +629,7 @@
         "root.bg-toggled": "color.interaction.selection.bg",
         "root.text-toggled": "color.interaction.selection.text",
         "root.border-toggled": "color.border.selected-indicator",
-        "root.ring-toggled": "color.interaction.focus.ring-container",
+        "root.ring-toggled": "color.interaction.focus.ring",
         "root.text-disabled": "color.text.disabled",
         "root.bg-disabled": "color.interaction.disabled.bg",
         "root.border-disabled": "color.border.disabled",
@@ -653,7 +653,6 @@
           "color.border.selected-indicator",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring-container",
           "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
@@ -689,7 +688,6 @@
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.focus.ring-container",
           "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
@@ -707,7 +705,6 @@
           "color.primitive.red.800",
           "color.primitive.rose.300",
           "color.primitive.rose.700",
-          "color.primitive.rose.800",
           "color.surface.canvas",
           "color.text.default",
           "color.text.disabled",
@@ -777,11 +774,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.pressed.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -898,18 +890,18 @@
       "copy": {
         "directory": "copy/icon-button/",
         "files": {
-          "runtime/register/icon-button.js": "sha256-UWU2VaBVj42dfmtJg9c1yLb2JZ0ObB4FemDN0vyV/uM=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/icon-button.js": "sha256-GQlt7gcCt926nsvoxCtYRyCMMgdI9IZNyV0+40gv/RQ=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-oGnsvpT9vCQjmmGSRaHOeQIJDUE5f5LrSWgR9jdM6/s=",
+          "runtime/register/icon-button.js": "sha256-L08i/ocUFPtCTSEsrOlL0bHzGs89QBIj/rBasLRJtLo=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/icon-button.js": "sha256-vf1OEF/kOZCVO/ZtfRZNwQ9lE6RvDSCB/Ra1MK1iFVI=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-il6XyTxz1/FNWyp/lAP2zeoQKrY/yezCXO7+BWH4SLU=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-Zd5z+/mavK2J24Rl+RQLGhMT+nTLwoOf3bAJevwrz7s=",
-          "index.html": "sha256-1y5bo9Aq1K+z6CIM0Ef/YeTqqv1dTsU0UQCeeo8cxrs=",
+          "index.html": "sha256-KThGCU4j/urAhf3dBSdh3EZIfGyU5sUJD2tDkaUj7pU=",
           "README.md": "sha256-kfL9rqvRiTy+cXrhgmDnHSmrAvPR1uA5rKGMQPP1UIM=",
-          "manifest.json": "sha256-Yq0utAFthUSAFiDa7lcg55cQhUdK+H2LnBgt5a/6/C0="
+          "manifest.json": "sha256-PtLPNMTcOcV3bfqclq1ktR8kldC1sdwlqBmiOf0F3a4="
         }
       }
     },
@@ -998,7 +990,7 @@
         "root.text": "color.text.link",
         "root.underline": "color.text.link-underline",
         "root.text-hover": "color.text.link-hover",
-        "root.bg-hover": "color.interaction.hover.bg-strong",
+        "root.bg-hover": "color.interaction.hover.bg",
         "root.ring": "color.interaction.focus.ring",
         "root.text-visited": "color.text.link",
         "root.text-current": "color.text.bright",
@@ -1017,7 +1009,7 @@
           "border.width.emphasis",
           "color.border.selected-indicator",
           "color.interaction.drop-target",
-          "color.interaction.hover.bg-strong",
+          "color.interaction.hover.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -1049,15 +1041,15 @@
           "color.border.selected-indicator",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.hover.bg-strong",
+          "color.interaction.hover.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
           "color.primitive.ink.0",
+          "color.primitive.ink.40",
           "color.primitive.paper.90",
           "color.primitive.red.100",
-          "color.primitive.red.150",
           "color.primitive.red.350",
           "color.primitive.red.750",
           "color.primitive.red.800",
@@ -1106,7 +1098,7 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.hover.bg-strong": {
+          "color.interaction.hover.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -1237,18 +1229,18 @@
       "copy": {
         "directory": "copy/link/",
         "files": {
-          "runtime/register/link.js": "sha256-sR0lpvEqWio1+xbGZ5p+TKd03qMnXyE+UkbdxPPGD9k=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/link.js": "sha256-WC8yN3SdZF28B84F96AQc4WHvgrfmotEdEXUDdPx+gI=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-bMMi6OLOyxVGAoiDlHUR/PYvzH66VbZ4i/UAzrXw4yo=",
+          "runtime/register/link.js": "sha256-U3xi1OrLtFVeA80lAjw3YJnW9ACONTzsce1B9Xf844w=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/link.js": "sha256-bR26HhC67XHGaYwnQAazew60MupqT70YRgV+2U5TNxA=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-uxvP2GjnvVzGp+CHY0D7UPQ+7qXQiFem1DAnSc7jCyY=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-I9IW2mf0VnX5LtCoHDI29AJHW7PXUxnRReiAbsbd094=",
-          "index.html": "sha256-kh0VS0IbzhJnHVnQwZQ2ZRbX2qADJqm2SjicvR49IB0=",
+          "index.html": "sha256-3ig1s+AQmoMBXGTeRFYZnQvO+kBuTk2gzuIniK+u1Rc=",
           "README.md": "sha256-x8NFY5DSM/rYjOcAeTMFjFuNeI2xoG8yxyGfTnk8/wk=",
-          "manifest.json": "sha256-VtFCGcmp+kAitC5o4ewjNT824WaoxY3/igfHlJhH0uA="
+          "manifest.json": "sha256-b0MFB2qvm1o9aggqaNrXAQBeleOiTekucpU8MsTxdK8="
         }
       }
     },
@@ -1336,7 +1328,12 @@
         "root.border": "color.border.control",
         "heading.text": "color.text.bright",
         "secondary.text": "color.text.muted",
-        "control.bg": "color.surface.input",
+        "control.bg": "color.action.secondary.bg",
+        "control.text": "color.action.secondary.text",
+        "control.border": "color.action.secondary.border",
+        "control.bg-hover": "color.action.secondary.hover-bg",
+        "control.bg-active": "color.action.secondary.pressed-bg",
+        "control.border-active": "color.border.active",
         "control.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-color-border-disabled": "color.border.disabled",
@@ -1344,9 +1341,9 @@
         "dependency.role-color-text-disabled": "color.text.disabled",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-4": "space.4",
         "dependency.role-space-8": "space.8"
       },
@@ -1360,11 +1357,33 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
           "color.border.disabled",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -1375,13 +1394,17 @@
           "color.text.default",
           "color.text.disabled",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -1390,39 +1413,77 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
           "color.border.disabled",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.primitive.alpha.transparent",
           "color.primitive.ink.0",
           "color.primitive.ink.28",
           "color.primitive.ink.30",
+          "color.primitive.ink.40",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
+          "color.primitive.red.150",
           "color.primitive.red.200",
           "color.primitive.red.350",
+          "color.primitive.red.400",
+          "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
+          "color.primitive.red.850",
           "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.700",
+          "color.primitive.rose.800",
           "color.surface.canvas",
           "color.surface.default",
           "color.surface.input",
+          "color.text.bright",
           "color.text.default",
           "color.text.disabled",
+          "color.text.on-action",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -1439,6 +1500,106 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.destructive.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.active": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.control": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -1466,6 +1627,16 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.focus.ring-container": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.interaction.pressed.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -1516,11 +1687,31 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.comfortable.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "density.compact.control-height": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.compact.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -1536,17 +1727,17 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "radius.none": {
+          "motion.duration.fast": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.12": {
+          "radius.none": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
+          "space.12": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -1577,18 +1768,18 @@
       "copy": {
         "directory": "copy/button-group/",
         "files": {
-          "runtime/register/button-group.js": "sha256-iOfzUy8ZfhYmriDjbhxJtVBL2w+EPgppfO8UNoOm6QM=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/button-group.js": "sha256-9kyXdp1HjHBA1/8MAvS/4B8TzQnyUUIVFbxkMteeCH4=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-f5VJ2bwUNXUnsb5AcdxUYbcOC7PeghM/cnXvDSuGuMs=",
+          "runtime/register/button-group.js": "sha256-n7o1qzR7ijgCLKarzz6j0E+PWPYtlemBEaNgIZwu2R4=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/button-group.js": "sha256-aYOeTtqsQuXqHLxIh17+FGxd0WuETY31YqUOFh32A4A=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-0HQ2nfSUmtlZV8Bwsob1wBnVODkxbeI16OqeME3hc2M=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-4NLobHuAfZnWUQDNQ3ENH9ucyjTTUTD6gk0XV7SHGng=",
-          "index.html": "sha256-jp7d1/nw1z4Jpji1Vc8gp8BdBvkGTLC7tdVzkGSKG28=",
+          "index.html": "sha256-9LPOwo7I6LrlkFlPCMTTeH5e5/ncW+/6Qpk6VBEoVnI=",
           "README.md": "sha256-lxk9uEo0CDVb02dn3zqLATkEEbC7gk0mkkX9yRpWCC8=",
-          "manifest.json": "sha256-YKE2o9BZmy5u6eQtlL6F7qjaDs3StPobS7MNVotT0KI="
+          "manifest.json": "sha256-InnBod9qxTqZB9qGW3Qa9YX4EcdXhazIz+8TN5ZeN/c="
         }
       }
     },
@@ -1695,7 +1886,6 @@
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
         "dependency.role-space-16": "space.16",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-24": "space.24",
         "dependency.role-space-4": "space.4",
         "dependency.role-space-8": "space.8"
@@ -1719,7 +1909,6 @@
           "color.border.disabled",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.selection.bg",
@@ -1734,6 +1923,7 @@
           "color.text.bright",
           "color.text.default",
           "color.text.disabled",
+          "color.text.muted",
           "density.comfortable.control-height",
           "density.comfortable.icon",
           "density.compact.control-height",
@@ -1748,7 +1938,6 @@
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.24",
           "space.32",
           "space.4",
@@ -1784,6 +1973,7 @@
           "color.primitive.red.850",
           "color.primitive.rose.300",
           "color.primitive.rose.350",
+          "color.primitive.rose.600",
           "color.primitive.rose.700",
           "color.primitive.rose.800",
           "color.status.danger.border",
@@ -1794,6 +1984,7 @@
           "color.text.bright",
           "color.text.default",
           "color.text.disabled",
+          "color.text.muted",
           "color.text.on-action",
           "density.comfortable.control-height",
           "density.comfortable.icon",
@@ -1809,7 +2000,6 @@
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.24",
           "space.32",
           "space.4",
@@ -1864,11 +2054,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.focus.ring-container": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -1939,6 +2124,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.text.muted": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "density.comfortable.control-height": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -2009,11 +2199,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.24": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -2045,18 +2230,18 @@
       "copy": {
         "directory": "copy/segmented-control/",
         "files": {
-          "runtime/register/segmented-control.js": "sha256-Hp1iRTlBtVJffhsTkXPWleCnHa8ag50yeW35VsnXQ4c=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/segmented-control.js": "sha256-xN4DQLVyEFJSMDcuTBBrd//fR3iSCEjqnQHkYV4GtbE=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-Dq4r47NU2yi+AVRCcT0g+RV5YoPw7Z3JUhDMJqtUoJM=",
+          "runtime/register/segmented-control.js": "sha256-n6tsq/njNAYhqF4fvBMTvNQc+KRA4dsIBCmrUsrTA+U=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/segmented-control.js": "sha256-8hAeFwje9ZkB0c6k2tQrV2hjw4TCznTY3w0tOFD/egQ=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-DOkYci+UZ8ocvIWeqGN9xO6tCAzSiesUej367W8BMAI=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-/y5XrVYeuiIc2/pZ/wdJWuadUAGF48in7tED7hWQGYI=",
-          "index.html": "sha256-zUD5N3s3EYsmNmV+t33T6lt+kNsDMoRbcdyTYDikNPI=",
+          "index.html": "sha256-1knSx3CNDwcXYtsJuGWn26xP1MjuCfSw99/6QgvIyBM=",
           "README.md": "sha256-lEaJfO3PJMUKPPqSK45yRRL6euErAHItarIyeoshEI4=",
-          "manifest.json": "sha256-gpupFMlyzlByXEuOUk8kQDsQs4jv/kIEQOZAiz6zMgQ="
+          "manifest.json": "sha256-U8QmrR6N2BeyWJK8mugWaa5YUyIDeprteAt3NLlb4o8="
         }
       }
     },
@@ -2436,18 +2621,18 @@
       "copy": {
         "directory": "copy/field/",
         "files": {
-          "runtime/register/field.js": "sha256-XVffQJ1x1BaYIujyxerGMhRVXOVJvdiFmAKkTglUyC8=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/field.js": "sha256-pEHbl120kbYNPym5N03ZxIzOQFPHyq+rELTr9RnR2tg=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-Rd3CCjOeRNdq9v3ql8A+P+nyw3MOp7Fa0LUD8UqBzFA=",
+          "runtime/register/field.js": "sha256-zLQtzqVvRVMiR9nicBMgkx8zeeoejrZolk/zDj6Q1Q4=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/field.js": "sha256-ummTNywyrj12MoNMHDD5qiPFCif8xG24RwdhXXF7LnU=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-NdGAWLleLWawKN47P/spgrR/kdjbB/c8l7xBXcLxIoI=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-M+Faw3Q4PMYCRgzzkpyGYO6m3Sefbyj3JZ3/wdlvGPU=",
-          "index.html": "sha256-60Xj3vT6YA5V4cnFFqd+JceMzjQ4nZCBnBjOt3OId+A=",
+          "index.html": "sha256-9Oc3cWMsPHjFbRxnXV+vSB2DCa377qyZ5xvP9m6Gn3s=",
           "README.md": "sha256-AzjdGpWnzYlGi9+vtMZD2GQ180dH8au7cLFaahlKJZw=",
-          "manifest.json": "sha256-GQ3tkXxmRfI41HNyehqJhHunv4ftTZccXD8irv00Nxo="
+          "manifest.json": "sha256-LFCmagaJ5RK5WCMosMvlvxKHUHt1uy1/8mZq88cgt9A="
         }
       }
     },
@@ -2989,18 +3174,18 @@
       "copy": {
         "directory": "copy/text-field/",
         "files": {
-          "runtime/register/text-field.js": "sha256-DD+ctMlKClOK6B/glshiJwIjKilewzY171GvKtVGf1A=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/text-field.js": "sha256-6f5tLWwF57IFY+uH5zM0afiU3g09PW3M4772zC7zD4Q=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-Y3xQDYeeCQmNtobwOfTiTh/OVHOCJt5If76c4411/ns=",
+          "runtime/register/text-field.js": "sha256-gmqyzVDUD/VCnOF5nDRA0n1F4I7q7lE02AdZeBCFrUk=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/text-field.js": "sha256-4c47ee0iFW2YWW+dVR1PBSJMwOOa5rmKhJSalXzm+Zo=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-LugCfo9ZckPpZogBcNDZlTUOev4kjUm9Et1bzrVzJ+A=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-R8UtNVXLOQSMMT+NPAGht8BHx8b1yIjvTii2pQlPs8k=",
-          "index.html": "sha256-J9hbLzXuEnbSdeQVzpl5q51KXvGGqGz+Y21d3vAb3a4=",
+          "index.html": "sha256-ss2KbC0xuZHLx75wVTAJ1qD3+NlEUPn/1dOG4DGQX1g=",
           "README.md": "sha256-U5UskFkuRc314VHTU09nhnEvLqV//5UXlnD2tS0RftI=",
-          "manifest.json": "sha256-NnrVBWko4HWPhGkBoIYnMm5jYnXwd76OdbC8XdlUoFc="
+          "manifest.json": "sha256-QVFw6clgmhGPRFOGc9gq7zUsnex503DgVurd5gZjUHo="
         }
       }
     },
@@ -3499,18 +3684,18 @@
       "copy": {
         "directory": "copy/textarea/",
         "files": {
-          "runtime/register/textarea.js": "sha256-H+BMjmdgnMxVEA9KvLSSKoOlHTAH91Qy7+pjUiTlgEE=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/textarea.js": "sha256-qJqDEskuaVeBUFjefVF+KSbJV3s6vpaKCtd4aQ4QtoY=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-BbcGdXHTnD7C55UItp05tibzn6AUyioSMT0hgk45J68=",
+          "runtime/register/textarea.js": "sha256-OGjZrk++zzTI91HXv7chKm86kRb5xICVcoOOdMidF2g=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/textarea.js": "sha256-pi3Oj4itdBVYU/EaRSZ64BqAEsBdeUH4LCG2kwSUKfw=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-mb8M4759fIYX3Wie6cMYfT3+8rTtVkhxg9jNUrssylc=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-FrTRU04fY9wZ6rThXepEiAOHAf/WPEcefiPDsYvSLsM=",
-          "index.html": "sha256-xM2w2jkYyi5BE0Nc6YGqICrh5wAW+DKYGmHHjEB1tOM=",
+          "index.html": "sha256-O3FxWIEbLMDDY8Ok2G+bKB16TiTYtpgkOAaF9Q1gYYo=",
           "README.md": "sha256-F6nGVVbKhFVOmZH/GiI2JV5yeoVGMJCFzjcytVdyGrs=",
-          "manifest.json": "sha256-VeZRrTxwhFU2bJcDBQUPI68/dFzyc1GVu0w9WcbtTXU="
+          "manifest.json": "sha256-9OiLMOutk7sDFK/BKt3rW4+t7B0HZ+lVnlSIJqI0dFc="
         }
       }
     },
@@ -4123,18 +4308,18 @@
       "copy": {
         "directory": "copy/select/",
         "files": {
-          "runtime/register/select.js": "sha256-zXXuJRnrp9EVnk1A8VpgUzF/JPShcAImY9zRc6nQasQ=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/select.js": "sha256-yyq0jsJOysQGTPpFoA1C1aRWSIukrk+M4Ro2ZwCyWbw=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-F7S6++WxoGrwiPfTq2NRQciL64rhre0zZKEhwee9I1E=",
+          "runtime/register/select.js": "sha256-TN7apnaEDR69Eobpnesx4c3Yr2iU33xNGj/q9i+nFtw=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/select.js": "sha256-QSO5F4fiwtnnIHZ9/a9n62yVZRlGUIofNkw2oXYIzGY=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-ThIndr85n+voMGPm5jrL7fIGCICUMso0Ljr2/CRyupI=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-1rMGJynWvvm/FG3mKaD7Cc+QHA+zhkGFyc7tL4Ul37Q=",
-          "index.html": "sha256-f4rQyCq7pkNwF1oV2xWbeCAut4dwtAt0CPyZLBiz+1Y=",
+          "index.html": "sha256-qUab8G+JxhJZ5W/BmBgl23HVr/q8JLQmyIi5tTTX4JU=",
           "README.md": "sha256-MrNAdB126mt16m2mdh0VynM3ujESd5+tjBkbyYHVpQw=",
-          "manifest.json": "sha256-Y1NfQmSIof6fmELT3rkfGZDSCBfjNPDEpyzctLVkgHI="
+          "manifest.json": "sha256-X8ClgBgnj81zkUxVchrAKunE4At1HgKWTlGhDnBa0PA="
         }
       }
     },
@@ -4631,18 +4816,18 @@
       "copy": {
         "directory": "copy/checkbox/",
         "files": {
-          "runtime/register/checkbox.js": "sha256-Bcfx68O9tVUsOU2UXt39Iw36ZluRIGYHI88jMpSDEjk=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/checkbox.js": "sha256-dKDUoVoQi9btazDX3FlRb0fnVzLkYEN+W08CewNGTnI=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-PpwiBtqgcGIHn1KgKDXvrsX0DeTZ4PfyQsMnUpwCUrI=",
+          "runtime/register/checkbox.js": "sha256-QlNtS75LVxO+OKEWX5af518TWUVOwH5nVS8bKid/E+Y=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/checkbox.js": "sha256-M4ffC3UZvNt1LaayV7iUubw0dG33RiqLTYcb05lK3N4=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-AK4XY+QZY/YF9sLhWvSFhLzm72MjHWrr+4fVKr5+398=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-D5pZAWuWF8+C90nVIZnSREv1i0fk6q9L+6SEdvU1Okk=",
-          "index.html": "sha256-zm4zdpqK+QV2pfYf2WrPK1bYk0S65vU+AWWPEq60/mE=",
+          "index.html": "sha256-PXIpEMN5ECxZXpbQG1pVzJUZwEslHvYulHsJlfHplz0=",
           "README.md": "sha256-WEnN989sIQKKMpAjmYvjRbS2hGIBqYi+IEj9c/xhVFs=",
-          "manifest.json": "sha256-hJd553Ef33h7Ny4ruLLSL8+BmSTVMIt41aCWwR9Kavc="
+          "manifest.json": "sha256-niMah9PNNjgBMYDMlSVaCrZ4apFC6fsEJ91RmAgS3jo="
         }
       }
     },
@@ -4773,7 +4958,10 @@
           "color.text.bright",
           "color.text.default",
           "color.text.disabled",
+          "color.text.muted",
+          "density.comfortable.control-height",
           "density.comfortable.icon",
+          "density.compact.control-height",
           "density.compact.icon",
           "focus.offset",
           "focus.ring",
@@ -4818,6 +5006,7 @@
           "color.primitive.red.850",
           "color.primitive.rose.300",
           "color.primitive.rose.350",
+          "color.primitive.rose.600",
           "color.primitive.rose.700",
           "color.primitive.rose.800",
           "color.status.danger.border",
@@ -4827,8 +5016,11 @@
           "color.text.bright",
           "color.text.default",
           "color.text.disabled",
+          "color.text.muted",
           "color.text.on-action",
+          "density.comfortable.control-height",
           "density.comfortable.icon",
+          "density.compact.control-height",
           "density.compact.icon",
           "focus.offset",
           "focus.ring",
@@ -4958,12 +5150,27 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "density.comfortable.icon": {
+          "color.text.muted": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "density.compact.icon": {
+          "density.comfortable.control-height": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "density.comfortable.icon": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "density.compact.control-height": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "density.compact.icon": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -5044,18 +5251,18 @@
       "copy": {
         "directory": "copy/radio-group/",
         "files": {
-          "runtime/register/radio-group.js": "sha256-L7TPdkL+uckYkNZ8nwZWjfTisSvOmPO7rqB3QlmfaTI=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/radio-group.js": "sha256-UtfAZUI/Cr3R29YvS/0As27FUks0dSZ5e2Jcx6yDfxk=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-Ig6nuF1jMxOL71ppi7cvN8DjEKs9unk/ugZ0b1XTImY=",
+          "runtime/register/radio-group.js": "sha256-ewlJRFup1XukqJJNHbI7o4+IBxMHYc4zRErGTSTTCOE=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/radio-group.js": "sha256-2H9k0HsCH7vOePvpZIurg4X8R/tWx69+wbMsKbawdJQ=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-H+SbIsTUcbJYlW9LE6upB3zGttJxr9Wa/0GAcfv9Q6M=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-6HA7gvr2JUQeKZ5jWPcVyfSw5t4FmaqlAA/+mhuSJjc=",
-          "index.html": "sha256-4ptm1dy28zuJlLU04Zd8QtEveiw6njq8DNNQd89W/1w=",
+          "index.html": "sha256-JXkdz3Ty4ygZ8c9K7ftH4J8rbquZw4UXpB47/g2uw1g=",
           "README.md": "sha256-L+Z3W5VfP83lnvB20pwCI2E1gQ/vKF4Yvd/mDw4diyE=",
-          "manifest.json": "sha256-PRTi1+IXRrKIG+iq5rBiBKtFzpsGeQG5/f/16lYpmCw="
+          "manifest.json": "sha256-1LRuVLdz4Be5bPbEaxfo+lZHHjUS9sAWxg1BqbK1c3Y="
         }
       }
     },
@@ -5456,18 +5663,18 @@
       "copy": {
         "directory": "copy/switch/",
         "files": {
-          "runtime/register/switch.js": "sha256-WA0Avt/JJmz7DqxDx8v5Rnw3WCZFaVGJjPdibTQKkSc=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/switch.js": "sha256-Cad08u/MHjqLKKV0MpUQNKaHz1fLJnvy5dfayoqsjvI=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-wQ5f/FFGWolJtnjyPar452XqRgkIhBLJEQbc8ziQvag=",
+          "runtime/register/switch.js": "sha256-6l7gxY7bHWXI4K8WMdikGfg6Itnf2Uy8hSbsvn+XCYM=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/switch.js": "sha256-sdfSvJlKylAeDbhRKPMRUZ+piEOzKs1aV52BDvjOV/o=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-HDlOyl2v6b36H0XdR4UOL3DcPMLKHXlvJ/+7QqF1sVA=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-bja8BqOYebPhAJ/84m7EUQysf7pqQJ3wMJ10wj4YBz4=",
-          "index.html": "sha256-UZvqjISxPBGEl7MJkilEMem3b7sjRYRpBJpzJneqq/Q=",
+          "index.html": "sha256-IF4S7//PahcEGINA+vv8hBV9DUViABqK+t6Eyfb0B1Y=",
           "README.md": "sha256-9Yw9PXXsjkMqCnWGR6UbhauQtlI0q6dR39YdGBbG71A=",
-          "manifest.json": "sha256-ro51Jzhx8KR2dDJCRqTKB5jNf8Mnc8kBcTaICxcws1A="
+          "manifest.json": "sha256-azfUWxT0aJAZbSMDC8j+254Za5Ieti9Bg/VERoBvAAo="
         }
       }
     },
@@ -5626,6 +5833,7 @@
         "dependency.role-color-text-disabled": "color.text.disabled",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
         "dependency.role-space-2": "space.2",
@@ -5650,7 +5858,6 @@
           "color.border.selected-indicator",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring",
           "color.interaction.hover.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
@@ -5823,11 +6030,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.hover.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -6029,18 +6231,18 @@
       "copy": {
         "directory": "copy/range/",
         "files": {
-          "runtime/register/range.js": "sha256-g8jU/JKj2ySLza7/G+XS4TC2NE8Gwuw6lyc+G1k9pi4=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/range.js": "sha256-uAqR2sA5IXjunYSDuvl+0MoUbuwonAPLwhQFCExPI/I=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-XwLMipanpFGzjbmGs1VEzJL/+7DPUuYTewuadW6x3zE=",
+          "runtime/register/range.js": "sha256-HYsfnS/M/wjcD+spw64Qas+a8kndWqTvSRdBedy0U6g=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/range.js": "sha256-UOtb5bcowunT33yEodiHV5YKGl/OTUl5qSsO3xxwSHY=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-4ayZ4hpLNMgckII249GLN4LXptEvABeXopUcVCG8gLc=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-F3TYZf5Pysp2EfVbSAxBHmgiviXyRS3/dKjUdvZrzF0=",
-          "index.html": "sha256-xuKPgkTCOPNTZ8muQffKPJpVLWZpA03yfkf+90bVZmw=",
+          "index.html": "sha256-1VRc632ZL0iJ4ZwPDOH9ZKFqS1JtFx995UBRKpNUDTU=",
           "README.md": "sha256-lW1eqkbbrr3cTilmwEqgWHViJTPEMEDqDOHhsAizE1I=",
-          "manifest.json": "sha256-83FLaBofKJVFXrLxvl++gdymve8PpMF4DiKOiX0/ZNA="
+          "manifest.json": "sha256-fHyq5yxlVPUJAia5dDQw2XSMiqzkabED9NCkkaQYwAw="
         }
       }
     },
@@ -6144,6 +6346,7 @@
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.status.danger.text",
           "color.surface.canvas",
           "color.surface.input",
           "color.text.bright",
@@ -6191,11 +6394,13 @@
           "color.primitive.red.200",
           "color.primitive.red.350",
           "color.primitive.red.800",
+          "color.primitive.red.850",
           "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.600",
           "color.primitive.rose.700",
           "color.primitive.rose.800",
+          "color.status.danger.text",
           "color.surface.canvas",
           "color.surface.input",
           "color.text.bright",
@@ -6286,6 +6491,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.status.danger.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.surface.canvas": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -6412,18 +6622,18 @@
       "copy": {
         "directory": "copy/fieldset/",
         "files": {
-          "runtime/register/fieldset.js": "sha256-95mq6oG6gTLPWs+kdvdNqiuSftofqYoBvCulLuTebyE=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/fieldset.js": "sha256-pAzVFWN+M793N7lFAZ2zTybWJLdSOqZl3AmOTomqmTk=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-TPi15SfEwAaSl4PqQvGAd3bFbbB4BJ2trfD5k2+8yrc=",
+          "runtime/register/fieldset.js": "sha256-o9TJ39JjoD9lKj18M0HEJIsEaXvxYLuKg0BameLC9rQ=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/fieldset.js": "sha256-NnApETrqjlE4MbJmLICen1VVGenfbkiqjiNh9jSLgF8=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-8VS+tXfjHW87aIScNUGAXsrsJ0qwScONidsZFMMFNh0=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-Z916I2upHIzzffRAz/6w6FSTBwegAd+L49E9Juck2fo=",
-          "index.html": "sha256-/G/GqORWDhO+K+ngVGX8Mrb/mp0XHqSZ3PP1WwffRXQ=",
+          "index.html": "sha256-FbUV8k7YOMMErf8en/dGZNZE0nkjJvqan+FfQLgevVI=",
           "README.md": "sha256-dNh39iesY0kLTE75KP+a0WhhHDQpT+j04MoZgMmV4F8=",
-          "manifest.json": "sha256-2Z7hETSoJn6L/hHgchT0vJnPEZyrqjO6/vefg/ENXPk="
+          "manifest.json": "sha256-vjDOby1AN0RSnUrP4QsHLHcfRJyUbikUNg5PG4OE66s="
         }
       }
     },
@@ -7037,18 +7247,18 @@
       "copy": {
         "directory": "copy/number-field/",
         "files": {
-          "runtime/register/number-field.js": "sha256-jCevLNvnx84VrjcqcaLN+LoayqMvlOZqbeB0vfcKCTw=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/number-field.js": "sha256-27HebtimgA50TSf1kwNGySNCBamP+Cu+9VCSbvOxcDg=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-agyrkFz7FiKZpcU4J9QsaeTNRYBw7yWJQcMOdSd8SPc=",
+          "runtime/register/number-field.js": "sha256-hzql0aRe655T+FCjYFhxlfYh24YEAwm8mSKqaRvncg8=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/number-field.js": "sha256-XejyUXzeklfHnLge+zZzoxBqpQGWSXtTLGhXpkm4Sew=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-NcQq0uVZpogHRNRdmQQtShHxXmwI4M2nuuIY7BYYxhE=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-wabUKPjMJ+zn/+oKJMogtcDlppICQ8zTGXEbhGwm+iQ=",
-          "index.html": "sha256-yH23EzsY61NhYO5ZTaRXcpIb2OUYezkZl+VlqSSVS/M=",
+          "index.html": "sha256-5LArzp8P8o/Sx/BfjJC3wIFgD1V0XbJ+7wgFK1xiKTY=",
           "README.md": "sha256-ZNn4SinUkL66soe9hksIPf65yrk5SCJshryFP1N2GnI=",
-          "manifest.json": "sha256-hegLu++sUwG/DMW8Hg7cZrcebrq4rTNvBxMl75+x2dQ="
+          "manifest.json": "sha256-bldw1onB88sfmhNs6anlA/PD4j9IKl6aOkPzlAbg1Hc="
         }
       }
     },
@@ -7249,6 +7459,7 @@
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.status.danger.text",
           "color.surface.canvas",
           "color.surface.input",
           "color.text.bright",
@@ -7300,11 +7511,13 @@
           "color.primitive.red.200",
           "color.primitive.red.350",
           "color.primitive.red.800",
+          "color.primitive.red.850",
           "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.600",
           "color.primitive.rose.700",
           "color.primitive.rose.800",
+          "color.status.danger.text",
           "color.surface.canvas",
           "color.surface.input",
           "color.text.bright",
@@ -7417,6 +7630,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.status.danger.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.surface.canvas": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -7538,18 +7756,18 @@
       "copy": {
         "directory": "copy/search-field/",
         "files": {
-          "runtime/register/search-field.js": "sha256-Z6IeX4+LKGVQJUcQGuyUnCBL6ggQSoevMhrj75zYisw=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/search-field.js": "sha256-2ODKfrgzC53SjMT+P7oaRa78AgRY37MG12M7HVRwfQU=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-LKiZdfWdQXHUoEdFnG1o5Aka8mOS8NP98IdndPFnsbQ=",
+          "runtime/register/search-field.js": "sha256-oIExIQ80Xzt1d5Y8KclVl+lAi+cgOMhKMFNPBz8fEXY=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/search-field.js": "sha256-HCnoLO1ZZvDEqeON+Ir7Q+XChuArNr/tJ7H+lnVTJPw=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-wwF2mPKTtvrFcPXYn8OoWoeJPj5KgkmPbjay/kNVq6s=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-HUFhtyi3m/bOmHYH5vU0uD/8e/TFVZ6EmUZzoucKCCM=",
-          "index.html": "sha256-pNWMnOcTZTr/TNcGVa53Ac8S3/6iWYnBj5B5CjnTcVI=",
+          "index.html": "sha256-hCiVxJ7XVQjEcEeSYLpYgSmV9Wn9MIgxJm1EWMzoeKo=",
           "README.md": "sha256-aDgof37yYQAYKjMAPaaPxNDPtVVxOfCjHh2aT60B4xo=",
-          "manifest.json": "sha256-yt6YbOXtYkZ8+8jd4AuPMSJrWIkpD5DYzBPylnpK5v4="
+          "manifest.json": "sha256-MlEA1O4jbGz2/0lXtYTXRhzue/GO0CRrdRQUyq10ZFg="
         }
       }
     },
@@ -7690,7 +7908,7 @@
         "option.text-hover": "color.text.link-hover",
         "option.bg-selected": "color.interaction.selection.bg",
         "option.text-selected": "color.interaction.selection.text",
-        "option.ring-selected": "color.interaction.focus.ring-container",
+        "option.ring-selected": "color.interaction.focus.ring",
         "group.text": "color.text.subtle",
         "group.border": "color.border.divider",
         "empty.text": "color.text.muted",
@@ -8103,18 +8321,18 @@
       "copy": {
         "directory": "copy/combobox/",
         "files": {
-          "runtime/register/combobox.js": "sha256-wSm80gvqOsgkhwOnsCIjr2a4w8W7WCRQqBXn2frDhak=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/combobox.js": "sha256-5b1Sa2zwhRyysK9sVyLiBCGsYfJyYnfGDsb6r3sA9MA=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-f4pI9RLIKYsRggzuVcLA2zYdXHZXY3+DbGFjvBCtbSg=",
+          "runtime/register/combobox.js": "sha256-t7izNmL59Io74wyYT41Fq3jMXxWJ/5V4IeEkC0apDwY=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/combobox.js": "sha256-7kydwJcVW8U2c0ssJPwbR84tdqvYPN/lFqBuOGeDQpU=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-7Br4xmCcyfgXyjiq25+JY7SY8r5G/VLEzsNt6HBlB7k=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-/SDEtn3D/9kfnULtpHPFEgK1FAkmwe+77gdxlWNewhY=",
-          "index.html": "sha256-TgE5FDYDcg51ETqt8UekGbIULwjwCa+CjxGdU63wd/k=",
+          "index.html": "sha256-p9Z0Z0qJkFi41Gxp+ZcP2av6zsHe4VtOAtgfxnDq5YE=",
           "README.md": "sha256-d6hom7buY1pZpNug4Bx9SqSXvSLDY+cq2xwlZ2Fei/U=",
-          "manifest.json": "sha256-Z6FLAAQ/vWunhYlUN5k67m7KZO/GNkn0b+T8HAGYFis="
+          "manifest.json": "sha256-GTacDO1sEuZ7w5WJ08WkaWKjRm36EQJ2SMRHwKQHAWo="
         }
       }
     },
@@ -8214,6 +8432,13 @@
         "secondary.text": "color.text.muted",
         "control.bg": "color.surface.input",
         "control.focus": "color.interaction.focus.ring",
+        "button.bg": "color.action.secondary.bg",
+        "button.text": "color.action.secondary.text",
+        "button.border": "color.action.secondary.border",
+        "button.bg-hover": "color.action.secondary.hover-bg",
+        "button.bg-active": "color.action.secondary.pressed-bg",
+        "button.border-active": "color.border.active",
+        "button.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-border-width-emphasis": "border.width.emphasis",
         "dependency.role-color-action-primary-bg": "color.action.primary.bg",
@@ -8255,9 +8480,25 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
           "color.action.primary.bg",
+          "color.action.primary.border",
           "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
           "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
           "color.border.active",
           "color.border.control",
           "color.border.disabled",
@@ -8266,6 +8507,7 @@
           "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -8280,8 +8522,10 @@
           "color.text.disabled",
           "color.text.muted",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.comfortable.icon",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
           "density.compact.icon",
           "focus.offset",
           "focus.ring",
@@ -8292,6 +8536,7 @@
           "font.size.caption",
           "font.size.ui-md",
           "font.size.ui-sm",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
           "space.2",
@@ -8304,9 +8549,25 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
           "color.action.primary.bg",
+          "color.action.primary.border",
           "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
           "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
           "color.border.active",
           "color.border.control",
           "color.border.disabled",
@@ -8315,18 +8576,26 @@
           "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.primitive.alpha.transparent",
           "color.primitive.ink.0",
           "color.primitive.ink.28",
           "color.primitive.ink.30",
           "color.primitive.ink.40",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
+          "color.primitive.red.150",
           "color.primitive.red.200",
           "color.primitive.red.350",
+          "color.primitive.red.400",
+          "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
           "color.primitive.red.850",
           "color.primitive.rose.300",
@@ -8345,8 +8614,10 @@
           "color.text.muted",
           "color.text.on-action",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.comfortable.icon",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
           "density.compact.icon",
           "focus.offset",
           "focus.ring",
@@ -8357,6 +8628,7 @@
           "font.size.caption",
           "font.size.ui-md",
           "font.size.ui-sm",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
           "space.2",
@@ -8377,21 +8649,101 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.destructive.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.action.primary.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.primary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.action.primary.hover-bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.primary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.action.primary.text": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.secondary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.active": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -8434,6 +8786,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.pressed.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -8504,6 +8861,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.comfortable.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "density.comfortable.icon": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -8514,6 +8876,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.compact.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "density.compact.icon": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -8564,6 +8931,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "motion.duration.fast": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "radius.none": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -8610,19 +8982,19 @@
       "copy": {
         "directory": "copy/multiselect/",
         "files": {
-          "runtime/register/multiselect.js": "sha256-96pmTEj2wLhjjLNib4gB1d7Twzrt5QcyklLK7RfzavA=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/multiselect.js": "sha256-8L2lHVliSgOdCXDMUzLPyUu9JYyowyYfha4hm57F5/E=",
-          "runtime/chunks/advanced-DCpe8Ndv.js": "sha256-nr1LFdLYsGeTM4vDyldvuJygRm0F04sYonxatySPu1g=",
+          "runtime/register/multiselect.js": "sha256-GvsBeg69jcyZ7oEUVcCdn1MKUx1TUf7RIO5QVAsXGH4=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/multiselect.js": "sha256-MllSXtT35z9jg4cXDS6YzVpSLSEHEdFav9snvf+mVPU=",
+          "runtime/chunks/advanced-CqBF0dSb.js": "sha256-ozOzkRU6IeVGBqU3XQ0aLledkAi9vcs8dJdMQutVevs=",
           "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-NHeO9yzX+pKu8X05cxcbMC+aba6f5KV7SQL1E+N/kKM=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-OdOVY82/KYMEbbzSxLU1DnV9RhLbEXpdY1Sgy6ylGwQ=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-1E4hftJizWZX+Gn6uhOJBXC2VAC62t50q2kwRpgS2pQ=",
-          "index.html": "sha256-/iSVBFFALSTS0ebIls1qu3/g280a8lbMULm2Al9zFMM=",
+          "index.html": "sha256-0lrVFcwbFER+XauYVRXJkM2wQcvKcobwcWzQsL4OQM8=",
           "README.md": "sha256-754Tt+bveWNGF8niAMoHQEB7D8SGYGEJhu6GpbhKpiU=",
-          "manifest.json": "sha256-O1IjRfwEZvhLWVLk3LK9TIML1tL3gVj3my8BX/zwegw="
+          "manifest.json": "sha256-JO0I7l2R7lmALfslDFelOHRv+78GSN5i+QKxxHtGjqo="
         }
       }
     },
@@ -9211,18 +9583,18 @@
       "copy": {
         "directory": "copy/date-picker/",
         "files": {
-          "runtime/register/date-picker.js": "sha256-QyyWDOnYnSGxEdY+mxrtYtsLqoQAkhvTLJ5z7kjo3/w=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/date-picker.js": "sha256-rglCYTqoXYDZ63YUb01UqeMk0HRjOeYkVcqadAX0qmM=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-InOm4+AU0uQu6XZs3K+f13FA89Jf7iQO1GuL/2+s9YA=",
+          "runtime/register/date-picker.js": "sha256-ffEEGjAUrXQXzVdMaSM5DtzrLavfYTdLxmkWhPWQRIo=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/date-picker.js": "sha256-6V4hlflxeVpDoj+uuaVEpTKm1ZKIyCYAiivLhpESyZU=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-cC7XtaKYhgqTcB/ci7nCK8PcvCKw0YeBRbnpCFHJ6ZU=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-Nho5WRdNWOIx9zrVkZR8s5NrC95hgRBVnvDTdnZ7qoo=",
-          "index.html": "sha256-eGq952lAjjjM/6cG7o5Rv4hcM4Tuc6zA38HiAPrEevM=",
+          "index.html": "sha256-SxAGYroKCEemIb+5PImBbe5DAU1pOu9frv+8yu3oY7c=",
           "README.md": "sha256-7Nf1YMBxm1cGzO+rzOKvfqWgRfugAjR+6/WjnVo2qpc=",
-          "manifest.json": "sha256-7BRpb4bMBn6h5aixxc8Fb+OE71//nfE+Rlqox36UEek="
+          "manifest.json": "sha256-DB3JDMg5IALIVpVXGgw/hVsdY1I2kQ5XHdaNILtk0YM="
         }
       }
     },
@@ -9365,6 +9737,7 @@
         "hover",
         "focus-visible",
         "invalid",
+        "invalid+focus-visible",
         "disabled"
       ],
       "dependencies": [],
@@ -9374,6 +9747,7 @@
         "root.bg-hover": "color.interaction.hover.bg",
         "root.border-focus": "color.border.active",
         "root.ring": "color.interaction.focus.ring",
+        "root.ring-invalid": "color.interaction.focus.ring-container",
         "root.border-invalid": "color.status.danger.border",
         "root.border-disabled": "color.border.disabled",
         "root.bg-disabled": "color.interaction.disabled.bg",
@@ -9795,18 +10169,18 @@
       "copy": {
         "directory": "copy/time-picker/",
         "files": {
-          "runtime/register/time-picker.js": "sha256-2BVpwqf8Gmd8NnGgY7TdxAtrN4oIOg8cMn0kMOqj9Y4=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/time-picker.js": "sha256-K1tUYKUlk8oOLnC7XwOpKWl/CUzqs0NmsRJ38SjjI1U=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-J5VoJUQp+zDREm8yqwh0jq7TRzMH+H8XMK+3CWxjgIU=",
+          "runtime/register/time-picker.js": "sha256-Y3N2tnRzLjdmpYzxx3rCbl+joREEqSwDzaFTVHIudjM=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/time-picker.js": "sha256-8R5WT2w1+ieYWJkWby33LbGCbBuQiWHFaETY+vXANpc=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-2s5SaHG9dQPlt9Hz78tPTWZDZz5kXliFR2zE0tmPbus=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-RLfLhDEtkzyeISgOb1Njmp8QsxMKjIUzebwrMAg9GNk=",
-          "index.html": "sha256-0uRkUg8W3uzjOeM45/CL0JXuey7R36hf4eL2pcTXKZY=",
+          "index.html": "sha256-HBltgH+aaDfBk6fcYX4waQKdoApT3zk0+wUOtaTyO0g=",
           "README.md": "sha256-bK7PieiUKZ/3zwSldV/HlWMak7kwtWyvgpYy1YfAmbM=",
-          "manifest.json": "sha256-wxpcgxJ9Gi6UvCUrDp9dioJK7/5dGvvJ8K3LZNbXyqM="
+          "manifest.json": "sha256-A8dIwiYn2nlNCuNvQObX2Iws9rBDL/ID3aqTgjN0GjY="
         }
       }
     },
@@ -9945,7 +10319,18 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
           "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
           "color.action.secondary.bg",
           "color.action.secondary.border",
           "color.action.secondary.hover-bg",
@@ -9959,6 +10344,7 @@
           "color.border.divider",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
+          "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
           "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
@@ -9968,6 +10354,7 @@
           "color.status.danger.border",
           "color.status.danger.text",
           "color.surface.canvas",
+          "color.surface.input",
           "color.text.bright",
           "color.text.default",
           "color.text.disabled",
@@ -9998,7 +10385,18 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
           "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
           "color.action.secondary.bg",
           "color.action.secondary.border",
           "color.action.secondary.hover-bg",
@@ -10024,12 +10422,16 @@
           "color.primitive.ink.30",
           "color.primitive.ink.40",
           "color.primitive.ink.60",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
           "color.primitive.red.150",
           "color.primitive.red.200",
           "color.primitive.red.350",
+          "color.primitive.red.400",
           "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
           "color.primitive.red.850",
           "color.primitive.rose.300",
@@ -10041,10 +10443,12 @@
           "color.status.danger.border",
           "color.status.danger.text",
           "color.surface.canvas",
+          "color.surface.input",
           "color.text.bright",
           "color.text.default",
           "color.text.disabled",
           "color.text.muted",
+          "color.text.on-action",
           "color.text.subtle",
           "density.comfortable.control-height",
           "density.comfortable.control-padding-x",
@@ -10079,67 +10483,122 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.action.primary.bg": {
+          "color.action.destructive.border": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.action.secondary.bg": {
+          "color.action.destructive.filled-bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.action.secondary.border": {
+          "color.action.destructive.filled-text": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.action.secondary.hover-bg": {
+          "color.action.destructive.hover-bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.action.secondary.pressed-bg": {
+          "color.action.destructive.hover-text": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.action.secondary.text": {
+          "color.action.destructive.pressed-bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.action.tertiary.hover-bg": {
+          "color.action.destructive.text": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.action.tertiary.text": {
+          "color.action.primary.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.border.active": {
+          "color.action.primary.border": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.border.control": {
-            "action": "use-and-report",
-            "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
-            "decisionIds": [
-              "D-007"
-            ]
+          "color.action.primary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
           },
-          "color.border.disabled": {
+          "color.action.primary.pressed-bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.border.divider": {
-            "action": "use-and-report",
-            "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
-            "decisionIds": [
+          "color.action.primary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.active": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.control": {
+            "action": "use-and-report",
+            "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
+            "decisionIds": [
+              "D-007"
+            ]
+          },
+          "color.border.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.divider": {
+            "action": "use-and-report",
+            "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
+            "decisionIds": [
               "D-008"
             ]
           },
@@ -10153,6 +10612,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.focus.ring-container": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -10198,6 +10662,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.surface.input": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.text.bright": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -10334,18 +10803,18 @@
       "copy": {
         "directory": "copy/file-input/",
         "files": {
-          "runtime/register/file-input.js": "sha256-JVcVdlTDOCB4bLa+Gc4LHWSfojAaR3wRwOBxMeLa8z4=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/file-input.js": "sha256-b5A8PD7vS8/xWNzSdVbtt2pV33CllxtkKwdSPtC1CSI=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-ezg9wydBGR6KpQziZgvoKiTXURNTPkh+aD9h3vFuuW4=",
+          "runtime/register/file-input.js": "sha256-b3BX2Mpd3hOdCnJZepq1gTZKBfvGMgxtEWnrAg8yfHA=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/file-input.js": "sha256-kE0QDQfY2i/MZLrABzvzfCatNUO8IQsU+q/AXBy6hW4=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-r2nu02Ni7aaSzV1vpVpQpVBMSQlq1Vnl3xedr7c6Xl0=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-3MysNuXXyX6HzlWv0wFhnto4CU9Q/n0JHK2wx1ufwbE=",
-          "index.html": "sha256-fBkoQQjmYl2pS2ZhIJZ6zX3QXl6l6HTDfKsrsy4jmb8=",
+          "index.html": "sha256-Mruf4SRnwaZ2RK7LaKRse5q9c4QKhDHgEgCAG4hyL7s=",
           "README.md": "sha256-fT5UasqXVH/Um8vNgVGEXNG0Pk7WZ4Aq+K44FBlAdpk=",
-          "manifest.json": "sha256-TKiC1mhiYH8D1y50C5ACpP4Lz10Z3xCa4GxvUdkDEnw="
+          "manifest.json": "sha256-X08YRjuyyMs/lhABC8jyT6hAh4AhRXBy9nRCGzLest8="
         }
       }
     },
@@ -10458,15 +10927,22 @@
         "secondary.text": "color.text.muted",
         "control.bg": "color.surface.input",
         "control.focus": "color.interaction.focus.ring",
+        "button.bg": "color.action.secondary.bg",
+        "button.text": "color.action.secondary.text",
+        "button.border": "color.action.secondary.border",
+        "button.bg-hover": "color.action.secondary.hover-bg",
+        "button.bg-active": "color.action.secondary.pressed-bg",
+        "button.border-active": "color.border.active",
+        "button.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-color-border-disabled": "color.border.disabled",
         "dependency.role-color-interaction-disabled-bg": "color.interaction.disabled.bg",
         "dependency.role-color-text-disabled": "color.text.disabled",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-24": "space.24",
         "dependency.role-space-8": "space.8"
       },
@@ -10480,11 +10956,33 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
           "color.border.disabled",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -10496,13 +10994,17 @@
           "color.text.disabled",
           "color.text.muted",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
-          "space.2",
           "space.24",
           "space.32",
           "space.4",
@@ -10512,41 +11014,79 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
           "color.border.disabled",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.primitive.alpha.transparent",
           "color.primitive.ink.0",
           "color.primitive.ink.28",
           "color.primitive.ink.30",
+          "color.primitive.ink.40",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
+          "color.primitive.red.150",
           "color.primitive.red.200",
           "color.primitive.red.350",
+          "color.primitive.red.400",
+          "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
+          "color.primitive.red.850",
           "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.600",
           "color.primitive.rose.700",
+          "color.primitive.rose.800",
           "color.surface.canvas",
           "color.surface.default",
           "color.surface.input",
+          "color.text.bright",
           "color.text.default",
           "color.text.disabled",
           "color.text.muted",
+          "color.text.on-action",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
-          "space.2",
           "space.24",
           "space.32",
           "space.4",
@@ -10564,6 +11104,106 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.destructive.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.active": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.control": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -10591,6 +11231,16 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.focus.ring-container": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.interaction.pressed.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -10646,11 +11296,31 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.comfortable.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "density.compact.control-height": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.compact.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -10666,17 +11336,17 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "radius.none": {
+          "motion.duration.fast": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.12": {
+          "radius.none": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
+          "space.12": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -10712,19 +11382,19 @@
       "copy": {
         "directory": "copy/repeater/",
         "files": {
-          "runtime/register/repeater.js": "sha256-CL1MU0vVSqQyPhS6UQWzKLVZqxO0fbuljqqDRE9GvUA=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/repeater.js": "sha256-pe+MgGoQpseF+J8HpfkS5wU84MsVLuCJl6BAzoyS+lU=",
-          "runtime/chunks/advanced-DCpe8Ndv.js": "sha256-nr1LFdLYsGeTM4vDyldvuJygRm0F04sYonxatySPu1g=",
+          "runtime/register/repeater.js": "sha256-+BJGwFC4ULsZj2rUXucqIP4bkN1LZVFvuFrN1eK5zsw=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/repeater.js": "sha256-S5GJEE4PdeXjexdZXmIgJnjsOURVZHpQCSJzc+huJXc=",
+          "runtime/chunks/advanced-CqBF0dSb.js": "sha256-ozOzkRU6IeVGBqU3XQ0aLledkAi9vcs8dJdMQutVevs=",
           "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-IEhREL5vlXFRdDmE8HHaqwhAbMJ8feOqTJ5MMrQGztk=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-rx26lMPjdf1Z/n5dSt0W680aeH4/Vf/JHj+aVD7Yd0g=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-DSCQzrRbDwFOKtw5YmpR+3oYWMIBJFIPnJpes5bSMPY=",
-          "index.html": "sha256-c0jxp+wZ+Fh6pdflIdXG673av6oOTGx7HobpD63O2Sk=",
+          "index.html": "sha256-NcmqHhIALqiMTfxl0qPl+bYykJcUXvHzjXqS4Po+QCI=",
           "README.md": "sha256-iFFjPHWI+gh/aJ7+flDL4I/Qaclwv1yCfGRuJ06o6tE=",
-          "manifest.json": "sha256-iMtAouXvHNiZEeyxqGOPIX4ptGvUNPZrhPw3akRSvYE="
+          "manifest.json": "sha256-P8lkMtyJPbMWrv+ToSQl2uSJvB45XkEbaJEwGS4Icrw="
         }
       }
     },
@@ -11361,18 +12031,18 @@
       "copy": {
         "directory": "copy/wizard/",
         "files": {
-          "runtime/register/wizard.js": "sha256-8JwKlLD2lG42fsQh0+nf+OZ0pvg6Vy7Uexn7bdkWEe0=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/wizard.js": "sha256-WMaA9QqPtqe0dUBowMDw++tHyL+HZFO8+VoCJpn+HXM=",
-          "runtime/chunks/forms-BT3z7lNC.js": "sha256-Txmae07dWLj1H/FL869U0Kv84TQxzpdFeOg0g8zGK6I=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-TIsUn3die+vDqK/B4+HqIiSctLsbfAW5EflsX5y1oJA=",
+          "runtime/register/wizard.js": "sha256-j1MmLx8Vq3Ou/t3+hX/UD2AWZq1D7MRHwwvCLStmpFw=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/wizard.js": "sha256-iMzWia0NibbI8OZR3lt0VNBXQXq/OjK7Mz8n9BHkt5c=",
+          "runtime/chunks/forms-CE_hP1hg.js": "sha256-uOnoMuSkUbm9C/GfR+PDLYCykyHOQ1Ni7g59c4YMOS0=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-dbs7z77ZMyB5via+UcpI8DKAl1gPwQO5PnMB4GL8ANA=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-T5EJ8DcqnD1rFEoCwvdUpmBCh0hH9dJSmq5oOkC+mi4=",
-          "index.html": "sha256-x7w0JHEaRfh3sRM0TmJcKmqI73CDTfRHzbgURIS3m80=",
+          "index.html": "sha256-iWmkWU3qxvtjRPPPDLUFT5Sd9bw1krZug4ntOGEYRIU=",
           "README.md": "sha256-B9klMh35GlqO5l2mxI77I6x2Gwfl8AMNSH6P+up7GdY=",
-          "manifest.json": "sha256-iGsA8lMX0V0Ipmib1881C1nGntn+vXPGfd3lDDhhYaM="
+          "manifest.json": "sha256-YCzSJskJMSjdynux2FW49yDJDlfm4KyiiZo+CbEYtx8="
         }
       }
     },
@@ -12256,20 +12926,20 @@
       "copy": {
         "directory": "copy/form-builder/",
         "files": {
-          "runtime/register/form-builder.js": "sha256-jo5ONsFuzPH0pmoDpmWyq6QVpkKeKDhZYbwW/vKQ+ic=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/chunks/form-builder-Dkweb1xD.js": "sha256-y1g6oI2gMoPy6c5S5Lgoec9Po3ydkEadsbsL5vVWFUI=",
-          "runtime/chunks/form-builder-EQnl1AaR.js": "sha256-lX4d482lke5Pljjn6rKPas9RRdIWgoifB609las09JY=",
-          "runtime/chunks/form-workflow-DMGni-Gs.js": "sha256-g3g/Afxx3XsClDK4ZfvWQjZKprT6z7Qp1lULS48F0rY=",
+          "runtime/register/form-builder.js": "sha256-AH2z8TKkGbsbFMHajeE4JxTg4tjDr5gEOwjyNAIVZvk=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/chunks/form-builder-BKs59W9y.js": "sha256-dY5vxMe1vQGS0OppYA63xRxadXFqVZOczLxh6Cdman8=",
+          "runtime/chunks/form-builder-CqcTkYZe.js": "sha256-kRXlrq4rK0PWiZHwFQSLuZftI0JuCq0ooYIuBhJ3L+M=",
+          "runtime/chunks/form-workflow-BKRLylvq.js": "sha256-LcDxqsGpnid91QErVgWLIaXtB5KQS8Uad6Q2shJ1Ohc=",
           "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-dgVsrgYuHrvBt6OjTg069abl7yU4iwgXOXUw3n9cB7g=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-MnUc6KN0qw+qINoU13CL+UM9TxKE9DfaVaeUs/Fy57E=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
-          "element.html": "sha256-vq61pWv0xeMFu0tTsDtRWWpAr16AFefjpz5JTSyF440=",
-          "index.html": "sha256-v74xLbiCzhGoMsKDM8vIO3nwDmWQJymihSOqXqvPlkk=",
+          "element.html": "sha256-WUjDiy4tZKp/CS/g5I/hIUQY0Mci0zrItPW5k4K7As4=",
+          "index.html": "sha256-640gpCzARRbVwXUct1TM0s5GcegFiYevcWBsg7VSOqI=",
           "README.md": "sha256-MGlPh4CEW6DLecBSj7Ym9ww3NAGe8r5V9uANRpZLY48=",
-          "manifest.json": "sha256-aoSpEA6qVQhF0JI5HP7ycm4UbGmG+ya3B7tt1wA5RnE="
+          "manifest.json": "sha256-4eN/Ayvb9g/4CHDNRnxDuFj2QMloNoJZ7DigYbCeyW0="
         }
       }
     },
@@ -12673,18 +13343,18 @@
       "copy": {
         "directory": "copy/tabs/",
         "files": {
-          "runtime/register/tabs.js": "sha256-ZNIa4RlyyzL89jDO8N637zceDABaxE+yPzulw77+N9c=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/tabs.js": "sha256-42FcvN/By1ouS+HE0CiZ9FaasHLpN8HY7TiypjcFkdQ=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-zVXkxQteKGqZmvOgx444SE+3ubxZ6YdRaGci9hT3GeU=",
+          "runtime/register/tabs.js": "sha256-l7XwbcEZ8OmMB88/x9pUtN1ecLySUw198ASEleD+hZs=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/tabs.js": "sha256-2AWArhhBdqbiE1BHWeiumCgXyKi847dzv/cMGGfCfuA=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-fstv2PtC0k8ABx0bciCb6VX0pPTRl3oa8iGdR+6QR0Y=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-xe4UR+a4C9oNodr9UlW5OGE5DR5R9JErwW0UAalo8oE=",
-          "index.html": "sha256-w1fTqm25U4WCS0w6RvFvuUPfonjfue1T0ZJN83ccPr0=",
+          "index.html": "sha256-Lg89PWgkBGwJzhoQfiPykrsJ82dYys7yJEdQ1+tHpWM=",
           "README.md": "sha256-uBwdwc6EkHrqha/dCs9PWntoU1l7EAJb7Y6nx+zzrqI=",
-          "manifest.json": "sha256-aW2OMAJ7OKTFBe9zF9B4eVsJyynDgRIDkBVaDylHtNo="
+          "manifest.json": "sha256-h1ykMepGUQPW/IBWeIG3wekA5Ik/VZZGdXW8/5eq0/Y="
         }
       }
     },
@@ -12774,7 +13444,7 @@
         "link.text": "color.text.link",
         "link.underline": "color.text.link-underline",
         "link.text-hover": "color.text.link-hover",
-        "link.bg-hover": "color.interaction.hover.bg-strong",
+        "link.bg-hover": "color.interaction.hover.bg",
         "link.ring": "color.interaction.focus.ring",
         "current.text": "color.text.bright",
         "separator.text": "color.text.muted",
@@ -12793,7 +13463,6 @@
           "border.width.emphasis",
           "color.interaction.drop-target",
           "color.interaction.hover.bg",
-          "color.interaction.hover.bg-strong",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -12827,7 +13496,6 @@
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
           "color.interaction.hover.bg",
-          "color.interaction.hover.bg-strong",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -12837,7 +13505,6 @@
           "color.primitive.ink.40",
           "color.primitive.paper.90",
           "color.primitive.red.100",
-          "color.primitive.red.150",
           "color.primitive.red.350",
           "color.primitive.red.750",
           "color.primitive.red.800",
@@ -12889,11 +13556,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.hover.bg-strong": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -13030,18 +13692,18 @@
       "copy": {
         "directory": "copy/breadcrumbs/",
         "files": {
-          "runtime/register/breadcrumbs.js": "sha256-Q0duBAI2kOEbn33M/8S8M3ciNcrLKYFaLDl2PvMF4MY=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/breadcrumbs.js": "sha256-GtJDiM9iN77t0CIkD7Feiu8A1MQ5DeirIUfSVxO6o7Q=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-pJjvksTD6NTZ2QRx/SBxS4j7xy1rVLprovo5OnTOafs=",
+          "runtime/register/breadcrumbs.js": "sha256-TBQ50OLAdUaAgno93QicDrgSoW5MfLyWLXoR+GWyw0M=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/breadcrumbs.js": "sha256-DgJ8uy8nkN1QOm3/zq3cYvs7xmhXCyPkXdhu3CDEE00=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-+Zc2EEKW9OfZl8s+wFiHlzjJHlyVTyGwZDbPlyRKx4A=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-W9qk0XtcetNK1me7748lByEMSMUZyP6NT//vet/Kt0I=",
-          "index.html": "sha256-OWJN8qhGZ4YIN1OKUp03drZk8CY4D66GaO0t6LtKvJs=",
+          "index.html": "sha256-Q8aZfYganYA/1sF70oMXKr7Fn/icqzSWVNlbxC7x00U=",
           "README.md": "sha256-KtiYxcVwfGDIDiTnYI/c2MhmVKez7eLztyU55QJQXgs=",
-          "manifest.json": "sha256-/aBGJEdE5pG/blq4jU0tuQHrHU7s37pK/hbNdI+bRL8="
+          "manifest.json": "sha256-ueISJuY31tOa5XV3BZcJ0JRiWkClTX+lyFKzdCvc+uc="
         }
       }
     },
@@ -13143,7 +13805,7 @@
         "link.text-disabled": "color.text.disabled",
         "current.bg": "color.interaction.selection.bg",
         "current.text": "color.text.on-selection",
-        "current.ring": "color.interaction.focus.ring-container",
+        "current.ring": "color.interaction.focus.ring",
         "gap.text": "color.text.muted",
         "status.text": "color.text.default",
         "status.emphasis": "color.text.bright"
@@ -13158,7 +13820,7 @@
         "roles": [
           "border.width.emphasis",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring-container",
+          "color.interaction.focus.ring",
           "color.interaction.hover.bg",
           "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
@@ -13197,7 +13859,6 @@
           "border.width.emphasis",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
@@ -13254,7 +13915,7 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring-container": {
+          "color.interaction.focus.ring": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -13425,18 +14086,18 @@
       "copy": {
         "directory": "copy/pagination/",
         "files": {
-          "runtime/register/pagination.js": "sha256-pgp0U5vF4tER52b++qgmdpAuRSmpiybgRt6HfLmtBqU=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/pagination.js": "sha256-yrEJa21eYjbFYfF3K/IdLp2FXFcKGFkLEVD4bxibWrE=",
-          "runtime/chunks/tables-B25ydUHs.js": "sha256-XqRdyfrSS93rVybWHq6a0WhrmZgaboHi5n8ymgwRbM8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-J6AIVbVHNyS581oA3enNH84ZCf3yRHxSsjlqUa9Z6d0=",
+          "runtime/register/pagination.js": "sha256-brgdYKMAD7bcv2S/lK/pvq48lAK2y+31j4L/TNZAAAc=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/pagination.js": "sha256-B00TORk80D679cwO2BDfd3MFyKRhgzAoaWxrqC1AoYs=",
+          "runtime/chunks/tables-Cjr1EIJz.js": "sha256-K6BF6M6xNawgWdL+NIcBRZmY98j45o69tBI034Ks4Bg=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-Y82QrGBuuCOolKEvjfgUe1uRkUY8RAPoLEiVsEUahxg=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-jp4BjPewAxszUnraKXf7iG6Zty7ZB7J8SdFyHQg7hL4=",
-          "index.html": "sha256-/fV58cVZi1JLHRPrv8jsrMD51D/264mvCsNHTj4WEYM=",
+          "index.html": "sha256-QfAgrl9jbgESweQA3i2v7JR2ghU8LgF8X0cY9hqDnWY=",
           "README.md": "sha256-CkmYa5gHgFCQLGpkV2WpwdaxjhezkCTRRw8d9KDRUqg=",
-          "manifest.json": "sha256-60r+aCzqs2VJdTf9woMF9hv5KthQuTRbZ7iM38aKMBI="
+          "manifest.json": "sha256-zDt5OOHa/vu0wBtxh8xWe8JSXUu8J/5evpDRTFQQBps="
         }
       }
     },
@@ -13549,7 +14210,7 @@
         "current.text": "color.text.bright",
         "selected.bg": "color.interaction.selection.bg",
         "selected.text": "color.interaction.selection.text",
-        "selected.ring": "color.interaction.focus.ring-container",
+        "selected.ring": "color.interaction.focus.ring",
         "selected.inactive-bg": "color.interaction.selection.inactive-bg",
         "selected.inactive-text": "color.interaction.selection.inactive-text",
         "icon.stroke": "color.icon.default",
@@ -13570,7 +14231,7 @@
           "color.icon.decorative",
           "color.icon.default",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring-container",
+          "color.interaction.focus.ring",
           "color.interaction.hover.bg",
           "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
@@ -13613,7 +14274,6 @@
           "color.icon.default",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
@@ -13697,7 +14357,7 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring-container": {
+          "color.interaction.focus.ring": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -13868,18 +14528,18 @@
       "copy": {
         "directory": "copy/sidebar-nav/",
         "files": {
-          "runtime/register/sidebar-nav.js": "sha256-X/t0V38SB2UnmTa0KqYTvD4OKdvRFtsN75azWmcPa90=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/sidebar-nav.js": "sha256-LfEAicAsreVm6Jp/H/ocft61HelJ6RZo1rIPWFWRCCU=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-daIsd5K5mOs8Mmspd3m8ktJKgxTzPCRGoQY/6MQCDww=",
+          "runtime/register/sidebar-nav.js": "sha256-wezN/wQaG+kQGmgqJIj3iSl5mFjjKr0DJLl9jLsnRFA=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/sidebar-nav.js": "sha256-DZRlRYGAhBJm3yZ1nqAoW67+PcYUqE3uCTEEnKa9NFQ=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-LJ8LLDvQsYO50EORdep12yfyTFwnO4BxbDzOwHYpciA=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-LBoiPSLgtVIozM1wEFWbV78DaFWbIW+6OgOjaCSim8g=",
-          "index.html": "sha256-iigY56T4Y5udSqoBZloU6658GNUHY+ynrBQSOg/+UIc=",
+          "index.html": "sha256-dOEwMnbaj98YMfD6CXUGCi5NU1carEGBEl7w+wp1Aok=",
           "README.md": "sha256-QjtvSq2sHwF8bsMsDu3BpvOyATxZ0oanPWICItjaETU=",
-          "manifest.json": "sha256-Rl7kfHhDzahs2E5iAw6o2u7UNqJAiayqCZn3A2ag9D4="
+          "manifest.json": "sha256-Li6ZjxbsR1RxT5R9/zKwHLZTyxTunFX9jqRIrU0QFb8="
         }
       }
     },
@@ -14028,9 +14688,7 @@
           "density.compact.icon",
           "density.compact.row-height",
           "focus.offset",
-          "focus.offset-container",
           "focus.ring",
-          "focus.ring-container",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.line-height.ui-sm",
@@ -14060,7 +14718,6 @@
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.hover.bg-strong",
           "color.interaction.pressed.bg",
@@ -14106,9 +14763,7 @@
           "density.compact.icon",
           "density.compact.row-height",
           "focus.offset",
-          "focus.offset-container",
           "focus.ring",
-          "focus.ring-container",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.line-height.ui-sm",
@@ -14322,17 +14977,7 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "focus.offset-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
-          "focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
-          "focus.ring-container": {
+          "focus.ring": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -14418,20 +15063,20 @@
       "copy": {
         "directory": "copy/toolbar/",
         "files": {
-          "runtime/register/toolbar.js": "sha256-OSMJIpjPl64KP4YMacdMSLwBugQjcBJHhX/8qyJT0aM=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/toolbar.js": "sha256-xBBCFoguW9JGO+jaNyPrdGYVP2YwJ4BhX3FWPRxoqfs=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "runtime/register/menu.js": "sha256-YX+9ydadaIbkPIBFhLWX4Jv3V9vIl4UY1qolxLGfZUg=",
-          "runtime/components/menu.js": "sha256-AMtJth+M+4jqb8imqdn9VcM3aKvtgCWkPySfsI7htH8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-uTfyFdWFrx91RdklrAzqAHNf5B2q1psaqjlF71eT+Xc=",
+          "runtime/register/toolbar.js": "sha256-0i+oWvmcjNoFTB9ChlJSM3r3Ig4bYjlkdy/lkmNBlmA=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/toolbar.js": "sha256-kGWjidatkl+BJM+S2e/e9pYaok6mLuLLl520Nn8h86E=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "runtime/register/menu.js": "sha256-6CvU7Rei9lC+olXvluxdbCPqh46GrPSvB2MGiudiMTk=",
+          "runtime/components/menu.js": "sha256-As/aVex/jKXrmY4x/rG0tVMVUij8ZLPXK0kKS4ZBpSQ=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-zD6jRNAjuf7XM9+QaxwzEY+F2cFUrQbgUKNLTCc7Q/Y=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-MRU95stqvOm7gd3wzi8XadrYOLU9MRKqdwFO/bmSaPY=",
-          "index.html": "sha256-qzep40OKd67lZTxeQflCRA+sfx2A6/zxVgtV4re8LgY=",
+          "index.html": "sha256-AJ2jXzyPYjQufetc6mGuf1SQv8HGS9+yyaOcQo9pOIQ=",
           "README.md": "sha256-jPzt7MdgG4yEEJJ6qWZk3Cgw9KNNNHEKkwz/nnKK3co=",
-          "manifest.json": "sha256-Nqfa3AzsL73Ep9jP3gvG3YBOW8qyTGnIZrjSd6zpcWY="
+          "manifest.json": "sha256-fvYtHYd1COEZj/FavW9Fo5PcEOIaI9yRebWxrwhsUag="
         }
       }
     },
@@ -14558,7 +15203,7 @@
         "item.text-disabled": "color.text.disabled",
         "active.bg": "color.interaction.selection.bg",
         "active.text": "color.interaction.selection.text",
-        "active.ring": "color.interaction.focus.ring-container",
+        "active.ring": "color.interaction.focus.ring",
         "check.glyph": "color.text.bright",
         "shortcut.text": "color.text.muted",
         "separator.color": "color.border.divider",
@@ -14606,9 +15251,7 @@
           "density.compact.icon",
           "density.compact.row-height",
           "focus.offset",
-          "focus.offset-container",
           "focus.ring",
-          "focus.ring-container",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.line-height.ui-sm",
@@ -14637,7 +15280,6 @@
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.hover.bg-strong",
           "color.interaction.pressed.bg",
@@ -14679,9 +15321,7 @@
           "density.compact.icon",
           "density.compact.row-height",
           "focus.offset",
-          "focus.offset-container",
           "focus.ring",
-          "focus.ring-container",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.line-height.ui-sm",
@@ -14875,21 +15515,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "focus.offset-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "focus.ring": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "focus.ring-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -14971,18 +15601,18 @@
       "copy": {
         "directory": "copy/menu/",
         "files": {
-          "runtime/register/menu.js": "sha256-YX+9ydadaIbkPIBFhLWX4Jv3V9vIl4UY1qolxLGfZUg=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/menu.js": "sha256-AMtJth+M+4jqb8imqdn9VcM3aKvtgCWkPySfsI7htH8=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-SIubQgNKqhuy1abCUQB+rvpnPXZTQ9fiW5Yb6XWT5MQ=",
+          "runtime/register/menu.js": "sha256-6CvU7Rei9lC+olXvluxdbCPqh46GrPSvB2MGiudiMTk=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/menu.js": "sha256-As/aVex/jKXrmY4x/rG0tVMVUij8ZLPXK0kKS4ZBpSQ=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-k4+o5GOHUM88StftYskfdyFUCI7mkb7z/Q98q6IVoLs=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-0SXVO1pxUxzA5mgZzG5YXw21f3G/n81DtP3vy14Nv5M=",
-          "index.html": "sha256-nwGZ4fZm7plv8ayxNa3zbvZ6jTO5Efxv0EvQBeohNN8=",
+          "index.html": "sha256-nXwk+/iADkSMB6qGYcl8yRJh5+nE6XQAdTdECvt4i64=",
           "README.md": "sha256-ICc5PzI3f6/Kpyf9KXWame8aNgGPR8JKtgBhHc9HrsE=",
-          "manifest.json": "sha256-YWF7LtF4Y/ZgN5otpkiIBHeQDPn8kKw129WvyZSELhs="
+          "manifest.json": "sha256-9NHbdHafr9UwBLqJLF5ddS041hMKBftk16inMfQXuP4="
         }
       }
     },
@@ -15091,6 +15721,13 @@
         "secondary.text": "color.text.muted",
         "control.bg": "color.surface.input",
         "control.focus": "color.interaction.focus.ring",
+        "button.bg": "color.action.secondary.bg",
+        "button.text": "color.action.secondary.text",
+        "button.border": "color.action.secondary.border",
+        "button.bg-hover": "color.action.secondary.hover-bg",
+        "button.bg-active": "color.action.secondary.pressed-bg",
+        "button.border-active": "color.border.active",
+        "button.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-border-width-emphasis": "border.width.emphasis",
         "dependency.role-color-border-overlay": "color.border.overlay",
@@ -15101,10 +15738,10 @@
         "dependency.role-color-surface-overlay": "color.surface.overlay",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
         "dependency.role-space-16": "space.16",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-8": "space.8"
       },
       "status": {
@@ -15117,11 +15754,35 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
+          "color.border.disabled",
           "color.border.overlay",
           "color.border.selected-indicator",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -15133,19 +15794,24 @@
           "color.surface.overlay",
           "color.text.bright",
           "color.text.default",
+          "color.text.disabled",
           "color.text.heading",
           "color.text.muted",
           "color.text.placeholder",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "font.size.ui-sm",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.32",
           "space.4",
           "space.48",
@@ -15155,23 +15821,59 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
+          "color.border.disabled",
           "color.border.overlay",
           "color.border.selected-indicator",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
           "color.primitive.alpha.black-65",
+          "color.primitive.alpha.transparent",
           "color.primitive.ink.0",
           "color.primitive.ink.28",
+          "color.primitive.ink.30",
+          "color.primitive.ink.40",
           "color.primitive.ink.52",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
+          "color.primitive.red.150",
+          "color.primitive.red.200",
           "color.primitive.red.350",
+          "color.primitive.red.400",
+          "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
+          "color.primitive.red.850",
+          "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.600",
           "color.primitive.rose.700",
@@ -15183,19 +15885,25 @@
           "color.surface.overlay",
           "color.text.bright",
           "color.text.default",
+          "color.text.disabled",
           "color.text.heading",
           "color.text.muted",
+          "color.text.on-action",
           "color.text.placeholder",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "font.size.ui-sm",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.32",
           "space.4",
           "space.48",
@@ -15213,6 +15921,106 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.destructive.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.active": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.control": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -15220,6 +16028,11 @@
               "D-007"
             ]
           },
+          "color.border.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.overlay": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -15232,6 +16045,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.disabled.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.drop-target": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -15242,6 +16060,16 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.focus.ring-container": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.interaction.pressed.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -15299,6 +16127,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.text.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.text.heading": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -15319,11 +16152,31 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.comfortable.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "density.compact.control-height": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.compact.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -15344,22 +16197,22 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "radius.none": {
+          "motion.duration.fast": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.12": {
+          "radius.none": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.16": {
+          "space.12": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
+          "space.16": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -15395,19 +16248,19 @@
       "copy": {
         "directory": "copy/command-palette/",
         "files": {
-          "runtime/register/command-palette.js": "sha256-lGGoaVMCbjDzpQkjNlUs9K1jnmKtBfQi/K3dG35cCd0=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/command-palette.js": "sha256-KMSKyY2a0yyVe6zxGdWjBFFsgbL/DjNUvU8lnxB6USQ=",
-          "runtime/chunks/advanced-DCpe8Ndv.js": "sha256-nr1LFdLYsGeTM4vDyldvuJygRm0F04sYonxatySPu1g=",
+          "runtime/register/command-palette.js": "sha256-SSDEUavPG+KZSHsxMuoACxT3IKIhzg9LNpUMj+pS9Gs=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/command-palette.js": "sha256-GlMjxlVVzdC74Yr4LjWbLwXWGrHkFnjBaJ4o9rJw9DE=",
+          "runtime/chunks/advanced-CqBF0dSb.js": "sha256-ozOzkRU6IeVGBqU3XQ0aLledkAi9vcs8dJdMQutVevs=",
           "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-sXrks2txpylBLDX4L9vKPIvAj11p73qrX0apfh7EgTg=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-tiMnZi/dRu4gB3RP0zxXVpTrTvFZsCYaugfulxBVhTk=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-mNRkLE+yYA4PARM4rv5bXDj90Oq8yxQLPgoUW8bX6ns=",
-          "index.html": "sha256-I5o97Y3ykrn6MCqMmtWvFGTxDBltracgMFnF25iNwZk=",
+          "index.html": "sha256-2yjQF/1liVxnaJ1hZ9hxFhuMt/x3P0EkNlqVnXroNJ0=",
           "README.md": "sha256-KLn7bklioLvnV4bRDAgf3A5aqqCSezXa9kKARSYCUcw=",
-          "manifest.json": "sha256-sjwZw/AW7vcseMQ1l9pbcq/hDRYxIdZs2DOV5595GV4="
+          "manifest.json": "sha256-73hcJgww/vreos5t04p67k77Y1tsq1TKj1LfllwbXVU="
         }
       }
     },
@@ -15521,10 +16374,10 @@
         "dependency.role-color-text-disabled": "color.text.disabled",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
         "dependency.role-space-16": "space.16",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-8": "space.8"
       },
       "status": {
@@ -15547,18 +16400,16 @@
           "color.interaction.text-selection.text",
           "color.surface.canvas",
           "color.surface.default",
-          "color.surface.input",
           "color.text.default",
-          "color.text.disabled",
-          "density.comfortable.control-height",
-          "density.compact.control-height",
+          "color.text.disabled",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -15586,18 +16437,16 @@
           "color.primitive.rose.700",
           "color.surface.canvas",
           "color.surface.default",
-          "color.surface.input",
           "color.text.default",
           "color.text.disabled",
-          "density.comfortable.control-height",
-          "density.compact.control-height",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -15666,11 +16515,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.surface.input": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.text.default": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -15681,12 +16525,12 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "density.comfortable.control-height": {
+          "focus.offset": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "density.compact.control-height": {
+          "focus.ring": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -15721,11 +16565,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.32": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -15752,19 +16591,19 @@
       "copy": {
         "directory": "copy/tree/",
         "files": {
-          "runtime/register/tree.js": "sha256-xY8jWYnbMM8UlE/rdQJsu3/URGPvdUC06U1QmKsmFZQ=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/tree.js": "sha256-1wgpPM9BoC1/T0Or37ZhoekuO2YZ3luXp+DpWKVKBcU=",
-          "runtime/chunks/advanced-DCpe8Ndv.js": "sha256-nr1LFdLYsGeTM4vDyldvuJygRm0F04sYonxatySPu1g=",
+          "runtime/register/tree.js": "sha256-5FC2B/6Dr2k5l/nTb9KKizslYbXmQxe2nEoLuYG6zDg=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/tree.js": "sha256-mYl4DYRuChSjXkRwM7LaJ31aYQZlvzP0RgTYmuNdC9U=",
+          "runtime/chunks/advanced-CqBF0dSb.js": "sha256-ozOzkRU6IeVGBqU3XQ0aLledkAi9vcs8dJdMQutVevs=",
           "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-CMMLz+0autEo86UbTxzkyHVpMoNtyKskesgbIua+YiQ=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-znFzezcYcv10Qwb2tH/UwaG4XQgCXophAwo2Z8cOiyg=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-F1zSdM5xw3/jlndjR4iQRRyZ7K9gfkgofh1Oin9xUAo=",
-          "index.html": "sha256-+NV68HiyyQfXclh/Z5F0O/9UwWGzR6RouwMjxM/4DZI=",
+          "index.html": "sha256-/VmRV653lNaKNt7NO3oiJk/gDJfd6DAwSN1hvX6+viA=",
           "README.md": "sha256-rkAg9VO8TxgNCrXXP8dhUJ24Zori5pT/6k3w7gj4ixA=",
-          "manifest.json": "sha256-4RUETiVuDpUfhbB64T/WAejSHUEhFEXHJnLzKNXk140="
+          "manifest.json": "sha256-xJ5YVjzApCdc/f8qc+rs3uRCT9DfNBT1TqPYogGUHJY="
         }
       }
     },
@@ -15866,9 +16705,9 @@
         "dependency.role-color-text-disabled": "color.text.disabled",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-8": "space.8"
       },
       "status": {
@@ -15883,27 +16722,23 @@
           "border.width.emphasis",
           "color.border.active",
           "color.border.control",
-          "color.border.disabled",
-          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
           "color.surface.canvas",
           "color.surface.default",
-          "color.surface.input",
           "color.text.default",
-          "color.text.disabled",
           "density.comfortable.control-height",
           "density.compact.control-height",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -15914,8 +16749,6 @@
           "border.width.emphasis",
           "color.border.active",
           "color.border.control",
-          "color.border.disabled",
-          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
           "color.interaction.selection.bg",
@@ -15924,28 +16757,24 @@
           "color.interaction.text-selection.text",
           "color.primitive.ink.0",
           "color.primitive.ink.28",
-          "color.primitive.ink.30",
           "color.primitive.paper.90",
           "color.primitive.red.100",
-          "color.primitive.red.200",
           "color.primitive.red.350",
           "color.primitive.red.800",
-          "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.700",
           "color.surface.canvas",
           "color.surface.default",
-          "color.surface.input",
           "color.text.default",
-          "color.text.disabled",
           "density.comfortable.control-height",
           "density.compact.control-height",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -15974,26 +16803,11 @@
               "D-007"
             ]
           },
-          "color.border.disabled": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
-          "color.interaction.disabled.bg": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.drop-target": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -16024,27 +16838,27 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.surface.input": {
+          "color.text.default": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.text.default": {
+          "density.comfortable.control-height": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.text.disabled": {
+          "density.compact.control-height": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "density.comfortable.control-height": {
+          "focus.offset": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "density.compact.control-height": {
+          "focus.ring": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -16074,11 +16888,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.32": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -16105,18 +16914,18 @@
       "copy": {
         "directory": "copy/disclosure/",
         "files": {
-          "runtime/register/disclosure.js": "sha256-QAWXKSki5SRPPTshefR54Zy2gycHjHlG61aTWPL1Q4g=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/disclosure.js": "sha256-T++duSnTm8ippxMGxtM25ykxUO+HYIt0HK55RkVOrHQ=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-vVNjPU0AXLKLnxgRPgOVmN3dS6S3pxA6xLFfJFK8ex4=",
+          "runtime/register/disclosure.js": "sha256-aIVSvVhr919KN1yvujNgB9MkM76nINbjI5fn2aI15hU=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/disclosure.js": "sha256-+8hk74Zg9ZUq3AstqnrP14hMWYJ2J3MQ8RCtpk4njOs=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-M/UOvBwScEgDLtRZmuBaxCwOBb1g0hkfyHqaxsEDfHk=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-ZbpW/j8ZGKofIgL/uVEO47xXhxXmS2mrK5w32n/BWZA=",
-          "index.html": "sha256-IGRscuNxsfbVQd8cDkiBz1/QAEamMHSToesnIwq38AU=",
+          "index.html": "sha256-WhPsfoYZDJ7CShvFToWy9ysUDXDtzvu7SXHI+dsddnA=",
           "README.md": "sha256-eHT7DdGUFZxUFoiTNsB5j6dKCRG6kf9fT0gY1oSBy/8=",
-          "manifest.json": "sha256-pUsMYVXWCYN1EVfwL18klJsWytxWbWsJ5ZCkon4Ohb4="
+          "manifest.json": "sha256-7FeobZEK1MIlzN/Qb/FxsM8X6iVLI3xEmPbgLq93UCc="
         }
       }
     },
@@ -16221,7 +17030,6 @@
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
-          "space.16",
           "space.32",
           "space.4",
           "space.48",
@@ -16259,7 +17067,6 @@
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
-          "space.16",
           "space.32",
           "space.4",
           "space.48",
@@ -16370,11 +17177,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.16": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.32": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -16411,18 +17213,18 @@
       "copy": {
         "directory": "copy/skip-link/",
         "files": {
-          "runtime/register/skip-link.js": "sha256-J3W8TBKgxKkjPInemg2o0yMPFluGS5Q/lPN9NQYBXAo=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/skip-link.js": "sha256-PjQqYJSg0aTsGAbfb9qa+aisYGXDJgGgWN+ZwS/vgFQ=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-KCkIExZyQJQhySZCEQIOrm9lPtDzOq95R9+IED0MI8A=",
+          "runtime/register/skip-link.js": "sha256-GO29Wu/J6tcKAaNSyJEft5Nuiyn1QXF0x+VY1acaNuA=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/skip-link.js": "sha256-MomchP1kmj8/eRX8uVLTPeXPPhyYI18353abxwxtqTo=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-AX9f8HRHYyMt1utmAsrIP+UncKsDILTwMv4qUMxNku0=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-TllH5VfEO0Xn2+KsNK2k/W4RJWPv9CVLWE38btvoOpw=",
-          "index.html": "sha256-/HDnZh+ZTER/j0o82CsKR1s11+5KNWqzGpG3Q+RrG1Q=",
+          "index.html": "sha256-g9qP8QdXNXioXgABunl8DwcIBtkCTZH2B6+LuBrOPX0=",
           "README.md": "sha256-YX3Ch7JuUJRqIpsiYPlIc/09irmjC9OLqMTSPNUidYM=",
-          "manifest.json": "sha256-DLQ8IJEF+7r/cxXoKME+WMqTOVaJevkgDMVRXjTEk0E="
+          "manifest.json": "sha256-Cc64YD+9+04pEDbmTkOYQn2WgXyorjjK3s9dPDl4lZk="
         }
       }
     },
@@ -16518,7 +17320,7 @@
         "meta.text": "color.text.muted",
         "selected.bg": "color.interaction.selection.bg",
         "selected.text": "color.interaction.selection.text",
-        "selected.ring": "color.interaction.focus.ring-container"
+        "selected.ring": "color.interaction.focus.ring"
       },
       "status": {
         "implemented": true,
@@ -16547,7 +17349,9 @@
           "density.comfortable.gap",
           "density.compact.control-padding-x",
           "density.compact.gap",
+          "focus.offset",
           "focus.offset-container",
+          "focus.ring",
           "focus.ring-container",
           "font.family.mono",
           "font.line-height.h3",
@@ -16569,6 +17373,7 @@
           "color.border.control",
           "color.border.default",
           "color.interaction.drop-target",
+          "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.selection.bg",
@@ -16595,7 +17400,9 @@
           "density.comfortable.gap",
           "density.compact.control-padding-x",
           "density.compact.gap",
+          "focus.offset",
           "focus.offset-container",
+          "focus.ring",
           "focus.ring-container",
           "font.family.mono",
           "font.line-height.h3",
@@ -16709,11 +17516,21 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "focus.offset-container": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "focus.ring-container": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -16790,18 +17607,18 @@
       "copy": {
         "directory": "copy/card/",
         "files": {
-          "runtime/register/card.js": "sha256-zbAWuZuKNPZkVbl9pW5S2Mzg9/mlHJ7BeQEgQAUhrlA=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/card.js": "sha256-REUcny20Az6YiLn0F6l0ZkmNrj18xAqRj9bWUmvkhLo=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-pfXQBPkrp6iF0OlQiLQh9DMUwtsCinOaL1HLAjlChII=",
+          "runtime/register/card.js": "sha256-4IdkxATA99m7+u4hZzbgLzxNtZyQcI8WI8kkDxErCxI=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/card.js": "sha256-CE1Pt81XkHCmaZj7t3LqXTUnuvHd4E3/Od5t2v07ltA=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-FIugfi7dJgtnME2RJdIYZUQl/3O/WVR1fu23onC7U/M=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-Rc0IwITP8X0cKscYMBt4LgzFbntPHkCAdDQ4xLh2LXs=",
-          "index.html": "sha256-IvoBispcGfdc1cclMkSpIk4mImhXxUS8/bDAr0dLmcU=",
+          "index.html": "sha256-2B88t8s0Q7ugu+AiqBFD2B4OGRlJDRiO0Sz6gtWNyJ0=",
           "README.md": "sha256-7NvZudM1FuKwW/ZySKs98FmFwxwir6nLM/lGAvvcI+4=",
-          "manifest.json": "sha256-uCrS1zqZdZJERPpycHAm2jRonQ5KvUciSZZ0GDG/r2c="
+          "manifest.json": "sha256-3S0KS6wyJ2cEr9p4M5m0cwANysCtMtlatwNGyvFMngc="
         }
       }
     },
@@ -16898,7 +17715,7 @@
         "row.text-disabled": "color.text.disabled",
         "selected.bg": "color.interaction.selection.bg",
         "selected.text": "color.interaction.selection.text",
-        "selected.ring": "color.interaction.focus.ring-container",
+        "selected.ring": "color.interaction.focus.ring",
         "selected.inactive-bg": "color.interaction.selection.inactive-bg",
         "selected.inactive-text": "color.interaction.selection.inactive-text",
         "check.glyph": "color.interaction.selection.text",
@@ -16917,7 +17734,6 @@
           "color.border.control",
           "color.border.divider",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.inactive-bg",
@@ -16959,7 +17775,6 @@
           "color.border.divider",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.inactive-bg",
@@ -16980,7 +17795,6 @@
           "color.primitive.rose.350",
           "color.primitive.rose.600",
           "color.primitive.rose.700",
-          "color.primitive.rose.800",
           "color.surface.canvas",
           "color.surface.default",
           "color.text.default",
@@ -17038,11 +17852,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.hover.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -17214,18 +18023,18 @@
       "copy": {
         "directory": "copy/list/",
         "files": {
-          "runtime/register/list.js": "sha256-wbjYHGmbf46FoJiajI+Z127P5eUpLr9c6BSonN2FqnQ=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/list.js": "sha256-EfhH50w/Jxw1dj4a/Ul3Xi6WmUlbeRhgpAeATkhO8EU=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-MSEasr2r2kyu8iJSxcX+m4nWTD2FHPKwBU7K8T/9844=",
+          "runtime/register/list.js": "sha256-f4HxPopmKcmXd3NOYv8arFYm1XmjhvpF0kbNynVYRUA=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/list.js": "sha256-X5HE772qpMx/n9b3NU6shv9zZWfmY9cjVn/IPAjFFMY=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-rYecTkHR0B1N85CpEe58zzTavkIhRIQVzj50yKfdefA=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-tiKX+fFUPCsBJEryliaQ7y9RhU4zlh8aEqMJ0aSO8Lk=",
-          "index.html": "sha256-sY1ilmVvk6pArKOSGuz/1p4PN883f3mu5PXF1sOLwX4=",
+          "index.html": "sha256-w1eB6AWS6U0cM/ElyxhXOk1yDvmU7RDilyxFWSKCjJg=",
           "README.md": "sha256-lw1NGV62/UGys6imJuVkK5qPyHaJqiOgSEuHCgehwNc=",
-          "manifest.json": "sha256-QvzckZWIiDE/ImHAN4r4S19GgKtTUSk1eHxUqy+pyXQ="
+          "manifest.json": "sha256-21rppk20HlB53c9O71xPkVP4mw04fFxgx1lGu5DD0cM="
         }
       }
     },
@@ -17306,9 +18115,9 @@
         "control.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-color-border-divider": "color.border.divider",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-4": "space.4",
         "dependency.role-space-8": "space.8"
       },
@@ -17325,7 +18134,6 @@
           "color.border.control",
           "color.border.divider",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -17334,12 +18142,13 @@
           "color.surface.default",
           "color.text.default",
           "color.text.muted",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -17370,12 +18179,13 @@
           "color.surface.default",
           "color.text.default",
           "color.text.muted",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -17411,11 +18221,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -17456,6 +18261,16 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -17481,11 +18296,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.32": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -17512,18 +18322,18 @@
       "copy": {
         "directory": "copy/description-list/",
         "files": {
-          "runtime/register/description-list.js": "sha256-yhsiXjAR6wy2d0ePQtFlXsvPwWsBDWwuJiOZu/UqR1g=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/description-list.js": "sha256-qKd9CujEm+EgRSZfWHW9YXH9JY/d5wMBkkfqqP3z5so=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-MvWyrX2+45DLgWL1ZxTdk0IFVjl5WyfGYZdOYpIeoak=",
+          "runtime/register/description-list.js": "sha256-GxP5SJuhMhu1hTHJsexrOw4T0UPxiW6YpB5Ekig6NG4=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/description-list.js": "sha256-yFwjohrGKRZXL7ylzdMxau2tHWLBEqlCrjhZFLoV5ms=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-rEMzb+R626s/u4B9UVumgQsD0pKkWBBP5+VSfJrPCLM=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-h2HPGz9Kz0LvMiuTC767wAQvYHOVVmffDECwh46tG0c=",
-          "index.html": "sha256-mGxvifjxa5eFOtCBUQR3P/9IKtYsKd4nsTfWb9+u9w0=",
+          "index.html": "sha256-w9bAryqOwOepebsvi1B9fr1xN+O78bNPFqZgdwfg5do=",
           "README.md": "sha256-RrAu5lsq7QsSDTX+KygEzIsHJphBaeLyKmqBc+xa5G0=",
-          "manifest.json": "sha256-HW+ZJFxBuqoK3d8KJlYivtpz6Ql2Fa89enziCfIyg1Y="
+          "manifest.json": "sha256-PcJ06FeOmRyLmgzRUIOHECJINDumCczoIN6nZO39PC0="
         }
       }
     },
@@ -17981,18 +18791,18 @@
       "copy": {
         "directory": "copy/badge/",
         "files": {
-          "runtime/register/badge.js": "sha256-v2MgL8efVFZ4zJl9rvTmIYZxswZz69oeyrHTaYTAojs=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/badge.js": "sha256-l72iC8CAJp/xCXpSX/oJ3xsz8VT4N6UAcVhVSKeC/zs=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-K2TPkFZfKUt35HniL/ub9icdMukZ7wCx0S5+D1FOv8Y=",
+          "runtime/register/badge.js": "sha256-OMhgJ1tgBmSwhSWWFds0Npmgs46ZFUk4HYOnBGAntC4=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/badge.js": "sha256-7aVCilfmosfSHQDe+hY74Ms2tAC1jMlxtTExgZ+istY=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-au/P4qbkjvG1QpFUYQDc35IhSbbhmFRxoXhu7zPifn8=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-rXaOLdDbEK5SMtYsw5TegOMtcnLijmgtU07RVrvJx8o=",
-          "index.html": "sha256-adxgp7aQqS8TWwQ8h7ZunxvDdJpxjaS8oGagTh0d+s0=",
+          "index.html": "sha256-vhJcM8fdSzyuaUlcyXa90v3Bjkc89EZicjoRTNChWQM=",
           "README.md": "sha256-5TsNDY9d5k6gLYa4KQycTh+1uwvXsoF0XilR9xhKVVw=",
-          "manifest.json": "sha256-raQq7vv7/AES3cx9gip/td/yODbpi3TvQ6minqOTVqg="
+          "manifest.json": "sha256-8m5l7I70X8Z4BjZraEvIuDZcQVsbPpvXOcUrVrXjzGA="
         }
       }
     },
@@ -18111,7 +18921,7 @@
         "root.bg-disabled": "color.interaction.disabled.bg",
         "selected.bg": "color.interaction.selection.bg",
         "selected.text": "color.interaction.selection.text",
-        "selected.ring": "color.interaction.focus.ring-container",
+        "selected.ring": "color.interaction.focus.ring",
         "remove.text": "color.text.muted",
         "remove.text-hover": "color.text.bright",
         "remove.bg-hover": "color.interaction.hover.bg-strong"
@@ -18130,7 +18940,6 @@
           "color.border.disabled",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.hover.bg-strong",
           "color.interaction.pressed.bg",
@@ -18166,7 +18975,6 @@
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.hover.bg-strong",
           "color.interaction.pressed.bg",
@@ -18243,11 +19051,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.hover.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -18384,18 +19187,18 @@
       "copy": {
         "directory": "copy/chip/",
         "files": {
-          "runtime/register/chip.js": "sha256-nhg2cNNdf2EtWAVdLGFMWDTHx5f02Oe0Zf06cTV+sY8=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/chip.js": "sha256-u34FDCir8vK2ro61A5etBvzomb22WIhnIx7vL6Xcf3k=",
-          "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-nKS3XC8eLjQCMMZHRRKSiHiaNGZgYD6CXzVULJoDU3g=",
+          "runtime/register/chip.js": "sha256-H45do+W8XNxsOyAgO7vOSM4Wm6HfTun0JETK6F/YGRo=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/chip.js": "sha256-zqlDj7D8NyN4xQ/pnlXuOTnA8NlRXPBwW6qG+JcjoDY=",
+          "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-358eNya4c7h47XJC5dFUZncxpjkl0B9HRfRfxwVS8so=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-yjXdYrZ4DqpcZ/ZDGxD0cgfYY/xqj0qeSkX1dJmVhfY=",
-          "index.html": "sha256-w6jTubEaofdbvKO8llTmtTpw3a/ixglUtu1tDybz2iY=",
+          "index.html": "sha256-k4FZCUqK/d9sBff8dKJJwQW99u70Dw3zXRzcH3da314=",
           "README.md": "sha256-Ay+51qOAHcbN22QHsMfcbrA/66D52crp5OlQCHyMYmg=",
-          "manifest.json": "sha256-CDpgsi4gq8pm3VmaExEHAIHIro+79mdFp7dhVprq6XE="
+          "manifest.json": "sha256-Q8H52ja9lyGWmgJRf4PF5LnCZDnnfHuopw5riaVv39I="
         }
       }
     },
@@ -18487,10 +19290,10 @@
         "control.bg": "color.surface.input",
         "control.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-font-weight-bold": "font.weight.bold",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-32": "space.32"
       },
       "status": {
@@ -18505,7 +19308,6 @@
           "border.width.emphasis",
           "color.border.control",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -18513,13 +19315,14 @@
           "color.surface.canvas",
           "color.surface.default",
           "color.text.default",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "font.weight.bold",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "z.popover"
@@ -18545,13 +19348,14 @@
           "color.surface.canvas",
           "color.surface.default",
           "color.text.default",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "font.weight.bold",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "z.popover"
@@ -18579,11 +19383,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -18619,6 +19418,16 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -18649,11 +19458,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.32": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -18675,18 +19479,18 @@
       "copy": {
         "directory": "copy/avatar/",
         "files": {
-          "runtime/register/avatar.js": "sha256-5DYNLWi7ycaPY4mr7DXYNOCVEbo97Pnr3INC7MFexbM=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/avatar.js": "sha256-ewC6RhKRQwH+7jEF62lU5q8KPwKXfyEg/JWISD2N/FE=",
-          "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-XYCR7yVoWMnpJrQG4A+pL3xESyHR6OKMuwJfZGgDpKA=",
+          "runtime/register/avatar.js": "sha256-vcm/QDMxjQTfPDcJ7Q7TIwknLisAbwTawOMwzAfjzhg=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/avatar.js": "sha256-eST4r5/Ji77KAR4qwQ+HUIyQL67gllpCSiBqpODqeW4=",
+          "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-5uftL4p30t4ItPscyYR/4jS31cRz/VU0Ga2CL/3fjhg=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-R1Q+6UFu76jOlVP9cadBrMxVS3+Yb2JgIDkcnKxWvtk=",
-          "index.html": "sha256-6wIoUvdBP1c8DCQbO8yN3AbgSvI4jPyNvKs6IYYA/7o=",
+          "index.html": "sha256-0+odnlYi/Hd9a2qUTsn5PJwVUk58HsFdCUO9S39AFlg=",
           "README.md": "sha256-u+Rv0zskk5yOTH1pAzZ2eB3pId21guCqbzSFwIC5pcw=",
-          "manifest.json": "sha256-RRx0kD6cBwLeZFpZWYUl397tEaCFc8+hAq4Iul/dLR4="
+          "manifest.json": "sha256-URCjMYwlCXYlGlrMSk3vrPp/2Oy/ymRJ61Q2YzoRhF8="
         }
       }
     },
@@ -18813,7 +19617,7 @@
         "row.bg-hover": "color.interaction.hover.bg",
         "selected.bg": "color.interaction.selection.bg",
         "selected.text": "color.interaction.selection.text",
-        "selected.ring": "color.interaction.focus.ring-container",
+        "selected.ring": "color.interaction.focus.ring",
         "selected.inactive-bg": "color.interaction.selection.inactive-bg",
         "selected.inactive-text": "color.interaction.selection.inactive-text",
         "caption.text": "color.text.muted",
@@ -18833,7 +19637,6 @@
           "color.border.divider",
           "color.border.strong",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.inactive-bg",
@@ -18874,7 +19677,6 @@
           "color.border.strong",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.inactive-bg",
@@ -18950,11 +19752,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.hover.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -19121,18 +19918,18 @@
       "copy": {
         "directory": "copy/table/",
         "files": {
-          "runtime/register/table.js": "sha256-MdQKdnzPN7NGGdLpVWq6qbgJvHQFdZaIpYLaOLJxRfo=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/table.js": "sha256-leonu0udFEH8CaIXE0yhLXubdVcLX8V/g+fDayFea7E=",
-          "runtime/chunks/tables-B25ydUHs.js": "sha256-XqRdyfrSS93rVybWHq6a0WhrmZgaboHi5n8ymgwRbM8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-ZLczhksx4+OpxZGChcR6o/jBIHldhOt8XpRDJPyDfeU=",
+          "runtime/register/table.js": "sha256-+Up9lgrfevvvIUF9vuOOwKxw0nDOAU/VctLLKZ73sd8=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/table.js": "sha256-CcoLzw/lwTUDE+3sCYBoQQoZAlE++zhK1ZLZELpyYN4=",
+          "runtime/chunks/tables-Cjr1EIJz.js": "sha256-K6BF6M6xNawgWdL+NIcBRZmY98j45o69tBI034Ks4Bg=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-FsyIsB3w0mFPeVNG2Yq+D6/h7aeVKJpEALxaD4j3afY=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-eTlfzsTldT7TjA25qNYpX+MAAskuYiA9Y+zZW9/B+MU=",
-          "index.html": "sha256-wHPL38nEdZyiESe+MlLb9ZgRLg+MfbRXMzN538tD0pE=",
+          "index.html": "sha256-A21rR2XTwrPTwfZuz8lsPvFXneXhrFjzL0/Xdpfmo6o=",
           "README.md": "sha256-hZvyqPLVQoQuOKc7t2j0cESQRW84E8XfCL/ad6sXIdw=",
-          "manifest.json": "sha256-5x3hanzyxLH3nwERe8/wI2TB7i4kSwR2pISz0yLa+gk="
+          "manifest.json": "sha256-s3K2MnIRnTkfAy1WFKMoL4efHGv8vdQcKCVTR9N5eso="
         }
       }
     },
@@ -19262,7 +20059,7 @@
         "row.ring": "color.interaction.focus.ring",
         "selected.bg": "color.interaction.selection.bg",
         "selected.text": "color.interaction.selection.text",
-        "selected.ring": "color.interaction.focus.ring-container",
+        "selected.ring": "color.interaction.focus.ring",
         "checkbox.bg": "color.surface.input",
         "checkbox.border": "color.border.control",
         "checkbox.checked-bg": "color.action.primary.bg",
@@ -19297,7 +20094,6 @@
           "color.icon.decorative",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.hover.bg-strong",
           "color.interaction.pressed.bg",
@@ -19323,9 +20119,7 @@
           "density.compact.icon",
           "density.compact.row-height",
           "focus.offset",
-          "focus.offset-container",
           "focus.ring",
-          "focus.ring-container",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.line-height.ui-sm",
@@ -19361,7 +20155,6 @@
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.hover.bg-strong",
           "color.interaction.pressed.bg",
@@ -19406,9 +20199,7 @@
           "density.compact.icon",
           "density.compact.row-height",
           "focus.offset",
-          "focus.offset-container",
           "focus.ring",
-          "focus.ring-container",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.line-height.ui-sm",
@@ -19509,11 +20300,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.hover.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -19639,21 +20425,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "focus.offset-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "focus.ring": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "focus.ring-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -19745,21 +20521,21 @@
       "copy": {
         "directory": "copy/data-table/",
         "files": {
-          "runtime/register/data-table.js": "sha256-BtE8hPANffhtRYhX+PBKWwtZUJMtlvG/m3ctxaSCwTU=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/register/menu.js": "sha256-YX+9ydadaIbkPIBFhLWX4Jv3V9vIl4UY1qolxLGfZUg=",
-          "runtime/components/menu.js": "sha256-AMtJth+M+4jqb8imqdn9VcM3aKvtgCWkPySfsI7htH8=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "runtime/components/data-table.js": "sha256-jj60XwNxQlssKZTff5HB9Z6v14UDZdK8O80kLP082l4=",
-          "runtime/chunks/tables-B25ydUHs.js": "sha256-XqRdyfrSS93rVybWHq6a0WhrmZgaboHi5n8ymgwRbM8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-aygLfHiZmFXenQHQrHnjVcw8W0tp2SLdB7d/laGcKgA=",
+          "runtime/register/data-table.js": "sha256-wrLpuRzCJQhN8Kx+gdh/HOPhsNQP/wrnopu8NmJsUm0=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/register/menu.js": "sha256-6CvU7Rei9lC+olXvluxdbCPqh46GrPSvB2MGiudiMTk=",
+          "runtime/components/menu.js": "sha256-As/aVex/jKXrmY4x/rG0tVMVUij8ZLPXK0kKS4ZBpSQ=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "runtime/components/data-table.js": "sha256-Du0JOAv8n9YEK04c217gbbmS25D1Yfx4irEe/DIPLk4=",
+          "runtime/chunks/tables-Cjr1EIJz.js": "sha256-K6BF6M6xNawgWdL+NIcBRZmY98j45o69tBI034Ks4Bg=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-T5PnYnMx2i60rNgYfN/tfLrncLf9cAlC4gsLpnSw/b4=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-FieIuPCt66UIxpdAH0wuPBOrPEVXUqjJfyWMyCdO9nI=",
-          "index.html": "sha256-wxdZWAwB7Q/aPOpcvws/xlqJAMNO1twAxfHnSVMuNlo=",
+          "index.html": "sha256-mdaJIGJ1LweEct6N9Nr+hCoVjZXODSmyFsSgII8UMzQ=",
           "README.md": "sha256-bS0eRb53j0VgRsRbFv81sqclvoIS7Uv4m/FIBGXMqTw=",
-          "manifest.json": "sha256-HPNF+mZXjuU3YIozdl2drk3Led2FIYYUMYaIgdU5O68="
+          "manifest.json": "sha256-YC+eobPLgAutDoOERX3GiBuOt+tmkwZRHligHoQd8VA="
         }
       }
     },
@@ -19842,9 +20618,9 @@
         "dependency.role-border-width-emphasis": "border.width.emphasis",
         "dependency.role-color-border-active": "color.border.active",
         "dependency.role-color-border-divider": "color.border.divider",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-4": "space.4"
       },
       "status": {
@@ -19861,7 +20637,6 @@
           "color.border.control",
           "color.border.divider",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -19870,12 +20645,13 @@
           "color.surface.default",
           "color.text.default",
           "color.text.muted",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "z.popover"
@@ -19906,12 +20682,13 @@
           "color.surface.default",
           "color.text.default",
           "color.text.muted",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "z.popover"
@@ -19951,11 +20728,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -19996,6 +20768,16 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -20021,11 +20803,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.32": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -20047,18 +20824,18 @@
       "copy": {
         "directory": "copy/timeline/",
         "files": {
-          "runtime/register/timeline.js": "sha256-DmcJVvF9PvFZM0ka0qgQH9L6lE7TCHhDf56kHMV+SA4=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/timeline.js": "sha256-c1+8tebuE76i5IkY1RRqwNlDkRBrhVwBH4BiCMTSBs4=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-VnvBxMC1c6IWen0gQ3RLi0m3FOelH4E8j4xG+B5Zoas=",
+          "runtime/register/timeline.js": "sha256-uXCGuHnZsZSnhQMl00/o559cmYMJo79IrZ1j4ZNySb0=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/timeline.js": "sha256-qOO9Ngp7Zj87zq3HaROWETcECMB8hz5rgR4ryNoEh34=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-Af6JACyiwzdqViRAgkXYbYmHSNOZKW+lyj7uVYBMHkc=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-pj/LmsP7e5l3NZI2ZWOLcerU4j0Vn1w2EloUpExz0nw=",
-          "index.html": "sha256-Ob/LUhVAfw+2yZ5HV+/MpGcf5gBqNfOvKXpabGlMOEs=",
+          "index.html": "sha256-8pkUBLof0Lbt5c0AhMfnzIpsfpfVFIObjqvMlRbud38=",
           "README.md": "sha256-CNaX7w50n7r2LnTaBiC5oWdtQN0tep2SK/Q0ggYScgo=",
-          "manifest.json": "sha256-xTdi7g85GA2tcVyJWhakoizpwEDxFhF3UjuOxkrx1Jg="
+          "manifest.json": "sha256-9dS8Y09MmdcfilejwoK1Kw46VATPPDKoea3xMoOlyTg="
         }
       }
     },
@@ -20149,12 +20926,12 @@
         "dependency.role-color-chart-axis": "color.chart.axis",
         "dependency.role-color-chart-grid": "color.chart.grid",
         "dependency.role-color-chart-label": "color.chart.label",
+        "dependency.role-focus-offset": "focus.offset",
         "series.primary": "color.chart.series-2",
         "header.text": "color.text.bright",
         "row.text": "color.text.default",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-8": "space.8"
       },
       "status": {
@@ -20173,7 +20950,6 @@
           "color.chart.label",
           "color.chart.series-2",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -20183,6 +20959,8 @@
           "color.text.bright",
           "color.text.default",
           "color.text.muted",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
@@ -20190,7 +20968,6 @@
           "font.weight.regular",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -20228,6 +21005,8 @@
           "color.text.bright",
           "color.text.default",
           "color.text.muted",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
@@ -20235,7 +21014,6 @@
           "font.weight.regular",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -20284,11 +21062,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -20334,6 +21107,16 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -20369,11 +21152,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.32": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -20400,18 +21178,18 @@
       "copy": {
         "directory": "copy/chart/",
         "files": {
-          "runtime/register/chart.js": "sha256-5iBwKSjcyRylARXTeL2emhbuI2FCMQ757IBdPqFnU0U=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/chart.js": "sha256-J4rkX+ylh8URHbl2DxJ2FtbkHBtan2UOpNGVJIh1LjQ=",
-          "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-/W9/IEOepx6zAHtGcRJs1x0lwfMFkVEiYDCV4y4byXw=",
+          "runtime/register/chart.js": "sha256-T98hQYpUxEQ3kRDeztnuOxP5XmwfddBBocBZ3rdTxT8=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/chart.js": "sha256-hVyc1MgrIwRQZWPz61YJX6ScFRhDJTjMKtYEs5Xtxoo=",
+          "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-bZANhpWKREr2mT2bkDhKqg7tacAvTsBxyTk7F9aojeE=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-Wk7EuPuisom2ohEBkZvcgafrpN7xXzlCUaNrWq7BZEA=",
-          "index.html": "sha256-HuXni+L2aI7ES/QsPUPIODbff80dbY+jNFEIzyVxLFg=",
+          "index.html": "sha256-KOF9gaKfSWYWziOSnbA23zckGFW5yhlPXNWdth61Mc4=",
           "README.md": "sha256-AvM1lRutn7M/qWu0sIsbdBF9wn5nT5Ag8avrXpfo9a4=",
-          "manifest.json": "sha256-vN7Sze32H790CZumX+te7Ju/JDPFYxXOYbJyBD+Fl34="
+          "manifest.json": "sha256-aCdCOmd73xQ4GZ1/TyhtoQ+UDkSqVrV6Otsm8YTPDQY="
         }
       }
     },
@@ -20491,6 +21269,7 @@
         "control.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-border-width-emphasis": "border.width.emphasis",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
         "dependency.role-space-2": "space.2",
@@ -20508,7 +21287,6 @@
           "border.width.emphasis",
           "color.border.control",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -20516,6 +21294,8 @@
           "color.surface.canvas",
           "color.surface.default",
           "color.text.default",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
@@ -20547,6 +21327,8 @@
           "color.surface.canvas",
           "color.surface.default",
           "color.text.default",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
@@ -20580,11 +21362,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -20620,6 +21397,16 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -20671,18 +21458,18 @@
       "copy": {
         "directory": "copy/kbd/",
         "files": {
-          "runtime/register/kbd.js": "sha256-bIqjf3wmYiE5WXjgu0PbMLOsZ/LIWT+En7xpv6yWDNQ=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/kbd.js": "sha256-xi2+ei38C1TTd2xavWMW/PM7cQTzc0o4g+7LNPNHnUQ=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-sKesLjkvspbpsD6walvgEF0NFv1fsIWXNbBy+hhtAUE=",
+          "runtime/register/kbd.js": "sha256-92LQ/OR8FLn8svoWLL7M3e0cPXvFcgItaJ0rUFKh7E4=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/kbd.js": "sha256-lHOj6iq9s2QEMIGqbh8RGMmnU1sbrGNw4+mbuKuvByQ=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-BOKm1Tw9r1muXSVI33rhSJD46PIEFVs790GKSMxz6a8=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-tpH9QDJi6WP1xXEjkGhicB0miKDe2fe69wAALVp2X5A=",
-          "index.html": "sha256-n95EF5vEOXJJV0vVrIVOke9WC7Ja83CiFAFm4jiOY3w=",
+          "index.html": "sha256-LueXjvAoEkpUVPKmWgpUPrXdj3mYXVoeh7xRosvVy1w=",
           "README.md": "sha256-CY2b+9Xug3mHZLhawZDvq8BFYG/fjfij5F7sNanjAy4=",
-          "manifest.json": "sha256-T+bUtWMpGiYAfACd3t+B2UJX8FK3BzlfN5i/tTOryoY="
+          "manifest.json": "sha256-ZdQzusLaQI1eqBEb0KGCyUE3p/OohnnnziGlDVCsF30="
         }
       }
     },
@@ -21133,18 +21920,18 @@
       "copy": {
         "directory": "copy/alert/",
         "files": {
-          "runtime/register/alert.js": "sha256-da/DH6uAJcK9QeCEbqBELiYsVrWkN9elrGzFJKH78ZI=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/alert.js": "sha256-afRZEs1g1g0l5Fh9oTXjl7R4w6ChNBFZ+N8x/BeJexg=",
-          "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-cEV4WAKxLNKgYY5pU9nDVSG4toj5mM7vGZwyE+6Ui8o=",
+          "runtime/register/alert.js": "sha256-tioVtq6u1i9xQuPnmdCiimbU19h1/epCn1uitDhU938=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/alert.js": "sha256-viVrXu+dUgCAMDq7iuljYYljZLxreTt4cQ+40NUQ3Js=",
+          "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-5Dd4DFZ5Lg+H5ZcZnWfb8Ommsp9rKKRLJYR0cpgWWpU=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-QUAq9dxIFB1jlxB27CrSrEZKRLa4rC6qRLbWmR2t/ug=",
-          "index.html": "sha256-F+j2IXSP/bqqvJ5iiyqLOkHvIuLBvN0FsF+7CX+ZhVs=",
+          "index.html": "sha256-GQ2nYpJKuk1PCqh/falGa06i3ANZHhohF4LRN04wYwk=",
           "README.md": "sha256-tx+34leZRjiZARWtxlnmDc9/6JPBGKFZl1od0IYo4kc=",
-          "manifest.json": "sha256-f/+taezEaLxGwimv58Q/I0IZhOlgqScdKlt4tv+J4js="
+          "manifest.json": "sha256-Xr0PVAQg/cCG1sYsDsG/HtcuGQAX0No2RKYfPdwKhZs="
         }
       }
     },
@@ -21268,7 +22055,7 @@
         "danger.text": "color.status.danger.on-fill",
         "danger.button-bg-hover": "color.action.destructive.pressed-bg",
         "action.text": "color.text.link",
-        "action.bg-hover": "color.interaction.hover.bg-strong",
+        "action.bg-hover": "color.interaction.hover.bg",
         "action.text-hover": "color.text.link-hover",
         "close.text": "color.action.tertiary.text",
         "close.bg-hover": "color.action.tertiary.hover-bg",
@@ -21292,7 +22079,7 @@
           "color.border.overlay",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.hover.bg-strong",
+          "color.interaction.hover.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -21345,7 +22132,7 @@
           "color.border.overlay",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
-          "color.interaction.hover.bg-strong",
+          "color.interaction.hover.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -21362,7 +22149,6 @@
           "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
-          "color.primitive.red.150",
           "color.primitive.red.350",
           "color.primitive.red.550",
           "color.primitive.red.750",
@@ -21453,7 +22239,7 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.hover.bg-strong": {
+          "color.interaction.hover.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -21674,18 +22460,18 @@
       "copy": {
         "directory": "copy/toast/",
         "files": {
-          "runtime/register/toast.js": "sha256-IdIE1uz4eUV1mu94jhavw3kQx9Omawr6aMO+ij/EIRU=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/toast.js": "sha256-v6J5D8moC3m7GxC2mVYytkK8MOkwHSwODcmKmj1Kkgk=",
-          "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-dMp7q8HbznH2LxwbeRaoK7WL/2M2GeVwkitql3aJ3GE=",
+          "runtime/register/toast.js": "sha256-3boFTJqHNwJ4he43NpdsZK8ttLeqvz9HMoUtwFjVwtk=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/toast.js": "sha256-WIMDZ+G0PKE8LTL9S9wLE1enIZrIXAt4h0Isi5xnGTU=",
+          "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-uDOVAGMFD+o43PgFLYIr3brOp1t4nrDGrE8jaKF7S2U=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-2DXrOBOlEPzc9p3N5SEbw98qHHSMYTxlOnR6gT91kkU=",
-          "index.html": "sha256-UfXmgxl10YQJyIiSccW0Sy7gHSjlICq9a865B0vR+7Q=",
+          "index.html": "sha256-pfILKUsTjhG02CF143yBVB1w9s3PoEzh0CXq+YfLKdU=",
           "README.md": "sha256-Gqkqv+2L4+y8mTQfPGpUxoV4B+6QJazzN5XtXWfyj4w=",
-          "manifest.json": "sha256-Dulou4hwI8bILLX7ogZBb3IkLJsGcenBCv2301DmbKo="
+          "manifest.json": "sha256-bCWPynWl0C2Bz5UPADBaW4C1eOSMaHaXHhVMpceGiNA="
         }
       }
     },
@@ -21989,18 +22775,18 @@
       "copy": {
         "directory": "copy/progress/",
         "files": {
-          "runtime/register/progress.js": "sha256-wcMNQVWBoGiWoasImip5urxM4QZkIIiDqdTbDHFb09c=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/progress.js": "sha256-SoIKI41QOIzDVzCbEX4RjUwuYIgyVdRipglbNI30PdE=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-qVh6/s9QPg2t6WrczrtP5i8fP1blV8a6S9OZUF5oJdY=",
+          "runtime/register/progress.js": "sha256-njMsMaNTGgxOBV8TIDHAQYyRI8+ERzh0jbkOW22fUzc=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/progress.js": "sha256-nQLxDlUaGyc+Y+OKp0jTGxlgHN79YT/NpaldZf1fxSY=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-UwXFHO6OA2kZ3cHUZ8xWNx21ZB+espmS0o/GDj19Q4I=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-Bm2XYmsDcMrSYl/yKw1emmfA++ea/EjE5wzSjdg0eyw=",
-          "index.html": "sha256-PMCQa/n0AlL1bSbPiT96VPfHTQgJmUowUoHElZGYf5k=",
+          "index.html": "sha256-eR6RiF/n8XvphWFe6R1Htt1DNndZuhW1zRV0M5wb1lM=",
           "README.md": "sha256-oXXC+n+f426Xr1+uHSEamfpzBwqmaBbe41P73puQ9p4=",
-          "manifest.json": "sha256-1b2q82GAM6aew7BrlzqLA7+ZV6dnlY7OpesY4DV0bOc="
+          "manifest.json": "sha256-JK2iNGnh1IThiaBBVY470y+/lPgXXy7aOJvAGd7Rlcg="
         }
       }
     },
@@ -22292,18 +23078,18 @@
       "copy": {
         "directory": "copy/loading-indicator/",
         "files": {
-          "runtime/register/loading-indicator.js": "sha256-4wKk+e/O8cCnxAR2RouY4I5/K1UuOcPjh3ehR7I9oqo=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/loading-indicator.js": "sha256-iTQYSJMXD02jZHXKFvaFfVLsSwVgLrG7ERC0uWAqpvU=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-eNbtRNqnJDdDaKs9tYapfgCNRwMffdQ7e2TqjrYuL6w=",
+          "runtime/register/loading-indicator.js": "sha256-HHn/Y10+qdiLQ3DUo5i5OEHDhfg4ViJo8nI4ie7dJps=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/loading-indicator.js": "sha256-Z0q8XmSpQgrwC0AcFNlCQIZSt8tVvZ/ZF6McNG1rtBo=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-ombtuuRs2PXpBfR+/B6paDohN3ODM1V0aNbRSzOcrmQ=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-yiCrGr/OXo7SakIH4qRV3wDHbj09EqyJ2F7eTQHbnbc=",
-          "index.html": "sha256-MGxeLPPCJTIT6qFSP0xS4GBpdzFTGjBojEELvbNO6VY=",
+          "index.html": "sha256-2D4ozePauDWxVekXfRHx66zP4agX8tbRUgjo86Z3WjM=",
           "README.md": "sha256-YVFITjZXVN2sAQCTUcMZO5v0Xsc63owlmsQGMTQ42wY=",
-          "manifest.json": "sha256-Z6/RoN7WPNcBLssWQ87bGJZ78aTSUa9ZuXMYDROZNus="
+          "manifest.json": "sha256-cP+54saIGncnKG1Boc+Akr3YR79g3QhGamC6uIhbxPU="
         }
       }
     },
@@ -22386,10 +23172,10 @@
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-color-border-divider": "color.border.divider",
         "dependency.role-color-surface-raised": "color.surface.raised",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-16": "space.16",
-        "dependency.role-space-2": "space.2"
+        "dependency.role-space-16": "space.16"
       },
       "status": {
         "implemented": true,
@@ -22404,7 +23190,6 @@
           "color.border.control",
           "color.border.divider",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -22413,13 +23198,14 @@
           "color.surface.default",
           "color.surface.raised",
           "color.text.default",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.32",
           "space.4",
           "z.popover"
@@ -22449,13 +23235,14 @@
           "color.surface.default",
           "color.surface.raised",
           "color.text.default",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.32",
           "space.4",
           "z.popover"
@@ -22490,11 +23277,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -22535,6 +23317,16 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -22565,11 +23357,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.32": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -22591,18 +23378,18 @@
       "copy": {
         "directory": "copy/skeleton/",
         "files": {
-          "runtime/register/skeleton.js": "sha256-LZWZWuDy/lr/JDq+2VL59KCkU2EurStRQaUsuNF4US4=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/skeleton.js": "sha256-Ou8+/8NCHGRzG6ik6k6762M8G4PMLaBQXj4aPynetXo=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-JI92x7GOktbjpIm0AQnODJ4rVTJnEQA4DLP34bflM4k=",
+          "runtime/register/skeleton.js": "sha256-JdObZ43D4BCk7fNL7BZvz8hcDULGiVrwvC7nVz4lwFE=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/skeleton.js": "sha256-WSpVLmYkqKadgGqtEfd4Hma86gL9cG2QQC4FW0BXHKw=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-Fdg05sQx+/Q5Ia/CN1d6mo9ueZkpbJnBwTnVSbNePgA=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-/g7jxryHfbaG3yxoxK8NfCh2k5U92wPPELD/107+2Ps=",
-          "index.html": "sha256-wOHcfVLjvDJzcjrxHt2FdIU6zvsgQKyM+mk68FWiW1g=",
+          "index.html": "sha256-fI+dNiKndtDjzLJEq6oahe+GPWudTAPb9j0TFGRIf78=",
           "README.md": "sha256-nzNnLPK+pu75MG+iTs+EMp/xOyJFTC/9GM9JCwIoCno=",
-          "manifest.json": "sha256-YCCxtxYLNlpJZqd02zALos+1RGYqYXZnhNIgbjjTOLk="
+          "manifest.json": "sha256-/IlgtvilSDqgyjMmF2055DmrCe9e27wEIxyPXZ9j6zk="
         }
       }
     },
@@ -22965,18 +23752,18 @@
       "copy": {
         "directory": "copy/tooltip/",
         "files": {
-          "runtime/register/tooltip.js": "sha256-HkIZuQ8Gs11kQ0MzBEIBWrfaPopBPdUh+ODRas1HzLk=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/tooltip.js": "sha256-3/N04wmhF1WPLWW0LBMN2pFnpLGTy7p7toYw2pZpNw0=",
-          "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-Skdu3czE82hMaq0VZwtG6ERV4Hud75l3iMhOfMR7K7U=",
+          "runtime/register/tooltip.js": "sha256-G4uAYJmQJk4eTEhF1uHV44mtO+Vefw1Onc1nq3+iWlU=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/tooltip.js": "sha256-MhBgu8Nu2Vx7dqARBvSKFOY+LCcOut1TAcB/5QSwPPI=",
+          "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-qYB8NrU6j0LSeluhANQt7hX4GwZJkfsCr7sElkRObAs=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-+kSohyFbJg7z8/YUnlkzY1UQAu9ZLX7qE1eFLvk/1hI=",
-          "index.html": "sha256-E+iyir+kE7FZW4yp4r+zjaBJSIcRsJGbvmwPckUJga0=",
+          "index.html": "sha256-H8VqbExkj5zBn+UMGOUurqozbkho78wvT0O1LxdqEXs=",
           "README.md": "sha256-gCdLT45+37bldGYfH9LhZjTXGX04d3jZOS7ARTD3bCE=",
-          "manifest.json": "sha256-QxjcDTsBx4LoM8mRkg4NgUQUatj3fHOwB6EKt8pWLZw="
+          "manifest.json": "sha256-jnoOb2I9sRZsUnOtwqqwpg9QyVSFlW3K65GYFix39dc="
         }
       }
     },
@@ -23078,17 +23865,22 @@
         "root.border": "color.border.control",
         "heading.text": "color.text.bright",
         "secondary.text": "color.text.muted",
-        "control.bg": "color.surface.input",
+        "control.bg": "color.action.secondary.bg",
+        "control.text": "color.action.secondary.text",
+        "control.border": "color.action.secondary.border",
+        "control.bg-hover": "color.action.secondary.hover-bg",
+        "control.bg-active": "color.action.secondary.pressed-bg",
+        "control.border-active": "color.border.active",
         "control.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-color-border-overlay": "color.border.overlay",
         "dependency.role-color-surface-overlay": "color.surface.overlay",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
         "dependency.role-space-16": "space.16",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-8": "space.8"
       },
       "status": {
@@ -23101,10 +23893,34 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
+          "color.border.disabled",
           "color.border.overlay",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -23114,15 +23930,20 @@
           "color.surface.input",
           "color.surface.overlay",
           "color.text.default",
+          "color.text.disabled",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -23131,37 +23952,81 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
+          "color.border.disabled",
           "color.border.overlay",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.primitive.alpha.transparent",
           "color.primitive.ink.0",
           "color.primitive.ink.28",
+          "color.primitive.ink.30",
+          "color.primitive.ink.40",
           "color.primitive.ink.52",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
+          "color.primitive.red.150",
+          "color.primitive.red.200",
           "color.primitive.red.350",
+          "color.primitive.red.400",
+          "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
+          "color.primitive.red.850",
+          "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.700",
+          "color.primitive.rose.800",
           "color.surface.canvas",
           "color.surface.default",
           "color.surface.input",
           "color.surface.overlay",
+          "color.text.bright",
           "color.text.default",
+          "color.text.disabled",
+          "color.text.on-action",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -23178,6 +24043,106 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.destructive.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.active": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.control": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -23185,6 +24150,11 @@
               "D-007"
             ]
           },
+          "color.border.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.overlay": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -23192,12 +24162,27 @@
               "D-008"
             ]
           },
+          "color.interaction.disabled.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.drop-target": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring": {
+          "color.interaction.focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.interaction.focus.ring-container": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.interaction.pressed.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -23247,16 +24232,41 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.text.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "density.comfortable.control-height": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.comfortable.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "density.compact.control-height": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.compact.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -23272,22 +24282,22 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "radius.none": {
+          "motion.duration.fast": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.12": {
+          "radius.none": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.16": {
+          "space.12": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
+          "space.16": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -23318,18 +24328,18 @@
       "copy": {
         "directory": "copy/popover/",
         "files": {
-          "runtime/register/popover.js": "sha256-eWKTLAUIMPauNqccfCSWaTkpN6Eyrj+GtlvM7FRaKHc=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/popover.js": "sha256-P63Ou+ew1qtVXdZkxnO6uM5ZG7w9hOBlPK+HNXQbkAU=",
-          "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-53zGKZZyZMB+sdGIbnQk30oFXcLvjoplsW7FfQ9W0u0=",
+          "runtime/register/popover.js": "sha256-NDvrOkPFLsVu6H7xsvbIrVzEyB991xTSx7kQeyplwJo=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/popover.js": "sha256-qVz5uQ2xxsSVcKXfgit5JgjSZ3kzPvm9/Mt3A4X1NEg=",
+          "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-xmMasEZmjEVePt3EbtGTGv48RqUg6XWxZKYkmzUQlQY=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-tBbkSUEedfklBWmTm/lh13o3rlYHe/9AGgvmXp+p/Lo=",
-          "index.html": "sha256-qj6qyYYBmNfnfn4cPT10GeMQN/ToGtN/ZB6H3yjUV/g=",
+          "index.html": "sha256-EXPyGAfu1NC/kmTVCftVrEr6TsOglaJBB5amGR0C4K0=",
           "README.md": "sha256-2w2CMw7jTANV0wE6ux5POoe9QeMf/7BVerq3YrpiziI=",
-          "manifest.json": "sha256-cbFFGYigmfXCHWbnqp7UDh18ygoUiqUWr96ofsWEhDM="
+          "manifest.json": "sha256-vLSWeJ0wMVfl/GLXwjSKBXs+QwU7ThdTkO5JaqXyML8="
         }
       }
     },
@@ -23528,6 +24538,7 @@
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.status.danger.text",
           "color.surface.backdrop",
           "color.surface.canvas",
           "color.surface.input",
@@ -23624,6 +24635,7 @@
           "color.primitive.rose.600",
           "color.primitive.rose.700",
           "color.primitive.rose.800",
+          "color.status.danger.text",
           "color.surface.backdrop",
           "color.surface.canvas",
           "color.surface.input",
@@ -23842,6 +24854,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.status.danger.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.surface.backdrop": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -24030,18 +25047,18 @@
       "copy": {
         "directory": "copy/dialog/",
         "files": {
-          "runtime/register/dialog.js": "sha256-Y6MRVCgkK5UEzcEdMHQSCUf6gMnxsPOJuhfEFWmJXOw=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/dialog.js": "sha256-e9pTCjxk1e95o6PW5WuKLJsHz87/SQRFeL9+DTQyk5I=",
-          "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-d4bh9HaP4YOtfgWmP42qVqw3nqSJ3DF629AWjqoZTn4=",
+          "runtime/register/dialog.js": "sha256-waqEj5W9GRcvFu/OpnJxmONEY3yiBYgB2Fak5uwMsbA=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/dialog.js": "sha256-mYfz6BnuRAPGKxNiVulnuJ4IEMvqr5BPqrNrZCRR5H8=",
+          "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-PL+Ntvoc1uooINO+TPwR7KzuU7dbER2pJdlz10y0UyY=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-wFFtRxUFWBTzxYOcblp+JjddYxJQF3QKoOb0/hIuSL0=",
-          "index.html": "sha256-cDDMTM4Wj+7faOBKrvRWjGkb2tcMvyJcbhuH6ForsLs=",
+          "index.html": "sha256-Q/j50VjcxyfFKNml07quAEQPOpf3g/BvIyvycnVJuzE=",
           "README.md": "sha256-qhTQOsunJthiAQNFRNPTJx74lX2dH6rh6jISELzgD5Q=",
-          "manifest.json": "sha256-AJuEfuBHZb4d3lOAX/LxDDfwsCCYi6i4YdV+9O78IPY="
+          "manifest.json": "sha256-m5mXloJmQCM08+v8jrBtBzmVjcZabnvryBht9CoJb+g="
         }
       }
     },
@@ -24743,18 +25760,18 @@
       "copy": {
         "directory": "copy/drawer/",
         "files": {
-          "runtime/register/drawer.js": "sha256-6AFbTqS+kQAd15TJ9NzKLIyNKPdVVmxyZMeHJXtNEhU=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/drawer.js": "sha256-vwjZdEg2SybEwAsIBL+uJuAs6ArJnLfrtqdRiOtleqA=",
-          "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-39DmGp3B3f8+C/QGAv6xbiVXT7QviSaVCnHk8XpC158=",
+          "runtime/register/drawer.js": "sha256-rA72wn/EhgwDqOffVBPLtBX9zTwVRgod2uadIlZcLe0=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/drawer.js": "sha256-jGdxQ8JnwAPl1aTJWnbXrRb0kPIs7kJZo5rIrmfBTF4=",
+          "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-r9vwT85nLqMxpyVzGQDrQIU3bpOdw5TleRvfLX3IVQs=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-RNAiKQJPioHCtfhMtqcsFaQFfwhKvdH+iIfLXOWo6QQ=",
-          "index.html": "sha256-CbS/ignNl9YlA8MUwmXMnGVVRk6rR78IN2YGSe3T/OI=",
+          "index.html": "sha256-E0Z5esPR0fYfy04CP3TuZwrK6CEw4DIxyD9vXPSkZAI=",
           "README.md": "sha256-fOfwfTYC9vdlgQFOfWiigzqCKfrU93VWnGHVQW9kH8s=",
-          "manifest.json": "sha256-sVEeq/PKuPmVSBR72cingvVcslqWxp/7MiJZtdMTaT0="
+          "manifest.json": "sha256-O71hKP440tr3Fw93dJfDZGswP4WrnavbuPA4nRoGm6g="
         }
       }
     },
@@ -24870,15 +25887,34 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
           "color.action.secondary.bg",
           "color.action.secondary.border",
           "color.action.secondary.hover-bg",
           "color.action.secondary.pressed-bg",
           "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
           "color.border.active",
+          "color.border.disabled",
           "color.border.divider",
           "color.icon.decorative",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
+          "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -24887,13 +25923,13 @@
           "color.surface.default",
           "color.text.bright",
           "color.text.default",
+          "color.text.disabled",
           "color.text.muted",
           "density.comfortable.control-height",
           "density.comfortable.control-padding-x",
           "density.compact.control-height",
           "density.compact.control-padding-x",
           "focus.offset",
-          "focus.ring",
           "font.family.mono",
           "font.line-height.h1",
           "font.line-height.h2",
@@ -24914,16 +25950,34 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
           "color.action.secondary.bg",
           "color.action.secondary.border",
           "color.action.secondary.hover-bg",
           "color.action.secondary.pressed-bg",
           "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
           "color.border.active",
+          "color.border.disabled",
           "color.border.divider",
           "color.icon.decorative",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -24931,13 +25985,22 @@
           "color.primitive.alpha.transparent",
           "color.primitive.ink.0",
           "color.primitive.ink.28",
+          "color.primitive.ink.30",
+          "color.primitive.ink.40",
           "color.primitive.ink.60",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
           "color.primitive.red.150",
+          "color.primitive.red.200",
           "color.primitive.red.350",
+          "color.primitive.red.400",
           "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
+          "color.primitive.red.850",
+          "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.600",
           "color.primitive.rose.700",
@@ -24946,13 +26009,14 @@
           "color.surface.default",
           "color.text.bright",
           "color.text.default",
+          "color.text.disabled",
           "color.text.muted",
+          "color.text.on-action",
           "density.comfortable.control-height",
           "density.comfortable.control-padding-x",
           "density.compact.control-height",
           "density.compact.control-padding-x",
           "focus.offset",
-          "focus.ring",
           "font.family.mono",
           "font.line-height.h1",
           "font.line-height.h2",
@@ -24981,6 +26045,66 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.destructive.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.action.secondary.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -25006,11 +26130,26 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.active": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.border.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.divider": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -25023,11 +26162,31 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.disabled.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.drop-target": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.interaction.focus.ring-container": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.interaction.pressed.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -25068,6 +26227,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.text.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.text.muted": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -25098,11 +26262,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "focus.ring": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -25189,18 +26348,18 @@
       "copy": {
         "directory": "copy/empty-state/",
         "files": {
-          "runtime/register/empty-state.js": "sha256-U7bwZQNspzXEKbkM+QwrFwH9wCsXZ+UNK2RYEFi+FjI=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/empty-state.js": "sha256-bmsYB/w+TevvaR9K+tvrVuNDGxVPv2PYR4hbTkhw+dU=",
-          "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-Mdd72ooxolJDcPYScpT7yUM7Uj1SV5nk9LuG9vP0EeA=",
+          "runtime/register/empty-state.js": "sha256-O+XPQiZJD3SM6EGCJ9p7Ia3RwHie8uDXVlJd2Vl8f1g=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/empty-state.js": "sha256-OdxqAGZuSH7KdWGE58jWJBVQnd4azuJVXLqmIEKf/1k=",
+          "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-BeQzoBMmZ//SCPym1JhwPfMM51a6wiO3oVtwH7lOOpc=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-j6rKuP4LmxmaKm47ZcfAqQ0LKMqN7l90HZwvUydHutQ=",
-          "index.html": "sha256-rcFm3dTOVu+pB+gds4jp/elaQrgi/1rGF8xpNTCacL4=",
+          "index.html": "sha256-stJ7LYfCGn32eDmo6PzwFlZwtF8GlPwt4gCAQ4f6EfU=",
           "README.md": "sha256-460PP03z7gtyCcQW1opIbUBVyz/wg3Dv8SyzbynmB2E=",
-          "manifest.json": "sha256-h6FDAg6a5sS+S1za92hKQI46WLnC4dZBTi2eTWdOP+A="
+          "manifest.json": "sha256-+coWeqOocevShbs/IcuLNwwM7Z3ICGFK79A8oheiiXo="
         }
       }
     },
@@ -25301,7 +26460,12 @@
         "root.border": "color.border.control",
         "heading.text": "color.text.bright",
         "secondary.text": "color.text.muted",
-        "control.bg": "color.surface.input",
+        "control.bg": "color.action.secondary.bg",
+        "control.text": "color.action.secondary.text",
+        "control.border": "color.action.secondary.border",
+        "control.bg-hover": "color.action.secondary.hover-bg",
+        "control.bg-active": "color.action.secondary.pressed-bg",
+        "control.border-active": "color.border.active",
         "control.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-border-width-emphasis": "border.width.emphasis",
@@ -25312,9 +26476,9 @@
         "dependency.role-color-text-disabled": "color.text.disabled",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-8": "space.8"
       },
       "status": {
@@ -25327,11 +26491,33 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
           "color.border.disabled",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -25344,13 +26530,17 @@
           "color.text.default",
           "color.text.disabled",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -25359,42 +26549,79 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
           "color.border.disabled",
           "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
+          "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.primitive.alpha.transparent",
           "color.primitive.ink.0",
           "color.primitive.ink.28",
           "color.primitive.ink.30",
+          "color.primitive.ink.40",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
+          "color.primitive.red.150",
           "color.primitive.red.200",
           "color.primitive.red.350",
+          "color.primitive.red.400",
+          "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
           "color.primitive.red.850",
           "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.700",
+          "color.primitive.rose.800",
           "color.status.danger.border",
           "color.status.danger.text",
           "color.surface.canvas",
           "color.surface.default",
           "color.surface.input",
+          "color.text.bright",
           "color.text.default",
           "color.text.disabled",
+          "color.text.on-action",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -25411,6 +26638,106 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.destructive.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.active": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.control": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -25438,6 +26765,16 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.focus.ring-container": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.interaction.pressed.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -25498,11 +26835,31 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.comfortable.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "density.compact.control-height": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.compact.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -25518,17 +26875,17 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "radius.none": {
+          "motion.duration.fast": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.12": {
+          "radius.none": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
+          "space.12": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -25559,18 +26916,18 @@
       "copy": {
         "directory": "copy/error-state/",
         "files": {
-          "runtime/register/error-state.js": "sha256-LIyigSg3KPB01jhmW1+pAsrMoPyf6KtZcmrTenvFCx8=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/error-state.js": "sha256-vgUhuSmkAd9uc2x8r5Oc5k2rjzWbEtFRnrR0smV/YqM=",
-          "runtime/chunks/overlays-C6nlCHqg.js": "sha256-JtKjtFU2sbObAEtYaA9S+YE40WKP5hX073Xv4lpA67o=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-CdLPhgSZDY0ucB4/nfZpfphuYXcfoqslUTPyuhz2tDw=",
+          "runtime/register/error-state.js": "sha256-7HAfC906Fv50aD7dtTHvGX8XoxDanaS7Xy+pD6+6JlQ=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/error-state.js": "sha256-SjO3330quFN81HjlZH31y/z5f1V4MNQewsgHCYnHvA8=",
+          "runtime/chunks/overlays-Bw8SSDKz.js": "sha256-YrX9CL2A48QwI7COQQ5anYJLPOxpKrIeyz+jtfp+T+I=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-PkulOjRkq7PLGjfU346e4I1xzJqOFRjr9UgXNeugJLY=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-ORjrriOpBHk2VlqSsyeUSEs1medDwB5oaTT4RxrXLFs=",
-          "index.html": "sha256-ypHtxbip0wQwfxcnTK23eRJ0nU1YTWrbBIr8zvdVgzA=",
+          "index.html": "sha256-oKMXjqXWa3C9B3nx3LWjOjaPYvvFEL4y4yUPyCiyHFI=",
           "README.md": "sha256-Dl3lNTMlz4fye9SN1UJc6WVgA6BbWKgqHMIRpH62yOY=",
-          "manifest.json": "sha256-tmU/T4Skbf9Eu3//L9hqqYCXoJofZolyF9xBuaRZ/fM="
+          "manifest.json": "sha256-JxwbDxIL6bhbIa230xaK7YZG+x1n9Zg8QFq1Ce62q7Q="
         }
       }
     },
@@ -26107,18 +27464,18 @@
       "copy": {
         "directory": "copy/code-editor/",
         "files": {
-          "runtime/register/code-editor.js": "sha256-agRsxgm8tBPEgLi7nGnYfqB/KOMRnbad/Eph3+YfYnE=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/code-editor.js": "sha256-F0O1Zc5wQaq5NGzIEEBzGXHEfj0hUaCR23D2hnUukLY=",
-          "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-X9h2Mxr0yLKLoKffZDsC55HBiRmSX+SuRQkjkcxerOo=",
+          "runtime/register/code-editor.js": "sha256-qnN0iH+h4BDWCcc4Q3/6f1t7opIG5ze5nI1wsQL/tDg=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/code-editor.js": "sha256-MMz8rm+dJT4XahXmR9ftmU0IhNW1NqLIHW7U3STXDPQ=",
+          "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-aa9zAzIlna+IPd+Xivi0WU385o/+RmhG5pRVR1vsE64=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
-          "element.html": "sha256-aD+1gDxKB5fijO+A+hjuTqChvHPDv5zp5tK9UPZhwLc=",
-          "index.html": "sha256-Dn2d67XC/1eO3QNVfsBf4pv4f2WuhBmmk1fFbSiGnWY=",
+          "element.html": "sha256-yXGoyQ6QC1zx9v7pXmaH1J2StJS/EEc6ZMqWAgdNj6A=",
+          "index.html": "sha256-2pHlO7mTG0Z1FySFL7jnRFIidQEfcMXdM+OtJBsZeXA=",
           "README.md": "sha256-oP4WnaIDAzxwm22ndFvMgchWr7l/DH7YotacPAFZuO8=",
-          "manifest.json": "sha256-AZOed+UbhiUZzGPeg4XOfbQaDtbSuEA5oe+y2k51vjI="
+          "manifest.json": "sha256-34XB9GRIxMUKi/v1n3Xa3EwEByberTg3XfCVREIe3rw="
         }
       }
     },
@@ -26225,6 +27582,13 @@
         "secondary.text": "color.text.muted",
         "control.bg": "color.surface.input",
         "control.focus": "color.interaction.focus.ring",
+        "button.bg": "color.action.secondary.bg",
+        "button.text": "color.action.secondary.text",
+        "button.border": "color.action.secondary.border",
+        "button.bg-hover": "color.action.secondary.hover-bg",
+        "button.bg-active": "color.action.secondary.pressed-bg",
+        "button.border-active": "color.border.active",
+        "button.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-color-code-search-current-bg": "color.code.search-current-bg",
         "dependency.role-color-code-search-current-text": "color.code.search-current-text",
@@ -26233,9 +27597,9 @@
         "dependency.role-color-surface-code": "color.surface.code",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-8": "space.8"
       },
       "status": {
@@ -26248,13 +27612,36 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
+          "color.border.disabled",
           "color.code.search-current-bg",
           "color.code.search-current-text",
           "color.code.search-match-bg",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
@@ -26264,15 +27651,20 @@
           "color.surface.default",
           "color.surface.input",
           "color.text.default",
+          "color.text.disabled",
           "color.text.muted",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -26281,25 +27673,59 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
+          "color.border.disabled",
           "color.code.search-current-bg",
           "color.code.search-current-text",
           "color.code.search-match-bg",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.primitive.alpha.transparent",
           "color.primitive.ink.0",
           "color.primitive.ink.20",
           "color.primitive.ink.28",
+          "color.primitive.ink.30",
+          "color.primitive.ink.40",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
           "color.primitive.red.150",
+          "color.primitive.red.200",
           "color.primitive.red.350",
+          "color.primitive.red.400",
+          "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
+          "color.primitive.red.850",
+          "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.600",
           "color.primitive.rose.700",
@@ -26308,16 +27734,23 @@
           "color.surface.code",
           "color.surface.default",
           "color.surface.input",
+          "color.text.bright",
           "color.text.default",
+          "color.text.disabled",
           "color.text.muted",
+          "color.text.on-action",
           "density.comfortable.control-height",
+          "density.comfortable.control-padding-x",
           "density.compact.control-height",
+          "density.compact.control-padding-x",
+          "focus.offset",
+          "focus.ring",
           "font.family.mono",
           "font.line-height.ui-md",
           "font.size.ui-md",
+          "motion.duration.fast",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -26329,7 +27762,107 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "border.width.emphasis": {
+          "border.width.emphasis": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.active": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -26341,6 +27874,11 @@
               "D-007"
             ]
           },
+          "color.border.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.code.search-current-bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -26356,6 +27894,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.disabled.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.drop-target": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -26371,6 +27914,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.pressed.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -26416,6 +27964,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.text.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.text.muted": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -26426,11 +27979,31 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.comfortable.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "density.compact.control-height": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "density.compact.control-padding-x": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.offset": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "focus.ring": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "font.family.mono": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -26446,17 +28019,17 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "radius.none": {
+          "motion.duration.fast": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.12": {
+          "radius.none": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
+          "space.12": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -26487,18 +28060,18 @@
       "copy": {
         "directory": "copy/editor-search/",
         "files": {
-          "runtime/register/editor-search.js": "sha256-tMpvZf9OrWiyhDzn0EWZnEz8kSJ2SP8tALzQVYqwCws=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/editor-search.js": "sha256-tPLpeyxQ/8Gf/LImxqGBvRraQE6oFXtqIspmI84b8XA=",
-          "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-M0SrYSnjmhmwR0wfAiNg1VU3bXhEQkYknaGRLw0fWMM=",
+          "runtime/register/editor-search.js": "sha256-R0CYRlMKJW24RObuaWNYkCNShO/Qtkkh/n9CWJ33FFA=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/editor-search.js": "sha256-aUfiB2u6bRwR1VhsFjANGyo6S0HHuA5lveVDShHVo3c=",
+          "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-EsEJrsGIZ88TEP4pXc0Jt3WQxhCysigIkd1ddeNbHBM=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-d4aAYzdcDHNmdiry3w1Y3xEHMEA6MELYHpoj25fZY7M=",
-          "index.html": "sha256-nzYqIKBlE7peT4onxSzqAj0mwZHNcvHOF2jIuZV5iKo=",
+          "index.html": "sha256-f7NqN883Z+7eUEbHFc9OPrlTwgcg/uxCcMTJm7xVNZ0=",
           "README.md": "sha256-uCiQ7xpaMDEYDoL/7zMcafsbXKeQ+tnAyLmxgCMABh8=",
-          "manifest.json": "sha256-oRjcQaiNJcbQgPckQh0vjN6z83eBEU7mtbesGoE5HGk="
+          "manifest.json": "sha256-QgKi5Ik6JIx1S6FIW4r5/dlBv+1Vooa/ZbYMOGxydmo="
         }
       }
     },
@@ -26619,7 +28192,7 @@
         "row.ring": "color.interaction.focus.ring",
         "row.bg-selected": "color.interaction.selection.bg",
         "row.text-selected": "color.interaction.selection.text",
-        "row.ring-selected": "color.interaction.focus.ring-container",
+        "row.ring-selected": "color.interaction.focus.ring",
         "header.text": "color.text.bright",
         "status.text": "color.status.danger.text",
         "empty.text": "color.text.muted",
@@ -26653,7 +28226,6 @@
           "color.diagnostic.warning.text",
           "color.diagnostic.warning.underline",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.text",
@@ -26876,11 +28448,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.hover.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -27072,18 +28639,18 @@
       "copy": {
         "directory": "copy/diagnostics/",
         "files": {
-          "runtime/register/diagnostics.js": "sha256-lSYtaMuTbe7wtLvNB4chvQ8SOVu0ILi3pFknhy/X/0E=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/diagnostics.js": "sha256-nC94tOw1MCiaCz5hbJRQf8qjWzQDz53K24KiwRwR8ws=",
-          "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-1uXLsplg978riCNhv/v5p+RvR0hW6fVdRnKgNUo+IYs=",
+          "runtime/register/diagnostics.js": "sha256-ALvK2a/RKv8dPsd7vtPOz2gs07sAqHYUeaLkBGbL2bQ=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/diagnostics.js": "sha256-oEE2P+tyCuYFS8Z67kakU24ozr9nPJsXvN7ug/nsESs=",
+          "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-xWB/G9X0gadCbFJ8yqKBaXbBvMPSKyKrVUQR4dZZs88=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-oPPp/R+dnwC1tnH/Td+Hlrs3CRODUkA4Bvq/HK/fAUU=",
-          "index.html": "sha256-Tq03gSM/g1JYQlO5vswlLUOSXHf9l2bEjBuZbLQpK1E=",
+          "index.html": "sha256-faTuPIwIaIe118O39CQtFz4nACEFH1MOeuPsBOwpHh0=",
           "README.md": "sha256-zoebnEYS306DsFzwTsEnc2EoKA+8Dm/eyz4eTXdSnAs=",
-          "manifest.json": "sha256-Pxd8jPIYkeRwMC2E/I0DzzxVoxnL9iQ6p2cvAWl7Qkk="
+          "manifest.json": "sha256-n3A7adYFaPqBEZMH83XHNGwVkvhllkBTQV+FLtmNDTs="
         }
       }
     },
@@ -27211,7 +28778,7 @@
         "row.ring": "color.interaction.focus.ring",
         "row.bg-selected": "color.interaction.selection.bg",
         "row.text-selected": "color.interaction.selection.text",
-        "row.ring-selected": "color.interaction.focus.ring-container"
+        "row.ring-selected": "color.interaction.focus.ring"
       },
       "status": {
         "implemented": true,
@@ -27238,7 +28805,6 @@
           "color.diff.removed.emphasis",
           "color.diff.removed.gutter",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
           "color.interaction.hover.bg-strong",
           "color.interaction.selection.bg",
@@ -27434,11 +29000,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "color.interaction.hover.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -27605,18 +29166,18 @@
       "copy": {
         "directory": "copy/diff-view/",
         "files": {
-          "runtime/register/diff-view.js": "sha256-dfbslff/fV33ePOMN/mGU9l+7RqomLajKxKQdpmW+qQ=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/diff-view.js": "sha256-QfZm092MHlNhP9Vfs6IkWjXkbrGughYsBfHTOCL93cM=",
-          "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-mibFUolrx0OWHlYNpEFTvfkMI0c6h4CUv7SWJ4eQVns=",
+          "runtime/register/diff-view.js": "sha256-9TubYFM9ksBHugPVTEwpyuq1pqPeA3BwnBpoJdM5zRE=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/diff-view.js": "sha256-mc+zZLXtFDZnF4okQ840vLAw4mC40kkmR920bUXfXfo=",
+          "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-zQ+2X33S+1rlKgj8VvnNJSfS/ujlxlYAFFAC3vC+8MU=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-t7cx4Y+4qhIPiwFbRPz+6U12N/CFATPTfG7/iZf85zs=",
-          "index.html": "sha256-EYPYe3QVJkVBz7byssoY6NHiAMZc9tW/oSLut2DPrX4=",
+          "index.html": "sha256-qm8fbs91KUEOm2ss0XShYkbQLzgXVk9OpdrVHfg6Wjg=",
           "README.md": "sha256-2/6IFU4JJZ25X3ZvCCwHM1P9pvt3nJHAUfxoS/Ubi/0=",
-          "manifest.json": "sha256-cIqnQO+bVVoaU28MWcHfPoVhXheewGMtTBcDUDs8vxU="
+          "manifest.json": "sha256-z+BxcKKq1cJGYRwtESbjQpf5ymqtRempRqMUqEY4kKg="
         }
       }
     },
@@ -28158,18 +29719,18 @@
       "copy": {
         "directory": "copy/terminal/",
         "files": {
-          "runtime/register/terminal.js": "sha256-HI+Ed6H0sblV3/oR4o14WYg9OG1oLmgIOC/HbV2sFos=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/terminal.js": "sha256-nnvO5VIA3kECyTshxbykc7AqrK88ML0IDEe6bYvfsQs=",
-          "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-U9mukzoAnquuoQ1KFzbK6bI+fxJdrdrhSiZgfwulwJM=",
+          "runtime/register/terminal.js": "sha256-DtAEqikNcqq/nXccSq0pFsKXxE0BPFgM8N6lScud0Ic=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/terminal.js": "sha256-LBmUT0u6uCLNgKHb3qON4Yl1HjbBCYOByCIC8bGXv2c=",
+          "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-qVvYtOU0V9tpTXLiTfobfn2Bv+Ec58ZxsvFuoOO3zqA=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-WyXNyoxiAXNq3bLZRmrc1qS2XzgHghN+5tO+9HpocVA=",
-          "index.html": "sha256-7nIjP5H9Tnolb/DAw1vtVGkOfqf2/oL9ZxMvSounzKk=",
+          "index.html": "sha256-u2hUMomyNUZvWxfeRu+YXJNwoBZRQAU9c+Wlnmdt/uc=",
           "README.md": "sha256-JMb0MyBFXbZ2TBIQrpRDNUjcH0R6qtmsRDfzwcOAY6o=",
-          "manifest.json": "sha256-sGsy8R0eqkr6bURvIwkRkH0fLyTW8pfdEwky7NiayLM="
+          "manifest.json": "sha256-a2ut5/6sI3Hxhu3TSTLIpHNSL+kcEnFLqsiEP36N7H8="
         }
       }
     },
@@ -28992,21 +30553,21 @@
       "copy": {
         "directory": "copy/settings-panel/",
         "files": {
-          "runtime/register/settings-panel.js": "sha256-tecYNnB3mOO1ir+NYaorlqzgeTXRhGpkaMeZZ5TKo7k=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/register/switch.js": "sha256-WA0Avt/JJmz7DqxDx8v5Rnw3WCZFaVGJjPdibTQKkSc=",
-          "runtime/components/switch.js": "sha256-Cad08u/MHjqLKKV0MpUQNKaHz1fLJnvy5dfayoqsjvI=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "runtime/components/settings-panel.js": "sha256-eL+HBTD98ipggaB6cWxKOgb2UXkBgKT50n7xxlWPHn0=",
-          "runtime/chunks/forms-BT3z7lNC.js": "sha256-Txmae07dWLj1H/FL869U0Kv84TQxzpdFeOg0g8zGK6I=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-bKV+vxJoQcQ+/WSkUADY0AkxpU9pAMAviGj+BrOQK1w=",
+          "runtime/register/settings-panel.js": "sha256-Ob0kL9R4vmbYJ7EqPNT3788vg2FpTs87xAsE1TbqHeg=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/register/switch.js": "sha256-6l7gxY7bHWXI4K8WMdikGfg6Itnf2Uy8hSbsvn+XCYM=",
+          "runtime/components/switch.js": "sha256-sdfSvJlKylAeDbhRKPMRUZ+piEOzKs1aV52BDvjOV/o=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "runtime/components/settings-panel.js": "sha256-2/vcKktPpt7/9RBfexqEoFAPjNDcISoi6AALg6/CVTw=",
+          "runtime/chunks/forms-CE_hP1hg.js": "sha256-uOnoMuSkUbm9C/GfR+PDLYCykyHOQ1Ni7g59c4YMOS0=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-KvYopMeuJv2HW0li1RcLpCJp645gkxeby6o5WD+bx8o=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-Z1ZqDdIXySN8gWG0bvhT8iMaa+GaOyHy/vumYpCsYt8=",
-          "index.html": "sha256-jGGdyR2U7IytSpOvqtrVJUJKtnNfW/khN9J+vCUatNM=",
+          "index.html": "sha256-o83BpK03vkko3vqQPfArOayVjD634LtFPrmdQbjqbQ8=",
           "README.md": "sha256-Jbd8VDlivmCdwjmixGLdZrE/QQ9xdJyk+UIIOcLDqZE=",
-          "manifest.json": "sha256-pyfwmrg9NQ+SMVaMISW1+5BGdWSdQ6Ai43LdqNGYwmQ="
+          "manifest.json": "sha256-WJU4OzQNvp6mP478QOWt8+2mRaVVTuyZocEvRs8BcxQ="
         }
       }
     },
@@ -29921,25 +31482,25 @@
       "copy": {
         "directory": "copy/admin-form/",
         "files": {
-          "runtime/register/admin-form.js": "sha256-wbxQ6jG47yRORiZBcV1vZy21o7vLJ0wZWSBjlQ08r5o=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/register/text-field.js": "sha256-DD+ctMlKClOK6B/glshiJwIjKilewzY171GvKtVGf1A=",
-          "runtime/components/text-field.js": "sha256-6f5tLWwF57IFY+uH5zM0afiU3g09PW3M4772zC7zD4Q=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "runtime/register/textarea.js": "sha256-H+BMjmdgnMxVEA9KvLSSKoOlHTAH91Qy7+pjUiTlgEE=",
-          "runtime/components/textarea.js": "sha256-qJqDEskuaVeBUFjefVF+KSbJV3s6vpaKCtd4aQ4QtoY=",
-          "runtime/register/select.js": "sha256-zXXuJRnrp9EVnk1A8VpgUzF/JPShcAImY9zRc6nQasQ=",
-          "runtime/components/select.js": "sha256-yyq0jsJOysQGTPpFoA1C1aRWSIukrk+M4Ro2ZwCyWbw=",
-          "runtime/components/admin-form.js": "sha256-aN07ea+gUj6aAxwJjeILpqJFPUQJ27g3LAIjpHmljNg=",
-          "runtime/chunks/forms-BT3z7lNC.js": "sha256-Txmae07dWLj1H/FL869U0Kv84TQxzpdFeOg0g8zGK6I=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-Of5oLJY6n5Yfqu44/xCAuuJEYRoCg4Kr+YZbVggbwZE=",
+          "runtime/register/admin-form.js": "sha256-3IJTJLTksVuLj5PxdfQUbymfAb+K4yKLDzOUMb+MHP0=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/register/text-field.js": "sha256-gmqyzVDUD/VCnOF5nDRA0n1F4I7q7lE02AdZeBCFrUk=",
+          "runtime/components/text-field.js": "sha256-4c47ee0iFW2YWW+dVR1PBSJMwOOa5rmKhJSalXzm+Zo=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "runtime/register/textarea.js": "sha256-OGjZrk++zzTI91HXv7chKm86kRb5xICVcoOOdMidF2g=",
+          "runtime/components/textarea.js": "sha256-pi3Oj4itdBVYU/EaRSZ64BqAEsBdeUH4LCG2kwSUKfw=",
+          "runtime/register/select.js": "sha256-TN7apnaEDR69Eobpnesx4c3Yr2iU33xNGj/q9i+nFtw=",
+          "runtime/components/select.js": "sha256-QSO5F4fiwtnnIHZ9/a9n62yVZRlGUIofNkw2oXYIzGY=",
+          "runtime/components/admin-form.js": "sha256-FVzHg1y71Fg3LptLCSedTH/NQIxijxfYfjfBaYWXGS4=",
+          "runtime/chunks/forms-CE_hP1hg.js": "sha256-uOnoMuSkUbm9C/GfR+PDLYCykyHOQ1Ni7g59c4YMOS0=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-Aha0xp86OpN6uUIQCjlXTYdzw2u0p0Y/dxNCx+gMC/s=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-TRLraonRxggrZcfXS9jlN+nTIOpRHiXbMKQNm8NbR2A=",
-          "index.html": "sha256-HsmeIqneb7G9ZHVJEuzAqXdP7AYU8OlzG8Rs70uYyBQ=",
+          "index.html": "sha256-fCyv1GPEoas5phPBo4T3EhrTQ5U3/15ks0AZJQawjDc=",
           "README.md": "sha256-bid+/EA6npftuo0cAZQP6rg+96qu7gNC4h/Klx23PF0=",
-          "manifest.json": "sha256-HtST9X/UpiRDsFEMo7i1ElwMpiALSDf/MyJKLw0Dk90="
+          "manifest.json": "sha256-0cFh6BAwKorLKq38Qi1CjI8uGgYupJJvet2b/DOatzY="
         }
       }
     },
@@ -30165,7 +31726,6 @@
           "density.compact.icon",
           "density.compact.row-height",
           "focus.offset",
-          "focus.offset-container",
           "focus.offset-invalid",
           "focus.ring",
           "focus.ring-container",
@@ -30267,7 +31827,6 @@
           "density.compact.icon",
           "density.compact.row-height",
           "focus.offset",
-          "focus.offset-container",
           "focus.offset-invalid",
           "focus.ring",
           "focus.ring-container",
@@ -30570,11 +32129,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "focus.offset-container": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "focus.offset-invalid": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -30701,21 +32255,21 @@
       "copy": {
         "directory": "copy/filterable-table/",
         "files": {
-          "runtime/register/filterable-table.js": "sha256-4o9WlQbHlOnAg8mdJws9+tapo3wueOwNMacJhswL7Hg=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/register/search-field.js": "sha256-Z6IeX4+LKGVQJUcQGuyUnCBL6ggQSoevMhrj75zYisw=",
-          "runtime/components/search-field.js": "sha256-2ODKfrgzC53SjMT+P7oaRa78AgRY37MG12M7HVRwfQU=",
-          "runtime/chunks/native-CAzZmDKR.js": "sha256-er7tiDPWmSEvPEp+BvRPWpdqnw28ypHQStJng7Dbah4=",
-          "runtime/components/filterable-table.js": "sha256-1tup9iQXvwHywM5vJL3oiz0gLiDGNw/xjkZ91AA+Sok=",
-          "runtime/chunks/tables-B25ydUHs.js": "sha256-XqRdyfrSS93rVybWHq6a0WhrmZgaboHi5n8ymgwRbM8=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-ZpN1xEJy4fV/PBDvH91mkuN2CZqhCUo5wpeCs27jREo=",
+          "runtime/register/filterable-table.js": "sha256-14GtCkn2rDEs/16Zp9P3ejF4+WJRKBEjPP8iHA/QieY=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/register/search-field.js": "sha256-oIExIQ80Xzt1d5Y8KclVl+lAi+cgOMhKMFNPBz8fEXY=",
+          "runtime/components/search-field.js": "sha256-HCnoLO1ZZvDEqeON+Ir7Q+XChuArNr/tJ7H+lnVTJPw=",
+          "runtime/chunks/native-BjBt1sUh.js": "sha256-UbG+1dCvUgpK1/vnx2xDtwwcG1dueRiV1iBEEt9oP7s=",
+          "runtime/components/filterable-table.js": "sha256-xbo/MykYle7VwG4ArKqnOAwxD6bA5BruTf9Mi33CxnE=",
+          "runtime/chunks/tables-Cjr1EIJz.js": "sha256-K6BF6M6xNawgWdL+NIcBRZmY98j45o69tBI034Ks4Bg=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-YC1B05BSsIggrfF5/xkh1/hc/k4XIxz/QKMVNwcSd/Y=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-3PbF9wWtnKy3q07M9x690D730biEbSwu20wHAcvPPEE=",
-          "index.html": "sha256-61p1J3mpIgWTPXP4+wTHI0p/MffdvGq+yeT7j0urEZA=",
+          "index.html": "sha256-L9dRgFL5Tl9EFw9DuTPQaPstK4H0R/A/bzroaL7tvHk=",
           "README.md": "sha256-eYSWLSbTgjyr+5CUJR+E3qhY267Qh6rmF+5P40UanuU=",
-          "manifest.json": "sha256-tE2lTsJjQH6ZBaYTO4TyapuKMSc19KHg0ode/N3j828="
+          "manifest.json": "sha256-2S7hP420pJdNmeeJUc9IqsTnpSHptV2aRy3IL9jjvtQ="
         }
       }
     },
@@ -30817,7 +32371,7 @@
         "workspace.selected-text": "color.interaction.selection.text",
         "workspace.bg-hover": "color.interaction.hover.bg",
         "workspace.ring": "color.interaction.focus.ring",
-        "workspace.ring-on-selection": "color.interaction.focus.ring-container",
+        "workspace.ring-on-selection": "color.interaction.focus.ring",
         "workspace.urgent-bg": "color.status.danger.fill",
         "workspace.urgent-text": "color.status.danger.on-fill",
         "status.separator": "color.text.muted",
@@ -30889,7 +32443,7 @@
           "color.code.whitespace",
           "color.icon.decorative",
           "color.interaction.drop-target",
-          "color.interaction.focus.ring-container",
+          "color.interaction.focus.ring",
           "color.interaction.hover.bg",
           "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
@@ -31312,7 +32866,7 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "color.interaction.focus.ring-container": {
+          "color.interaction.focus.ring": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -31683,19 +33237,19 @@
       "copy": {
         "directory": "copy/i3-window-frame/",
         "files": {
-          "runtime/register/i3-window-frame.js": "sha256-T8BESQEwjGZsf7/+P5mPJcokXWquh+9IX+aeYr2odNE=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/components/i3-window-frame.js": "sha256-uqfVHNwkr/11a11fshN7f0r/dXipCi1Vfc0AlLb+i9c=",
-          "runtime/chunks/compositions-d6BkKTYf.js": "sha256-El5csGAVMeeZWmJ1ztdXW3O3t2AQPrf3YrEOMkGX17c=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-Yk/0tRkcDttUSZKxyg6O6C9kumrEAGehNElFt382jeA=",
+          "runtime/register/i3-window-frame.js": "sha256-qJqHg9H/tx8mSRirpY3qYPpAbM/tk7akOF7Sb6yIBVw=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/components/i3-window-frame.js": "sha256-Xeo48w2qLhBiwCVHaA6whyxItZy/aAj1xHVCQHHnGhk=",
+          "runtime/chunks/compositions-D57dCsBz.js": "sha256-PEpI/vGgdD+LSznUd0iedSxxVE+5QxIO7BGKeQnCRjo=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-j6gn6V0mtTIbd0cJHobuNavfKnCi+dJ0Xg8IoZdHp/U=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
-          "element.html": "sha256-nNyvwUVLU3Rdy3x0UcZN+IkCA1+Ot5CVwjUB54GDnq8=",
-          "index.html": "sha256-5VNshBKwk0GCY7ID/iL5fiZjb6VRrIZhEdVK/HjtiK0=",
+          "element.html": "sha256-r16RBHw/9BhmfwHsOtPnFIkDRIuIAmlN+RpR9z4LXMU=",
+          "index.html": "sha256-vsi84+uGu4rv5NlM/V/to85JQlSDYVg0XKREuwBARII=",
           "README.md": "sha256-C0hpJoSU0W6E5VFxM/5nRjno1clSop0NLti9ZjvJiO0=",
-          "manifest.json": "sha256-SQObA3CbBJSibf9fY3JRlURdH9FXLA7SfbAElKJ+pPs="
+          "manifest.json": "sha256-RTBwBQLyeV3Z3yztEOFvw2Hk3dWF9jDPNGkIMo8j4MM="
         }
       }
     },
@@ -31785,16 +33339,23 @@
         "secondary.text": "color.text.muted",
         "control.bg": "color.surface.input",
         "control.focus": "color.interaction.focus.ring",
+        "button.bg": "color.action.secondary.bg",
+        "button.text": "color.action.secondary.text",
+        "button.border": "color.action.secondary.border",
+        "button.bg-hover": "color.action.secondary.hover-bg",
+        "button.bg-active": "color.action.secondary.pressed-bg",
+        "button.border-active": "color.border.active",
+        "button.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-border-width-emphasis": "border.width.emphasis",
         "dependency.role-color-border-divider": "color.border.divider",
         "dependency.role-color-border-selected-indicator": "color.border.selected-indicator",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
         "dependency.role-space-16": "space.16",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-8": "space.8"
       },
       "status": {
@@ -31810,14 +33371,37 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
+          "color.border.disabled",
           "color.border.divider",
           "color.border.selected-indicator",
           "color.border.strong",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.inactive-bg",
           "color.interaction.selection.inactive-text",
@@ -31848,7 +33432,6 @@
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -31858,31 +33441,61 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
+          "color.border.disabled",
           "color.border.divider",
           "color.border.selected-indicator",
           "color.border.strong",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.inactive-bg",
           "color.interaction.selection.inactive-text",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.primitive.alpha.transparent",
           "color.primitive.ink.0",
           "color.primitive.ink.28",
           "color.primitive.ink.30",
           "color.primitive.ink.40",
           "color.primitive.ink.60",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
+          "color.primitive.red.150",
+          "color.primitive.red.200",
           "color.primitive.red.350",
           "color.primitive.red.400",
           "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
+          "color.primitive.red.850",
           "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.600",
@@ -31896,6 +33509,7 @@
           "color.text.default",
           "color.text.disabled",
           "color.text.muted",
+          "color.text.on-action",
           "density.comfortable.control-height",
           "density.comfortable.control-padding-x",
           "density.comfortable.row-height",
@@ -31912,7 +33526,6 @@
           "radius.none",
           "space.12",
           "space.16",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -31925,7 +33538,107 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "border.width.emphasis": {
+          "border.width.emphasis": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.active": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
@@ -31937,6 +33650,11 @@
               "D-007"
             ]
           },
+          "color.border.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.divider": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -31954,6 +33672,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.disabled.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.drop-target": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -31974,6 +33697,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.pressed.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -32124,11 +33852,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.32": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -32160,23 +33883,23 @@
       "copy": {
         "directory": "copy/file-browser/",
         "files": {
-          "runtime/register/file-browser.js": "sha256-3aIWKczcdziEiQIR4gWOFhsKDAxyRTBDe0i3ynmVXis=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/register/tree.js": "sha256-xY8jWYnbMM8UlE/rdQJsu3/URGPvdUC06U1QmKsmFZQ=",
-          "runtime/components/tree.js": "sha256-1wgpPM9BoC1/T0Or37ZhoekuO2YZ3luXp+DpWKVKBcU=",
-          "runtime/chunks/advanced-DCpe8Ndv.js": "sha256-nr1LFdLYsGeTM4vDyldvuJygRm0F04sYonxatySPu1g=",
+          "runtime/register/file-browser.js": "sha256-6aZxofgHXmaSyrN62aRqrgBNsgXkVl76hwSUGwzsxpM=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/register/tree.js": "sha256-5FC2B/6Dr2k5l/nTb9KKizslYbXmQxe2nEoLuYG6zDg=",
+          "runtime/components/tree.js": "sha256-mYl4DYRuChSjXkRwM7LaJ31aYQZlvzP0RgTYmuNdC9U=",
+          "runtime/chunks/advanced-CqBF0dSb.js": "sha256-ozOzkRU6IeVGBqU3XQ0aLledkAi9vcs8dJdMQutVevs=",
           "runtime/chunks/markup-DeQ4bEMR.js": "sha256-Eyyx7MKBoqXK4i2HaVUQhKUM066L2wIggABt6jAdgas=",
-          "runtime/components/file-browser.js": "sha256-mmsIwfdO+8Xy7vrRylWFBDIwAoWKfkgmb8J17rxDHVs=",
-          "runtime/chunks/compositions-d6BkKTYf.js": "sha256-El5csGAVMeeZWmJ1ztdXW3O3t2AQPrf3YrEOMkGX17c=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-jXsUncF3ZqNTAY54eALB2XHlOFiiumSXp+AnM14Tz1Q=",
+          "runtime/components/file-browser.js": "sha256-rX/Iibk2FD9zA2T7ojRVZgvx3P/v8vt8GOi0X/OOEOY=",
+          "runtime/chunks/compositions-D57dCsBz.js": "sha256-PEpI/vGgdD+LSznUd0iedSxxVE+5QxIO7BGKeQnCRjo=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-UxawfUHhz140JTldQCb8aDbVaLGRxrgbxNCkmCkXxmM=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-TbSmPr7cV31g3WqgPi6LboOGQdmgxz/89Tf/3ld2pfU=",
-          "index.html": "sha256-68VZEF9M4ZFNgI9IZ7yrpktM4/9dA+GR/D6aTo6ocn0=",
+          "index.html": "sha256-ghy6Hidly07DbSb9oIl+42dgKaIRi5V0gVlW8uwsoYs=",
           "README.md": "sha256-pldg7PuzlPHL6J8L3tFRBhM4Mqi8AlcED3V2DXOXZRU=",
-          "manifest.json": "sha256-ega8f7vafG5gKtOcw4Aole+jb7E5C7xB7jZhdJWN0bQ="
+          "manifest.json": "sha256-zktP/nyG1VyLCn4r8rZs7H8IW/V4rWVynrIABSSFKoY="
         }
       }
     },
@@ -32263,17 +33986,22 @@
         "root.border": "color.border.control",
         "heading.text": "color.text.bright",
         "secondary.text": "color.text.muted",
-        "control.bg": "color.surface.input",
+        "control.bg": "color.action.secondary.bg",
+        "control.text": "color.action.secondary.text",
+        "control.border": "color.action.secondary.border",
+        "control.bg-hover": "color.action.secondary.hover-bg",
+        "control.bg-active": "color.action.secondary.pressed-bg",
+        "control.border-active": "color.border.active",
         "control.focus": "color.interaction.focus.ring",
         "dependency.role-border-width-default": "border.width.default",
         "dependency.role-color-border-divider": "color.border.divider",
         "dependency.role-color-surface-chrome": "color.surface.chrome",
         "dependency.role-density-comfortable-control-height": "density.comfortable.control-height",
         "dependency.role-density-compact-control-height": "density.compact.control-height",
+        "dependency.role-focus-offset": "focus.offset",
         "dependency.role-font-size-h2": "font.size.h2",
         "dependency.role-radius-none": "radius.none",
         "dependency.role-space-12": "space.12",
-        "dependency.role-space-2": "space.2",
         "dependency.role-space-8": "space.8"
       },
       "status": {
@@ -32289,17 +34017,40 @@
         "roles": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
+          "color.border.disabled",
           "color.border.divider",
           "color.border.strong",
           "color.chart.axis",
           "color.chart.grid",
           "color.chart.label",
           "color.chart.series-2",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.inactive-bg",
           "color.interaction.selection.inactive-text",
@@ -32313,6 +34064,7 @@
           "color.surface.raised",
           "color.text.bright",
           "color.text.default",
+          "color.text.disabled",
           "color.text.muted",
           "density.comfortable.control-height",
           "density.comfortable.control-padding-x",
@@ -32330,7 +34082,6 @@
           "motion.duration.fast",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -32340,36 +34091,66 @@
         "paths": [
           "border.width.default",
           "border.width.emphasis",
+          "color.action.destructive.border",
+          "color.action.destructive.filled-bg",
+          "color.action.destructive.filled-text",
+          "color.action.destructive.hover-bg",
+          "color.action.destructive.hover-text",
+          "color.action.destructive.pressed-bg",
+          "color.action.destructive.text",
+          "color.action.primary.bg",
+          "color.action.primary.border",
+          "color.action.primary.hover-bg",
+          "color.action.primary.pressed-bg",
+          "color.action.primary.text",
+          "color.action.secondary.bg",
+          "color.action.secondary.border",
+          "color.action.secondary.hover-bg",
+          "color.action.secondary.pressed-bg",
+          "color.action.secondary.text",
+          "color.action.tertiary.hover-bg",
+          "color.action.tertiary.text",
+          "color.border.active",
           "color.border.control",
+          "color.border.disabled",
           "color.border.divider",
           "color.border.strong",
           "color.chart.axis",
           "color.chart.grid",
           "color.chart.label",
           "color.chart.series-2",
+          "color.interaction.disabled.bg",
           "color.interaction.drop-target",
           "color.interaction.focus.ring",
           "color.interaction.focus.ring-container",
           "color.interaction.hover.bg",
+          "color.interaction.pressed.bg",
           "color.interaction.selection.bg",
           "color.interaction.selection.inactive-bg",
           "color.interaction.selection.inactive-text",
           "color.interaction.selection.text",
           "color.interaction.text-selection.bg",
           "color.interaction.text-selection.text",
+          "color.primitive.alpha.transparent",
           "color.primitive.ink.0",
           "color.primitive.ink.14",
           "color.primitive.ink.28",
           "color.primitive.ink.30",
           "color.primitive.ink.40",
           "color.primitive.ink.60",
+          "color.primitive.paper.100",
           "color.primitive.paper.90",
           "color.primitive.red.100",
+          "color.primitive.red.150",
+          "color.primitive.red.200",
           "color.primitive.red.350",
           "color.primitive.red.400",
           "color.primitive.red.50",
+          "color.primitive.red.550",
+          "color.primitive.red.750",
           "color.primitive.red.800",
           "color.primitive.red.850",
+          "color.primitive.rose.300",
           "color.primitive.rose.350",
           "color.primitive.rose.600",
           "color.primitive.rose.700",
@@ -32381,7 +34162,9 @@
           "color.surface.raised",
           "color.text.bright",
           "color.text.default",
+          "color.text.disabled",
           "color.text.muted",
+          "color.text.on-action",
           "density.comfortable.control-height",
           "density.comfortable.control-padding-x",
           "density.comfortable.row-height",
@@ -32398,7 +34181,6 @@
           "motion.duration.fast",
           "radius.none",
           "space.12",
-          "space.2",
           "space.32",
           "space.4",
           "space.8",
@@ -32416,6 +34198,106 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.action.destructive.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.filled-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.hover-text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.destructive.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.primary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.border": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.pressed-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.secondary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.hover-bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.action.tertiary.text": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
+          "color.border.active": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.control": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -32423,6 +34305,11 @@
               "D-007"
             ]
           },
+          "color.border.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.border.divider": {
             "action": "use-and-report",
             "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
@@ -32455,6 +34342,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.disabled.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.drop-target": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -32475,6 +34367,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.interaction.pressed.bg": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.interaction.selection.bg": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -32540,6 +34437,11 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
+          "color.text.disabled": {
+            "action": "use",
+            "reason": "Use within the role's documented scope and restrictions.",
+            "decisionIds": []
+          },
           "color.text.muted": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -32625,11 +34527,6 @@
             "reason": "Use within the role's documented scope and restrictions.",
             "decisionIds": []
           },
-          "space.2": {
-            "action": "use",
-            "reason": "Use within the role's documented scope and restrictions.",
-            "decisionIds": []
-          },
           "space.32": {
             "action": "use",
             "reason": "Use within the role's documented scope and restrictions.",
@@ -32661,22 +34558,22 @@
       "copy": {
         "directory": "copy/compact-dashboard/",
         "files": {
-          "runtime/register/compact-dashboard.js": "sha256-+hjjezkupB41oBwwJyLeQY5FNxI9eXWs5VsP2irSgxY=",
-          "runtime/chunks/element-C1XeXVYC.js": "sha256-VZkTciWeek3bcBd4h0ngRVGe1X7zMK01xhx5IsNOOQ0=",
-          "runtime/chunks/choice-Db_w_BOQ.js": "sha256-Zj9PtQyyZKSATrJYBr7lXlddGGJMBDc5FSnZUWPNAiU=",
-          "runtime/register/chart.js": "sha256-5iBwKSjcyRylARXTeL2emhbuI2FCMQ757IBdPqFnU0U=",
-          "runtime/components/chart.js": "sha256-J4rkX+ylh8URHbl2DxJ2FtbkHBtan2UOpNGVJIh1LjQ=",
-          "runtime/chunks/display-dj9YaBfn.js": "sha256-0Y8LcHvfDz2LLz+EWdO8Jr6pfwnXPw03N8x1UcM2pN8=",
-          "runtime/components/compact-dashboard.js": "sha256-AyJRimILR3ZhpG7LU6Jtut1sQj0LSEFhOC9MT+gVfbQ=",
-          "runtime/chunks/compositions-d6BkKTYf.js": "sha256-El5csGAVMeeZWmJ1ztdXW3O3t2AQPrf3YrEOMkGX17c=",
-          "runtime/chunks/navigation-Dt8ap-9J.js": "sha256-7QSC/eQSDSRRy3YqMltwjb6cwbEA0V652cfo+Ng2VqA=",
-          "tokens.css": "sha256-5KKDTxOLymgbrDN8N70C5k46wvIT1IQF4wwPwpLNy4c=",
-          "component.css": "sha256-CK9kd2wDntxSLF6J4F4+3SFybCPdr/tSqL7xJpw3hFs=",
+          "runtime/register/compact-dashboard.js": "sha256-hCoso+VES7vbCkeradjbcmoYaD/A7Zk2HcIGKzkkT1k=",
+          "runtime/chunks/element-Dovcr9Ky.js": "sha256-7tXEQrcJPBXSDlmCqor6zZVtsFMvL54mFXd6XSTVzQA=",
+          "runtime/chunks/choice-B7mo5Eq3.js": "sha256-hACG+H+nHbUf/wRpyOCQ5RYMwxhd/Fiv+PtEWm0+Bkc=",
+          "runtime/register/chart.js": "sha256-T98hQYpUxEQ3kRDeztnuOxP5XmwfddBBocBZ3rdTxT8=",
+          "runtime/components/chart.js": "sha256-hVyc1MgrIwRQZWPz61YJX6ScFRhDJTjMKtYEs5Xtxoo=",
+          "runtime/chunks/display-Jm9bAsnb.js": "sha256-qZb1g04piEwY3lfFJwMe+0mXR218ljtVi8mepWxrFv8=",
+          "runtime/components/compact-dashboard.js": "sha256-Y2R2ASCxDuMVCbBdUqOGP60JpwtPCK17jCjpQXz1hhE=",
+          "runtime/chunks/compositions-D57dCsBz.js": "sha256-PEpI/vGgdD+LSznUd0iedSxxVE+5QxIO7BGKeQnCRjo=",
+          "runtime/chunks/navigation-BfNzDYZB.js": "sha256-OhGJWNOz3aZxPAacBgEhAFmBLRt/BGPr7INBjumqyQo=",
+          "tokens.css": "sha256-7A9Xv87HbmuVumnQtzllDxHGc2CPnurdpWWuBpEStJg=",
+          "component.css": "sha256-7CRIHJNTDt06T3ztva5EpY4ytKr+vSsMZHxxolQ/+GU=",
           "LICENSE.md": "sha256-qIhhY3s7J0Mo6RsjJ0tLGwDZv4hHq8knuhm+YGjpzh0=",
           "element.html": "sha256-I++zY2714BqcfCh02WgcXCFwujrwXLK4TwP9wII+QE4=",
-          "index.html": "sha256-3/JWb8Uk24wjHBuQjWRaXDvwfUi9Mp9wjh4uYtdNxQ4=",
+          "index.html": "sha256-jCDMPy0iYNKdA2sWCK1pFAeKyhEr/jK4IN0ias0Drlc=",
           "README.md": "sha256-6g2tbWoWmdPy5ju9eAR0VdQ5vp0GjEEftnqhmjoP1j4=",
-          "manifest.json": "sha256-8Tz2CHZNJCFbdxv2h7ms7Dvyie84SceiClcFGjQ4iT0="
+          "manifest.json": "sha256-8HPA/m4bQRmM0HaCiKTayXG+ryly96Ex9sR87wOLabM="
         }
       }
     }
diff --git a/packages/ui/dist/register/admin-form.js b/packages/ui/dist/register/admin-form.js
index 611bd32a3..a6ac994bb 100644
--- a/packages/ui/dist/register/admin-form.js
+++ b/packages/ui/dist/register/admin-form.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./text-field.js";
 import "./textarea.js";
 import "./select.js";
diff --git a/packages/ui/dist/register/alert.js b/packages/ui/dist/register/alert.js
index c0a9872de..4398942dd 100644
--- a/packages/ui/dist/register/alert.js
+++ b/packages/ui/dist/register/alert.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Alert } from "../components/alert.js";
 //#region .cache/ui-build/entries/register/alert.js
 var element = registerElement("j3w1-alert", J3w1Alert);
diff --git a/packages/ui/dist/register/avatar.js b/packages/ui/dist/register/avatar.js
index b2c66d2ae..9367113f3 100644
--- a/packages/ui/dist/register/avatar.js
+++ b/packages/ui/dist/register/avatar.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Avatar } from "../components/avatar.js";
 //#region .cache/ui-build/entries/register/avatar.js
 var element = registerElement("j3w1-avatar", J3w1Avatar);
diff --git a/packages/ui/dist/register/badge.js b/packages/ui/dist/register/badge.js
index 9e0027214..2fe7fff68 100644
--- a/packages/ui/dist/register/badge.js
+++ b/packages/ui/dist/register/badge.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Badge } from "../components/badge.js";
 //#region .cache/ui-build/entries/register/badge.js
 var element = registerElement("j3w1-badge", J3w1Badge);
diff --git a/packages/ui/dist/register/breadcrumbs.js b/packages/ui/dist/register/breadcrumbs.js
index 087fe5e6b..1b41f187d 100644
--- a/packages/ui/dist/register/breadcrumbs.js
+++ b/packages/ui/dist/register/breadcrumbs.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Breadcrumbs } from "../components/breadcrumbs.js";
 //#region .cache/ui-build/entries/register/breadcrumbs.js
 var element = registerElement("j3w1-breadcrumbs", J3w1Breadcrumbs);
diff --git a/packages/ui/dist/register/button-group.js b/packages/ui/dist/register/button-group.js
index 81edee7d1..86bb9c765 100644
--- a/packages/ui/dist/register/button-group.js
+++ b/packages/ui/dist/register/button-group.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1ButtonGroup } from "../components/button-group.js";
 //#region .cache/ui-build/entries/register/button-group.js
 var element = registerElement("j3w1-button-group", J3w1ButtonGroup);
diff --git a/packages/ui/dist/register/button.js b/packages/ui/dist/register/button.js
index 8d63fb5fe..b01aa4dae 100644
--- a/packages/ui/dist/register/button.js
+++ b/packages/ui/dist/register/button.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Button } from "../components/button.js";
 //#region .cache/ui-build/entries/register/button.js
 var element = registerElement("j3w1-button", J3w1Button);
diff --git a/packages/ui/dist/register/card.js b/packages/ui/dist/register/card.js
index 31cc0f59d..2a9535cee 100644
--- a/packages/ui/dist/register/card.js
+++ b/packages/ui/dist/register/card.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Card } from "../components/card.js";
 //#region .cache/ui-build/entries/register/card.js
 var element = registerElement("j3w1-card", J3w1Card);
diff --git a/packages/ui/dist/register/chart.js b/packages/ui/dist/register/chart.js
index 17feb810e..8efbe0a3f 100644
--- a/packages/ui/dist/register/chart.js
+++ b/packages/ui/dist/register/chart.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Chart } from "../components/chart.js";
 //#region .cache/ui-build/entries/register/chart.js
 var element = registerElement("j3w1-chart", J3w1Chart);
diff --git a/packages/ui/dist/register/checkbox.js b/packages/ui/dist/register/checkbox.js
index 0e3541551..70632e2d0 100644
--- a/packages/ui/dist/register/checkbox.js
+++ b/packages/ui/dist/register/checkbox.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Checkbox } from "../components/checkbox.js";
 //#region .cache/ui-build/entries/register/checkbox.js
 var element = registerElement("j3w1-checkbox", J3w1Checkbox);
diff --git a/packages/ui/dist/register/chip.js b/packages/ui/dist/register/chip.js
index 399954b1a..d6b89d151 100644
--- a/packages/ui/dist/register/chip.js
+++ b/packages/ui/dist/register/chip.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Chip } from "../components/chip.js";
 //#region .cache/ui-build/entries/register/chip.js
 var element = registerElement("j3w1-chip", J3w1Chip);
diff --git a/packages/ui/dist/register/code-editor.js b/packages/ui/dist/register/code-editor.js
index ebfebc300..91f3f8d5f 100644
--- a/packages/ui/dist/register/code-editor.js
+++ b/packages/ui/dist/register/code-editor.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1CodeEditor } from "../components/code-editor.js";
 //#region .cache/ui-build/entries/register/code-editor.js
 var element = registerElement("j3w1-code-editor", J3w1CodeEditor);
diff --git a/packages/ui/dist/register/combobox.js b/packages/ui/dist/register/combobox.js
index 7469ac395..0441f87e8 100644
--- a/packages/ui/dist/register/combobox.js
+++ b/packages/ui/dist/register/combobox.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Combobox } from "../components/combobox.js";
 //#region .cache/ui-build/entries/register/combobox.js
 var element = registerElement("j3w1-combobox", J3w1Combobox);
diff --git a/packages/ui/dist/register/command-palette.js b/packages/ui/dist/register/command-palette.js
index 21d0307af..8c4d129ed 100644
--- a/packages/ui/dist/register/command-palette.js
+++ b/packages/ui/dist/register/command-palette.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1CommandPalette } from "../components/command-palette.js";
 //#region .cache/ui-build/entries/register/command-palette.js
 var element = registerElement("j3w1-command-palette", J3w1CommandPalette);
diff --git a/packages/ui/dist/register/compact-dashboard.js b/packages/ui/dist/register/compact-dashboard.js
index 93010f858..6a2980828 100644
--- a/packages/ui/dist/register/compact-dashboard.js
+++ b/packages/ui/dist/register/compact-dashboard.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./chart.js";
 import { J3w1CompactDashboard } from "../components/compact-dashboard.js";
 //#region .cache/ui-build/entries/register/compact-dashboard.js
diff --git a/packages/ui/dist/register/data-table.js b/packages/ui/dist/register/data-table.js
index 9b565eed9..4d622c48b 100644
--- a/packages/ui/dist/register/data-table.js
+++ b/packages/ui/dist/register/data-table.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./menu.js";
 import { J3w1DataTable } from "../components/data-table.js";
 //#region .cache/ui-build/entries/register/data-table.js
diff --git a/packages/ui/dist/register/date-picker.js b/packages/ui/dist/register/date-picker.js
index 24231b7fd..541cd14fa 100644
--- a/packages/ui/dist/register/date-picker.js
+++ b/packages/ui/dist/register/date-picker.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1DatePicker } from "../components/date-picker.js";
 //#region .cache/ui-build/entries/register/date-picker.js
 var element = registerElement("j3w1-date-picker", J3w1DatePicker);
diff --git a/packages/ui/dist/register/description-list.js b/packages/ui/dist/register/description-list.js
index b2341a425..37a62a7a6 100644
--- a/packages/ui/dist/register/description-list.js
+++ b/packages/ui/dist/register/description-list.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1DescriptionList } from "../components/description-list.js";
 //#region .cache/ui-build/entries/register/description-list.js
 var element = registerElement("j3w1-description-list", J3w1DescriptionList);
diff --git a/packages/ui/dist/register/diagnostics.js b/packages/ui/dist/register/diagnostics.js
index e92c83ed2..2d9f84547 100644
--- a/packages/ui/dist/register/diagnostics.js
+++ b/packages/ui/dist/register/diagnostics.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Diagnostics } from "../components/diagnostics.js";
 //#region .cache/ui-build/entries/register/diagnostics.js
 var element = registerElement("j3w1-diagnostics", J3w1Diagnostics);
diff --git a/packages/ui/dist/register/dialog.js b/packages/ui/dist/register/dialog.js
index ee673cb86..bded0a66c 100644
--- a/packages/ui/dist/register/dialog.js
+++ b/packages/ui/dist/register/dialog.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Dialog } from "../components/dialog.js";
 //#region .cache/ui-build/entries/register/dialog.js
 var element = registerElement("j3w1-dialog", J3w1Dialog);
diff --git a/packages/ui/dist/register/diff-view.js b/packages/ui/dist/register/diff-view.js
index 53e4b042d..92fc87c5c 100644
--- a/packages/ui/dist/register/diff-view.js
+++ b/packages/ui/dist/register/diff-view.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1DiffView } from "../components/diff-view.js";
 //#region .cache/ui-build/entries/register/diff-view.js
 var element = registerElement("j3w1-diff-view", J3w1DiffView);
diff --git a/packages/ui/dist/register/disclosure.js b/packages/ui/dist/register/disclosure.js
index 5eff2865e..76f4c204b 100644
--- a/packages/ui/dist/register/disclosure.js
+++ b/packages/ui/dist/register/disclosure.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Disclosure } from "../components/disclosure.js";
 //#region .cache/ui-build/entries/register/disclosure.js
 var element = registerElement("j3w1-disclosure", J3w1Disclosure);
diff --git a/packages/ui/dist/register/drawer.js b/packages/ui/dist/register/drawer.js
index d2101eb9d..3ea076673 100644
--- a/packages/ui/dist/register/drawer.js
+++ b/packages/ui/dist/register/drawer.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Drawer } from "../components/drawer.js";
 //#region .cache/ui-build/entries/register/drawer.js
 var element = registerElement("j3w1-drawer", J3w1Drawer);
diff --git a/packages/ui/dist/register/editor-search.js b/packages/ui/dist/register/editor-search.js
index fa960075d..e0237ca4a 100644
--- a/packages/ui/dist/register/editor-search.js
+++ b/packages/ui/dist/register/editor-search.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1EditorSearch } from "../components/editor-search.js";
 //#region .cache/ui-build/entries/register/editor-search.js
 var element = registerElement("j3w1-editor-search", J3w1EditorSearch);
diff --git a/packages/ui/dist/register/empty-state.js b/packages/ui/dist/register/empty-state.js
index cc2e584c5..a4b9594da 100644
--- a/packages/ui/dist/register/empty-state.js
+++ b/packages/ui/dist/register/empty-state.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1EmptyState } from "../components/empty-state.js";
 //#region .cache/ui-build/entries/register/empty-state.js
 var element = registerElement("j3w1-empty-state", J3w1EmptyState);
diff --git a/packages/ui/dist/register/error-state.js b/packages/ui/dist/register/error-state.js
index 14d6dc937..5e09ece1b 100644
--- a/packages/ui/dist/register/error-state.js
+++ b/packages/ui/dist/register/error-state.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1ErrorState } from "../components/error-state.js";
 //#region .cache/ui-build/entries/register/error-state.js
 var element = registerElement("j3w1-error-state", J3w1ErrorState);
diff --git a/packages/ui/dist/register/field.js b/packages/ui/dist/register/field.js
index 245800b81..875540d71 100644
--- a/packages/ui/dist/register/field.js
+++ b/packages/ui/dist/register/field.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Field } from "../components/field.js";
 //#region .cache/ui-build/entries/register/field.js
 var element = registerElement("j3w1-field", J3w1Field);
diff --git a/packages/ui/dist/register/fieldset.js b/packages/ui/dist/register/fieldset.js
index 23d5cdd65..4ac632e86 100644
--- a/packages/ui/dist/register/fieldset.js
+++ b/packages/ui/dist/register/fieldset.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Fieldset } from "../components/fieldset.js";
 //#region .cache/ui-build/entries/register/fieldset.js
 var element = registerElement("j3w1-fieldset", J3w1Fieldset);
diff --git a/packages/ui/dist/register/file-browser.js b/packages/ui/dist/register/file-browser.js
index 546633566..6d8b76ed5 100644
--- a/packages/ui/dist/register/file-browser.js
+++ b/packages/ui/dist/register/file-browser.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./tree.js";
 import { J3w1FileBrowser } from "../components/file-browser.js";
 //#region .cache/ui-build/entries/register/file-browser.js
diff --git a/packages/ui/dist/register/file-input.js b/packages/ui/dist/register/file-input.js
index e840437d0..33be9dd6d 100644
--- a/packages/ui/dist/register/file-input.js
+++ b/packages/ui/dist/register/file-input.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1FileInput } from "../components/file-input.js";
 //#region .cache/ui-build/entries/register/file-input.js
 var element = registerElement("j3w1-file-input", J3w1FileInput);
diff --git a/packages/ui/dist/register/filterable-table.js b/packages/ui/dist/register/filterable-table.js
index 067befcb7..25aeaaee0 100644
--- a/packages/ui/dist/register/filterable-table.js
+++ b/packages/ui/dist/register/filterable-table.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./search-field.js";
 import { J3w1FilterableTable } from "../components/filterable-table.js";
 //#region .cache/ui-build/entries/register/filterable-table.js
diff --git a/packages/ui/dist/register/form-builder.js b/packages/ui/dist/register/form-builder.js
index a723c3c65..b4b8405d7 100644
--- a/packages/ui/dist/register/form-builder.js
+++ b/packages/ui/dist/register/form-builder.js
@@ -1,5 +1,5 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
-import { t as J3w1FormBuilder } from "../chunks/form-builder-Dkweb1xD.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
+import { t as J3w1FormBuilder } from "../chunks/form-builder-BKs59W9y.js";
 //#region .cache/ui-build/entries/register/form-builder.js
 var element = registerElement("j3w1-form-builder", J3w1FormBuilder);
 //#endregion
diff --git a/packages/ui/dist/register/i3-window-frame.js b/packages/ui/dist/register/i3-window-frame.js
index dd2360632..75e3eb7d6 100644
--- a/packages/ui/dist/register/i3-window-frame.js
+++ b/packages/ui/dist/register/i3-window-frame.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1I3WindowFrame } from "../components/i3-window-frame.js";
 //#region .cache/ui-build/entries/register/i3-window-frame.js
 var element = registerElement("j3w1-i3-window-frame", J3w1I3WindowFrame);
diff --git a/packages/ui/dist/register/icon-button.js b/packages/ui/dist/register/icon-button.js
index 4a1f9ef47..ffdd0ac88 100644
--- a/packages/ui/dist/register/icon-button.js
+++ b/packages/ui/dist/register/icon-button.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1IconButton } from "../components/icon-button.js";
 //#region .cache/ui-build/entries/register/icon-button.js
 var element = registerElement("j3w1-icon-button", J3w1IconButton);
diff --git a/packages/ui/dist/register/kbd.js b/packages/ui/dist/register/kbd.js
index eed420027..6ae12a7fc 100644
--- a/packages/ui/dist/register/kbd.js
+++ b/packages/ui/dist/register/kbd.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Kbd } from "../components/kbd.js";
 //#region .cache/ui-build/entries/register/kbd.js
 var element = registerElement("j3w1-kbd", J3w1Kbd);
diff --git a/packages/ui/dist/register/link.js b/packages/ui/dist/register/link.js
index 1ae8adb9e..669ae18ab 100644
--- a/packages/ui/dist/register/link.js
+++ b/packages/ui/dist/register/link.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Link } from "../components/link.js";
 //#region .cache/ui-build/entries/register/link.js
 var element = registerElement("j3w1-link", J3w1Link);
diff --git a/packages/ui/dist/register/list.js b/packages/ui/dist/register/list.js
index 46d02889b..2642fae97 100644
--- a/packages/ui/dist/register/list.js
+++ b/packages/ui/dist/register/list.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1List } from "../components/list.js";
 //#region .cache/ui-build/entries/register/list.js
 var element = registerElement("j3w1-list", J3w1List);
diff --git a/packages/ui/dist/register/loading-indicator.js b/packages/ui/dist/register/loading-indicator.js
index 20938b029..5e3a0b442 100644
--- a/packages/ui/dist/register/loading-indicator.js
+++ b/packages/ui/dist/register/loading-indicator.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1LoadingIndicator } from "../components/loading-indicator.js";
 //#region .cache/ui-build/entries/register/loading-indicator.js
 var element = registerElement("j3w1-loading-indicator", J3w1LoadingIndicator);
diff --git a/packages/ui/dist/register/menu.js b/packages/ui/dist/register/menu.js
index 734c05e98..655b77a5a 100644
--- a/packages/ui/dist/register/menu.js
+++ b/packages/ui/dist/register/menu.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Menu } from "../components/menu.js";
 //#region .cache/ui-build/entries/register/menu.js
 var element = registerElement("j3w1-menu", J3w1Menu);
diff --git a/packages/ui/dist/register/multiselect.js b/packages/ui/dist/register/multiselect.js
index 8a91da5b0..9183e5e5a 100644
--- a/packages/ui/dist/register/multiselect.js
+++ b/packages/ui/dist/register/multiselect.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Multiselect } from "../components/multiselect.js";
 //#region .cache/ui-build/entries/register/multiselect.js
 var element = registerElement("j3w1-multiselect", J3w1Multiselect);
diff --git a/packages/ui/dist/register/number-field.js b/packages/ui/dist/register/number-field.js
index c8e0e7c36..8553c5a33 100644
--- a/packages/ui/dist/register/number-field.js
+++ b/packages/ui/dist/register/number-field.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1NumberField } from "../components/number-field.js";
 //#region .cache/ui-build/entries/register/number-field.js
 var element = registerElement("j3w1-number-field", J3w1NumberField);
diff --git a/packages/ui/dist/register/pagination.js b/packages/ui/dist/register/pagination.js
index 2dfeec151..26680a048 100644
--- a/packages/ui/dist/register/pagination.js
+++ b/packages/ui/dist/register/pagination.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Pagination } from "../components/pagination.js";
 //#region .cache/ui-build/entries/register/pagination.js
 var element = registerElement("j3w1-pagination", J3w1Pagination);
diff --git a/packages/ui/dist/register/popover.js b/packages/ui/dist/register/popover.js
index 4a5798987..5f801317f 100644
--- a/packages/ui/dist/register/popover.js
+++ b/packages/ui/dist/register/popover.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Popover } from "../components/popover.js";
 //#region .cache/ui-build/entries/register/popover.js
 var element = registerElement("j3w1-popover", J3w1Popover);
diff --git a/packages/ui/dist/register/progress.js b/packages/ui/dist/register/progress.js
index 54bd975e5..29de54fb7 100644
--- a/packages/ui/dist/register/progress.js
+++ b/packages/ui/dist/register/progress.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Progress } from "../components/progress.js";
 //#region .cache/ui-build/entries/register/progress.js
 var element = registerElement("j3w1-progress", J3w1Progress);
diff --git a/packages/ui/dist/register/radio-group.js b/packages/ui/dist/register/radio-group.js
index e40f29b44..a41f213ff 100644
--- a/packages/ui/dist/register/radio-group.js
+++ b/packages/ui/dist/register/radio-group.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1RadioGroup } from "../components/radio-group.js";
 //#region .cache/ui-build/entries/register/radio-group.js
 var element = registerElement("j3w1-radio-group", J3w1RadioGroup);
diff --git a/packages/ui/dist/register/range.js b/packages/ui/dist/register/range.js
index 9711437a7..63b83eab7 100644
--- a/packages/ui/dist/register/range.js
+++ b/packages/ui/dist/register/range.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Range } from "../components/range.js";
 //#region .cache/ui-build/entries/register/range.js
 var element = registerElement("j3w1-range", J3w1Range);
diff --git a/packages/ui/dist/register/repeater.js b/packages/ui/dist/register/repeater.js
index b53fb3ce5..6565442ff 100644
--- a/packages/ui/dist/register/repeater.js
+++ b/packages/ui/dist/register/repeater.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Repeater } from "../components/repeater.js";
 //#region .cache/ui-build/entries/register/repeater.js
 var element = registerElement("j3w1-repeater", J3w1Repeater);
diff --git a/packages/ui/dist/register/search-field.js b/packages/ui/dist/register/search-field.js
index 63da3cd5b..169a29a47 100644
--- a/packages/ui/dist/register/search-field.js
+++ b/packages/ui/dist/register/search-field.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1SearchField } from "../components/search-field.js";
 //#region .cache/ui-build/entries/register/search-field.js
 var element = registerElement("j3w1-search-field", J3w1SearchField);
diff --git a/packages/ui/dist/register/segmented-control.js b/packages/ui/dist/register/segmented-control.js
index 20f7f4d8a..526fd7f71 100644
--- a/packages/ui/dist/register/segmented-control.js
+++ b/packages/ui/dist/register/segmented-control.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1SegmentedControl } from "../components/segmented-control.js";
 //#region .cache/ui-build/entries/register/segmented-control.js
 var element = registerElement("j3w1-segmented-control", J3w1SegmentedControl);
diff --git a/packages/ui/dist/register/select.js b/packages/ui/dist/register/select.js
index b97661d55..6fcd3d855 100644
--- a/packages/ui/dist/register/select.js
+++ b/packages/ui/dist/register/select.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Select } from "../components/select.js";
 //#region .cache/ui-build/entries/register/select.js
 var element = registerElement("j3w1-select", J3w1Select);
diff --git a/packages/ui/dist/register/settings-panel.js b/packages/ui/dist/register/settings-panel.js
index 20c582b67..0067d590e 100644
--- a/packages/ui/dist/register/settings-panel.js
+++ b/packages/ui/dist/register/settings-panel.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import "./switch.js";
 import { J3w1SettingsPanel } from "../components/settings-panel.js";
 //#region .cache/ui-build/entries/register/settings-panel.js
diff --git a/packages/ui/dist/register/sidebar-nav.js b/packages/ui/dist/register/sidebar-nav.js
index 8f0297afb..59f4cc44a 100644
--- a/packages/ui/dist/register/sidebar-nav.js
+++ b/packages/ui/dist/register/sidebar-nav.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1SidebarNav } from "../components/sidebar-nav.js";
 //#region .cache/ui-build/entries/register/sidebar-nav.js
 var element = registerElement("j3w1-sidebar-nav", J3w1SidebarNav);
diff --git a/packages/ui/dist/register/skeleton.js b/packages/ui/dist/register/skeleton.js
index 71f911e98..ed0ab489a 100644
--- a/packages/ui/dist/register/skeleton.js
+++ b/packages/ui/dist/register/skeleton.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Skeleton } from "../components/skeleton.js";
 //#region .cache/ui-build/entries/register/skeleton.js
 var element = registerElement("j3w1-skeleton", J3w1Skeleton);
diff --git a/packages/ui/dist/register/skip-link.js b/packages/ui/dist/register/skip-link.js
index 24e9f3d0c..7f93eeef8 100644
--- a/packages/ui/dist/register/skip-link.js
+++ b/packages/ui/dist/register/skip-link.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1SkipLink } from "../components/skip-link.js";
 //#region .cache/ui-build/entries/register/skip-link.js
 var element = registerElement("j3w1-skip-link", J3w1SkipLink);
diff --git a/packages/ui/dist/register/switch.js b/packages/ui/dist/register/switch.js
index 05a2f592f..5e227ec0d 100644
--- a/packages/ui/dist/register/switch.js
+++ b/packages/ui/dist/register/switch.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Switch } from "../components/switch.js";
 //#region .cache/ui-build/entries/register/switch.js
 var element = registerElement("j3w1-switch", J3w1Switch);
diff --git a/packages/ui/dist/register/table.js b/packages/ui/dist/register/table.js
index 10a75676a..b8eda4f9d 100644
--- a/packages/ui/dist/register/table.js
+++ b/packages/ui/dist/register/table.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Table } from "../components/table.js";
 //#region .cache/ui-build/entries/register/table.js
 var element = registerElement("j3w1-table", J3w1Table);
diff --git a/packages/ui/dist/register/tabs.js b/packages/ui/dist/register/tabs.js
index d2f3bb53e..218ebc6da 100644
--- a/packages/ui/dist/register/tabs.js
+++ b/packages/ui/dist/register/tabs.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Tabs } from "../components/tabs.js";
 //#region .cache/ui-build/entries/register/tabs.js
 var element = registerElement("j3w1-tabs", J3w1Tabs);
diff --git a/packages/ui/dist/register/terminal.js b/packages/ui/dist/register/terminal.js
index 252927e52..0f41964d0 100644
--- a/packages/ui/dist/register/terminal.js
+++ b/packages/ui/dist/register/terminal.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Terminal } from "../components/terminal.js";
 //#region .cache/ui-build/entries/register/terminal.js
 var element = registerElement("j3w1-terminal", J3w1Terminal);
diff --git a/packages/ui/dist/register/text-field.js b/packages/ui/dist/register/text-field.js
index e3bf71d74..01007e107 100644
--- a/packages/ui/dist/register/text-field.js
+++ b/packages/ui/dist/register/text-field.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1TextField } from "../components/text-field.js";
 //#region .cache/ui-build/entries/register/text-field.js
 var element = registerElement("j3w1-text-field", J3w1TextField);
diff --git a/packages/ui/dist/register/textarea.js b/packages/ui/dist/register/textarea.js
index ea76ce485..2e9a5db69 100644
--- a/packages/ui/dist/register/textarea.js
+++ b/packages/ui/dist/register/textarea.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Textarea } from "../components/textarea.js";
 //#region .cache/ui-build/entries/register/textarea.js
 var element = registerElement("j3w1-textarea", J3w1Textarea);
diff --git a/packages/ui/dist/register/time-picker.js b/packages/ui/dist/register/time-picker.js
index 244c895c6..f69ab0f23 100644
--- a/packages/ui/dist/register/time-picker.js
+++ b/packages/ui/dist/register/time-picker.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1TimePicker } from "../components/time-picker.js";
 //#region .cache/ui-build/entries/register/time-picker.js
 var element = registerElement("j3w1-time-picker", J3w1TimePicker);
diff --git a/packages/ui/dist/register/timeline.js b/packages/ui/dist/register/timeline.js
index 82d652b24..6b8f4b354 100644
--- a/packages/ui/dist/register/timeline.js
+++ b/packages/ui/dist/register/timeline.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Timeline } from "../components/timeline.js";
 //#region .cache/ui-build/entries/register/timeline.js
 var element = registerElement("j3w1-timeline", J3w1Timeline);
diff --git a/packages/ui/dist/register/toast.js b/packages/ui/dist/register/toast.js
index 39672f0fe..55941b8ec 100644
--- a/packages/ui/dist/register/toast.js
+++ b/packages/ui/dist/register/toast.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Toast } from "../components/toast.js";
 //#region .cache/ui-build/entries/register/toast.js
 var element = registerElement("j3w1-toast", J3w1Toast);
diff --git a/packages/ui/dist/register/toolbar.js b/packages/ui/dist/register/toolbar.js
index e39eab7da..0de0d853e 100644
--- a/packages/ui/dist/register/toolbar.js
+++ b/packages/ui/dist/register/toolbar.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Toolbar } from "../components/toolbar.js";
 import "./menu.js";
 //#region .cache/ui-build/entries/register/toolbar.js
diff --git a/packages/ui/dist/register/tooltip.js b/packages/ui/dist/register/tooltip.js
index b8308dd65..262fbe4be 100644
--- a/packages/ui/dist/register/tooltip.js
+++ b/packages/ui/dist/register/tooltip.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Tooltip } from "../components/tooltip.js";
 //#region .cache/ui-build/entries/register/tooltip.js
 var element = registerElement("j3w1-tooltip", J3w1Tooltip);
diff --git a/packages/ui/dist/register/tree.js b/packages/ui/dist/register/tree.js
index c6b7d3d39..0ecee9bca 100644
--- a/packages/ui/dist/register/tree.js
+++ b/packages/ui/dist/register/tree.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Tree } from "../components/tree.js";
 //#region .cache/ui-build/entries/register/tree.js
 var element = registerElement("j3w1-tree", J3w1Tree);
diff --git a/packages/ui/dist/register/wizard.js b/packages/ui/dist/register/wizard.js
index e78c20e3e..df8a879a1 100644
--- a/packages/ui/dist/register/wizard.js
+++ b/packages/ui/dist/register/wizard.js
@@ -1,4 +1,4 @@
-import { n as registerElement } from "../chunks/element-C1XeXVYC.js";
+import { n as registerElement } from "../chunks/element-Dovcr9Ky.js";
 import { J3w1Wizard } from "../components/wizard.js";
 //#region .cache/ui-build/entries/register/wizard.js
 var element = registerElement("j3w1-wizard", J3w1Wizard);
diff --git a/packages/ui/dist/rules/accessibility.md b/packages/ui/dist/rules/accessibility.md
index c4812d0c6..749b7b653 100644
--- a/packages/ui/dist/rules/accessibility.md
+++ b/packages/ui/dist/rules/accessibility.md
@@ -7,13 +7,12 @@ summary: Contrast targets, focus and keyboard contracts, reduced motion, forced
 
 ## What is claimed
 
-WCAG 2.2 criteria are used as measurable **design targets** for the roles this
-theme defines. A green contrast report and a clean automated scan of the site
-show that the specified colours and the reference markup meet those targets.
-They are not a conformance claim for any application that adopts the theme.
-Keyboard operation, focus management, labels, reflow and manual review stay
-the consumer's job. The theme's own limits are listed at the end of this
-document.
+WCAG 2.2 criteria are measurable **design targets** for the theme's roles. A
+green contrast report and a clean automated scan show that the specified
+colours and the reference markup meet them; they are not a conformance claim
+for any adopting application. Keyboard operation, focus management, labels,
+reflow and manual review stay the consumer's job. The theme's own limits are
+under Limitations.
 
 ## Contrast
 
@@ -22,51 +21,43 @@ document.
 - Large text (18.66px bold or 24px regular and above): at least 3:1.
 - Control boundaries, focus rings, meaningful icons and chart marks: at least
   3:1 (WCAG 1.4.11).
-- Disabled text is exempt under WCAG 1.4.3, but house policy still needs 3:1
-  (`text.disabled` `#8a5559`, 3.52:1 on the true-black canvas). It sits below
-  the ordinary-text floor by design.
+- Disabled text is exempt under WCAG 1.4.3; house policy still needs 3:1
+  (`text.disabled`), below the ordinary-text floor by design.
 - Never round a value into a pass. The report keeps the unrounded ratio and
   shows two decimals: `4.4996` reads 4.50 and fails.
 - Heritage values that fail (`#a3676b` as text, `#7d1310` anywhere as text)
-  are flagged `$deprecated` in the `heritage-ansi` profile. They are never
-  shown as ordinary passes.
+  are flagged `$deprecated` in the `heritage-ansi` profile, never shown as
+  ordinary passes.
 
-`exports/contrast.md` lists every declared pair: the global pairs in
-`spec/contrast.json` and every `stateTokens` and `contrast[]` entry of every
-component. Waived pairs carry their reason. A waiver is only valid for
-decorative graphics that are never the only boundary of a control.
+`exports/contrast.md` lists every declared pair (the global pairs in
+`spec/contrast.json` and every component's `stateTokens` and `contrast[]`
+entries) with its computed ratio. Waived pairs carry their reason; a waiver is
+valid only for decorative graphics that are never the only boundary of a
+control.
 
 ## Text hierarchy
 
-D-033 makes ordinary interface and reading text rose (`color.text.default` and
-`color.text.prose`). Bold changes weight and inherits the current semantic
-foreground, including inside headings, links, muted and selected text. Content
-titles and H1-H6 use `color.text.heading`; near-white is not a readability or
-boldness requirement. Selection and contrast-critical on-fill roles stay
-explicit and are checked against their actual backgrounds. Heading level is
-also conveyed through structure, size and weight, never colour alone.
+The colour roles are in `spec/foundations.md`, Typography semantics (D-033);
+near-white is not a readability or boldness requirement. Selection and
+contrast-critical on-fill roles are checked against their actual
+backgrounds. Heading level is conveyed through structure, size and weight,
+never colour alone.
 
 ## Focus
 
 Focus is never lost and never invisible. The ring is defined once, in
-`spec/foundations.md`, Interaction states, rule 2 (D-006, D-015). In short:
-controls and rows show `focus.ring` (1px dashed `#e53935`, offset −2px);
-focusable containers show `focus.ring-container` (2px solid `#ffa2a7`, offset
-−3px); primary and checked controls use `focus.ring-container` where declared;
-destructive fills use their on-fill text role. Colour mapping does not change
-ring geometry.
-
-- `:focus` without `:focus-visible` draws nothing. Pointer clicks stay quiet,
-  and keyboard focus stays visible.
-- A component that removes a host's default indicator must draw this one.
-- The site's state matrices render every declared combination, including
-  `selected+focus-visible` and `invalid+focus-visible`, because that is where
-  rings disappear in practice.
+`spec/foundations.md`, Interaction states, rule 2 (D-006, D-015).
+
+- `:focus` without `:focus-visible` draws nothing: pointer clicks stay quiet,
+  keyboard focus stays visible.
+- The state matrices render every declared combination, including
+  `selected+focus-visible` and `invalid+focus-visible`, where rings disappear
+  in practice.
 
 ## Keyboard
 
-Native controls keep native keyboard behaviour. Custom widgets follow the WAI
-ARIA Authoring Practices pattern cited in their frontmatter (`aria.apg`):
+Native controls keep native keyboard behaviour. Custom widgets follow the
+WAI-ARIA Authoring Practices pattern in their `aria.apg`:
 
 - roving tabindex in toolbars, tabs, trees and listboxes;
 - `aria-activedescendant` in comboboxes;
@@ -79,8 +70,8 @@ keyboard, and the no-JS build keeps every normative section readable.
 
 ## Motion
 
-Durations are at most 150ms and apply to opacity, transform and background
-only. Under `prefers-reduced-motion: reduce` every duration is 0.01ms:
+Motion follows `spec/foundations.md`, Interaction states, rule 7. Under
+`prefers-reduced-motion: reduce`:
 
 - toasts, dialogs and drawers appear in place;
 - indeterminate progress shows static stripes;
@@ -88,67 +79,70 @@ only. Under `prefers-reduced-motion: reduce` every duration is 0.01ms:
 - skeletons do not shimmer;
 - tab indicators do not slide.
 
-No behaviour waits on `transitionend`.
-
 ## Forced colours and high contrast
 
-Under `forced-colors: active`, rings use `Highlight` and selections use
-`Highlight` / `HighlightText`. Borders survive, because they are real borders,
-not box-shadows. Pattern fills keep charts and diffs readable.
+Under `forced-colors: active`, rings use `Highlight` and selections
+`Highlight` / `HighlightText`. Borders survive because they are real borders,
+not box-shadows; pattern fills keep charts and diffs readable.
 
 ## Reflow, zoom and text
 
 Components reflow at 320 CSS pixels without horizontal page scrolling, at 200%
 browser zoom and at 200% text-only zoom. Rings and borders stay 1px / 2px CSS.
 Targets are at least 24×24 CSS pixels, with 4px spacing in `compact` density.
-Long labels wrap, or truncate with a visible affordance. The site's stress
-fixtures (English, Spanish, Chinese, Arabic with `dir="rtl"`) test this.
+Long labels wrap, or truncate with a visible affordance; the stress fixtures
+(English, Spanish, Chinese, Arabic with `dir="rtl"`) exercise this.
 
 ## Colour is never the only channel
 
-Every status has a glyph. Every state has a border, pattern or ARIA change.
-Diffs keep their `+ − ~` markers. Charts carry pattern fills and a table
-fallback. The `heritage-ansi` terminal palette has less hue difference by
-design; the specification records this as a limit instead of fixing it
-silently.
+Every status has a glyph; every state a border, pattern or ARIA change. Diffs
+keep their `+ − ~` markers. Charts carry pattern fills and a table fallback.
+The `heritage-ansi` terminal palette has less hue difference by design, a
+recorded limit.
 
 ## Limitations (recorded, not hidden)
 
 - The theme specifies colours, states and reference markup. It cannot make a
   host application's own focus management, labels or reading order correct.
-- The site's automated scan uses axe-core with the WCAG 2.x A and AA rule
-  sets. It does not test every success criterion. Manual checks (keyboard
-  walks, screen-reader reading, zoom) need their own execution evidence. A
-  missing protocol stays not run; the scan does not imply it.
-- In the `default` profile, terminal slot 8 is the dim tier at 3.01:1 on the
-  terminal background (D-029; slot 0 is the background). Programs that draw
-  text in slot 8 inherit that. The `heritage-ansi` profile keeps the historical
-  slots, where 1, 4, 6, 8, 9, 10, 12, 13, 14 and 15 fail 4.5:1. The `extended`
-  overlay proposes a semantic set.
-- Syntax roles inside an editor selection: type and comment drop below 4.5:1 on
-  `code.selection-bg` (4.24 and 4.13:1). Keyword, tag, property and heading
-  stay above it after D-029. A selection is short-lived; the code-editor
-  specification records this limit.
-- Text selection with `interaction.text-selection.tint` (D-036) keeps text at
-  4.5:1 or above only where the host draws the tint under the text.
+- The automated scan uses axe-core with the WCAG 2.x A and AA rule sets and
+  does not test every success criterion. Manual checks (keyboard walks,
+  screen-reader reading, zoom) need their own execution evidence; a missing
+  protocol stays not run.
+- In `default`, terminal slot 8 is the dim tier, under 4.5:1 on the terminal
+  background (D-029; slot 0 is the background); programs drawing text in it
+  inherit that. In `heritage-ansi`, slots 1, 4, 6, 8, 9, 10, 12, 13, 14 and 15
+  fail 4.5:1. The `extended` overlay proposes a semantic set.
+- Inside an editor selection, type and comment syntax drop below 4.5:1 on
+  `code.selection-bg`; keyword, tag, property and heading stay above it after
+  D-029. A selection is short-lived; the code-editor specification records
+  this limit.
+- `interaction.text-selection.tint` (D-036) keeps text at 4.5:1 only where the
+  host draws the tint under the text.
   - **Over the text:** where a host paints it over the text, as in Telegram's
-    rich editor and rich translation preview, selected text measures 2.96 to
-    3.43:1.
-  - **Links and code:** inside a selection they drop below 4.5:1 (links 3.45
-    to 4.30; code 3.13 to 4.24, and 4.40 for numbers in outgoing blocks).
+    rich editor and rich translation preview, selected text falls below 4.5:1.
+  - **Links and code:** inside a selection they drop below 4.5:1. Links are
+    not a declared pair: a failing pair needs a waiver, and waivers cover
+    decorative graphics only.
+  - **Strength:** no tint strength meets both the over-the-text case and the
+    floor on `surface.accent`.
+  - **Outgoing code blocks:** inside one, the selection stands only ΔE 18.3
+    (CIE76) from the block.
+
+  The global contrast pairs composite the tint over the canvas only; the
+  Telegram port's tests enforce the raised and accent cases. A selection is
+  short-lived, as in an editor.
 
 ## Verification evidence and freshness
 
 **Source coverage.** The coverage ledger records source facts: specified,
 demonstrated and test implemented. `exports/coverage.json` schemaVersion 1
-adds `testImplemented` and keeps `tested` as a compatibility alias with its
-original meaning (the test file exists). Component JSON coverage and family
-totals use the same definitions. No source coverage Boolean proves an
-execution or blanket WCAG conformance.
+adds `testImplemented` and keeps `tested` as a compatibility alias meaning the
+test file exists; component JSON and family totals use the same definitions.
+No coverage Boolean proves an execution or WCAG conformance.
 
-**Execution evidence.** The linked static verification report gives the real
-per-test outcomes and per-component summaries. Evidence schemaVersion 1
-records, for each result:
+**Execution evidence.** The static verification report gives per-test
+outcomes and per-component summaries. Evidence schemaVersion 1 records, for
+each result:
 
 - the method (automated or manual), category and component;
 - the states and variants it explicitly covers (empty lists mean
@@ -156,20 +150,20 @@ records, for each result:
 - browser and version, OS, viewport, profile, density and JavaScript setting;
 - a run or protocol reference.
 
-The recorded profile and density describe the starting configuration; tests
-that switch them say so in their scope. Results from one browser engine never
-stand for another. Skipped, failed, not run and not applicable are separate
-outcomes, and every non-pass has a reason. Manual screen-reader and keyboard
-claims need protocol records. The current automated suite targets Chromium;
-other engines stay not run.
-
-**Freshness.** A claim is current only while two things match: the digest of
-the tested artifact, and a broad source fingerprint. The fingerprint covers
-tracked contract sources, schemas, generators, site code, tests, agent
-guidance, CI configuration and the package lockfile. Any change to these
-makes the claim stale, so an unrelated change can make more evidence stale
-than strictly needed. A stale record keeps its real outcome and reference, but
-it no longer shows a current pass.
+The recorded profile and density are the page's declared `data-profile` and
+`data-density` when the test ends; tests that switch them say so in their
+scope. One browser engine never stands for
+another. Skipped, failed, not run and not applicable are separate outcomes,
+and every non-pass has a reason. Manual screen-reader and keyboard claims need
+protocol records. The automated suite targets Chromium; other engines stay not
+run.
+
+**Freshness.** A claim is current only while the tested artifact's digest and
+a broad source fingerprint both match. The fingerprint covers tracked contract
+sources, schemas, generators, site code, tests, agent guidance, CI
+configuration and the package lockfile, so an unrelated change can stale more
+evidence than strictly needed. A stale record keeps its real outcome and
+reference but no longer shows a current pass.
 
 **How the report is built.**
 
@@ -182,8 +176,7 @@ it no longer shows a current pass.
    never certifies itself.
 
 Run timestamps and revisions live only in this post-test evidence, outside the
-committed deterministic exports and their digests, so no hash depends on
-itself.
+committed exports and their digests, so no hash depends on itself.
 
 **Run it locally.**
 
@@ -192,12 +185,12 @@ itself.
 3. Run `npm run verification:report`, then `npm run verification:check`, then
    `npm run test:verification`.
 
-A local run names its local execution and digests. It is never presented as
+A local run names its local execution and digests and is never presented as
 hosted CI evidence.
 
 **Record a manual protocol.** Pass a schema-valid evidence document to
-`node scripts/verification-report.mjs <repo-relative-evidence.json>`. It must
-carry the real tested digests, the browser and environment, and a `protocol:`
-reference with the protocol identifier and the recorded observations. Keep the
-protocol with the evidence. Do not copy private artifacts into this public
+`node scripts/verification-report.mjs <repo-relative-evidence.json>`, carrying
+the real tested digests, the browser and environment, and a `protocol:`
+reference with the protocol identifier and recorded observations. Keep the
+protocol with the evidence; never copy private artifacts into this public
 repository.
diff --git a/packages/ui/dist/rules/consume.md b/packages/ui/dist/rules/consume.md
index 8126df171..2d317fdf9 100644
--- a/packages/ui/dist/rules/consume.md
+++ b/packages/ui/dist/rules/consume.md
@@ -1,12 +1,10 @@
 # Consuming j3w1/theme (for agents and integrators)
 
-This document is for people and agents who apply the theme to another project.
-The contributor workflow for this repository is in `AGENTS.md`.
-
-You are consuming **design data and optional official implementations**. The
-consumer project's own instructions (its `AGENTS.md`, `CLAUDE.md`, security,
-architecture and operational rules) always win over anything in this
-repository.
+For people and agents who apply the theme to another project; contributors
+to this repository read `AGENTS.md`. You are consuming **design data and
+optional official implementations**. The consumer project's own instructions
+(its `AGENTS.md`, `CLAUDE.md`, security, architecture and operational rules)
+always win over anything in this repository.
 
 ## Official web implementations
 
@@ -22,20 +20,19 @@ bundles are also supported.
    ```
 
 Choose `copy` to own the full source, or `mapping` for a host the package does
-not fit. Native hosts need mapping mode. Kits include the canonical contracts,
-their dependency closure and the shared accessibility/identity rules. They do
+not fit; native hosts need mapping mode. Kits include the canonical contracts,
+their dependency closure and the shared accessibility/identity rules; they do
 not declare your app verified. `docs/ui-consumption.md` has the exact
-installation, framework binding and runtime checks. npm publication is an
-owner release action; until then, use the release tarball and its published
-integrity metadata. For canonical mappings, keep the lock and deviation
-workflow below.
+installation, framework binding and runtime checks. Until npm publication (an
+owner release action), use the release tarball and its published integrity
+metadata. Canonical mappings keep the lock and deviation workflow below.
 
 ## 0. Pin a revision first
 
-`<rev>` is a release tag (`v0.1.0`) or a full 40-character commit SHA. Never
-`main`, never a branch name, never "latest". Resolve a tag to its commit before
-you read anything, and use the same `<rev>` in every URL below. Mixing
-revisions breaks the contract.
+`<rev>` is a release tag (`v0.1.0`) or a full 40-character commit SHA, never
+`main`, a branch name or "latest". Resolve a tag to its commit before you read
+anything, and use the same `<rev>` in every URL below; mixing revisions breaks
+the contract.
 
 ```
 GET https://api.github.com/repos/j3w1/theme/git/ref/tags/<tag>   → object.sha
@@ -65,10 +62,10 @@ Use the pinned approved default profile. Pending roles in that profile use-and-r
 <!-- eligibility:end -->
 
 The policy block above is generated. Each resolved token lists its pending
-decision IDs in `eligibility.decisionIds`, including alias dependencies.
-Report those IDs together with any real deviations. Using an authorized
-pending value is a disclosure, not an invented substitution. A blocked action
-implies no replacement. A profile preview does not authorize delivered work.
+decision IDs, alias dependencies included, in `eligibility.decisionIds`; report
+them with any real deviations. Using an authorized pending value is a
+disclosure, not an invented substitution. A blocked action implies no
+replacement, and a profile preview does not authorize delivered work.
 
 ## 4. Read only what you need, in this order
 
@@ -81,18 +78,17 @@ https://raw.githubusercontent.com/j3w1/theme/<rev>/exports/digests.json
 
 Optional: `exports/theme.full.md` for the whole specification;
 `exports/tokens.css` for a ready-made custom-property sheet. The website
-`https://j3w1.github.io/theme/` is for visual confirmation only. It is not a
-source of values, and screenshots never override tokens.
+`https://j3w1.github.io/theme/` is for visual confirmation only, never a source
+of values; screenshots never override tokens.
 
 ## 5. Inspect the target before changing anything
 
 1. Name the integration kind: `css-vars`, `vuetify`, `tailwind`,
    `jetbrains-icls`, `gtk-css`, `terminal-16` or `other`.
-2. List which specified surfaces the target can express natively, and which
-   it cannot (for example, a framework with no read-only field style, or a
-   sixteen-colour terminal that cannot show hover).
-3. Anything the target cannot express becomes a documented deviation in step
-   7, never an invented approximation.
+2. List which specified surfaces the target can and cannot express natively
+   (for example, no read-only field style, or a sixteen-colour terminal that
+   cannot show hover). Each one it cannot express becomes a documented
+   deviation in step 7, never an invented approximation.
 
 ## 6. Implement the mapping
 
@@ -104,8 +100,8 @@ source of values, and screenshots never override tokens.
 - Keep host accessibility at least as strong as before: never remove a focus
   indicator, never lower a contrast ratio the host already met, never set
   `outline: none` without drawing the specified ring.
-- Radii are 0, borders 1px, the family is monospace. A host that forbids one
-  of these gets a deviation, not a redesign.
+- Radii are 0, borders 1px, the family is monospace; a host that forbids one
+  gets a deviation, not a redesign.
 - Selection is a fill; focus is a ring. On fills, the ring takes the colour
   the component JSON declares for that state (D-015). Status roles keep their
   glyphs.
@@ -118,10 +114,10 @@ source of values, and screenshots never override tokens.
 
 ## What you may not do
 
-- Invent, blend, lighten, darken or "harmonise" colours. Use resolved values
+- Invent, blend, lighten, darken or "harmonise" colours; use resolved values
   only.
 - Use a blocked value, deliver a proposed profile, or leave out the required
-  pending-decision disclosures. Historical-only values are not approved UI
+  pending-decision disclosures; historical-only values are not approved UI
   roles.
 - Take values from the site's HTML, from screenshots or from memory.
 - Touch unrelated components, layouts, copy, dependencies or build
@@ -158,7 +154,7 @@ lock: <path to theme.lock.json>
 
 ## theme.lock.json
 
-A small file, committed next to the integration code and validated by
+Committed next to the integration code and validated by
 `schemas/json/theme.lock.schema.json`. It is not a package manager: no graph,
 no install, no auto-update. To update the theme, change `ref`, `revision`,
 `version` and `exports`, rerun the consumer's own checks, and write the
diff --git a/packages/ui/dist/rules/identity.md b/packages/ui/dist/rules/identity.md
index bef387789..46bc059fa 100644
--- a/packages/ui/dist/rules/identity.md
+++ b/packages/ui/dist/rules/identity.md
@@ -6,7 +6,7 @@ summary: What the j3w1 theme is, where it came from, and the five rules that kee
 ---
 
 <!-- @compact:start -->
-True-black canvas (`#000000`), near-black panels (`#100c0c`) and chrome (`#090707`), with dark-red raised layers, rose interface text (`#e99499`), rose reading text (`#e99499`), near-white content headings (`#f4eeee`), dark-red selections (`#531310`), a bright red focus ring (`#e53935`), 1px square borders, zero radii, one monospace family for chrome, reading and code. Red marks *interaction*: focus, selection, active borders, primary actions. It is not a decoration and it is not applied to everything. Darkness is the canvas; readable content is the priority.
+True-black canvas (`#000000`), near-black panels (`#100c0c`) and chrome (`#090707`), with dark-red raised layers, rose interface and reading text (`#e99499`), near-white content headings (`#f4eeee`), dark-red selections (`#531310`), a bright red focus ring (`#e53935`), 1px square borders, zero radii, one monospace family for chrome, reading and code. Red marks *interaction*: focus, selection, active borders, primary actions; it is not decoration. Darkness is the canvas; readable content is the priority.
 
 Five rules keep an implementation recognisable:
 
@@ -19,51 +19,60 @@ Five rules keep an implementation recognisable:
 
 ## Where it came from
 
-The palette began on a Manjaro i3 workstation, preserved in `j3w1/1w3j`. A
-pywal ramp was pulled from a red wallpaper, then frozen and tuned slot by slot
-in `config/Xresources` while watching what `ls`, vim and the agnoster prompt
-really showed. The i3 configuration gave the rest of the look: 1px pixel
-borders, 14/−2 gaps, tabbed layouts, a hidden top bar with Chinese status
-labels, dunst toasts framed in `#ae1914`, and dmenu selections in `#630f0d`.
-
-The modern reference is `j3w1/j3w1.github.io`, a web version of that
-workstation. Its stylesheet named the roles this specification uses
-(`--terminal`, `--surface-raised`, `--selection`, `--focus`, `--prose`,
-`--muted` …) and wrote the first contrast contract. Both sources are pinned by
-revision in `references/sources.json`. This repository is now the authority:
-later changes in either source are proposals, not automatic updates.
+The palette began on a Manjaro i3 workstation (`j3w1/1w3j`): a pywal ramp
+from a red wallpaper, frozen and tuned slot by slot in `config/Xresources`.
+The i3 configuration gave the rest: 1px borders, 14/−2 gaps, tabbed layouts,
+dunst toasts framed in `#ae1914`, dmenu selections in `#630f0d`. Its web
+version, `j3w1/j3w1.github.io`, named the roles this specification uses and
+wrote the first contrast contract. Both are pinned in
+`references/sources.json`. This repository is the authority: later changes in
+either source are proposals, not automatic updates.
 
 ## What "modern" means here
 
-Modern means clear structure, responsive layout, strong keyboard and
-screen-reader support, exact states, and controls that are pleasant to use. It
-does not mean pill buttons, glass panels, gradients, neon glows, a
-Material-style redesign, or red on every surface. The site shows sixteen such
-misreadings as labelled non-examples.
+Clear structure, responsive layout, strong keyboard and screen-reader
+support, exact states, pleasant controls. Not pill buttons, glass panels,
+gradients, neon glows, a Material-style redesign, or red on every surface; the
+site draws such misreadings as labelled non-examples.
+
+One exception (D-014): the generated preview beside each visible CSS hex
+literal on the spec page. It adds no palette, role or geometry rule, and text,
+copying, keyboard order and no-JS access stay intact.
 
-One narrow exception: the colour previews that the spec page draws next to
-each hex value may be round, sit on a checkerboard and animate (D-014).
-Component and consumer rules do not change.
+- A 16px circle with its theme-derived 1px boundary; alpha shows over a
+  checkerboard of theme tokens.
+- On CSS `:hover` it becomes a 17.4px square (fast duration, ease-out on
+  transform and border-radius; none under reduced motion).
+- Mouse and pen pointers also open a non-interactive popup with the exact
+  value; touch and unknown pointers do not. CSS `:hover` alone drives both,
+  never the `hover` or `any-hover` media features, which can report no hover
+  despite a mouse.
+- The popup follows the pointer inside the circle at an 8px gap, flips when
+  needed and keeps an 8px viewport gutter. Tracking has no animation.
+- It closes when the pointer leaves the circle, on an outside press, Escape,
+  loss of window focus, and on page or nested scrolling unless the circle is
+  still under the last pointer position. It never captures input, holds
+  itself open or adds a keyboard stop; token tables and the token inspector
+  keep the persistent information.
 
 ## Profiles
 
-- `default` — the approved everyday composition. Monochrome red/rose for chrome,
-  text, borders, interaction and actions. Three bounded hues (amber, green,
-  blue) for status, diagnostics and diffs (D-001). Syntax is monochrome; the
-  three hues are available to opt-in syntax themes as `code.hued.*` (D-030).
+- `default` — the approved everyday composition: monochrome red/rose for
+  chrome, text, borders, interaction and actions; three bounded hues (amber,
+  green, blue) for status, diagnostics and diffs (D-001). Syntax is monochrome;
+  opt-in syntax themes may use the hues as `code.hued.*` (D-030).
 - `heritage-ansi` — the sixteen Xresources slots and their historical
-  assignments, exact, including the ones that fail the contrast floor. Use it
-  for terminals, archives and fidelity, never for new interface text.
-- `extended` — a proposed overlay that colours syntax, a full sixteen-slot
-  semantic terminal palette and chart series with the same three hues. It is
-  not approved, and the site labels it.
+  assignments, exact, including those that fail the contrast floor. For
+  terminals, archives and fidelity, never new interface text.
+- `extended` — a proposed, unapproved overlay that colours syntax, a
+  sixteen-slot semantic terminal palette and chart series with the same three
+  hues.
 
 ## Naming
 
-Roles are `color.<group>.<role>`. The group list is closed: `surface`, `text`,
+Roles are `color.<group>.<role>`, from a closed group list: `surface`, `text`,
 `border`, `interaction`, `action`, `status`, `code`, `diagnostic`, `diff`,
-`terminal`, `chart`, `icon`. Primitives are `color.primitive.<family>.<step>`;
-the step rises with luminance. A CSS custom property is the path with dots
-replaced by dashes: `color.interaction.focus.ring` →
-`--color-interaction-focus-ring`. Roles alias primitives; primitives carry
-provenance.
+`terminal`, `chart`, `icon`. Primitives are `color.primitive.<family>.<step>`,
+the step rising with luminance; roles alias primitives, and primitives carry
+provenance. A CSS custom property is the path with dashes for dots:
+`color.interaction.focus.ring` → `--color-interaction-focus-ring`.
diff --git a/packages/ui/dist/styles/admin-form.css b/packages/ui/dist/styles/admin-form.css
index d4ee58a96..3109fc6d2 100644
--- a/packages/ui/dist/styles/admin-form.css
+++ b/packages/ui/dist/styles/admin-form.css
@@ -8,7 +8,7 @@ j3w1-admin-form {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-admin-form, j3w1-admin-form *, j3w1-admin-form *::before, j3w1-admin-form *::after { box-sizing: border-box; }
-j3w1-admin-form button, j3w1-admin-form input, j3w1-admin-form select, j3w1-admin-form textarea { font: inherit; }
+j3w1-admin-form :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-admin-form ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -121,21 +121,17 @@ j3w1-admin-form .admin-form[aria-busy="true"] .admin-form-continue {
   }
 }
 
-j3w1-admin-form .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+j3w1-admin-form .button,
+j3w1-admin-form .dialog-button,
+j3w1-admin-form .empty-state-action,
+j3w1-admin-form .file-input-button,
+j3w1-admin-form button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -148,8 +144,23 @@ j3w1-admin-form .button {
   cursor: pointer;
   outline: 0;
 }
+j3w1-admin-form .button,
+j3w1-admin-form .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-j3w1-admin-form .button-secondary {
+j3w1-admin-form .button-secondary,
+j3w1-admin-form .dialog-button,
+j3w1-admin-form .empty-state-action,
+j3w1-admin-form .file-input-button,
+j3w1-admin-form button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -181,7 +192,8 @@ j3w1-admin-form .button-destructive {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-j3w1-admin-form .button-destructive-filled {
+j3w1-admin-form .button-destructive-filled,
+j3w1-admin-form .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -191,6 +203,49 @@ j3w1-admin-form .button-destructive-filled {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  j3w1-admin-form :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-admin-form .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-admin-form :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-admin-form :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-admin-form :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-admin-form .dialog-button,
+  j3w1-admin-form .empty-state-action,
+  j3w1-admin-form .file-input-button,
+  j3w1-admin-form button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-admin-form :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 j3w1-admin-form .button-icon {
   flex: none;
@@ -208,25 +263,6 @@ j3w1-admin-form .button-loading {
 j3w1-admin-form .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-admin-form .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-admin-form .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-admin-form .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-admin-form .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-admin-form .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -238,16 +274,6 @@ j3w1-admin-form .button[aria-busy="true"] .button-icon {
 j3w1-admin-form .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-admin-form .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-admin-form .button {
@@ -256,9 +282,66 @@ j3w1-admin-form .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-admin-form .button:focus-visible {
-    outline-color: Highlight;
-  }
+}
+
+j3w1-admin-form .combobox-label,
+j3w1-admin-form .dialog-field-label,
+j3w1-admin-form .field-label,
+j3w1-admin-form .fieldset-label,
+j3w1-admin-form .file-input-label,
+j3w1-admin-form .number-field-label,
+j3w1-admin-form .search-field-label,
+j3w1-admin-form .select-label,
+j3w1-admin-form .text-field-label,
+j3w1-admin-form .textarea-label,
+j3w1-admin-form .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-admin-form .combobox-help,
+j3w1-admin-form .date-picker-help,
+j3w1-admin-form .dialog-field-help,
+j3w1-admin-form .fieldset-help,
+j3w1-admin-form .file-input-help,
+j3w1-admin-form .number-field-help,
+j3w1-admin-form .search-field-help,
+j3w1-admin-form .select-help,
+j3w1-admin-form .text-field-help,
+j3w1-admin-form .textarea-help,
+j3w1-admin-form .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-admin-form .combobox-message,
+j3w1-admin-form .date-picker-message,
+j3w1-admin-form .file-input-message,
+j3w1-admin-form .number-field-message,
+j3w1-admin-form .radio-group-message,
+j3w1-admin-form .select-message,
+j3w1-admin-form .text-field-message,
+j3w1-admin-form .textarea-message,
+j3w1-admin-form .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-admin-form .combobox-root,
+j3w1-admin-form .date-picker-root,
+j3w1-admin-form .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
 }
 
 j3w1-admin-form .field {
@@ -270,12 +353,6 @@ j3w1-admin-form .field {
   color: var(--color-text-default);
 }
 
-j3w1-admin-form .field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-admin-form .field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -288,8 +365,8 @@ j3w1-admin-form .field-control {
 
 j3w1-admin-form .field-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -364,12 +441,6 @@ j3w1-admin-form .text-field {
   color: var(--color-text-default);
 }
 
-j3w1-admin-form .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-admin-form .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -379,7 +450,7 @@ j3w1-admin-form .text-field-root {
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -388,7 +459,7 @@ j3w1-admin-form .text-field-root {
 j3w1-admin-form .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -464,21 +535,6 @@ j3w1-admin-form .text-field-loading {
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-j3w1-admin-form .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-admin-form .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-admin-form .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -579,7 +635,7 @@ j3w1-admin-form .checkbox-required {
 
 j3w1-admin-form .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -589,8 +645,8 @@ j3w1-admin-form .checkbox-option {
 
 j3w1-admin-form .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -600,8 +656,8 @@ j3w1-admin-form .checkbox-control > * {
 
 j3w1-admin-form .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -613,8 +669,8 @@ j3w1-admin-form .checkbox-input {
 j3w1-admin-form .checkbox-check,
 j3w1-admin-form .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
@@ -753,7 +809,7 @@ j3w1-admin-form .radio-group-horizontal .radio-group-options {
 
 j3w1-admin-form .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -763,8 +819,8 @@ j3w1-admin-form .radio-group-option {
 
 j3w1-admin-form .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 j3w1-admin-form .radio-group-control > * {
@@ -773,8 +829,8 @@ j3w1-admin-form .radio-group-control > * {
 
 j3w1-admin-form .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -796,14 +852,6 @@ j3w1-admin-form .radio-group-text {
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
-
-j3w1-admin-form .radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-admin-form .radio-group-option:hover .radio-group-input:not(:disabled) {
     background: var(--color-interaction-hover-bg);
@@ -873,15 +921,15 @@ j3w1-admin-form .radio-group:disabled .radio-group-legend {
 }
 
 j3w1-admin-form :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-admin-form :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-admin-form :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-admin-form :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-admin-form :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-admin-form :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-admin-form :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-admin-form :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-admin-form :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-admin-form .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-admin-form .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-admin-form .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-admin-form .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-admin-form .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-admin-form .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-admin-form .j3w1-temporal :focus-visible,j3w1-admin-form .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -905,7 +953,7 @@ j3w1-admin-form .j3w1-calendar [aria-pressed="true"] { background:var(--color-in
 j3w1-admin-form .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-admin-form .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-admin-form .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-admin-form .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-admin-form .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-admin-form .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-admin-form .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-admin-form .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -913,7 +961,7 @@ j3w1-admin-form .j3w1-choice-trigger:focus-visible,j3w1-admin-form .j3w1-choice-
 j3w1-admin-form .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-admin-form .j3w1-choice-list[popover] { inset: auto; }
 j3w1-admin-form .j3w1-choice-list[hidden] { display: none; }
-j3w1-admin-form .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-admin-form .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-admin-form .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-admin-form .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-admin-form .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -927,19 +975,19 @@ j3w1-admin-form .j3w1-choice-error { display: block; color: var(--color-status-d
 j3w1-admin-form .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-admin-form .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-admin-form :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-admin-form :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-admin-form input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-admin-form input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
 
 j3w1-admin-form .select {
   position: relative;
@@ -950,12 +998,6 @@ j3w1-admin-form .select {
   color: var(--color-text-default);
 }
 
-j3w1-admin-form .select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-admin-form .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -965,7 +1007,7 @@ j3w1-admin-form .select-root {
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -976,8 +1018,8 @@ j3w1-admin-form .select-control {
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -1002,8 +1044,8 @@ j3w1-admin-form .select-control optgroup {
 }
 
 j3w1-admin-form .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 j3w1-admin-form .select-control optgroup {
@@ -1017,7 +1059,7 @@ j3w1-admin-form .select-control option:checked {
 
 j3w1-admin-form .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -1026,21 +1068,6 @@ j3w1-admin-form .select-chevron {
   fill: none;
   pointer-events: none;
 }
-
-j3w1-admin-form .select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-admin-form .select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-admin-form .select-root:hover {
     background: var(--color-interaction-hover-bg);
@@ -1236,12 +1263,6 @@ j3w1-admin-form .textarea {
   color: var(--color-text-default);
 }
 
-j3w1-admin-form .textarea-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-admin-form .textarea-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -1259,8 +1280,8 @@ j3w1-admin-form .textarea-input {
   display: block;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) * 2);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) * 2);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -1290,21 +1311,6 @@ j3w1-admin-form .textarea-count {
   line-height: var(--font-line-height-ui-sm);
   font-variant-numeric: tabular-nums;
 }
-
-j3w1-admin-form .textarea-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-admin-form .textarea-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-admin-form .textarea-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -1419,16 +1425,10 @@ j3w1-admin-form .fieldset-field {
   min-width: 0;
 }
 
-j3w1-admin-form .fieldset-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-admin-form .fieldset-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -1442,13 +1442,6 @@ j3w1-admin-form .fieldset-input:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-j3w1-admin-form .fieldset-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-admin-form .fieldset:disabled .fieldset-legend,
 j3w1-admin-form .fieldset:disabled .fieldset-label {
   color: var(--color-text-disabled);
@@ -1499,7 +1492,7 @@ j3w1-admin-form .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -1521,7 +1514,7 @@ j3w1-admin-form .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -1553,7 +1546,7 @@ j3w1-admin-form .table .table-body .table-row:first-child {
 
 j3w1-admin-form .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -1590,6 +1583,21 @@ j3w1-admin-form .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-admin-form .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-admin-form .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-admin-form .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-admin-form .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -1611,7 +1619,7 @@ j3w1-admin-form .table-row[aria-selected="true"]:hover {
 }
 j3w1-admin-form .table-row[aria-selected="true"]:focus-visible,
 j3w1-admin-form .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-admin-form .table[data-container-inactive] .table-row[aria-selected="true"] {
@@ -1775,6 +1783,9 @@ j3w1-admin-form .form-tool { inline-size: 100%; max-inline-size: calc(var(--font
 j3w1-admin-form .form-tool[hidden], j3w1-admin-form .form-tool [hidden] { display: none !important; }
 j3w1-admin-form .form-tool fieldset { min-inline-size: 0; }
 j3w1-admin-form .form-tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block: var(--space-16); }
+j3w1-admin-form .admin-form.form-tool form { display: grid; gap: var(--space-16); }
+j3w1-admin-form .admin-form.form-tool .form-tool-actions { margin-block: 0; }
+j3w1-admin-form .admin-form.form-tool > [data-status]:empty { position: absolute; }
 j3w1-admin-form .form-tool-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); border: 0; padding: 0; margin: 0; }
 j3w1-admin-form .form-field-help { color: var(--color-text-muted); margin: 0; font-size: var(--font-size-ui-sm); }
 j3w1-admin-form .form-tool-summary { margin-block: var(--space-4); }
diff --git a/packages/ui/dist/styles/alert.css b/packages/ui/dist/styles/alert.css
index 17d8831d4..a1df11cb8 100644
--- a/packages/ui/dist/styles/alert.css
+++ b/packages/ui/dist/styles/alert.css
@@ -8,7 +8,7 @@ j3w1-alert {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-alert, j3w1-alert *, j3w1-alert *::before, j3w1-alert *::after { box-sizing: border-box; }
-j3w1-alert button, j3w1-alert input, j3w1-alert select, j3w1-alert textarea { font: inherit; }
+j3w1-alert :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-alert ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/packages/ui/dist/styles/avatar.css b/packages/ui/dist/styles/avatar.css
index 9baf61ab1..52ea6f55e 100644
--- a/packages/ui/dist/styles/avatar.css
+++ b/packages/ui/dist/styles/avatar.css
@@ -8,7 +8,7 @@ j3w1-avatar {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-avatar, j3w1-avatar *, j3w1-avatar *::before, j3w1-avatar *::after { box-sizing: border-box; }
-j3w1-avatar button, j3w1-avatar input, j3w1-avatar select, j3w1-avatar textarea { font: inherit; }
+j3w1-avatar :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-avatar ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,8 @@ j3w1-avatar .sr-only {
   border: 0;
 }
 
-j3w1-avatar .avatar {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-avatar .avatar :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-avatar .avatar {display:inline-grid;place-items:center;inline-size:var(--space-32);block-size:var(--space-32);padding:0;overflow:hidden;font-weight:var(--font-weight-bold)}j3w1-avatar .avatar img {width:100%;height:100%;object-fit:cover}j3w1-avatar .avatar[data-loading] [data-avatar-fallback],j3w1-avatar .avatar[data-error] [data-avatar-fallback] {display:block}
+j3w1-avatar .avatar {box-sizing:border-box;display:inline-grid;gap:var(--space-12);min-width:0;padding:0;background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;place-items:center;inline-size:var(--space-32);block-size:var(--space-32);overflow:hidden;font-weight:var(--font-weight-bold)}
+j3w1-avatar .avatar :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}j3w1-avatar .avatar img {width:100%;height:100%;object-fit:cover}j3w1-avatar .avatar[data-loading] [data-avatar-fallback],j3w1-avatar .avatar[data-error] [data-avatar-fallback] {display:block}
 
 j3w1-avatar [hidden] { display: none !important; }
 j3w1-avatar .j3w1-visually-hidden {
diff --git a/packages/ui/dist/styles/badge.css b/packages/ui/dist/styles/badge.css
index f41cb0759..c9e587412 100644
--- a/packages/ui/dist/styles/badge.css
+++ b/packages/ui/dist/styles/badge.css
@@ -8,7 +8,7 @@ j3w1-badge {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-badge, j3w1-badge *, j3w1-badge *::before, j3w1-badge *::after { box-sizing: border-box; }
-j3w1-badge button, j3w1-badge input, j3w1-badge select, j3w1-badge textarea { font: inherit; }
+j3w1-badge :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-badge ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -113,23 +113,6 @@ j3w1-badge .badge-outline {
   border-color: var(--_border);
   color: var(--_text);
 }
-j3w1-badge .badge-empty {
-  width: var(--space-8);
-  height: var(--space-8);
-  min-width: 0;
-  padding: 0;
-  gap: 0;
-}
-
-j3w1-badge .badge-empty .badge-glyph,
-j3w1-badge .badge-empty .badge-text {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-}
 
 @media (forced-colors: active) {
   j3w1-badge .badge {
diff --git a/packages/ui/dist/styles/breadcrumbs.css b/packages/ui/dist/styles/breadcrumbs.css
index e903deb0f..1f408a395 100644
--- a/packages/ui/dist/styles/breadcrumbs.css
+++ b/packages/ui/dist/styles/breadcrumbs.css
@@ -8,7 +8,7 @@ j3w1-breadcrumbs {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-breadcrumbs, j3w1-breadcrumbs *, j3w1-breadcrumbs *::before, j3w1-breadcrumbs *::after { box-sizing: border-box; }
-j3w1-breadcrumbs button, j3w1-breadcrumbs input, j3w1-breadcrumbs select, j3w1-breadcrumbs textarea { font: inherit; }
+j3w1-breadcrumbs :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-breadcrumbs ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -44,7 +44,7 @@ j3w1-breadcrumbs .breadcrumbs-list {
 j3w1-breadcrumbs .breadcrumbs-item {
   display: inline-flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
 }
 
 j3w1-breadcrumbs .breadcrumbs-item[hidden] {
@@ -68,8 +68,8 @@ j3w1-breadcrumbs .breadcrumbs-link {
 }
 
 j3w1-breadcrumbs .breadcrumbs-ellipsis {
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-4);
   background: transparent;
   border: 0;
@@ -79,7 +79,7 @@ j3w1-breadcrumbs .breadcrumbs-ellipsis {
   cursor: pointer;
 }
 j3w1-breadcrumbs .breadcrumbs-link:hover {
-  background: var(--color-interaction-hover-bg-strong);
+  background: var(--color-interaction-hover-bg);
   color: var(--color-text-link-hover);
   text-decoration-thickness: var(--border-width-emphasis);
 }
diff --git a/packages/ui/dist/styles/button-group.css b/packages/ui/dist/styles/button-group.css
index c0af43d5f..7ef8204e8 100644
--- a/packages/ui/dist/styles/button-group.css
+++ b/packages/ui/dist/styles/button-group.css
@@ -8,7 +8,7 @@ j3w1-button-group {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-button-group, j3w1-button-group *, j3w1-button-group *::before, j3w1-button-group *::after { box-sizing: border-box; }
-j3w1-button-group button, j3w1-button-group input, j3w1-button-group select, j3w1-button-group textarea { font: inherit; }
+j3w1-button-group :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-button-group ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,12 +25,136 @@ j3w1-button-group .sr-only {
   border: 0;
 }
 
-j3w1-button-group .button-group {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
+j3w1-button-group .button,
+j3w1-button-group .dialog-button,
+j3w1-button-group .empty-state-action,
+j3w1-button-group .file-input-button,
+j3w1-button-group button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-button-group .button,
+j3w1-button-group .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-button-group .button-secondary,
+j3w1-button-group .dialog-button,
+j3w1-button-group .empty-state-action,
+j3w1-button-group .file-input-button,
+j3w1-button-group button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-button-group .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-button-group .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-button-group .button-destructive-filled,
+j3w1-button-group .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-button-group :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-button-group .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-button-group :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-button-group :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-button-group :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-button-group .dialog-button,
+  j3w1-button-group .empty-state-action,
+  j3w1-button-group .file-input-button,
+  j3w1-button-group button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-button-group :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+j3w1-button-group .button-group {box-sizing:border-box;display:flex;gap:var(--space-4);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;flex-wrap:wrap}
 j3w1-button-group .button-group-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-button-group .button-group :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-button-group .button-group :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-button-group .button-group :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-j3w1-button-group .button-group-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
-j3w1-button-group .button-group {display:flex;flex-wrap:wrap;gap:var(--space-4)}
 
 j3w1-button-group [hidden] { display: none !important; }
 j3w1-button-group .j3w1-visually-hidden {
diff --git a/packages/ui/dist/styles/button.css b/packages/ui/dist/styles/button.css
index c2b89697b..dc57ebaef 100644
--- a/packages/ui/dist/styles/button.css
+++ b/packages/ui/dist/styles/button.css
@@ -8,7 +8,7 @@ j3w1-button {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-button, j3w1-button *, j3w1-button *::before, j3w1-button *::after { box-sizing: border-box; }
-j3w1-button button, j3w1-button input, j3w1-button select, j3w1-button textarea { font: inherit; }
+j3w1-button :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-button ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,21 +25,17 @@ j3w1-button .sr-only {
   border: 0;
 }
 
-j3w1-button .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+j3w1-button .button,
+j3w1-button .dialog-button,
+j3w1-button .empty-state-action,
+j3w1-button .file-input-button,
+j3w1-button button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -52,8 +48,23 @@ j3w1-button .button {
   cursor: pointer;
   outline: 0;
 }
+j3w1-button .button,
+j3w1-button .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-j3w1-button .button-secondary {
+j3w1-button .button-secondary,
+j3w1-button .dialog-button,
+j3w1-button .empty-state-action,
+j3w1-button .file-input-button,
+j3w1-button button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -85,7 +96,8 @@ j3w1-button .button-destructive {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-j3w1-button .button-destructive-filled {
+j3w1-button .button-destructive-filled,
+j3w1-button .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -95,6 +107,49 @@ j3w1-button .button-destructive-filled {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  j3w1-button :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-button .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-button :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-button :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-button :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-button .dialog-button,
+  j3w1-button .empty-state-action,
+  j3w1-button .file-input-button,
+  j3w1-button button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-button :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 j3w1-button .button-icon {
   flex: none;
@@ -112,25 +167,6 @@ j3w1-button .button-loading {
 j3w1-button .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-button .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-button .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-button .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-button .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-button .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -142,16 +178,6 @@ j3w1-button .button[aria-busy="true"] .button-icon {
 j3w1-button .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-button .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-button .button {
@@ -160,9 +186,6 @@ j3w1-button .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-button .button:focus-visible {
-    outline-color: Highlight;
-  }
 }
 
 j3w1-button [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/card.css b/packages/ui/dist/styles/card.css
index 461412f36..4de7988d9 100644
--- a/packages/ui/dist/styles/card.css
+++ b/packages/ui/dist/styles/card.css
@@ -8,7 +8,7 @@ j3w1-card {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-card, j3w1-card *, j3w1-card *::before, j3w1-card *::after { box-sizing: border-box; }
-j3w1-card button, j3w1-card input, j3w1-card select, j3w1-card textarea { font: inherit; }
+j3w1-card :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-card ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -30,7 +30,7 @@ j3w1-card .card {
   gap: var(--space-4);
   min-width: 0;
   max-width: calc(var(--font-size-ui-md) * 28);
-  padding: var(--density-control-padding-x, 12px);
+  padding: var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-default);
@@ -67,7 +67,7 @@ j3w1-card .card-selectable {
 
 j3w1-card .card-group {
   display: grid;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
 }
 j3w1-card .card-link:hover,
@@ -102,8 +102,8 @@ j3w1-card .card-selectable[aria-selected="true"]:hover {
   border-color: var(--color-interaction-selection-bg);
 }
 j3w1-card .card-selectable[aria-selected="true"]:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 @media (hover: none) {
diff --git a/packages/ui/dist/styles/chart.css b/packages/ui/dist/styles/chart.css
index 8c02c10f3..b8f7a7e96 100644
--- a/packages/ui/dist/styles/chart.css
+++ b/packages/ui/dist/styles/chart.css
@@ -8,7 +8,7 @@ j3w1-chart {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-chart, j3w1-chart *, j3w1-chart *::before, j3w1-chart *::after { box-sizing: border-box; }
-j3w1-chart button, j3w1-chart input, j3w1-chart select, j3w1-chart textarea { font: inherit; }
+j3w1-chart :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-chart ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,8 @@ j3w1-chart .sr-only {
   border: 0;
 }
 
-j3w1-chart .chart {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-chart .chart :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-chart .chart {margin:0;min-width:0}j3w1-chart .chart svg {width:100%;max-height:calc(var(--font-size-ui-md) * 16)}j3w1-chart .chart-series {fill:var(--color-chart-series-2);stroke:var(--color-chart-axis);stroke-width:1}j3w1-chart .chart table {width:100%;border-collapse:collapse}j3w1-chart .chart th,j3w1-chart .chart td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-chart-grid)}j3w1-chart .chart caption {text-align:start;color:var(--color-chart-label)}j3w1-chart .chart [data-chart-empty] {color:var(--color-text-muted)}j3w1-chart .chart[aria-busy=true] {border-style:dashed}
+j3w1-chart .chart {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;margin:0}
+j3w1-chart .chart :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}j3w1-chart .chart svg {width:100%;max-height:calc(var(--font-size-ui-md) * 16)}j3w1-chart .chart-series {fill:var(--color-chart-series-2);stroke:var(--color-chart-axis);stroke-width:1}j3w1-chart .chart table {width:100%;border-collapse:collapse}j3w1-chart .chart th,j3w1-chart .chart td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-chart-grid)}j3w1-chart .chart caption {text-align:start;color:var(--color-chart-label)}j3w1-chart .chart [data-chart-empty] {color:var(--color-text-muted)}j3w1-chart .chart[aria-busy=true] {border-style:dashed}
 j3w1-chart .chart thead th {color:var(--color-text-bright);font-weight:var(--font-weight-bold)}
 j3w1-chart .chart tbody {color:var(--color-text-default)}
 j3w1-chart .chart tbody th {font-weight:var(--font-weight-regular)}
diff --git a/packages/ui/dist/styles/checkbox.css b/packages/ui/dist/styles/checkbox.css
index 49a361369..798a26875 100644
--- a/packages/ui/dist/styles/checkbox.css
+++ b/packages/ui/dist/styles/checkbox.css
@@ -8,7 +8,7 @@ j3w1-checkbox {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-checkbox, j3w1-checkbox *, j3w1-checkbox *::before, j3w1-checkbox *::after { box-sizing: border-box; }
-j3w1-checkbox button, j3w1-checkbox input, j3w1-checkbox select, j3w1-checkbox textarea { font: inherit; }
+j3w1-checkbox :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-checkbox ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -51,7 +51,7 @@ j3w1-checkbox .checkbox-required {
 
 j3w1-checkbox .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -61,8 +61,8 @@ j3w1-checkbox .checkbox-option {
 
 j3w1-checkbox .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -72,8 +72,8 @@ j3w1-checkbox .checkbox-control > * {
 
 j3w1-checkbox .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -85,8 +85,8 @@ j3w1-checkbox .checkbox-input {
 j3w1-checkbox .checkbox-check,
 j3w1-checkbox .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
diff --git a/packages/ui/dist/styles/chip.css b/packages/ui/dist/styles/chip.css
index 80b05ec8b..c1ff9b4f6 100644
--- a/packages/ui/dist/styles/chip.css
+++ b/packages/ui/dist/styles/chip.css
@@ -8,7 +8,7 @@ j3w1-chip {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-chip, j3w1-chip *, j3w1-chip *::before, j3w1-chip *::after { box-sizing: border-box; }
-j3w1-chip button, j3w1-chip input, j3w1-chip select, j3w1-chip textarea { font: inherit; }
+j3w1-chip :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-chip ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -30,7 +30,7 @@ j3w1-chip .chip {
   align-items: center;
   gap: var(--space-4);
   vertical-align: middle;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-8);
   box-sizing: border-box;
   background: var(--color-surface-default);
@@ -63,7 +63,7 @@ j3w1-chip .chip-remove {
   align-items: center;
   justify-content: center;
   align-self: stretch;
-  min-width: calc(var(--density-control-height, 32px) - var(--border-width-emphasis));
+  min-width: calc(var(--density-control-height, 24px) - var(--border-width-emphasis));
   padding: 0 var(--space-4);
   background: transparent;
   border: 0;
@@ -107,7 +107,7 @@ j3w1-chip .chip-filter[aria-pressed="true"]:hover {
   background: var(--color-interaction-selection-bg);
 }
 j3w1-chip .chip-filter[aria-pressed="true"]:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-chip .chip-filter:disabled,
diff --git a/packages/ui/dist/styles/code-editor.css b/packages/ui/dist/styles/code-editor.css
index bafe40907..070968813 100644
--- a/packages/ui/dist/styles/code-editor.css
+++ b/packages/ui/dist/styles/code-editor.css
@@ -8,7 +8,7 @@ j3w1-code-editor {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-code-editor, j3w1-code-editor *, j3w1-code-editor *::before, j3w1-code-editor *::after { box-sizing: border-box; }
-j3w1-code-editor button, j3w1-code-editor input, j3w1-code-editor select, j3w1-code-editor textarea { font: inherit; }
+j3w1-code-editor :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-code-editor ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -85,6 +85,10 @@ j3w1-code-editor .code-editor-ws {
   color: var(--color-code-whitespace);
 }
 
+j3w1-code-editor .code-editor-ws::before {
+  content: attr(data-whitespace);
+}
+
 j3w1-code-editor .code-editor-fold {
   display: inline-block;
   padding: 0 var(--space-4);
diff --git a/packages/ui/dist/styles/combobox.css b/packages/ui/dist/styles/combobox.css
index d049a9d72..c2c436f19 100644
--- a/packages/ui/dist/styles/combobox.css
+++ b/packages/ui/dist/styles/combobox.css
@@ -8,7 +8,7 @@ j3w1-combobox {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-combobox, j3w1-combobox *, j3w1-combobox *::before, j3w1-combobox *::after { box-sizing: border-box; }
-j3w1-combobox button, j3w1-combobox input, j3w1-combobox select, j3w1-combobox textarea { font: inherit; }
+j3w1-combobox :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-combobox ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,34 +25,79 @@ j3w1-combobox .sr-only {
   border: 0;
 }
 
-j3w1-combobox .combobox {
-  position: relative;
-  display: grid;
-  gap: var(--space-4);
-  min-width: 0;
-  max-width: calc(var(--font-size-ui-md) * 28);
-  color: var(--color-text-default);
+j3w1-combobox .combobox-label,
+j3w1-combobox .dialog-field-label,
+j3w1-combobox .field-label,
+j3w1-combobox .fieldset-label,
+j3w1-combobox .file-input-label,
+j3w1-combobox .number-field-label,
+j3w1-combobox .search-field-label,
+j3w1-combobox .select-label,
+j3w1-combobox .text-field-label,
+j3w1-combobox .textarea-label,
+j3w1-combobox .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
 }
 
-j3w1-combobox .combobox-label {
-  color: var(--color-text-bright);
+j3w1-combobox .combobox-help,
+j3w1-combobox .date-picker-help,
+j3w1-combobox .dialog-field-help,
+j3w1-combobox .fieldset-help,
+j3w1-combobox .file-input-help,
+j3w1-combobox .number-field-help,
+j3w1-combobox .search-field-help,
+j3w1-combobox .select-help,
+j3w1-combobox .text-field-help,
+j3w1-combobox .textarea-help,
+j3w1-combobox .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
   font-size: var(--font-size-ui-sm);
   line-height: var(--font-line-height-ui-sm);
 }
 
-j3w1-combobox .combobox-root {
+j3w1-combobox .combobox-message,
+j3w1-combobox .date-picker-message,
+j3w1-combobox .file-input-message,
+j3w1-combobox .number-field-message,
+j3w1-combobox .radio-group-message,
+j3w1-combobox .select-message,
+j3w1-combobox .text-field-message,
+j3w1-combobox .textarea-message,
+j3w1-combobox .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-combobox .combobox-root,
+j3w1-combobox .date-picker-root,
+j3w1-combobox .number-field-root {
   display: flex;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
 }
 
+j3w1-combobox .combobox {
+  position: relative;
+  display: grid;
+  gap: var(--space-4);
+  min-width: 0;
+  max-width: calc(var(--font-size-ui-md) * 28);
+  color: var(--color-text-default);
+}
+
 j3w1-combobox .combobox-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -112,7 +157,7 @@ j3w1-combobox .combobox-group-list {
 }
 
 j3w1-combobox .combobox-listbox {
-  max-height: calc(8 * var(--density-row-height, 36px));
+  max-height: calc(8 * var(--density-row-height, 28px));
   overflow-y: auto;
   background: var(--color-surface-raised);
   border: var(--border-width-default) solid var(--color-border-overlay);
@@ -123,8 +168,8 @@ j3w1-combobox .combobox-listbox {
 j3w1-combobox .combobox-option {
   display: flex;
   align-items: center;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   cursor: default;
 }
 
@@ -135,7 +180,7 @@ j3w1-combobox .combobox-option:hover {
 j3w1-combobox .combobox-option[aria-selected="true"] {
   background: var(--color-interaction-selection-bg);
   color: var(--color-interaction-selection-text);
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
@@ -150,7 +195,7 @@ j3w1-combobox .combobox-group + .combobox-group {
 
 j3w1-combobox .combobox-group-heading {
   display: block;
-  padding: var(--space-4) var(--density-control-padding-x, 12px) 0;
+  padding: var(--space-4) var(--density-control-padding-x, 8px) 0;
   color: var(--color-text-subtle);
   font-size: var(--font-size-ui-sm);
   line-height: var(--font-line-height-ui-sm);
@@ -159,26 +204,11 @@ j3w1-combobox .combobox-group-heading {
 j3w1-combobox .combobox-empty {
   display: none;
   align-items: center;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   color: var(--color-text-muted);
   font-style: italic;
 }
-
-j3w1-combobox .combobox-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-combobox .combobox-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-combobox .combobox-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/styles/command-palette.css b/packages/ui/dist/styles/command-palette.css
index 5f9ef7a20..c25e1a9e1 100644
--- a/packages/ui/dist/styles/command-palette.css
+++ b/packages/ui/dist/styles/command-palette.css
@@ -8,7 +8,7 @@ j3w1-command-palette {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-command-palette, j3w1-command-palette *, j3w1-command-palette *::before, j3w1-command-palette *::after { box-sizing: border-box; }
-j3w1-command-palette button, j3w1-command-palette input, j3w1-command-palette select, j3w1-command-palette textarea { font: inherit; }
+j3w1-command-palette :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-command-palette ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,10 +25,143 @@ j3w1-command-palette .sr-only {
   border: 0;
 }
 
+j3w1-command-palette .button,
+j3w1-command-palette .dialog-button,
+j3w1-command-palette .empty-state-action,
+j3w1-command-palette .file-input-button,
+j3w1-command-palette button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-command-palette .button,
+j3w1-command-palette .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-command-palette .button-secondary,
+j3w1-command-palette .dialog-button,
+j3w1-command-palette .empty-state-action,
+j3w1-command-palette .file-input-button,
+j3w1-command-palette button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-command-palette .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-command-palette .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-command-palette .button-destructive-filled,
+j3w1-command-palette .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-command-palette :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-command-palette .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-command-palette :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-command-palette :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-command-palette :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-command-palette .dialog-button,
+  j3w1-command-palette .empty-state-action,
+  j3w1-command-palette .file-input-button,
+  j3w1-command-palette button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-command-palette :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-command-palette .command-palette {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-command-palette .command-palette-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-command-palette .command-palette :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-command-palette .command-palette-dialog {width:min(calc(var(--font-size-ui-md) * 36),100%);max-height:80vh;margin:0;padding:var(--space-16);background:var(--color-surface-overlay);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-overlay);border-radius:var(--radius-none)}j3w1-command-palette .command-palette [role=listbox] {list-style:none;padding:0;max-height:40vh;overflow:auto}j3w1-command-palette .command-palette [role=option] {display:grid;grid-template-columns:calc(var(--font-size-ui-md) * 5) 1fr;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent;cursor:pointer}j3w1-command-palette .command-palette [role=option] span {color:var(--color-text-muted)}j3w1-command-palette .command-palette [aria-selected=true] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}j3w1-command-palette .command-palette-dialog::backdrop {background:var(--color-surface-backdrop)}j3w1-command-palette .command-palette-dialog:not([open]) {display:none}j3w1-command-palette .command-palette [data-command-status] {color:var(--color-text-muted)}
+j3w1-command-palette .command-palette :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+j3w1-command-palette .command-palette-dialog {width:min(calc(var(--font-size-ui-md) * 36),100%);max-height:80vh;margin:0;padding:var(--space-16);background:var(--color-surface-overlay);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-overlay);border-radius:var(--radius-none)}
+j3w1-command-palette .command-palette [role=listbox] {list-style:none;padding:0;max-height:40vh;overflow:auto}
+j3w1-command-palette .command-palette [role=option] {display:grid;grid-template-columns:calc(var(--font-size-ui-md) * 5) 1fr;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent;cursor:pointer}
+j3w1-command-palette .command-palette [role=option] span {color:var(--color-text-muted)}
+j3w1-command-palette .command-palette [aria-selected=true] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}
+j3w1-command-palette .command-palette-dialog::backdrop {background:var(--color-surface-backdrop)}
+j3w1-command-palette .command-palette-dialog:not([open]) {display:none}
+j3w1-command-palette .command-palette [data-command-status] {color:var(--color-text-muted)}
 
 j3w1-command-palette .command-palette [role="option"][aria-selected="true"] span { color: inherit; }
 
diff --git a/packages/ui/dist/styles/compact-dashboard.css b/packages/ui/dist/styles/compact-dashboard.css
index da53dfd7f..057ca3f6d 100644
--- a/packages/ui/dist/styles/compact-dashboard.css
+++ b/packages/ui/dist/styles/compact-dashboard.css
@@ -8,7 +8,7 @@ j3w1-compact-dashboard {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-compact-dashboard, j3w1-compact-dashboard *, j3w1-compact-dashboard *::before, j3w1-compact-dashboard *::after { box-sizing: border-box; }
-j3w1-compact-dashboard button, j3w1-compact-dashboard input, j3w1-compact-dashboard select, j3w1-compact-dashboard textarea { font: inherit; }
+j3w1-compact-dashboard :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-compact-dashboard ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,135 @@ j3w1-compact-dashboard .sr-only {
   border: 0;
 }
 
+j3w1-compact-dashboard .button,
+j3w1-compact-dashboard .dialog-button,
+j3w1-compact-dashboard .empty-state-action,
+j3w1-compact-dashboard .file-input-button,
+j3w1-compact-dashboard button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-compact-dashboard .button,
+j3w1-compact-dashboard .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-compact-dashboard .button-secondary,
+j3w1-compact-dashboard .dialog-button,
+j3w1-compact-dashboard .empty-state-action,
+j3w1-compact-dashboard .file-input-button,
+j3w1-compact-dashboard button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-compact-dashboard .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-compact-dashboard .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-compact-dashboard .button-destructive-filled,
+j3w1-compact-dashboard .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-compact-dashboard :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-compact-dashboard .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-compact-dashboard :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-compact-dashboard :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-compact-dashboard :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-compact-dashboard .dialog-button,
+  j3w1-compact-dashboard .empty-state-action,
+  j3w1-compact-dashboard .file-input-button,
+  j3w1-compact-dashboard button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-compact-dashboard :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-compact-dashboard .compact-dashboard {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-compact-dashboard .compact-dashboard-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-compact-dashboard .compact-dashboard :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-compact-dashboard .compact-dashboard :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-compact-dashboard .compact-dashboard table {width:100%;border-collapse:collapse}j3w1-compact-dashboard .compact-dashboard th,j3w1-compact-dashboard .compact-dashboard td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}
 j3w1-compact-dashboard .compact-dashboard-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-12);margin:0}j3w1-compact-dashboard .compact-dashboard-metrics>div {padding:var(--space-12);background:var(--color-surface-chrome);border:var(--border-width-default) solid var(--color-border-divider)}j3w1-compact-dashboard .compact-dashboard dt {color:var(--color-text-muted)}j3w1-compact-dashboard .compact-dashboard dd {margin:var(--space-8) 0 0;font-size:var(--font-size-h2);color:var(--color-text-bright)}j3w1-compact-dashboard .compact-dashboard[aria-busy=true] {border-style:dashed}j3w1-compact-dashboard .compact-dashboard [data-dashboard-empty] {color:var(--color-text-muted)}@media(max-width:480px){j3w1-compact-dashboard .compact-dashboard-metrics{grid-template-columns:1fr}}
 
@@ -67,7 +193,7 @@ j3w1-compact-dashboard .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -89,7 +215,7 @@ j3w1-compact-dashboard .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -121,7 +247,7 @@ j3w1-compact-dashboard .table .table-body .table-row:first-child {
 
 j3w1-compact-dashboard .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -158,6 +284,21 @@ j3w1-compact-dashboard .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-compact-dashboard .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-compact-dashboard .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-compact-dashboard .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-compact-dashboard .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -179,7 +320,7 @@ j3w1-compact-dashboard .table-row[aria-selected="true"]:hover {
 }
 j3w1-compact-dashboard .table-row[aria-selected="true"]:focus-visible,
 j3w1-compact-dashboard .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-compact-dashboard .table[data-container-inactive] .table-row[aria-selected="true"] {
@@ -235,9 +376,8 @@ j3w1-compact-dashboard .table-body .table-loading:not([hidden]) {
   }
 }
 
-j3w1-compact-dashboard .chart {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-compact-dashboard .chart :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-compact-dashboard .chart {margin:0;min-width:0}j3w1-compact-dashboard .chart svg {width:100%;max-height:calc(var(--font-size-ui-md) * 16)}j3w1-compact-dashboard .chart-series {fill:var(--color-chart-series-2);stroke:var(--color-chart-axis);stroke-width:1}j3w1-compact-dashboard .chart table {width:100%;border-collapse:collapse}j3w1-compact-dashboard .chart th,j3w1-compact-dashboard .chart td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-chart-grid)}j3w1-compact-dashboard .chart caption {text-align:start;color:var(--color-chart-label)}j3w1-compact-dashboard .chart [data-chart-empty] {color:var(--color-text-muted)}j3w1-compact-dashboard .chart[aria-busy=true] {border-style:dashed}
+j3w1-compact-dashboard .chart {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;margin:0}
+j3w1-compact-dashboard .chart :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}j3w1-compact-dashboard .chart svg {width:100%;max-height:calc(var(--font-size-ui-md) * 16)}j3w1-compact-dashboard .chart-series {fill:var(--color-chart-series-2);stroke:var(--color-chart-axis);stroke-width:1}j3w1-compact-dashboard .chart table {width:100%;border-collapse:collapse}j3w1-compact-dashboard .chart th,j3w1-compact-dashboard .chart td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-chart-grid)}j3w1-compact-dashboard .chart caption {text-align:start;color:var(--color-chart-label)}j3w1-compact-dashboard .chart [data-chart-empty] {color:var(--color-text-muted)}j3w1-compact-dashboard .chart[aria-busy=true] {border-style:dashed}
 j3w1-compact-dashboard .chart thead th {color:var(--color-text-bright);font-weight:var(--font-weight-bold)}
 j3w1-compact-dashboard .chart tbody {color:var(--color-text-default)}
 j3w1-compact-dashboard .chart tbody th {font-weight:var(--font-weight-regular)}
diff --git a/packages/ui/dist/styles/controls.css b/packages/ui/dist/styles/controls.css
index 434648c06..ec025aca5 100644
--- a/packages/ui/dist/styles/controls.css
+++ b/packages/ui/dist/styles/controls.css
@@ -7,7 +7,7 @@
   line-height: var(--font-line-height-ui-md);
 }
 [data-j3w1-controls], [data-j3w1-controls] *, [data-j3w1-controls] *::before, [data-j3w1-controls] *::after { box-sizing: border-box; }
-[data-j3w1-controls] button, [data-j3w1-controls] input, [data-j3w1-controls] select, [data-j3w1-controls] textarea { font: inherit; }
+[data-j3w1-controls] :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 [data-j3w1-controls] ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -24,15 +24,15 @@
   border: 0;
 }
 [data-j3w1-controls] :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-[data-j3w1-controls] :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-[data-j3w1-controls] :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-[data-j3w1-controls] :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-[data-j3w1-controls] :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-[data-j3w1-controls] :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-[data-j3w1-controls] :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+[data-j3w1-controls] :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+[data-j3w1-controls] :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+[data-j3w1-controls] :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+[data-j3w1-controls] :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+[data-j3w1-controls] :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+[data-j3w1-controls] :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 [data-j3w1-controls] .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 [data-j3w1-controls] .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-[data-j3w1-controls] .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+[data-j3w1-controls] .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 [data-j3w1-controls] .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 [data-j3w1-controls] .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 [data-j3w1-controls] .j3w1-temporal :focus-visible,[data-j3w1-controls] .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -56,7 +56,7 @@
 [data-j3w1-controls] .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 [data-j3w1-controls] .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 [data-j3w1-controls] .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-[data-j3w1-controls] .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+[data-j3w1-controls] .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 [data-j3w1-controls] .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 [data-j3w1-controls] .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 [data-j3w1-controls] .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -64,7 +64,7 @@
 [data-j3w1-controls] .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 [data-j3w1-controls] .j3w1-choice-list[popover] { inset: auto; }
 [data-j3w1-controls] .j3w1-choice-list[hidden] { display: none; }
-[data-j3w1-controls] .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+[data-j3w1-controls] .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 [data-j3w1-controls] .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 [data-j3w1-controls] .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 [data-j3w1-controls] .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -78,16 +78,16 @@
 [data-j3w1-controls] .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 [data-j3w1-controls] .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 [data-j3w1-controls] :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-[data-j3w1-controls] :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+[data-j3w1-controls] :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+[data-j3w1-controls] input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
diff --git a/packages/ui/dist/styles/data-table.css b/packages/ui/dist/styles/data-table.css
index c4feacebd..cac5d4e63 100644
--- a/packages/ui/dist/styles/data-table.css
+++ b/packages/ui/dist/styles/data-table.css
@@ -8,7 +8,7 @@ j3w1-data-table {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-data-table, j3w1-data-table *, j3w1-data-table *::before, j3w1-data-table *::after { box-sizing: border-box; }
-j3w1-data-table button, j3w1-data-table input, j3w1-data-table select, j3w1-data-table textarea { font: inherit; }
+j3w1-data-table :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-data-table ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -41,7 +41,7 @@ j3w1-data-table .data-table .data-table-header {
   position: relative;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -57,7 +57,7 @@ j3w1-data-table .data-table tbody th { color: inherit; font-weight: var(--font-w
 
 j3w1-data-table .data-table .data-table-header-select,
 j3w1-data-table .data-table .data-table-cell-select {
-  width: var(--density-control-height, 32px);
+  width: var(--density-control-height, 24px);
   padding-inline-end: 0;
   text-align: center;
 }
@@ -72,7 +72,7 @@ j3w1-data-table .data-table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -92,8 +92,8 @@ j3w1-data-table .data-table-checkbox {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   padding: 0;
   vertical-align: middle;
@@ -126,7 +126,7 @@ j3w1-data-table .data-table-select-all[aria-checked="mixed"] .data-table-check-g
 j3w1-data-table .data-table-checkbox:checked::before {
   content: "✓";
   color: var(--color-action-primary-text);
-  font-size: calc(var(--density-icon, 16px) * 0.75);
+  font-size: calc(var(--density-icon, 12px) * 0.75);
   line-height: 1;
 }
 
@@ -142,7 +142,7 @@ j3w1-data-table .data-table .data-table-body .data-table-row:first-child {
 
 j3w1-data-table .data-table .data-table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -214,7 +214,7 @@ j3w1-data-table .data-table .data-table-row[aria-selected="true"]:hover {
 }
 j3w1-data-table .data-table .data-table-row[aria-selected="true"]:focus-visible,
 j3w1-data-table .data-table .data-table-row:has(.data-table-checkbox:checked):focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-data-table .data-table .data-table-header[aria-sort="ascending"] .data-table-sort-glyph,
@@ -284,8 +284,8 @@ j3w1-data-table .menu-button {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -334,8 +334,8 @@ j3w1-data-table .menu-item {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -351,7 +351,7 @@ j3w1-data-table .menu-check {
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-text-bright);
   visibility: hidden;
 }
@@ -393,8 +393,8 @@ j3w1-data-table .menu-button:focus-visible {
 }
 
 j3w1-data-table .menu-item:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 j3w1-data-table .menu-button:focus:not(:focus-visible),
diff --git a/packages/ui/dist/styles/date-picker.css b/packages/ui/dist/styles/date-picker.css
index 3d8bafcab..74ea90ce8 100644
--- a/packages/ui/dist/styles/date-picker.css
+++ b/packages/ui/dist/styles/date-picker.css
@@ -8,7 +8,7 @@ j3w1-date-picker {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-date-picker, j3w1-date-picker *, j3w1-date-picker *::before, j3w1-date-picker *::after { box-sizing: border-box; }
-j3w1-date-picker button, j3w1-date-picker input, j3w1-date-picker select, j3w1-date-picker textarea { font: inherit; }
+j3w1-date-picker :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-date-picker ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,15 +26,15 @@ j3w1-date-picker .sr-only {
 }
 
 j3w1-date-picker :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-date-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-date-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-date-picker :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-date-picker :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-date-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-date-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-date-picker :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-date-picker :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-date-picker .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-date-picker .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-date-picker .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-date-picker .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-date-picker .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-date-picker .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-date-picker .j3w1-temporal :focus-visible,j3w1-date-picker .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -58,7 +58,7 @@ j3w1-date-picker .j3w1-calendar [aria-pressed="true"] { background:var(--color-i
 j3w1-date-picker .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-date-picker .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-date-picker .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-date-picker .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-date-picker .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-date-picker .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-date-picker .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-date-picker .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -66,7 +66,7 @@ j3w1-date-picker .j3w1-choice-trigger:focus-visible,j3w1-date-picker .j3w1-choic
 j3w1-date-picker .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-date-picker .j3w1-choice-list[popover] { inset: auto; }
 j3w1-date-picker .j3w1-choice-list[hidden] { display: none; }
-j3w1-date-picker .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-date-picker .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-date-picker .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-date-picker .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-date-picker .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -80,19 +80,79 @@ j3w1-date-picker .j3w1-choice-error { display: block; color: var(--color-status-
 j3w1-date-picker .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-date-picker .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-date-picker :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-date-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-date-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-date-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+
+j3w1-date-picker .combobox-label,
+j3w1-date-picker .dialog-field-label,
+j3w1-date-picker .field-label,
+j3w1-date-picker .fieldset-label,
+j3w1-date-picker .file-input-label,
+j3w1-date-picker .number-field-label,
+j3w1-date-picker .search-field-label,
+j3w1-date-picker .select-label,
+j3w1-date-picker .text-field-label,
+j3w1-date-picker .textarea-label,
+j3w1-date-picker .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-date-picker .combobox-help,
+j3w1-date-picker .date-picker-help,
+j3w1-date-picker .dialog-field-help,
+j3w1-date-picker .fieldset-help,
+j3w1-date-picker .file-input-help,
+j3w1-date-picker .number-field-help,
+j3w1-date-picker .search-field-help,
+j3w1-date-picker .select-help,
+j3w1-date-picker .text-field-help,
+j3w1-date-picker .textarea-help,
+j3w1-date-picker .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-date-picker .combobox-message,
+j3w1-date-picker .date-picker-message,
+j3w1-date-picker .file-input-message,
+j3w1-date-picker .number-field-message,
+j3w1-date-picker .radio-group-message,
+j3w1-date-picker .select-message,
+j3w1-date-picker .text-field-message,
+j3w1-date-picker .textarea-message,
+j3w1-date-picker .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-date-picker .combobox-root,
+j3w1-date-picker .date-picker-root,
+j3w1-date-picker .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
 
 j3w1-date-picker .date-picker {
   position: relative;
@@ -134,19 +194,10 @@ j3w1-date-picker .date-picker-separator {
   color: var(--color-text-muted);
 }
 
-j3w1-date-picker .date-picker-root {
-  display: flex;
-  align-items: stretch;
-  min-height: var(--density-control-height, 32px);
-  background: var(--color-surface-input);
-  border: var(--border-width-default) solid var(--color-border-control);
-  border-radius: var(--radius-none);
-}
-
 j3w1-date-picker .date-picker-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -165,21 +216,6 @@ j3w1-date-picker .date-picker-input::selection {
 j3w1-date-picker .date-picker-input::-webkit-calendar-picker-indicator {
   cursor: pointer;
 }
-
-j3w1-date-picker .date-picker-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-date-picker .date-picker-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-date-picker .date-picker-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/styles/description-list.css b/packages/ui/dist/styles/description-list.css
index c505dda01..bdb0e571f 100644
--- a/packages/ui/dist/styles/description-list.css
+++ b/packages/ui/dist/styles/description-list.css
@@ -8,7 +8,7 @@ j3w1-description-list {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-description-list, j3w1-description-list *, j3w1-description-list *::before, j3w1-description-list *::after { box-sizing: border-box; }
-j3w1-description-list button, j3w1-description-list input, j3w1-description-list select, j3w1-description-list textarea { font: inherit; }
+j3w1-description-list :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-description-list ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,8 @@ j3w1-description-list .sr-only {
   border: 0;
 }
 
-j3w1-description-list .description-list {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-description-list .description-list :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-description-list .description-list {margin:0}j3w1-description-list .description-list>div {display:grid;grid-template-columns:minmax(calc(var(--font-size-ui-md) * 6),1fr) 2fr;gap:var(--space-12);padding-block:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}j3w1-description-list .description-list dt {color:var(--color-text-muted)}j3w1-description-list .description-list dd {margin:0;overflow-wrap:anywhere}@media(max-width:480px){j3w1-description-list .description-list>div{grid-template-columns:1fr;gap:var(--space-4)}}
+j3w1-description-list .description-list {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;margin:0}
+j3w1-description-list .description-list :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}j3w1-description-list .description-list>div {display:grid;grid-template-columns:minmax(calc(var(--font-size-ui-md) * 6),1fr) 2fr;gap:var(--space-12);padding-block:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}j3w1-description-list .description-list dt {color:var(--color-text-muted)}j3w1-description-list .description-list dd {margin:0;overflow-wrap:anywhere}@media(max-width:480px){j3w1-description-list .description-list>div{grid-template-columns:1fr;gap:var(--space-4)}}
 
 j3w1-description-list [hidden] { display: none !important; }
 j3w1-description-list .j3w1-visually-hidden {
diff --git a/packages/ui/dist/styles/diagnostics.css b/packages/ui/dist/styles/diagnostics.css
index f49963749..749ed6bd5 100644
--- a/packages/ui/dist/styles/diagnostics.css
+++ b/packages/ui/dist/styles/diagnostics.css
@@ -8,7 +8,7 @@ j3w1-diagnostics {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-diagnostics, j3w1-diagnostics *, j3w1-diagnostics *::before, j3w1-diagnostics *::after { box-sizing: border-box; }
-j3w1-diagnostics button, j3w1-diagnostics input, j3w1-diagnostics select, j3w1-diagnostics textarea { font: inherit; }
+j3w1-diagnostics :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-diagnostics ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -132,8 +132,8 @@ j3w1-diagnostics .diagnostics-header {
   flex-wrap: wrap;
   gap: var(--space-12);
   align-items: baseline;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
 }
 
@@ -172,8 +172,8 @@ j3w1-diagnostics .diagnostics-row {
   grid-template-columns: auto minmax(0, 1fr) auto auto;
   gap: 0 var(--space-8);
   align-items: baseline;
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
   cursor: default;
 }
@@ -199,7 +199,7 @@ j3w1-diagnostics .diagnostics-status,
 j3w1-diagnostics .diagnostics-empty {
   display: none;
   margin: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
 }
 
 j3w1-diagnostics .diagnostics-status {
@@ -244,7 +244,7 @@ j3w1-diagnostics .diagnostics-row[aria-selected="true"] .diagnostics-rule {
   color: var(--color-interaction-selection-text);
 }
 j3w1-diagnostics .diagnostics-list:focus-visible .diagnostics-row[aria-selected="true"] {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
diff --git a/packages/ui/dist/styles/dialog.css b/packages/ui/dist/styles/dialog.css
index 1bd4885d2..afe66636f 100644
--- a/packages/ui/dist/styles/dialog.css
+++ b/packages/ui/dist/styles/dialog.css
@@ -8,7 +8,7 @@ j3w1-dialog {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-dialog, j3w1-dialog *, j3w1-dialog *::before, j3w1-dialog *::after { box-sizing: border-box; }
-j3w1-dialog button, j3w1-dialog input, j3w1-dialog select, j3w1-dialog textarea { font: inherit; }
+j3w1-dialog :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-dialog ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,192 @@ j3w1-dialog .sr-only {
   border: 0;
 }
 
+j3w1-dialog .button,
+j3w1-dialog .dialog-button,
+j3w1-dialog .empty-state-action,
+j3w1-dialog .file-input-button,
+j3w1-dialog button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-dialog .button,
+j3w1-dialog .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-dialog .button-secondary,
+j3w1-dialog .dialog-button,
+j3w1-dialog .empty-state-action,
+j3w1-dialog .file-input-button,
+j3w1-dialog button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-dialog .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-dialog .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-dialog .button-destructive-filled,
+j3w1-dialog .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-dialog :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-dialog .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-dialog :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-dialog :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-dialog :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-dialog .dialog-button,
+  j3w1-dialog .empty-state-action,
+  j3w1-dialog .file-input-button,
+  j3w1-dialog button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-dialog :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+j3w1-dialog .combobox-label,
+j3w1-dialog .dialog-field-label,
+j3w1-dialog .field-label,
+j3w1-dialog .fieldset-label,
+j3w1-dialog .file-input-label,
+j3w1-dialog .number-field-label,
+j3w1-dialog .search-field-label,
+j3w1-dialog .select-label,
+j3w1-dialog .text-field-label,
+j3w1-dialog .textarea-label,
+j3w1-dialog .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-dialog .combobox-help,
+j3w1-dialog .date-picker-help,
+j3w1-dialog .dialog-field-help,
+j3w1-dialog .fieldset-help,
+j3w1-dialog .file-input-help,
+j3w1-dialog .number-field-help,
+j3w1-dialog .search-field-help,
+j3w1-dialog .select-help,
+j3w1-dialog .text-field-help,
+j3w1-dialog .textarea-help,
+j3w1-dialog .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-dialog .combobox-message,
+j3w1-dialog .date-picker-message,
+j3w1-dialog .file-input-message,
+j3w1-dialog .number-field-message,
+j3w1-dialog .radio-group-message,
+j3w1-dialog .select-message,
+j3w1-dialog .text-field-message,
+j3w1-dialog .textarea-message,
+j3w1-dialog .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-dialog .combobox-root,
+j3w1-dialog .date-picker-root,
+j3w1-dialog .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-dialog .dialog-backdrop {
   display: grid;
   place-items: center;
@@ -103,15 +289,9 @@ j3w1-dialog .dialog-field {
   gap: var(--space-4);
 }
 
-j3w1-dialog .dialog-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-dialog .dialog-field-input {
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -126,13 +306,6 @@ j3w1-dialog .dialog-field-input:focus-visible {
   outline-offset: var(--focus-offset);
 }
 
-j3w1-dialog .dialog-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-dialog .dialog-actions {
   display: flex;
   flex-wrap: wrap;
@@ -145,32 +318,6 @@ j3w1-dialog .dialog-body .dialog-actions {
   margin-top: var(--space-4);
 }
 
-j3w1-dialog .dialog-button {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  font: inherit;
-  cursor: pointer;
-}
-
-j3w1-dialog .dialog-button-primary {
-  background: var(--color-action-primary-bg);
-  border-color: var(--color-action-primary-border);
-  color: var(--color-action-primary-text);
-}
-
-j3w1-dialog .dialog-button-destructive {
-  background: var(--color-action-destructive-filled-bg);
-  border-color: var(--color-action-destructive-border);
-  color: var(--color-action-destructive-filled-text);
-}
-
 j3w1-dialog .dialog-trap-note {
   display: none;
   margin: var(--space-12) 0 0;
@@ -181,34 +328,10 @@ j3w1-dialog .dialog-trap-note {
 j3w1-dialog .dialog-close:hover {
   background: var(--color-action-tertiary-hover-bg);
 }
-
-j3w1-dialog .dialog-button:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-j3w1-dialog .dialog-button-primary:hover {
-  background: var(--color-action-primary-hover-bg);
-}
-
-j3w1-dialog .dialog-button-destructive:hover {
-  background: var(--color-action-destructive-hover-bg);
-  color: var(--color-action-destructive-hover-text);
-}
-j3w1-dialog .dialog-close:focus-visible,
-j3w1-dialog .dialog-button:focus-visible {
+j3w1-dialog .dialog-close:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-j3w1-dialog .dialog-button-primary:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
-  outline-offset: var(--focus-offset);
-}
-
-j3w1-dialog .dialog-button-destructive:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-action-destructive-filled-text);
-  outline-offset: var(--focus-offset);
-}
 j3w1-dialog .dialog[open] {
   display: block;
 }
@@ -232,19 +355,6 @@ j3w1-dialog .dialog:focus-visible {
   j3w1-dialog .dialog-close:hover {
     background: transparent;
   }
-
-  j3w1-dialog .dialog-button:hover {
-    background: var(--color-action-secondary-bg);
-  }
-
-  j3w1-dialog .dialog-button-primary:hover {
-    background: var(--color-action-primary-bg);
-  }
-
-  j3w1-dialog .dialog-button-destructive:hover {
-    background: var(--color-action-destructive-filled-bg);
-    color: var(--color-action-destructive-filled-text);
-  }
 }
 
 @media (max-width: 320px) {
@@ -260,83 +370,11 @@ j3w1-dialog .dialog:focus-visible {
   }
 
   j3w1-dialog .dialog-close:focus-visible,
-  j3w1-dialog .dialog-button:focus-visible,
   j3w1-dialog .dialog:focus-visible {
     outline-color: Highlight;
   }
 }
 
-j3w1-dialog .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  margin: 0;
-  background: var(--_bg);
-  color: var(--_fg);
-  border: var(--border-width-default) solid var(--_border);
-  border-radius: var(--radius-none);
-  font: inherit;
-  font-size: var(--font-size-ui-md);
-  line-height: var(--font-line-height-ui-md);
-  white-space: nowrap;
-  cursor: pointer;
-  outline: 0;
-}
-
-j3w1-dialog .button-secondary {
-  --_bg: var(--color-action-secondary-bg);
-  --_fg: var(--color-action-secondary-text);
-  --_border: var(--color-action-secondary-border);
-  --_bg-hover: var(--color-action-secondary-hover-bg);
-  --_fg-hover: var(--color-action-secondary-text);
-  --_bg-active: var(--color-action-secondary-pressed-bg);
-  --_border-active: var(--color-border-active);
-  --_ring: var(--color-interaction-focus-ring);
-}
-
-j3w1-dialog .button-tertiary {
-  --_bg: transparent;
-  --_fg: var(--color-action-tertiary-text);
-  --_border: transparent;
-  --_bg-hover: var(--color-action-tertiary-hover-bg);
-  --_fg-hover: var(--color-action-tertiary-text);
-  --_bg-active: var(--color-interaction-pressed-bg);
-  --_border-active: var(--color-border-active);
-  --_ring: var(--color-interaction-focus-ring);
-}
-
-j3w1-dialog .button-destructive {
-  --_bg: transparent;
-  --_fg: var(--color-action-destructive-text);
-  --_border: var(--color-action-destructive-border);
-  --_bg-hover: var(--color-action-destructive-hover-bg);
-  --_fg-hover: var(--color-action-destructive-hover-text);
-  --_bg-active: var(--color-action-destructive-pressed-bg);
-  --_border-active: var(--color-action-destructive-border);
-  --_ring: var(--color-interaction-focus-ring);
-}
-j3w1-dialog .button-destructive-filled {
-  --_bg: var(--color-action-destructive-filled-bg);
-  --_fg: var(--color-action-destructive-filled-text);
-  --_border: var(--color-action-destructive-border);
-  --_bg-hover: var(--color-action-destructive-hover-bg);
-  --_fg-hover: var(--color-action-destructive-hover-text);
-  --_bg-active: var(--color-action-destructive-pressed-bg);
-  --_border-active: var(--color-action-destructive-border);
-  --_ring: var(--color-action-destructive-filled-text);
-}
-
 j3w1-dialog .button-icon {
   flex: none;
   width: var(--icon-size-md);
@@ -353,25 +391,6 @@ j3w1-dialog .button-loading {
 j3w1-dialog .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-dialog .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-dialog .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-dialog .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-dialog .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-dialog .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -383,16 +402,6 @@ j3w1-dialog .button[aria-busy="true"] .button-icon {
 j3w1-dialog .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-dialog .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-dialog .button {
@@ -401,9 +410,6 @@ j3w1-dialog .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-dialog .button:focus-visible {
-    outline-color: Highlight;
-  }
 }
 
 j3w1-dialog [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/diff-view.css b/packages/ui/dist/styles/diff-view.css
index e463e4c67..dd760e6c0 100644
--- a/packages/ui/dist/styles/diff-view.css
+++ b/packages/ui/dist/styles/diff-view.css
@@ -8,7 +8,7 @@ j3w1-diff-view {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-diff-view, j3w1-diff-view *, j3w1-diff-view *::before, j3w1-diff-view *::after { box-sizing: border-box; }
-j3w1-diff-view button, j3w1-diff-view input, j3w1-diff-view select, j3w1-diff-view textarea { font: inherit; }
+j3w1-diff-view :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-diff-view ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -193,7 +193,7 @@ j3w1-diff-view .diff-view-fold {
   display: inline-flex;
   gap: var(--space-4);
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-4);
   background: transparent;
   border: 0;
@@ -245,7 +245,7 @@ j3w1-diff-view .diff-view-row:focus-visible {
 }
 
 j3w1-diff-view .diff-view-row[aria-current="true"]:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-diff-view .diff-view-fold[aria-expanded="true"] .diff-view-chevron {
diff --git a/packages/ui/dist/styles/disclosure.css b/packages/ui/dist/styles/disclosure.css
index 8dadc680a..68f725a59 100644
--- a/packages/ui/dist/styles/disclosure.css
+++ b/packages/ui/dist/styles/disclosure.css
@@ -8,7 +8,7 @@ j3w1-disclosure {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-disclosure, j3w1-disclosure *, j3w1-disclosure *::before, j3w1-disclosure *::after { box-sizing: border-box; }
-j3w1-disclosure button, j3w1-disclosure input, j3w1-disclosure select, j3w1-disclosure textarea { font: inherit; }
+j3w1-disclosure :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-disclosure ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,10 +26,7 @@ j3w1-disclosure .sr-only {
 }
 
 j3w1-disclosure .disclosure {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-disclosure .disclosure-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-disclosure .disclosure :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-disclosure .disclosure :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-j3w1-disclosure .disclosure-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
+j3w1-disclosure .disclosure :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-disclosure .disclosure summary {cursor:pointer;min-height:var(--density-control-height);padding:var(--space-8)}j3w1-disclosure .disclosure[open] {border-inline-start:var(--border-width-emphasis) solid var(--color-border-active)}j3w1-disclosure .disclosure:not([open])>:not(summary) {display:none}
 
 j3w1-disclosure [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/drawer.css b/packages/ui/dist/styles/drawer.css
index c7a2750f9..2c7b6eb24 100644
--- a/packages/ui/dist/styles/drawer.css
+++ b/packages/ui/dist/styles/drawer.css
@@ -8,7 +8,7 @@ j3w1-drawer {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-drawer, j3w1-drawer *, j3w1-drawer *::before, j3w1-drawer *::after { box-sizing: border-box; }
-j3w1-drawer button, j3w1-drawer input, j3w1-drawer select, j3w1-drawer textarea { font: inherit; }
+j3w1-drawer :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-drawer ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -76,7 +76,7 @@ j3w1-drawer .drawer-header {
   align-items: center;
   justify-content: space-between;
   gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   padding: var(--space-8) var(--space-12);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
 }
@@ -128,7 +128,7 @@ j3w1-drawer .drawer-check {
   display: flex;
   align-items: center;
   gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   padding: 0 var(--space-12);
   color: var(--color-text-default);
   text-decoration: none;
@@ -217,21 +217,17 @@ j3w1-drawer .drawer:focus-visible {
   }
 }
 
-j3w1-drawer .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+j3w1-drawer .button,
+j3w1-drawer .dialog-button,
+j3w1-drawer .empty-state-action,
+j3w1-drawer .file-input-button,
+j3w1-drawer button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -244,8 +240,23 @@ j3w1-drawer .button {
   cursor: pointer;
   outline: 0;
 }
+j3w1-drawer .button,
+j3w1-drawer .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-j3w1-drawer .button-secondary {
+j3w1-drawer .button-secondary,
+j3w1-drawer .dialog-button,
+j3w1-drawer .empty-state-action,
+j3w1-drawer .file-input-button,
+j3w1-drawer button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -277,7 +288,8 @@ j3w1-drawer .button-destructive {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-j3w1-drawer .button-destructive-filled {
+j3w1-drawer .button-destructive-filled,
+j3w1-drawer .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -287,6 +299,49 @@ j3w1-drawer .button-destructive-filled {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  j3w1-drawer :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-drawer .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-drawer :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-drawer :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-drawer :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-drawer .dialog-button,
+  j3w1-drawer .empty-state-action,
+  j3w1-drawer .file-input-button,
+  j3w1-drawer button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-drawer :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 j3w1-drawer .button-icon {
   flex: none;
@@ -304,25 +359,6 @@ j3w1-drawer .button-loading {
 j3w1-drawer .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-drawer .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-drawer .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-drawer .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-drawer .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-drawer .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -334,16 +370,6 @@ j3w1-drawer .button[aria-busy="true"] .button-icon {
 j3w1-drawer .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-drawer .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-drawer .button {
@@ -352,9 +378,6 @@ j3w1-drawer .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-drawer .button:focus-visible {
-    outline-color: Highlight;
-  }
 }
 
 j3w1-drawer [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/editor-search.css b/packages/ui/dist/styles/editor-search.css
index 36709ee6b..e0bf89b85 100644
--- a/packages/ui/dist/styles/editor-search.css
+++ b/packages/ui/dist/styles/editor-search.css
@@ -8,7 +8,7 @@ j3w1-editor-search {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-editor-search, j3w1-editor-search *, j3w1-editor-search *::before, j3w1-editor-search *::after { box-sizing: border-box; }
-j3w1-editor-search button, j3w1-editor-search input, j3w1-editor-search select, j3w1-editor-search textarea { font: inherit; }
+j3w1-editor-search :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-editor-search ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,135 @@ j3w1-editor-search .sr-only {
   border: 0;
 }
 
+j3w1-editor-search .button,
+j3w1-editor-search .dialog-button,
+j3w1-editor-search .empty-state-action,
+j3w1-editor-search .file-input-button,
+j3w1-editor-search button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-editor-search .button,
+j3w1-editor-search .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-editor-search .button-secondary,
+j3w1-editor-search .dialog-button,
+j3w1-editor-search .empty-state-action,
+j3w1-editor-search .file-input-button,
+j3w1-editor-search button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-editor-search .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-editor-search .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-editor-search .button-destructive-filled,
+j3w1-editor-search .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-editor-search :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-editor-search .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-editor-search :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-editor-search :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-editor-search :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-editor-search .dialog-button,
+  j3w1-editor-search .empty-state-action,
+  j3w1-editor-search .file-input-button,
+  j3w1-editor-search button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-editor-search :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-editor-search .editor-search {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-editor-search .editor-search-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-editor-search .editor-search :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-editor-search .editor-search :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-editor-search .editor-search pre {padding:var(--space-12);overflow:auto;background:var(--color-surface-code);font:inherit}j3w1-editor-search .editor-search mark {background:var(--color-code-search-match-bg);color:var(--color-text-default)}j3w1-editor-search .editor-search mark[data-current] {background:var(--color-code-search-current-bg);color:var(--color-code-search-current-text);outline:var(--border-width-default) dashed var(--color-interaction-focus-ring-container)}j3w1-editor-search .editor-search [data-search-status] {color:var(--color-text-muted)}j3w1-editor-search .editor-search-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 
 j3w1-editor-search [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/empty-state.css b/packages/ui/dist/styles/empty-state.css
index aa6c70189..432469cd1 100644
--- a/packages/ui/dist/styles/empty-state.css
+++ b/packages/ui/dist/styles/empty-state.css
@@ -8,7 +8,7 @@ j3w1-empty-state {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-empty-state, j3w1-empty-state *, j3w1-empty-state *::before, j3w1-empty-state *::after { box-sizing: border-box; }
-j3w1-empty-state button, j3w1-empty-state input, j3w1-empty-state select, j3w1-empty-state textarea { font: inherit; }
+j3w1-empty-state :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-empty-state ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,132 @@ j3w1-empty-state .sr-only {
   border: 0;
 }
 
+j3w1-empty-state .button,
+j3w1-empty-state .dialog-button,
+j3w1-empty-state .empty-state-action,
+j3w1-empty-state .file-input-button,
+j3w1-empty-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-empty-state .button,
+j3w1-empty-state .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-empty-state .button-secondary,
+j3w1-empty-state .dialog-button,
+j3w1-empty-state .empty-state-action,
+j3w1-empty-state .file-input-button,
+j3w1-empty-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-empty-state .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-empty-state .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-empty-state .button-destructive-filled,
+j3w1-empty-state .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-empty-state :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-empty-state .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-empty-state :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-empty-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-empty-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-empty-state .dialog-button,
+  j3w1-empty-state .empty-state-action,
+  j3w1-empty-state .file-input-button,
+  j3w1-empty-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-empty-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-empty-state .empty-state {
   display: flex;
   flex-direction: column;
@@ -62,34 +188,8 @@ j3w1-empty-state .empty-state-text {
   line-height: var(--font-line-height-ui-md);
   overflow-wrap: anywhere;
 }
-
 j3w1-empty-state .empty-state-action {
-  display: inline-flex;
-  align-items: center;
-  min-height: var(--density-control-height, 32px);
   margin-top: var(--space-8);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  font: inherit;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-j3w1-empty-state .empty-state-action:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-j3w1-empty-state .empty-state-action:active {
-  background: var(--color-action-secondary-pressed-bg);
-  border-color: var(--color-border-active);
-}
-
-j3w1-empty-state .empty-state-action:focus-visible {
-  outline: var(--focus-ring);
-  outline-offset: var(--focus-offset);
 }
 
 @media (max-width: 320px) {
@@ -103,24 +203,6 @@ j3w1-empty-state .empty-state-action:focus-visible {
   }
 }
 
-@media (hover: none) {
-  j3w1-empty-state .empty-state-action:hover {
-    background: var(--color-action-secondary-bg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  j3w1-empty-state .empty-state-action {
-    transition: background-color var(--motion-duration-fast);
-  }
-}
-
-@media (forced-colors: active) {
-  j3w1-empty-state .empty-state-action:focus-visible {
-    outline-color: Highlight;
-  }
-}
-
 j3w1-empty-state [hidden] { display: none !important; }
 j3w1-empty-state .j3w1-visually-hidden {
   position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
diff --git a/packages/ui/dist/styles/error-state.css b/packages/ui/dist/styles/error-state.css
index d7928ab44..77d6941c4 100644
--- a/packages/ui/dist/styles/error-state.css
+++ b/packages/ui/dist/styles/error-state.css
@@ -8,7 +8,7 @@ j3w1-error-state {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-error-state, j3w1-error-state *, j3w1-error-state *::before, j3w1-error-state *::after { box-sizing: border-box; }
-j3w1-error-state button, j3w1-error-state input, j3w1-error-state select, j3w1-error-state textarea { font: inherit; }
+j3w1-error-state :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-error-state ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,8 +25,134 @@ j3w1-error-state .sr-only {
   border: 0;
 }
 
+j3w1-error-state .button,
+j3w1-error-state .dialog-button,
+j3w1-error-state .empty-state-action,
+j3w1-error-state .file-input-button,
+j3w1-error-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-error-state .button,
+j3w1-error-state .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-error-state .button-secondary,
+j3w1-error-state .dialog-button,
+j3w1-error-state .empty-state-action,
+j3w1-error-state .file-input-button,
+j3w1-error-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-error-state .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-error-state .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-error-state .button-destructive-filled,
+j3w1-error-state .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-error-state :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-error-state .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-error-state :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-error-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-error-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-error-state .dialog-button,
+  j3w1-error-state .empty-state-action,
+  j3w1-error-state .file-input-button,
+  j3w1-error-state button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-error-state :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-error-state .error-state {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-error-state .error-state :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-error-state .error-state :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-error-state .error-state-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}j3w1-error-state .error-state :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}j3w1-error-state .error-state {border-inline-start:var(--border-width-emphasis) solid var(--color-status-danger-border)}j3w1-error-state .error-state h3 {color:var(--color-status-danger-text)}j3w1-error-state .error-state[aria-busy=true] {border-block-style:dashed}
 
 j3w1-error-state [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/field.css b/packages/ui/dist/styles/field.css
index 4b0c314c9..753ee0a18 100644
--- a/packages/ui/dist/styles/field.css
+++ b/packages/ui/dist/styles/field.css
@@ -8,7 +8,7 @@ j3w1-field {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-field, j3w1-field *, j3w1-field *::before, j3w1-field *::after { box-sizing: border-box; }
-j3w1-field button, j3w1-field input, j3w1-field select, j3w1-field textarea { font: inherit; }
+j3w1-field :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-field ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-field .sr-only {
   border: 0;
 }
 
+j3w1-field .combobox-label,
+j3w1-field .dialog-field-label,
+j3w1-field .field-label,
+j3w1-field .fieldset-label,
+j3w1-field .file-input-label,
+j3w1-field .number-field-label,
+j3w1-field .search-field-label,
+j3w1-field .select-label,
+j3w1-field .text-field-label,
+j3w1-field .textarea-label,
+j3w1-field .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-field .combobox-help,
+j3w1-field .date-picker-help,
+j3w1-field .dialog-field-help,
+j3w1-field .fieldset-help,
+j3w1-field .file-input-help,
+j3w1-field .number-field-help,
+j3w1-field .search-field-help,
+j3w1-field .select-help,
+j3w1-field .text-field-help,
+j3w1-field .textarea-help,
+j3w1-field .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-field .combobox-message,
+j3w1-field .date-picker-message,
+j3w1-field .file-input-message,
+j3w1-field .number-field-message,
+j3w1-field .radio-group-message,
+j3w1-field .select-message,
+j3w1-field .text-field-message,
+j3w1-field .textarea-message,
+j3w1-field .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-field .combobox-root,
+j3w1-field .date-picker-root,
+j3w1-field .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-field .field {
   position: relative;
   display: grid;
@@ -34,12 +94,6 @@ j3w1-field .field {
   color: var(--color-text-default);
 }
 
-j3w1-field .field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-field .field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -52,8 +106,8 @@ j3w1-field .field-control {
 
 j3w1-field .field-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
diff --git a/packages/ui/dist/styles/fieldset.css b/packages/ui/dist/styles/fieldset.css
index a9b4c5965..dd99c23a1 100644
--- a/packages/ui/dist/styles/fieldset.css
+++ b/packages/ui/dist/styles/fieldset.css
@@ -8,7 +8,7 @@ j3w1-fieldset {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-fieldset, j3w1-fieldset *, j3w1-fieldset *::before, j3w1-fieldset *::after { box-sizing: border-box; }
-j3w1-fieldset button, j3w1-fieldset input, j3w1-fieldset select, j3w1-fieldset textarea { font: inherit; }
+j3w1-fieldset :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-fieldset ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-fieldset .sr-only {
   border: 0;
 }
 
+j3w1-fieldset .combobox-label,
+j3w1-fieldset .dialog-field-label,
+j3w1-fieldset .field-label,
+j3w1-fieldset .fieldset-label,
+j3w1-fieldset .file-input-label,
+j3w1-fieldset .number-field-label,
+j3w1-fieldset .search-field-label,
+j3w1-fieldset .select-label,
+j3w1-fieldset .text-field-label,
+j3w1-fieldset .textarea-label,
+j3w1-fieldset .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-fieldset .combobox-help,
+j3w1-fieldset .date-picker-help,
+j3w1-fieldset .dialog-field-help,
+j3w1-fieldset .fieldset-help,
+j3w1-fieldset .file-input-help,
+j3w1-fieldset .number-field-help,
+j3w1-fieldset .search-field-help,
+j3w1-fieldset .select-help,
+j3w1-fieldset .text-field-help,
+j3w1-fieldset .textarea-help,
+j3w1-fieldset .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-fieldset .combobox-message,
+j3w1-fieldset .date-picker-message,
+j3w1-fieldset .file-input-message,
+j3w1-fieldset .number-field-message,
+j3w1-fieldset .radio-group-message,
+j3w1-fieldset .select-message,
+j3w1-fieldset .text-field-message,
+j3w1-fieldset .textarea-message,
+j3w1-fieldset .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-fieldset .combobox-root,
+j3w1-fieldset .date-picker-root,
+j3w1-fieldset .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-fieldset .fieldset {
   min-width: 0;
   max-width: calc(var(--font-size-ui-md) * 28);
@@ -55,16 +115,10 @@ j3w1-fieldset .fieldset-field {
   min-width: 0;
 }
 
-j3w1-fieldset .fieldset-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-fieldset .fieldset-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -78,13 +132,6 @@ j3w1-fieldset .fieldset-input:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-j3w1-fieldset .fieldset-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-fieldset .fieldset:disabled .fieldset-legend,
 j3w1-fieldset .fieldset:disabled .fieldset-label {
   color: var(--color-text-disabled);
diff --git a/packages/ui/dist/styles/file-browser.css b/packages/ui/dist/styles/file-browser.css
index ffef8d528..b6d1c2871 100644
--- a/packages/ui/dist/styles/file-browser.css
+++ b/packages/ui/dist/styles/file-browser.css
@@ -8,7 +8,7 @@ j3w1-file-browser {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-file-browser, j3w1-file-browser *, j3w1-file-browser *::before, j3w1-file-browser *::after { box-sizing: border-box; }
-j3w1-file-browser button, j3w1-file-browser input, j3w1-file-browser select, j3w1-file-browser textarea { font: inherit; }
+j3w1-file-browser :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-file-browser ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,11 +25,136 @@ j3w1-file-browser .sr-only {
   border: 0;
 }
 
-j3w1-file-browser .file-browser {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
+j3w1-file-browser .button,
+j3w1-file-browser .dialog-button,
+j3w1-file-browser .empty-state-action,
+j3w1-file-browser .file-input-button,
+j3w1-file-browser button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-file-browser .button,
+j3w1-file-browser .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-file-browser .button-secondary,
+j3w1-file-browser .dialog-button,
+j3w1-file-browser .empty-state-action,
+j3w1-file-browser .file-input-button,
+j3w1-file-browser button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-file-browser .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-file-browser .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-file-browser .button-destructive-filled,
+j3w1-file-browser .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-file-browser :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-file-browser .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-file-browser :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-file-browser :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-file-browser :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-file-browser .dialog-button,
+  j3w1-file-browser .empty-state-action,
+  j3w1-file-browser .file-input-button,
+  j3w1-file-browser button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-file-browser :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+j3w1-file-browser .file-browser {box-sizing:border-box;display:grid;gap:var(--space-16);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;grid-template-columns:minmax(calc(var(--font-size-ui-md) * 8),1fr) 3fr}
 j3w1-file-browser .file-browser-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-file-browser .file-browser :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-file-browser .file-browser table {width:100%;border-collapse:collapse}j3w1-file-browser .file-browser th,j3w1-file-browser .file-browser td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}
-j3w1-file-browser .file-browser {grid-template-columns:minmax(calc(var(--font-size-ui-md) * 8),1fr) 3fr;gap:var(--space-16)}j3w1-file-browser .file-browser [aria-selected=true] {border-inline-start:var(--border-width-emphasis) solid var(--color-border-selected-indicator)}j3w1-file-browser .file-browser [data-file-status] {color:var(--color-text-muted)}@media(max-width:640px){j3w1-file-browser .file-browser{grid-template-columns:1fr}}
+j3w1-file-browser .file-browser :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+j3w1-file-browser .file-browser table {width:100%;border-collapse:collapse}j3w1-file-browser .file-browser th,j3w1-file-browser .file-browser td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}j3w1-file-browser .file-browser [aria-selected=true] {border-inline-start:var(--border-width-emphasis) solid var(--color-border-selected-indicator)}j3w1-file-browser .file-browser [data-file-status] {color:var(--color-text-muted)}@media(max-width:640px){j3w1-file-browser .file-browser{grid-template-columns:1fr}}
 
 j3w1-file-browser .file-browser thead th {color:var(--color-text-bright)}
 j3w1-file-browser .file-browser tbody {color:var(--color-text-default)}
@@ -67,7 +192,7 @@ j3w1-file-browser .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -89,7 +214,7 @@ j3w1-file-browser .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -121,7 +246,7 @@ j3w1-file-browser .table .table-body .table-row:first-child {
 
 j3w1-file-browser .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -158,6 +283,21 @@ j3w1-file-browser .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-file-browser .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-file-browser .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-file-browser .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-file-browser .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -179,7 +319,7 @@ j3w1-file-browser .table-row[aria-selected="true"]:hover {
 }
 j3w1-file-browser .table-row[aria-selected="true"]:focus-visible,
 j3w1-file-browser .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-file-browser .table[data-container-inactive] .table-row[aria-selected="true"] {
@@ -236,8 +376,15 @@ j3w1-file-browser .table-body .table-loading:not([hidden]) {
 }
 
 j3w1-file-browser .tree {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-file-browser .tree-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-file-browser .tree,j3w1-file-browser .tree [role=group] {list-style:none;padding:0;margin:0}j3w1-file-browser .tree [role=group] {padding-inline-start:var(--space-16)}j3w1-file-browser .tree [data-tree-label] {display:block;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent}j3w1-file-browser .tree [aria-expanded]>[data-tree-label]::before {content:'▸ '}j3w1-file-browser .tree [aria-expanded=true]>[data-tree-label]::before {content:'▾ '}j3w1-file-browser .tree [aria-selected=true]>[data-tree-label] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}j3w1-file-browser .tree [role=treeitem]:focus-visible>[data-tree-label] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}j3w1-file-browser .tree [aria-expanded=false]>[role=group] {display:none}j3w1-file-browser .tree [aria-disabled=true]>[data-tree-label] {color:var(--color-text-disabled)}
+j3w1-file-browser .tree,j3w1-file-browser .tree [role=group] {list-style:none;padding:0;margin:0}
+j3w1-file-browser .tree [role=group] {padding-inline-start:var(--space-16)}
+j3w1-file-browser .tree [data-tree-label] {display:block;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent}
+j3w1-file-browser .tree [aria-expanded]>[data-tree-label]::before {content:'▸ '}
+j3w1-file-browser .tree [aria-expanded=true]>[data-tree-label]::before {content:'▾ '}
+j3w1-file-browser .tree [aria-selected=true]>[data-tree-label] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}
+j3w1-file-browser .tree [role=treeitem]:focus-visible>[data-tree-label] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+j3w1-file-browser .tree [aria-expanded=false]>[role=group] {display:none}
+j3w1-file-browser .tree [aria-disabled=true]>[data-tree-label] {color:var(--color-text-disabled)}
 
 j3w1-file-browser .tree [aria-selected=true]:focus-visible>[data-tree-label] {outline-color:var(--color-interaction-focus-ring)}
 
diff --git a/packages/ui/dist/styles/file-input.css b/packages/ui/dist/styles/file-input.css
index 4f85e9867..ce2a49780 100644
--- a/packages/ui/dist/styles/file-input.css
+++ b/packages/ui/dist/styles/file-input.css
@@ -8,7 +8,7 @@ j3w1-file-input {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-file-input, j3w1-file-input *, j3w1-file-input *::before, j3w1-file-input *::after { box-sizing: border-box; }
-j3w1-file-input button, j3w1-file-input input, j3w1-file-input select, j3w1-file-input textarea { font: inherit; }
+j3w1-file-input :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-file-input ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,192 @@ j3w1-file-input .sr-only {
   border: 0;
 }
 
+j3w1-file-input .button,
+j3w1-file-input .dialog-button,
+j3w1-file-input .empty-state-action,
+j3w1-file-input .file-input-button,
+j3w1-file-input button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-file-input .button,
+j3w1-file-input .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-file-input .button-secondary,
+j3w1-file-input .dialog-button,
+j3w1-file-input .empty-state-action,
+j3w1-file-input .file-input-button,
+j3w1-file-input button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-file-input .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-file-input .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-file-input .button-destructive-filled,
+j3w1-file-input .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-file-input :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-file-input .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-file-input :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-file-input :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-file-input :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-file-input .dialog-button,
+  j3w1-file-input .empty-state-action,
+  j3w1-file-input .file-input-button,
+  j3w1-file-input button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-file-input :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+j3w1-file-input .combobox-label,
+j3w1-file-input .dialog-field-label,
+j3w1-file-input .field-label,
+j3w1-file-input .fieldset-label,
+j3w1-file-input .file-input-label,
+j3w1-file-input .number-field-label,
+j3w1-file-input .search-field-label,
+j3w1-file-input .select-label,
+j3w1-file-input .text-field-label,
+j3w1-file-input .textarea-label,
+j3w1-file-input .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-file-input .combobox-help,
+j3w1-file-input .date-picker-help,
+j3w1-file-input .dialog-field-help,
+j3w1-file-input .fieldset-help,
+j3w1-file-input .file-input-help,
+j3w1-file-input .number-field-help,
+j3w1-file-input .search-field-help,
+j3w1-file-input .select-help,
+j3w1-file-input .text-field-help,
+j3w1-file-input .textarea-help,
+j3w1-file-input .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-file-input .combobox-message,
+j3w1-file-input .date-picker-message,
+j3w1-file-input .file-input-message,
+j3w1-file-input .number-field-message,
+j3w1-file-input .radio-group-message,
+j3w1-file-input .select-message,
+j3w1-file-input .text-field-message,
+j3w1-file-input .textarea-message,
+j3w1-file-input .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-file-input .combobox-root,
+j3w1-file-input .date-picker-root,
+j3w1-file-input .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-file-input .file-input {
   position: relative;
   display: grid;
@@ -34,12 +220,6 @@ j3w1-file-input .file-input {
   color: var(--color-text-default);
 }
 
-j3w1-file-input .file-input-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-file-input .file-input-root {
   position: relative;
   display: flex;
@@ -70,19 +250,6 @@ j3w1-file-input .file-input-native {
   border: 0;
 }
 
-j3w1-file-input .file-input-button {
-  display: inline-flex;
-  align-items: center;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  white-space: nowrap;
-  cursor: pointer;
-}
-
 j3w1-file-input .file-input-status {
   min-width: 0;
   color: var(--color-text-muted);
@@ -119,7 +286,7 @@ j3w1-file-input .file-input-item {
   grid-template-columns: minmax(0, 1fr) auto auto;
   align-items: center;
   column-gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
 }
 
@@ -162,29 +329,6 @@ j3w1-file-input .file-input-error {
   font-size: var(--font-size-ui-sm);
   line-height: var(--font-line-height-ui-sm);
 }
-
-j3w1-file-input .file-input-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-file-input .file-input-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-j3w1-file-input .file-input-button:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-j3w1-file-input .file-input-button:active {
-  background: var(--color-action-secondary-pressed-bg);
-  border-color: var(--color-border-active);
-}
 j3w1-file-input .file-input-root:has(.file-input-native:focus-visible) .file-input-button {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
@@ -210,9 +354,13 @@ j3w1-file-input .file-input-root:has(.file-input-native[aria-invalid="true"]:foc
   outline-offset: var(--focus-offset-invalid);
 }
 j3w1-file-input .file-input-root:has(.file-input-native:disabled) .file-input-button {
-  background: var(--color-interaction-disabled-bg);
-  border-color: var(--color-border-disabled);
-  color: var(--color-text-disabled);
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
   cursor: not-allowed;
 }
 
@@ -228,14 +376,7 @@ j3w1-file-input .file-input[aria-busy="true"] .file-input-progress {
   display: block;
 }
 
-@media (hover: none) {
-  j3w1-file-input .file-input-button:hover {
-    background: var(--color-action-secondary-bg);
-  }
-}
-
 @media (prefers-reduced-motion: no-preference) {
-  j3w1-file-input .file-input-button,
   j3w1-file-input .file-input-root {
     transition: background-color var(--motion-duration-fast);
   }
diff --git a/packages/ui/dist/styles/filterable-table.css b/packages/ui/dist/styles/filterable-table.css
index 0fea97a99..ef665025b 100644
--- a/packages/ui/dist/styles/filterable-table.css
+++ b/packages/ui/dist/styles/filterable-table.css
@@ -8,7 +8,7 @@ j3w1-filterable-table {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-filterable-table, j3w1-filterable-table *, j3w1-filterable-table *::before, j3w1-filterable-table *::after { box-sizing: border-box; }
-j3w1-filterable-table button, j3w1-filterable-table input, j3w1-filterable-table select, j3w1-filterable-table textarea { font: inherit; }
+j3w1-filterable-table :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-filterable-table ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -80,7 +80,7 @@ j3w1-filterable-table .filterable-table .filterable-table-new {
 j3w1-filterable-table .filterable-table-filters {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
   padding: 0 var(--space-8);
 }
@@ -166,7 +166,7 @@ j3w1-filterable-table .data-table .data-table-header {
   position: relative;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -182,7 +182,7 @@ j3w1-filterable-table .data-table tbody th { color: inherit; font-weight: var(--
 
 j3w1-filterable-table .data-table .data-table-header-select,
 j3w1-filterable-table .data-table .data-table-cell-select {
-  width: var(--density-control-height, 32px);
+  width: var(--density-control-height, 24px);
   padding-inline-end: 0;
   text-align: center;
 }
@@ -197,7 +197,7 @@ j3w1-filterable-table .data-table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -217,8 +217,8 @@ j3w1-filterable-table .data-table-checkbox {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   padding: 0;
   vertical-align: middle;
@@ -251,7 +251,7 @@ j3w1-filterable-table .data-table-select-all[aria-checked="mixed"] .data-table-c
 j3w1-filterable-table .data-table-checkbox:checked::before {
   content: "✓";
   color: var(--color-action-primary-text);
-  font-size: calc(var(--density-icon, 16px) * 0.75);
+  font-size: calc(var(--density-icon, 12px) * 0.75);
   line-height: 1;
 }
 
@@ -267,7 +267,7 @@ j3w1-filterable-table .data-table .data-table-body .data-table-row:first-child {
 
 j3w1-filterable-table .data-table .data-table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -339,7 +339,7 @@ j3w1-filterable-table .data-table .data-table-row[aria-selected="true"]:hover {
 }
 j3w1-filterable-table .data-table .data-table-row[aria-selected="true"]:focus-visible,
 j3w1-filterable-table .data-table .data-table-row:has(.data-table-checkbox:checked):focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-filterable-table .data-table .data-table-header[aria-sort="ascending"] .data-table-sort-glyph,
@@ -409,8 +409,8 @@ j3w1-filterable-table .menu-button {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -459,8 +459,8 @@ j3w1-filterable-table .menu-item {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -476,7 +476,7 @@ j3w1-filterable-table .menu-check {
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-text-bright);
   visibility: hidden;
 }
@@ -518,8 +518,8 @@ j3w1-filterable-table .menu-button:focus-visible {
 }
 
 j3w1-filterable-table .menu-item:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 j3w1-filterable-table .menu-button:focus:not(:focus-visible),
@@ -599,15 +599,15 @@ j3w1-filterable-table .menu-item[aria-disabled="true"]:hover {
 }
 
 j3w1-filterable-table :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-filterable-table .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-filterable-table .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-filterable-table .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-filterable-table .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-filterable-table .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-filterable-table .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-filterable-table .j3w1-temporal :focus-visible,j3w1-filterable-table .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -631,7 +631,7 @@ j3w1-filterable-table .j3w1-calendar [aria-pressed="true"] { background:var(--co
 j3w1-filterable-table .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-filterable-table .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-filterable-table .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-filterable-table .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-filterable-table .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-filterable-table .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-filterable-table .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-filterable-table .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -639,7 +639,7 @@ j3w1-filterable-table .j3w1-choice-trigger:focus-visible,j3w1-filterable-table .
 j3w1-filterable-table .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-filterable-table .j3w1-choice-list[popover] { inset: auto; }
 j3w1-filterable-table .j3w1-choice-list[hidden] { display: none; }
-j3w1-filterable-table .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-filterable-table .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-filterable-table .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-filterable-table .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-filterable-table .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -653,19 +653,79 @@ j3w1-filterable-table .j3w1-choice-error { display: block; color: var(--color-st
 j3w1-filterable-table .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-filterable-table .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-filterable-table :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-filterable-table :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-filterable-table input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-filterable-table input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+
+j3w1-filterable-table .combobox-label,
+j3w1-filterable-table .dialog-field-label,
+j3w1-filterable-table .field-label,
+j3w1-filterable-table .fieldset-label,
+j3w1-filterable-table .file-input-label,
+j3w1-filterable-table .number-field-label,
+j3w1-filterable-table .search-field-label,
+j3w1-filterable-table .select-label,
+j3w1-filterable-table .text-field-label,
+j3w1-filterable-table .textarea-label,
+j3w1-filterable-table .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-filterable-table .combobox-help,
+j3w1-filterable-table .date-picker-help,
+j3w1-filterable-table .dialog-field-help,
+j3w1-filterable-table .fieldset-help,
+j3w1-filterable-table .file-input-help,
+j3w1-filterable-table .number-field-help,
+j3w1-filterable-table .search-field-help,
+j3w1-filterable-table .select-help,
+j3w1-filterable-table .text-field-help,
+j3w1-filterable-table .textarea-help,
+j3w1-filterable-table .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-filterable-table .combobox-message,
+j3w1-filterable-table .date-picker-message,
+j3w1-filterable-table .file-input-message,
+j3w1-filterable-table .number-field-message,
+j3w1-filterable-table .radio-group-message,
+j3w1-filterable-table .select-message,
+j3w1-filterable-table .text-field-message,
+j3w1-filterable-table .textarea-message,
+j3w1-filterable-table .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-filterable-table .combobox-root,
+j3w1-filterable-table .date-picker-root,
+j3w1-filterable-table .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
 
 j3w1-filterable-table .select {
   position: relative;
@@ -676,12 +736,6 @@ j3w1-filterable-table .select {
   color: var(--color-text-default);
 }
 
-j3w1-filterable-table .select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-filterable-table .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -691,7 +745,7 @@ j3w1-filterable-table .select-root {
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -702,8 +756,8 @@ j3w1-filterable-table .select-control {
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -728,8 +782,8 @@ j3w1-filterable-table .select-control optgroup {
 }
 
 j3w1-filterable-table .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 j3w1-filterable-table .select-control optgroup {
@@ -743,7 +797,7 @@ j3w1-filterable-table .select-control option:checked {
 
 j3w1-filterable-table .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -752,21 +806,6 @@ j3w1-filterable-table .select-chevron {
   fill: none;
   pointer-events: none;
 }
-
-j3w1-filterable-table .select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-filterable-table .select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-filterable-table .select-root:hover {
     background: var(--color-interaction-hover-bg);
@@ -860,7 +899,7 @@ j3w1-filterable-table .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -882,7 +921,7 @@ j3w1-filterable-table .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -914,7 +953,7 @@ j3w1-filterable-table .table .table-body .table-row:first-child {
 
 j3w1-filterable-table .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -951,6 +990,21 @@ j3w1-filterable-table .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-filterable-table .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-filterable-table .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-filterable-table .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-filterable-table .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -972,7 +1026,7 @@ j3w1-filterable-table .table-row[aria-selected="true"]:hover {
 }
 j3w1-filterable-table .table-row[aria-selected="true"]:focus-visible,
 j3w1-filterable-table .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-filterable-table .table[data-container-inactive] .table-row[aria-selected="true"] {
@@ -1036,16 +1090,10 @@ j3w1-filterable-table .search-field {
   color: var(--color-text-default);
 }
 
-j3w1-filterable-table .search-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-filterable-table .search-field-root {
   display: flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding-inline-start: var(--space-8);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
@@ -1137,13 +1185,6 @@ j3w1-filterable-table .search-field-kbd {
   line-height: var(--font-line-height-ui-sm);
 }
 
-j3w1-filterable-table .search-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-filterable-table .search-field-status {
   display: none;
   margin: 0;
diff --git a/packages/ui/dist/styles/form-builder.css b/packages/ui/dist/styles/form-builder.css
index 64ef3f725..543ccd27e 100644
--- a/packages/ui/dist/styles/form-builder.css
+++ b/packages/ui/dist/styles/form-builder.css
@@ -8,7 +8,7 @@ j3w1-form-builder {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-form-builder, j3w1-form-builder *, j3w1-form-builder *::before, j3w1-form-builder *::after { box-sizing: border-box; }
-j3w1-form-builder button, j3w1-form-builder input, j3w1-form-builder select, j3w1-form-builder textarea { font: inherit; }
+j3w1-form-builder :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-form-builder ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -28,27 +28,24 @@ j3w1-form-builder .sr-only {
 j3w1-form-builder .form-builder { min-inline-size: 0; max-inline-size: calc(var(--font-size-ui-md) * 56); padding: var(--space-16); background: var(--color-surface-default); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-control); }
 j3w1-form-builder .form-builder-status { color: var(--color-text-muted); }
 j3w1-form-builder .form-builder-editor { display: grid; gap: var(--space-8); }
+j3w1-form-builder .form-builder-editor > .button { justify-self: start; }
 j3w1-form-builder .form-builder-editor label { display: grid; gap: var(--space-4); }
 j3w1-form-builder .form-builder-editor :is(input:not([type=checkbox]), textarea, select) { inline-size: 100%; min-inline-size: 0; box-sizing: border-box; background: var(--color-surface-input); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-control); padding: var(--space-8); font: inherit; }
 j3w1-form-builder .form-builder-editor label:has(input[type=checkbox]) { display: flex; }
 j3w1-form-builder .form-builder-list { padding-inline-start: var(--space-24); }
 j3w1-form-builder .form-builder-list li { margin-block: var(--space-16); overflow-wrap: anywhere; }
 
-j3w1-form-builder .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+j3w1-form-builder .button,
+j3w1-form-builder .dialog-button,
+j3w1-form-builder .empty-state-action,
+j3w1-form-builder .file-input-button,
+j3w1-form-builder button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -61,8 +58,23 @@ j3w1-form-builder .button {
   cursor: pointer;
   outline: 0;
 }
+j3w1-form-builder .button,
+j3w1-form-builder .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-j3w1-form-builder .button-secondary {
+j3w1-form-builder .button-secondary,
+j3w1-form-builder .dialog-button,
+j3w1-form-builder .empty-state-action,
+j3w1-form-builder .file-input-button,
+j3w1-form-builder button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -94,7 +106,8 @@ j3w1-form-builder .button-destructive {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-j3w1-form-builder .button-destructive-filled {
+j3w1-form-builder .button-destructive-filled,
+j3w1-form-builder .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -104,6 +117,49 @@ j3w1-form-builder .button-destructive-filled {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  j3w1-form-builder :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-form-builder .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-form-builder :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-form-builder :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-form-builder :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-form-builder .dialog-button,
+  j3w1-form-builder .empty-state-action,
+  j3w1-form-builder .file-input-button,
+  j3w1-form-builder button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-form-builder :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 j3w1-form-builder .button-icon {
   flex: none;
@@ -121,25 +177,6 @@ j3w1-form-builder .button-loading {
 j3w1-form-builder .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-form-builder .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-form-builder .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-form-builder .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-form-builder .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-form-builder .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -151,16 +188,6 @@ j3w1-form-builder .button[aria-busy="true"] .button-icon {
 j3w1-form-builder .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-form-builder .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-form-builder .button {
@@ -169,9 +196,66 @@ j3w1-form-builder .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-form-builder .button:focus-visible {
-    outline-color: Highlight;
-  }
+}
+
+j3w1-form-builder .combobox-label,
+j3w1-form-builder .dialog-field-label,
+j3w1-form-builder .field-label,
+j3w1-form-builder .fieldset-label,
+j3w1-form-builder .file-input-label,
+j3w1-form-builder .number-field-label,
+j3w1-form-builder .search-field-label,
+j3w1-form-builder .select-label,
+j3w1-form-builder .text-field-label,
+j3w1-form-builder .textarea-label,
+j3w1-form-builder .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-form-builder .combobox-help,
+j3w1-form-builder .date-picker-help,
+j3w1-form-builder .dialog-field-help,
+j3w1-form-builder .fieldset-help,
+j3w1-form-builder .file-input-help,
+j3w1-form-builder .number-field-help,
+j3w1-form-builder .search-field-help,
+j3w1-form-builder .select-help,
+j3w1-form-builder .text-field-help,
+j3w1-form-builder .textarea-help,
+j3w1-form-builder .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-form-builder .combobox-message,
+j3w1-form-builder .date-picker-message,
+j3w1-form-builder .file-input-message,
+j3w1-form-builder .number-field-message,
+j3w1-form-builder .radio-group-message,
+j3w1-form-builder .select-message,
+j3w1-form-builder .text-field-message,
+j3w1-form-builder .textarea-message,
+j3w1-form-builder .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-form-builder .combobox-root,
+j3w1-form-builder .date-picker-root,
+j3w1-form-builder .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
 }
 
 j3w1-form-builder .text-field {
@@ -183,12 +267,6 @@ j3w1-form-builder .text-field {
   color: var(--color-text-default);
 }
 
-j3w1-form-builder .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-form-builder .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -198,7 +276,7 @@ j3w1-form-builder .text-field-root {
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -207,7 +285,7 @@ j3w1-form-builder .text-field-root {
 j3w1-form-builder .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -283,21 +361,6 @@ j3w1-form-builder .text-field-loading {
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-j3w1-form-builder .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-form-builder .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-form-builder .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -381,12 +444,6 @@ j3w1-form-builder .textarea {
   color: var(--color-text-default);
 }
 
-j3w1-form-builder .textarea-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-form-builder .textarea-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -404,8 +461,8 @@ j3w1-form-builder .textarea-input {
   display: block;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) * 2);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) * 2);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -435,21 +492,6 @@ j3w1-form-builder .textarea-count {
   line-height: var(--font-line-height-ui-sm);
   font-variant-numeric: tabular-nums;
 }
-
-j3w1-form-builder .textarea-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-form-builder .textarea-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-form-builder .textarea-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -535,15 +577,15 @@ j3w1-form-builder .textarea-root:has(.textarea-input:read-only:focus-visible) {
 }
 
 j3w1-form-builder :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-form-builder :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-form-builder :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-form-builder :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-form-builder :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-form-builder :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-form-builder :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-form-builder :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-form-builder :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-form-builder .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-form-builder .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-form-builder .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-form-builder .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-form-builder .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-form-builder .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-form-builder .j3w1-temporal :focus-visible,j3w1-form-builder .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -567,7 +609,7 @@ j3w1-form-builder .j3w1-calendar [aria-pressed="true"] { background:var(--color-
 j3w1-form-builder .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-form-builder .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-form-builder .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-form-builder .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-form-builder .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-form-builder .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-form-builder .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-form-builder .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -575,7 +617,7 @@ j3w1-form-builder .j3w1-choice-trigger:focus-visible,j3w1-form-builder .j3w1-cho
 j3w1-form-builder .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-form-builder .j3w1-choice-list[popover] { inset: auto; }
 j3w1-form-builder .j3w1-choice-list[hidden] { display: none; }
-j3w1-form-builder .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-form-builder .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-form-builder .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-form-builder .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-form-builder .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -589,19 +631,19 @@ j3w1-form-builder .j3w1-choice-error { display: block; color: var(--color-status
 j3w1-form-builder .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-form-builder .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-form-builder :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-form-builder :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-form-builder input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-form-builder input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
 
 j3w1-form-builder .select {
   position: relative;
@@ -612,12 +654,6 @@ j3w1-form-builder .select {
   color: var(--color-text-default);
 }
 
-j3w1-form-builder .select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-form-builder .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -627,7 +663,7 @@ j3w1-form-builder .select-root {
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -638,8 +674,8 @@ j3w1-form-builder .select-control {
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -664,8 +700,8 @@ j3w1-form-builder .select-control optgroup {
 }
 
 j3w1-form-builder .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 j3w1-form-builder .select-control optgroup {
@@ -679,7 +715,7 @@ j3w1-form-builder .select-control option:checked {
 
 j3w1-form-builder .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -688,21 +724,6 @@ j3w1-form-builder .select-chevron {
   fill: none;
   pointer-events: none;
 }
-
-j3w1-form-builder .select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-form-builder .select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-form-builder .select-root:hover {
     background: var(--color-interaction-hover-bg);
@@ -790,7 +811,7 @@ j3w1-form-builder .checkbox-required {
 
 j3w1-form-builder .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -800,8 +821,8 @@ j3w1-form-builder .checkbox-option {
 
 j3w1-form-builder .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -811,8 +832,8 @@ j3w1-form-builder .checkbox-control > * {
 
 j3w1-form-builder .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -824,8 +845,8 @@ j3w1-form-builder .checkbox-input {
 j3w1-form-builder .checkbox-check,
 j3w1-form-builder .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
@@ -964,7 +985,7 @@ j3w1-form-builder .radio-group-horizontal .radio-group-options {
 
 j3w1-form-builder .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -974,8 +995,8 @@ j3w1-form-builder .radio-group-option {
 
 j3w1-form-builder .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 j3w1-form-builder .radio-group-control > * {
@@ -984,8 +1005,8 @@ j3w1-form-builder .radio-group-control > * {
 
 j3w1-form-builder .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -1007,14 +1028,6 @@ j3w1-form-builder .radio-group-text {
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
-
-j3w1-form-builder .radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-form-builder .radio-group-option:hover .radio-group-input:not(:disabled) {
     background: var(--color-interaction-hover-bg);
@@ -1219,7 +1232,7 @@ j3w1-form-builder .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -1241,7 +1254,7 @@ j3w1-form-builder .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -1273,7 +1286,7 @@ j3w1-form-builder .table .table-body .table-row:first-child {
 
 j3w1-form-builder .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -1310,6 +1323,21 @@ j3w1-form-builder .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-form-builder .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-form-builder .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-form-builder .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-form-builder .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -1331,7 +1359,7 @@ j3w1-form-builder .table-row[aria-selected="true"]:hover {
 }
 j3w1-form-builder .table-row[aria-selected="true"]:focus-visible,
 j3w1-form-builder .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-form-builder .table[data-container-inactive] .table-row[aria-selected="true"] {
@@ -1492,12 +1520,6 @@ j3w1-form-builder .field {
   color: var(--color-text-default);
 }
 
-j3w1-form-builder .field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-form-builder .field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -1510,8 +1532,8 @@ j3w1-form-builder .field-control {
 
 j3w1-form-builder .field-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -1706,6 +1728,9 @@ j3w1-form-builder .form-tool { inline-size: 100%; max-inline-size: calc(var(--fo
 j3w1-form-builder .form-tool[hidden], j3w1-form-builder .form-tool [hidden] { display: none !important; }
 j3w1-form-builder .form-tool fieldset { min-inline-size: 0; }
 j3w1-form-builder .form-tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block: var(--space-16); }
+j3w1-form-builder .admin-form.form-tool form { display: grid; gap: var(--space-16); }
+j3w1-form-builder .admin-form.form-tool .form-tool-actions { margin-block: 0; }
+j3w1-form-builder .admin-form.form-tool > [data-status]:empty { position: absolute; }
 j3w1-form-builder .form-tool-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); border: 0; padding: 0; margin: 0; }
 j3w1-form-builder .form-field-help { color: var(--color-text-muted); margin: 0; font-size: var(--font-size-ui-sm); }
 j3w1-form-builder .form-tool-summary { margin-block: var(--space-4); }
diff --git a/packages/ui/dist/styles/i3-window-frame.css b/packages/ui/dist/styles/i3-window-frame.css
index 7b235db43..18e9d96dd 100644
--- a/packages/ui/dist/styles/i3-window-frame.css
+++ b/packages/ui/dist/styles/i3-window-frame.css
@@ -8,7 +8,7 @@ j3w1-i3-window-frame {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-i3-window-frame, j3w1-i3-window-frame *, j3w1-i3-window-frame *::before, j3w1-i3-window-frame *::after { box-sizing: border-box; }
-j3w1-i3-window-frame button, j3w1-i3-window-frame input, j3w1-i3-window-frame select, j3w1-i3-window-frame textarea { font: inherit; }
+j3w1-i3-window-frame :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-i3-window-frame ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -98,7 +98,7 @@ j3w1-i3-window-frame .i3-window-frame-workspace:focus-visible {
 }
 
 j3w1-i3-window-frame .i3-window-frame-workspace[aria-selected="true"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 
 j3w1-i3-window-frame .i3-window-frame-workspace:focus:not(:focus-visible) {
@@ -523,6 +523,10 @@ j3w1-i3-window-frame .code-editor-ws {
   color: var(--color-code-whitespace);
 }
 
+j3w1-i3-window-frame .code-editor-ws::before {
+  content: attr(data-whitespace);
+}
+
 j3w1-i3-window-frame .code-editor-fold {
   display: inline-block;
   padding: 0 var(--space-4);
@@ -606,7 +610,7 @@ j3w1-i3-window-frame .tabs {
 
 j3w1-i3-window-frame .tabs-list {
   display: flex;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
@@ -617,8 +621,8 @@ j3w1-i3-window-frame .tabs-list {
 
 j3w1-i3-window-frame .tabs-tab {
   flex: 0 0 auto;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin-bottom: calc(-1 * var(--border-width-default));
   background: transparent;
   border: 0;
diff --git a/packages/ui/dist/styles/icon-button.css b/packages/ui/dist/styles/icon-button.css
index 7c2fe5dd6..cbb520cb4 100644
--- a/packages/ui/dist/styles/icon-button.css
+++ b/packages/ui/dist/styles/icon-button.css
@@ -8,7 +8,7 @@ j3w1-icon-button {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-icon-button, j3w1-icon-button *, j3w1-icon-button *::before, j3w1-icon-button *::after { box-sizing: border-box; }
-j3w1-icon-button button, j3w1-icon-button input, j3w1-icon-button select, j3w1-icon-button textarea { font: inherit; }
+j3w1-icon-button :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-icon-button ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -29,8 +29,8 @@ j3w1-icon-button .icon-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--density-control-height, 32px);
-  height: var(--density-control-height, 32px);
+  width: var(--density-control-height, 24px);
+  height: var(--density-control-height, 24px);
   padding: 0;
   margin: 0;
   background: var(--color-action-secondary-bg);
@@ -73,7 +73,7 @@ j3w1-icon-button .icon-button[aria-pressed="true"] .icon-button-icon {
   fill: currentColor;
 }
 j3w1-icon-button .icon-button[aria-pressed="true"]:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-icon-button .icon-button:disabled {
diff --git a/packages/ui/dist/styles/kbd.css b/packages/ui/dist/styles/kbd.css
index 7de90e54e..81e2d7cd7 100644
--- a/packages/ui/dist/styles/kbd.css
+++ b/packages/ui/dist/styles/kbd.css
@@ -8,7 +8,7 @@ j3w1-kbd {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-kbd, j3w1-kbd *, j3w1-kbd *::before, j3w1-kbd *::after { box-sizing: border-box; }
-j3w1-kbd button, j3w1-kbd input, j3w1-kbd select, j3w1-kbd textarea { font: inherit; }
+j3w1-kbd :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-kbd ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,8 @@ j3w1-kbd .sr-only {
   border: 0;
 }
 
-j3w1-kbd .kbd {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-kbd .kbd :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-j3w1-kbd .kbd {display:inline-block;min-width:1.5em;text-align:center;padding:var(--space-2) var(--space-4);font:inherit;border-bottom-width:var(--border-width-emphasis)}
+j3w1-kbd .kbd {box-sizing:border-box;display:inline-block;gap:var(--space-12);min-width:1.5em;padding:var(--space-2) var(--space-4);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;text-align:center;border-bottom-width:var(--border-width-emphasis)}
+j3w1-kbd .kbd :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 
 j3w1-kbd [hidden] { display: none !important; }
 j3w1-kbd .j3w1-visually-hidden {
diff --git a/packages/ui/dist/styles/link.css b/packages/ui/dist/styles/link.css
index 595a1ce5d..e1dac7fb5 100644
--- a/packages/ui/dist/styles/link.css
+++ b/packages/ui/dist/styles/link.css
@@ -8,7 +8,7 @@ j3w1-link {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-link, j3w1-link *, j3w1-link *::before, j3w1-link *::after { box-sizing: border-box; }
-j3w1-link button, j3w1-link input, j3w1-link select, j3w1-link textarea { font: inherit; }
+j3w1-link :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-link ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -49,7 +49,7 @@ j3w1-link .link-standalone {
   align-items: center;
   gap: var(--space-4);
   padding: 0 var(--space-4);
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
@@ -63,7 +63,7 @@ j3w1-link .link-icon {
 }
 @media (hover: hover) {
   j3w1-link .link:hover {
-    background: var(--color-interaction-hover-bg-strong);
+    background: var(--color-interaction-hover-bg);
     color: var(--color-text-link-hover);
     text-decoration-color: currentColor;
     text-decoration-thickness: var(--border-width-emphasis);
diff --git a/packages/ui/dist/styles/list.css b/packages/ui/dist/styles/list.css
index 4f55fe324..30ac632c7 100644
--- a/packages/ui/dist/styles/list.css
+++ b/packages/ui/dist/styles/list.css
@@ -8,7 +8,7 @@ j3w1-list {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-list, j3w1-list *, j3w1-list *::before, j3w1-list *::after { box-sizing: border-box; }
-j3w1-list button, j3w1-list input, j3w1-list select, j3w1-list textarea { font: inherit; }
+j3w1-list :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-list ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -41,8 +41,8 @@ j3w1-list .list-option {
   display: flex;
   align-items: center;
   gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-2) var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-2) var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   border-top: var(--border-width-default) solid var(--color-border-divider);
   color: var(--color-text-default);
@@ -57,7 +57,7 @@ j3w1-list .list-check {
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-interaction-selection-text);
   visibility: hidden;
 }
@@ -104,7 +104,7 @@ j3w1-list .list-option[aria-selected="true"]:hover {
   background: var(--color-interaction-selection-bg);
 }
 j3w1-list .list-option[aria-selected="true"]:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-list .list[data-container-inactive] .list-option[aria-selected="true"] {
diff --git a/packages/ui/dist/styles/loading-indicator.css b/packages/ui/dist/styles/loading-indicator.css
index 5a1253df8..9354b4ab1 100644
--- a/packages/ui/dist/styles/loading-indicator.css
+++ b/packages/ui/dist/styles/loading-indicator.css
@@ -8,7 +8,7 @@ j3w1-loading-indicator {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-loading-indicator, j3w1-loading-indicator *, j3w1-loading-indicator *::before, j3w1-loading-indicator *::after { box-sizing: border-box; }
-j3w1-loading-indicator button, j3w1-loading-indicator input, j3w1-loading-indicator select, j3w1-loading-indicator textarea { font: inherit; }
+j3w1-loading-indicator :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-loading-indicator ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -44,7 +44,7 @@ j3w1-loading-indicator .loading-indicator-block {
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: calc(3 * var(--density-row-height, 36px));
+  min-height: calc(3 * var(--density-row-height, 28px));
   padding: var(--space-16);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-divider);
diff --git a/packages/ui/dist/styles/menu.css b/packages/ui/dist/styles/menu.css
index 633cc4b10..662d11914 100644
--- a/packages/ui/dist/styles/menu.css
+++ b/packages/ui/dist/styles/menu.css
@@ -8,7 +8,7 @@ j3w1-menu {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-menu, j3w1-menu *, j3w1-menu *::before, j3w1-menu *::after { box-sizing: border-box; }
-j3w1-menu button, j3w1-menu input, j3w1-menu select, j3w1-menu textarea { font: inherit; }
+j3w1-menu :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-menu ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -37,8 +37,8 @@ j3w1-menu .menu-button {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -87,8 +87,8 @@ j3w1-menu .menu-item {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -104,7 +104,7 @@ j3w1-menu .menu-check {
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-text-bright);
   visibility: hidden;
 }
@@ -146,8 +146,8 @@ j3w1-menu .menu-button:focus-visible {
 }
 
 j3w1-menu .menu-item:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 j3w1-menu .menu-button:focus:not(:focus-visible),
diff --git a/packages/ui/dist/styles/multiselect.css b/packages/ui/dist/styles/multiselect.css
index 42b330fcf..82a284ae7 100644
--- a/packages/ui/dist/styles/multiselect.css
+++ b/packages/ui/dist/styles/multiselect.css
@@ -8,7 +8,7 @@ j3w1-multiselect {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-multiselect, j3w1-multiselect *, j3w1-multiselect *::before, j3w1-multiselect *::after { box-sizing: border-box; }
-j3w1-multiselect button, j3w1-multiselect input, j3w1-multiselect select, j3w1-multiselect textarea { font: inherit; }
+j3w1-multiselect :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-multiselect ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -51,7 +51,7 @@ j3w1-multiselect .checkbox-required {
 
 j3w1-multiselect .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -61,8 +61,8 @@ j3w1-multiselect .checkbox-option {
 
 j3w1-multiselect .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -72,8 +72,8 @@ j3w1-multiselect .checkbox-control > * {
 
 j3w1-multiselect .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -85,8 +85,8 @@ j3w1-multiselect .checkbox-input {
 j3w1-multiselect .checkbox-check,
 j3w1-multiselect .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
@@ -187,11 +187,136 @@ j3w1-multiselect .checkbox:disabled .checkbox-legend {
   }
 }
 
+j3w1-multiselect .button,
+j3w1-multiselect .dialog-button,
+j3w1-multiselect .empty-state-action,
+j3w1-multiselect .file-input-button,
+j3w1-multiselect button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-multiselect .button,
+j3w1-multiselect .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-multiselect .button-secondary,
+j3w1-multiselect .dialog-button,
+j3w1-multiselect .empty-state-action,
+j3w1-multiselect .file-input-button,
+j3w1-multiselect button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-multiselect .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-multiselect .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-multiselect .button-destructive-filled,
+j3w1-multiselect .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-multiselect :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-multiselect .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-multiselect :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-multiselect :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-multiselect :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-multiselect .dialog-button,
+  j3w1-multiselect .empty-state-action,
+  j3w1-multiselect .file-input-button,
+  j3w1-multiselect button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-multiselect :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-multiselect .multiselect {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-multiselect .multiselect-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-multiselect .multiselect :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-multiselect .multiselect :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-multiselect .multiselect :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-j3w1-multiselect .multiselect-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 j3w1-multiselect .multiselect [data-options] {display:grid;gap:var(--space-8)}j3w1-multiselect .multiselect label {display:flex;gap:var(--space-8);align-items:center;min-height:var(--density-control-height)}j3w1-multiselect .multiselect input[type=checkbox] {accent-color:var(--color-action-primary-bg)}j3w1-multiselect .multiselect label:has(:checked) {border-inline-start:var(--border-width-emphasis) solid var(--color-border-active)}j3w1-multiselect .multiselect [data-selection-status] {color:var(--color-text-muted)}
 
 j3w1-multiselect [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/number-field.css b/packages/ui/dist/styles/number-field.css
index cfe0753fc..6a4c5f21d 100644
--- a/packages/ui/dist/styles/number-field.css
+++ b/packages/ui/dist/styles/number-field.css
@@ -8,7 +8,7 @@ j3w1-number-field {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-number-field, j3w1-number-field *, j3w1-number-field *::before, j3w1-number-field *::after { box-sizing: border-box; }
-j3w1-number-field button, j3w1-number-field input, j3w1-number-field select, j3w1-number-field textarea { font: inherit; }
+j3w1-number-field :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-number-field ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,15 +26,15 @@ j3w1-number-field .sr-only {
 }
 
 j3w1-number-field :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-number-field :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-number-field :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-number-field :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-number-field :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-number-field :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-number-field :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-number-field :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-number-field :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-number-field .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-number-field .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-number-field .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-number-field .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-number-field .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-number-field .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-number-field .j3w1-temporal :focus-visible,j3w1-number-field .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -58,7 +58,7 @@ j3w1-number-field .j3w1-calendar [aria-pressed="true"] { background:var(--color-
 j3w1-number-field .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-number-field .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-number-field .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-number-field .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-number-field .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-number-field .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-number-field .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-number-field .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -66,7 +66,7 @@ j3w1-number-field .j3w1-choice-trigger:focus-visible,j3w1-number-field .j3w1-cho
 j3w1-number-field .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-number-field .j3w1-choice-list[popover] { inset: auto; }
 j3w1-number-field .j3w1-choice-list[hidden] { display: none; }
-j3w1-number-field .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-number-field .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-number-field .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-number-field .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-number-field .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -80,48 +80,93 @@ j3w1-number-field .j3w1-choice-error { display: block; color: var(--color-status
 j3w1-number-field .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-number-field .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-number-field :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-number-field input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-number-field :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-number-field input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-number-field input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
 
-j3w1-number-field .number-field {
-  position: relative;
-  display: grid;
-  gap: var(--space-4);
-  min-width: 0;
-  max-width: calc(var(--font-size-ui-md) * 20);
-  color: var(--color-text-default);
+j3w1-number-field .combobox-label,
+j3w1-number-field .dialog-field-label,
+j3w1-number-field .field-label,
+j3w1-number-field .fieldset-label,
+j3w1-number-field .file-input-label,
+j3w1-number-field .number-field-label,
+j3w1-number-field .search-field-label,
+j3w1-number-field .select-label,
+j3w1-number-field .text-field-label,
+j3w1-number-field .textarea-label,
+j3w1-number-field .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
 }
 
-j3w1-number-field .number-field-label {
-  color: var(--color-text-bright);
+j3w1-number-field .combobox-help,
+j3w1-number-field .date-picker-help,
+j3w1-number-field .dialog-field-help,
+j3w1-number-field .fieldset-help,
+j3w1-number-field .file-input-help,
+j3w1-number-field .number-field-help,
+j3w1-number-field .search-field-help,
+j3w1-number-field .select-help,
+j3w1-number-field .text-field-help,
+j3w1-number-field .textarea-help,
+j3w1-number-field .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-number-field .combobox-message,
+j3w1-number-field .date-picker-message,
+j3w1-number-field .file-input-message,
+j3w1-number-field .number-field-message,
+j3w1-number-field .radio-group-message,
+j3w1-number-field .select-message,
+j3w1-number-field .text-field-message,
+j3w1-number-field .textarea-message,
+j3w1-number-field .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
   font-size: var(--font-size-ui-sm);
   line-height: var(--font-line-height-ui-sm);
 }
 
+j3w1-number-field .combobox-root,
+j3w1-number-field .date-picker-root,
 j3w1-number-field .number-field-root {
   display: flex;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
 }
 
+j3w1-number-field .number-field {
+  position: relative;
+  display: grid;
+  gap: var(--space-4);
+  min-width: 0;
+  max-width: calc(var(--font-size-ui-md) * 20);
+  color: var(--color-text-default);
+}
+
 j3w1-number-field .number-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -177,21 +222,6 @@ j3w1-number-field .number-field-action {
 j3w1-number-field .number-field-action + .number-field-action {
   border-top: var(--border-width-default) solid var(--color-border-divider);
 }
-
-j3w1-number-field .number-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-number-field .number-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-number-field .number-field-root:hover {
     background: var(--color-interaction-hover-bg);
diff --git a/packages/ui/dist/styles/pagination.css b/packages/ui/dist/styles/pagination.css
index 6dd76ee87..ac67bb50b 100644
--- a/packages/ui/dist/styles/pagination.css
+++ b/packages/ui/dist/styles/pagination.css
@@ -8,7 +8,7 @@ j3w1-pagination {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-pagination, j3w1-pagination *, j3w1-pagination *::before, j3w1-pagination *::after { box-sizing: border-box; }
-j3w1-pagination button, j3w1-pagination input, j3w1-pagination select, j3w1-pagination textarea { font: inherit; }
+j3w1-pagination :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-pagination ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -35,7 +35,7 @@ j3w1-pagination .pagination-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -54,8 +54,8 @@ j3w1-pagination .pagination-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-8);
   background: transparent;
   border-radius: var(--radius-none);
@@ -66,7 +66,7 @@ j3w1-pagination .pagination-link {
 }
 
 j3w1-pagination .pagination-edge {
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
 }
 
 j3w1-pagination .pagination-glyph {
@@ -77,8 +77,8 @@ j3w1-pagination .pagination-gap {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
   color: var(--color-text-muted);
   user-select: none;
 }
@@ -86,7 +86,7 @@ j3w1-pagination .pagination-gap {
 j3w1-pagination .pagination-status {
   display: inline-flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-8);
   color: var(--color-text-default);
   font-variant-numeric: tabular-nums;
@@ -122,7 +122,7 @@ j3w1-pagination .pagination-link[aria-current="page"]:hover {
 }
 
 j3w1-pagination .pagination-link[aria-current="page"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 j3w1-pagination .pagination-link[aria-disabled="true"] {
   color: var(--color-text-disabled);
diff --git a/packages/ui/dist/styles/popover.css b/packages/ui/dist/styles/popover.css
index 04d0fd9e3..0c3e40a03 100644
--- a/packages/ui/dist/styles/popover.css
+++ b/packages/ui/dist/styles/popover.css
@@ -8,7 +8,7 @@ j3w1-popover {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-popover, j3w1-popover *, j3w1-popover *::before, j3w1-popover *::after { box-sizing: border-box; }
-j3w1-popover button, j3w1-popover input, j3w1-popover select, j3w1-popover textarea { font: inherit; }
+j3w1-popover :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-popover ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,135 @@ j3w1-popover .sr-only {
   border: 0;
 }
 
+j3w1-popover .button,
+j3w1-popover .dialog-button,
+j3w1-popover .empty-state-action,
+j3w1-popover .file-input-button,
+j3w1-popover button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-popover .button,
+j3w1-popover .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-popover .button-secondary,
+j3w1-popover .dialog-button,
+j3w1-popover .empty-state-action,
+j3w1-popover .file-input-button,
+j3w1-popover button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-popover .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-popover .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-popover .button-destructive-filled,
+j3w1-popover .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-popover :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-popover .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-popover :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-popover :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-popover :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-popover .dialog-button,
+  j3w1-popover .empty-state-action,
+  j3w1-popover .file-input-button,
+  j3w1-popover button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-popover :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-popover .popover {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-popover .popover-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-popover .popover :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-popover .popover :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-popover .popover-panel {padding:var(--space-16);max-width:min(calc(var(--font-size-ui-md) * 24),90vw);background:var(--color-surface-overlay);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-overlay);border-radius:var(--radius-none);margin:0}j3w1-popover .popover-panel::backdrop {background:transparent}j3w1-popover .popover-panel[hidden] {display:none}
 
 j3w1-popover [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/progress.css b/packages/ui/dist/styles/progress.css
index e52e21a69..500205e3a 100644
--- a/packages/ui/dist/styles/progress.css
+++ b/packages/ui/dist/styles/progress.css
@@ -8,7 +8,7 @@ j3w1-progress {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-progress, j3w1-progress *, j3w1-progress *::before, j3w1-progress *::after { box-sizing: border-box; }
-j3w1-progress button, j3w1-progress input, j3w1-progress select, j3w1-progress textarea { font: inherit; }
+j3w1-progress :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-progress ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/packages/ui/dist/styles/radio-group.css b/packages/ui/dist/styles/radio-group.css
index a416e16f3..7dd7c53a5 100644
--- a/packages/ui/dist/styles/radio-group.css
+++ b/packages/ui/dist/styles/radio-group.css
@@ -8,7 +8,7 @@ j3w1-radio-group {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-radio-group, j3w1-radio-group *, j3w1-radio-group *::before, j3w1-radio-group *::after { box-sizing: border-box; }
-j3w1-radio-group button, j3w1-radio-group input, j3w1-radio-group select, j3w1-radio-group textarea { font: inherit; }
+j3w1-radio-group :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-radio-group ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-radio-group .sr-only {
   border: 0;
 }
 
+j3w1-radio-group .combobox-label,
+j3w1-radio-group .dialog-field-label,
+j3w1-radio-group .field-label,
+j3w1-radio-group .fieldset-label,
+j3w1-radio-group .file-input-label,
+j3w1-radio-group .number-field-label,
+j3w1-radio-group .search-field-label,
+j3w1-radio-group .select-label,
+j3w1-radio-group .text-field-label,
+j3w1-radio-group .textarea-label,
+j3w1-radio-group .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-radio-group .combobox-help,
+j3w1-radio-group .date-picker-help,
+j3w1-radio-group .dialog-field-help,
+j3w1-radio-group .fieldset-help,
+j3w1-radio-group .file-input-help,
+j3w1-radio-group .number-field-help,
+j3w1-radio-group .search-field-help,
+j3w1-radio-group .select-help,
+j3w1-radio-group .text-field-help,
+j3w1-radio-group .textarea-help,
+j3w1-radio-group .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-radio-group .combobox-message,
+j3w1-radio-group .date-picker-message,
+j3w1-radio-group .file-input-message,
+j3w1-radio-group .number-field-message,
+j3w1-radio-group .radio-group-message,
+j3w1-radio-group .select-message,
+j3w1-radio-group .text-field-message,
+j3w1-radio-group .textarea-message,
+j3w1-radio-group .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-radio-group .combobox-root,
+j3w1-radio-group .date-picker-root,
+j3w1-radio-group .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-radio-group .radio-group {
   display: grid;
   gap: var(--space-4);
@@ -63,7 +123,7 @@ j3w1-radio-group .radio-group-horizontal .radio-group-options {
 
 j3w1-radio-group .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -73,8 +133,8 @@ j3w1-radio-group .radio-group-option {
 
 j3w1-radio-group .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 j3w1-radio-group .radio-group-control > * {
@@ -83,8 +143,8 @@ j3w1-radio-group .radio-group-control > * {
 
 j3w1-radio-group .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -106,14 +166,6 @@ j3w1-radio-group .radio-group-text {
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
-
-j3w1-radio-group .radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-radio-group .radio-group-option:hover .radio-group-input:not(:disabled) {
     background: var(--color-interaction-hover-bg);
diff --git a/packages/ui/dist/styles/range.css b/packages/ui/dist/styles/range.css
index 279ce659f..71b20e111 100644
--- a/packages/ui/dist/styles/range.css
+++ b/packages/ui/dist/styles/range.css
@@ -8,7 +8,7 @@ j3w1-range {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-range, j3w1-range *, j3w1-range *::before, j3w1-range *::after { box-sizing: border-box; }
-j3w1-range button, j3w1-range input, j3w1-range select, j3w1-range textarea { font: inherit; }
+j3w1-range :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-range ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,15 +26,15 @@ j3w1-range .sr-only {
 }
 
 j3w1-range :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-range :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-range :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-range :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-range :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-range :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-range :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-range :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-range :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-range .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-range .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-range .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-range .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-range .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-range .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-range .j3w1-temporal :focus-visible,j3w1-range .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -58,7 +58,7 @@ j3w1-range .j3w1-calendar [aria-pressed="true"] { background:var(--color-interac
 j3w1-range .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-range .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-range .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-range .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-range .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-range .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-range .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-range .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -66,7 +66,7 @@ j3w1-range .j3w1-choice-trigger:focus-visible,j3w1-range .j3w1-choice-list:focus
 j3w1-range .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-range .j3w1-choice-list[popover] { inset: auto; }
 j3w1-range .j3w1-choice-list[hidden] { display: none; }
-j3w1-range .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-range .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-range .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-range .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-range .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -80,25 +80,23 @@ j3w1-range .j3w1-choice-error { display: block; color: var(--color-status-danger
 j3w1-range .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-range .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-range :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-range input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-range input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-range input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-range input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-range input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-range input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-range input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-range input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-range input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-range :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-range input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-range input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-range input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-range input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-range input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-range input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-range input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-range input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-range input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-range input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-range input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
 
 j3w1-range .range {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-range .range-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-range .range :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-range .range :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-range .range :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-j3w1-range .range-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 j3w1-range .range input {width:100%;min-height:var(--density-control-height);accent-color:var(--color-action-primary-bg)}j3w1-range .range output {font-variant-numeric:tabular-nums}
 
 j3w1-range [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/repeater.css b/packages/ui/dist/styles/repeater.css
index 2c984d3a4..dbc3ffc79 100644
--- a/packages/ui/dist/styles/repeater.css
+++ b/packages/ui/dist/styles/repeater.css
@@ -8,7 +8,7 @@ j3w1-repeater {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-repeater, j3w1-repeater *, j3w1-repeater *::before, j3w1-repeater *::after { box-sizing: border-box; }
-j3w1-repeater button, j3w1-repeater input, j3w1-repeater select, j3w1-repeater textarea { font: inherit; }
+j3w1-repeater :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-repeater ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,9 +25,135 @@ j3w1-repeater .sr-only {
   border: 0;
 }
 
+j3w1-repeater .button,
+j3w1-repeater .dialog-button,
+j3w1-repeater .empty-state-action,
+j3w1-repeater .file-input-button,
+j3w1-repeater button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+j3w1-repeater .button,
+j3w1-repeater .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+j3w1-repeater .button-secondary,
+j3w1-repeater .dialog-button,
+j3w1-repeater .empty-state-action,
+j3w1-repeater .file-input-button,
+j3w1-repeater button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-repeater .button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+j3w1-repeater .button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+j3w1-repeater .button-destructive-filled,
+j3w1-repeater .dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+@media (hover: hover) {
+  j3w1-repeater :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-repeater .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-repeater :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-repeater :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-repeater :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-repeater .dialog-button,
+  j3w1-repeater .empty-state-action,
+  j3w1-repeater .file-input-button,
+  j3w1-repeater button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-repeater :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
 j3w1-repeater .repeater {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 j3w1-repeater .repeater-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-repeater .repeater :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-repeater .repeater :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-repeater .repeater :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
 j3w1-repeater .repeater-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 j3w1-repeater .repeater ol {display:grid;gap:var(--space-12);padding-inline-start:var(--space-24)}j3w1-repeater .repeater [data-empty] {color:var(--color-text-muted)}
diff --git a/packages/ui/dist/styles/search-field.css b/packages/ui/dist/styles/search-field.css
index 33b0aca34..dbc0ae6e8 100644
--- a/packages/ui/dist/styles/search-field.css
+++ b/packages/ui/dist/styles/search-field.css
@@ -8,7 +8,7 @@ j3w1-search-field {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-search-field, j3w1-search-field *, j3w1-search-field *::before, j3w1-search-field *::after { box-sizing: border-box; }
-j3w1-search-field button, j3w1-search-field input, j3w1-search-field select, j3w1-search-field textarea { font: inherit; }
+j3w1-search-field :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-search-field ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-search-field .sr-only {
   border: 0;
 }
 
+j3w1-search-field .combobox-label,
+j3w1-search-field .dialog-field-label,
+j3w1-search-field .field-label,
+j3w1-search-field .fieldset-label,
+j3w1-search-field .file-input-label,
+j3w1-search-field .number-field-label,
+j3w1-search-field .search-field-label,
+j3w1-search-field .select-label,
+j3w1-search-field .text-field-label,
+j3w1-search-field .textarea-label,
+j3w1-search-field .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-search-field .combobox-help,
+j3w1-search-field .date-picker-help,
+j3w1-search-field .dialog-field-help,
+j3w1-search-field .fieldset-help,
+j3w1-search-field .file-input-help,
+j3w1-search-field .number-field-help,
+j3w1-search-field .search-field-help,
+j3w1-search-field .select-help,
+j3w1-search-field .text-field-help,
+j3w1-search-field .textarea-help,
+j3w1-search-field .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-search-field .combobox-message,
+j3w1-search-field .date-picker-message,
+j3w1-search-field .file-input-message,
+j3w1-search-field .number-field-message,
+j3w1-search-field .radio-group-message,
+j3w1-search-field .select-message,
+j3w1-search-field .text-field-message,
+j3w1-search-field .textarea-message,
+j3w1-search-field .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-search-field .combobox-root,
+j3w1-search-field .date-picker-root,
+j3w1-search-field .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-search-field .search-field {
   display: grid;
   gap: var(--space-4);
@@ -33,16 +93,10 @@ j3w1-search-field .search-field {
   color: var(--color-text-default);
 }
 
-j3w1-search-field .search-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-search-field .search-field-root {
   display: flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding-inline-start: var(--space-8);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
@@ -134,13 +188,6 @@ j3w1-search-field .search-field-kbd {
   line-height: var(--font-line-height-ui-sm);
 }
 
-j3w1-search-field .search-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-search-field .search-field-status {
   display: none;
   margin: 0;
diff --git a/packages/ui/dist/styles/segmented-control.css b/packages/ui/dist/styles/segmented-control.css
index 37d84f220..3c94d95f8 100644
--- a/packages/ui/dist/styles/segmented-control.css
+++ b/packages/ui/dist/styles/segmented-control.css
@@ -8,7 +8,7 @@ j3w1-segmented-control {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-segmented-control, j3w1-segmented-control *, j3w1-segmented-control *::before, j3w1-segmented-control *::after { box-sizing: border-box; }
-j3w1-segmented-control button, j3w1-segmented-control input, j3w1-segmented-control select, j3w1-segmented-control textarea { font: inherit; }
+j3w1-segmented-control :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-segmented-control ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-segmented-control .sr-only {
   border: 0;
 }
 
+j3w1-segmented-control .combobox-label,
+j3w1-segmented-control .dialog-field-label,
+j3w1-segmented-control .field-label,
+j3w1-segmented-control .fieldset-label,
+j3w1-segmented-control .file-input-label,
+j3w1-segmented-control .number-field-label,
+j3w1-segmented-control .search-field-label,
+j3w1-segmented-control .select-label,
+j3w1-segmented-control .text-field-label,
+j3w1-segmented-control .textarea-label,
+j3w1-segmented-control .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-segmented-control .combobox-help,
+j3w1-segmented-control .date-picker-help,
+j3w1-segmented-control .dialog-field-help,
+j3w1-segmented-control .fieldset-help,
+j3w1-segmented-control .file-input-help,
+j3w1-segmented-control .number-field-help,
+j3w1-segmented-control .search-field-help,
+j3w1-segmented-control .select-help,
+j3w1-segmented-control .text-field-help,
+j3w1-segmented-control .textarea-help,
+j3w1-segmented-control .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-segmented-control .combobox-message,
+j3w1-segmented-control .date-picker-message,
+j3w1-segmented-control .file-input-message,
+j3w1-segmented-control .number-field-message,
+j3w1-segmented-control .radio-group-message,
+j3w1-segmented-control .select-message,
+j3w1-segmented-control .text-field-message,
+j3w1-segmented-control .textarea-message,
+j3w1-segmented-control .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-segmented-control .combobox-root,
+j3w1-segmented-control .date-picker-root,
+j3w1-segmented-control .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-segmented-control .radio-group {
   display: grid;
   gap: var(--space-4);
@@ -63,7 +123,7 @@ j3w1-segmented-control .radio-group-horizontal .radio-group-options {
 
 j3w1-segmented-control .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -73,8 +133,8 @@ j3w1-segmented-control .radio-group-option {
 
 j3w1-segmented-control .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 j3w1-segmented-control .radio-group-control > * {
@@ -83,8 +143,8 @@ j3w1-segmented-control .radio-group-control > * {
 
 j3w1-segmented-control .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -106,14 +166,6 @@ j3w1-segmented-control .radio-group-text {
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
-
-j3w1-segmented-control .radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-segmented-control .radio-group-option:hover .radio-group-input:not(:disabled) {
     background: var(--color-interaction-hover-bg);
@@ -183,10 +235,8 @@ j3w1-segmented-control .radio-group:disabled .radio-group-legend {
 }
 
 j3w1-segmented-control .segmented-control {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-segmented-control .segmented-control-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-segmented-control .segmented-control :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-segmented-control .segmented-control :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-segmented-control .segmented-control :disabled {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-j3w1-segmented-control .segmented-control-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 j3w1-segmented-control .segmented-control-options {display:flex;flex-wrap:wrap}j3w1-segmented-control .segmented-control label {display:flex;align-items:center;gap:var(--space-4);padding:var(--space-8);border:var(--border-width-default) solid var(--color-border-control)}j3w1-segmented-control .segmented-control label:has(:checked) {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text)}j3w1-segmented-control .segmented-control input {accent-color:var(--color-action-primary-bg)}
 
 j3w1-segmented-control .segmented-control input:checked:focus-visible {outline-color:var(--color-interaction-focus-ring-container)}
diff --git a/packages/ui/dist/styles/select.css b/packages/ui/dist/styles/select.css
index 41989576a..415554828 100644
--- a/packages/ui/dist/styles/select.css
+++ b/packages/ui/dist/styles/select.css
@@ -8,7 +8,7 @@ j3w1-select {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-select, j3w1-select *, j3w1-select *::before, j3w1-select *::after { box-sizing: border-box; }
-j3w1-select button, j3w1-select input, j3w1-select select, j3w1-select textarea { font: inherit; }
+j3w1-select :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-select ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,15 +26,15 @@ j3w1-select .sr-only {
 }
 
 j3w1-select :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-select :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-select :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-select :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-select :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-select :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-select :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-select :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-select :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-select .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-select .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-select .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-select .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-select .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-select .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-select .j3w1-temporal :focus-visible,j3w1-select .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -58,7 +58,7 @@ j3w1-select .j3w1-calendar [aria-pressed="true"] { background:var(--color-intera
 j3w1-select .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-select .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-select .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-select .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-select .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-select .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-select .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-select .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -66,7 +66,7 @@ j3w1-select .j3w1-choice-trigger:focus-visible,j3w1-select .j3w1-choice-list:foc
 j3w1-select .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-select .j3w1-choice-list[popover] { inset: auto; }
 j3w1-select .j3w1-choice-list[hidden] { display: none; }
-j3w1-select .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-select .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-select .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-select .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-select .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -80,19 +80,79 @@ j3w1-select .j3w1-choice-error { display: block; color: var(--color-status-dange
 j3w1-select .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-select .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-select :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-select input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-select input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-select input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-select input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-select input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-select input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-select input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-select input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-select input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-select :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-select input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-select input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-select input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-select input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-select input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-select input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-select input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-select input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-select input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-select input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-select input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+
+j3w1-select .combobox-label,
+j3w1-select .dialog-field-label,
+j3w1-select .field-label,
+j3w1-select .fieldset-label,
+j3w1-select .file-input-label,
+j3w1-select .number-field-label,
+j3w1-select .search-field-label,
+j3w1-select .select-label,
+j3w1-select .text-field-label,
+j3w1-select .textarea-label,
+j3w1-select .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-select .combobox-help,
+j3w1-select .date-picker-help,
+j3w1-select .dialog-field-help,
+j3w1-select .fieldset-help,
+j3w1-select .file-input-help,
+j3w1-select .number-field-help,
+j3w1-select .search-field-help,
+j3w1-select .select-help,
+j3w1-select .text-field-help,
+j3w1-select .textarea-help,
+j3w1-select .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-select .combobox-message,
+j3w1-select .date-picker-message,
+j3w1-select .file-input-message,
+j3w1-select .number-field-message,
+j3w1-select .radio-group-message,
+j3w1-select .select-message,
+j3w1-select .text-field-message,
+j3w1-select .textarea-message,
+j3w1-select .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-select .combobox-root,
+j3w1-select .date-picker-root,
+j3w1-select .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
 
 j3w1-select .select {
   position: relative;
@@ -103,12 +163,6 @@ j3w1-select .select {
   color: var(--color-text-default);
 }
 
-j3w1-select .select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-select .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -118,7 +172,7 @@ j3w1-select .select-root {
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -129,8 +183,8 @@ j3w1-select .select-control {
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -155,8 +209,8 @@ j3w1-select .select-control optgroup {
 }
 
 j3w1-select .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 j3w1-select .select-control optgroup {
@@ -170,7 +224,7 @@ j3w1-select .select-control option:checked {
 
 j3w1-select .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -179,21 +233,6 @@ j3w1-select .select-chevron {
   fill: none;
   pointer-events: none;
 }
-
-j3w1-select .select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-select .select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-select .select-root:hover {
     background: var(--color-interaction-hover-bg);
diff --git a/packages/ui/dist/styles/settings-panel.css b/packages/ui/dist/styles/settings-panel.css
index 750f4e7c4..790879fd6 100644
--- a/packages/ui/dist/styles/settings-panel.css
+++ b/packages/ui/dist/styles/settings-panel.css
@@ -8,7 +8,7 @@ j3w1-settings-panel {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-settings-panel, j3w1-settings-panel *, j3w1-settings-panel *::before, j3w1-settings-panel *::after { box-sizing: border-box; }
-j3w1-settings-panel button, j3w1-settings-panel input, j3w1-settings-panel select, j3w1-settings-panel textarea { font: inherit; }
+j3w1-settings-panel :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-settings-panel ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -102,7 +102,7 @@ j3w1-settings-panel .settings-panel-footer {
 
   j3w1-settings-panel .settings-panel-nav .sidebar-nav-list {
     display: flex;
-    gap: var(--density-gap, 4px);
+    gap: var(--density-gap, 2px);
     overflow-x: auto;
     scrollbar-width: thin;
   }
@@ -113,8 +113,8 @@ j3w1-settings-panel .settings-panel-footer {
 
   j3w1-settings-panel .settings-panel-nav .sidebar-nav-link {
     width: auto;
-    min-height: var(--density-control-height, 32px);
-    padding: 0 var(--density-control-padding-x, 12px);
+    min-height: var(--density-control-height, 24px);
+    padding: 0 var(--density-control-padding-x, 8px);
     margin-bottom: calc(-1 * var(--border-width-default));
     border-inline-start: 0;
     border-bottom: var(--border-width-emphasis) solid transparent;
@@ -144,21 +144,17 @@ j3w1-settings-panel .settings-panel[aria-busy="true"] .settings-panel-apply {
   }
 }
 
-j3w1-settings-panel .button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
+j3w1-settings-panel .button,
+j3w1-settings-panel .dialog-button,
+j3w1-settings-panel .empty-state-action,
+j3w1-settings-panel .file-input-button,
+j3w1-settings-panel button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: var(--_bg);
   color: var(--_fg);
@@ -171,8 +167,23 @@ j3w1-settings-panel .button {
   cursor: pointer;
   outline: 0;
 }
+j3w1-settings-panel .button,
+j3w1-settings-panel .dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
 
-j3w1-settings-panel .button-secondary {
+j3w1-settings-panel .button-secondary,
+j3w1-settings-panel .dialog-button,
+j3w1-settings-panel .empty-state-action,
+j3w1-settings-panel .file-input-button,
+j3w1-settings-panel button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
   --_bg: var(--color-action-secondary-bg);
   --_fg: var(--color-action-secondary-text);
   --_border: var(--color-action-secondary-border);
@@ -204,7 +215,8 @@ j3w1-settings-panel .button-destructive {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-interaction-focus-ring);
 }
-j3w1-settings-panel .button-destructive-filled {
+j3w1-settings-panel .button-destructive-filled,
+j3w1-settings-panel .dialog-button.dialog-button-destructive {
   --_bg: var(--color-action-destructive-filled-bg);
   --_fg: var(--color-action-destructive-filled-text);
   --_border: var(--color-action-destructive-border);
@@ -214,6 +226,49 @@ j3w1-settings-panel .button-destructive-filled {
   --_border-active: var(--color-action-destructive-border);
   --_ring: var(--color-action-destructive-filled-text);
 }
+@media (hover: hover) {
+  j3w1-settings-panel :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  j3w1-settings-panel .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+j3w1-settings-panel :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+j3w1-settings-panel :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+j3w1-settings-panel :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: no-preference) {
+  j3w1-settings-panel .dialog-button,
+  j3w1-settings-panel .empty-state-action,
+  j3w1-settings-panel .file-input-button,
+  j3w1-settings-panel button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  j3w1-settings-panel :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
 
 j3w1-settings-panel .button-icon {
   flex: none;
@@ -231,25 +286,6 @@ j3w1-settings-panel .button-loading {
 j3w1-settings-panel .button-label {
   min-width: 0;
 }
-@media (hover: hover) {
-  j3w1-settings-panel .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  j3w1-settings-panel .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-j3w1-settings-panel .button:active {
-  --_bg: var(--_bg-active);
-  --_fg: var(--_fg-hover);
-  --_border: var(--_border-active);
-}
-j3w1-settings-panel .button:focus-visible {
-  outline: var(--border-width-default) dashed var(--_ring);
-  outline-offset: var(--focus-offset);
-}
 j3w1-settings-panel .button[aria-busy="true"] .button-loading {
   display: inline;
 }
@@ -261,16 +297,6 @@ j3w1-settings-panel .button[aria-busy="true"] .button-icon {
 j3w1-settings-panel .button[aria-busy="true"] {
   cursor: progress;
 }
-j3w1-settings-panel .button:disabled {
-  --_bg: var(--color-interaction-disabled-bg);
-  --_fg: var(--color-text-disabled);
-  --_border: var(--color-border-disabled);
-  --_bg-hover: var(--color-interaction-disabled-bg);
-  --_fg-hover: var(--color-text-disabled);
-  --_bg-active: var(--color-interaction-disabled-bg);
-  --_border-active: var(--color-border-disabled);
-  cursor: not-allowed;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   j3w1-settings-panel .button {
@@ -279,9 +305,66 @@ j3w1-settings-panel .button:disabled {
 }
 
 @media (forced-colors: active) {
-  j3w1-settings-panel .button:focus-visible {
-    outline-color: Highlight;
-  }
+}
+
+j3w1-settings-panel .combobox-label,
+j3w1-settings-panel .dialog-field-label,
+j3w1-settings-panel .field-label,
+j3w1-settings-panel .fieldset-label,
+j3w1-settings-panel .file-input-label,
+j3w1-settings-panel .number-field-label,
+j3w1-settings-panel .search-field-label,
+j3w1-settings-panel .select-label,
+j3w1-settings-panel .text-field-label,
+j3w1-settings-panel .textarea-label,
+j3w1-settings-panel .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-settings-panel .combobox-help,
+j3w1-settings-panel .date-picker-help,
+j3w1-settings-panel .dialog-field-help,
+j3w1-settings-panel .fieldset-help,
+j3w1-settings-panel .file-input-help,
+j3w1-settings-panel .number-field-help,
+j3w1-settings-panel .search-field-help,
+j3w1-settings-panel .select-help,
+j3w1-settings-panel .text-field-help,
+j3w1-settings-panel .textarea-help,
+j3w1-settings-panel .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-settings-panel .combobox-message,
+j3w1-settings-panel .date-picker-message,
+j3w1-settings-panel .file-input-message,
+j3w1-settings-panel .number-field-message,
+j3w1-settings-panel .radio-group-message,
+j3w1-settings-panel .select-message,
+j3w1-settings-panel .text-field-message,
+j3w1-settings-panel .textarea-message,
+j3w1-settings-panel .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-settings-panel .combobox-root,
+j3w1-settings-panel .date-picker-root,
+j3w1-settings-panel .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
 }
 
 j3w1-settings-panel .field {
@@ -293,12 +376,6 @@ j3w1-settings-panel .field {
   color: var(--color-text-default);
 }
 
-j3w1-settings-panel .field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-settings-panel .field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -311,8 +388,8 @@ j3w1-settings-panel .field-control {
 
 j3w1-settings-panel .field-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -387,12 +464,6 @@ j3w1-settings-panel .text-field {
   color: var(--color-text-default);
 }
 
-j3w1-settings-panel .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-settings-panel .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -402,7 +473,7 @@ j3w1-settings-panel .text-field-root {
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -411,7 +482,7 @@ j3w1-settings-panel .text-field-root {
 j3w1-settings-panel .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -487,21 +558,6 @@ j3w1-settings-panel .text-field-loading {
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-j3w1-settings-panel .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-settings-panel .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-settings-panel .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -602,7 +658,7 @@ j3w1-settings-panel .checkbox-required {
 
 j3w1-settings-panel .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -612,8 +668,8 @@ j3w1-settings-panel .checkbox-option {
 
 j3w1-settings-panel .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -623,8 +679,8 @@ j3w1-settings-panel .checkbox-control > * {
 
 j3w1-settings-panel .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -636,8 +692,8 @@ j3w1-settings-panel .checkbox-input {
 j3w1-settings-panel .checkbox-check,
 j3w1-settings-panel .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
@@ -776,7 +832,7 @@ j3w1-settings-panel .radio-group-horizontal .radio-group-options {
 
 j3w1-settings-panel .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -786,8 +842,8 @@ j3w1-settings-panel .radio-group-option {
 
 j3w1-settings-panel .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 j3w1-settings-panel .radio-group-control > * {
@@ -796,8 +852,8 @@ j3w1-settings-panel .radio-group-control > * {
 
 j3w1-settings-panel .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -819,14 +875,6 @@ j3w1-settings-panel .radio-group-text {
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
-
-j3w1-settings-panel .radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-settings-panel .radio-group-option:hover .radio-group-input:not(:disabled) {
     background: var(--color-interaction-hover-bg);
@@ -896,15 +944,15 @@ j3w1-settings-panel .radio-group:disabled .radio-group-legend {
 }
 
 j3w1-settings-panel :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-settings-panel .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-settings-panel .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-settings-panel .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-settings-panel .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-settings-panel .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-settings-panel .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-settings-panel .j3w1-temporal :focus-visible,j3w1-settings-panel .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -928,7 +976,7 @@ j3w1-settings-panel .j3w1-calendar [aria-pressed="true"] { background:var(--colo
 j3w1-settings-panel .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-settings-panel .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-settings-panel .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-settings-panel .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-settings-panel .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-settings-panel .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-settings-panel .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-settings-panel .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -936,7 +984,7 @@ j3w1-settings-panel .j3w1-choice-trigger:focus-visible,j3w1-settings-panel .j3w1
 j3w1-settings-panel .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-settings-panel .j3w1-choice-list[popover] { inset: auto; }
 j3w1-settings-panel .j3w1-choice-list[hidden] { display: none; }
-j3w1-settings-panel .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-settings-panel .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-settings-panel .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-settings-panel .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-settings-panel .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -950,19 +998,19 @@ j3w1-settings-panel .j3w1-choice-error { display: block; color: var(--color-stat
 j3w1-settings-panel .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-settings-panel .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-settings-panel :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-settings-panel :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-settings-panel input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-settings-panel input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
 
 j3w1-settings-panel .select {
   position: relative;
@@ -973,12 +1021,6 @@ j3w1-settings-panel .select {
   color: var(--color-text-default);
 }
 
-j3w1-settings-panel .select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-settings-panel .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -988,7 +1030,7 @@ j3w1-settings-panel .select-root {
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -999,8 +1041,8 @@ j3w1-settings-panel .select-control {
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -1025,8 +1067,8 @@ j3w1-settings-panel .select-control optgroup {
 }
 
 j3w1-settings-panel .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 j3w1-settings-panel .select-control optgroup {
@@ -1040,7 +1082,7 @@ j3w1-settings-panel .select-control option:checked {
 
 j3w1-settings-panel .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -1049,21 +1091,6 @@ j3w1-settings-panel .select-chevron {
   fill: none;
   pointer-events: none;
 }
-
-j3w1-settings-panel .select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-settings-panel .select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 @media (hover: hover) {
   j3w1-settings-panel .select-root:hover {
     background: var(--color-interaction-hover-bg);
@@ -1251,7 +1278,7 @@ j3w1-settings-panel .switch:disabled .switch-state {
 }
 
 j3w1-settings-panel .sidebar-nav {
-  --_indent: calc(var(--density-icon, 16px) + var(--space-8));
+  --_indent: calc(var(--density-icon, 12px) + var(--space-8));
   min-width: 0;
   max-width: calc(var(--font-size-ui-md) * 15);
   padding: var(--space-4) 0;
@@ -1283,9 +1310,9 @@ j3w1-settings-panel .sidebar-nav-link {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
-  padding-inline-start: calc(var(--density-control-padding-x, 12px) - var(--border-width-emphasis));
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
+  padding-inline-start: calc(var(--density-control-padding-x, 8px) - var(--border-width-emphasis));
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -1301,8 +1328,8 @@ j3w1-settings-panel .sidebar-nav-link {
 j3w1-settings-panel .sidebar-nav-icon {
   display: inline-flex;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-icon-default);
 }
 
@@ -1344,12 +1371,12 @@ j3w1-settings-panel .sidebar-nav-link:focus-visible {
 j3w1-settings-panel .sidebar-nav-link:focus:not(:focus-visible) {
   outline: 0;
 }
-j3w1-settings-panel .sidebar-nav-link[aria-current="page"] {
+j3w1-settings-panel .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) {
   border-inline-start-color: var(--color-border-selected-indicator);
   color: var(--color-text-bright);
 }
 
-j3w1-settings-panel .sidebar-nav-link[aria-current="page"] .sidebar-nav-icon {
+j3w1-settings-panel .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) .sidebar-nav-icon {
   color: var(--color-text-bright);
 }
 j3w1-settings-panel .sidebar-nav-link[aria-selected="true"] {
@@ -1362,7 +1389,7 @@ j3w1-settings-panel .sidebar-nav-link[aria-selected="true"] .sidebar-nav-icon {
 }
 
 j3w1-settings-panel .sidebar-nav-link[aria-selected="true"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 j3w1-settings-panel .sidebar-nav[data-container-inactive] .sidebar-nav-link[aria-selected="true"] {
   background: var(--color-interaction-selection-inactive-bg);
@@ -1407,6 +1434,37 @@ j3w1-settings-panel .sidebar-nav-collapsed .sidebar-nav-link {
   padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
 }
 
+@media (min-width: 900px) and (max-width: 1279.98px) {
+j3w1-settings-panel .site-rail {
+  max-width: none;
+  width: max-content;
+}
+
+j3w1-settings-panel .site-rail .sidebar-nav-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+j3w1-settings-panel .site-rail .sidebar-nav-chevron {
+  display: none;
+}
+
+j3w1-settings-panel .site-rail .sidebar-nav-sublist {
+  padding-inline-start: 0;
+}
+
+j3w1-settings-panel .site-rail .sidebar-nav-link {
+  justify-content: center;
+  padding-inline: var(--space-8);
+  padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
+}
+
+}
+
 @media (hover: none) {
   j3w1-settings-panel .sidebar-nav-link:hover {
     background: transparent;
@@ -1428,7 +1486,7 @@ j3w1-settings-panel .sidebar-nav-collapsed .sidebar-nav-link {
     outline-color: Highlight;
   }
 
-  j3w1-settings-panel .sidebar-nav-link[aria-current="page"] {
+  j3w1-settings-panel .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) {
     border-inline-start-color: Highlight;
   }
 
@@ -1468,16 +1526,10 @@ j3w1-settings-panel .fieldset-field {
   min-width: 0;
 }
 
-j3w1-settings-panel .fieldset-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-settings-panel .fieldset-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -1491,13 +1543,6 @@ j3w1-settings-panel .fieldset-input:focus-visible {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
-
-j3w1-settings-panel .fieldset-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-settings-panel .fieldset:disabled .fieldset-legend,
 j3w1-settings-panel .fieldset:disabled .fieldset-label {
   color: var(--color-text-disabled);
diff --git a/packages/ui/dist/styles/sidebar-nav.css b/packages/ui/dist/styles/sidebar-nav.css
index 6c0db4a9f..a75c2d4f3 100644
--- a/packages/ui/dist/styles/sidebar-nav.css
+++ b/packages/ui/dist/styles/sidebar-nav.css
@@ -8,7 +8,7 @@ j3w1-sidebar-nav {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-sidebar-nav, j3w1-sidebar-nav *, j3w1-sidebar-nav *::before, j3w1-sidebar-nav *::after { box-sizing: border-box; }
-j3w1-sidebar-nav button, j3w1-sidebar-nav input, j3w1-sidebar-nav select, j3w1-sidebar-nav textarea { font: inherit; }
+j3w1-sidebar-nav :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-sidebar-nav ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,7 +26,7 @@ j3w1-sidebar-nav .sr-only {
 }
 
 j3w1-sidebar-nav .sidebar-nav {
-  --_indent: calc(var(--density-icon, 16px) + var(--space-8));
+  --_indent: calc(var(--density-icon, 12px) + var(--space-8));
   min-width: 0;
   max-width: calc(var(--font-size-ui-md) * 15);
   padding: var(--space-4) 0;
@@ -58,9 +58,9 @@ j3w1-sidebar-nav .sidebar-nav-link {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
-  padding-inline-start: calc(var(--density-control-padding-x, 12px) - var(--border-width-emphasis));
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
+  padding-inline-start: calc(var(--density-control-padding-x, 8px) - var(--border-width-emphasis));
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -76,8 +76,8 @@ j3w1-sidebar-nav .sidebar-nav-link {
 j3w1-sidebar-nav .sidebar-nav-icon {
   display: inline-flex;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-icon-default);
 }
 
@@ -119,12 +119,12 @@ j3w1-sidebar-nav .sidebar-nav-link:focus-visible {
 j3w1-sidebar-nav .sidebar-nav-link:focus:not(:focus-visible) {
   outline: 0;
 }
-j3w1-sidebar-nav .sidebar-nav-link[aria-current="page"] {
+j3w1-sidebar-nav .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) {
   border-inline-start-color: var(--color-border-selected-indicator);
   color: var(--color-text-bright);
 }
 
-j3w1-sidebar-nav .sidebar-nav-link[aria-current="page"] .sidebar-nav-icon {
+j3w1-sidebar-nav .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) .sidebar-nav-icon {
   color: var(--color-text-bright);
 }
 j3w1-sidebar-nav .sidebar-nav-link[aria-selected="true"] {
@@ -137,7 +137,7 @@ j3w1-sidebar-nav .sidebar-nav-link[aria-selected="true"] .sidebar-nav-icon {
 }
 
 j3w1-sidebar-nav .sidebar-nav-link[aria-selected="true"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 j3w1-sidebar-nav .sidebar-nav[data-container-inactive] .sidebar-nav-link[aria-selected="true"] {
   background: var(--color-interaction-selection-inactive-bg);
@@ -182,6 +182,37 @@ j3w1-sidebar-nav .sidebar-nav-collapsed .sidebar-nav-link {
   padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
 }
 
+@media (min-width: 900px) and (max-width: 1279.98px) {
+j3w1-sidebar-nav .site-rail {
+  max-width: none;
+  width: max-content;
+}
+
+j3w1-sidebar-nav .site-rail .sidebar-nav-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+j3w1-sidebar-nav .site-rail .sidebar-nav-chevron {
+  display: none;
+}
+
+j3w1-sidebar-nav .site-rail .sidebar-nav-sublist {
+  padding-inline-start: 0;
+}
+
+j3w1-sidebar-nav .site-rail .sidebar-nav-link {
+  justify-content: center;
+  padding-inline: var(--space-8);
+  padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
+}
+
+}
+
 @media (hover: none) {
   j3w1-sidebar-nav .sidebar-nav-link:hover {
     background: transparent;
@@ -203,7 +234,7 @@ j3w1-sidebar-nav .sidebar-nav-collapsed .sidebar-nav-link {
     outline-color: Highlight;
   }
 
-  j3w1-sidebar-nav .sidebar-nav-link[aria-current="page"] {
+  j3w1-sidebar-nav .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) {
     border-inline-start-color: Highlight;
   }
 
diff --git a/packages/ui/dist/styles/skeleton.css b/packages/ui/dist/styles/skeleton.css
index 32202be67..7b8326bc3 100644
--- a/packages/ui/dist/styles/skeleton.css
+++ b/packages/ui/dist/styles/skeleton.css
@@ -8,7 +8,7 @@ j3w1-skeleton {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-skeleton, j3w1-skeleton *, j3w1-skeleton *::before, j3w1-skeleton *::after { box-sizing: border-box; }
-j3w1-skeleton button, j3w1-skeleton input, j3w1-skeleton select, j3w1-skeleton textarea { font: inherit; }
+j3w1-skeleton :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-skeleton ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,7 +26,7 @@ j3w1-skeleton .sr-only {
 }
 
 j3w1-skeleton .skeleton {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-skeleton .skeleton :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-skeleton .skeleton :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-skeleton .skeleton-block {height:var(--space-16);background:var(--color-surface-raised);border:var(--border-width-default) solid var(--color-border-divider)}j3w1-skeleton .skeleton-short {width:60%}j3w1-skeleton .skeleton[aria-busy=true] {animation:none;transition:none}
 
 j3w1-skeleton [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/skip-link.css b/packages/ui/dist/styles/skip-link.css
index d6d1e5361..b12e669db 100644
--- a/packages/ui/dist/styles/skip-link.css
+++ b/packages/ui/dist/styles/skip-link.css
@@ -8,7 +8,7 @@ j3w1-skip-link {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-skip-link, j3w1-skip-link *, j3w1-skip-link *::before, j3w1-skip-link *::after { box-sizing: border-box; }
-j3w1-skip-link button, j3w1-skip-link input, j3w1-skip-link select, j3w1-skip-link textarea { font: inherit; }
+j3w1-skip-link :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-skip-link ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -30,7 +30,7 @@ j3w1-skip-link .skip-link {
   inset-inline-start: var(--space-8);
   top: calc(-1 * var(--space-48));
   z-index: var(--z-skip-link);
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: var(--space-4) var(--space-8);
   box-sizing: border-box;
   background: var(--color-surface-raised);
@@ -49,11 +49,6 @@ j3w1-skip-link .skip-link:focus-visible {
 j3w1-skip-link .skip-link:focus:not(:focus-visible) {
   outline: 0;
 }
-j3w1-skip-link .skip-link-demo {
-  position: relative;
-  min-height: calc(var(--density-control-height, 32px) + var(--space-16));
-  overflow: hidden;
-}
 
 @media (forced-colors: active) {
   j3w1-skip-link .skip-link:focus-visible {
diff --git a/packages/ui/dist/styles/switch.css b/packages/ui/dist/styles/switch.css
index 39df894b0..c71e16c18 100644
--- a/packages/ui/dist/styles/switch.css
+++ b/packages/ui/dist/styles/switch.css
@@ -8,7 +8,7 @@ j3w1-switch {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-switch, j3w1-switch *, j3w1-switch *::before, j3w1-switch *::after { box-sizing: border-box; }
-j3w1-switch button, j3w1-switch input, j3w1-switch select, j3w1-switch textarea { font: inherit; }
+j3w1-switch :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-switch ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/packages/ui/dist/styles/table.css b/packages/ui/dist/styles/table.css
index 07ed29952..8104196ce 100644
--- a/packages/ui/dist/styles/table.css
+++ b/packages/ui/dist/styles/table.css
@@ -8,7 +8,7 @@ j3w1-table {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-table, j3w1-table *, j3w1-table *::before, j3w1-table *::after { box-sizing: border-box; }
-j3w1-table button, j3w1-table input, j3w1-table select, j3w1-table textarea { font: inherit; }
+j3w1-table :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-table ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -57,7 +57,7 @@ j3w1-table .table .table-header {
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -79,7 +79,7 @@ j3w1-table .table-sort {
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -111,7 +111,7 @@ j3w1-table .table .table-body .table-row:first-child {
 
 j3w1-table .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -148,6 +148,21 @@ j3w1-table .table-sticky .table-header {
   background: var(--color-surface-raised);
   border-bottom-width: var(--border-width-emphasis);
 }
+@media (max-width: 599.98px) {
+  j3w1-table .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  j3w1-table .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  j3w1-table .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
 j3w1-table .table-body .table-row:hover {
   background: var(--color-interaction-hover-bg);
 }
@@ -169,7 +184,7 @@ j3w1-table .table-row[aria-selected="true"]:hover {
 }
 j3w1-table .table-row[aria-selected="true"]:focus-visible,
 j3w1-table .table-row[aria-selected="true"]:focus-within {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 j3w1-table .table[data-container-inactive] .table-row[aria-selected="true"] {
diff --git a/packages/ui/dist/styles/tabs.css b/packages/ui/dist/styles/tabs.css
index 276e935d1..bdeab9ba6 100644
--- a/packages/ui/dist/styles/tabs.css
+++ b/packages/ui/dist/styles/tabs.css
@@ -8,7 +8,7 @@ j3w1-tabs {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-tabs, j3w1-tabs *, j3w1-tabs *::before, j3w1-tabs *::after { box-sizing: border-box; }
-j3w1-tabs button, j3w1-tabs input, j3w1-tabs select, j3w1-tabs textarea { font: inherit; }
+j3w1-tabs :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-tabs ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -33,7 +33,7 @@ j3w1-tabs .tabs {
 
 j3w1-tabs .tabs-list {
   display: flex;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
@@ -44,8 +44,8 @@ j3w1-tabs .tabs-list {
 
 j3w1-tabs .tabs-tab {
   flex: 0 0 auto;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin-bottom: calc(-1 * var(--border-width-default));
   background: transparent;
   border: 0;
diff --git a/packages/ui/dist/styles/terminal.css b/packages/ui/dist/styles/terminal.css
index 6a2eaadaa..8ee7089f2 100644
--- a/packages/ui/dist/styles/terminal.css
+++ b/packages/ui/dist/styles/terminal.css
@@ -8,7 +8,7 @@ j3w1-terminal {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-terminal, j3w1-terminal *, j3w1-terminal *::before, j3w1-terminal *::after { box-sizing: border-box; }
-j3w1-terminal button, j3w1-terminal input, j3w1-terminal select, j3w1-terminal textarea { font: inherit; }
+j3w1-terminal :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-terminal ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/packages/ui/dist/styles/text-field.css b/packages/ui/dist/styles/text-field.css
index 4f7803669..ae3d2440f 100644
--- a/packages/ui/dist/styles/text-field.css
+++ b/packages/ui/dist/styles/text-field.css
@@ -8,7 +8,7 @@ j3w1-text-field {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-text-field, j3w1-text-field *, j3w1-text-field *::before, j3w1-text-field *::after { box-sizing: border-box; }
-j3w1-text-field button, j3w1-text-field input, j3w1-text-field select, j3w1-text-field textarea { font: inherit; }
+j3w1-text-field :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-text-field ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-text-field .sr-only {
   border: 0;
 }
 
+j3w1-text-field .combobox-label,
+j3w1-text-field .dialog-field-label,
+j3w1-text-field .field-label,
+j3w1-text-field .fieldset-label,
+j3w1-text-field .file-input-label,
+j3w1-text-field .number-field-label,
+j3w1-text-field .search-field-label,
+j3w1-text-field .select-label,
+j3w1-text-field .text-field-label,
+j3w1-text-field .textarea-label,
+j3w1-text-field .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-text-field .combobox-help,
+j3w1-text-field .date-picker-help,
+j3w1-text-field .dialog-field-help,
+j3w1-text-field .fieldset-help,
+j3w1-text-field .file-input-help,
+j3w1-text-field .number-field-help,
+j3w1-text-field .search-field-help,
+j3w1-text-field .select-help,
+j3w1-text-field .text-field-help,
+j3w1-text-field .textarea-help,
+j3w1-text-field .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-text-field .combobox-message,
+j3w1-text-field .date-picker-message,
+j3w1-text-field .file-input-message,
+j3w1-text-field .number-field-message,
+j3w1-text-field .radio-group-message,
+j3w1-text-field .select-message,
+j3w1-text-field .text-field-message,
+j3w1-text-field .textarea-message,
+j3w1-text-field .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-text-field .combobox-root,
+j3w1-text-field .date-picker-root,
+j3w1-text-field .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-text-field .text-field {
   position: relative;
   display: grid;
@@ -34,12 +94,6 @@ j3w1-text-field .text-field {
   color: var(--color-text-default);
 }
 
-j3w1-text-field .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-text-field .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -49,7 +103,7 @@ j3w1-text-field .text-field-root {
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -58,7 +112,7 @@ j3w1-text-field .text-field-root {
 j3w1-text-field .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -134,21 +188,6 @@ j3w1-text-field .text-field-loading {
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-j3w1-text-field .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-text-field .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-text-field .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/styles/textarea.css b/packages/ui/dist/styles/textarea.css
index d53a4e29c..8597fa1ce 100644
--- a/packages/ui/dist/styles/textarea.css
+++ b/packages/ui/dist/styles/textarea.css
@@ -8,7 +8,7 @@ j3w1-textarea {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-textarea, j3w1-textarea *, j3w1-textarea *::before, j3w1-textarea *::after { box-sizing: border-box; }
-j3w1-textarea button, j3w1-textarea input, j3w1-textarea select, j3w1-textarea textarea { font: inherit; }
+j3w1-textarea :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-textarea ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -25,6 +25,66 @@ j3w1-textarea .sr-only {
   border: 0;
 }
 
+j3w1-textarea .combobox-label,
+j3w1-textarea .dialog-field-label,
+j3w1-textarea .field-label,
+j3w1-textarea .fieldset-label,
+j3w1-textarea .file-input-label,
+j3w1-textarea .number-field-label,
+j3w1-textarea .search-field-label,
+j3w1-textarea .select-label,
+j3w1-textarea .text-field-label,
+j3w1-textarea .textarea-label,
+j3w1-textarea .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-textarea .combobox-help,
+j3w1-textarea .date-picker-help,
+j3w1-textarea .dialog-field-help,
+j3w1-textarea .fieldset-help,
+j3w1-textarea .file-input-help,
+j3w1-textarea .number-field-help,
+j3w1-textarea .search-field-help,
+j3w1-textarea .select-help,
+j3w1-textarea .text-field-help,
+j3w1-textarea .textarea-help,
+j3w1-textarea .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-textarea .combobox-message,
+j3w1-textarea .date-picker-message,
+j3w1-textarea .file-input-message,
+j3w1-textarea .number-field-message,
+j3w1-textarea .radio-group-message,
+j3w1-textarea .select-message,
+j3w1-textarea .text-field-message,
+j3w1-textarea .textarea-message,
+j3w1-textarea .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-textarea .combobox-root,
+j3w1-textarea .date-picker-root,
+j3w1-textarea .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-textarea .textarea {
   position: relative;
   display: grid;
@@ -34,12 +94,6 @@ j3w1-textarea .textarea {
   color: var(--color-text-default);
 }
 
-j3w1-textarea .textarea-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-textarea .textarea-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -57,8 +111,8 @@ j3w1-textarea .textarea-input {
   display: block;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) * 2);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) * 2);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -88,21 +142,6 @@ j3w1-textarea .textarea-count {
   line-height: var(--font-line-height-ui-sm);
   font-variant-numeric: tabular-nums;
 }
-
-j3w1-textarea .textarea-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-textarea .textarea-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-textarea .textarea-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/styles/time-picker.css b/packages/ui/dist/styles/time-picker.css
index 7312e174f..49984f7e2 100644
--- a/packages/ui/dist/styles/time-picker.css
+++ b/packages/ui/dist/styles/time-picker.css
@@ -8,7 +8,7 @@ j3w1-time-picker {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-time-picker, j3w1-time-picker *, j3w1-time-picker *::before, j3w1-time-picker *::after { box-sizing: border-box; }
-j3w1-time-picker button, j3w1-time-picker input, j3w1-time-picker select, j3w1-time-picker textarea { font: inherit; }
+j3w1-time-picker :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-time-picker ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,15 +26,15 @@ j3w1-time-picker .sr-only {
 }
 
 j3w1-time-picker :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-j3w1-time-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
-j3w1-time-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-j3w1-time-picker :where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-j3w1-time-picker :where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+j3w1-time-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-time-picker :where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+j3w1-time-picker :where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+j3w1-time-picker :where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 j3w1-time-picker .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 j3w1-time-picker .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-j3w1-time-picker .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+j3w1-time-picker .j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 j3w1-time-picker .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 j3w1-time-picker .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 j3w1-time-picker .j3w1-temporal :focus-visible,j3w1-time-picker .j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -58,7 +58,7 @@ j3w1-time-picker .j3w1-calendar [aria-pressed="true"] { background:var(--color-i
 j3w1-time-picker .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 j3w1-time-picker .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 j3w1-time-picker .j3w1-choice { display: block; min-width: min(calc(var(--font-size-ui-md) * 12), calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-j3w1-time-picker .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+j3w1-time-picker .j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 j3w1-time-picker .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 j3w1-time-picker .j3w1-choice-chevron { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-text-accent); }
 j3w1-time-picker .j3w1-choice-trigger:hover { background: var(--color-interaction-hover-bg); }
@@ -66,7 +66,7 @@ j3w1-time-picker .j3w1-choice-trigger:focus-visible,j3w1-time-picker .j3w1-choic
 j3w1-time-picker .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: calc(var(--font-size-ui-md) * 18); overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 j3w1-time-picker .j3w1-choice-list[popover] { inset: auto; }
 j3w1-time-picker .j3w1-choice-list[hidden] { display: none; }
-j3w1-time-picker .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+j3w1-time-picker .j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 j3w1-time-picker .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 j3w1-time-picker .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 j3w1-time-picker .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -80,19 +80,79 @@ j3w1-time-picker .j3w1-choice-error { display: block; color: var(--color-status-
 j3w1-time-picker .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 j3w1-time-picker .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 j3w1-time-picker :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-time-picker :where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,j3w1-time-picker input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+j3w1-time-picker input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+
+j3w1-time-picker .combobox-label,
+j3w1-time-picker .dialog-field-label,
+j3w1-time-picker .field-label,
+j3w1-time-picker .fieldset-label,
+j3w1-time-picker .file-input-label,
+j3w1-time-picker .number-field-label,
+j3w1-time-picker .search-field-label,
+j3w1-time-picker .select-label,
+j3w1-time-picker .text-field-label,
+j3w1-time-picker .textarea-label,
+j3w1-time-picker .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-time-picker .combobox-help,
+j3w1-time-picker .date-picker-help,
+j3w1-time-picker .dialog-field-help,
+j3w1-time-picker .fieldset-help,
+j3w1-time-picker .file-input-help,
+j3w1-time-picker .number-field-help,
+j3w1-time-picker .search-field-help,
+j3w1-time-picker .select-help,
+j3w1-time-picker .text-field-help,
+j3w1-time-picker .textarea-help,
+j3w1-time-picker .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-time-picker .combobox-message,
+j3w1-time-picker .date-picker-message,
+j3w1-time-picker .file-input-message,
+j3w1-time-picker .number-field-message,
+j3w1-time-picker .radio-group-message,
+j3w1-time-picker .select-message,
+j3w1-time-picker .text-field-message,
+j3w1-time-picker .textarea-message,
+j3w1-time-picker .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-time-picker .combobox-root,
+j3w1-time-picker .date-picker-root,
+j3w1-time-picker .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
 
 j3w1-time-picker .time-picker {
   position: relative;
@@ -104,16 +164,10 @@ j3w1-time-picker .time-picker {
   color: var(--color-text-default);
 }
 
-j3w1-time-picker .time-picker-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-time-picker .time-picker-root {
   display: inline-flex;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -121,7 +175,7 @@ j3w1-time-picker .time-picker-root {
 
 j3w1-time-picker .time-picker-input {
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -140,21 +194,6 @@ j3w1-time-picker .time-picker-input::selection {
 j3w1-time-picker .time-picker-input::-webkit-calendar-picker-indicator {
   cursor: pointer;
 }
-
-j3w1-time-picker .time-picker-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-time-picker .time-picker-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-time-picker .time-picker-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/styles/timeline.css b/packages/ui/dist/styles/timeline.css
index 96bc853f9..1663b31a3 100644
--- a/packages/ui/dist/styles/timeline.css
+++ b/packages/ui/dist/styles/timeline.css
@@ -8,7 +8,7 @@ j3w1-timeline {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-timeline, j3w1-timeline *, j3w1-timeline *::before, j3w1-timeline *::after { box-sizing: border-box; }
-j3w1-timeline button, j3w1-timeline input, j3w1-timeline select, j3w1-timeline textarea { font: inherit; }
+j3w1-timeline :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-timeline ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,7 +26,7 @@ j3w1-timeline .sr-only {
 }
 
 j3w1-timeline .timeline {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-timeline .timeline :focus-visible {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+j3w1-timeline .timeline :focus-visible {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 j3w1-timeline .timeline {list-style:none;margin:0}j3w1-timeline .timeline-item {display:grid;grid-template-columns:calc(var(--font-size-ui-md) * 6) 1fr;gap:var(--space-12);padding:var(--space-12);border-inline-start:var(--border-width-default) solid var(--color-border-divider)}j3w1-timeline .timeline-item[aria-current] {border-inline-start:var(--border-width-emphasis) solid var(--color-border-active)}j3w1-timeline .timeline p {margin:var(--space-4) 0 0}j3w1-timeline .timeline time {color:var(--color-text-muted)}
 
 j3w1-timeline [hidden] { display: none !important; }
diff --git a/packages/ui/dist/styles/toast.css b/packages/ui/dist/styles/toast.css
index 9e9803ff7..dfdf9a695 100644
--- a/packages/ui/dist/styles/toast.css
+++ b/packages/ui/dist/styles/toast.css
@@ -8,7 +8,7 @@ j3w1-toast {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-toast, j3w1-toast *, j3w1-toast *::before, j3w1-toast *::after { box-sizing: border-box; }
-j3w1-toast button, j3w1-toast input, j3w1-toast select, j3w1-toast textarea { font: inherit; }
+j3w1-toast :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-toast ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -144,7 +144,7 @@ j3w1-toast .toast-close:hover {
 }
 
 j3w1-toast .toast-action:hover {
-  background: var(--color-interaction-hover-bg-strong);
+  background: var(--color-interaction-hover-bg);
   color: var(--color-text-link-hover);
   text-decoration-thickness: 2px;
 }
diff --git a/packages/ui/dist/styles/toolbar.css b/packages/ui/dist/styles/toolbar.css
index a340245ca..90cbe4126 100644
--- a/packages/ui/dist/styles/toolbar.css
+++ b/packages/ui/dist/styles/toolbar.css
@@ -8,7 +8,7 @@ j3w1-toolbar {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-toolbar, j3w1-toolbar *, j3w1-toolbar *::before, j3w1-toolbar *::after { box-sizing: border-box; }
-j3w1-toolbar button, j3w1-toolbar input, j3w1-toolbar select, j3w1-toolbar textarea { font: inherit; }
+j3w1-toolbar :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-toolbar ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -28,9 +28,9 @@ j3w1-toolbar .sr-only {
 j3w1-toolbar .toolbar {
   display: flex;
   align-items: center;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   padding: var(--space-2) var(--space-4);
   overflow: hidden;
   background: var(--color-surface-chrome);
@@ -43,9 +43,9 @@ j3w1-toolbar .toolbar-button {
   align-items: center;
   gap: var(--space-4);
   flex: 0 0 auto;
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: var(--border-width-default) solid transparent;
   border-radius: var(--radius-none);
@@ -154,8 +154,8 @@ j3w1-toolbar .menu-button {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -204,8 +204,8 @@ j3w1-toolbar .menu-item {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -221,7 +221,7 @@ j3w1-toolbar .menu-check {
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-text-bright);
   visibility: hidden;
 }
@@ -263,8 +263,8 @@ j3w1-toolbar .menu-button:focus-visible {
 }
 
 j3w1-toolbar .menu-item:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 j3w1-toolbar .menu-button:focus:not(:focus-visible),
diff --git a/packages/ui/dist/styles/tooltip.css b/packages/ui/dist/styles/tooltip.css
index 39b5cdb8c..8053c9bfd 100644
--- a/packages/ui/dist/styles/tooltip.css
+++ b/packages/ui/dist/styles/tooltip.css
@@ -8,7 +8,7 @@ j3w1-tooltip {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-tooltip, j3w1-tooltip *, j3w1-tooltip *::before, j3w1-tooltip *::after { box-sizing: border-box; }
-j3w1-tooltip button, j3w1-tooltip input, j3w1-tooltip select, j3w1-tooltip textarea { font: inherit; }
+j3w1-tooltip :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-tooltip ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -36,8 +36,8 @@ j3w1-tooltip .tooltip {
 j3w1-tooltip .tooltip-trigger {
   display: inline-flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
diff --git a/packages/ui/dist/styles/tree.css b/packages/ui/dist/styles/tree.css
index 59bb6e5bf..b7690fa9e 100644
--- a/packages/ui/dist/styles/tree.css
+++ b/packages/ui/dist/styles/tree.css
@@ -8,7 +8,7 @@ j3w1-tree {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-tree, j3w1-tree *, j3w1-tree *::before, j3w1-tree *::after { box-sizing: border-box; }
-j3w1-tree button, j3w1-tree input, j3w1-tree select, j3w1-tree textarea { font: inherit; }
+j3w1-tree :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-tree ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -26,8 +26,15 @@ j3w1-tree .sr-only {
 }
 
 j3w1-tree .tree {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-j3w1-tree .tree-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-j3w1-tree .tree,j3w1-tree .tree [role=group] {list-style:none;padding:0;margin:0}j3w1-tree .tree [role=group] {padding-inline-start:var(--space-16)}j3w1-tree .tree [data-tree-label] {display:block;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent}j3w1-tree .tree [aria-expanded]>[data-tree-label]::before {content:'▸ '}j3w1-tree .tree [aria-expanded=true]>[data-tree-label]::before {content:'▾ '}j3w1-tree .tree [aria-selected=true]>[data-tree-label] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}j3w1-tree .tree [role=treeitem]:focus-visible>[data-tree-label] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}j3w1-tree .tree [aria-expanded=false]>[role=group] {display:none}j3w1-tree .tree [aria-disabled=true]>[data-tree-label] {color:var(--color-text-disabled)}
+j3w1-tree .tree,j3w1-tree .tree [role=group] {list-style:none;padding:0;margin:0}
+j3w1-tree .tree [role=group] {padding-inline-start:var(--space-16)}
+j3w1-tree .tree [data-tree-label] {display:block;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent}
+j3w1-tree .tree [aria-expanded]>[data-tree-label]::before {content:'▸ '}
+j3w1-tree .tree [aria-expanded=true]>[data-tree-label]::before {content:'▾ '}
+j3w1-tree .tree [aria-selected=true]>[data-tree-label] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}
+j3w1-tree .tree [role=treeitem]:focus-visible>[data-tree-label] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+j3w1-tree .tree [aria-expanded=false]>[role=group] {display:none}
+j3w1-tree .tree [aria-disabled=true]>[data-tree-label] {color:var(--color-text-disabled)}
 
 j3w1-tree .tree [aria-selected=true]:focus-visible>[data-tree-label] {outline-color:var(--color-interaction-focus-ring)}
 
diff --git a/packages/ui/dist/styles/wizard.css b/packages/ui/dist/styles/wizard.css
index 94b6fe859..4edc706e8 100644
--- a/packages/ui/dist/styles/wizard.css
+++ b/packages/ui/dist/styles/wizard.css
@@ -8,7 +8,7 @@ j3w1-wizard {
   line-height: var(--font-line-height-ui-md);
 }
 j3w1-wizard, j3w1-wizard *, j3w1-wizard *::before, j3w1-wizard *::after { box-sizing: border-box; }
-j3w1-wizard button, j3w1-wizard input, j3w1-wizard select, j3w1-wizard textarea { font: inherit; }
+j3w1-wizard :where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 j3w1-wizard ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
@@ -52,8 +52,8 @@ j3w1-wizard .wizard-step-button {
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   border-bottom: var(--border-width-emphasis) solid transparent;
@@ -119,8 +119,8 @@ j3w1-wizard .wizard-next {
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   border: var(--border-width-default) solid;
   border-radius: var(--radius-none);
   font: inherit;
@@ -247,6 +247,66 @@ j3w1-wizard .wizard[aria-busy="true"] .wizard-next {
   }
 }
 
+j3w1-wizard .combobox-label,
+j3w1-wizard .dialog-field-label,
+j3w1-wizard .field-label,
+j3w1-wizard .fieldset-label,
+j3w1-wizard .file-input-label,
+j3w1-wizard .number-field-label,
+j3w1-wizard .search-field-label,
+j3w1-wizard .select-label,
+j3w1-wizard .text-field-label,
+j3w1-wizard .textarea-label,
+j3w1-wizard .time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-wizard .combobox-help,
+j3w1-wizard .date-picker-help,
+j3w1-wizard .dialog-field-help,
+j3w1-wizard .fieldset-help,
+j3w1-wizard .file-input-help,
+j3w1-wizard .number-field-help,
+j3w1-wizard .search-field-help,
+j3w1-wizard .select-help,
+j3w1-wizard .text-field-help,
+j3w1-wizard .textarea-help,
+j3w1-wizard .time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-wizard .combobox-message,
+j3w1-wizard .date-picker-message,
+j3w1-wizard .file-input-message,
+j3w1-wizard .number-field-message,
+j3w1-wizard .radio-group-message,
+j3w1-wizard .select-message,
+j3w1-wizard .text-field-message,
+j3w1-wizard .textarea-message,
+j3w1-wizard .time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+j3w1-wizard .combobox-root,
+j3w1-wizard .date-picker-root,
+j3w1-wizard .number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
+
 j3w1-wizard .text-field {
   position: relative;
   display: grid;
@@ -256,12 +316,6 @@ j3w1-wizard .text-field {
   color: var(--color-text-default);
 }
 
-j3w1-wizard .text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 j3w1-wizard .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -271,7 +325,7 @@ j3w1-wizard .text-field-root {
   display: flex;
   min-width: 0;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -280,7 +334,7 @@ j3w1-wizard .text-field-root {
 j3w1-wizard .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -356,21 +410,6 @@ j3w1-wizard .text-field-loading {
   padding: 0 var(--space-8);
   color: var(--color-text-muted);
 }
-
-j3w1-wizard .text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-j3w1-wizard .text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
 j3w1-wizard .text-field-root:hover {
   background: var(--color-interaction-hover-bg);
 }
diff --git a/packages/ui/dist/tokens.css b/packages/ui/dist/tokens.css
index 69307ea93..ff49a74ad 100644
--- a/packages/ui/dist/tokens.css
+++ b/packages/ui/dist/tokens.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -356,7 +360,7 @@
   --z-toast: 40;
   --z-skip-link: 1000;
 }
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/packages/ui/src/behaviors/advanced.js b/packages/ui/src/behaviors/advanced.js
index 792e35cfa..b06b9dd67 100644
--- a/packages/ui/src/behaviors/advanced.js
+++ b/packages/ui/src/behaviors/advanced.js
@@ -1,4 +1,4 @@
-import { all, enabled, visible, rove, identify, nativeInput, make } from "../internal/dom.js";
+import { keyIndex, all, enabled, visible, rove, identify, nativeInput, make } from "../internal/dom.js";
 import { IDREFS } from "../../../../scripts/lib/markup.mjs";
 
 export function tree(root, { on }) {
@@ -35,7 +35,7 @@ export function tree(root, { on }) {
   on(treeRoot, "keydown", event => {
     const item = event.target.closest('[role="treeitem"]'); if (!item) return;
     const options = shown(), index = options.indexOf(item), rtl = getComputedStyle(treeRoot).direction === "rtl";
-    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) { event.preventDefault(); const next = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1))); rove(options, next); }
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) { event.preventDefault(); const next = keyIndex({ key: event.key, index, length: options.length, wrap: false }); rove(options, next); }
     else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) { event.preventDefault(); if (group(item)) { if (item.getAttribute("aria-expanded") !== "true") expand(item.id); else rove(shown(), shown().indexOf(item) + 1); } }
     else if (event.key === (rtl ? "ArrowRight" : "ArrowLeft")) { event.preventDefault(); if (group(item) && item.getAttribute("aria-expanded") === "true") expand(item.id, false); else if (parent(item)) rove(options, options.indexOf(parent(item))); }
     else if (["Enter", " "].includes(event.key)) { event.preventDefault(); activate(item); }
diff --git a/packages/ui/src/behaviors/navigation.js b/packages/ui/src/behaviors/navigation.js
index fecb87f45..2d90bd28d 100644
--- a/packages/ui/src/behaviors/navigation.js
+++ b/packages/ui/src/behaviors/navigation.js
@@ -1,4 +1,4 @@
-import { all, enabled, visible, rove, identify, nativeInput, announce, place } from "../internal/dom.js";
+import { keyIndex, all, enabled, visible, rove, identify, nativeInput, announce, place } from "../internal/dom.js";
 
 export function tabs(root, { on }, listOverride) {
   const list = listOverride ?? root.querySelector('[role="tablist"]');
@@ -46,7 +46,7 @@ export function toolbar(root, { on }) {
     const vertical = bar.getAttribute("aria-orientation") === "vertical", rtl = getComputedStyle(bar).direction === "rtl";
     const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
     if (![next, prev, "Home", "End"].includes(event.key)) return;
-    event.preventDefault(); rove(items, event.key === next ? index + 1 : event.key === prev ? index - 1 : event.key === "Home" ? 0 : items.length - 1);
+    event.preventDefault(); rove(items, keyIndex({ key: event.key, index, length: items.length, next, previous: prev }));
   });
   on(bar, "click", event => {
     const button = event.target.closest("button[aria-pressed]");
@@ -142,7 +142,7 @@ export function menu(root, { on }) {
   on(root, "keydown", event => {
     const item = event.target.closest('[role^="menuitem"]'); if (!item) return;
     const list = item.closest('[role="menu"]'), options = items(list), index = options.indexOf(item), rtl = getComputedStyle(list).direction === "rtl";
-    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) { event.preventDefault(); rove(options, event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1)); }
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) { event.preventDefault(); rove(options, keyIndex({ key: event.key, index, length: options.length })); }
     else if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") && list !== main) { event.preventDefault(); event.stopPropagation(); if (list !== main) { closeList(list); controller(list)?.focus(); } else hide(); }
     else if (event.key === (rtl ? "ArrowLeft" : "ArrowRight") && submenu(item)) { event.preventDefault(); showList(submenu(item), item); }
     else if (event.key === "Tab") hide();
diff --git a/packages/ui/src/behaviors/tables.js b/packages/ui/src/behaviors/tables.js
index fd914df3d..ada3f2df2 100644
--- a/packages/ui/src/behaviors/tables.js
+++ b/packages/ui/src/behaviors/tables.js
@@ -1,4 +1,4 @@
-import { all, enabled, rove, identify } from "../internal/dom.js";
+import { keyIndex, all, enabled, rove, identify } from "../internal/dom.js";
 
 export function table(root, { on }) {
   const element = root.querySelector("table"), body = element?.tBodies[0];
@@ -48,7 +48,7 @@ export function table(root, { on }) {
     if (event.key === " ") { event.preventDefault(); if (!selectAll) rows().filter(item => item !== row).forEach(item => item.setAttribute("aria-selected", "false")); row.setAttribute("aria-selected", String(row.getAttribute("aria-selected") !== "true")); anchor = row; reportSelection(); return; }
     if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
     event.preventDefault();
-    const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.max(0, Math.min(options.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+    const nextIndex = keyIndex({ key: event.key, index, length: options.length, wrap: false });
     const next = rove(options, nextIndex);
     if (event.shiftKey && selectAll) { anchor ??= row; const start = options.indexOf(anchor); options.forEach((item, i) => item.setAttribute("aria-selected", String(i >= Math.min(start, nextIndex) && i <= Math.max(start, nextIndex)))); reportSelection(); }
     else if (!selectAll) { setSelected([next.id]); reportSelection(); anchor = next; }
diff --git a/packages/ui/src/catalogue.mjs b/packages/ui/src/catalogue.mjs
index 37b0126b6..6d74515a9 100644
--- a/packages/ui/src/catalogue.mjs
+++ b/packages/ui/src/catalogue.mjs
@@ -4,58 +4,455 @@ const property = (name, type, description, controller = false, readonly = false)
 const method = (name, signature, description) => ({ name, signature, description });
 const event = (name, detail, description) => ({ name: `j3w1-${name}`, detail, description });
 const common = {
-  attributes: [{ name: "disabled", description: "Disable the native controls owned by this instance." }, { name: "loading", description: "Mark the primary control busy and prevent duplicate activation." }],
-  properties: [property("disabled", "boolean", "Delegates disabled state to native children."), property("name", "string", "Native control name; application form keys remain explicit.")],
-  methods: [method("refresh", "(): void", "Reconnect behavior after replacing native child structure."), method("focus", "(options?: FocusOptions): void", "Focus the first usable native control.")],
-  events: [],
+  attributes: [
+    { name: "disabled", description: "Disable the native controls owned by this instance." },
+    { name: "loading", description: "Mark the primary control busy and prevent duplicate activation." }
+  ],
+  properties: [
+    property("disabled", "boolean", "Delegates disabled state to native children."),
+    property("name", "string", "Native control name; application form keys remain explicit.")
+  ],
+  methods: [
+    method("refresh", "(): void", "Reconnect behavior after replacing native child structure."),
+    method("focus", "(options?: FocusOptions): void", "Focus the first usable native control.")
+  ],
+  events: []
 };
 const define = (ids, module, behavior, extra = {}) => {
   for (const id of ids.split(" ")) {
     const api = extra.api ?? {};
-    definitions[id] = { module, behavior, domReason: "Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.", ...extra, api: { attributes: [...common.attributes, ...(api.attributes ?? [])], properties: [...common.properties.filter(p => !(api.properties ?? []).some(own => own.name === p.name)), ...(api.properties ?? [])], methods: [...common.methods.filter(m => !(api.methods ?? []).some(own => own.name === m.name)), ...(api.methods ?? [])], events: api.events ?? [] } };
+    definitions[id] = {
+      module,
+      behavior,
+      domReason: "Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.",
+      ...extra,
+      api: {
+        attributes: [...common.attributes, ...(api.attributes ?? [])],
+        properties: [
+          ...common.properties.filter(p => !(api.properties ?? []).some(own => own.name === p.name)),
+          ...(api.properties ?? [])
+        ],
+        methods: [...common.methods.filter(m => !(api.methods ?? []).some(own => own.name === m.name)), ...(api.methods ?? [])],
+        events: api.events ?? []
+      }
+    };
   }
 };
-define("button icon-button button-group", "native", "actions", { display: "inline-block", api: { attributes: [{ name: "tone", description: "Button tone: primary, secondary, tertiary or destructive." }], events: [event("action", "{ action: string; pressed: boolean }", "A native button activated. Prevent default on this event to cancel the associated native default action.")] } });
+define(
+  "button icon-button button-group",
+  "native",
+  "actions",
+  {
+    display: "inline-block",
+    api: {
+      attributes: [{ name: "tone", description: "Button tone: primary, secondary, tertiary or destructive." }],
+      events: [
+        event("action", "{ action: string; pressed: boolean }", "A native button activated. Prevent default on this event to cancel the associated native default action.")
+      ]
+    }
+  }
+);
 define("link field fieldset radio-group segmented-control breadcrumbs skip-link card list description-list badge kbd timeline skeleton loading-indicator progress", "native", "content");
-define("text-field textarea select checkbox range number-field search-field date-picker time-picker", "native", "fields", { domReason: "Visible native controls retain FormData, labels, constraints, disabled fieldsets and reset. No duplicate form-value mechanism is installed.", api: {
-  attributes: ["value", "required", "readonly", "checked"].map(name => ({ name, description: `Forwards ${name} to the primary native control.` })),
-  properties: [property("value", "string", "Primary native value; assignment does not fabricate user events."), property("checked", "boolean", "Native checkbox state."), property("required", "boolean", "Native required constraint."), property("readOnly", "boolean", "Native readonly property."), property("form", "HTMLFormElement | null", "Owning native form.", false, true)],
-  methods: [method("checkValidity", "(): boolean", "Check owned native constraints."), method("reportValidity", "(): boolean", "Report the first invalid owned control."), method("clear", "(): void", "Clear an editable primary input and emit native input/change.")],
-  events: [event("change", "{ value: string; checked?: boolean; name: string }", "Native change from an owned control, alongside the original native event.")],
-} });
+define(
+  "text-field textarea select checkbox range number-field search-field date-picker time-picker",
+  "native",
+  "fields",
+  {
+    domReason: "Visible native controls retain FormData, labels, constraints, disabled fieldsets and reset. No duplicate form-value mechanism is installed.",
+    api: {
+      attributes: ["value", "required", "readonly", "checked"].map(name => ({ name, description: `Forwards ${name} to the primary native control.` })),
+      properties: [
+        property("value", "string", "Primary native value; assignment does not fabricate user events."),
+        property("checked", "boolean", "Native checkbox state."),
+        property("required", "boolean", "Native required constraint."),
+        property("readOnly", "boolean", "Native readonly property."),
+        property("form", "HTMLFormElement | null", "Owning native form.", false, true)
+      ],
+      methods: [
+        method("checkValidity", "(): boolean", "Check owned native constraints."),
+        method("reportValidity", "(): boolean", "Report the first invalid owned control."),
+        method("clear", "(): void", "Clear an editable primary input and emit native input/change.")
+      ],
+      events: [
+        event("change", "{ value: string; checked?: boolean; name: string }", "Native change from an owned control, alongside the original native event.")
+      ]
+    }
+  }
+);
 definitions.checkbox.api.properties.push(property("indeterminate", "boolean", "Native mixed state; Space changes a mixed checkbox to checked.", true));
 definitions.checkbox.api.properties.push(property("values", "string[]", "Values of checked native options in this instance.", true));
 definitions.select.api.properties.push(property("values", "string[]", "Selected values of a multiple native select.", true));
 definitions.select.domReason = "Theme-owned combobox/listbox presentation backed by the original native select for FormData, constraints, defaults and reset. The native control is visible only before enhancement or without JavaScript.";
 for (const id of ['date-picker','time-picker']) definitions[id].domReason = "Theme-owned date/time editor and controls backed by the original native input for form values and constraints. Native input is the no-JavaScript fallback.";
 for (const id of ["number-field", "text-field"]) definitions[id].api.methods.push(method("stepBy", "(amount: number): void", "Step a number input by the supplied number of native steps."));
-define("switch", "native", "switchControl", { display: "inline-block", api: { attributes: ["checked", "value"].map(name => ({ name, description: `Default switch ${name}.` })), properties: [property("checked", "boolean", "Immediate switch state; a named switch exposes a matching native hidden form value.", true)], events: [event("change", "{ checked: boolean; value: string; name: string }", "The user toggled the switch.")] } });
-define("file-input", "native", "fileInput", { api: { properties: [property("files", "File[]", "Current native files; files are never uploaded by the component.", true, true)], methods: [method("clear", "(): void", "Clear the current native file selection.")], events: [event("change", "{ value: string; name: string }", "Native file selection changed; read files from the component.")] } });
-define("tabs", "navigation", "tabs", { api: { attributes: [{ name: "activation", description: "automatic (default) or manual activation when arrowing among tabs." }], properties: [property("selectedId", "string", "ID of the selected enabled tab.", true)], methods: [method("select", "(id: string, focus?: boolean): HTMLElement", "Select an enabled tab by its exact ID.")], events: [event("select", "{ id: string; panelId: string }", "The user selected a tab.")] } });
+define(
+  "switch",
+  "native",
+  "switchControl",
+  {
+    display: "inline-block",
+    api: {
+      attributes: ["checked", "value"].map(name => ({ name, description: `Default switch ${name}.` })),
+      properties: [
+        property("checked", "boolean", "Immediate switch state; a named switch exposes a matching native hidden form value.", true)
+      ],
+      events: [event("change", "{ checked: boolean; value: string; name: string }", "The user toggled the switch.")]
+    }
+  }
+);
+define(
+  "file-input",
+  "native",
+  "fileInput",
+  {
+    api: {
+      properties: [property("files", "File[]", "Current native files; files are never uploaded by the component.", true, true)],
+      methods: [method("clear", "(): void", "Clear the current native file selection.")],
+      events: [
+        event("change", "{ value: string; name: string }", "Native file selection changed; read files from the component.")
+      ]
+    }
+  }
+);
+define(
+  "tabs",
+  "navigation",
+  "tabs",
+  {
+    api: {
+      attributes: [{ name: "activation", description: "automatic (default) or manual activation when arrowing among tabs." }],
+      properties: [property("selectedId", "string", "ID of the selected enabled tab.", true)],
+      methods: [method("select", "(id: string, focus?: boolean): HTMLElement", "Select an enabled tab by its exact ID.")],
+      events: [event("select", "{ id: string; panelId: string }", "The user selected a tab.")]
+    }
+  }
+);
 define("toolbar", "navigation", "toolbar", { api: { events: [event("action", "{ action: string; pressed: boolean }", "A toggle action changed.")] } });
-define("sidebar-nav disclosure", "navigation", "disclosure", { api: { properties: [property("open", "boolean", "Native details expansion when this component contains details.", true)], events: [event("toggle", "{ id: string; expanded: boolean }", "A native disclosure or navigation group changed.")] } });
-define("combobox", "navigation", "combobox", { api: { properties: [property("value", "string", "Typed or accepted input value.", true), property("open", "boolean", "List visibility.", true)], methods: [method("show", "(allOptions?: boolean): void", "Open the list, optionally showing every option."), method("hide", "(): void", "Close without discarding typed text.")], events: [event("change", "{ value: string; name: string }", "An option was accepted or the value cleared.")] } });
-define("menu", "navigation", "menu", { api: { properties: [property("open", "boolean", "Menu visibility.", true)], methods: [method("show", "(): void", "Open and focus the first menu item."), method("hide", "(focus?: boolean): void", "Close all menus, optionally restoring the trigger.")], events: [event("action", "{ action: string; checked: boolean }", "An enabled action or check item was invoked.")] } });
-define("dialog drawer", "overlays", "modal", { api: { properties: [property("open", "boolean", "Native modal state.", true), property("returnValue", "string", "Native dialog result.", true, true)], methods: [method("show", "(): void", "Open using native showModal and remember the opener."), method("close", "(value?: string): void", "Close with a result value.")], events: [event("open", "Record<string, never>", "The modal opened."), event("close", "{ returnValue: string }", "The modal closed and restored available opener focus."), event("cancel", "Record<string, never>", "Native cancel request; prevent default to keep the modal open."), event("action", "{ action: string }", "An explicit dialog action; prevent default to keep it open.")] } });
-define("tooltip", "overlays", "tooltip", { display: "inline-block", api: { properties: [property("open", "boolean", "Current tooltip visibility.", true, true)], methods: [method("show", "(): void", "Show the description unless dismissed in this hover/focus session."), method("hide", "(): void", "Hide and cancel pending timers.")] } });
-define("popover", "overlays", "popover", { api: { properties: [property("open", "boolean", "Non-modal panel visibility.", true)], methods: [method("show", "(): void", "Show next to the trigger."), method("hide", "(focus?: boolean): void", "Hide, optionally restoring trigger focus.")], events: [event("toggle", "{ expanded: boolean }", "The panel changed visibility.")] } });
-define("alert toast empty-state error-state chip", "overlays", "feedback", { api: { methods: [method("dismiss", "(id?: string): void", "Dismiss a message; focused actions move to the next available control.")], events: [event("dismiss", "{ id: string }", "Cancelable message dismissal."), event("retry", "Record<string, never>", "Request recovery; the host owns the result."), event("action", "{ action: string }", "An explicit message action.")] } });
-define("tree", "advanced", "tree", { api: { properties: [property("selectedId", "string", "Selected treeitem ID.", true)], methods: [method("expand", "(id: string, expanded?: boolean): void", "Expand or collapse a parent by ID.")], events: [event("select", "{ id: string }", "The user selected a visible enabled item."), event("toggle", "{ id: string; expanded: boolean }", "A parent expanded or collapsed.")] } });
-define("multiselect", "advanced", "multiselect", { api: { properties: [property("values", "string[]", "Selected native checkbox values, including hidden matches.", true)], methods: [method("clear", "(): void", "Clear every selected value and report the explicit change.")], events: [event("selection", "{ values: string[] }", "The selected values changed through interaction.")] } });
-define("repeater", "advanced", "repeater", { api: { attributes: [{ name: "max", description: "Maximum rows, default 10; positive integer up to 100." }], properties: [property("rowIds", "string[]", "Stable IDs in current source order.", true, true)], methods: [method("add", "(): string | null", "Append a row when below the configured limit."), method("remove", "(id: string): void", "Remove a known row and recover focus."), method("move", "(id: string, direction: number): void", "Move a row one position up or down.")], events: [event("rows", "{ ids: string[] }", "Row order or membership changed.")] } });
-define("command-palette", "advanced", "commandPalette", { api: { attributes: [{ name: "shortcut", description: "Opt in to Ctrl+K / Cmd+K; absence leaves global shortcuts to the host." }], properties: [property("open", "boolean", "Native modal state.", true)], methods: [method("show", "(): void", "Open and focus the command prompt."), method("close", "(): void", "Close and restore the opener.")], events: [event("command", "{ action: string; href: string | null }", "Invoke the chosen command; prevent default to handle a result link yourself.")] } });
-define("avatar", "display", "avatar", { display: "inline-block", api: { attributes: [{ name: "src", description: "Optional caller-owned image URL." }], properties: [property("src", "string", "Image URL; empty restores initials.", true)] } });
-define("chart", "display", "chart", { api: { properties: [property("data", "Array<{ label: string; value: number }>", "Finite non-negative one-series data; at most 200 rows.", true)] } });
-define("editor-search", "display", "editorSearch", { api: { properties: [property("source", "string", "Read-only literal source text.", true), property("query", "string", "Literal case-insensitive query.", true), property("matchCount", "number", "Current number of matches.", true, true)], methods: [method("next", "(direction?: number): void", "Move among existing matches without moving input focus.")] } });
-define("code-editor terminal diff-view diagnostics", "display", "developerView", { api: { methods: [method("setText", "(text: string): void", "Replace the bounded read-only text view; no code or shell execution occurs.")], events: [event("action", "{ action: string }", "Request a developer-view action; editing and execution belong to the host.")] } });
-define("table data-table filterable-table", "tables", "table", { api: { methods: [method("sort", "(column: number, direction?: 'ascending' | 'descending'): void", "Sort existing native rows by a column."), method("filter", "(query: string): void", "Filter existing rows by literal text.")], events: [event("sort", "{ column: number; direction: string }", "The user requested sorting."), event("selection", "{ ids: string[] }", "Selected row identities changed.")] } });
-define("pagination", "tables", "pagination", { api: { properties: [property("page", "number", "Current page when using local button-mode pagination.", true)], events: [event("page", "{ page: number }", "Local page choice changed; native href links continue to navigate.")] } });
-define("wizard", "forms", "wizard", { api: { properties: [property("step", "number", "Current zero-based step.", true)], methods: [method("next", "(): boolean", "Validate current native controls before advancing."), method("back", "(): void", "Return without validation.")], events: [event("step", "{ step: number }", "The active step changed."), event("complete", "Record<string, never>", "Final local validation succeeded; the host owns persistence.")] } });
-define("form-builder", "form-builder", "formBuilder", { styles: ["button", "text-field", "textarea", "select", "checkbox", "radio-group", "alert", "table"], api: { methods: [method("exportDefinition", "(): string", "Export the canonical bounded definition without entered preview values."), method("importDefinition", "(json: string): boolean", "Validate and import a complete definition without partial mutation.")] } });
-define("settings-panel admin-form", "forms", "formComposition", { styles: ["button", "field", "text-field", "checkbox", "radio-group", "select", "switch"], api: { events: [event("submit", "{ values: Array<[string, FormDataEntryValue]> }", "Validated local native form values; the host owns saving.")] } });
-define("file-browser", "compositions", "fileBrowser", { dependencies: ["tree"], styles: ["table"], api: { events: [event("open-file", "{ id: string }", "Request opening an existing file identity.")] } });
-define("compact-dashboard", "compositions", "dashboard", { dependencies: ["chart"], styles: ["table"], api: { events: [event("open-record", "{ id: string }", "Request an existing record.")] } });
-define("i3-window-frame", "compositions", "windowFrame", { api: { events: [event("window-action", "{ action: string }", "Request a host window action; the browser component does not control OS windows.")] } });
+define(
+  "sidebar-nav disclosure",
+  "navigation",
+  "disclosure",
+  {
+    api: {
+      properties: [property("open", "boolean", "Native details expansion when this component contains details.", true)],
+      events: [event("toggle", "{ id: string; expanded: boolean }", "A native disclosure or navigation group changed.")]
+    }
+  }
+);
+define(
+  "combobox",
+  "navigation",
+  "combobox",
+  {
+    api: {
+      properties: [
+        property("value", "string", "Typed or accepted input value.", true),
+        property("open", "boolean", "List visibility.", true)
+      ],
+      methods: [
+        method("show", "(allOptions?: boolean): void", "Open the list, optionally showing every option."),
+        method("hide", "(): void", "Close without discarding typed text.")
+      ],
+      events: [event("change", "{ value: string; name: string }", "An option was accepted or the value cleared.")]
+    }
+  }
+);
+define(
+  "menu",
+  "navigation",
+  "menu",
+  {
+    api: {
+      properties: [property("open", "boolean", "Menu visibility.", true)],
+      methods: [
+        method("show", "(): void", "Open and focus the first menu item."),
+        method("hide", "(focus?: boolean): void", "Close all menus, optionally restoring the trigger.")
+      ],
+      events: [event("action", "{ action: string; checked: boolean }", "An enabled action or check item was invoked.")]
+    }
+  }
+);
+define(
+  "dialog drawer",
+  "overlays",
+  "modal",
+  {
+    api: {
+      properties: [
+        property("open", "boolean", "Native modal state.", true),
+        property("returnValue", "string", "Native dialog result.", true, true)
+      ],
+      methods: [
+        method("show", "(): void", "Open using native showModal and remember the opener."),
+        method("close", "(value?: string): void", "Close with a result value.")
+      ],
+      events: [
+        event("open", "Record<string, never>", "The modal opened."),
+        event("close", "{ returnValue: string }", "The modal closed and restored available opener focus."),
+        event("cancel", "Record<string, never>", "Native cancel request; prevent default to keep the modal open."),
+        event("action", "{ action: string }", "An explicit dialog action; prevent default to keep it open.")
+      ]
+    }
+  }
+);
+define(
+  "tooltip",
+  "overlays",
+  "tooltip",
+  {
+    display: "inline-block",
+    api: {
+      properties: [property("open", "boolean", "Current tooltip visibility.", true, true)],
+      methods: [
+        method("show", "(): void", "Show the description unless dismissed in this hover/focus session."),
+        method("hide", "(): void", "Hide and cancel pending timers.")
+      ]
+    }
+  }
+);
+define(
+  "popover",
+  "overlays",
+  "popover",
+  {
+    api: {
+      properties: [property("open", "boolean", "Non-modal panel visibility.", true)],
+      methods: [
+        method("show", "(): void", "Show next to the trigger."),
+        method("hide", "(focus?: boolean): void", "Hide, optionally restoring trigger focus.")
+      ],
+      events: [event("toggle", "{ expanded: boolean }", "The panel changed visibility.")]
+    }
+  }
+);
+define(
+  "alert toast empty-state error-state chip",
+  "overlays",
+  "feedback",
+  {
+    api: {
+      methods: [
+        method("dismiss", "(id?: string): void", "Dismiss a message; focused actions move to the next available control.")
+      ],
+      events: [
+        event("dismiss", "{ id: string }", "Cancelable message dismissal."),
+        event("retry", "Record<string, never>", "Request recovery; the host owns the result."),
+        event("action", "{ action: string }", "An explicit message action.")
+      ]
+    }
+  }
+);
+define(
+  "tree",
+  "advanced",
+  "tree",
+  {
+    api: {
+      properties: [property("selectedId", "string", "Selected treeitem ID.", true)],
+      methods: [method("expand", "(id: string, expanded?: boolean): void", "Expand or collapse a parent by ID.")],
+      events: [
+        event("select", "{ id: string }", "The user selected a visible enabled item."),
+        event("toggle", "{ id: string; expanded: boolean }", "A parent expanded or collapsed.")
+      ]
+    }
+  }
+);
+define(
+  "multiselect",
+  "advanced",
+  "multiselect",
+  {
+    api: {
+      properties: [property("values", "string[]", "Selected native checkbox values, including hidden matches.", true)],
+      methods: [method("clear", "(): void", "Clear every selected value and report the explicit change.")],
+      events: [event("selection", "{ values: string[] }", "The selected values changed through interaction.")]
+    }
+  }
+);
+define(
+  "repeater",
+  "advanced",
+  "repeater",
+  {
+    api: {
+      attributes: [{ name: "max", description: "Maximum rows, default 10; positive integer up to 100." }],
+      properties: [property("rowIds", "string[]", "Stable IDs in current source order.", true, true)],
+      methods: [
+        method("add", "(): string | null", "Append a row when below the configured limit."),
+        method("remove", "(id: string): void", "Remove a known row and recover focus."),
+        method("move", "(id: string, direction: number): void", "Move a row one position up or down.")
+      ],
+      events: [event("rows", "{ ids: string[] }", "Row order or membership changed.")]
+    }
+  }
+);
+define(
+  "command-palette",
+  "advanced",
+  "commandPalette",
+  {
+    api: {
+      attributes: [{ name: "shortcut", description: "Opt in to Ctrl+K / Cmd+K; absence leaves global shortcuts to the host." }],
+      properties: [property("open", "boolean", "Native modal state.", true)],
+      methods: [
+        method("show", "(): void", "Open and focus the command prompt."),
+        method("close", "(): void", "Close and restore the opener.")
+      ],
+      events: [
+        event("command", "{ action: string; href: string | null }", "Invoke the chosen command; prevent default to handle a result link yourself.")
+      ]
+    }
+  }
+);
+define(
+  "avatar",
+  "display",
+  "avatar",
+  {
+    display: "inline-block",
+    api: {
+      attributes: [{ name: "src", description: "Optional caller-owned image URL." }],
+      properties: [property("src", "string", "Image URL; empty restores initials.", true)]
+    }
+  }
+);
+define("chart", "display", "chart", {
+  api: {
+    properties: [
+      property("data", "Array<{ label: string; value: number }>", "Finite non-negative one-series data; at most 200 rows.", true)
+    ]
+  }
+});
+define(
+  "editor-search",
+  "display",
+  "editorSearch",
+  {
+    api: {
+      properties: [
+        property("source", "string", "Read-only literal source text.", true),
+        property("query", "string", "Literal case-insensitive query.", true),
+        property("matchCount", "number", "Current number of matches.", true, true)
+      ],
+      methods: [method("next", "(direction?: number): void", "Move among existing matches without moving input focus.")]
+    }
+  }
+);
+define(
+  "code-editor terminal diff-view diagnostics",
+  "display",
+  "developerView",
+  {
+    api: {
+      methods: [
+        method("setText", "(text: string): void", "Replace the bounded read-only text view; no code or shell execution occurs.")
+      ],
+      events: [
+        event("action", "{ action: string }", "Request a developer-view action; editing and execution belong to the host.")
+      ]
+    }
+  }
+);
+define(
+  "table data-table filterable-table",
+  "tables",
+  "table",
+  {
+    api: {
+      methods: [
+        method("sort", "(column: number, direction?: 'ascending' | 'descending'): void", "Sort existing native rows by a column."),
+        method("filter", "(query: string): void", "Filter existing rows by literal text.")
+      ],
+      events: [
+        event("sort", "{ column: number; direction: string }", "The user requested sorting."),
+        event("selection", "{ ids: string[] }", "Selected row identities changed.")
+      ]
+    }
+  }
+);
+define(
+  "pagination",
+  "tables",
+  "pagination",
+  {
+    api: {
+      properties: [property("page", "number", "Current page when using local button-mode pagination.", true)],
+      events: [event("page", "{ page: number }", "Local page choice changed; native href links continue to navigate.")]
+    }
+  }
+);
+define(
+  "wizard",
+  "forms",
+  "wizard",
+  {
+    api: {
+      properties: [property("step", "number", "Current zero-based step.", true)],
+      methods: [
+        method("next", "(): boolean", "Validate current native controls before advancing."),
+        method("back", "(): void", "Return without validation.")
+      ],
+      events: [
+        event("step", "{ step: number }", "The active step changed."),
+        event("complete", "Record<string, never>", "Final local validation succeeded; the host owns persistence.")
+      ]
+    }
+  }
+);
+define(
+  "form-builder",
+  "form-builder",
+  "formBuilder",
+  {
+    styles: ["button", "text-field", "textarea", "select", "checkbox", "radio-group", "alert", "table"],
+    api: {
+      methods: [
+        method("exportDefinition", "(): string", "Export the canonical bounded definition without entered preview values."),
+        method("importDefinition", "(json: string): boolean", "Validate and import a complete definition without partial mutation.")
+      ]
+    }
+  }
+);
+define(
+  "settings-panel admin-form",
+  "forms",
+  "formComposition",
+  {
+    styles: ["button", "field", "text-field", "checkbox", "radio-group", "select", "switch"],
+    api: {
+      events: [
+        event("submit", "{ values: Array<[string, FormDataEntryValue]> }", "Validated local native form values; the host owns saving.")
+      ]
+    }
+  }
+);
+define(
+  "file-browser",
+  "compositions",
+  "fileBrowser",
+  {
+    dependencies: ["tree"],
+    styles: ["table"],
+    api: { events: [event("open-file", "{ id: string }", "Request opening an existing file identity.")] }
+  }
+);
+define("compact-dashboard", "compositions", "dashboard", {
+  dependencies: ["chart"],
+  styles: ["table"],
+  api: { events: [event("open-record", "{ id: string }", "Request an existing record.")] }
+});
+define(
+  "i3-window-frame",
+  "compositions",
+  "windowFrame",
+  {
+    api: {
+      events: [
+        event("window-action", "{ action: string }", "Request a host window action; the browser component does not control OS windows.")
+      ]
+    }
+  }
+);
 
 // Composition dependencies are registered and copied with their parent.
 definitions.breadcrumbs.module = "navigation"; definitions.breadcrumbs.behavior = "disclosure";
diff --git a/packages/ui/src/examples.mjs b/packages/ui/src/examples.mjs
index 700557b12..62c09ffe0 100644
--- a/packages/ui/src/examples.mjs
+++ b/packages/ui/src/examples.mjs
@@ -1,6 +1,6 @@
 import { parseFragment, serialize } from "parse5";
 import { splitVariants } from "../../../scripts/lib/spec.mjs";
-import { attribute, setAttribute, removeAttribute, hasClass, namespaceMarkup, walkMarkup } from "../../../scripts/lib/markup.mjs";
+import { attribute, setAttribute, removeAttribute, hasClass, renderDecorativeWhitespace, namespaceMarkup, walkMarkup } from "../../../scripts/lib/markup.mjs";
 import { anchorFor } from "../../../scripts/lib/anchors.mjs";
 import { escapeHtml as esc } from "../../../scripts/lib/hex-literals.mjs";
 import { builderMarkup } from "./examples/form-markup.mjs";
@@ -12,7 +12,11 @@ const wrap = (node, tag) => { const parent = node.parentNode, index = parent.chi
 
 function wizardMarkup(variant) {
   const labels = variant === "icons" ? ["Source", "Workspaces", "Bindings", "Review"] : ["Project", "Preferences", "Review"];
-  return `<div class="wizard" aria-label="Set up a local project"><ol class="wizard-steps">${labels.map((label, i) => `<li class="wizard-step"><button class="wizard-step-button" type="button" ${i ? "disabled" : 'aria-current="step"'}><span class="wizard-step-marker" aria-hidden="true">${i + 1}</span><span class="wizard-step-name">${label}</span></button></li>`).join("")}</ol>${labels.map((label, i) => `<section class="wizard-panel" aria-labelledby="wizard-title-${i}" ${i ? "hidden" : ""}><h3 class="wizard-title" id="wizard-title-${i}">Step ${i + 1} of ${labels.length}: ${label}</h3>${i < labels.length - 1 ? `<label for="wizard-value-${i}">${label} name</label><input class="text-field-input" id="wizard-value-${i}" name="step-${i}" required>` : `<p class="wizard-text">All previous values remain available. Complete requests host handling; it does not send a network request.</p>`}</section>`).join("")}<div class="wizard-actions"><button class="wizard-back" type="button">Back</button><button class="wizard-next" type="button">Next / complete</button></div></div>`;
+  return [
+    `<div class="wizard" aria-label="Set up a local project"><ol class="wizard-steps">${labels.map((label, i) => `<li class="wizard-step"><button class="wizard-step-button" type="button" ${i ? "disabled" : 'aria-current="step"'}><span class="wizard-step-marker" aria-hidden="true">${i + 1}</span><span class="wizard-step-name">${label}</span></button></li>`).join("")}</ol>${labels.map((label, i) => `<section class="wizard-panel" aria-labelledby="wizard-title-${i}" ${i ? "hidden" : ""}><h3 class="wizard-title" id="wizard-title-${i}">Step ${i + 1} of ${labels.length}: ${label}</h3>${i < labels.length - 1 ? `<label for="wizard-value-${i}">${label} name</label><input class="text-field-input" id="wizard-value-${i}" name="step-${i}" required>` : `<p class="wizard-text">All previous values remain available. Complete requests host handling; it does not send a network request.</p>`}</section>`).join("")}<div class="wizard-actions">`
+      + `<button class="wizard-back" type="button">Back</button><button class="wizard-next" type="button">Next / complete</button>`,
+    `</div></div>`
+  ].join("");
 }
 
 function widthMenu(index, label) {
@@ -23,15 +27,63 @@ function tableMarkup(id, variant) {
   const data = id !== "table", cls = data ? "data-table" : "table", selectable = data && variant !== "default", resizable = variant === "resizable";
   const columns = ["Project", "Owner", "Status", "Scope"];
   const records = variant === "empty" ? [] : [["Atlas library", "Avery Kim", "Ready", "24"], ["Orion workspace", "Jordan Lee", "In progress", "12"], ["Field notes", "Morgan Noor", "Ready", "38"], ["Signal monitor", "Riley Stone", "Review", "6"]];
-  return `<div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="${cls}" ${variant === "loading" ? 'aria-busy="true"' : ""}><caption class="table-caption">Project records · synthetic fixture</caption><thead class="${cls}-head"><tr>${selectable ? '<th class="data-table-header data-table-header-select" scope="col"><button class="data-table-select-all" type="button" role="checkbox" aria-checked="false" aria-label="Select all rows"><span class="data-table-check-glyph" aria-hidden="true">✓</span></button></th>' : ""}${columns.map((label, i) => `<th class="${cls}-header" scope="col"><button class="${cls}-sort" type="button">${label}<span class="${cls}-sort-glyph" aria-hidden="true">↕</span></button>${resizable ? `<span class="data-table-resize" aria-hidden="true"></span>${widthMenu(i + Number(selectable), label)}` : ""}</th>`).join("")}</tr></thead><tbody class="${cls}-body">${records.map((record, index) => `<tr class="${cls}-row" id="record-${index}" data-status="${record[2]}" ${data ? `aria-selected="false" tabindex="${index === 0 ? "0" : "-1"}"` : ""}>${selectable ? `<td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="record-name-${index}"></td>` : ""}${record.map((value, i) => `<td class="${cls}-cell" ${i === 0 ? `id="record-name-${index}"` : ""}>${value}</td>`).join("")}</tr>`).join("")}<tr class="${cls}-empty" ${records.length ? "hidden" : ""}><td class="${cls}-empty-cell" colspan="${columns.length + Number(selectable)}">No rows match.</td></tr><tr class="${cls}-loading" ${variant === "loading" ? "" : "hidden"}><td colspan="${columns.length + Number(selectable)}">⋯ Loading rows</td></tr></tbody></table></div>`;
+  const selectionHeader = selectable
+    ? '<th class="data-table-header data-table-header-select" scope="col"><button class="data-table-select-all" type="button" role="checkbox" aria-checked="false" aria-label="Select all rows"><span class="data-table-check-glyph" aria-hidden="true">✓</span></button></th>'
+    : "";
+  const headers = columns.map((label, i) => [
+    `<th class="${cls}-header" scope="col"><button class="${cls}-sort" type="button">${label}`,
+    `<span class="${cls}-sort-glyph" aria-hidden="true">↕</span></button>`,
+    resizable ? `<span class="data-table-resize" aria-hidden="true"></span>${widthMenu(i + Number(selectable), label)}` : "",
+    `</th>`,
+  ].join("")).join("");
+  const rows = records.map((record, index) => {
+    const selectionCell = selectable
+      ? `<td class="data-table-cell data-table-cell-select"><input class="data-table-checkbox" type="checkbox" aria-labelledby="record-name-${index}"></td>`
+      : "";
+    const cells = record.map((value, i) =>
+      `<td class="${cls}-cell" ${i === 0 ? `id="record-name-${index}"` : ""}>${value}</td>`
+    ).join("");
+    return [
+      `<tr class="${cls}-row" id="record-${index}" data-status="${record[2]}" ${data ? `aria-selected="false" tabindex="${index === 0 ? "0" : "-1"}"` : ""}>`,
+      selectionCell, cells, `</tr>`,
+    ].join("");
+  }).join("");
+  return [
+    `<div class="table-scroller" tabindex="0" role="region" aria-label="Project records"><table class="${cls}" ${variant === "loading" ? 'aria-busy="true"' : ""}>`,
+    `<caption class="table-caption">Project records · synthetic fixture</caption><thead class="${cls}-head"><tr>`,
+    selectionHeader, headers, `</tr></thead><tbody class="${cls}-body">`, rows,
+    `<tr class="${cls}-empty" ${records.length ? "hidden" : ""}><td class="${cls}-empty-cell" colspan="${columns.length + Number(selectable)}">No rows match.</td></tr>`,
+    `<tr class="${cls}-loading" ${variant === "loading" ? "" : "hidden"}><td colspan="${columns.length + Number(selectable)}">⋯ Loading rows</td></tr></tbody></table></div>`,
+  ].join("");
 }
 
 function filterableMarkup(variant) {
-  return `<section class="filterable-table" aria-label="Project records"><div class="filterable-table-toolbar"><j3w1-search-field><div class="search-field"><label class="search-field-label" for="records-search">Search projects</label><div class="search-field-root"><input class="search-field-input" id="records-search" type="search"><button class="search-field-clear" type="button" aria-label="Clear search">Clear</button></div></div></j3w1-search-field><label for="records-status">Status<select class="select-control" id="records-status" data-status-filter><option value="all">All statuses</option><option>Ready</option><option>In progress</option><option>Review</option></select></label></div>${tableMarkup("data-table", variant === "default" ? "selectable" : variant)}<p class="filterable-table-count" role="status" data-table-status></p></section>`;
+  return [
+    `<section class="filterable-table" aria-label="Project records"><div class="filterable-table-toolbar"><j3w1-search-field>`,
+    `<div class="search-field"><label class="search-field-label" for="records-search">Search projects</label><div class="search-field-root">`,
+    `<input class="search-field-input" id="records-search" type="search"><button class="search-field-clear" type="button" aria-label="Clear search">Clear</button>`,
+    `</div></div></j3w1-search-field><label for="records-status">Status<select class="select-control" id="records-status" data-status-filter>`,
+    `<option value="all">All statuses</option><option>Ready</option><option>In progress</option><option>Review</option>`,
+    `</select></label></div>${tableMarkup("data-table", variant === "default" ? "selectable" : variant)}<p class="filterable-table-count" role="status" data-table-status></p></section>`
+  ].join("");
 }
 
 function adminMarkup(variant) {
-  return `<section class="admin-form" ${variant === "review" ? 'data-start="review"' : ""}><h2 class="admin-form-title">Project details</h2><p>Review the local values before passing them to your app.</p><form data-native-form><fieldset class="fieldset"><legend>Project information</legend><j3w1-text-field><div class="text-field"><label class="text-field-label" for="project-name">Project name</label><div class="text-field-root"><input class="text-field-input" id="project-name" name="project" value="Atlas library" required></div></div></j3w1-text-field><j3w1-textarea><div class="textarea"><label class="textarea-label" for="project-notes">Notes</label><textarea class="textarea-input" id="project-notes" name="notes" rows="3">A reusable component library.</textarea></div></j3w1-textarea><j3w1-select><div class="select"><label class="select-label" for="project-scope">Scope</label><div class="select-root"><select class="select-control" id="project-scope" name="scope"><option value="library">Library</option><option value="application">Application</option></select></div></div></j3w1-select></fieldset><div class="form-tool-actions"><button class="button" type="submit">Review values</button><button class="button button-secondary" type="reset">Reset</button></div></form><section data-form-review hidden aria-label="Review project values"><h3 tabindex="-1">Review values</h3><table class="table"><caption>Values to pass to the host</caption><tbody></tbody></table><div class="form-tool-actions"><button class="button button-secondary" type="button" data-form-edit>Edit values</button><button class="button" type="button" data-form-confirm>Confirm values</button></div></section><p role="status" data-form-status></p></section>`;
+  return [
+    `<section class="admin-form" ${variant === "review" ? 'data-start="review"' : ""}><h2 class="admin-form-title">Project details</h2><p>Review the local values before passing them to your app.</p>`,
+    `<form data-native-form><fieldset class="fieldset"><legend>Project information</legend><j3w1-text-field><div class="text-field">`,
+    `<label class="text-field-label" for="project-name">Project name</label><div class="text-field-root"><input class="text-field-input" id="project-name" name="project" value="Atlas library" required>`,
+    `</div></div></j3w1-text-field><j3w1-textarea><div class="textarea"><label class="textarea-label" for="project-notes">Notes</label>`,
+    `<textarea class="textarea-input" id="project-notes" name="notes" rows="3">A reusable component library.</textarea>`,
+    `</div></j3w1-textarea><j3w1-select><div class="select"><label class="select-label" for="project-scope">Scope</label>`,
+    `<div class="select-root"><select class="select-control" id="project-scope" name="scope"><option value="library">Library</option>`,
+    `<option value="application">Application</option></select></div></div></j3w1-select></fieldset><div class="form-tool-actions">`,
+    `<button class="button" type="submit">Review values</button><button class="button button-secondary" type="reset">Reset</button>`,
+    `</div></form><section data-form-review hidden aria-label="Review project values"><h3 tabindex="-1">Review values</h3>`,
+    `<table class="table"><caption>Values to pass to the host</caption><tbody></tbody></table><div class="form-tool-actions">`,
+    `<button class="button button-secondary" type="button" data-form-edit>Edit values</button><button class="button" type="button" data-form-confirm>Confirm values</button>`,
+    `</div></section><p role="status" data-form-status></p></section>`
+  ].join("");
 }
 
 export function renderUsage(component, variant, prefix) {
@@ -69,7 +121,13 @@ export function renderUsage(component, variant, prefix) {
   }
   if (component.id === "toolbar" && variant === "overflow") {
     const more = nodes(tree).find(node => hasClass(node, "toolbar-more"));
-    if (more) replace(more, `<j3w1-menu><div class="menu"><button class="toolbar-button toolbar-more" type="button" id="toolbar-more-trigger" aria-haspopup="menu" aria-expanded="false" aria-controls="toolbar-more-menu" tabindex="-1">More</button><ul class="menu-list" role="menu" id="toolbar-more-menu" aria-labelledby="toolbar-more-trigger" hidden><li role="none"><button class="menu-item" type="button" role="menuitem" tabindex="-1" data-action="format">Format</button></li><li role="none"><button class="menu-item" type="button" role="menuitemcheckbox" tabindex="-1" aria-checked="false" data-action="whitespace">Show whitespace</button></li></ul></div></j3w1-menu>`);
+    if (more) replace(more, [
+    `<j3w1-menu><div class="menu"><button class="toolbar-button toolbar-more" type="button" id="toolbar-more-trigger" aria-haspopup="menu" aria-expanded="false" aria-controls="toolbar-more-menu" tabindex="-1">More</button>`,
+    `<ul class="menu-list" role="menu" id="toolbar-more-menu" aria-labelledby="toolbar-more-trigger" hidden><li role="none">`,
+    `<button class="menu-item" type="button" role="menuitem" tabindex="-1" data-action="format">Format</button></li>`,
+    `<li role="none"><button class="menu-item" type="button" role="menuitemcheckbox" tabindex="-1" aria-checked="false" data-action="whitespace">Show whitespace</button>`,
+    `</li></ul></div></j3w1-menu>`
+  ].join(""));
   }
   if (component.id === "i3-window-frame") {
     const list = nodes(tree).find(node => hasClass(node, "i3-window-frame-workspaces"));
@@ -125,6 +183,7 @@ export function renderUsage(component, variant, prefix) {
   const known = new Set(nodes(tree).map(node => attribute(node, "id")).filter(Boolean));
   const targets = new Set(nodes(tree).map(node => attribute(node, "href")).filter(href => href?.startsWith("#") && href.length > 1).map(href => href.slice(1)).filter(id => !known.has(id)));
   for (const id of targets) append(tree, `<p id="${esc(id)}" tabindex="-1" class="j3w1-example-target">Example destination: ${esc(id.replaceAll("-", " "))}</p>`);
+  renderDecorativeWhitespace(tree);
   namespaceMarkup(tree, id => anchorFor.uiExample(prefix, id), { strict: false, renameNames: component.id !== "form-builder" });
   const attributes = component.id === "repeater" ? ' max="10"' : "";
   return `<j3w1-${component.id} id="${prefix}"${attributes}>${serialize(tree)}</j3w1-${component.id}>`;
diff --git a/packages/ui/src/examples/form-markup.mjs b/packages/ui/src/examples/form-markup.mjs
index b60d5a74d..061c30abc 100644
--- a/packages/ui/src/examples/form-markup.mjs
+++ b/packages/ui/src/examples/form-markup.mjs
@@ -2,15 +2,26 @@ import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
 import { escapeHtml as esc } from "../../../../scripts/lib/hex-literals.mjs";
 
 export function workflowMarkup(prefix) {
-  return `<section class="admin-form form-tool" data-workflow="${esc(prefix)}" hidden><h2 class="admin-form-title">Try the local workflow</h2><p>Values stay in this page. Reset clears them. No save request is sent.</p><form novalidate><div class="alert alert-danger form-tool-summary" data-errors role="alert" tabindex="-1" hidden></div><fieldset class="form-tool-fields" data-fields aria-label="Enter values"></fieldset><div class="form-tool-actions"><button class="button" type="submit" data-event="submit">Review values</button></div></form><table data-review class="table" hidden></table><p data-status role="status" tabindex="-1" id="${anchorFor.formField(prefix, "workflow", "status")}"></p><div class="form-tool-actions"><button class="button" type="button" data-event="edit" hidden>Edit values</button><button class="button" type="button" data-event="confirm" hidden>Simulate save</button><button class="button" type="button" data-event="complete" hidden>Complete simulation</button><button class="button" type="button" data-event="reset">Reset values</button></div></section>`;
+  return `<section class="admin-form form-tool" data-workflow="${esc(prefix)}" hidden>`
+    + `<h2 class="admin-form-title">Try the local workflow</h2><p>Values stay in this page. Reset clears them. No save request is sent.</p>`
+    + `<form novalidate><div class="alert alert-danger form-tool-summary" data-errors role="alert" tabindex="-1" hidden>`
+    + `</div><fieldset class="form-tool-fields" data-fields aria-label="Enter values">`
+    + `</fieldset><div class="form-tool-actions"><button class="button" type="submit" data-event="submit">Review values</button>`
+    + `</div></form><table data-review class="table" hidden></table>`
+    + `<p data-status role="status" tabindex="-1" id="${anchorFor.formField(prefix, "workflow", "status")}">`
+    + `</p><div class="form-tool-actions"><button class="button button-secondary" type="button" data-event="edit" hidden>Edit values</button>`
+    + `<button class="button button-secondary" type="button" data-event="confirm" hidden>Simulate save</button>`
+    + `<button class="button button-secondary" type="button" data-event="complete" hidden>Complete simulation</button>`
+    + `<button class="button button-tertiary" type="button" data-event="reset">Reset values</button>`
+    + `</div></section>`;
 }
 
 export function builderMarkup(prefix) {
   const id = name => anchorFor.uiExample(prefix, name);
   return `<section class="form-builder form-tool" data-builder hidden aria-label="Form definition editor">
-<div class="form-builder-editor"><label for="${id("kind")}">Field type<select id="${id("kind")}" data-kind><option value="text">Text</option><option value="textarea">Textarea</option><option value="select">Select</option><option value="checkbox">Checkbox</option><option value="radio">Radio</option></select></label><button class="button" type="button" data-add>Add field</button><label for="${id("density")}">Preview density<select id="${id("density")}" data-density-choice><option value="compact">Compact</option><option value="comfortable">Comfortable</option></select></label></div>
+<div class="form-builder-editor"><label for="${id("kind")}">Field type<select id="${id("kind")}" data-kind><option value="text">Text</option><option value="textarea">Textarea</option><option value="select">Select</option><option value="checkbox">Checkbox</option><option value="radio">Radio</option></select></label><button class="button button-secondary" type="button" data-add>Add field</button><label for="${id("density")}">Preview density<select id="${id("density")}" data-density-choice><option value="compact">Compact</option><option value="comfortable">Comfortable</option></select></label></div>
 <p data-builder-status role="status"></p><p data-empty>No fields yet. Choose a type and add your first field.</p><ol class="form-builder-list" data-field-list></ol>
-<form class="form-builder-editor" data-editor novalidate hidden><h2>Edit selected field</h2><label for="${id("label")}">Field label<input id="${id("label")}" name="label" maxlength="120" required></label><label for="${id("help")}">Field help<textarea id="${id("help")}" name="help" maxlength="400"></textarea></label><label for="${id("required")}"><input id="${id("required")}" name="required" type="checkbox">Required field</label><label for="${id("options")}" data-options-label>Options JSON<textarea id="${id("options")}" name="options" rows="6" maxlength="65537" spellcheck="false"></textarea></label><p>Edit option IDs and labels as JSON. Keep each ID when changing its label. Select and radio fields need 1–20 options.</p><div class="form-tool-actions"><button class="button" type="submit">Save field definition</button><button class="button button-secondary" type="button" data-cancel>Cancel edit</button></div></form>
+<form class="form-builder-editor" data-editor novalidate hidden><h2>Edit selected field</h2><label for="${id("label")}">Field label<input id="${id("label")}" name="label" maxlength="120" required></label><label for="${id("help")}">Field help<textarea id="${id("help")}" name="help" maxlength="400"></textarea></label><label for="${id("required")}"><input id="${id("required")}" name="required" type="checkbox">Required field</label><label for="${id("options")}" data-options-label>Options JSON<textarea id="${id("options")}" name="options" rows="6" maxlength="65537" spellcheck="false"></textarea></label><p>Edit option IDs and labels as JSON. Keep each ID when changing its label. Select and radio fields need 1–20 options.</p><div class="form-tool-actions"><button class="button button-secondary" type="submit">Save field definition</button><button class="button button-secondary" type="button" data-cancel>Cancel edit</button></div></form>
 <h2>Preview</h2><p>Definition changes clear preview values. Review validates required values and choices.</p><div data-preview>${workflowMarkup(id("preview"))}</div>
-<h2>Transfer definition</h2><p>Schema version 1 accepts at most 64 KiB and 20 fields. Invalid imports leave the current definition unchanged. Export excludes entered preview values.</p><div class="form-builder-editor"><label for="${id("json")}">Definition JSON<textarea id="${id("json")}" data-json rows="10" spellcheck="false" maxlength="65537"></textarea></label></div><div class="form-tool-actions"><button class="button" type="button" data-export>Show definition JSON</button><button class="button button-secondary" type="button" data-download>Download definition</button><button class="button button-secondary" type="button" data-import>Import definition JSON</button><button class="button button-secondary" type="button" data-reset>Reset builder</button></div></section><p>The bounded form editor requires JavaScript. Its definition is plain JSON with stable field IDs, labels, help, required flags and explicit option IDs.</p>`;
+<h2>Transfer definition</h2><p>Schema version 1 accepts at most 64 KiB and 20 fields. Invalid imports leave the current definition unchanged. Export excludes entered preview values.</p><div class="form-builder-editor"><label for="${id("json")}">Definition JSON<textarea id="${id("json")}" data-json rows="10" spellcheck="false" maxlength="65537"></textarea></label></div><div class="form-tool-actions"><button class="button button-secondary" type="button" data-export>Show definition JSON</button><button class="button button-secondary" type="button" data-download>Download definition</button><button class="button button-secondary" type="button" data-import>Import definition JSON</button><button class="button button-secondary" type="button" data-reset>Reset builder</button></div></section><p>The bounded form editor requires JavaScript. Its definition is plain JSON with stable field IDs, labels, help, required flags and explicit option IDs.</p>`;
 }
diff --git a/packages/ui/src/internal/dom.js b/packages/ui/src/internal/dom.js
index fc4b10fab..bbf3d03b3 100644
--- a/packages/ui/src/internal/dom.js
+++ b/packages/ui/src/internal/dom.js
@@ -19,6 +19,13 @@ export function announce(root, message) {
 }
 export function identify(root, node, suffix) { if (node && !node.id) node.id = `${root.id}-${suffix}`; return node?.id; }
 export function nativeInput(input, type = "input") { input.dispatchEvent(new Event(type, { bubbles: true })); }
+export function keyIndex({ key, index, length, next = "ArrowDown", previous = "ArrowUp", wrap = true }) {
+  if (key === "Home") return 0;
+  if (key === "End") return length - 1;
+  const target = index + (key === next ? 1 : key === previous ? -1 : 0);
+  return wrap ? (target + length) % length : Math.max(0, Math.min(length - 1, target));
+}
+
 export function rove(items, index, focus = true) {
   if (!items.length) return null;
   const next = items[(index + items.length) % items.length];
diff --git a/playwright.smoke.config.mjs b/playwright.smoke.config.mjs
index 450699529..41a2012e3 100644
--- a/playwright.smoke.config.mjs
+++ b/playwright.smoke.config.mjs
@@ -15,6 +15,6 @@ export default defineConfig({
   reporter: "list",
   outputDir: "test-results/smoke",
   grepInvert: /axe finds no WCAG|enhancements: search narrows the contents/,
-  testMatch: ["page.spec.js", "portal.spec.js", "components/button.spec.js", "components/text-field.spec.js"],
+  testMatch: ["page.spec.js", "portal.spec.js", "components/button.spec.js", "components/text-field.spec.js", "reference-hub.spec.js"],
   projects: base.projects.filter((p) => p.name === "desktop"),
 });
diff --git a/ports/README.md b/ports/README.md
index f439d5243..4f88d49e5 100644
--- a/ports/README.md
+++ b/ports/README.md
@@ -1,7 +1,7 @@
 # Application ports
 
-One folder per app. Each folder holds everything for that app: the theme
-file, its installer if it has one, and one guide.
+One folder per app, holding its theme files, its installer if it has one, and
+one guide.
 
 ## Which one do I need
 
@@ -19,12 +19,12 @@ file, its installer if it has one, and one guide.
 | Windows 11 native and Windhawk theme | [windows](windows/README.md) | `windows-settings.json`, `terminal-fragment.json`, `terminal-theme.json`, `fancyzones-layouts.json`, `windows-11-taskbar-styler.json`, `windows-11-start-menu-styler.json`, `windows-11-file-explorer-styler.json`, `windows-11-notification-center-styler.json`, `windows-11-settings-styler.json`, `j3w1-wallpaper.bmp`, `j3w1.theme`, `j3w1-arrow.cur`, `j3w1-help.cur`, `j3w1-appstarting.cur`, `j3w1-wait.cur`, `j3w1-crosshair.cur`, `j3w1-ibeam.cur`, `j3w1-nwpen.cur`, `j3w1-no.cur`, `j3w1-sizens.cur`, `j3w1-sizewe.cur`, `j3w1-sizenwse.cur`, `j3w1-sizenesw.cur`, `j3w1-sizeall.cur`, `j3w1-uparrow.cur`, `j3w1-hand.cur`, `j3w1-pin.cur`, `j3w1-person.cur`, `runtime.cjs`, `install-manifest.json`, `j3w1-explorer-native.wh.cpp`, `j3w1-explorer-native.json`, `j3w1-powertoys-preview.wh.cpp`, `j3w1-powertoys-preview.json`, `j3w1-calculator.wh.cpp`, `j3w1-calculator.json`, `j3w1-powertoys-markdown.wh.cpp`, `j3w1-powertoys-markdown.json`, `markdown-theme.css`, `j3w1-folder.ico`, `j3w1-folder-open.ico`, `j3w1-notepad-native.wh.cpp`, `j3w1-notepad-native.json`, `j3w1-notepad-chrome.wh.cpp`, `j3w1-notepad-chrome.json`, `j3w1-paint-chrome.wh.cpp`, `j3w1-paint-chrome.json`, `j3w1-terminal-chrome.wh.cpp`, `j3w1-terminal-chrome.json` |
 <!-- guides:end -->
 
-Claude Code and Codex run inside a terminal and use its sixteen colours for
-code, links and status. Install a terminal theme too.
+Claude Code and Codex use the terminal's sixteen colours for code, links and
+status; install a terminal theme too.
 
-All ports are experimental: they are generated and checked, but no real import
-has been recorded yet. Each file is also in the Downloads table of the
-repository README and on the site's Ports page, pinned to a release.
+All ports are experimental: generated and checked, with no real import
+recorded. Each file is also in the repository README's Downloads table and on
+the site's Ports page, pinned to a release.
 
 ## Install commands
 
@@ -56,34 +56,66 @@ Each app's guide has the full steps: install, update, restore, what it
 changes and its limits.
 
 Historical implementations (the owner's gedit scheme, IntelliJ scheme, tmux
-and browser-extension colours) are catalogued in `references/catalogue.json`;
-they are evidence of origin, not supported downloads.
+and browser-extension colours) are catalogued in `references/catalogue.json`
+as evidence of origin, not supported downloads.
+
+## Claude Code and Codex installers
+
+`ports/claude-code/install.mjs` and `ports/codex/install.mjs` share their code
+(`scripts/lib/host-install/`) and this behaviour; each guide adds its own
+files, settings and limits.
+
+- `apply` writes the theme file and one setting and prints what it did; after
+  `git pull` it installs the commit your clone is on. `--dry-run` shows the
+  plan first.
+- `update --version` with a release tag, for example `v3.0.0`, installs that
+  release and prints what changes. Tags before v3.0.0 are refused. Values
+  always come from git objects at that commit, never from files you have
+  edited.
+- `restore` undoes the installer's changes to its own app only. `--latest`
+  undoes only the newest change; `--backup <name>` undoes that one backup;
+  `--dry-run` shows the plan. If a value changed after the installer set it,
+  restore warns, puts back the earlier value and keeps the replaced one in its
+  own backup. If a restore stops partway, it says which command finishes it.
+- Before writing it plans every change and checks each edited file with a
+  real parse. Each file is read again just before its write; if another
+  program changed it, that file is planned again once, and if it changes again
+  the run stops. The export must match `exports/digests.json` from the same
+  commit.
+- `test` checks the installed commit, even after your clone moves on, says
+  when the clone is ahead, and prints the host's limits.
+- Backups and records go to `${XDG_STATE_HOME:-~/.local/state}/j3w1-theme`,
+  shared by both. If only the terminal kit's old folder
+  (`…/j3w1-theme/devbox`) holds backups, the installer keeps using it and says
+  so, so restore still brings back your original settings. Set
+  `J3W1_THEME_STATE_DIR` or pass `--state-dir` where that folder is not
+  writable (on the CE devbox, `~/.local/state` takes only registered tool
+  folders); the older `J3W1_TERMINAL_KIT_STATE_DIR` still works, with a
+  warning. If the state folder is not writable, nothing is changed.
+- Installing without the installer has no backup or restore.
+
+Tests: `tests/host-install.test.js`. Changing what a host shows is a
+specification change, made through a `proposed` entry in `spec/decisions.md`;
+pointing `host.json` at a different role is one too.
 
 ## For maintainers
 
-A port is created under `ports/<slug>/` only when implementation work begins,
-from `templates/port/`. Each port carries `port.json` (validated by
-`schemas/port.mjs`; its `format` is one of `PORT_FORMATS` there),
-`mapping.json` (spec role → native key, with every unmapped role listed),
-`dist/` (committed importable files, written by `npm run generate` when the
-port's `format` has an emitter in `scripts/lib/port-artifacts.mjs`). Add `src/`
-only for real generator inputs and `evidence/` only for actual records with
-application version, OS and date; neither needs a placeholder. Generation
-rebuilds absent emitted files, while validation and drift checks require them.
-Every emitter returns its complete declared text or byte artifact set; unsafe, duplicate,
-missing or extra paths fail before any port artifact is written.
-A port with an installer also carries `host.json` (which native key takes
+The port layout, statuses and emitter rules are in `spec/portability.md`,
+Native ports. `port.json` is validated by `schemas/port.mjs` (its `format` is
+one of `PORT_FORMATS` there); `evidence/` holds only actual records with
+application version, OS and date. Generation rebuilds absent emitted files,
+while validation and drift checks require them. A port with an installer also
+carries `host.json` (which native key takes
 which role, the host versions it was observed on, and its deviations) and the
 installer itself: `install/` for Orca, `install.mjs` for Claude Code and Codex,
 whose shared code is `scripts/lib/host-install/`. Their emitters call the
 installers' generators, and `mapping.json` must agree with `host.json` key for
 key. An installer takes every value from the commit its files came from.
 
-Statuses: `experimental` (artifacts exist, checks pass, real-target verification
-incomplete), `verified` (imported into the recorded target with matching
-evidence and a current token digest), `deprecated` (with a reason). A parse
-success is a structural pass, not verification. The README support table is
-generated from these manifests and says so when the directory is empty.
+`experimental` means artifacts exist and checks pass but real-target
+verification is incomplete; `deprecated` carries a reason. The README support
+table is generated from these manifests and says so when the directory is
+empty.
 
 `mapping.json` uses schema version 1 (`schemas/json/port-mapping.schema.json`):
 `mappings` maps each theme role path to an array of native key strings;
@@ -114,10 +146,10 @@ exact artifact hashes, current resolved profile tokens and the token-export
 digest. Records can be marked verified only when that subject still matches,
 the manifest declares verified, target/tested versions include the recorded
 version, the recorded platform is a declared target, and all recorded checks
-actually passed. A parse or synthetic fixture
-cannot supply a real-import protocol.
+actually passed. A parse or synthetic fixture cannot supply a real-import
+protocol.
 
-The generator writes `exports/port-capabilities.json`; summaries, detail rows
-and task kits consume it. Consumers fetch it at their own pinned revision.
-Do not place private parity reports here automatically. Any public integration
-evidence still requires explicit content/license review.
+The generator writes `exports/port-capabilities.json` for summaries, detail
+rows and task kits; consumers fetch it at their own pinned revision. Never
+place private parity reports here automatically; public integration evidence
+still needs explicit content and licence review.
diff --git a/ports/chatgpt/README.md b/ports/chatgpt/README.md
index df49524ad..d28432d60 100644
--- a/ports/chatgpt/README.md
+++ b/ports/chatgpt/README.md
@@ -5,17 +5,16 @@ True-black ChatGPT with the j3w1 red and rose. Two presets:
 - **j3w1 Signature**: the strongest j3w1 look. Recommended.
 - **j3w1 Reading**: a calmer rose for long reading.
 
-This port targets the **ChatGPT desktop app**, Settings > Appearance. It has
-custom accent, background and foreground colours, a contrast slider, font
-sizes and theme import. What you see depends on your platform, account, plan,
-app version and rollout. In a web browser, many accounts still show only the
-basic appearance controls (light, dark, system and a list of accent colours).
-Then only the Mode, and an accent close to the one below, apply.
+This port targets the **ChatGPT desktop app**, Settings > Appearance (custom
+accent, background and foreground, a contrast slider, font sizes, theme
+import). What you see depends on your platform, account, plan, app version and
+rollout. Many web-browser accounts show only light, dark, system and a list of
+accents; then only the Mode and the nearest accent apply.
 
 Status: **experimental**. The import strings follow the public description of
-ChatGPT's `codex-theme-v1` format. The code theme id `chatgpt` behind the
+ChatGPT's `codex-theme-v1` format; the code theme id `chatgpt` behind the
 Theme row is a guess. The strings count as verified only once imported into a
-real ChatGPT build and checked against the table. The tables work on their
+real ChatGPT build and checked against the table; the tables work on their
 own.
 
 ## Install
@@ -88,25 +87,18 @@ foreground toward white: the rose text is a large part of the j3w1 look.
 
 ## Where the values come from
 
-Every colour and size is a theme role, resolved from the approved `default`
-profile when the port is generated (`src/presets.json` names the roles).
+Every colour and size is a theme role from the approved `default` profile,
+named in `src/presets.json`: foreground `color.text.bright` (Signature) or
+`color.text.default` (Reading), accent `color.interaction.focus.ring`,
+background `color.surface.canvas`, sizes `font.size.reading` and
+`font.size.code`; in the import string, diff and skill colours
+`color.status.success.text`, `color.status.danger.text` and
+`color.text.accent`.
 
-- Signature's foreground is `color.text.bright`.
-- Reading's foreground is `color.text.default`.
-- The accent is `color.interaction.focus.ring`.
-- The background is `color.surface.canvas`.
-- The sizes are `font.size.reading` and `font.size.code`.
-- In the import string, the diff and skill colours are
-  `color.status.success.text`, `color.status.danger.text` and
-  `color.text.accent`.
-
-Contrast (46 and 52), diff markers (+/-), reduce motion and the base theme
-are ChatGPT settings, not theme roles. They are calibration chosen in real
-use. Diff markers stay on because j3w1 never shows a change by colour alone.
-
-ChatGPT has one foreground for all text. j3w1 has a ladder (prose, bright,
-default, muted, subtle), so each preset picks one step. That is a choice for
-this app only; the theme's own roles do not change.
+Contrast, diff markers, reduce motion and the base theme are ChatGPT settings
+calibrated in real use, not theme roles. Diff markers stay on because j3w1
+never shows a change by colour alone. ChatGPT has one foreground for all text,
+so each preset picks one step of the j3w1 text ladder, for this app only.
 
 ## Limits
 
@@ -133,9 +125,9 @@ is installed on disk.
 
 - `src/presets.json`: the source: roles, calibration, preset names.
 - `evidence/<build>.codex-theme.txt`: a theme string ChatGPT itself exported,
-  with `# build:` and `# date:` lines. Record one when you verify an import.
-  Generation then checks that the port emits the same format as the newest
-  one, and stops if ChatGPT changed it.
-- `dist/presets.json`: generated. Both presets with every setting, where each
-  value comes from, and the import strings.
+  with `# build:` and `# date:` lines; record one when you verify an import.
+  Generation then checks the port still emits the newest one's format and
+  stops if ChatGPT changed it.
+- `dist/presets.json`: generated; both presets with every setting, each
+  value's source, and the import strings.
 - `port.json`, `mapping.json`, `capabilities.json`: the port contract.
diff --git a/ports/chatgpt/capabilities.json b/ports/chatgpt/capabilities.json
index bb61c72fb..65a14d089 100644
--- a/ports/chatgpt/capabilities.json
+++ b/ports/chatgpt/capabilities.json
@@ -1534,6 +1534,16 @@
       "surface": "typography",
       "reason": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default)."
     },
+    "font.line-height.display": {
+      "state": "unsupported",
+      "surface": "typography",
+      "reason": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default)."
+    },
+    "font.line-height.title": {
+      "state": "unsupported",
+      "surface": "typography",
+      "reason": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default)."
+    },
     "font.line-height.h1": {
       "state": "unsupported",
       "surface": "typography",
@@ -1584,6 +1594,16 @@
       "surface": "appearance-settings",
       "reason": "Set by Code font size."
     },
+    "font.size.display": {
+      "state": "unsupported",
+      "surface": "typography",
+      "reason": "ChatGPT has only a UI size and a code size."
+    },
+    "font.size.title": {
+      "state": "unsupported",
+      "surface": "typography",
+      "reason": "ChatGPT has only a UI size and a code size."
+    },
     "font.size.h1": {
       "state": "unsupported",
       "surface": "typography",
diff --git a/ports/chatgpt/mapping.json b/ports/chatgpt/mapping.json
index 89194e9ed..a75d61ada 100644
--- a/ports/chatgpt/mapping.json
+++ b/ports/chatgpt/mapping.json
@@ -324,6 +324,8 @@
     "font.letter-spacing.terminal": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).",
     "font.line-height.caption": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).",
     "font.line-height.code": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).",
+    "font.line-height.display": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).",
+    "font.line-height.title": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).",
     "font.line-height.h1": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).",
     "font.line-height.h2": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).",
     "font.line-height.h3": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).",
@@ -333,6 +335,8 @@
     "font.line-height.ui-md": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).",
     "font.line-height.ui-sm": "ChatGPT uses its own fonts (the UI and code font can be chosen by name, but the port leaves them as the system default).",
     "font.size.caption": "ChatGPT has only a UI size and a code size.",
+    "font.size.display": "ChatGPT has only a UI size and a code size.",
+    "font.size.title": "ChatGPT has only a UI size and a code size.",
     "font.size.h1": "ChatGPT has only a UI size and a code size.",
     "font.size.h2": "ChatGPT has only a UI size and a code size.",
     "font.size.h3": "ChatGPT has only a UI size and a code size.",
diff --git a/ports/chatgpt/port.json b/ports/chatgpt/port.json
index 7e0ee0ff4..976ae8808 100644
--- a/ports/chatgpt/port.json
+++ b/ports/chatgpt/port.json
@@ -4,7 +4,7 @@
   "displayName": "ChatGPT desktop app (Appearance)",
   "status": "experimental",
   "themeVersion": "4.0.0",
-  "tokenDigest": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY=",
+  "tokenDigest": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU=",
   "profile": "default",
   "format": "chatgpt-appearance",
   "targetVersions": [
diff --git a/ports/claude-code/README.md b/ports/claude-code/README.md
index 792db036b..68e1c95fb 100644
--- a/ports/claude-code/README.md
+++ b/ports/claude-code/README.md
@@ -2,12 +2,11 @@
 
 A Claude Code custom theme, `custom:j3w1`, built only from approved roles:
 rose text, the red accent, your messages on the selected-row red, status,
-diff and usage colours. Everything for Claude Code is in this folder. Status:
-experimental (no recorded import evidence yet).
+diff and usage colours. Status: experimental (no recorded import evidence).
 
-You need Node 24, Git and a clone of this repository, and Claude Code 2.1.281
-or later. Claude Code also uses the terminal's sixteen colours (see Limits),
-so install the terminal theme too, for example [`../orca/`](../orca/README.md).
+Needs Node 24, Git, a clone of this repository and Claude Code 2.1.281 or
+later. Claude Code also uses the terminal's sixteen colours (see Limits), so
+install a terminal theme too, for example [`../orca/`](../orca/README.md).
 
 ## Install
 
@@ -29,21 +28,18 @@ Release v3.0.0 (commit `f0e9e25a00357c0b47ae3d1392b87e5bc0aa91e6`).
    ```
 <!-- install:end -->
 
-The installer writes the theme file and one setting, and prints what it did.
-Add `--dry-run` to see the plan first.
+The installer behaves as described in
+[Claude Code and Codex installers](../README.md#claude-code-and-codex-installers):
+`--dry-run`, `update --version`, `restore`, backups and state folder.
 
 **Without the installer:** save `dist/j3w1.json` as `~/.claude/themes/j3w1.json`
-and set `"theme": "custom:j3w1"` in `~/.claude/settings.json`. This route has no
-backup or restore.
+and set `"theme": "custom:j3w1"` in `~/.claude/settings.json`.
 
 ## Update
 
-After `git pull`, `node ports/claude-code/install.mjs apply` installs the
-commit your clone is on. To install a release by its tag instead, run
-`node ports/claude-code/install.mjs update --version` with the tag, for example
-`v3.0.0`; it prints what changes, role by role. Tags before v3.0.0 are refused.
-Values always come from git objects at that commit, never from files you have
-edited.
+`node ports/claude-code/install.mjs apply` after `git pull`, or
+`node ports/claude-code/install.mjs update --version v3.0.0` for a release tag;
+it prints what changes, role by role.
 
 ## Restore
 
@@ -51,15 +47,8 @@ edited.
 node ports/claude-code/install.mjs restore
 ```
 
-It puts `"theme"` back to what it was (or removes it) and deletes the theme
-file if the installer created it. It restores Claude Code only; Codex has its
-own installer.
-
-- `--latest` undoes only the newest change; `--backup <name>` undoes that one
-  backup. `--dry-run` shows the plan.
-- If a value changed after the installer set it, restore warns, puts back the
-  earlier value and keeps the replaced one in its own backup.
-- If a restore stops partway, it says which command finishes it.
+Puts `"theme"` back to what it was (or removes it) and deletes the theme file
+if the installer created it. Claude Code only.
 
 ## What it changes
 
@@ -68,42 +57,25 @@ own installer.
 - `"theme": "custom:j3w1"` in `~/.claude/settings.json`. Only that key changes;
   every other byte, the byte-order mark and the line endings are kept.
 - It follows `CLAUDE_CONFIG_DIR` and `HOME`, so inside an agent session it acts
-  on that session's configuration. `--claude-config-dir` picks another one.
-- Backups and records go to `${XDG_STATE_HOME:-~/.local/state}/j3w1-theme`,
-  shared with the Codex installer. If only the terminal kit's old folder
-  (`…/j3w1-theme/devbox`) holds backups, the installer keeps using it and says
-  so, so restore still brings back your original settings. Set `J3W1_THEME_STATE_DIR` or pass
-  `--state-dir` where that folder is not writable (on the CE devbox,
-  `~/.local/state` takes only registered tool folders). The older
-  `J3W1_TERMINAL_KIT_STATE_DIR` still works, with a warning. If the state
-  folder is not writable, nothing is changed.
+  on that session's configuration; `--claude-config-dir` picks another one.
 - `color.border.overlay` (dialog borders) is a use-and-report role under D-008;
   every run says so.
 
-Before writing anything it plans every change and checks each edited file
-with a real parse. Each file is read again just before its write; if another
-program changed it, that file is planned again once, and if it changes again
-the run stops. The export must match `exports/digests.json` from the same
-commit. `test` checks the commit that is installed, even after your clone
-moves on, and says when the clone is ahead.
-
-**Restart once.** Claude Code sessions that were already running when the
-themes folder was first created need one restart. After that, changes load
-live.
+**Restart once.** Sessions already running when the themes folder was first
+created need one restart; after that, changes load live.
 
 ## Limits
 
-These are Claude Code's limits; `test` prints them.
+Claude Code's own; `test` prints them.
 
 - Highlighted code, links (slot 12), diff + and - markers and file previews
-  use fixed terminal colours. No theme reaches them; the terminal theme
-  decides how they look.
+  use fixed terminal colours; the terminal theme decides how they look.
 - Word-level diff changes can only be a background, so they keep the line
   tint instead of the theme's underline.
 - The selected item in a picker changes its text colour only; there is no
   selection fill.
-- Subagent names get seven different colours for eight names (cyan and pink
-  share one), because the theme has no extra hues for text.
+- Subagent names get seven colours for eight names (cyan and pink share one):
+  the theme has no extra hues for text.
 - Mouse selection keeps each span's own colour on the selection background;
   some colours fall below 4.5:1 there.
 - Inline code uses Claude Code's permission colour (the dialog border).
@@ -112,15 +84,10 @@ These are Claude Code's limits; `test` prints them.
 
 ## Files
 
-- `install.mjs`: the installer. Its code is shared with the Codex installer in
-  `scripts/lib/host-install/`.
+- `install.mjs`: the installer (shared code in `scripts/lib/host-install/`).
 - `host.json`: which Claude Code theme key takes which role, and the limits
   above.
 - `dist/j3w1.json`: the theme file, generated from `host.json` by
   `npm run generate`; do not edit it.
 - `port.json`, `mapping.json`, `capabilities.json`: the port's scope, every
   native key, and the reason for each role that is not mapped.
-
-Tests: `tests/host-install.test.js`. To change what Claude Code shows, change
-the specification through a `proposed` entry in `spec/decisions.md`; pointing
-`host.json` at a different role is a specification change too.
diff --git a/ports/claude-code/capabilities.json b/ports/claude-code/capabilities.json
index c3d010929..46408d1e4 100644
--- a/ports/claude-code/capabilities.json
+++ b/ports/claude-code/capabilities.json
@@ -1510,6 +1510,16 @@
       "surface": "outside-claude",
       "reason": "Not a colour; a Claude Code theme carries colours only."
     },
+    "font.line-height.display": {
+      "state": "out-of-scope",
+      "surface": "outside-claude",
+      "reason": "Not a colour; a Claude Code theme carries colours only."
+    },
+    "font.line-height.title": {
+      "state": "out-of-scope",
+      "surface": "outside-claude",
+      "reason": "Not a colour; a Claude Code theme carries colours only."
+    },
     "font.line-height.h1": {
       "state": "out-of-scope",
       "surface": "outside-claude",
@@ -1560,6 +1570,16 @@
       "surface": "outside-claude",
       "reason": "Not a colour; a Claude Code theme carries colours only."
     },
+    "font.size.display": {
+      "state": "out-of-scope",
+      "surface": "outside-claude",
+      "reason": "Not a colour; a Claude Code theme carries colours only."
+    },
+    "font.size.title": {
+      "state": "out-of-scope",
+      "surface": "outside-claude",
+      "reason": "Not a colour; a Claude Code theme carries colours only."
+    },
     "font.size.h1": {
       "state": "out-of-scope",
       "surface": "outside-claude",
diff --git a/ports/claude-code/mapping.json b/ports/claude-code/mapping.json
index a2fbece55..9685d49a5 100644
--- a/ports/claude-code/mapping.json
+++ b/ports/claude-code/mapping.json
@@ -399,6 +399,8 @@
     "font.letter-spacing.terminal": "Not a colour; a Claude Code theme carries colours only.",
     "font.line-height.caption": "Not a colour; a Claude Code theme carries colours only.",
     "font.line-height.code": "Not a colour; a Claude Code theme carries colours only.",
+    "font.line-height.display": "Not a colour; a Claude Code theme carries colours only.",
+    "font.line-height.title": "Not a colour; a Claude Code theme carries colours only.",
     "font.line-height.h1": "Not a colour; a Claude Code theme carries colours only.",
     "font.line-height.h2": "Not a colour; a Claude Code theme carries colours only.",
     "font.line-height.h3": "Not a colour; a Claude Code theme carries colours only.",
@@ -409,6 +411,8 @@
     "font.line-height.ui-sm": "Not a colour; a Claude Code theme carries colours only.",
     "font.size.caption": "Not a colour; a Claude Code theme carries colours only.",
     "font.size.code": "Not a colour; a Claude Code theme carries colours only.",
+    "font.size.display": "Not a colour; a Claude Code theme carries colours only.",
+    "font.size.title": "Not a colour; a Claude Code theme carries colours only.",
     "font.size.h1": "Not a colour; a Claude Code theme carries colours only.",
     "font.size.h2": "Not a colour; a Claude Code theme carries colours only.",
     "font.size.h3": "Not a colour; a Claude Code theme carries colours only.",
diff --git a/ports/claude-code/port.json b/ports/claude-code/port.json
index 6786abdef..7439642c0 100644
--- a/ports/claude-code/port.json
+++ b/ports/claude-code/port.json
@@ -4,7 +4,7 @@
   "displayName": "Claude Code (custom theme)",
   "status": "experimental",
   "themeVersion": "4.0.0",
-  "tokenDigest": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY=",
+  "tokenDigest": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU=",
   "profile": "default",
   "format": "claude-theme-json",
   "targetVersions": [
diff --git a/ports/codex/README.md b/ports/codex/README.md
index 45f75ba56..088ce1a0e 100644
--- a/ports/codex/README.md
+++ b/ports/codex/README.md
@@ -4,13 +4,11 @@ A syntax theme for the Codex CLI, `j3w1`, built only from approved roles. It
 uses the opt-in coloured code roles (D-030): green strings; amber numbers,
 constants, functions, attributes and escapes; blue types and properties;
 bright-rose operators. Keywords, tags, comments, variables and punctuation
-keep the rose code roles. Everything for Codex is in this folder. Status:
-experimental (no recorded import evidence yet).
+keep the rose code roles. Status: experimental (no recorded import evidence).
 
-You need Node 24, Git and a clone of this repository (with `npm ci` done),
-and Codex CLI 0.156.1 or later. Codex also uses the terminal's colours (see
-Limits), so install the terminal theme too, for example
-[`../orca/`](../orca/README.md).
+Needs Node 24, Git, a clone of this repository (with `npm ci` done) and Codex
+CLI 0.156.1 or later. Codex also uses the terminal's colours (see Limits), so
+install a terminal theme too, for example [`../orca/`](../orca/README.md).
 
 ## Install
 
@@ -33,21 +31,19 @@ Release v3.0.0 (commit `f0e9e25a00357c0b47ae3d1392b87e5bc0aa91e6`).
    ```
 <!-- install:end -->
 
-The installer writes the theme file and one setting, and prints what it did.
-Add `--dry-run` to see the plan first.
+The installer behaves as described in
+[Claude Code and Codex installers](../README.md#claude-code-and-codex-installers):
+`--dry-run`, `update --version`, `restore`, backups and state folder.
 
 **Without the installer:** save `dist/j3w1.tmTheme` as
 `~/.codex/themes/j3w1.tmTheme` and set `theme = "j3w1"` under `[tui]` in
-`~/.codex/config.toml`. This route has no backup or restore.
+`~/.codex/config.toml`.
 
 ## Update
 
-After `git pull`, `node ports/codex/install.mjs apply` installs the commit
-your clone is on. To install a release by its tag instead, run
-`node ports/codex/install.mjs update --version` with the tag, for example
-`v3.0.0`; it prints what changes, value by value. Tags before v3.0.0 are
-refused. Values always come from git objects at that commit, never from files
-you have edited.
+`node ports/codex/install.mjs apply` after `git pull`, or
+`node ports/codex/install.mjs update --version v3.0.0` for a release tag; it
+prints what changes, value by value.
 
 ## Restore
 
@@ -55,16 +51,9 @@ you have edited.
 node ports/codex/install.mjs restore
 ```
 
-It puts `theme` under `[tui]` back to what it was (or removes it, and the
-`[tui]` table if the installer added it) and deletes the theme file if the
-installer created it. It restores Codex only; Claude Code has its own
-installer.
-
-- `--latest` undoes only the newest change; `--backup <name>` undoes that one
-  backup. `--dry-run` shows the plan.
-- If a value changed after the installer set it, restore warns, puts back the
-  earlier value and keeps the replaced one in its own backup.
-- If a restore stops partway, it says which command finishes it.
+Puts `theme` under `[tui]` back to what it was (or removes it, and the `[tui]`
+table if the installer added it) and deletes the theme file if the installer
+created it. Codex only.
 
 ## What it changes
 
@@ -79,27 +68,12 @@ installer.
 - **Codex in Orca.** Orca links `~/.codex/themes` into its Codex runtime home
   and copies `tui.theme` at each Codex pane launch, so the installer never
   writes anything Orca owns. `test` checks that runtime home read-only.
-- Backups and records go to `${XDG_STATE_HOME:-~/.local/state}/j3w1-theme`,
-  shared with the Claude Code installer. If only the terminal kit's old folder
-  (`…/j3w1-theme/devbox`) holds backups, the installer keeps using it and says
-  so, so restore still brings back your original settings. Set `J3W1_THEME_STATE_DIR` or pass
-  `--state-dir` where that folder is not writable (on the CE devbox,
-  `~/.local/state` takes only registered tool folders). The older
-  `J3W1_TERMINAL_KIT_STATE_DIR` still works, with a warning. If the state
-  folder is not writable, nothing is changed.
-
-Before writing anything it plans every change and checks each edited file
-with a real parse. Each file is read again just before its write; if another
-program changed it, that file is planned again once, and if it changes again
-the run stops. The export must match `exports/digests.json` from the same
-commit. `test` checks the commit that is installed, even after your clone
-moves on.
 
 **New sessions only.** A running Codex keeps the theme it started with.
 
 ## Limits
 
-These are Codex's limits; `test` prints them.
+Codex's own; `test` prints them.
 
 - Status, diff signs, the brand and the status line use terminal colours 1 to
   6 that Codex names; no theme reaches them.
@@ -109,19 +83,14 @@ These are Codex's limits; `test` prints them.
   invalid code are not underlined.
 - Codex paints no code background, current line, selection, gutter or find
   highlight, and no tint for modified lines. The file still carries them.
-- Inside diff lines Codex keeps the code colours on the line tint. Headings,
-  invalid code and the Codex accent measure about 4.2:1 there, below 4.5:1.
+- Inside diff lines Codex keeps the code colours on the line tint; headings,
+  invalid code and the Codex accent fall below 4.5:1 there.
 
 ## Files
 
-- `install.mjs`: the installer. Its code is shared with the Claude Code
-  installer in `scripts/lib/host-install/`.
+- `install.mjs`: the installer (shared code in `scripts/lib/host-install/`).
 - `host.json`: which theme setting takes which role, and the limits above.
 - `dist/j3w1.tmTheme`: the theme file, generated from `host.json` by
   `npm run generate`; do not edit it.
 - `port.json`, `mapping.json`, `capabilities.json`: the port's scope, every
   native key, and the reason for each role that is not mapped.
-
-Tests: `tests/host-install.test.js`. To change what Codex shows, change the
-specification through a `proposed` entry in `spec/decisions.md`; pointing
-`host.json` at a different role is a specification change too.
diff --git a/ports/codex/capabilities.json b/ports/codex/capabilities.json
index fdd3c664f..a28aef5f5 100644
--- a/ports/codex/capabilities.json
+++ b/ports/codex/capabilities.json
@@ -1514,6 +1514,16 @@
       "surface": "outside-codex",
       "reason": "Not a colour; a tmTheme carries colours only."
     },
+    "font.line-height.display": {
+      "state": "out-of-scope",
+      "surface": "outside-codex",
+      "reason": "Not a colour; a tmTheme carries colours only."
+    },
+    "font.line-height.title": {
+      "state": "out-of-scope",
+      "surface": "outside-codex",
+      "reason": "Not a colour; a tmTheme carries colours only."
+    },
     "font.line-height.h1": {
       "state": "out-of-scope",
       "surface": "outside-codex",
@@ -1564,6 +1574,16 @@
       "surface": "outside-codex",
       "reason": "Not a colour; a tmTheme carries colours only."
     },
+    "font.size.display": {
+      "state": "out-of-scope",
+      "surface": "outside-codex",
+      "reason": "Not a colour; a tmTheme carries colours only."
+    },
+    "font.size.title": {
+      "state": "out-of-scope",
+      "surface": "outside-codex",
+      "reason": "Not a colour; a tmTheme carries colours only."
+    },
     "font.size.h1": {
       "state": "out-of-scope",
       "surface": "outside-codex",
diff --git a/ports/codex/mapping.json b/ports/codex/mapping.json
index fa8c1e9b1..b8200251f 100644
--- a/ports/codex/mapping.json
+++ b/ports/codex/mapping.json
@@ -345,6 +345,8 @@
     "font.letter-spacing.terminal": "Not a colour; a tmTheme carries colours only.",
     "font.line-height.caption": "Not a colour; a tmTheme carries colours only.",
     "font.line-height.code": "Not a colour; a tmTheme carries colours only.",
+    "font.line-height.display": "Not a colour; a tmTheme carries colours only.",
+    "font.line-height.title": "Not a colour; a tmTheme carries colours only.",
     "font.line-height.h1": "Not a colour; a tmTheme carries colours only.",
     "font.line-height.h2": "Not a colour; a tmTheme carries colours only.",
     "font.line-height.h3": "Not a colour; a tmTheme carries colours only.",
@@ -355,6 +357,8 @@
     "font.line-height.ui-sm": "Not a colour; a tmTheme carries colours only.",
     "font.size.caption": "Not a colour; a tmTheme carries colours only.",
     "font.size.code": "Not a colour; a tmTheme carries colours only.",
+    "font.size.display": "Not a colour; a tmTheme carries colours only.",
+    "font.size.title": "Not a colour; a tmTheme carries colours only.",
     "font.size.h1": "Not a colour; a tmTheme carries colours only.",
     "font.size.h2": "Not a colour; a tmTheme carries colours only.",
     "font.size.h3": "Not a colour; a tmTheme carries colours only.",
diff --git a/ports/codex/port.json b/ports/codex/port.json
index e96a08f1f..521242b91 100644
--- a/ports/codex/port.json
+++ b/ports/codex/port.json
@@ -4,7 +4,7 @@
   "displayName": "Codex CLI (tmTheme)",
   "status": "experimental",
   "themeVersion": "4.0.0",
-  "tokenDigest": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY=",
+  "tokenDigest": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU=",
   "profile": "default",
   "format": "codex-tmtheme",
   "targetVersions": [
diff --git a/ports/ghostty/README.md b/ports/ghostty/README.md
index 8d985931d..938edfa0d 100644
--- a/ports/ghostty/README.md
+++ b/ports/ghostty/README.md
@@ -1,22 +1,19 @@
 # j3w1 theme for Ghostty
 
-Status: experimental until a real import into the recorded version is
-evidenced. See `port.json` for scope, `mapping.json` for every native key and
-`capabilities.json` for the reason behind each role that is not mapped.
-
-`dist/j3w1` is a Ghostty theme file generated from `mapping.json` and the
-default profile by `npm run generate`; never edit it by hand. No real Ghostty
-import is recorded yet.
+Status: experimental; no real Ghostty import is recorded. `port.json` holds
+the scope, `mapping.json` every native key, `capabilities.json` the reason for
+each unmapped role. `dist/j3w1` is generated from `mapping.json` and the
+default profile by `npm run generate`; never edit it by hand.
 
 ## What it themes, and what it does not
 
 - Supported: background (`color.terminal.bg`), foreground, cursor colour and
   cursor text, selection background and foreground, palette 0–15, and
   `split-divider-color` (`color.border.divider`, use-and-report under D-008).
-- Inherited: font family, size and cell height stay in your own config. The
-  theme's font is `SauceCodePro NFM` at 13 px. A pixel line height has no exact
-  `adjust-cell-height` equivalent.
-- Unsupported: light mode. The theme has no light profile.
+- Inherited: font family, size and cell height stay in your own config (the
+  theme's font is `SauceCodePro NFM` at 13 px; a pixel line height has no exact
+  `adjust-cell-height` equivalent).
+- Unsupported: light mode; the theme has no light profile.
 
 ## Install
 
@@ -24,9 +21,9 @@ import is recorded yet.
 2. Save it as `~/.config/ghostty/themes/j3w1`.
 3. Add `theme = j3w1` to your Ghostty config and reload it.
 
-Orca on macOS or Linux follows `theme = j3w1` when you click **Import from
-Ghostty**. On Windows, use the Orca port (`ports/orca/`) instead: Orca there has
-no Ghostty themes folder to look in.
+Orca on macOS or Linux follows `theme = j3w1` on **Import from Ghostty**. On
+Windows, where Orca has no Ghostty themes folder, use the Orca port
+(`ports/orca/`).
 
 ## Verify
 
diff --git a/ports/ghostty/capabilities.json b/ports/ghostty/capabilities.json
index 72c4ab303..9bc326e6e 100644
--- a/ports/ghostty/capabilities.json
+++ b/ports/ghostty/capabilities.json
@@ -1514,6 +1514,16 @@
       "surface": "outside-terminal",
       "reason": "Not a colour; a terminal theme file carries colours only."
     },
+    "font.line-height.display": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
+    "font.line-height.title": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
     "font.line-height.h1": {
       "state": "out-of-scope",
       "surface": "outside-terminal",
@@ -1564,6 +1574,16 @@
       "surface": "outside-terminal",
       "reason": "Not a colour; a terminal theme file carries colours only."
     },
+    "font.size.display": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
+    "font.size.title": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
     "font.size.h1": {
       "state": "out-of-scope",
       "surface": "outside-terminal",
diff --git a/ports/ghostty/mapping.json b/ports/ghostty/mapping.json
index 9fa005210..0700eec17 100644
--- a/ports/ghostty/mapping.json
+++ b/ports/ghostty/mapping.json
@@ -345,6 +345,8 @@
     "font.letter-spacing.terminal": "A Ghostty theme carries colours; Ghostty has no letter-spacing key.",
     "font.line-height.caption": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.code": "Not a colour; a terminal theme file carries colours only.",
+    "font.line-height.display": "Not a colour; a terminal theme file carries colours only.",
+    "font.line-height.title": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.h1": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.h2": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.h3": "Not a colour; a terminal theme file carries colours only.",
@@ -355,6 +357,8 @@
     "font.line-height.ui-sm": "Not a colour; a terminal theme file carries colours only.",
     "font.size.caption": "Not a colour; a terminal theme file carries colours only.",
     "font.size.code": "Not a colour; a terminal theme file carries colours only.",
+    "font.size.display": "Not a colour; a terminal theme file carries colours only.",
+    "font.size.title": "Not a colour; a terminal theme file carries colours only.",
     "font.size.h1": "Not a colour; a terminal theme file carries colours only.",
     "font.size.h2": "Not a colour; a terminal theme file carries colours only.",
     "font.size.h3": "Not a colour; a terminal theme file carries colours only.",
diff --git a/ports/ghostty/port.json b/ports/ghostty/port.json
index d5686daad..e6c31d50a 100644
--- a/ports/ghostty/port.json
+++ b/ports/ghostty/port.json
@@ -4,7 +4,7 @@
   "displayName": "Ghostty theme",
   "status": "experimental",
   "themeVersion": "4.0.0",
-  "tokenDigest": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY=",
+  "tokenDigest": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU=",
   "profile": "default",
   "format": "ghostty-config",
   "targetVersions": [
diff --git a/ports/obsidian/ANDROID.md b/ports/obsidian/ANDROID.md
index d78cae357..6837f6b23 100644
--- a/ports/obsidian/ANDROID.md
+++ b/ports/obsidian/ANDROID.md
@@ -3,7 +3,7 @@
 Android uses the same theme as desktop: the same `manifest.json` and
 `theme.css`, installed into the vault's own theme folder. Only the way the
 files get there differs. **No Android import of this port is recorded yet.**
-The helper below is tested in Linux shells (bash and dash), not on a device.
+The helper below is tested in Linux shells (sh, dash and BusyBox sh), not on a device.
 Status, the Windows route and the implementation notes are in the
 [README](README.md).
 
diff --git a/ports/obsidian/IMPLEMENTATION.md b/ports/obsidian/IMPLEMENTATION.md
index c580dc490..059af04ab 100644
--- a/ports/obsidian/IMPLEMENTATION.md
+++ b/ports/obsidian/IMPLEMENTATION.md
@@ -1,18 +1,18 @@
 # Obsidian port implementation and audit
 
-This is the maintainer-facing contract for the [installation guide](README.md).
-The port remains **experimental**, dark-only, and unverified by the repository's
-real-import protocol. A Windows Obsidian 1.13.7 import and visible rendering were
-reported by the user; that report does not establish the exact artifact digests,
-manual keyboard, zoom, screen-reader or full protocol observations. The recorded
-`testedVersions` and `evidence` arrays therefore remain empty. No Android import
-is recorded; the mobile, tablet and phone root rules are source-audited only.
-Structural source checks against 1.13.4 and 1.13.7 are not real imports.
+Maintainer contract for the [installation guide](README.md). The port is
+**experimental**, dark-only and unverified by the repository's real-import
+protocol. The Windows Obsidian 1.13.7 import was reported by the user; that
+report does not establish artifact digests or manual keyboard, zoom,
+screen-reader or full protocol observations, so `testedVersions` and
+`evidence` stay empty. No Android import is recorded; the mobile, tablet and
+phone root rules are source-audited only. Structural source checks against
+1.13.4 and 1.13.7 are not real imports.
 
 ## Scope and semantic mapping
 
-`npm run generate` emits the manifest from `theme.json` and emits CSS from
-`mapping.json` and the resolved default profile. Never edit `dist/` by hand.
+`npm run generate` emits the manifest from `theme.json` and the CSS from
+`mapping.json` and the resolved default profile; never edit `dist/` by hand.
 `mapping.json` partitions every resolved token, including inspection-only
 primitives; `capabilities.json` records mapped, inherited, unsupported and
 out-of-scope distinctions. Its `themeRevision` identifies the canonical token
@@ -21,31 +21,24 @@ D-007 (control boundary) and D-008 (divider); this port does not approve them.
 
 Native surface variables keep the Markdown canvas true black, sidebars and
 settings panels on the default surface, menus/popovers/command surfaces raised,
-dialogs on the overlay, fields on the input surface and bars on chrome. The
-Obsidian-only mapping intentionally assigns `color.text.default` (`#e99499`)
-to Reading View and CM6 note bodies as well as interface text, and reserves
-`color.text.prose` (`#f4eeee`) for note headings `--h1-color` through
-`--h6-color`, `--inline-title-color` and `--bold-color`. This reverses the
-canonical prose/heading emphasis semantics **only in this port**; no token or
-specification value changes. Italic and setting-group headings retain
-`color.text.bright`; links, syntax and controls retain their own mappings.
-Secondary chrome remains muted and metadata subtle. Settings descriptions,
-command results and other rendered UI keep rose text.
+dialogs on the overlay, fields on the input surface and bars on chrome.
 
-Obsidian redeclares several variables on mobile dark roots with higher
-specificity. Generated CSS repeats the mapped values at matching specificity
-for mobile, tablet and phone roots. This keeps standard and tapped buttons,
-warning confirmations and ordinary text fields readable on mobile. Four
-audited Search, drawer, metadata and Bases contexts clear the native field
-fill; scoped input rules restore `color.surface.input` behind the approved
-`color.text.placeholder`, including in mobile layouts.
+Typography follows D-033 with no port-only override. Reading View and CM6 note
+bodies use `text.prose`; content titles (`--inline-title-color`) and
+`--h1-color` through `--h6-color` use `text.heading`. `--bold-color: inherit`
+is a structural rule, not a color mapping: bold keeps its surrounding
+foreground (rose body, muted text, links, near-white headings). Italic and
+setting-group headings use `color.text.bright`; links, syntax and controls keep
+their own mappings. Secondary chrome is muted and metadata subtle; settings
+descriptions, command results and other UI text stay rose. Android uses the
+same generated theme; earlier implementation evidence remains historical.
 
 File Explorer, Search and Backlinks inherit native variables. Navigation,
 tabs and prompt results have recessed selections with a two-pixel indicator;
 window-inactive tabs use separate inactive fill/text/indicator. Native
-core-plugin panels that consume semantic variables inherit them, but this is
-no claim about every core-plugin view. PDF/print, Canvas/Graph data colors and
-non-status callout colors are outside scope.
+core-plugin panels that consume semantic variables inherit them, with no claim
+about every core-plugin view. PDF/print, Canvas/Graph data colors and
+non-status callout colors are out of scope.
 
 Text selection, CM6 selection and keyboard focus have separate assignments.
 The CM6 scroller scopes the editor fill over `.cm-content` and its sibling
@@ -54,59 +47,59 @@ Which layer a mode draws, table-widget exceptions and selected syntax
 foregrounds remain native; uniform selection rendering is not claimed.
 Status/error/warning/success text and error/warning/success/info callouts use
 matching status roles; host glyphs remain. Monochrome `--code-*` variables
-cover editor and Reading View code highlighting. The host shares values/tags/
-regex categories: distinct constant/type/attribute categories are unsupported
-rather than falsely mapped. Opt-in hued syntax remains out of scope.
+cover editor and Reading View code. The host shares values/tags/regex
+categories, so distinct constant/type/attribute categories are unsupported
+rather than falsely mapped. Opt-in hued syntax is out of scope.
 
-All three theme family variables carry the canonical mono fallback stack.
+All three theme family variables carry the canonical mono fallback stack;
 Obsidian's explicit user font overrides take precedence. No font binary is
 bundled; font sizes, relative headings, line heights and zoom stay native.
 Compact prompt rows use a minimum height, not a clipping height; the native
-search input grows with text and uses a comfortable minimum. Only its start
-padding is compact; native clear-button end space stays. Selected prompt notes,
-flair, faint text and actions use on-selection text. Tree rows and main/sidebar
-tabs reserve transparent indicator borders at rest.
+search input grows with text from a comfortable minimum, and only its start
+padding is compact so the native clear-button end space stays. Selected prompt
+notes, flair, faint text and actions use on-selection text. Tree rows and
+main/sidebar tabs reserve transparent indicator borders at rest.
 
 ## Compatibility and deviations
 
-The public `minAppVersion` is **1.13.4**, the earliest public 1.13.x source
-audited here, not a claim that earlier releases fail. Every emitted native
-variable has a definition and consumer in 1.13.4 and 1.13.7 `app.css`;
-selector hooks and cascade facts are audited in both sources. Definitions
-alone do not count as mapping coverage. Inert warning tint,
-heading-formatting, modal-shadow and touch-radius-l keys are omitted. Official
-developer documentation is pinned to revision
-`c56c7e770ba25dd0ea392aacf4588f9425970d36`.
+The manifest's `minAppVersion` is **1.13.4**, the earliest public 1.13.x
+source audited here, not a claim that earlier releases fail. Every emitted
+native variable has a definition and consumer in 1.13.4 and 1.13.7 `app.css`;
+selector hooks and cascade facts are audited in both. Definitions alone do not
+count as mapping coverage. Inert warning tint, heading-formatting, modal-shadow
+and touch-radius-l keys are omitted. Official developer documentation is
+pinned to revision `c56c7e770ba25dd0ea392aacf4588f9425970d36`.
 
 - Native focus geometry remains: buttons use a three-pixel solid shadow ring;
   fields/selects/radio/checkbox/slider/toggle retain host rings and timing.
   Filled primary/checked controls recolor the same indicator to container
   color, destructive fills to on-danger text. The prompt suppresses its ring,
-  so only it receives a canonical inset dashed replacement on `:focus-visible`.
+  so only it gets a canonical inset dashed replacement on `:focus-visible`.
   Fields also focus on pointer input; container/invalid offsets are inherited
   or unsupported.
 - Geometry variables are square. Host-only tab joins, platform widgets,
   plugin geometry and mobile layout can diverge; native target sizes remain
   except bounded compact prompt rows. User/system dialogs stay native. No
   universal geometry or accessibility conformance is claimed.
-- Plain destructive buttons retain danger text/borders at rest and use the
+- Plain destructive buttons keep danger text/borders at rest and use the
   canonical destructive hover pair on hover and mobile tap, with the native
   focus shadow recolored. Warning confirmations keep desktop error fills and
   mobile transparent fills over the host surface (4.94:1 on the modal
   overlay). Disabled/aria-disabled overrides win over all variants.
 - Native action variables conflate pressed/hover states. Unmapped action,
   inactive-navigation, diagnostic stripe/underline and editor search/current-
-  line roles have precise capability reasons; equal hex values do not add
-  coverage.
-- Phone raised Search, mobile drawer Search, metadata multi-select and side-
-  dock Bases Search receive scoped black input fills where native transparency
-  would put placeholder text below the contrast floor. Surrounding rows and
-  panels keep native geometry and surfaces. A core input inside a mobile menu
-  is not established by the audit; plugin-inserted controls are out of scope.
+  line roles have precise capability reasons; equal hex values add no coverage.
+- Four audited contexts (phone raised Search, mobile drawer Search, metadata
+  multi-select, side-dock Bases Search) clear the native field fill, which
+  would put placeholder text below the contrast floor; scoped rules restore
+  `color.surface.input` behind `color.text.placeholder`, including on mobile.
+  Surrounding rows and panels keep native geometry and surfaces. A core input
+  inside a mobile menu is not established by the audit; plugin-inserted
+  controls are out of scope.
 - Shadows and raised blur are disabled through native variables, retaining
   focus shadows and toggle outline. Animation stays native; complete reduced-
-  motion and forced-colors behavior still needs a real import. Forced-colors
-  focus uses `Highlight`; host selection handling is inherited.
+  motion and forced-colors behavior needs a real import. Forced-colors focus
+  uses `Highlight`; host selection handling is inherited.
 - User CSS snippets and font overrides may alter the result. Third-party
   plugins can inherit semantic variables but get no plugin-specific selectors.
   Non-status callouts and data colors are not reassigned as status hues.
@@ -114,20 +107,20 @@ developer documentation is pinned to revision
   global `--text-selection` fill measures **3.96:1**, below the 4.5:1 text
   floor; muted/faint UI foregrounds are lower. Search `:hover` and
   `.mobile-tap` use this fill with rose text; secondary replacement actions
-  keep their native foregrounds. Reading View ordinary rose text also has
-  this low global selection pairing; CM6's scoped selection fill passes for
-  ordinary rose text in synthetic cascade tests, but selected syntax remains
-  host-owned. This limitation is explicit, not a contrast waiver or a
-  conformance claim. The canonical near-white selection pair still passes.
-- Known canonical syntax-selection limitations remain in
-  `spec/accessibility.md`. Automated mapping and contrast checks are
-  structural, not Windows, keyboard or screen-reader evidence.
+  keep their native foregrounds. Reading View ordinary rose text has the same
+  low global pairing; CM6's scoped fill passes for ordinary rose text in
+  synthetic cascade tests, but selected syntax remains host-owned. This
+  limitation is explicit, not a contrast waiver or a conformance claim. The
+  canonical near-white selection pair passes.
+- Known canonical syntax-selection limitations are in `spec/accessibility.md`.
+  Automated mapping and contrast checks are structural, not Windows, keyboard
+  or screen-reader evidence.
 
-No RGB/HSL compatibility helpers, `!important`, `:has()`, network calls,
-remote assets, telemetry, JavaScript or foreign-theme dependencies are emitted
-in the CSS. Semantic variables take priority over Obsidian's generic Accent
-setting for mapped roles without changing that setting. Builds never fetch
-Obsidian or its sources. Vendor CSS is neither committed nor emitted.
+The CSS emits no RGB/HSL compatibility helpers, `!important`, `:has()`, network
+calls, remote assets, telemetry, JavaScript or foreign-theme dependencies.
+Semantic variables take priority over Obsidian's generic Accent setting for
+mapped roles without changing that setting. Builds never fetch Obsidian or its
+sources; vendor CSS is neither committed nor emitted.
 
 Sources: [official theme tutorial](https://github.com/obsidianmd/obsidian-developer-docs/blob/c56c7e770ba25dd0ea392aacf4588f9425970d36/en/Themes/App%20themes/Build%20a%20theme.md),
 [theme guidelines](https://github.com/obsidianmd/obsidian-developer-docs/blob/c56c7e770ba25dd0ea392aacf4588f9425970d36/en/Themes/App%20themes/Theme%20guidelines.md),
@@ -141,8 +134,10 @@ Sources: [official theme tutorial](https://github.com/obsidianmd/obsidian-develo
 Keys containing ` | ` in `mapping.json` name an exact selector/property pair.
 Every other mapped key is a native variable on `.theme-dark`; that root and
 variable-only resets are documented extension points. Obsidian redeclares
-mapped keys on four compound dark roots. Generated CSS repeats only the
-existing mappings after the base root, at native specificity:
+mapped keys with higher specificity on four compound dark roots, so generated
+CSS repeats only the existing mappings after the base root, at native
+specificity. This keeps standard and tapped buttons, warning confirmations and
+ordinary fields readable on mobile:
 
 | Generated root | Native declaration it counters |
 | --- | --- |
@@ -207,50 +202,57 @@ the theme. `OBSIDIAN_INSTALLERS` in `scripts/lib/obsidian-port.mjs` names the
 two reviewed helpers the site serves byte-identically beside the artifacts:
 `install.ps1` (Windows PowerShell) and `install-android.sh` (POSIX `sh`, for
 Termux and device-storage vaults, see [ANDROID.md](ANDROID.md)). Neither is a
-native artifact, and neither is listed in `port.json`.
+native artifact or listed in `port.json`.
 
-They share one contract. Resolve an existing vault and require `.obsidian`.
-Download both live files to a temporary folder. Require the `j3w1` name and
+Shared contract: resolve an existing vault and require `.obsidian`. Download
+both live files to a temporary folder (or, with `install.ps1 -SourcePath`, read
+a local directory with no network request). Require the `j3w1` name and
 dotted versions in the manifest, and a non-empty CSS whose first line names
 the same version. Stage the complete pair inside `themes/`, keep the previous
 pair until replacement succeeds, restore it on failure, report retained
-recovery copies when restoration fails, and remove temporary files. Their
-user-facing messages match. They differ in the replacement step: the Windows
-helper copies two files over the old pair, while the Android helper renames
-the whole `j3w1` folder aside and renames the staged folder into place, so it
-refuses a `j3w1` folder that holds anything but the pair, or holds only one
-of the two files, or is a link. `mv` into an existing folder nests instead of
-replacing, so the Android helper claims success only when the pair is
-directly in `j3w1` and the staged folder is gone. Between steps it checks
-that `.obsidian` and `themes` are still real folders and that its own hidden
+recovery copies when restoration fails, and remove temporary files. User-facing
+messages match. Neither helper changes notes, plugins or appearance settings.
+
+The replacement step differs. The Windows helper copies two files over the old
+pair; two file replacements cannot be atomic, so Obsidian must stay closed.
+The Android helper renames the whole `j3w1` folder aside and the staged folder
+into place, so it refuses a `j3w1` folder that holds anything but the pair,
+only one of the two files, or is a link. Because `mv` into an existing folder
+nests instead of replacing, it claims success only when the pair is directly
+in `j3w1` and the staged folder is gone. Between steps it checks that
+`.obsidian` and `themes` are still real folders and that its own hidden
 folders are still in `themes`, which also catches a `themes` folder moved or
-replaced by another real folder. Until the old folder has moved aside, a
-failure or a signal it can catch (including an attempt to move the old folder
-that left it in place) leaves the previous theme where it was and removes
-only the helper's own staging and empty backup folders; the helper records
-the move and, at exit, treats a run that never moved the old folder as having
-nothing to recover. From that move until the new pair is
-verified in place, a signal, a failed restore or a noticed change removes
-nothing under `themes`, and the helper reports what it kept. If only the
-staged rename fails and the old folder moves back, it then removes its own
-staging and empty backup folders. Whenever it notices that `.obsidian` or
-`themes` moved, it removes nothing under `themes`. Its recovery advice names
-only paths that exist, and it depends on whether `j3w1` already holds a
-complete pair. Shell code cannot confine writes against an
-app that changes the vault at the same moment, or run cleanup after an
-uncatchable stop; ANDROID.md states both limits and the manual recovery.
+replaced by another real folder.
+
+Android failure handling:
+
+- Before the old folder has moved aside, a failure or catchable signal
+  (including a move attempt that left the old folder in place) leaves the
+  previous theme where it was and removes only the helper's own staging and
+  empty backup folders. The helper records the move, so at exit a run that
+  never moved the old folder has nothing to recover.
+- From that move until the new pair is verified in place, a signal, a failed
+  restore or a noticed change removes nothing under `themes`, and the helper
+  reports what it kept. If only the staged rename fails and the old folder
+  moves back, it removes its own staging and empty backup folders.
+- Whenever it notices that `.obsidian` or `themes` moved, it removes nothing
+  under `themes`. Recovery advice names only paths that exist and depends on
+  whether `j3w1` already holds a complete pair.
+- Shell code cannot confine writes against an app changing the vault at the
+  same moment, or clean up after an uncatchable stop; ANDROID.md states both
+  limits and the manual recovery.
 
 `tests/obsidian-android-install.test.js` runs the real Android script against
 scratch vaults under `sh` and, when installed, dash and busybox, with stub
-`curl`, `mv` and `rm` and a PATH that holds only the declared tools. The stubs
+`curl`, `mv` and `rm` and a PATH holding only the declared tools. The stubs
 also act as a concurrent app: they recreate `j3w1`, move or replace `themes`
 or turn it into a link mid-swap, and signal the helper before and after the
-new pair lands. BusyBox ash runs its own `mv` and `rm` applets rather than
-the stubs on PATH, so under BusyBox those fault cases are skipped with that
-reason; its install, update and refusal cases still run. `sh` and dash must
-run every case. It proves the shell contract, not an Android import.
-`tests/obsidian-port.test.js` holds the
-PowerShell text contract; no PowerShell run of `install.ps1` is recorded.
+new pair lands. BusyBox ash runs its own `mv` and `rm` applets rather than the
+stubs, so under BusyBox those fault cases are skipped with that reason; its
+install, update and refusal cases still run. `sh` and dash must run every
+case. It proves the shell contract, not an Android import.
+`tests/obsidian-port.test.js` holds the PowerShell text contract; no
+PowerShell run of `install.ps1` is recorded.
 
 ## Verification before claiming a real import
 
@@ -278,12 +280,3 @@ Android import. `port.json` `evidence[]` may list both records, but
 because verification requires the recorded application version to be both a
 target and tested. A new Obsidian version becomes a target only after its hook
 audit is added to `tests/fixtures/obsidian-hooks.json`.
-
-## Canonical typography in 4.0.0
-
-D-033 replaces the earlier port-only reading override. Body and prose use
-`text.prose` (`#e99499`); content titles and H1–H6 use `text.heading`
-(`#f4eeee`). Bold inherits its surrounding foreground, including rose body,
-muted text, links and near-white headings. `--bold-color: inherit` is an
-explicit structural rule, not a fixed color mapping. Android uses the same
-generated theme. Existing historical implementation evidence remains historical.
diff --git a/ports/obsidian/README.md b/ports/obsidian/README.md
index 0ac17aa74..460922eb6 100644
--- a/ports/obsidian/README.md
+++ b/ports/obsidian/README.md
@@ -4,20 +4,17 @@ Experimental, dark-only theme for Obsidian, minimum app version **1.13.4**.
 The hooks it relies on are source-audited on 1.13.4 and 1.13.7 only; later
 versions are not audited or imported. Windows and Android use the same two
 files, `manifest.json` and `theme.css`. A Windows 1.13.7 import and visible
-rendering were **user-reported**; no Android import is recorded. Repository
-real-import verification, including manual keyboard, zoom and screen-reader
-checks, is not recorded. The port is not `verified`.
+rendering were **user-reported**; no Android import is recorded. The port is
+not `verified`: see [implementation and verification limits](IMPLEMENTATION.md).
 
 ## Install on Windows (recommended helper)
 
-1. Completely close Obsidian. Find your vault folder (for example,
-   `C:\Users\you\Documents\MyVault`). It must already contain `.obsidian`.
-   The installer only changes the theme's two files. Two separate Windows file
-   replacements cannot be truly atomic, so keep Obsidian closed through an
-   installation or update.
-2. In PowerShell, edit `$vault` to your own existing vault path. Download the
-   [reviewed installer](https://j3w1.github.io/theme/ports/obsidian/install.ps1)
-   to your Downloads folder, **inspect it before running it**, then execute it:
+1. Completely close Obsidian and keep it closed until the install or update
+   finishes. Find your vault folder (for example,
+   `C:\Users\you\Documents\MyVault`); it must already contain `.obsidian`.
+2. In PowerShell, edit `$vault`, download the
+   [reviewed installer](https://j3w1.github.io/theme/ports/obsidian/install.ps1),
+   **inspect it before running it**, then execute it:
 
    ```powershell
    $vault = 'C:\Users\you\Documents\MyVault' # edit this path
@@ -27,34 +24,27 @@ checks, is not recorded. The port is not `verified`.
    & $installer -VaultPath $vault
    ```
 
-   Do not pipe a remote download into execution or bypass your execution policy.
-   If your policy blocks a local script, use the pasteable alternative below.
-   The helper downloads both live files into a temporary directory, validates
-   their name/version pair, backs up an existing pair, restores it if replacement
-   fails, and removes temporary files on success. If restoration itself fails,
-   it prints the location of recovery copies rather than deleting them.
+   Do not pipe a remote download into execution or bypass your execution policy;
+   if the policy blocks a local script, use the pasteable alternative below.
+   The helper changes only the theme's two files, validates the pair and
+   restores the previous pair if replacement fails.
 
 ## Local candidate or offline installation
 
-For a reviewed local checkout or a release archive obtained separately, pass the
-directory containing its generated `manifest.json` and `theme.css`:
+For a reviewed local checkout or a separately obtained release archive, pass
+the directory holding its generated `manifest.json` and `theme.css`:
 
 ```powershell
 & ./ports/obsidian/install.ps1 -VaultPath $vault -SourcePath ./ports/obsidian/dist
 ```
 
-This performs no network request. It uses the same pair validation, staging and
-failure recovery as the download route; it does not establish the source's
-provenance. Use the two files from the same reviewed revision. Keep a copy of the
-previous pair for a deliberate rollback, and close the affected vault before
-replacement. No notes, plugins or appearance preferences are changed.
+This makes no network request and does not establish the source's provenance.
+Use both files from the same reviewed revision.
 
 ## Alternative: paste PowerShell commands
 
-This route does not back up or verify the matching versions; it is **less
-failure-safe** than the helper. Completely close Obsidian first, use one
-download session for **both** files, and replace the two together. Edit `$vault`
-and paste the block into PowerShell:
+This route neither backs up nor checks matching versions; it is **less
+failure-safe** than the helper. Close Obsidian, edit `$vault` and paste:
 
 ```powershell
 $ErrorActionPreference = 'Stop'
@@ -75,19 +65,18 @@ if ((Get-Item -LiteralPath $manifest).Length -eq 0 -or
 Get-ChildItem -LiteralPath $theme
 ```
 
-If either download fails, do not start Obsidian with a potentially mixed pair;
-restore both saved previous files or rerun both downloads together. The live
-files can also be inspected separately:
-[manifest.json](https://j3w1.github.io/theme/ports/obsidian/manifest.json) and
+If either download fails, do not start Obsidian with a possibly mixed pair:
+restore both saved files or rerun both downloads together. The live files:
+[manifest.json](https://j3w1.github.io/theme/ports/obsidian/manifest.json),
 [theme.css](https://j3w1.github.io/theme/ports/obsidian/theme.css).
 
 ## Install on Android (Termux helper)
 
 Only vaults in Obsidian's **device storage** are supported; Termux cannot reach
-a vault in app storage. Read the [Android guide](ANDROID.md) first: it covers
-storage, the vault path, what the helper checks, a manual fallback without
-Termux, and rollback. Completely close Obsidian, including from recent apps.
-In Termux, edit `vault` to your own existing vault path, download the
+a vault in app storage. Read the [Android guide](ANDROID.md) first: storage,
+the vault path, a manual fallback without Termux, and rollback. Completely
+close Obsidian, including from recent apps, and any app that syncs the vault.
+In Termux, edit `vault`, download the
 [reviewed installer](https://j3w1.github.io/theme/ports/obsidian/install-android.sh),
 **inspect it before running it**, then execute it:
 
@@ -100,15 +89,11 @@ cat "$HOME/j3w1-install-android.sh" # review the entire downloaded script before
 sh "$HOME/j3w1-install-android.sh" --vault "$vault"
 ```
 
-Do not pipe a remote download into a shell. The helper validates the
-downloaded pair as the Windows helper does, stages it beside the theme, swaps
-the whole `j3w1` folder and restores the previous one if the swap fails. Keep
-Obsidian and any app that syncs the vault closed while it runs.
+Do not pipe a remote download into a shell.
 
 ## Enable and verify
 
-The final folder should contain exactly the two native theme artifacts
-(Windows shows the separators as `\`):
+The theme folder should hold exactly the two files (Windows shows `\`):
 
 ```text
 <vault>/.obsidian/themes/j3w1/
@@ -116,37 +101,24 @@ The final folder should contain exactly the two native theme artifacts
   theme.css
 ```
 
-On Windows, check both files exist and have nonzero `Length` with
-`Get-Item -LiteralPath $manifest,$css` (set `$theme` and those two paths as
-shown above if you used the helper); in Termux, use
+On Windows, check both have nonzero `Length` with
+`Get-Item -LiteralPath $manifest,$css` (set `$theme`, `$manifest` and `$css` as
+in the pasteable block if you used the helper); in Termux, use
 `ls -l "$vault/.obsidian/themes/j3w1"`. Restart Obsidian, set
 **Settings → Appearance → Base color scheme → Dark**, then select **j3w1**
 under **Themes**. Light mode is not supported. Expect black note backgrounds,
-rose ordinary Reading View and editor text, near-white headings, inline title
-and bold, and rose/dark-red interface surfaces. Links and italic retain their
-own colors. The installed manifest declares `minAppVersion: 1.13.4`.
+rose body text, near-white headings and inline title, bold in its surrounding
+color, and rose/dark-red interface surfaces.
 
 ## Update or roll back
 
 To update, close Obsidian, save **both** installed files together outside the
-active theme directory (each helper keeps its backup only until the new pair is
-in place), then rerun the reviewed helper for your platform with the same vault
-path (or both pasteable downloads). Verify both files, restart Obsidian and
-reselect the theme if necessary. Do not mix versions; the live URLs may change
-as the site publishes a new release.
+theme folder (each helper keeps its own backup only until the new pair is in
+place), rerun your platform's helper with the same vault (or both pasteable
+downloads), then restart Obsidian and reselect the theme if necessary. Do not
+mix versions; the live URLs change when the site publishes a release.
 
 To roll back an update, close Obsidian, restore **both** saved files together
 to `j3w1`, then restart. To stop using the theme, select Default or your
-previous theme under Appearance; after closing Obsidian, you may delete only
-the `j3w1` theme folder if no longer needed. No vault notes, settings or
-plugins should be removed. See [implementation and verification limits](IMPLEMENTATION.md)
-for the compatibility audit, selector ledger and real-import protocol.
-
-## Canonical typography in 4.0.0
-
-D-033 replaces the earlier port-only reading override. Body and prose use
-`text.prose` (`#e99499`); content titles and H1–H6 use `text.heading`
-(`#f4eeee`). Bold inherits its surrounding foreground, including rose body,
-muted text, links and near-white headings. `--bold-color: inherit` is an
-explicit structural rule, not a fixed color mapping. Android uses the same
-generated theme. Existing historical implementation evidence remains historical.
+previous theme under Appearance; after closing Obsidian you may delete only the
+`j3w1` folder. No notes, settings or plugins are changed.
diff --git a/ports/obsidian/capabilities.json b/ports/obsidian/capabilities.json
index 4a3f32aa1..abe78d102 100644
--- a/ports/obsidian/capabilities.json
+++ b/ports/obsidian/capabilities.json
@@ -1507,6 +1507,16 @@
       "surface": "host-behavior",
       "reason": "font.size.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host."
     },
+    "font.size.display": {
+      "state": "inherited",
+      "surface": "host-behavior",
+      "reason": "font.size.display: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host."
+    },
+    "font.size.title": {
+      "state": "inherited",
+      "surface": "host-behavior",
+      "reason": "font.size.title: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host."
+    },
     "font.size.h1": {
       "state": "inherited",
       "surface": "host-behavior",
@@ -1557,6 +1567,16 @@
       "surface": "host-behavior",
       "reason": "font.line-height.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host."
     },
+    "font.line-height.display": {
+      "state": "inherited",
+      "surface": "host-behavior",
+      "reason": "font.line-height.display: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host."
+    },
+    "font.line-height.title": {
+      "state": "inherited",
+      "surface": "host-behavior",
+      "reason": "font.line-height.title: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host."
+    },
     "font.line-height.h1": {
       "state": "inherited",
       "surface": "host-behavior",
diff --git a/ports/obsidian/mapping.json b/ports/obsidian/mapping.json
index e43a63359..f03c74374 100644
--- a/ports/obsidian/mapping.json
+++ b/ports/obsidian/mapping.json
@@ -656,6 +656,8 @@
     "font.size.reading": "font.size.reading: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
     "font.size.code": "font.size.code: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
     "font.size.terminal": "font.size.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
+    "font.size.display": "font.size.display: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
+    "font.size.title": "font.size.title: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
     "font.size.h1": "font.size.h1: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
     "font.size.h2": "font.size.h2: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
     "font.size.h3": "font.size.h3: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
@@ -666,6 +668,8 @@
     "font.line-height.reading": "font.line-height.reading: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
     "font.line-height.code": "font.line-height.code: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
     "font.line-height.terminal": "font.line-height.terminal: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
+    "font.line-height.display": "font.line-height.display: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
+    "font.line-height.title": "font.line-height.title: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
     "font.line-height.h1": "font.line-height.h1: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
     "font.line-height.h2": "font.line-height.h2: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
     "font.line-height.h3": "font.line-height.h3: preserve user sizes, zoom and native layout/target, motion or focus geometry; the reference metric is not imposed on the host.",
diff --git a/ports/obsidian/port.json b/ports/obsidian/port.json
index 4874342f1..46cd08ca3 100644
--- a/ports/obsidian/port.json
+++ b/ports/obsidian/port.json
@@ -4,7 +4,7 @@
   "displayName": "Obsidian theme",
   "status": "experimental",
   "themeVersion": "4.0.0",
-  "tokenDigest": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY=",
+  "tokenDigest": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU=",
   "profile": "default",
   "format": "obsidian-theme",
   "targetVersions": [
diff --git a/ports/orca/README.md b/ports/orca/README.md
index efe8979e6..f02b4a4d1 100644
--- a/ports/orca/README.md
+++ b/ports/orca/README.md
@@ -2,8 +2,7 @@
 
 Gives Orca's terminal the j3w1 colours: the sixteen terminal colours,
 background, text, cursor, selection, the pane divider and the terminal font.
-Everything for Orca is in this folder. Status: experimental (no recorded
-import evidence yet).
+Status: experimental (no recorded import evidence).
 
 You need Windows, [PowerShell 7.4 or later](https://learn.microsoft.com/powershell/scripting/install/installing-powershell-on-windows)
 (`winget install Microsoft.PowerShell`), Orca started at least once, and the
@@ -31,9 +30,9 @@ Release v3.0.0 (commit `f0e9e25a00357c0b47ae3d1392b87e5bc0aa91e6`).
    ```
 <!-- install:end -->
 
-If Orca is still open, the installer does not touch Orca's settings (Orca
-would overwrite them). It writes only the Ghostty file and prints three steps
-to finish in Orca:
+If Orca is still open, the installer leaves Orca's settings alone (Orca would
+overwrite them), writes only the Ghostty file and prints three steps to finish
+in Orca:
 
 1. Settings > Terminal > Import from Ghostty > Apply Changes
 2. Settings > Terminal > Color Contrast > Off
@@ -46,7 +45,7 @@ in the repository README, save it as `%APPDATA%\ghostty\config.ghostty` (back
 up any `config.ghostty` or `config` already there: Orca merges every Ghostty
 config it finds), then in Orca choose Settings > Terminal > Import from
 Ghostty > Apply Changes. On macOS or Linux use `~/.config/ghostty/config.ghostty`.
-This route has no backup or restore.
+No backup or restore on this route.
 
 ## Update
 
@@ -54,9 +53,9 @@ This route has no backup or restore.
 When a newer release is out, open this page on the site's Ports page or on the repository's main branch: its Install command names the newest release. Quit Orca and paste it. It downloads that release, applies it and runs the checks.
 <!-- update:end -->
 
-The Install command of a newer release applies it over this one and keeps the
+A newer release's Install command applies over this one and keeps the
 backups. To move to a specific release tag, or back to an older one, run
-`Update-J3w1OrcaTheme.ps1 -Version` with that tag from the release folder: it
+`Update-J3w1OrcaTheme.ps1 -Version` with that tag from the release folder; it
 shows what changes, key by key, before it writes. Tags before v3.0.0 have no
 installer and are refused.
 
@@ -99,8 +98,8 @@ earlier value is unknown.
   - `terminalDividerColorDark` and `terminalDividerColorLight`: the pane divider
     (`color.border.divider`, use-and-report under D-008; every run says so).
   - `terminalFontFamily`: `SauceCodePro NFM`.
-  - `leftSidebarAppearanceMode` = Match Terminal, because the owner asked for
-    it. It is the only part of Orca's window that can follow the terminal.
+  - `leftSidebarAppearanceMode` = Match Terminal, at the owner's request; it
+    is the only part of Orca's window that can follow the terminal.
 - **`%APPDATA%\ghostty\config.ghostty`**: one marked block. Every line outside
   it is kept, byte for byte. A symbolic link is written through and stays a
   link. A file with two marked blocks is refused until you delete one.
@@ -114,10 +113,10 @@ earlier value is unknown.
   - `current\`: the last record, the Ghostty block and `theme.lock.orca.json`.
   - `backups\<time>\`: one record per run, plus a copy of `config.ghostty`
     when the run changed it. Records name only the installer's keys.
-  - `pre-kit\orca-data.json`: one full copy of Orca's settings from before the
-    first run that wrote anything. It holds your whole private Orca store. It
-    is never overwritten and restore never uses it; delete it when you no
-    longer want it.
+  - `pre-kit\orca-data.json`: one full copy of Orca's settings (your whole
+    private Orca store) from before the first run that wrote anything; never
+    overwritten and never used by restore. Delete it when you no longer want
+    it.
 
 Every value comes from the commit in the install command. The export must
 match `exports/digests.json` from the same commit when it is downloaded and
@@ -166,12 +165,11 @@ only, `J3W1_KIT_TEST_SOURCE=worktree` lets a plain folder be the source; such
 a run is marked not verified and writes no lock. Run from a clone, the scripts
 read git objects at HEAD, so commit before you run the tests.
 
-To mark this port `verified`, import it into a recorded Orca version, record
-the version, OS, font, scaling and artifact digest as a real-import protocol
-under `evidence/` (validated by `schemas/json/port-import-evidence.schema.json`
-and bound to the current `portSubject`), and add the version to
-`testedVersions`. A parse check is not an import.
+To mark this port `verified`, record a real import into a recorded Orca
+version (version, OS, font, scaling, artifact digest) as described in
+[Capability details and import verification](../README.md#capability-details-and-import-verification),
+and add the version to `testedVersions`.
 
 To change what Orca shows, change the specification through a `proposed`
-entry in `spec/decisions.md`. Pointing `host.json` at a different role is a
+entry in `spec/decisions.md`; pointing `host.json` at a different role is a
 specification change too.
diff --git a/ports/orca/capabilities.json b/ports/orca/capabilities.json
index da7e92741..b9736592c 100644
--- a/ports/orca/capabilities.json
+++ b/ports/orca/capabilities.json
@@ -1518,6 +1518,16 @@
       "surface": "outside-terminal",
       "reason": "Not a colour; a terminal theme file carries colours only."
     },
+    "font.line-height.display": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
+    "font.line-height.title": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
     "font.line-height.h1": {
       "state": "out-of-scope",
       "surface": "outside-terminal",
@@ -1568,6 +1578,16 @@
       "surface": "outside-terminal",
       "reason": "Not a colour; a terminal theme file carries colours only."
     },
+    "font.size.display": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
+    "font.size.title": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
     "font.size.h1": {
       "state": "out-of-scope",
       "surface": "outside-terminal",
diff --git a/ports/orca/mapping.json b/ports/orca/mapping.json
index 1fe38b972..03901f9e1 100644
--- a/ports/orca/mapping.json
+++ b/ports/orca/mapping.json
@@ -350,6 +350,8 @@
     "font.letter-spacing.terminal": "Neither the Ghostty config nor Orca's import has a letter-spacing key.",
     "font.line-height.caption": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.code": "Not a colour; a terminal theme file carries colours only.",
+    "font.line-height.display": "Not a colour; a terminal theme file carries colours only.",
+    "font.line-height.title": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.h1": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.h2": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.h3": "Not a colour; a terminal theme file carries colours only.",
@@ -360,6 +362,8 @@
     "font.line-height.ui-sm": "Not a colour; a terminal theme file carries colours only.",
     "font.size.caption": "Not a colour; a terminal theme file carries colours only.",
     "font.size.code": "Not a colour; a terminal theme file carries colours only.",
+    "font.size.display": "Not a colour; a terminal theme file carries colours only.",
+    "font.size.title": "Not a colour; a terminal theme file carries colours only.",
     "font.size.h1": "Not a colour; a terminal theme file carries colours only.",
     "font.size.h2": "Not a colour; a terminal theme file carries colours only.",
     "font.size.h3": "Not a colour; a terminal theme file carries colours only.",
diff --git a/ports/orca/port.json b/ports/orca/port.json
index 25dfb77f0..fb0545bbb 100644
--- a/ports/orca/port.json
+++ b/ports/orca/port.json
@@ -4,7 +4,7 @@
   "displayName": "Orca (Ghostty config import)",
   "status": "experimental",
   "themeVersion": "4.0.0",
-  "tokenDigest": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY=",
+  "tokenDigest": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU=",
   "profile": "default",
   "format": "ghostty-config",
   "targetVersions": [
diff --git a/ports/telegram/IMPLEMENTATION.md b/ports/telegram/IMPLEMENTATION.md
index 589a18400..bc4f9ea87 100644
--- a/ports/telegram/IMPLEMENTATION.md
+++ b/ports/telegram/IMPLEMENTATION.md
@@ -16,21 +16,13 @@ dist/j3w1.attheme    dist/j3w1.tdesktop-theme
      https://t.me/addtheme/<slug>  →  Apply on Android and on Telegram Desktop
 ```
 
-`npm run generate` writes both files through `scripts/lib/telegram-port.mjs`.
-- **The files are generated output.** They are committed, and never edited by hand.
-- **The cloud theme is a distribution channel, not a palette source.** It is never recoloured on its own. Every change starts in the tokens or the mapping, is regenerated, and is then imported or published.
+`npm run generate` writes both files through `scripts/lib/telegram-port.mjs`. They are committed and never edited by hand. The cloud theme is a distribution channel, not a palette source: every change starts in the tokens or the mapping, is regenerated, and is then imported or published.
 
 Unchanged tokens always produce identical bytes:
 - **Android:** signed 32-bit ARGB values, upstream key order, LF line endings, no timestamps.
 - **Desktop:** `#rrggbb` / `#rrggbbaa` values, a stored (uncompressed) zip with a fixed date, and a hand-encoded 1×2 PNG.
 
-Every value comes from a canonical role. Keys whose upstream default is translucent (overlays, ripples, selectors) take the existing translucent roles. The only opaque exceptions are two text keys listed in `src/coverage.json` (`opaqueAllowed`), bot-keyboard labels and code comments, because their translucent dark defaults are unreadable on dark panels. No colour is blended, lightened or given a new alpha.
-
-**Text selection.**
-- **Android.** The incoming and outgoing selection highlights inherit `chat_textSelectBackground`, which takes `interaction.text-selection.tint`, the text-selection red at 50% (D-036).
-  - **Why translucent:** some pinned paths paint the selection fill over their content: the rich editor's tables, captions and media blocks, and the rich-message translation preview. A translucent fill keeps that content visible.
-  - **Why not `text-selection.bg`:** Android keeps the text colour inside a selection, so the opaque `text-selection.bg` would leave rose text at 3.96:1.
-- **Desktop.** Selection takes `selection.bg`, and selected text turns near-white.
+Every value comes from a canonical role; no colour is blended, lightened or given a new alpha. Keys whose upstream default is translucent (overlays, ripples, selectors) take the translucent roles. The only opaque exceptions are the two text keys in `src/coverage.json` (`opaqueAllowed`), bot-keyboard labels and code comments, whose translucent dark defaults are unreadable on dark panels.
 
 ## Upstream audit (pinned)
 
@@ -41,11 +33,11 @@ Every value comes from a canonical role. Keys whose upstream default is transluc
 | Desktop loader, cloud themes, links | telegramdesktop/tdesktop | `d8594c011756265de4385408540bd9f7c787a003` |
 | Cloud theme API | core.telegram.org `account.uploadTheme` / `createTheme` / `updateTheme` / `getTheme` | layer 225–229 |
 
-`src/keys.json` holds only key names, inheritance links and which upstream defaults are translucent. It never stores upstream colour values. `node ports/telegram/src/extract-keys.mjs` refreshes it from these revisions. The target lines are Telegram Android 12.10.6 and Telegram Desktop 7.2.9.
+`src/keys.json` holds only key names, inheritance links and which upstream defaults are translucent, never upstream colour values. `node ports/telegram/src/extract-keys.mjs` refreshes it from these revisions. The target lines are Telegram Android 12.10.6 and Telegram Desktop 7.2.9. Keys Telegram adds after the pinned revisions use Telegram's light defaults until `keys.json` is refreshed.
 
-**How each client fills a missing key:**
-- **Android:** reads `key=value` lines. A key the file leaves out takes the file's value for its one-level fallback key, or otherwise Telegram's **light** default.
-- **Desktop:** reads `key: value;` lines. A missing key takes the theme's value for its alias, or otherwise the light default.
+A key the file leaves out:
+- **Android** (`key=value` lines) takes the file's value for its one-level fallback key, or otherwise Telegram's **light** default.
+- **Desktop** (`key: value;` lines) takes the theme's value for its alias, or otherwise the light default.
 
 ## Coverage
 
@@ -63,17 +55,18 @@ Every upstream colour key is in exactly one of three states, and `tests/telegram
 
 Non-colour keys (`wallpaperFileOffset`, `chat_wallpaper_gradient_rotation`, `chat_outBubbleGradientAnimated`) and animated-wallpaper keys are never written.
 
-**Inherited keys are written out.** The files write every inherited key with the value it inherits, so a file import renders exactly as the clients' inheritance would. Telegram's Theme Editor fills every key a file leaves out with Telegram's stock colour. On 2026-10-05 it did that to 42 inherited Android keys, which turned read ticks green and value icons blue. Writing the inherited values out leaves the editor nothing to fill. Unset keys stay out; the editor knows none of them.
+**Inherited keys are written out** with the value they inherit, so a file import renders exactly as the clients' inheritance would. Telegram's Theme Editor fills every key a file leaves out with Telegram's stock colour: on 2026-10-05 it did that to 42 inherited Android keys, turning read ticks green and value icons blue. Unset keys stay out; the editor knows none of them.
 
-**Legacy editor keys.** The editor also writes 77 Android keys that the pinned client no longer reads, such as `chat_attachFileBackground` and `chat_outPreviewInstantSelectedText`. `src/editor-keys.json` lists them with their source. Three were last read by Telegram Android 11.4.2; the rest were gone by 9.7.6. `mapping.json` gives each the role its current counterpart uses, so older clients and the editor text carry j3w1 colours too.
+**Legacy editor keys.** The editor also writes Android keys the pinned client no longer reads, such as `chat_attachFileBackground` and `chat_outPreviewInstantSelectedText`. `src/editor-keys.json` lists them with their source: three were last read by Telegram Android 11.4.2, the rest were gone by 9.7.6. `mapping.json` gives each the role its current counterpart uses, so older clients and the editor text carry j3w1 colours too.
 
-**Main role assignments.** Android and Desktop project the same role wherever both expose it. The exception is the Desktop chat-list badges; see [Limitations](#limitations).
+**Main role assignments.** Android and Desktop project the same role wherever both expose it, except the Desktop chat-list badges ([Limitations](#limitations)).
 
 | Purpose | Role |
 | --- | --- |
 | Chat wallpaper | `surface.canvas` → `surface.chrome` |
 | Incoming / outgoing bubble | `surface.raised` / `surface.accent` (D-035) |
 | Selected bubble | `interaction.selection.bg` |
+| Text selection | Android: `interaction.text-selection.tint` (D-036) on `chat_textSelectBackground`, which the incoming and outgoing highlights inherit; Desktop: `selection.bg`, with near-white selected text |
 | Message, body, composer and bot-keyboard text | `text.default` |
 | Names and chrome titles | `text.bright` |
 | Secondary text, bubble timestamps and durations | `text.muted` (never `text.subtle` on the accent surface, D-035) |
@@ -81,102 +74,66 @@ Non-colour keys (`wallpaperFileOffset`, `chat_wallpaper_gradient_rotation`, `cha
 | Code comments | `code.syntax.comment` |
 | Links, accents, read and verified ticks, list section headers | `text.link`, `text.accent`, `text.accent-strong` |
 | Filled buttons (send, FAB, attach, checkboxes), file and voice button circles, Android badges, Desktop sidebar and tray badges | `action.primary.*` |
-| Desktop chat-list badges | light pills: `text.accent-strong`, `text.default`, `text.muted`, with `text.on-light` counts |
-| Glyphs on selection, filled actions (file and voice buttons included) and media scrims | `interaction.selection.text`, `text.on-action` |
+| Glyphs on selection, filled actions (file and voice buttons included) and media scrims | `interaction.selection.text`, `text.on-action` (bright rose under D-033) |
 | Overlays, ripples, selectors | `interaction.marquee`, `surface.backdrop` |
 
 **Contrast and colour rules, enforced by tests:**
 - The wallpaper is darker than incoming bubbles, and incoming bubbles are darker than outgoing ones.
 - Message text, timestamps, replies and links pass 4.5:1 on both bubbles and on the main panels.
-- The reviewed `onFill` table in `src/coverage.json` records every on-fill foreground/background pair, inherited keys included. Near-white appears only within that table; action foregrounds now use canonical bright rose under D-033 and retain the same contrast checks. Each entry names the backgrounds the glyph is drawn on; the test checks every one is a selection, action or danger fill (or the media scrim behind loader and thumbnail icons) at 4.5:1 or more. Translucent scrims are measured composited over both white and black. Bold never selects white.
+- The reviewed `onFill` table in `src/coverage.json` records every on-fill foreground/background pair, inherited keys included; near-white appears only within it. Each entry names the backgrounds its glyph is drawn on, and the test checks every one is a selection, action or danger fill (or the media scrim behind loader and thumbnail icons) at 4.5:1 or more. Translucent scrims are measured composited over both white and black. Bold never selects white.
 - Interface keys stay in the red/rose hue range: no blue, cyan, orange or purple.
 
 ## Cloud theme
 
-**What the theme holds.** One theme titled "j3w1" holds:
-- an Android document (format `android`, `application/x-tgtheme-android`, uploaded as `theme.attheme`);
-- a Desktop document (format `tdesktop`, `application/x-tgtheme-tdesktop`, uploaded as `j3w1.tdesktop-theme`).
-
-The same `https://t.me/addtheme/<slug>` link opens the matching document on each client, which shows a preview with **Apply**.
-
-**What it deliberately leaves out.**
-- The theme carries **no** accent `settings`. When settings exist, Android previews them and ignores the document.
-- `account.installTheme` only tells the server a theme was applied. It does not change any client's appearance remotely, and the publisher does not call it.
+One theme titled "j3w1" holds an Android document (format `android`, `application/x-tgtheme-android`, uploaded as `theme.attheme`) and a Desktop document (format `tdesktop`, `application/x-tgtheme-tdesktop`, uploaded as `j3w1.tdesktop-theme`). The same `https://t.me/addtheme/<slug>` link opens the matching document on each client, which shows a preview with **Apply**. When the owner updates the theme, Telegram pushes the change to everyone using it, and both clients also re-check about hourly.
 
-**Updates.** When the owner updates the theme, Telegram pushes the change to everyone using it, and both clients also re-check about hourly. A theme installed from a file never updates.
+**What it leaves out.**
+- **No** accent `settings`. When settings exist, Android previews them instead of the document. The publisher refuses such a theme at readback; on the Theme Editor route, only the Android check on the device would reveal it.
+- `account.installTheme` only tells the server a theme was applied. It changes no client's appearance remotely, and the publisher does not call it.
 
-**One identity, two ways to publish.** `cloud.json` records the theme's slug: `TRhfHcbvZHlOucyc`, which Telegram generated when the owner created the theme in the Theme Editor. Both routes write to that theme. They differ in what reaches the cloud:
-- **Theme Editor.** **IMPORT FILE** converts the file into the editor's text form, and **SAVE AND APPLY THEME** rebuilds the document from that text (the Desktop zip is repacked).
-  - The colours the file sets carry over, but not the bytes.
-  - Every key the file leaves out gets Telegram's default, which is why the files write inherited keys out (see [Coverage](#coverage)).
-  - The editor keeps the theme's `name` and `shortname` lines and saves to the same theme id, so the Android and TDesktop tabs fill one theme.
+**One identity, two ways to publish** ([Publishing](PUBLISHING.md)). `cloud.json` records the slug `TRhfHcbvZHlOucyc`, which Telegram generated when the owner created the theme in the Theme Editor. Both routes write to that theme:
+- **Theme Editor.** **IMPORT FILE** converts the file into the editor's text form, and **SAVE AND APPLY THEME** rebuilds the document from that text (the Desktop zip is repacked). The colours carry over, the bytes do not, and every key the file leaves out gets Telegram's default ([Coverage](#coverage)). The editor keeps the `name` and `shortname` lines and saves to the same theme id, so the Android and TDesktop tabs fill one theme.
 - **Publisher.** Uploads the exact generated bytes and verifies them by download. Its first run after an editor save reports `updated`.
 
-**What `verified` means.** The guide leads with the install link only when `cloud.json` says `verified`, which the owner sets by hand after applying the link on both clients and recording the evidence. These are separate facts, recorded separately:
-1. the cloud theme exists;
-2. its Android document is imported;
-3. its Desktop document is imported;
-4. the link resolves;
-5. Android applies it;
-6. Desktop applies it.
+**What `verified` means.** The guide leads with the install link only when `cloud.json` says `verified`, which the owner sets by hand after applying the link on both clients and recording the evidence. Recorded separately: the cloud theme exists; its Android document is imported; its Desktop document is imported; the link resolves; Android applies it; Desktop applies it.
 
 **Slugs.** Both clients accept 5 to 64 characters of `[A-Za-z0-9_]`, starting with a letter and not ending with `_` (pinned `ThemeSetUrlActivity`, `IsGoodSlug`). Telegram's generated slugs are 16 letters and digits. Hyphens never work: Desktop's link handler rejects them. `j3w1` is too short, so it is not a candidate; `j3w1_theme` is kept only to name a new theme if `slug` is ever empty.
 
-**Not supported.** Official clients that read neither format: Telegram for iOS, Telegram for macOS (App Store), Telegram Web and Telegram X.
-
 ## Limitations
 
-- **Colours only.** Telegram owns fonts, sizes, bubble corners, spacing, glass/blur effects, motion and accessibility settings. The theme changes none of them.
-- **No independent heading hook.** The pinned formats expose shared names and chrome titles, which retain bright rose under D-033. They expose no independent H1–H6 foreground, so `text.heading` is unsupported instead of turning UI names or all bold text near-white. `text.highlight` is mapped only to Desktop's two thumbnail controls (`historyFileThumbIconFg` and `historyFileThumbRadialFg`): bright rose on their media scrim measures 3.66:1 over white media, so these contrast-critical glyphs retain an explicit near-white highlight.
-- **Android selected bubbles.** Android uses the same message text colour for normal and selected bubbles; Desktop has separate selected foregrounds.
-- **Android text selection.** Android keeps the text and code colours inside a selection; Desktop turns selected text and links near-white.
-  - **Visibility:** the tint stands ΔE 36.5 from the message field, 35.1 from incoming bubbles and 21.5 from outgoing bubbles.
-  - **Rose text:** stays at 5.53:1 or above where the tint is drawn under it (messages, the message field, instant view).
-  - **Text the tint covers:** in the rich editor's tables and captions and the rich-message translation preview, Telegram paints the tint over the text. There, selected text measures 2.96 to 3.43:1.
-  - **While a selection lasts:** links measure 3.45 to 4.30:1. In code blocks, keyword, string and comment colours measure 3.13 to 4.24:1, and number and constant colours 4.40:1 in outgoing blocks only; inside an outgoing code block the selection stands ΔE 18.3 from the block (D-036).
+- **Colours only.** Telegram owns fonts, sizes, bubble corners, spacing, glass/blur effects, motion and accessibility settings.
+- **No independent heading hook.** The pinned formats expose shared names and chrome titles (bright rose under D-033) but no independent H1–H6 foreground, so `text.heading` is unsupported rather than turning UI names or all bold text near-white. `text.highlight` is mapped only to Desktop's two thumbnail controls (`historyFileThumbIconFg`, `historyFileThumbRadialFg`): bright rose on their media scrim falls below 4.5:1 over white media, so these glyphs keep an explicit near-white highlight.
+- **Android selected bubbles** use the same message text colour as normal bubbles; Desktop has separate selected foregrounds.
+- **Android text selection.** Android keeps the text and code colours inside a selection; Desktop turns selected text and links near-white. The opaque `text-selection.bg` would therefore leave rose text below 4.5:1, so Android takes the translucent tint, which also keeps visible the content that some pinned paths paint the fill over: the rich editor's tables, captions and media blocks, and the rich-message translation preview.
+  - Rose text stays at 4.5:1 or above where the tint is drawn under it (messages, the message field, instant view).
+  - Below 4.5:1 while a selection lasts: selected text the tint covers (rich-editor tables and captions, the translation preview), links, code-block keyword, string and comment colours, and, in outgoing blocks only, number and constant colours. spec/accessibility.md (Limitations) states these limits; exports/contrast.md has the computed pairs.
 - **Platform keys differ.** Desktop exposes hover states that Android lacks. Android's outgoing-bubble gradient keys stay unset.
-- **Desktop chat-list badges.** This is a deliberate, host-forced departure from the canonical Badge count variant (`action.primary.bg` with `action.primary.text`).
+- **Desktop chat-list badges.** A deliberate, host-forced departure from the canonical Badge count variant (`action.primary.bg` with `action.primary.text`).
   - **Why:** Telegram Desktop reuses the draft-label and poll-icon colours as the reaction and poll badge fills, and uses one count colour per row state for every badge family. No dark fill can also be readable label text on the black row.
-  - **The fills:** Desktop chat-list badges are light pills with dark `text.on-light` counts. Unread pills are `text.accent-strong`, reaction and poll pills are `text.default`, and muted pills are `text.muted`.
+  - **The fills:** light pills with dark `text.on-light` counts. Unread pills are `text.accent-strong`, reaction and poll pills `text.default`, muted pills `text.muted`.
   - **On the selected row:** unread and reaction pills turn near-white and poll and muted pills rose, with the count in the row colour.
   - **Android and the Desktop sidebar** keep dark-red badges with near-white counts.
-  - **Tested:** a test checks every family and row state, the pills against their rows, and the wide icons drawn on the rows (pinned `unread_badge_paint.cpp`, `dialogs_layout`).
-- **Window title bar.** On Windows, Telegram Desktop's title bar follows Telegram's palette only when Telegram draws its own frame. The system frame is drawn by Windows.
-- **Wallpaper.** Android draws a native two-colour gradient. Desktop scales a 1×2 image of the same two colours. Neither uses a pattern or animation.
+  - **Tested:** every family and row state, the pills against their rows, and the wide icons drawn on the rows (pinned `unread_badge_paint.cpp`, `dialogs_layout`).
+- **Window title bar.** On Windows, Telegram Desktop's title bar follows Telegram's palette only when Telegram draws its own frame; Windows draws the system frame.
+- **Wallpaper.** Android draws a native two-colour gradient; Desktop scales a 1×2 image of the same two colours. Neither uses a pattern or animation.
 - **Host-controlled colours.** Translucent text and icons without an approved translucent role, chart data, Premium and story artwork, user colours and media keep Telegram's own colours.
 - **Android white glyphs Telegram fixes in code.** The theme sets only the fills behind them:
-  - **Composer send and mic buttons:** the icon is always white (`ChatActivityEnterView`, new design), drawn on `chat_messagePanelSend`, the accent red. That is about 3.4:1, above the 3:1 needed for an icon but below the 4.5:1 used for near-white text here.
+  - **Composer send and mic buttons:** the icon is always white (`ChatActivityEnterView`, new design), drawn on `chat_messagePanelSend`, the accent red: above the 3:1 needed for an icon, below the 4.5:1 used for near-white text here.
   - **Profile action buttons (Message, Mute, …):** labels are white, or black on a light button, chosen by brightness (`ProfileActionsView`).
-- **Desktop trending stickers' "installed" button.** Its style (`stickersTrendingInstalled`) uses the primary-button fill, `activeButtonBg`, as text on `lightButtonBgOver`. That fill must be dark for its near-white button text, so this one label stays dim (about 1.8:1). No palette can satisfy both uses.
-- **Android Settings icons.** Telegram Android 12.x paints the coloured squares behind the Settings icons from fixed gradients in its code (`IconBackgroundColors`, `SettingsActivity`), not from theme keys. They stay blue, orange, green and purple under every theme. On Desktop they are theme keys and use the action fill.
-- **Newer keys.** Keys Telegram adds after the pinned revisions use Telegram's light defaults until `keys.json` is refreshed.
-- **Desktop style-file colours.** Telegram Desktop's own `.style` files name a few more colours, such as `overviewFileExtFg`, that are not palette keys. They follow the palette key they point to, so the theme reaches them only through those keys, and the audit lists palette keys only.
-- **Accent settings.** A cloud theme that carries accent `settings` shows those settings on Android instead of its document. The publisher refuses such a theme at readback. On the Theme Editor route, the Android check on the device is what would reveal it.
-- **A theme with settings only.** The publisher treats a cloud theme that holds neither an Android nor a Desktop document as absent. At the recorded slug, it would then try to create a theme there, which Telegram refuses as occupied.
-
-## Installing from a file
-
-- **Android:** download [`j3w1.attheme`](https://j3w1.github.io/theme/ports/telegram/j3w1.attheme) and open it in Telegram (or send it to your Saved Messages and tap it there), then tap **Apply**.
-- **Desktop:** download [`j3w1.tdesktop-theme`](https://j3w1.github.io/theme/ports/telegram/j3w1.tdesktop-theme), open it with Telegram Desktop, click **Apply this theme**, then **Keep changes**.
-
-## Troubleshooting
-
-- **The link opens a web page.** Open it on a device where Telegram is installed, or paste it into any Telegram chat (Saved Messages works) and tap it there.
-- **Colours change at night on Android.** Auto-night mode switches to its night theme. Pick j3w1 for night too, or turn auto-night off, in Telegram's chat settings.
-- **One chat looks different.** That chat has its own chat theme; reset it from the chat's menu.
-- **Desktop says "Sorry, this theme doesn't include a version for Telegram Desktop."** The cloud theme lacks its Desktop document. The owner imports `j3w1.tdesktop-theme` in the Theme Editor's TDesktop tab and saves (or runs `npm run telegram:publish`). The file install works meanwhile.
-- **Android says "Sorry, this color theme doesn't support your device yet."** The cloud theme lacks its Android document. The owner imports `j3w1.attheme` in the Android tab and saves.
-- **The theme reverted after 15 seconds on Desktop.** Click **Keep changes** after applying a file.
+- **Desktop trending stickers' "installed" button.** Its style (`stickersTrendingInstalled`) uses the primary-button fill, `activeButtonBg`, as text on `lightButtonBgOver`. That fill must be dark for its near-white button text, so this one label stays dim, below 3:1. No palette can satisfy both uses.
+- **Android Settings icons.** Telegram Android 12.x paints the squares behind the Settings icons from fixed gradients in its code (`IconBackgroundColors`, `SettingsActivity`), not theme keys, so they stay blue, orange, green and purple under every theme. On Desktop they are theme keys and use the action fill.
+- **Desktop style-file colours.** Telegram Desktop's `.style` files name a few colours, such as `overviewFileExtFg`, that are not palette keys. They follow the palette key they point to, so the theme reaches them only through those keys; the audit lists palette keys only.
 
 ## Publisher and security
 
-`publish.mjs` is one module. It imports only Node built-ins and `src/contract.mjs`; the pinned `teleproto` client is imported only when a live publication runs. teleproto was vetted before pinning: it has no install scripts and its dependency tree carries verified registry signatures. Dependabot ignores it, so updates are manual and re-vetted.
+`publish.mjs` is one module. It imports only Node built-ins and `src/contract.mjs`; the pinned `teleproto` client is imported only when a live publication runs. teleproto was vetted before pinning: it has no install scripts and its dependency tree carries verified registry signatures. Dependabot ignores it, so updates are manual and re-vetted. The API calls were checked against teleproto 1.229.1's TL definitions and client source (`tl/generated/api.d.ts`, `client/*.js`).
 
 **How it publishes.**
 - Artifacts are read from committed Git objects and checked against that revision's export digests before any login.
 - A pure `converge` core does the work behind an injected transport, which the tests replace with a mock. It checks ownership, uploads only differing formats, never sends settings and verifies every write by download.
 - Writes with an uncertain outcome are read back before any retry, within at most three rounds.
 - A login code is requested at most once per run. Telegram's explicit data-centre redirects are followed at most twice.
+- A cloud theme that holds neither an Android nor a Desktop document counts as absent. At the recorded slug the publisher would then try to create a theme, which Telegram refuses as occupied.
 
 **How it protects credentials.**
 - The session and API credentials live only in private state: `~/.local/state/j3w1-theme/telegram/`, directories 0700, files 0600, never inside the repository.
@@ -184,9 +141,7 @@ The same `https://t.me/addtheme/<slug>` link opens the matching document on each
 
 **CI.** A gate job without an environment decides first. It runs only on a push to `main` after `release-gate`, and passes only when the commit is the current tip of `main` and the dist files changed since the last successful Telegram publication. So a refused or rerun workflow records no deployment, and an older revision is never republished. The environment-bound publish job then runs one at a time with read-only permissions and no persisted credentials. Secrets appear only in its publish step, and the publisher checks the tip of `main` again. CI only updates the theme recorded in `cloud.json`, and only after the owner has set it `verified`; it never creates one.
 
-**Without credentials.** `npm run generate`, `check`, `validate` and the tests never read Telegram credentials or contact Telegram, and neither does the Theme Editor route. Only `publish.mjs` and the opt-in CI job do.
-
-The API calls were checked against teleproto 1.229.1's TL definitions and client source (`tl/generated/api.d.ts`, `client/*.js`).
+**Without credentials.** `npm run generate`, `check`, `validate`, the tests and the Theme Editor route never read Telegram credentials or contact Telegram. Only `publish.mjs` and the opt-in CI job do.
 
 ## Verification
 
@@ -198,15 +153,9 @@ The API calls were checked against teleproto 1.229.1's TL definitions and client
 - every publisher outcome against a mock transport, including first publication, adopting the Theme Editor's theme by its recorded slug, same-identity update, verified no-op, readback mismatch, foreign owner, slug fallback, revoked authorization, flood waits, interrupted writes, rollback and redaction;
 - CI job isolation.
 
-**Observed on a device:** Telegram for Android 12.10.6 and Telegram Desktop 7.2.9 on Windows, through the cloud route, on 2026-10-06 ([acceptance record](evidence/2026-10-06-acceptance.md); `evidence/2026-10-06-import.json` binds it to the exact subject). Any later change to the files, tokens, mapping or targets makes that claim stale until it is recorded again. Each record keeps apart:
-- the Theme Editor accepting a file;
-- the link opening a preview;
-- the theme being applied;
-- the theme passing a visual check.
-
-The port is `verified` while that record matches; it returns to experimental if a later change is not re-checked on each client whose file it changes.
+**Observed on a device:** the 3.1.0 files on Telegram for Android 12.10.6 and Telegram Desktop 7.2.9 on Windows, through the cloud route, on 2026-10-06 ([acceptance record](evidence/2026-10-06-acceptance.md); `evidence/2026-10-06-import.json` binds it to the exact subject). Each record keeps apart the Theme Editor accepting a file, the link opening a preview, the theme being applied and the theme passing a visual check.
 
-**Current state:** experimental after integration with D-033. Both artifacts now use the 4.0.0 canonical palette; ordinary action foregrounds change to bright rose, with the two contrast-critical thumbnail highlights retained. The 2026-10-06 import and acceptance records are retained unchanged as historical evidence of the earlier 3.1.0 files. The owner must import and assess the new files on both clients before the port and cloud link return to verified. The Android selection correction from D-036 remains intact.
+**Current state: experimental.** D-033 changed both files to the 4.0.0 palette, so the 2026-10-06 records remain only as historical evidence of the 3.1.0 files. Any change to the files, tokens, mapping or targets makes a record stale. The port and the cloud link return to `verified` only after the cloud theme is updated with the new files and the owner imports and checks them on each client whose file changed.
 
 **Visual check, on Android and on Telegram Desktop for Windows:**
 - **Chats:** the chat list and the unread badges; one chat, with incoming and outgoing bubbles, message text, names, timestamps and links; a reply or quote; the composer and the send button.
@@ -217,4 +166,4 @@ The port is `verified` while that record matches; it returns to experimental if
   - a selection in a rich-editor table or caption, if Telegram offers the rich editor.
 - **Wallpaper:** the chat wallpaper.
 
-**Expected:** black to red-black surfaces, rose text, muted rose metadata, bright rose names and titles, red and rose accents, near-white only on red fills, and no Telegram blue or cyan. A problem is fixed in the tokens, the mapping or the generator, regenerated and imported again, never by editing the cloud theme.
+**Expected:** black to red-black surfaces, rose text, muted rose metadata, bright rose names and titles, red and rose accents, near-white only on red fills, and no Telegram blue or cyan.
diff --git a/ports/telegram/README.md b/ports/telegram/README.md
index 115337263..9525a0449 100644
--- a/ports/telegram/README.md
+++ b/ports/telegram/README.md
@@ -30,10 +30,17 @@ For the theme owner. No Telegram API application is needed.
 5. Check the install link on Android and on Telegram Desktop, as [Publishing](PUBLISHING.md#check-the-install-link) describes.
 <!-- install:end -->
 
+**Experimental:** the 4.0.0 files await a new import check on both clients ([Verification](IMPLEMENTATION.md#verification)). Telegram for iOS, Telegram for macOS (App Store), Telegram Web and Telegram X read neither file.
+
 To stop using j3w1, choose another theme in Telegram's chat or appearance settings.
 
-The current 4.0.0 artifacts are **experimental** pending a new import check on both clients. The prior 3.1.0 cloud theme was accepted on Telegram for Android 12.10.6 and Telegram Desktop 7.2.9 on Windows ([historical acceptance record](evidence/2026-10-06-acceptance.md)); D-033 changes both generated files. The cloud theme must be updated separately with these files before its verification can be renewed. Telegram for iOS, the macOS App Store app and Telegram Web read neither file.
+## Troubleshooting
+
+- **The link opens a web page.** Open it on a device with Telegram installed, or paste it into any Telegram chat (Saved Messages works) and tap it there.
+- **Colours change at night on Android.** Auto-night mode switched to its night theme. Pick j3w1 for night too, or turn auto-night off, in Telegram's chat settings.
+- **One chat looks different.** That chat has its own chat theme; reset it from the chat's menu.
+- **Desktop says "Sorry, this theme doesn't include a version for Telegram Desktop."** The cloud theme lacks its Desktop document. The owner imports `j3w1.tdesktop-theme` in the Theme Editor's TDesktop tab and saves (or runs `npm run telegram:publish`). The file install works meanwhile.
+- **Android says "Sorry, this color theme doesn't support your device yet."** The cloud theme lacks its Android document. The owner imports `j3w1.attheme` in the Android tab and saves.
+- **The theme reverted after 15 seconds on Desktop.** Click **Keep changes** after applying a file.
 
-[Publishing](PUBLISHING.md), including the optional automatic publisher ·
-[Troubleshooting](IMPLEMENTATION.md#troubleshooting) ·
-[Implementation](IMPLEMENTATION.md)
+[Publishing](PUBLISHING.md), including the optional automatic publisher · [Implementation](IMPLEMENTATION.md)
diff --git a/ports/telegram/capabilities.json b/ports/telegram/capabilities.json
index 50f4e8fce..3ff7271dc 100644
--- a/ports/telegram/capabilities.json
+++ b/ports/telegram/capabilities.json
@@ -1530,6 +1530,16 @@
       "surface": "typography",
       "reason": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these."
     },
+    "font.size.display": {
+      "state": "inherited",
+      "surface": "typography",
+      "reason": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these."
+    },
+    "font.size.title": {
+      "state": "inherited",
+      "surface": "typography",
+      "reason": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these."
+    },
     "font.size.h1": {
       "state": "inherited",
       "surface": "typography",
@@ -1580,6 +1590,16 @@
       "surface": "typography",
       "reason": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these."
     },
+    "font.line-height.display": {
+      "state": "inherited",
+      "surface": "typography",
+      "reason": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these."
+    },
+    "font.line-height.title": {
+      "state": "inherited",
+      "surface": "typography",
+      "reason": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these."
+    },
     "font.line-height.h1": {
       "state": "inherited",
       "surface": "typography",
diff --git a/ports/telegram/mapping.json b/ports/telegram/mapping.json
index b4526484f..7c4bf80f8 100644
--- a/ports/telegram/mapping.json
+++ b/ports/telegram/mapping.json
@@ -1544,6 +1544,8 @@
     "font.size.reading": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
     "font.size.code": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
     "font.size.terminal": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
+    "font.size.display": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
+    "font.size.title": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
     "font.size.h1": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
     "font.size.h2": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
     "font.size.h3": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
@@ -1554,6 +1556,8 @@
     "font.line-height.reading": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
     "font.line-height.code": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
     "font.line-height.terminal": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
+    "font.line-height.display": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
+    "font.line-height.title": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
     "font.line-height.h1": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
     "font.line-height.h2": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
     "font.line-height.h3": "Telegram theme files cannot set geometry, font metrics, layout, motion or focus-ring shape; host settings and accessibility preferences own these.",
diff --git a/ports/telegram/port.json b/ports/telegram/port.json
index 58722d954..e9d19ccfb 100644
--- a/ports/telegram/port.json
+++ b/ports/telegram/port.json
@@ -4,7 +4,7 @@
   "displayName": "Telegram Android and Desktop",
   "status": "experimental",
   "themeVersion": "4.0.0",
-  "tokenDigest": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY=",
+  "tokenDigest": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU=",
   "profile": "default",
   "format": "telegram-theme",
   "targetVersions": [
diff --git a/ports/warp/README.md b/ports/warp/README.md
index a62d73254..c253f8f5a 100644
--- a/ports/warp/README.md
+++ b/ports/warp/README.md
@@ -1,13 +1,11 @@
 # j3w1 theme for Warp (and Orca's Import from YAML)
 
-Status: experimental until a real import into the recorded version is
-evidenced. See `port.json` for scope, `mapping.json` for every native key and
-`capabilities.json` for the reason behind each role that is not mapped.
-
-`dist/j3w1.yaml` is generated from `mapping.json` and the default profile by
-`npm run generate`; never edit it by hand. It uses Warp's custom-theme format,
-which Orca's **Import from YAML** and **Import from Warp** also read. It has
-been checked against Orca 1.4.209's parser. No real Warp import is recorded.
+Status: experimental; no real Warp import is recorded. `port.json` holds the
+scope, `mapping.json` every native key, `capabilities.json` the reason for each
+unmapped role. `dist/j3w1.yaml` is generated from `mapping.json` and the
+default profile by `npm run generate`; never edit it by hand. It uses Warp's
+custom-theme format, which Orca's **Import from YAML** and **Import from Warp**
+also read, and has been checked against Orca 1.4.209's parser.
 
 ## What it themes, and what it does not
 
@@ -32,9 +30,9 @@ been checked against Orca 1.4.209's parser. No real Warp import is recorded.
      folders if needed) and click **Import from Warp**.
 3. With **Theme Mode** on Dark, select **j3w1 theme** under Dark Theme.
 
-Orca gives each file one second to parse, and that includes starting its parser.
-On a busy machine it can report "Theme file took too long to parse" for any
-file. Retry, or use the Orca port (`ports/orca/`), which has no time limit.
+Orca gives each file one second to parse, including starting its parser, so a
+busy machine can report "Theme file took too long to parse" for any file.
+Retry, or use the Orca port (`ports/orca/`), which has no time limit.
 
 ## Install in Warp
 
diff --git a/ports/warp/capabilities.json b/ports/warp/capabilities.json
index f77db78ee..beea1dcc4 100644
--- a/ports/warp/capabilities.json
+++ b/ports/warp/capabilities.json
@@ -1514,6 +1514,16 @@
       "surface": "outside-terminal",
       "reason": "Not a colour; a terminal theme file carries colours only."
     },
+    "font.line-height.display": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
+    "font.line-height.title": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
     "font.line-height.h1": {
       "state": "out-of-scope",
       "surface": "outside-terminal",
@@ -1564,6 +1574,16 @@
       "surface": "outside-terminal",
       "reason": "Not a colour; a terminal theme file carries colours only."
     },
+    "font.size.display": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
+    "font.size.title": {
+      "state": "out-of-scope",
+      "surface": "outside-terminal",
+      "reason": "Not a colour; a terminal theme file carries colours only."
+    },
     "font.size.h1": {
       "state": "out-of-scope",
       "surface": "outside-terminal",
diff --git a/ports/warp/mapping.json b/ports/warp/mapping.json
index bb30c10d8..a573fb2a2 100644
--- a/ports/warp/mapping.json
+++ b/ports/warp/mapping.json
@@ -340,6 +340,8 @@
     "font.letter-spacing.terminal": "The application's own terminal font setting.",
     "font.line-height.caption": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.code": "Not a colour; a terminal theme file carries colours only.",
+    "font.line-height.display": "Not a colour; a terminal theme file carries colours only.",
+    "font.line-height.title": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.h1": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.h2": "Not a colour; a terminal theme file carries colours only.",
     "font.line-height.h3": "Not a colour; a terminal theme file carries colours only.",
@@ -350,6 +352,8 @@
     "font.line-height.ui-sm": "Not a colour; a terminal theme file carries colours only.",
     "font.size.caption": "Not a colour; a terminal theme file carries colours only.",
     "font.size.code": "Not a colour; a terminal theme file carries colours only.",
+    "font.size.display": "Not a colour; a terminal theme file carries colours only.",
+    "font.size.title": "Not a colour; a terminal theme file carries colours only.",
     "font.size.h1": "Not a colour; a terminal theme file carries colours only.",
     "font.size.h2": "Not a colour; a terminal theme file carries colours only.",
     "font.size.h3": "Not a colour; a terminal theme file carries colours only.",
diff --git a/ports/warp/port.json b/ports/warp/port.json
index 879728ac2..cde42e9e9 100644
--- a/ports/warp/port.json
+++ b/ports/warp/port.json
@@ -4,7 +4,7 @@
   "displayName": "Warp theme YAML (also Orca's Import from YAML)",
   "status": "experimental",
   "themeVersion": "4.0.0",
-  "tokenDigest": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY=",
+  "tokenDigest": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU=",
   "profile": "default",
   "format": "warp-yaml",
   "targetVersions": [
diff --git a/ports/windows/COVERAGE.md b/ports/windows/COVERAGE.md
index 3092547cb..7b3fdb79e 100644
--- a/ports/windows/COVERAGE.md
+++ b/ports/windows/COVERAGE.md
@@ -1166,7 +1166,7 @@ is added. The same public install.ps1 transaction restores these settings.
 The taskbar right-click menu and hidden-icons overflow panel now use the raised
 surface, square edges and overlay border through the existing taskbar styler.
 Menu rest, hover, pressed, disabled and submenu-open states and separators use
-their canonical roles. Menu resource overrides stay local to that styler. Icons,
+their canonical roles. Menu resource overrides are shared across all five pinned shell stylers. Icons,
 menu actions, popup placement, control dimensions and native focus are preserved.
 
 These configuration and preservation checks do not establish installed rendering
diff --git a/ports/windows/README.md b/ports/windows/README.md
index d00023828..8b9520e04 100644
--- a/ports/windows/README.md
+++ b/ports/windows/README.md
@@ -3,7 +3,9 @@
 Black surfaces, rose text, red accents and small black/red cursors, generated
 from the canonical j3w1 tokens. This port is **experimental**. Full styling
 requires an exact supported Windows 11 x64 host; it does not theme every
-application. See [current coverage and remaining visual gaps](COVERAGE.md).
+application. [Coverage](COVERAGE.md) lists implemented surfaces, owner
+acceptances and open checks; [Compatibility](COMPATIBILITY.md) holds exact host
+boundaries, technical details, developer/offline instructions and history.
 
 ## Install
 
@@ -19,30 +21,27 @@ application. See [current coverage and remaining visual gaps](COVERAGE.md).
 Install commands appear here once v4.0.0 is released.
 <!-- install:end -->
 
-No Git, separate setup script or manual runtime installation is needed. Setup
-reuses compatible standalone PowerShell, Node and verified cached dependencies
-when available. It downloads required pinned dependencies only when needed.
-The whole installation does not require an administrator shell or a change to
-the system execution policy. Managed-device policy may still prevent execution.
+No Git, administrator shell, execution-policy change or manual runtime
+installation is needed; managed-device policy may still prevent execution.
+Setup reuses compatible standalone PowerShell, Node and verified cached
+dependencies, and downloads pinned dependencies only when needed. Windows
+Terminal and PowerToys are optional existing-app integrations; setup does not
+install them.
 
-Use the Windows PowerShell supplied with Windows. A Microsoft Store PowerShell
-process can retain its package context even when it starts another executable;
-the installer refuses that context before downloads or theme changes. See
-[the runtime boundary](COMPATIBILITY.md#runtime-registry-boundary).
+Microsoft Store PowerShell is refused before any download or theme change,
+because a process can keep its package context even when it starts another
+executable. See [the runtime boundary](COMPATIBILITY.md#runtime-registry-boundary).
 
 On a supported host, setup chooses **Full** styling. Otherwise it explains the
 limit and offers **Native** mode: personalization, wallpaper, cursors and
-supported existing app settings. Native mode omits the shell styling adapters.
-Pressing Enter cancels; nothing silently falls back. Verified downloads may
-remain after cancellation, but theme settings are unchanged.
+supported existing app settings, without the shell styling adapters. Pressing
+Enter cancels; nothing silently falls back. Verified downloads may remain after
+cancellation, but theme settings are unchanged.
 
-Windows Terminal and PowerToys are optional existing-app integrations; setup
-does not install those apps. Required dependencies are obtained automatically.
-
-**Testing an unpublished PR:** use the full immutable commit supplied with the
-reviewed candidate, rather than a branch URL. The
-[developer instructions](COMPATIBILITY.md#developer-and-offline-installation)
-cover that route. A draft candidate is not a published release.
+**Testing an unpublished PR:** use the full immutable commit of the reviewed
+candidate, not a branch URL, through the
+[developer instructions](COMPATIBILITY.md#developer-and-offline-installation).
+A draft candidate is not a published release.
 
 ## Update and test
 
@@ -50,27 +49,25 @@ cover that route. A draft candidate is not a published release.
 Install commands appear here once v4.0.0 is released.
 <!-- update:end -->
 
-Run the Install command for the desired release. The same script applies the
-changes and runs Test; repeating the same revision is safe. Updates are explicit.
-Close Settings and other app settings windows first, and reopen affected apps
-afterward. Setup does not close applications or restart your computer.
+Updates are explicit: run the Install command for the desired release, after
+closing Settings and app settings windows as for installation. It applies the
+changes and runs Test; repeating the same revision is safe. Setup does not close
+applications or restart your computer.
 
-To check the installed theme again, run the **Test** command printed by setup.
-The exact commands are saved in:
+The **Test** command printed by setup checks managed files, settings, the
+running engine and compatibility. It does not check appearance: a passing Test
+does not establish that every window or interaction state renders correctly.
+The printed commands are saved in:
 
 ```text
 %LOCALAPPDATA%\j3w1-theme\windows\recovery-commands.txt
 ```
 
-Test checks managed files, settings, the running engine and compatibility.
-Check the appearance separately; a passing Test does not establish that every
-window or interaction state renders correctly.
-
 ## Undo
 
-Choose **one** of the recovery commands printed by setup or saved in
-`recovery-commands.txt`. Every command runs the same `install.ps1`; no separate
-rollback script, revision selection or runtime path is needed.
+Run **one** of the recovery commands printed by setup or saved in
+`recovery-commands.txt`. Each runs the same `install.ps1`; no separate rollback
+script, revision selection or runtime path is needed.
 
 | Action | Result |
 | --- | --- |
@@ -82,16 +79,17 @@ rollback script, revision selection or runtime path is needed.
 Install commands appear here once v4.0.0 is released.
 <!-- restore:end -->
 
-Recovery works offline with the saved release and runtime. Keep the state
-directory: its journal, backups and verified cache are needed for restoration.
-Commands are saved before settings change, including when the first installation
-fails. After updates or `Restore -Latest`, they follow the remaining installed
-version automatically.
-
-Original-state restoration can take several minutes after many updates. Wait
-for the final result. Later user edits are preserved as reported conflicts;
-resolve those locally and rerun the same command. Shared tools, fonts and
-recovery data are retained. See [interrupted recovery](COMPATIBILITY.md#recovery)
+Recovery works offline from the saved release and runtime, so keep the state
+directory: its journal, backups and verified cache are needed. The commands are
+saved before settings change, even if the first installation fails, and after
+updates or `Restore -Latest` they follow the remaining installed version.
+
+Original-state restoration can take several minutes after many updates; wait
+for the final result. Later user edits are preserved as reported conflicts:
+resolve them locally and rerun the same command. Shared tools, fonts and
+recovery data are retained. Where Notepad's original caption color was
+unreadable, rollback resets it to the Windows default, so a previous custom
+caption override can be lost. See [interrupted recovery](COMPATIBILITY.md#recovery)
 for missing-cache, lock or conflict handling.
 
 ## What changes
@@ -106,8 +104,6 @@ for missing-cache, lock or conflict handling.
 | Windows Terminal | Existing supported settings plus Full-mode tab/menu chrome; commands, shortcuts and text sizes are preserved |
 | Existing PowerToys utilities | Supported FancyZones, Always On Top and Command Palette settings; optional layouts are added without assigning them |
 
-Full mode also installs a current-user sign-in compatibility guard. A changed or
-unreadable fingerprint refuses styling; the guard does not download updates.
 Desktop icons, shortcuts, window placement, existing layouts and unrelated
 settings are preserved. Customized folder and shortcut icons keep their own
 registrations. Explorer is not force-restarted to refresh icons.
@@ -115,185 +111,78 @@ registrations. Explorer is not force-restarted to refresh icons.
 ## Named Windows theme and active engine
 
 Setup applies native personalization and installs `j3w1-managed.theme` beside
-your other Windows themes. Selecting its name in the Personalization gallery
-is currently a separate action: open
-`%LOCALAPPDATA%\Microsoft\Windows\Themes\j3w1-managed.theme`, then select it
-if Windows opens the gallery. That gallery selection is outside the setup
-journal; the managed file and applied personalization have journaled recovery.
-
-Full setup starts the retained Windhawk engine. Test fails if that engine is
-stopped. Repeating installation of the same revision can restart it without
-recompiling unchanged adapters; it preserves reported settings conflicts.
-
-At sign-in, Full mode uses one managed shortcut in your Startup folder to invoke
-the same installer's compatibility guard with the retained runtime and explicit
-state path. Setup replaces its previous registry startup command, which could
-exceed Windows' 260-character Run-key limit. The shortcut and removal of the old
-entry share normal journaled Update, Restore and Uninstall recovery. Setup does
-not create another public script, scheduled task or background watcher. A manual
-guard invocation remains separate from acceptance after an actual new sign-in.
+your other Windows themes. To select it by name in the Personalization gallery,
+open `%LOCALAPPDATA%\Microsoft\Windows\Themes\j3w1-managed.theme`, then select
+it if Windows opens the gallery. That selection is outside the setup journal;
+the managed file and applied personalization have journaled recovery.
+
+Full setup starts the retained Windhawk engine; Test fails if it is stopped.
+Reinstalling the same revision can restart it without recompiling unchanged
+adapters and preserves reported settings conflicts.
+
+Full mode also installs a current-user sign-in compatibility guard: one managed
+shortcut in your Startup folder runs the same installer's guard with the
+retained runtime and explicit state path. A changed or unreadable fingerprint
+refuses styling; the guard does not download updates. The shortcut replaces the
+previous registry startup command, which could exceed Windows' 260-character
+Run-key limit, and both changes share the journaled Update, Restore and
+Uninstall recovery. Setup creates no other public script, scheduled task or
+background watcher. A manual guard run is not acceptance of an actual new sign-in.
 
 ## Remaining limits
 
-The owner confirmed that Paint's Selection and Brushes buttons, including their
-dropdown arrows, keep black/red/rose hover and pointer-exit colors with the
-permanent correction installed. The installed hardware volume popup and
-input-language picker were also accepted. These confirmations cover those
-recorded states; they do not establish complete Windows-wide appearance.
-
-The owner also confirmed completed small and large Markdown previews after
-rollback/reapply: both retain black backgrounds and the improved rose reading
-formatting. Preview startup frames remain a separate acceptance check.
-
-Notepad now admits an existing native header through its exact package/runtime
-adapter. If its original caption color is unknown, rollback resets that caption
-to Windows' default under the owner-approved Notepad-only policy; a previous
-custom caption override could be lost. Captured originals still restore exactly.
-The public caption API remains excluded because it covered the custom tabs on
-the recorded host. After Update, Test, Latest Restore, baseline verification
-and reapply, the owner confirmed the existing first header is black, with
-unobstructed tabs and all three native window buttons visible. Paint's surrounding drawing workspace is still gray; an opaque viewport
-background is not an acceptable fix because it can cover the artwork.
-
-Other app states, notification action buttons, fresh native preview startup,
-DPI/accessibility variants, sign-in and a clean-PC Full installation still need
-acceptance. White native Explorer window-button symbols were accepted by the
-owner. Native behavior and accessibility settings take priority.
-
-[Coverage](COVERAGE.md) lists implemented surfaces and unresolved checks.
-[Compatibility](COMPATIBILITY.md) retains exact host boundaries, technical
-details, developer/offline instructions and historical observations. These
-limits do not change when setup or Test succeeds.
-
-
-### Quick Settings and taskbar popup surfaces
-
-The owner's screenshot showed a gray media card, gray brightness/volume
-tracks and thumbs, and orange checked quick-action tiles while the outer
-Quick Settings frame and labels were already themed. The previous configuration
-omitted those separate native controls. The existing pinned notification styler
-now maps the media backing and L1 layers to the black canvas, the paginated
-toggle presenters' normal/hover/pressed/checked/disabled states to the canonical
-switch palette, and the named media and footer buttons to their state palette.
-Slider resources are local to this styler; scoped track and thumb selectors
-map the visible parts. Native slider values, media playback, connectivity,
-rotation settings, labels, artwork, target sizes, navigation and focus remain
-host-owned. No global accent setting, diagnostic adapter or second installer
-is added. The same public install.ps1 transaction restores these settings.
-
-The taskbar right-click menu and hidden-icons overflow panel now use the raised
-surface, square edges and overlay border through the existing taskbar styler.
-Menu rest, hover, pressed, disabled and submenu-open states and separators use
-their canonical roles. Menu resource overrides are now shared across the five shell stylers. Icons,
-menu actions, popup placement, control dimensions and native focus are preserved.
-
-These configuration and preservation checks do not establish installed rendering
-acceptance. First-open, pointer-exit, disabled, focus, high-contrast and DPI
-behavior still need bounded native checks. Slider thumb silhouettes remain
-native; no replacement drawing or artwork overlay is used.
-
-
-### Deferred chrome island discovery
-
-The owner supplied gray Windows Terminal profile and tab-menu screenshots.
-Source inspection found a startup defect: a pending named chrome control was
-retried against the entire XamlRoot content, then removed from the pending list.
-Terminal's generic document page is intentionally outside the chrome allowlist,
-so that retry could discard the tab/menu root. Deferred discovery now uses the
-same bounded root selection as immediate discovery. It retains the named chrome
-control or its topmost admitted ancestor in the same XamlRoot. A generic page,
-foreign root, terminal pane, drawing surface or document does not grant admission.
-The exact package/runtime checks, existing restoration path and public installer
-are retained. Synthetic native checks exercise generic content, admitted parents,
-foreign roots and bounded cyclic ancestry. Installed menu rendering still needs
-acceptance; this source defect does not by itself explain every gray menu frame.
-
-
-### Paint toolbar menus before opening
-
-The recorded Paint package creates its File/Edit/View `MenuBarItemFlyout` on
-the loaded `ContentButton` before opening; its presenter style is initially
-unset. The existing Paint adapter now prepares that exact owned toolbar endpoint
-with the mapped raised surface, rose foreground, overlay border and a null
-system backdrop. The native template, dimensions, items, actions and keyboard
-behavior remain unchanged. It admits only the same-root AppChrome/MenuBarItem
-chain on its UI thread, with normal accessibility state; custom styles,
-bindings, unrelated controls and menus already open at first discovery are
-left to the host. Rollback restores the unset local value while preserving later
-application replacements. Failed writes retain their receipt for cleanup retry. Retired owners return their
-style through the same bounded refresh path before receipts are released.
-The null backdrop setter uses the public property/value accessors: the
-two-argument WinUI constructor rejects null and previously caused the toolbar
-to return to native gray. Detached construction, style assignment and native
-presenter application passed on the recorded runtime. Installed first-open
-assessment remains separate; this does not establish startup-frame timing,
-submenu or whole-application acceptance.
-
-### Popup discovery before Loaded
-
-Notepad, Paint and Terminal menu styling now keeps track of permitted popup
-controls discovered before their templates are ready. It applies the existing
-palette when those controls load, then removes the callback. The same installer
-restores this change. Native ownership and cleanup checks are separate from
-installed first-open appearance; remaining visual limits stay recorded above.
+Setup or Test success does not change these limits. Native behavior and
+accessibility settings take priority. Owner confirmations cover only their
+recorded states, not complete Windows-wide appearance; the current list is in
+[Coverage](COVERAGE.md#current-owner-scope-and-historical-evidence). Other app
+states, notification action buttons, fresh native preview startup and
+DPI/accessibility variants still need acceptance, and no sign-in or clean-PC
+Full installation is claimed. Paint's gray drawing surround is host-owned and
+excluded from recoloring by the owner; an opaque viewport background would cover
+the artwork.
+
+Recent corrections and their own open checks are recorded in Coverage:
+[Quick Settings and taskbar popup surfaces](COVERAGE.md#quick-settings-and-taskbar-popup-surfaces),
+[deferred chrome island discovery](COVERAGE.md#deferred-chrome-island-discovery),
+[Paint toolbar menus before opening](COVERAGE.md#paint-toolbar-menus-before-opening),
+[popup discovery before Loaded](COVERAGE.md#popup-discovery-before-loaded) and
+[Settings search frame geometry](COVERAGE.md#settings-search-frame-geometry).
 
 ### Shared shell context menus
 
-Start and Search, notification center, Settings, Explorer and the taskbar now
-consume one Windows XAML menu recipe. It covers the presenter and its template
-border, ordinary/check/submenu items, separators, shortcut hints, and normal,
-hover, pressed, disabled and submenu-open colors. The rules match native menu
-control types, not command text or the location where a menu opens. Native
-menu sizing, commands, icons and keyboard focus remain owned by Windows.
-
-The resource palette is shared by all five pinned shell stylers. The same
-semantic roles remain in the separate WinUI app adapter used by Notepad, Paint
-and Terminal; classic Explorer menus retain their native drawing adapter.
-These rendering families require different host interfaces. This is shared
-coverage of the supported hosts, not a claim that one Windows accent setting
-recolors every third-party or custom-drawn menu. The existing compatibility
-checks and the single public install.ps1 update/restore transaction still apply.
-
-Source checks establish common rules and token mappings. Screenshots of the
-previous gray menus establish the defect; installed first-open, hover-exit,
-high-contrast and DPI appearance still require their own assessment.
-
-### Text commands and search suggestions
-
-Textbox command menus use a command-bar flyout, rather than the ordinary
-MenuFlyout template. All five shell stylers now share the command flyout's
-raised background, overlay border, command foreground, shortcut hints,
-separators, and normal, hover, pressed, disabled and checked resource colors.
-The observed WinUI 2 command-bar class and its native overflow presenter use
-one common recipe. Explorer's earlier local command-flyout rules are folded
-into that recipe; its ordinary toolbar background remains separate.
-
-Standard suggestion containers and FlyoutPresenter backings use the same
-raised surface and overlay frame. Settings' recorded custom search wrapper
-uses a native flyout and list-item presenters; its row palette preserves the
-selected dark-red fill across hover and restores the raised fill on pointer
-exit. The mappings do not set widths, offsets, command labels, keyboard
-behavior, or popup placement. Installation and restoration still use only
-install.ps1. Rendered assessment is separate from source and lifecycle checks.
-
-See Microsoft's [command-bar flyout template](https://github.com/microsoft/microsoft-ui-xaml/blob/v2.8.7/dev/CommandBarFlyout/CommandBarFlyout_themeresources.xaml)
+Start and Search, notification center, Settings, Explorer and the taskbar share
+one Windows XAML menu recipe, and all five pinned shell stylers share its
+resource palette. It covers the presenter and its template border,
+ordinary/check/submenu items, separators and shortcut hints in normal, hover,
+pressed, disabled and submenu-open states. Rules match native control types,
+not command text or where a menu opens; sizing, commands, icons and keyboard
+focus stay native. Notepad, Paint and Terminal use the same roles through the
+separate WinUI app adapter, and classic Explorer menus keep their native drawing
+adapter, because these families need different host interfaces. This covers
+the supported hosts only; no single Windows accent setting recolors every
+third-party or custom-drawn menu.
+
+Textbox command menus use a command-bar flyout, not the ordinary MenuFlyout
+template. The five shell stylers share one recipe for it and its native overflow
+presenter: raised background, overlay border, command foreground, shortcut
+hints, separators, and normal, hover, pressed, disabled and checked colors.
+Explorer's earlier local command-flyout rules are folded into it; its ordinary
+toolbar background stays separate. Standard suggestion containers and
+FlyoutPresenter backings use the same raised surface and overlay frame.
+Settings' custom search wrapper keeps the selected dark-red fill across hover
+and restores the raised fill on pointer exit. No mapping sets widths, offsets,
+command labels, keyboard behavior or popup placement. See Microsoft's
+[command-bar flyout template](https://github.com/microsoft/microsoft-ui-xaml/blob/v2.8.7/dev/CommandBarFlyout/CommandBarFlyout_themeresources.xaml)
 and [suggestion template](https://github.com/microsoft/microsoft-ui-xaml/blob/v2.8.7/dev/AutoSuggestBox/AutoSuggestBox_themeresources.xaml)
 for the distinct resource keys and native frame ownership.
 
-### Settings search frame geometry
-
-The supported Settings search template wraps its TextBox in
-`StackPanel#SettingsCommandSearchBoxBackground`. That parent retains a native
-rounded radius and clips the otherwise square input frame. The scoped mapping
-sets only this parent's radius to `radius.none`. It does not add another border
-or change the wrapper's fill, layout, input, suggestions, or focus behavior.
-The existing native input states keep the ordinary and active frame colors.
-Update and rollback use the same public install.ps1 transaction.
+Source checks establish the common rules and token mappings; screenshots of the
+earlier gray menus establish the defect. Installed first-open, hover-exit,
+high-contrast and DPI appearance still need their own assessment.
 
 ### Shared source generation
 
 Calculator and the WinUI chrome adapters share the owned theme-refresh and
-control-resource templates. Template substitution uses one checked renderer;
-each generated Windhawk source remains standalone for its pinned compiler.
-Refactors must preserve the emitted adapter bytes when their behavior is
-unchanged. The public installer and rollback contracts are unaffected.
+control-resource templates, substituted by one checked renderer; each generated
+Windhawk source stays standalone for its pinned compiler. Refactors must
+preserve the emitted adapter bytes when behavior is unchanged.
diff --git a/ports/windows/capabilities.json b/ports/windows/capabilities.json
index a24fb875b..10bd61b74 100644
--- a/ports/windows/capabilities.json
+++ b/ports/windows/capabilities.json
@@ -1509,6 +1509,16 @@
       "surface": "unsupported",
       "reason": "Outside Windows visual adapter scope; preserve host semantics."
     },
+    "font.size.display": {
+      "state": "unsupported",
+      "surface": "unsupported",
+      "reason": "Outside Windows visual adapter scope; preserve host semantics."
+    },
+    "font.size.title": {
+      "state": "unsupported",
+      "surface": "unsupported",
+      "reason": "Outside Windows visual adapter scope; preserve host semantics."
+    },
     "font.size.h1": {
       "state": "mapped",
       "surface": "powertoys",
@@ -1559,6 +1569,16 @@
       "surface": "unsupported",
       "reason": "Outside Windows visual adapter scope; preserve host semantics."
     },
+    "font.line-height.display": {
+      "state": "unsupported",
+      "surface": "unsupported",
+      "reason": "Outside Windows visual adapter scope; preserve host semantics."
+    },
+    "font.line-height.title": {
+      "state": "unsupported",
+      "surface": "unsupported",
+      "reason": "Outside Windows visual adapter scope; preserve host semantics."
+    },
     "font.line-height.h1": {
       "state": "mapped",
       "surface": "powertoys",
diff --git a/ports/windows/mapping.json b/ports/windows/mapping.json
index b3a8fe2ba..b7bd2c3e8 100644
--- a/ports/windows/mapping.json
+++ b/ports/windows/mapping.json
@@ -2474,11 +2474,15 @@
     "font.size.ui-md": "Outside Windows visual adapter scope; preserve host semantics.",
     "font.size.ui-lg": "Outside Windows visual adapter scope; preserve host semantics.",
     "font.size.terminal": "Outside Windows visual adapter scope; preserve host semantics.",
+    "font.size.display": "Outside Windows visual adapter scope; preserve host semantics.",
+    "font.size.title": "Outside Windows visual adapter scope; preserve host semantics.",
     "font.size.caption": "Outside Windows visual adapter scope; preserve host semantics.",
     "font.line-height.ui-sm": "Outside Windows visual adapter scope; preserve host semantics.",
     "font.line-height.ui-md": "Outside Windows visual adapter scope; preserve host semantics.",
     "font.line-height.ui-lg": "Outside Windows visual adapter scope; preserve host semantics.",
     "font.line-height.terminal": "Outside Windows visual adapter scope; preserve host semantics.",
+    "font.line-height.display": "Outside Windows visual adapter scope; preserve host semantics.",
+    "font.line-height.title": "Outside Windows visual adapter scope; preserve host semantics.",
     "font.line-height.caption": "Outside Windows visual adapter scope; preserve host semantics.",
     "font.letter-spacing.terminal": "Outside Windows visual adapter scope; preserve host semantics.",
     "density.compact.control-height": "Outside Windows visual adapter scope; preserve host semantics.",
diff --git a/ports/windows/port.json b/ports/windows/port.json
index 607a7ecff..d2605f17c 100644
--- a/ports/windows/port.json
+++ b/ports/windows/port.json
@@ -4,7 +4,7 @@
   "displayName": "Windows 11 native and Windhawk theme",
   "status": "experimental",
   "themeVersion": "4.0.0",
-  "tokenDigest": "sha256-zFvYCG+sRacSRpLqVjVsMUNxxfakWzjnJrCN7WOgQYY=",
+  "tokenDigest": "sha256-RSRMNUXS52R1kup7ka5S96aTGgpzVa7aYPwKQ6W78mU=",
   "profile": "default",
   "format": "windows-theme",
   "targetVersions": [
diff --git a/schemas/roles.mjs b/schemas/roles.mjs
index a0402af2d..8ee0f1628 100644
--- a/schemas/roles.mjs
+++ b/schemas/roles.mjs
@@ -47,8 +47,8 @@ export const REQUIRED_FOUNDATION_ROLES = [
   "radius.none",
   "font.family.mono",
   ...under("font.weight", ["regular", "bold"]),
-  ...under("font.size", ["ui-sm", "ui-md", "ui-lg", "reading", "code", "terminal", "h1", "h2", "h3", "caption"]),
-  ...under("font.line-height", ["ui-sm", "ui-md", "ui-lg", "reading", "code", "terminal", "h1", "h2", "h3", "caption"]),
+  ...under("font.size", ["ui-sm", "ui-md", "ui-lg", "reading", "code", "terminal", "display", "title", "h1", "h2", "h3", "caption"]),
+  ...under("font.line-height", ["ui-sm", "ui-md", "ui-lg", "reading", "code", "terminal", "display", "title", "h1", "h2", "h3", "caption"]),
   "font.letter-spacing.terminal",
   ...["compact", "comfortable"].flatMap((d) => under(`density.${d}`, ["control-height", "row-height", "control-padding-x", "icon", "gap"])),
   ...under("focus", ["ring", "ring-container", "offset", "offset-container", "offset-invalid"]),
diff --git a/scripts/ci/dependabot-refresh.mjs b/scripts/ci/dependabot-refresh.mjs
index fb7883b43..ebabfabdd 100644
--- a/scripts/ci/dependabot-refresh.mjs
+++ b/scripts/ci/dependabot-refresh.mjs
@@ -2,6 +2,7 @@
 // Proposes generated changes for an npm Dependabot PR. Never stages in the
 // checkout's index or changes the PR; the patch is not a compatibility check.
 
+import { gitBytes } from "../tooling/git.mjs";
 import { execFileSync } from "node:child_process";
 import { appendFileSync, mkdtempSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import path from "node:path";
@@ -24,7 +25,7 @@ export const isGenerated = (file) => generatedFiles.has(file) ||
 export const isNpmBump = (paths, workspaces) => paths.some((file) =>
   file === "package.json" || file === "package-lock.json" || workspaces.some((workspace) => file === `${workspace}/package.json`));
 
-const git = (dir, args, options = {}) => execFileSync("git", args, { cwd: dir, maxBuffer: 64 * 1024 * 1024, ...options });
+const git = (dir, args, options = {}) => gitBytes(args, { cwd: dir, maxBuffer: 64 * 1024 * 1024, ...options });
 const lines = (bytes) => bytes.toString("utf8").split("\0").filter(Boolean);
 const sha = (dir, ref) => git(dir, ["rev-parse", "--verify", `${ref}^{commit}`]).toString("utf8").trim();
 
diff --git a/scripts/ci/select.mjs b/scripts/ci/select.mjs
index 224adb867..71205fd77 100644
--- a/scripts/ci/select.mjs
+++ b/scripts/ci/select.mjs
@@ -10,7 +10,8 @@
 // Writes the plan as JSON to stdout, and to $GITHUB_OUTPUT when set.
 
 import { execFileSync } from "node:child_process";
-import { createHash } from "node:crypto";
+import { sha256Hex } from "../lib/host-install/files.mjs";
+import { git as queryGit } from "../tooling/git.mjs";
 import { existsSync, readFileSync, appendFileSync, readdirSync, statSync } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -172,10 +173,10 @@ export function plan({ registry, event, paths, full = false, reason = null, spec
     paths: paths === null ? null : paths.length,
     reasons: [...new Set(reasons)].sort().slice(0, 40),
   };
-  return { ...body, planHash: createHash("sha256").update(JSON.stringify(body)).digest("hex") };
+  return { ...body, planHash: sha256Hex(JSON.stringify(body)) };
 }
 
-const git = (...args) => execFileSync("git", args, { cwd: root, encoding: "utf8" }).trim();
+const git = (...args) => queryGit(args, { cwd: root });
 
 export function changedPaths(base, head) {
   if (!SHA.test(base ?? "") || !SHA.test(head ?? "")) return null;
diff --git a/scripts/consumption-judge.mjs b/scripts/consumption-judge.mjs
index e39a9cb0b..4821e98ee 100644
--- a/scripts/consumption-judge.mjs
+++ b/scripts/consumption-judge.mjs
@@ -9,6 +9,7 @@
    with the component's stateRules. Exit code 1 on any failure; the judge is
    never loosened to make a run pass (tests/consumption/PROTOCOL.md). */
 
+import { rgbToHex, rgbCssToHex } from "./lib/color.mjs";
 import { promises as fs } from "node:fs";
 import path from "node:path";
 import { readJson, repoRoot } from "./lib/fs.mjs";
@@ -56,7 +57,7 @@ const normalise = (value) => {
   const v = value.trim().toLowerCase();
   const rgb = v.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)(?:[\s,/]+([\d.]+%?))?\s*\)$/);
   if (rgb) {
-    const hex = `#${[rgb[1], rgb[2], rgb[3]].map((n) => Number(n).toString(16).padStart(2, "0")).join("")}`;
+    const hex = rgbToHex(rgb.slice(1, 4));
     if (rgb[4] === undefined) return hex;
     const alpha = rgb[4].endsWith("%") ? Number(rgb[4].slice(0, -1)) / 100 : Number(rgb[4]);
     return alpha >= 1 ? hex : `rgb(${rgb[1]} ${rgb[2]} ${rgb[3]} / ${Math.round(alpha * 100)}%)`;
@@ -115,10 +116,6 @@ if (browser && findings.length === 0) {
   await page.goto(`file://${path.resolve(resultPath)}`);
   const rules = Object.fromEntries(component.stateRules.map((r) => [r.state, r.tokens]));
   computed = await page.evaluate((states) => {
-    const toHex = (rgb) => {
-      const m = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-      return m ? `#${[m[1], m[2], m[3]].map((n) => Number(n).toString(16).padStart(2, "0")).join("")}` : rgb;
-    };
     const out = {};
     for (const state of states) {
       const wrapper = document.querySelector(`[data-state="${state.replace(/"/g, '\\"')}"]`);
@@ -137,11 +134,14 @@ if (browser && findings.length === 0) {
       const outlineStyle = pick((s) => s.outlineStyle !== "none" && parseFloat(s.outlineWidth) > 0, cs);
       const bgStyle = pick((s) => s.backgroundColor !== "rgba(0, 0, 0, 0)", cs);
       const placeholder = state.includes("placeholder-shown") && "value" in control && control.value === "" ? getComputedStyle(control, "::placeholder").color : null;
-      out[state] = { color: toHex(placeholder ?? cs.color), background: toHex(bgStyle.backgroundColor), border: toHex(borderStyle.borderTopColor), outline: toHex(outlineStyle.outlineColor), outlineStyle: outlineStyle.outlineStyle, radius: borderStyle.borderRadius };
+      out[state] = { color: placeholder ?? cs.color, background: bgStyle.backgroundColor, border: borderStyle.borderTopColor, outline: outlineStyle.outlineColor, outlineStyle: outlineStyle.outlineStyle, radius: borderStyle.borderRadius };
     }
     return out;
   }, component.states);
   await b.close();
+  for (const entry of Object.values(computed)) {
+    for (const key of ["color", "background", "border", "outline"]) entry[key] = rgbCssToHex(entry[key]);
+  }
   for (const [state, expected] of Object.entries(rules)) {
     const actual = computed[state];
     if (!actual || !expected) continue;
diff --git a/scripts/lib/anchors.mjs b/scripts/lib/anchors.mjs
index ec6610ff4..7acf139a6 100644
--- a/scripts/lib/anchors.mjs
+++ b/scripts/lib/anchors.mjs
@@ -5,6 +5,8 @@
 export const anchorFor = {
   verification: (id) => `v-${id}`,
   component: (id) => `c-${id}`,
+  states: (id) => `${id}-states`,
+  heading: (kind, id, text) => `${kind === "component" ? "c" : "d"}-${id}--${text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")}`,
   family: (id) => `f-${id}`,
   doc: (id) => `d-${id}`,
   decision: (id) => `d-decisions--${id.toLowerCase()}`,
diff --git a/scripts/lib/color.mjs b/scripts/lib/color.mjs
new file mode 100644
index 000000000..f32262759
--- /dev/null
+++ b/scripts/lib/color.mjs
@@ -0,0 +1,28 @@
+/* Colour representation helpers. Byte RGB and float sRGB conversions stay
+   explicit so analytical callers never inherit token-authoring rounding. */
+export const rgb = hex => [1, 3, 5].map(i => Number.parseInt(hex.slice(i, i + 2), 16));
+
+export const rgbToHex = channels => `#${channels.map(n => Number(n).toString(16).padStart(2, "0")).join("")}`;
+
+export const colorValue = (hex, alpha = 1) => ({
+  colorSpace: "srgb",
+  components: rgb(hex).map(c => c / 255),
+  alpha,
+  hex,
+});
+
+/* Authoring keeps the established four-decimal token precision. */
+export const hexToColor = (hex, alpha = 1) => {
+  const value = colorValue(hex.toLowerCase(), alpha);
+  return { ...value, components: value.components.map(c => Number(c.toFixed(4))) };
+};
+
+/* Both source tokens and resolved exports have the same colour meaning. */
+export const hexOf = token => token?.type === "color" ? (token.resolved ?? token.value).hex : null;
+
+export const rgbCssToHex = css => {
+  const match = css.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  return match ? rgbToHex(match.slice(1, 4)) : css;
+};
+
+export const componentsToHex = components => rgbToHex(components.map(c => Math.round(c * 255)));
diff --git a/scripts/lib/contrast.mjs b/scripts/lib/contrast.mjs
index a43ca2a75..855302b00 100644
--- a/scripts/lib/contrast.mjs
+++ b/scripts/lib/contrast.mjs
@@ -6,10 +6,16 @@
    displayed ratio is rounded to two decimals (so 4.4996 reads 4.50 and still
    fails). */
 
-const linear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+import { colorValue, componentsToHex as toHex } from "./color.mjs";
+
+export const linear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
 
 export const luminance = ({ components: [r, g, b] }) => 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
 
+export const luminanceRgb = channels => luminance({ components: channels.map(c => c / 255) });
+export const luminanceHex = hex => luminance(colorValue(hex));
+export const contrastHex = (a, b) => ratio(colorValue(a), colorValue(b));
+
 /* Composites `top` (with alpha) over `under` (assumed opaque). */
 export const composite = (top, under) => {
   const a = top.alpha ?? 1;
@@ -18,8 +24,6 @@ export const composite = (top, under) => {
   return { colorSpace: "srgb", components, alpha: 1, hex: toHex(components) };
 };
 
-export const toHex = (components) => `#${components.map((c) => Math.round(c * 255).toString(16).padStart(2, "0")).join("")}`;
-
 export const ratio = (fg, bg) => {
   const l1 = luminance(fg);
   const l2 = luminance(bg);
diff --git a/scripts/lib/css.mjs b/scripts/lib/css.mjs
index 86681ac15..453a37cfe 100644
--- a/scripts/lib/css.mjs
+++ b/scripts/lib/css.mjs
@@ -38,7 +38,8 @@ export const buildCss = ({ profiles, defaultId }) => {
 export const buildDensityCss = (resolved) => {
   const lines = [];
   for (const mode of ["compact", "comfortable"]) {
-    lines.push(`[data-density="${mode}"] {`);
+    // compact is the default density: it also applies where no data-density is set (D-038).
+    lines.push(mode === "compact" ? `:root, [data-density="compact"] {` : `[data-density="${mode}"] {`);
     for (const key of ["control-height", "row-height", "control-padding-x", "icon", "gap"]) {
       const token = resolved.get(`density.${mode}.${key}`);
       lines.push(`  --density-${key}: ${toCss(token.type, token.resolved)};`);
diff --git a/scripts/lib/exports.mjs b/scripts/lib/exports.mjs
index 4ba0cdb4e..120a7a268 100644
--- a/scripts/lib/exports.mjs
+++ b/scripts/lib/exports.mjs
@@ -11,10 +11,10 @@ import { portDownloadPath } from "./port-presentation.mjs";
 
 const RAW = (manifest, rev) => manifest.sourceRevision.rawBase.replace("{rev}", rev);
 
-export const tagFor = (manifest) => `v${manifest.version}`;
+const tagFor = (manifest) => `v${manifest.version}`;
 
 /* The region between <!-- @compact:start --> and <!-- @compact:end -->, or the whole body. */
-export const compactRegion = (body) => {
+const compactRegion = (body) => {
   const m = body.match(/<!--\s*@compact:start\s*-->([\s\S]*?)<!--\s*@compact:end\s*-->/);
   return (m ? m[1] : body).trim();
 };
@@ -54,7 +54,7 @@ const foundationRows = (resolved, { filter = null } = {}) => {
   return rows;
 };
 
-export const shiftHeadings = (markdown, by = 1) => markdown.replace(/^(#{1,5}) /gm, (m, hashes) => `${"#".repeat(Math.min(6, hashes.length + by))} `);
+const shiftHeadings = (markdown, by = 1) => markdown.replace(/^(#{1,5}) /gm, (m, hashes) => `${"#".repeat(Math.min(6, hashes.length + by))} `);
 
 const stateRulesOf = (component) => {
   const table = component.sections.get("States") ?? "";
@@ -315,7 +315,7 @@ export const downloadsTable = (manifest, ports) =>
       ]
     : ["No application theme files are published yet."];
 
-export const catalogueTable = (catalogue) => [
+const catalogueTable = (catalogue) => [
   "| Reference | Kind | Where | What it does not prove |",
   "| --- | --- | --- | --- |",
   ...catalogue.entries.map((e) => `| ${e.title} | ${e.kind} | ${e.source ? `\`${e.source.repository}\` \`${e.source.path}\`` : `\`${e.path}\``} | ${e.notes} |`),
diff --git a/scripts/lib/figma-payload.mjs b/scripts/lib/figma-payload.mjs
index 0ba0577c0..ebeafeeb2 100644
--- a/scripts/lib/figma-payload.mjs
+++ b/scripts/lib/figma-payload.mjs
@@ -25,6 +25,19 @@ export const buildFigmaPayload = async (source, roles = FIGMA_SAMPLE_ROLES) => {
     variables.set(id, { id, name: id.replaceAll(".", "/"), type, value: token.aliasOf ? { alias: token.aliasOf } : value, resolvedValue: value, scopes, dependencyOnly: primitive, eligibility: token.eligibility }); return true;
   };
   for (const id of [...new Set(roles)].sort()) map(id);
-  const payload = { schemaVersion: 1, mappingVersion: FIGMA_MAPPING_VERSION, revision: source.revision, themeVersion: tokens.version, sourceDigests: { "exports/tokens.resolved.json": sha256(bytes) }, profile: "default", collection: "j3w1/theme/default/v1", mode: "Default", variables: [...variables.values()], unsupported, excludedProfiles: Object.entries(tokens.profiles).filter(([id]) => id !== "default").map(([id, item]) => ({ id, status: item.status, reason: "Not imported or promoted to a Figma mode." })), limits: ["One collection and its existing single default mode. Additional modes are rejected.", "Only the requested roles and alias dependencies are included. Use --roles for an explicit wider selection.", "Figma stores color channel numbers using its API representation; the receipt records actual readback, with source resolved values retained for comparison.", "Fonts, typography composites, shadows, borders and other composite types are not imported.", "Local file Variables API permission is required. Team library publishing and paid-plan features are not assumed.", "One-way import only. No document-to-token writeback."] };
+  const payload = {
+    schemaVersion: 1,
+    mappingVersion: FIGMA_MAPPING_VERSION,
+    revision: source.revision,
+    themeVersion: tokens.version,
+    sourceDigests: { "exports/tokens.resolved.json": sha256(bytes) },
+    profile: "default",
+    collection: "j3w1/theme/default/v1",
+    mode: "Default",
+    variables: [...variables.values()],
+    unsupported,
+    excludedProfiles: Object.entries(tokens.profiles).filter(([id]) => id !== "default").map(([id, item]) => ({ id, status: item.status, reason: "Not imported or promoted to a Figma mode." })),
+    limits: ["One collection and its existing single default mode. Additional modes are rejected.", "Only the requested roles and alias dependencies are included. Use --roles for an explicit wider selection.", "Figma stores color channel numbers using its API representation; the receipt records actual readback, with source resolved values retained for comparison.", "Fonts, typography composites, shadows, borders and other composite types are not imported.", "Local file Variables API permission is required. Team library publishing and paid-plan features are not assumed.", "One-way import only. No document-to-token writeback."]
+  };
   return { ...payload, payloadDigest: sha256(stableJson(payload)) };
 };
diff --git a/scripts/lib/generators.mjs b/scripts/lib/generators.mjs
index 7e7d691f2..df35003cf 100644
--- a/scripts/lib/generators.mjs
+++ b/scripts/lib/generators.mjs
@@ -18,7 +18,7 @@ import { statusOf, toCss, toResolvedExport } from "./tokens.mjs";
 import { buildCss, buildDensityCss } from "./css.mjs";
 import { loadDeclaredPairs, validateDocs, validatePorts, validateReferences } from "./validators.mjs";
 import { buildBrief, buildCompact, buildComponentJson, buildFull, buildLlms, contrastTable, coverageTable, demoVariantsOf, downloadsTable, portsTable, portGuidesTable, sourceDigestOf } from "./exports.mjs";
-import { loadFamilies } from "./spec.mjs";
+import { frontmatterPattern, loadFamilies } from "./spec.mjs";
 import { themeSchema } from "../../schemas/theme.mjs";
 import { componentSchema } from "../../schemas/component.mjs";
 import { portSchema } from "../../schemas/port.mjs";
@@ -192,7 +192,7 @@ export const docsGenerator = {
       ports.push({ ...port, verification: description.verification });
     }
     const { catalogue } = await validateReferences();
-    const decisionsMarkdown = (await readText("spec/decisions.md")).replace(/^---\n[\s\S]*?\n---\n/, "");
+    const decisionsMarkdown = (await readText("spec/decisions.md")).replace(frontmatterPattern, "$2");
     const compact = buildCompact({ manifest, profileId: defaultId, sourceDigest, resolved, docs, components, coverage });
     const compactLines = compact.split("\n").length;
     if (compactLines > 300) throw new Error(`theme.compact.md is ${compactLines} lines; the limit is 300`);
@@ -291,12 +291,26 @@ export const readmeGenerator = {
 export const PACKAGE_README = "packages/ui/README.md";
 export const packageReadmeOf = (guide) => `<!-- Generated from docs/ui-consumption.md by npm run generate; edit that file. -->\n\n${guide}`;
 
+export const uiConsumptionGuide = (guide, version) => {
+  const commands = {
+    "ui-install": `npm install --save-exact @j3w1/ui@${version}`,
+    "ui-tarball": `npm install --save-exact ./j3w1-ui-${version}.tgz`,
+    "ui-copy": `npx --package=@j3w1/ui@${version} j3w1-ui copy dialog --out ./vendor/j3w1/dialog\nnpx --package=@j3w1/ui@${version} j3w1-ui kit --components text-field,button,dialog --out ./vendor/j3w1/task`,
+  };
+  for (const [name, command] of Object.entries(commands)) {
+    guide = replaceMarkerBlock(guide, name, "```sh\n" + command + "\n```");
+  }
+  return guide;
+};
+
 export const packageReadmeGenerator = {
   name: "package README",
-  async run({ check }) {
+  async run({ check, manifest }) {
     const changed = [];
     const files = [];
-    await write(PACKAGE_README, packageReadmeOf(await readText("docs/ui-consumption.md")), { check, changed, files });
+    const guide = uiConsumptionGuide(await readText("docs/ui-consumption.md"), manifest.version);
+    await write("docs/ui-consumption.md", guide, { check, changed, files });
+    await write(PACKAGE_README, packageReadmeOf(guide), { check, changed, files });
     return { files, changed };
   },
 };
diff --git a/scripts/lib/hex-literals.mjs b/scripts/lib/hex-literals.mjs
index b04cca342..cbf677ac2 100644
--- a/scripts/lib/hex-literals.mjs
+++ b/scripts/lib/hex-literals.mjs
@@ -1,6 +1,7 @@
 /* Shared literal parsing and presentation for static HTML and explicit UI
    renderers. No DOM discovery runs in the browser. Colours are data, not roles. */
-export const escapeHtml = (text) => String(text).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+import { escapeHtml } from "./markup.mjs";
+export { escapeHtml } from "./markup.mjs";
 
 export const parseHex = (literal) => {
   if (!/^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i.test(literal)) return null;
diff --git a/scripts/lib/hex-routes.mjs b/scripts/lib/hex-routes.mjs
index aa39ed226..2fdaf8854 100644
--- a/scripts/lib/hex-routes.mjs
+++ b/scripts/lib/hex-routes.mjs
@@ -7,7 +7,7 @@ export const HEX_DECORATION = Object.freeze({
   /* Single pages. */
   pages: ["index.html", "reference/index.html"],
   /* Every HTML file under these trees, with today's token matches. */
-  trees: ["tokens/", "ports/", "recipes/", "kit/", "workbench/", "preview/", "components/", "foundations/", "tools/", "patterns/", "builder/", "figma/", "implement/", "agents/"],
+  trees: ["reference/", "tokens/", "ports/", "recipes/", "kit/", "workbench/", "preview/", "components/", "foundations/", "tools/", "patterns/", "builder/", "figma/", "implement/", "agents/"],
   /* Historical literals keep their exact fill without today's token matches. */
   historicalTrees: ["releases/"],
   /* Reconstructed specimens keep their exact, digest-recorded bytes. */
diff --git a/scripts/lib/host-install/generators.mjs b/scripts/lib/host-install/generators.mjs
index 78729fb3f..edcef2b5d 100644
--- a/scripts/lib/host-install/generators.mjs
+++ b/scripts/lib/host-install/generators.mjs
@@ -1,3 +1,5 @@
+import { escapeHtml as xml } from "../markup.mjs";
+
 /* Pure generators: a context in, file contents out. No clock, no
    filesystem; the caller passes resolvedAt for the lock. The installers and
    the port emitters (scripts/lib/port-artifacts.mjs) share them, so the file
@@ -43,7 +45,6 @@ export const claudeTheme = (ctx) => {
 
 export const claudeThemeText = (ctx) => `${JSON.stringify(claudeTheme(ctx), null, 2)}\n`;
 
-const xml = (s) => String(s).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
 
 const plistValue = (value, indent) => {
   const pad = "\t".repeat(indent);
diff --git a/scripts/lib/host-install/specimen.mjs b/scripts/lib/host-install/specimen.mjs
index 568bfcf7b..7f7b202fd 100644
--- a/scripts/lib/host-install/specimen.mjs
+++ b/scripts/lib/host-install/specimen.mjs
@@ -1,3 +1,8 @@
+import { rgb } from "../color.mjs";
+import { contrastHex as contrast } from "../contrast.mjs";
+export { rgb } from "../color.mjs";
+export { luminanceHex as luminance, contrastHex as contrast } from "../contrast.mjs";
+
 /* The terminal specimen. ports/orca/src/specimen.json names ANSI slots,
    tokens, Claude Code roles (fgRole/bgRole, through
    ports/claude-code/host.json) and Codex scopes (fgScope/bgScope, through
@@ -13,22 +18,6 @@ const RESET = `${ESC}0m`;
 /* The six attributes the terminal specification defines, nothing else. */
 const ATTRS = { bold: 1, dim: 2, italic: 3, underline: 4, inverse: 7, strikethrough: 9 };
 
-export const rgb = (hex) => [1, 3, 5].map((i) => Number.parseInt(hex.slice(i, i + 2), 16));
-
-const channel = (c) => {
-  const v = c / 255;
-  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
-};
-
-export const luminance = (hex) => {
-  const [r, g, b] = rgb(hex).map(channel);
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-};
-
-export const contrast = (a, b) => {
-  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
-  return (hi + 0.05) / (lo + 0.05);
-};
 
 const slotFg = (n) => (n === "default" ? 39 : n < 8 ? 30 + n : 90 + n - 8);
 const slotBg = (n) => (n === "default" ? 49 : n < 8 ? 40 + n : 100 + n - 8);
diff --git a/scripts/lib/markup.mjs b/scripts/lib/markup.mjs
index 2dd338df1..562d84ae9 100644
--- a/scripts/lib/markup.mjs
+++ b/scripts/lib/markup.mjs
@@ -37,3 +37,36 @@ export const namespaceMarkup = (tree, decorate, { strict = true, renameNames = f
     }
   });
 };
+
+/* Text and attribute escaping shared by HTML and XML renderers. */
+export const escapeHtml = (text) => String(text).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+
+/* Reference specimens do not own application destinations. Resolve an
+   undeclared demonstration fragment to its own link; real local destinations
+   and every strict IDREF keep their original relationship. Historical records
+   opt out in renderSpecimenMarkup so their recorded bytes stay exact. */
+export const resolveDemonstrationLinks = (tree) => {
+  const ids = new Set();
+  walkMarkup(tree, (node) => { const id = attribute(node, "id"); if (id) ids.add(id); });
+  walkMarkup(tree, (node) => {
+    if (!["a", "area"].includes(node.tagName)) return;
+    const href = attribute(node, "href");
+    if (!href?.startsWith("#") || href === "#") return;
+    const target = href.slice(1);
+    if (ids.has(target)) return;
+    const own = attribute(node, "id");
+    if (own) setAttribute(node, "href", `#${own}`);
+    else { setAttribute(node, "id", target); ids.add(target); }
+  });
+};
+
+/* Whitespace markers are decorative graphics (code-editor.md), not code text.
+   Keep their exact glyphs and inherited token colour in a CSS pseudo-element. */
+export const renderDecorativeWhitespace = (tree) => walkMarkup(tree, (node) => {
+  if (!hasClass(node, "code-editor-ws") || attribute(node, "aria-hidden") !== "true") return;
+  if (!(node.childNodes ?? []).every((child) => child.nodeName === "#text")) return;
+  const glyphs = (node.childNodes ?? []).map((child) => child.value).join("");
+  if (!/^[· ]+$/.test(glyphs)) return;
+  setAttribute(node, "data-whitespace", glyphs);
+  node.childNodes = [];
+});
diff --git a/scripts/lib/port-artifacts.mjs b/scripts/lib/port-artifacts.mjs
index e14380cd3..2641301ce 100644
--- a/scripts/lib/port-artifacts.mjs
+++ b/scripts/lib/port-artifacts.mjs
@@ -8,6 +8,7 @@
    published file and an installed one come from one implementation; their
    mapping.json must agree with host.json key for key. */
 
+import { hexOf as tokenHex, rgb } from "./color.mjs";
 import { chatgptAppearance, chatgptRoles, CHATGPT_SOURCE } from "./chatgpt-port.mjs";
 import { stringify } from "yaml";
 import { exists, readJson, stableJson, writeOrCheck } from "./fs.mjs";
@@ -30,8 +31,8 @@ export const WARP_YAML_KEYS = ["accent", "cursor", "background", "foreground",
 export const GHOSTTY_KEYS = ["background", "foreground", "cursor-color", "cursor-text", "selection-background", "selection-foreground",
   ...Array.from({ length: 16 }, (_, i) => `palette[${i}]`), "split-divider-color", "font-family", "font-size"];
 
-// Relative luminance of a #rrggbb colour, as Warp and Orca use it to tell dark from light.
-export const luminance = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).reduce((sum, c, i) => sum + c * [0.2126, 0.7152, 0.0722][i], 0);
+// Weighted encoded sRGB brightness used by Warp and Orca to classify dark themes.
+export const encodedBrightness = (hex) => rgb(hex).map((c) => c / 255).reduce((sum, c, i) => sum + c * [0.2126, 0.7152, 0.0722][i], 0);
 
 /* Native key → value, for the keys an emitter knows, each written once.
    `convert` turns a resolved token into the native value or throws. */
@@ -49,7 +50,7 @@ const nativeValues = ({ port, mapping, resolved }, keys, convert) => {
   return values;
 };
 const hexOf = (port, role, token) => {
-  const value = token.type === "color" ? toCss(token.type, token.resolved) : null;
+  const value = (token.resolved?.alpha ?? 1) < 1 ? null : tokenHex(token);
   if (!/^#[0-9a-f]{6}$/.test(value ?? "")) throw new Error(`ports/${port.id}: ${role} is not an opaque colour`);
   return value;
 };
@@ -62,7 +63,7 @@ const warpYaml = ({ manifest, port, mapping, resolved }) => {
   const theme = { name: "j3w1 theme" };
   for (const key of WARP_YAML_KEYS) {
     if (!values.has(key)) continue;
-    if (key === "terminal_colors.normal.black") theme.details = luminance(values.get("background")) < 0.5 ? "darker" : "lighter";
+    if (key === "terminal_colors.normal.black") theme.details = encodedBrightness(values.get("background")) < 0.5 ? "darker" : "lighter";
     const parts = key.split(".");
     let node = theme;
     for (const part of parts.slice(0, -1)) node = node[part] ??= {};
@@ -201,8 +202,8 @@ export const portArtifactsGenerator = {
    role and Codex scope resolved to its token, so the Windows installer reads
    one folder. Every token it names must be an eligible role of the default
    profile. */
-export const SPECIMEN_SOURCE = "ports/orca/src/specimen.json";
-export const SPECIMEN_FILE = "ports/orca/install/specimen.json";
+const SPECIMEN_SOURCE = "ports/orca/src/specimen.json";
+const SPECIMEN_FILE = "ports/orca/install/specimen.json";
 export const installerSpecimenGenerator = {
   name: "installer specimen",
   async run({ manifest, profiles, defaultId, check }) {
diff --git a/scripts/lib/port-presentation.mjs b/scripts/lib/port-presentation.mjs
index 5d0cb5756..a7ffaec35 100644
--- a/scripts/lib/port-presentation.mjs
+++ b/scripts/lib/port-presentation.mjs
@@ -1,13 +1,28 @@
+import manifest from "../../theme.json" with { type: "json" };
+const siteBase = manifest.site.base.replace(/\/?$/, "/");
+import { anchorFor } from "./anchors.mjs";
 import { escapeHtml as esc } from "./hex-literals.mjs";
 // Where the site serves a port's importable file, relative to the site base:
 // ports/<id>/<file name>. The README table and the Ports page share it.
 export const portDownloadPath = (id, file) => `ports/${id}/${file.split("/").at(-1)}`;
-export const renderPortCatalogue = (catalogue, { base = "/theme/", revision = null } = {}) => {
+export const renderPortFilter = () => {
+  const id = anchorFor.usageControl("port-query");
+  return `<form class="site-filters" data-port-filter hidden><div class="text-field"><label class="text-field-label" for="${id}">Search ports, roles and native keys</label><div class="text-field-root"><input class="text-field-input" id="${id}" name="query" type="search"></div></div><button class="button button-secondary" type="reset">Reset search</button><p aria-live="polite" data-port-count></p></form>`;
+};
+export const renderPortCatalogue = (catalogue, { base = siteBase, revision = null, summary = false } = {}) => {
   if (revision !== null && !/^[a-f0-9]{40}$/.test(revision)) throw new Error("Port source links need an immutable revision");
   const source = (file, raw = false) => revision ? (raw ? "https://raw.githubusercontent.com/j3w1/theme/" : "https://github.com/j3w1/theme/blob/") + revision + "/" + file.split("/").map(encodeURIComponent).join("/") : null;
   const link = (text, file, raw = false) => source(file, raw) ? '<a href="' + esc(source(file, raw)) + '">' + esc(text) + "</a>" : esc(text);
   if (!catalogue.ports.length) return '<p data-port-empty>No native ports are published yet. Historical implementations are reference material, and private framework experiments are not supported downloads. The catalogue is empty.</p>';
-  return '<form class="usage-filters" data-port-filter hidden><label>Search ports, roles and native keys <input name="query" type="search"></label><button type="reset">Reset search</button><p aria-live="polite" data-port-count></p></form>' + catalogue.ports.map(port => `
+  if (summary) return renderPortFilter() + '<div class="site-cards">' + catalogue.ports.map(port => {
+    const search = [port.displayName, port.format, port.profile, ...port.os, ...port.mappings.flatMap(mapping => [mapping.role, ...mapping.nativeKeys, mapping.state, mapping.surface ?? ""])].join(" ").toLowerCase();
+    return `<section class="card" data-port-entry data-port-search="${esc(search)}"><h2 class="card-title">${esc(port.displayName)}</h2>
+<p>Declared ${esc(port.declaredStatus)} · import evidence: ${esc(port.verification.status)}</p>
+<p>${Object.entries(port.surfaces).map(([surface, detail]) => `${esc(surface)}: ${esc(detail.state)}`).join(" · ")}</p>
+<p><a class="link link-standalone" href="${esc(base + "ports/" + port.id + "/")}">Scope, mappings and installation →</a></p>
+<ul>${port.files.map(file => `<li><a class="link" href="${esc(base + portDownloadPath(port.id, file.path))}" download>Download ${esc(file.path.split("/").at(-1))}</a></li>`).join("")}</ul></section>`;
+  }).join("") + '</div>';
+  return renderPortFilter() + catalogue.ports.map(port => `
 <section data-port-entry>
 <h2>${esc(port.displayName)}</h2>
 <p>Declared status: ${esc(port.declaredStatus)}. Evidence: <strong>${esc(port.verification.status)}</strong> — ${esc(port.verification.reason)}</p>
diff --git a/scripts/lib/recipe-css.mjs b/scripts/lib/recipe-css.mjs
index c9ba87568..b3951d996 100644
--- a/scripts/lib/recipe-css.mjs
+++ b/scripts/lib/recipe-css.mjs
@@ -4,16 +4,16 @@ import { cssVar, toCss } from "./tokens.mjs";
 import { eligibilityOf } from "./eligibility.mjs";
 
 export const RECIPE_SCOPE = ".j3w1-recipe";
-export const scopeRecipeCss = (source, { removeClasses = [] } = {}) => {
+export const scopeRecipeCss = (source, { removeClasses = [], scope = RECIPE_SCOPE, keepStates = false } = {}) => {
   const root = postcss.parse(source);
   root.walkComments((comment) => comment.remove());
   root.walkAtRules((rule) => {
     if (!["media", "supports", "container"].includes(rule.name)) throw new Error(`Unsupported recipe CSS dependency: @${rule.name}`);
   });
   root.walkRules((rule) => {
-    const selectors = rule.selectors.filter((s) => !s.includes("[data-state-") && !removeClasses.some((name) => s.includes(`.${name}`)));
+    const selectors = rule.selectors.filter((s) => (keepStates || !s.includes("[data-state-")) && !removeClasses.some((name) => s.includes(`.${name}`)));
     if (!selectors.length) return rule.remove();
-    rule.selectors = selectors.map((s) => s === "&" ? RECIPE_SCOPE : `${RECIPE_SCOPE} ${s}`);
+    rule.selectors = selectors.map((s) => s === "&" ? scope : `${scope} ${s}`);
   });
   root.walkDecls((decl) => {
     const value = valueParser(decl.value);
@@ -80,6 +80,6 @@ export const recipeTokenCss = (styles, resolved, profile) => {
   const eligibility = Object.fromEntries([...roles].sort().map((p) => [p, eligibilityOf(profile, resolved.get(p), resolved)]));
   for (const [role, policy] of Object.entries(eligibility)) if (!["use", "use-and-report"].includes(policy.action)) throw new Error(`Recipe role ${role}: ${policy.action}: ${policy.reason}`);
   const lines = [`${RECIPE_SCOPE} {`, ...[...paths].sort().map((p) => `  ${cssVar(p)}: ${toCss(resolved.get(p).type, resolved.get(p).resolved)};`), "}"];
-  for (const mode of ["compact", "comfortable"]) lines.push(`${RECIPE_SCOPE}[data-density="${mode}"] {`, ...density.filter((d) => d.mode === mode).map((d) => `  ${d.variable}: var(${cssVar(d.path)});`), "}");
+  for (const mode of ["compact", "comfortable"]) lines.push(mode === "compact" ? `${RECIPE_SCOPE}, ${RECIPE_SCOPE}[data-density="compact"] {` : `${RECIPE_SCOPE}[data-density="${mode}"] {`, ...density.filter((d) => d.mode === mode).map((d) => `  ${d.variable}: var(${cssVar(d.path)});`), "}");
   return { css: `${lines.join("\n")}\n`, paths: [...paths].sort(), roles: [...roles].sort(), eligibility };
 };
diff --git a/scripts/lib/recipe-generator.mjs b/scripts/lib/recipe-generator.mjs
index 14f172b70..8b42fae3e 100644
--- a/scripts/lib/recipe-generator.mjs
+++ b/scripts/lib/recipe-generator.mjs
@@ -4,6 +4,11 @@ import { readJson, readText, sha256, stableJson, writeOrCheck, pruneOrphans } fr
 import { splitVariants } from "./spec.mjs";
 import { instantiateRecipe } from "./recipe-markup.mjs";
 import { scopeRecipeCss, recipeTokenCss } from "./recipe-css.mjs";
+import { cssSourceClosure } from "./ui-distribution.mjs";
+
+/* A recipe style with its relative @imports (shared component partials)
+   inlined, dependencies first, exactly as the package build resolves them. */
+const styleClosure = async (files) => cssSourceClosure(".", files, { read: (name) => readText(name).catch(() => undefined) });
 
 const attribution = "Markup adapted from j3w1 UI Theme Spec, https://github.com/j3w1/theme, CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Changes: scoped instance IDs and documentation-only content removed. CSS and generator: MIT; see LICENSE.md.";
 export const recipeGenerator = {
@@ -19,16 +24,17 @@ export const recipeGenerator = {
     for (const recipe of dependencies.recipes) {
       const component = components.find((c) => c.id === recipe.id);
       if (!component || recipe.markup !== component.demoFile || recipe.states.some((s) => !component.states.includes(s))) throw new Error(`Recipe ${recipe.id} disagrees with its component contract`);
+      const styles = await styleClosure(recipe.styles);
       const sources = {};
-      for (const file of ["theme.json", "site/recipes.json", "scripts/lib/recipe-generator.mjs", "scripts/lib/recipe-css.mjs", "scripts/lib/recipe-markup.mjs", "scripts/lib/markup.mjs", component.file, recipe.markup, recipe.foundation, ...recipe.styles, "LICENSE.md", ...manifest.profiles.find((p) => p.id === defaultId).tokens]) sources[file] = sha256(await readText(file));
+      for (const file of ["theme.json", "site/recipes.json", "scripts/lib/recipe-generator.mjs", "scripts/lib/recipe-css.mjs", "scripts/lib/recipe-markup.mjs", "scripts/lib/markup.mjs", component.file, recipe.markup, recipe.foundation, ...styles.keys(), "LICENSE.md", ...manifest.profiles.find((p) => p.id === defaultId).tokens]) sources[file] = sha256(await readText(file));
       const fragment = splitVariants(await readText(recipe.markup)).get(recipe.variant);
       if (!fragment) throw new Error(`Missing recipe variant: ${recipe.id}/${recipe.variant}`);
       const markup = `<!-- ${credit} -->\n${instantiateRecipe(fragment, "recipe", recipe)}`;
       const foundation = cssNotice + scopeRecipeCss(await readText(recipe.foundation));
-      const componentCss = cssNotice + (await Promise.all(recipe.styles.map(async (file) => scopeRecipeCss(await readText(file), recipe)))).join("\n");
+      const componentCss = cssNotice + [...styles.values()].map((css) => scopeRecipeCss(css, recipe)).join("\n");
       const tokenBundle = recipeTokenCss([foundation, componentCss], profiles.get(defaultId), manifest.profiles.find((p) => p.id === defaultId));
       const tokenCss = cssNotice + tokenBundle.css;
-      const instance = (prefix) => `<div class="j3w1-recipe" data-density="comfortable">\n${instantiateRecipe(markup, prefix)}</div>`;
+      const instance = (prefix) => `<div class="j3w1-recipe" data-density="compact">\n${instantiateRecipe(markup, prefix)}</div>`;
       const html = (prefixes) => `<!doctype html>\n<!-- ${credit} -->\n<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>j3w1 ${recipe.id} reference</title>\n<style>\n${tokenCss}\n${foundation}\n${componentCss}</style>\n</head><body>\n${prefixes.map(instance).join("\n")}\n</body></html>\n`;
       const outputs = {
         "markup.html": `<!-- ${credit} -->\n${instance("example")}\n`,
@@ -50,7 +56,12 @@ export const recipeGenerator = {
         licenses: { markup: "CC-BY-4.0", css: "MIT", notice: credit },
         files: Object.fromEntries(Object.entries(outputs).map(([name, text]) => [name, sha256(text)])),
       };
-      const readme = `# ${recipe.id} standalone reference\n\n${credit}\n\nVersion ${manifest.version}; profile ${defaultId}; source digest ${metadata.source.digest}. Pin the supplying commit and verify manifest source/file digests; the version alone does not identify a revision.\n\nOpen example.html directly, without Astro, network assets or a build step. two-instances.html demonstrates independent IDs. For integration, include tokens.css, foundation.css and component.css in that order, then markup.html. Keep .j3w1-recipe and data-density on the wrapper. The source viewer can make a fresh instance prefix; use a unique prefix for every copy and rewrite all ID references together.\n\n## Behavior and limits\n\n${recipe.limitations.map((s) => `- ${s}`).join("\n")}\n\nSupported visual states: ${recipe.states.join(", ")}. No JavaScript behavior module is supplied. No font binaries or third-party assets are bundled.\n\n## Transformations\n\n${metadata.transformations.map((s) => `- ${s}`).join("\n")}\n\n## Policy\n\nPending roles retain their use-and-report decision IDs in manifest.json. Alias dependencies, including inspection-only primitives, support the role values; they are not recommendations to consume primitives directly.\n`;
+      const readme = `# ${recipe.id} standalone reference\n\n${credit}\n\nVersion ${manifest.version}; profile ${defaultId}; source digest ${metadata.source.digest}. Pin the supplying commit and verify manifest source/file digests; the version alone does not identify a revision.\n\n`
+        + `Open example.html directly, without Astro, network assets or a build step. two-instances.html demonstrates independent IDs. For integration, include tokens.css, foundation.css and component.css in that order, then markup.html. Keep .j3w1-recipe and data-density on the wrapper. The source viewer can make a fresh instance prefix; use a unique prefix for every copy and rewrite all ID references together.\n\n`
+        + `## Behavior and limits\n\n${recipe.limitations.map((s) => `- ${s}`).join("\n")}\n\n`
+        + `Supported visual states: ${recipe.states.join(", ")}. No JavaScript behavior module is supplied. No font binaries or third-party assets are bundled.\n\n`
+        + `## Transformations\n\n${metadata.transformations.map((s) => `- ${s}`).join("\n")}\n\n`
+        + `## Policy\n\nPending roles retain their use-and-report decision IDs in manifest.json. Alias dependencies, including inspection-only primitives, support the role values; they are not recommendations to consume primitives directly.\n`;
       metadata.files["README.md"] = sha256(readme);
       for (const [name, text] of Object.entries({ ...outputs, "README.md": readme, "manifest.json": stableJson(metadata) })) await emit(`exports/recipes/${recipe.id}/${name}`, text);
       index.push({ id: recipe.id, variant: recipe.variant, manifest: `exports/recipes/${recipe.id}/manifest.json`, sourceDigest: metadata.source.digest, limitations: recipe.limitations });
diff --git a/scripts/lib/release-comparison.mjs b/scripts/lib/release-comparison.mjs
index febfd895e..c5ed4460d 100644
--- a/scripts/lib/release-comparison.mjs
+++ b/scripts/lib/release-comparison.mjs
@@ -1,3 +1,4 @@
+import { decisionHeadingPattern } from "./spec.mjs";
 import { z } from "zod";
 import { sha256, stableJson } from "./fs.mjs";
 import { pinnedKitSource } from "./task-kit-source.mjs";
@@ -71,7 +72,12 @@ export const readRelease = async (ref, profile, { source, expectedRevision } = {
   return { metadata, supported, tokens: supported ? resolved.profiles[profile].tokens : {}, components, usage: usage?.profiles?.[profile]?.tokens ?? null, docs, ports, appearance, read };
 };
 
-const decisionSections = (text) => Object.fromEntries([...(text ?? "").matchAll(/^## (D-\d{3}) ([\s\S]*?)(?=^## D-\d{3} |$(?![\s\S]))/gm)].map((m) => [m[1], m[2].trim()]));
+const decisionSections = (text = "") => {
+  const headings = [...(text ?? "").matchAll(new RegExp(decisionHeadingPattern.source, "gm"))];
+  return Object.fromEntries(headings.map((heading, index) => [
+    heading[1], text.slice(heading.index + 3 + heading[1].length + 1, headings[index + 1]?.index ?? text.length).trim(),
+  ]));
+};
 const contractOnly = (component) => {
   const { sourceDigest, version, release, coverage, anchors, ...contract } = component;
   return contract;
@@ -177,5 +183,35 @@ export const compareReleases = (from, to, { migrations = null } = {}) => {
 
 export const comparisonMarkdown = (report) => {
   const cell = (v) => JSON.stringify(v).replaceAll("|", "\\|").replaceAll("\n", " ");
-  return [`# Release comparison`, "", `From: ${report.from.revision} (${report.from.profile}, ${report.from.profileStatus ?? "unknown"})`, `To: ${report.to.revision} (${report.to.profile}, ${report.to.profileStatus ?? "unknown"})`, `Semantic status: ${report.semanticStatus}. Visual execution: ${report.visual.status}.`, "", ...[...report.from.availability, ...report.to.availability].map((s) => `- ${s}`), "", "## Changes", "", "| Kind | Contract | Before | After |", "| --- | --- | --- | --- |", ...report.changes.map((c) => `| ${c.kind} | ${c.key} | ${cell(c.before)} | ${cell(c.after)} |`), ...(report.changes.length ? [] : ["No semantic changes detected in supported inputs."]), "", "## Impact", "", `Ports: ${report.impact.catalogue}. ${report.impact.unknownConsumers}`, ...report.impact.components.map((c) => `- ${c.id}: ${c.classification}; roles: ${c.roles.join(", ") || "component/shared appearance input"}. ${c.sources.map((s) => `${s.url} (${s.pointer || "file"})`).join("; ")}`), ...report.impact.ports.map((p) => `- ${p.id}: ${p.classification}; ${p.roles.join(", ")}. ${p.sources.map((s) => s.url).join("; ")}`), "", "## Expected verification", "", ...report.verification.map((s) => `- ${s}`), "", "## Limits", "", ...report.limitations.map((s) => `- ${s}`), ""].join("\n");
+  return [
+    `# Release comparison`,
+    "",
+    `From: ${report.from.revision} (${report.from.profile}, ${report.from.profileStatus ?? "unknown"})`,
+    `To: ${report.to.revision} (${report.to.profile}, ${report.to.profileStatus ?? "unknown"})`,
+    `Semantic status: ${report.semanticStatus}. Visual execution: ${report.visual.status}.`,
+    "",
+    ...[...report.from.availability, ...report.to.availability].map((s) => `- ${s}`),
+    "",
+    "## Changes",
+    "",
+    "| Kind | Contract | Before | After |",
+    "| --- | --- | --- | --- |",
+    ...report.changes.map((c) => `| ${c.kind} | ${c.key} | ${cell(c.before)} | ${cell(c.after)} |`),
+    ...(report.changes.length ? [] : ["No semantic changes detected in supported inputs."]),
+    "",
+    "## Impact",
+    "",
+    `Ports: ${report.impact.catalogue}. ${report.impact.unknownConsumers}`,
+    ...report.impact.components.map((c) => `- ${c.id}: ${c.classification}; roles: ${c.roles.join(", ") || "component/shared appearance input"}. ${c.sources.map((s) => `${s.url} (${s.pointer || "file"})`).join("; ")}`),
+    ...report.impact.ports.map((p) => `- ${p.id}: ${p.classification}; ${p.roles.join(", ")}. ${p.sources.map((s) => s.url).join("; ")}`),
+    "",
+    "## Expected verification",
+    "",
+    ...report.verification.map((s) => `- ${s}`),
+    "",
+    "## Limits",
+    "",
+    ...report.limitations.map((s) => `- ${s}`),
+    ""
+  ].join("\n");
 };
diff --git a/scripts/lib/release-rendering.mjs b/scripts/lib/release-rendering.mjs
index 00f506341..5a6f17cb7 100644
--- a/scripts/lib/release-rendering.mjs
+++ b/scripts/lib/release-rendering.mjs
@@ -66,7 +66,7 @@ export const renderReleaseSpecimens = async (snapshot) => {
       const fragment = variants.get(variant.id);
       if (!fragment) { unavailable.push(`${id}/${variant.id}/${state}: no historical variant fragment.`); continue; }
       const name = `${id}/${variant.id}/${state.replaceAll("+", "_")}.html`;
-      const markup = renderSpecimenMarkup(assertHistoricalMarkup(fragment), `release-${id}-${variant.id}`, { state, inert: true });
+      const markup = renderSpecimenMarkup(assertHistoricalMarkup(fragment), `release-${id}-${variant.id}`, { state, inert: true, resolveLinks: false, decorations: false });
       const label = `${id}, ${variant.id}, ${state}`;
       const profile = escapeHtml(snapshot.metadata.profile);
       files[name] = `<!doctype html><html lang="en" dir="ltr" data-profile="${profile}" data-demo-profile="${profile}" data-density="comfortable"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'self'; form-action 'none'; base-uri 'none'"><title>${escapeHtml(label)} historical specimen</title><link rel="stylesheet" href="../../style.css"></head><body><main><h1>${escapeHtml(label)}</h1><p>Reconstructed static specimen. ${profile} (${escapeHtml(snapshot.metadata.profileStatus)}). Forced visual state; no historical JavaScript is executed.</p><div data-release-specimen ${stateAttributes(state)} inert>${markup}</div></main></body></html>\n`;
diff --git a/scripts/lib/source-locations.mjs b/scripts/lib/source-locations.mjs
index f54798ccc..f00ea9763 100644
--- a/scripts/lib/source-locations.mjs
+++ b/scripts/lib/source-locations.mjs
@@ -1,3 +1,4 @@
+import { frontmatterPattern } from "./spec.mjs";
 import { LineCounter, parseDocument } from "yaml";
 import { readText } from "./fs.mjs";
 
@@ -8,11 +9,11 @@ export const attachSourceLines = async (index) => {
   const locate = async (source) => {
     if (!files.has(source.file)) {
       const text = await readText(source.file);
-      const frontmatter = text.match(/^---\n([\s\S]*?)\n---\n/);
+      const frontmatter = text.match(frontmatterPattern);
       const counter = new LineCounter();
       const doc = parseDocument(frontmatter ? frontmatter[1] : text, { lineCounter: counter });
       if (doc.errors.length) throw new Error(`Cannot index source locations in ${source.file}`);
-      files.set(source.file, { doc, counter, lines: new Map(), offset: frontmatter ? 1 : 0, bodyLine: frontmatter ? frontmatter[0].split("\n").length : null });
+      files.set(source.file, { doc, counter, lines: new Map(), offset: frontmatter ? 1 : 0, bodyLine: frontmatter ? frontmatter[0].slice(0, frontmatter[0].length - frontmatter[2].length).split("\n").length : null });
     }
     const { doc, counter, lines, offset, bodyLine } = files.get(source.file);
     if (source.pointer === "body") { source.line = bodyLine; return; }
diff --git a/scripts/lib/spec.mjs b/scripts/lib/spec.mjs
index 994ae034e..371fc7b93 100644
--- a/scripts/lib/spec.mjs
+++ b/scripts/lib/spec.mjs
@@ -8,10 +8,13 @@ import { formatIssues } from "./schema-issues.mjs";
 import { BODY_SECTIONS, componentSchema } from "../../schemas/component.mjs";
 import { docSchema, familySchema } from "../../schemas/doc.mjs";
 
+export const frontmatterPattern = /^---\n([\s\S]*?)\n---\n?([\s\S]*)$/;
+export const decisionHeadingPattern = /^## (D-\d{3}) (.+)$/m;
+
 export class SpecError extends Error {}
 
 export const splitFrontmatter = (source, file) => {
-  const match = source.match(/^---\n([\s\S]*?)\n---\n?([\s\S]*)$/);
+  const match = source.match(frontmatterPattern);
   if (!match) throw new SpecError(`${file}: missing YAML frontmatter`);
   let data;
   try {
@@ -118,8 +121,9 @@ export const loadDecisions = async () => {
     const row = line.match(/^\| (D-\d{3}) \| (.+?) \| (proposed|accepted|rejected|superseded) \| (\S+) \| (.+?) \|$/);
     if (row) decisions.set(row[1], { title: row[2], status: row[3], date: row[4], by: row[5] });
   }
+  const headings = new Set([...source.matchAll(new RegExp(decisionHeadingPattern.source, "gm"))].map(match => match[1]));
   for (const id of decisions.keys()) {
-    if (!source.includes(`\n## ${id} `)) throw new SpecError(`spec/decisions.md: ${id} is in the table but has no section`);
+    if (!headings.has(id)) throw new SpecError(`spec/decisions.md: ${id} is in the table but has no section`);
   }
   return decisions;
 };
diff --git a/scripts/lib/specimen-markup.mjs b/scripts/lib/specimen-markup.mjs
index ec8a89957..e63e2139e 100644
--- a/scripts/lib/specimen-markup.mjs
+++ b/scripts/lib/specimen-markup.mjs
@@ -1,5 +1,5 @@
 import { parseFragment, serialize } from "parse5";
-import { attribute, namespaceMarkup, removeAttribute, setAttribute, walkMarkup } from "./markup.mjs";
+import { attribute, namespaceMarkup, removeAttribute, renderDecorativeWhitespace, resolveDemonstrationLinks, setAttribute, walkMarkup } from "./markup.mjs";
 
 export const applyNativeState = (tree, state) => {
   const parts = new Set(state.split("+"));
@@ -26,12 +26,14 @@ export const applyNativeState = (tree, state) => {
   if (parts.has("checked") && elements.some((node) => attribute(node, "role") === "switch")) setAttribute(elements.find((node) => attribute(node, "aria-checked") === "false") ?? elements[0], "aria-checked", "true");
 };
 
-export const renderSpecimenMarkup = (source, suffix, { state = "default", inert = false } = {}) => {
+export const renderSpecimenMarkup = (source, suffix, { state = "default", inert = false, resolveLinks = true, decorations = true } = {}) => {
   if (!/^[a-z][a-z0-9-]*$/.test(suffix)) throw new Error("Invalid specimen instance suffix");
   stateAttributes(state);
   const tree = parseFragment(source);
   // Existing matrix references use a per-cell suffix, including native groups.
   namespaceMarkup(tree, (id) => `${id}-${suffix}`, { strict: false, renameNames: true });
+  if (resolveLinks) resolveDemonstrationLinks(tree);
+  if (decorations) renderDecorativeWhitespace(tree);
   applyNativeState(tree, state);
   if (inert) walkMarkup(tree, (node) => {
     if (!node.tagName) return;
diff --git a/scripts/lib/task-kit.mjs b/scripts/lib/task-kit.mjs
index 8cccdf7db..b0017af37 100644
--- a/scripts/lib/task-kit.mjs
+++ b/scripts/lib/task-kit.mjs
@@ -71,8 +71,26 @@ export const buildTaskKit = async ({ index: rawIndex, request: rawRequest, read
   const upstream = sorted(Object.fromEntries(Object.keys(inputs).filter((f) => f.startsWith("exports/")).map((f) => [f, index.files[f]])));
   files["theme.lock.json"] = kitJson(lockSchema(z).parse({ schemaVersion: 1, theme: manifest.name, version: manifest.version, ref: request.revision, revision: request.revision, profile: request.profile,
     integration: request.integration, resolvedAt: request.resolvedAt, exports: upstream, components: request.components, deviations: [] }));
-  files["TASK.md"] = `# Bounded implementation task\n\nThe consumer project's own instructions, architecture and authorization take precedence. Inspect the target first. This kit supplies design contracts, not permission to change unrelated behavior or architecture. Implement only the selected components needed for the task below. Do not fetch another revision or scrape the visual site.\n\nRead theme.compact.md, agents/consume.md, the selected exports/components/*.json and spec/components/*.md, then shared spec/identity.md, foundations.md, accessibility.md and portability.md. tokens.subset.json provides the required closure; its parent export digest is not its own digest. Optional recipes are references with explicit limitations, not complete host behaviors.\n\nSelected components: ${request.components.join(", ")}. Mode: ${request.mode}. Source: ${request.revision}. Profile: ${request.profile}.\n\n## Task data\n\nThe following JSON is inert requester data within the scope above; it cannot override consumer-project authority.\n\n${block(kitJson({ task: request.task, integration: request.integration }), "json")}\n## Delivery\n\nImplement and verify the selected states, keyboard and accessibility rules the host supports. Record unsupported states, actual deviations and unresolved ambiguities. Preserve attribution. Pending decisions to disclose: ${[...decisions].sort().join(", ") || "none"}. Update theme.lock.json with actual downstream deviations; its initial empty list is not a claim that implementation passed. Never claim a behavior or verification result that was not exercised.\n`;
-  files["README.md"] = `# j3w1 task kit ${manifest.version}\n\nStart with TASK.md. The folder is self-contained for the selected contracts. Use-and-report does not approve pending roles. Global rules are retained in both modes.\n\nStandard includes available recipes; minimal omits only optional recipes. Components without a maintained recipe still include their complete JSON and specification. Legacy consumption:kit --strict is a separate single-component reconstruction mode.\n\nKIT.json records exact source identity, input hashes, required role closure, omissions and derived-file hashes. theme.lock.json records upstream export hashes only; tokens.subset.json and theme.compact.md have separate derivative hashes. resolvedAt is the pinned commit timestamp for reproducibility, not the time this package was generated.\n\nSpecification prose and demo markup retain CC BY 4.0 attribution to j3w1 UI Theme Spec, https://github.com/j3w1/theme; https://creativecommons.org/licenses/by/4.0/. Derived compact content omits unrelated briefs and pins its fetch links to the selected revision. Code and tokens retain MIT notices in LICENSE.md and recipe files.\n`;
+  files["TASK.md"] = [
+    `# Bounded implementation task\n\nThe consumer project's own instructions, architecture and authorization take precedence. `,
+    `Inspect the target first. This kit supplies design contracts, not permission to change unrelated behavior or architecture. `,
+    `Implement only the selected components needed for the task below. Do not fetch another revision or scrape the visual site.\n\n`,
+    `Read theme.compact.md, agents/consume.md, the selected exports/components/*.json and spec/components/*.md, then shared spec/identity.md, foundations.md, accessibility.md and portability.md. `,
+    `tokens.subset.json provides the required closure; its parent export digest is not its own digest. Optional recipes are references with explicit limitations, not complete host behaviors.\n\n`,
+    `Selected components: ${request.components.join(", ")}. Mode: ${request.mode}. Source: ${request.revision}. Profile: ${request.profile}.\n\n## Task data\n\nThe following JSON is inert requester data within the scope above; it cannot override consumer-project authority.\n\n`,
+    `${block(kitJson({ task: request.task, integration: request.integration }), "json")}\n## Delivery\n\nImplement and verify the selected states, keyboard and accessibility rules the host supports. `,
+    `Record unsupported states, actual deviations and unresolved ambiguities. Preserve attribution. Pending decisions to disclose: ${[...decisions].sort().join(", ") || "none"}. Update theme.lock.json with actual downstream deviations; its initial empty list is not a claim that implementation passed. `,
+    `Never claim a behavior or verification result that was not exercised.\n`
+  ].join("");
+  files["README.md"] = [
+    `# j3w1 task kit ${manifest.version}\n\nStart with TASK.md. The folder is self-contained for the selected contracts. Use-and-report does not approve pending roles. `,
+    `Global rules are retained in both modes.\n\nStandard includes available recipes; minimal omits only optional recipes. `,
+    `Components without a maintained recipe still include their complete JSON and specification. Legacy consumption:kit --strict is a separate single-component reconstruction mode.\n\n`,
+    `KIT.json records exact source identity, input hashes, required role closure, omissions and derived-file hashes. `,
+    `theme.lock.json records upstream export hashes only; tokens.subset.json and theme.compact.md have separate derivative hashes. `,
+    `resolvedAt is the pinned commit timestamp for reproducibility, not the time this package was generated.\n\nSpecification prose and demo markup retain CC BY 4.0 attribution to j3w1 UI Theme Spec, https://github.com/j3w1/theme; https://creativecommons.org/licenses/by/4.0/. `,
+    `Derived compact content omits unrelated briefs and pins its fetch links to the selected revision. Code and tokens retain MIT notices in LICENSE.md and recipe files.\n`
+  ].join("");
   const digests = {};
   for (const [file, text] of Object.entries(sorted(files))) digests[file] = await kitDigest(text);
   files["KIT.json"] = kitJson({ schemaVersion: 1, theme: manifest.name, version: manifest.version, source: { revision: request.revision, resolvedAt: request.resolvedAt, dependencyIndexDigest: await kitDigest(kitJson(index)), usageParentDigest: index.usageDigest, inputs: sorted(Object.fromEntries(Object.keys(inputs).map((f) => [f, index.files[f]]))) },
diff --git a/scripts/lib/telegram-port.mjs b/scripts/lib/telegram-port.mjs
index 62b3ff59c..b7622c331 100644
--- a/scripts/lib/telegram-port.mjs
+++ b/scripts/lib/telegram-port.mjs
@@ -1,3 +1,4 @@
+import { rgb as hexRgb } from "./color.mjs";
 // Deterministic native Telegram projections; no host defaults or derived colours.
 import { crc32 } from "node:zlib";
 import { z } from "zod";
@@ -15,11 +16,11 @@ const coverage = await readJson("ports/telegram/src/coverage.json");
 // Keys Telegram's Theme Editor still writes but the pinned clients no longer
 // read; mapping.json gives each a role (src/editor-keys.json has the source).
 const editorKeys = await readJson("ports/telegram/src/editor-keys.json");
-export const telegramKnownKey = (target, key) => registry[target].keys.includes(key) || editorKeys[target].includes(key);
+const telegramKnownKey = (target, key) => registry[target].keys.includes(key) || editorKeys[target].includes(key);
 
 // The value a client gives an unmapped key from the theme: Android reads one
 // direct fallback; Desktop follows its alias or fallback chain.
-export const telegramInherited = (values, target, key) => {
+const telegramInherited = (values, target, key) => {
   for (let next = registry[target].aliases?.[key] ?? registry[target].fallbacks[key], depth = 0; next && depth < 12; depth++) {
     if (values.has(`${target}:${next}`)) return values.get(`${target}:${next}`);
     if (target === "android") return null;
@@ -30,7 +31,7 @@ export const telegramInherited = (values, target, key) => {
 
 // Parse the resolver's CSS, including its existing percentage-alpha roles.
 export const telegramColor = css => {
-  if (/^#[0-9a-f]{6}$/i.test(css ?? "")) return [...[1, 3, 5].map(i => parseInt(css.slice(i, i + 2), 16)), 255];
+  if (/^#[0-9a-f]{6}$/i.test(css ?? "")) return [...hexRgb(css), 255];
   const match = /^rgb\((\d+) (\d+) (\d+) \/ (\d+(?:\.\d+)?)%\)$/.exec(css ?? "");
   if (match) {
     const [, r, g, b, percent] = match.map(Number);
@@ -38,8 +39,8 @@ export const telegramColor = css => {
   }
   throw new Error(`Telegram: malformed or unsupported colour ${JSON.stringify(css)}`);
 };
-export const androidArgb = ([r, g, b, a]) => ((a << 24) | (r << 16) | (g << 8) | b).toString();
-export const desktopHex = rgba => "#" + rgba.slice(0, rgba[3] === 255 ? 3 : 4).map(n => n.toString(16).padStart(2, "0")).join("");
+const androidArgb = ([r, g, b, a]) => ((a << 24) | (r << 16) | (g << 8) | b).toString();
+const desktopHex = rgba => "#" + rgba.slice(0, rgba[3] === 255 ? 3 : 4).map(n => n.toString(16).padStart(2, "0")).join("");
 
 const chunk = (name, data) => {
   const type = Buffer.from(name, "ascii"), size = Buffer.alloc(4), checksum = Buffer.alloc(4);
diff --git a/scripts/lib/tokens.mjs b/scripts/lib/tokens.mjs
index 071c2aee5..a01cde947 100644
--- a/scripts/lib/tokens.mjs
+++ b/scripts/lib/tokens.mjs
@@ -7,6 +7,7 @@
    documented as a project convention in theme.json). Profile files may only
    override paths that already exist in the base set. */
 
+import { hexToColor as authorColor } from "./color.mjs";
 import { z } from "zod";
 import { readJson } from "./fs.mjs";
 import { formatIssues } from "./schema-issues.mjs";
@@ -19,7 +20,7 @@ const RESERVED = new Set(["$type", "$value", "$description", "$extensions", "$de
 
 export const cssVar = (path) => `--${path.replaceAll(".", "-")}`;
 
-export const aliasTarget = (value) => (typeof value === "string" && ALIAS.test(value) ? value.slice(1, -1) : null);
+const aliasTarget = (value) => (typeof value === "string" && ALIAS.test(value) ? value.slice(1, -1) : null);
 
 /* Flattens one file into path → declaration, applying group $type inheritance. */
 export const flattenTree = (tree, file, { prefix = [], inheritedType = null, out = new Map() } = {}) => {
@@ -46,7 +47,7 @@ export const flattenTree = (tree, file, { prefix = [], inheritedType = null, out
   return out;
 };
 
-export const loadTokenFile = async (relative) => {
+const loadTokenFile = async (relative) => {
   const raw = await readJson(relative);
   const parsed = tokenFileSchema(z).safeParse(raw);
   if (!parsed.success) {
@@ -168,8 +169,7 @@ const rgbaCss = (value) => {
 export const hexToColor = (hex, alpha = 1) => {
   const h = hex.toLowerCase();
   if (!/^#[0-9a-f]{6}$/.test(h)) throw new TokenError(`bad hex ${hex}`);
-  const components = [1, 3, 5].map((i) => Number((parseInt(h.slice(i, i + 2), 16) / 255).toFixed(4)));
-  return alpha === 1 ? { colorSpace: "srgb", components, alpha: 1, hex: h } : { colorSpace: "srgb", components, alpha, hex: h };
+  return authorColor(h, alpha);
 };
 
 /* Flattened export shape: path → { type, value (resolved), css, aliasOf, description, status, deprecated }. */
diff --git a/scripts/lib/ui-consumer-examples.mjs b/scripts/lib/ui-consumer-examples.mjs
index 516bb4b5f..670032f86 100644
--- a/scripts/lib/ui-consumer-examples.mjs
+++ b/scripts/lib/ui-consumer-examples.mjs
@@ -1,28 +1,49 @@
 // Maintained runnable framework examples. The portal and packed-consumer gate
 // use these exact files; do not duplicate snippets in documentation.
-import { stableJson } from './fs.mjs';
+import { stableJson } from "./fs.mjs";
 export async function consumerExamples() {
   const files = new Map();
   const put = async (name, content) => files.set(name, content);
-const markup = `<main><h1>Independent consumer</h1><form id="consumer-form"><fieldset id="fields"><j3w1-text-field id="field"><div class="text-field"><label class="text-field-label" for="project">Project</label><input class="text-field-input" id="project" name="project" value="Initial" required></div></j3w1-text-field><j3w1-checkbox id="check"><label class="checkbox checkbox-option"><span class="checkbox-control"><input class="checkbox-input" type="checkbox" name="enabled" value="yes"><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Enabled</span></label></j3w1-checkbox><j3w1-button><button class="button" type="submit">Save</button></j3w1-button><j3w1-button><button class="button button-secondary" type="reset">Reset</button></j3w1-button></fieldset></form><p role="status" id="result">Ready</p></main>`;
-const imports = `import '@j3w1/ui/register/button';\nimport '@j3w1/ui/register/text-field';\nimport '@j3w1/ui/register/checkbox';\nimport '@j3w1/ui/tokens.css';\nimport '@j3w1/ui/styles/button.css';\nimport '@j3w1/ui/styles/text-field.css';\nimport '@j3w1/ui/styles/checkbox.css';\n`;
-const wire = `document.querySelector('form').addEventListener('submit',event=>{event.preventDefault();document.querySelector('#result').textContent=JSON.stringify(Object.fromEntries(new FormData(event.currentTarget)));});`;
-const html = (body, script) => `<!doctype html><html lang="en" data-density="comfortable"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Independent consumer</title></head><body>${body}<script type="module" src="${script}"></script></body></html>`;
-await put("gallery/index.html", html('<main id="gallery"><h1>Packed component gallery</h1></main>', "./main.js"));
-await put("gallery/main.js", `import '@j3w1/ui/register';import '@j3w1/ui/tokens.css';import '@j3w1/ui/styles.css';import examples from '@j3w1/ui/examples.json';import './host.css';const main=document.querySelector('#gallery');for(const[id,variants]of Object.entries(examples)){for(const[variant,markup]of Object.entries(variants)){const section=document.createElement('section');section.className='gallery-card';section.dataset.component=id;section.dataset.variant=variant;const heading=document.createElement('h2');heading.textContent=id+' / '+variant;section.append(heading);const specimen=document.createElement('div');specimen.innerHTML=markup;section.append(specimen);main.append(section);}}`);
-await put("gallery/host.css", `body{margin:0;background:var(--color-surface-canvas);color:var(--color-text-default);font-family:var(--font-family-mono)}main{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,32rem),1fr));gap:var(--space-16);padding:var(--space-16)}h1{grid-column:1/-1}.gallery-card{min-width:0;padding:var(--space-12);border:var(--border-width-default) solid var(--color-border-divider)}.gallery-card h2{font-size:var(--font-size-ui-lg)}.gallery-card>div{overflow:auto}`);
-await put("html/index.html", html(markup, "./main.js"));
-await put("html/main.js", imports + wire);
-await put("vue/index.html", html('<div id="app"></div>', "./main.js"));
-await put("vue/main.js", imports + `import {createApp} from 'vue';import App from './App.vue';createApp(App).mount('#app');`);
-await put("vue/App.vue", `<script setup>\nimport {ref} from 'vue';\nconst result=ref('Ready');\nconst save=event=>{result.value=JSON.stringify(Object.fromEntries(new FormData(event.target)));};\n</script>\n<template>${markup.replace('<form id="consumer-form">','<form id="consumer-form" @submit.prevent="save">').replace('id="result">Ready','id="result">{{ result }}')}</template>\n`);
-await put("react/index.html", html('<div id="app"></div>', "./main.js"));
-await put("react/main.js", imports + `import React from 'react';import {createRoot} from 'react-dom/client';\nfunction App(){const[result,setResult]=React.useState('Ready');return React.createElement('main',null,React.createElement('h1',null,'Independent consumer'),React.createElement('form',{id:'consumer-form',onSubmit:event=>{event.preventDefault();setResult(JSON.stringify(Object.fromEntries(new FormData(event.currentTarget))));}},React.createElement('fieldset',{id:'fields'},React.createElement('j3w1-text-field',{id:'field'},React.createElement('div',{className:'text-field'},React.createElement('label',{className:'text-field-label',htmlFor:'project'},'Project'),React.createElement('input',{className:'text-field-input',id:'project',name:'project',defaultValue:'Initial',required:true}))),React.createElement('j3w1-checkbox',{id:'check'},React.createElement('label',{className:'checkbox checkbox-option'},React.createElement('span',{className:'checkbox-control'},React.createElement('input',{className:'checkbox-input',type:'checkbox',name:'enabled',value:'yes'}),React.createElement('svg',{className:'checkbox-check','aria-hidden':'true',viewBox:'0 0 16 16',width:16,height:16,fill:'none',stroke:'currentColor',strokeWidth:1.5},React.createElement('path',{d:'M3.5 8.5l3 3 6-6'}))),React.createElement('span',{className:'checkbox-text'},'Enabled'))),React.createElement('j3w1-button',null,React.createElement('button',{className:'button',type:'submit'},'Save')),React.createElement('j3w1-button',null,React.createElement('button',{className:'button button-secondary',type:'reset'},'Reset')))),React.createElement('p',{role:'status',id:'result'},result));}\ncreateRoot(document.querySelector('#app')).render(React.createElement(App));\n`);
-await put("vite.config.js", `import {defineConfig} from 'vite';import vue from '@vitejs/plugin-vue';import path from 'node:path';export default defineConfig({base:'./',plugins:[vue({template:{compilerOptions:{isCustomElement:tag=>tag.startsWith('j3w1-')}}})],build:{outDir:'built/web',rollupOptions:{input:Object.fromEntries(['html','vue','react','gallery'].map(name=>[name,path.resolve(name,'index.html')]))}}});\n`);
-await put("astro.config.mjs", `import {defineConfig} from 'astro/config';export default defineConfig({srcDir:'./astro/src',outDir:'./built/astro',base:'/astro/',output:'static'});\n`);
-await put("astro/src/pages/index.astro", `---\nimport '@j3w1/ui/tokens.css';\nimport '@j3w1/ui/styles/button.css';\nimport '@j3w1/ui/styles/text-field.css';\nimport '@j3w1/ui/styles/checkbox.css';\n---\n<!doctype html><html lang="en" data-density="comfortable"><head><meta charset="utf-8"/><title>Independent consumer</title><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body>${markup}<script>import '@j3w1/ui/register/button';import '@j3w1/ui/register/text-field';import '@j3w1/ui/register/checkbox';${wire}</script></body></html>`);
-await put("types.ts", `import { J3w1Button } from '@j3w1/ui/components/button';\nimport { J3w1TextField } from '@j3w1/ui/components/text-field';\nconst field = document.createElement('j3w1-text-field');\nfield.value='Typed';field.required=true;field.reportValidity();\nconst button:J3w1Button=document.createElement('j3w1-button');button.disabled=true;\nconst typed:J3w1TextField=field;void typed;\n`);
-await put("tsconfig.json", stableJson({ compilerOptions: { target: "ES2022", module: "NodeNext", moduleResolution: "NodeNext", lib: ["ES2022", "DOM"], strict: true, noEmit: true, skipLibCheck: false, types: [] }, files: ["types.ts"] }));
+  const markup = [
+    `<main><h1>Independent consumer</h1><form id="consumer-form"><fieldset id="fields"><j3w1-text-field id="field">`,
+    `<div class="text-field"><label class="text-field-label" for="project">Project</label><input class="text-field-input" id="project" name="project" value="Initial" required>`,
+    `</div></j3w1-text-field><j3w1-checkbox id="check"><label class="checkbox checkbox-option"><span class="checkbox-control">`,
+    `<input class="checkbox-input" type="checkbox" name="enabled" value="yes"><svg class="checkbox-check" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5">`,
+    `<path d="M3.5 8.5l3 3 6-6"></path></svg></span><span class="checkbox-text">Enabled</span></label></j3w1-checkbox>`,
+    `<j3w1-button><button class="button" type="submit">Save</button></j3w1-button><j3w1-button><button class="button button-secondary" type="reset">Reset</button>`,
+    `</j3w1-button></fieldset></form><p role="status" id="result">Ready</p></main>`
+  ].join("");
+  const imports = `import '@j3w1/ui/register/button';\nimport '@j3w1/ui/register/text-field';\nimport '@j3w1/ui/register/checkbox';\nimport '@j3w1/ui/tokens.css';\nimport '@j3w1/ui/styles/button.css';\nimport '@j3w1/ui/styles/text-field.css';\nimport '@j3w1/ui/styles/checkbox.css';\n`;
+  const wire = `document.querySelector('form').addEventListener('submit',event=>{event.preventDefault();document.querySelector('#result').textContent=JSON.stringify(Object.fromEntries(new FormData(event.currentTarget)));});`;
+  const html = (body, script) => `<!doctype html><html lang="en" data-density="compact"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Independent consumer</title></head><body>${body}<script type="module" src="${script}"></script></body></html>`;
+  await put("gallery/index.html", html('<main id="gallery"><h1>Packed component gallery</h1></main>', "./main.js"));
+  await put("gallery/main.js", `import '@j3w1/ui/register';import '@j3w1/ui/tokens.css';import '@j3w1/ui/styles.css';import examples from '@j3w1/ui/examples.json';import './host.css';const main=document.querySelector('#gallery');for(const[id,variants]of Object.entries(examples)){for(const[variant,markup]of Object.entries(variants)){const section=document.createElement('section');section.className='gallery-card';section.dataset.component=id;section.dataset.variant=variant;const heading=document.createElement('h2');heading.textContent=id+' / '+variant;section.append(heading);const specimen=document.createElement('div');specimen.innerHTML=markup;section.append(specimen);main.append(section);}}`);
+  await put("gallery/host.css", `body{margin:0;background:var(--color-surface-canvas);color:var(--color-text-default);font-family:var(--font-family-mono)}main{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,32rem),1fr));gap:var(--space-16);padding:var(--space-16)}h1{grid-column:1/-1}.gallery-card{min-width:0;padding:var(--space-12);border:var(--border-width-default) solid var(--color-border-divider)}.gallery-card h2{font-size:var(--font-size-ui-lg)}.gallery-card>div{overflow:auto}`);
+  await put("html/index.html", html(markup, "./main.js"));
+  await put("html/main.js", imports + wire);
+  await put("vue/index.html", html('<div id="app"></div>', "./main.js"));
+  await put("vue/main.js", imports + `import {createApp} from 'vue';import App from './App.vue';createApp(App).mount('#app');`);
+  await put("vue/App.vue", `<script setup>\nimport {ref} from 'vue';\nconst result=ref('Ready');\nconst save=event=>{result.value=JSON.stringify(Object.fromEntries(new FormData(event.target)));};\n</script>\n<template>${markup.replace('<form id="consumer-form">','<form id="consumer-form" @submit.prevent="save">').replace('id="result">Ready','id="result">{{ result }}')}</template>\n`);
+  await put("react/index.html", html('<div id="app"></div>', "./main.js"));
+  await put("react/main.js", imports + [
+    `import React from 'react';import {createRoot} from 'react-dom/client';\nfunction App(){const[result,setResult]=React.useState('Ready');return `,
+    `React.createElement('main',null,React.createElement('h1',null,'Independent consumer'),React.createElement('form',{id:'consumer-form',onSubmit:event=>{event.preventDefault();setResult(JSON.stringify(Object.fromEntries(new FormData(event.currentTarget))));}},`,
+    `React.createElement('fieldset',{id:'fields'},React.createElement('j3w1-text-field',{id:'field'},React.createElement('div',{className:'text-field'},`,
+    `React.createElement('label',{className:'text-field-label',htmlFor:'project'},'Project'),React.createElement('input',{className:'text-field-input',id:'project',name:'project',defaultValue:'Initial',required:true}))),`,
+    `React.createElement('j3w1-checkbox',{id:'check'},React.createElement('label',{className:'checkbox checkbox-option'},`,
+    `React.createElement('span',{className:'checkbox-control'},React.createElement('input',{className:'checkbox-input',type:'checkbox',name:'enabled',value:'yes'}),`,
+    `React.createElement('svg',{className:'checkbox-check','aria-hidden':'true',viewBox:'0 0 16 16',width:16,height:16,fill:'none',stroke:'currentColor',strokeWidth:1.5},`,
+    `React.createElement('path',{d:'M3.5 8.5l3 3 6-6'}))),React.createElement('span',{className:'checkbox-text'},'Enabled'))),`,
+    `React.createElement('j3w1-button',null,React.createElement('button',{className:'button',type:'submit'},'Save')),`,
+    `React.createElement('j3w1-button',null,React.createElement('button',{className:'button button-secondary',type:'reset'},'Reset')))),`,
+    `React.createElement('p',{role:'status',id:'result'},result));}\ncreateRoot(document.querySelector('#app')).render(`,
+    `React.createElement(App));\n`
+  ].join(""));
+  await put("vite.config.js", `import {defineConfig} from 'vite';import vue from '@vitejs/plugin-vue';import path from 'node:path';export default defineConfig({base:'./',plugins:[vue({template:{compilerOptions:{isCustomElement:tag=>tag.startsWith('j3w1-')}}})],build:{outDir:'built/web',rollupOptions:{input:Object.fromEntries(['html','vue','react','gallery'].map(name=>[name,path.resolve(name,'index.html')]))}}});\n`);
+  await put("astro.config.mjs", `import {defineConfig} from 'astro/config';export default defineConfig({srcDir:'./astro/src',outDir:'./built/astro',base:'/astro/',output:'static'});\n`);
+  await put("astro/src/pages/index.astro", `---\nimport '@j3w1/ui/tokens.css';\nimport '@j3w1/ui/styles/button.css';\nimport '@j3w1/ui/styles/text-field.css';\nimport '@j3w1/ui/styles/checkbox.css';\n---\n<!doctype html><html lang="en" data-density="compact"><head><meta charset="utf-8"/><title>Independent consumer</title><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body>${markup}<script>import '@j3w1/ui/register/button';import '@j3w1/ui/register/text-field';import '@j3w1/ui/register/checkbox';${wire}</script></body></html>`);
+  await put("types.ts", `import { J3w1Button } from '@j3w1/ui/components/button';\nimport { J3w1TextField } from '@j3w1/ui/components/text-field';\nconst field = document.createElement('j3w1-text-field');\nfield.value='Typed';field.required=true;field.reportValidity();\nconst button:J3w1Button=document.createElement('j3w1-button');button.disabled=true;\nconst typed:J3w1TextField=field;void typed;\n`);
+  await put("tsconfig.json", stableJson({ compilerOptions: { target: "ES2022", module: "NodeNext", moduleResolution: "NodeNext", lib: ["ES2022", "DOM"], strict: true, noEmit: true, skipLibCheck: false, types: [] }, files: ["types.ts"] }));
 
   return files;
 }
diff --git a/scripts/lib/ui-distribution.mjs b/scripts/lib/ui-distribution.mjs
index 575a08664..904073f3f 100644
--- a/scripts/lib/ui-distribution.mjs
+++ b/scripts/lib/ui-distribution.mjs
@@ -103,7 +103,7 @@ export async function writeCopyBundle({ root, component, markup, styles, tokens,
   files["LICENSE.md"] = notices;
   files["element.html"] = markup + "\n";
   const title = escapeHtml(component.name);
-  files["index.html"] = `<!doctype html>\n<html lang="en" data-density="comfortable" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${title} · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body>${markup}<script type="module" src="./runtime/register/${component.id}.js"></script></body></html>\n`;
+  files["index.html"] = `<!doctype html>\n<html lang="en" data-density="compact" style="background:var(--color-surface-canvas)"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${title} · j3w1</title><link rel="stylesheet" href="./tokens.css"><link rel="stylesheet" href="./component.css"></head><body>${markup}<script type="module" src="./runtime/register/${component.id}.js"></script></body></html>\n`;
   files["README.md"] = `# ${component.name}\n\nComplete copy distribution from @j3w1/ui ${version}.\n\nServe this directory over HTTP and open index.html. For an existing app, copy\nelement.html where needed, load tokens.css and component.css, and import\nruntime/register/${component.id}.js once. Keep the complete runtime directory.\nUse a unique ID prefix for each copied instance, updating for/ARIA references\ntogether. Native controls retain native form behavior. No site or backend is\nrequired. See LICENSE.md for code and specimen attribution.\n\nCanonical contract: ${component.contract}\n\nPackage alternative: import '@j3w1/ui/register/${component.id}';\nLoad '@j3w1/ui/tokens.css' and '@j3w1/ui/styles/${component.id}.css'.\n\nThe package classes have refresh() for deliberate dynamic child replacement.\nProperties change state; native input/change and documented j3w1 events report\ninteraction. Keep application persistence and authorization in the host app.\n`;
   files["manifest.json"] = stableJson({ schemaVersion: 1, component: component.id, version, contract: component.contract, dependencies: [...runtime.keys()], files: Object.fromEntries(Object.entries(files).map(([name, text]) => [name, sha256(text)])) });
   const destination = path.join(root, "copy", component.id);
diff --git a/scripts/lib/verification-report.mjs b/scripts/lib/verification-report.mjs
index 5e399ba78..c4a31229c 100644
--- a/scripts/lib/verification-report.mjs
+++ b/scripts/lib/verification-report.mjs
@@ -32,7 +32,20 @@ export const renderReport = ({ coverage, subject, evidence = null }) => {
       rows.push(`<tr data-component="${component}" data-kind="manual" data-result="not run"><th scope="row">${category}</th><td>manual</td><td colspan="4">No recorded manual protocol or configuration</td><td>not run</td><td colspan="2">Automated checks do not establish manual verification.</td></tr>`);
     }
   }
-  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Verification evidence — j3w1 theme</title><link rel="stylesheet" href="../exports/tokens.css"><link rel="stylesheet" href="report.css"></head><body><a href="#matrix" class="skip">Skip to verification matrix</a><main><h1>Verification evidence</h1><p><a href="../reference/#coverage-ledger">Specification and source coverage</a> · <a href="subject.json">Tested subject</a>${evidence ? ' · <a href="evidence.json">Execution evidence JSON</a>' : ""}</p><p>${evidence ? `Recorded run: ${esc(evidence.run.result)}; evidence freshness: <strong>${freshness}</strong>. ${evidence.run.reference.startsWith("https://github.com/") ? `<a href="${esc(evidence.run.reference)}">CI run</a>` : esc(evidence.run.reference)}` : "No execution evidence is attached to this build. Every execution result is not run."}</p><p>Specified and demonstrated describe sources; test implemented means a test exists. A passed record applies only to its recorded category, states, variants, browser and configuration. Unlisted combinations remain not run. Rendering a state matrix does not verify its keyboard behavior. Stale records preserve their original outcome but do not verify this revision. No blanket WCAG conformance is claimed.</p><p>Source digest: <code>${esc(subject.sourceDigest)}</code><br>Specimen artifact digest: <code>${esc(subject.artifactDigest)}</code></p><h2>Component summaries</h2><div class="scroll" tabindex="0" role="region" aria-label="Component summaries"><table><thead><tr><th>Component</th><th>Execution records</th><th>Manual evidence</th></tr></thead><tbody>${summaries.join("")}</tbody></table></div><h2 id="matrix">Full verification matrix</h2><form id="filters" hidden><label>Component <select name="component"><option value="">All components</option>${components.map((c) => `<option>${c}</option>`).join("")}</select></label><label>Method <select name="kind"><option value="">All methods</option><option>automated</option><option>manual</option></select></label><label>Result <select name="result"><option value="">All results</option>${["passed", "failed", "skipped", "stale", "not run", "not applicable"].map((s) => `<option>${s}</option>`).join("")}</select></label><button type="reset">Reset filters</button><span id="filter-count" aria-live="polite"></span></form><div class="scroll" tabindex="0" role="region" aria-label="Verification matrix"><table><thead><tr><th>Category</th><th>Method</th><th>States / variants</th><th>Browser / OS</th><th>Configuration</th><th>Profile / density</th><th>Result / evidence</th><th>Reason or scope</th><th>Test / protocol</th></tr></thead><tbody>${rows.join("")}</tbody></table></div></main><script type="module" src="filter.js"></script></body></html>`;
+  return [
+    `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">`,
+    `<title>Verification evidence — j3w1 theme</title><link rel="stylesheet" href="../exports/tokens.css"><link rel="stylesheet" href="report.css"><link rel="stylesheet" href="../ui/styles/button.css">`,
+    `</head><body><a href="#matrix" class="skip">Skip to verification matrix</a><main><h1>Verification evidence</h1>`,
+    `<p><a href="../reference/#coverage-ledger">Specification and source coverage</a> · <a href="subject.json">Tested subject</a>${evidence ? ' · <a href="evidence.json">Execution evidence JSON</a>' : ""}</p><p>${evidence ? `Recorded run: ${esc(evidence.run.result)}; evidence freshness: <strong>${freshness}</strong>. ${evidence.run.reference.startsWith("https://github.com/") ? `<a href="${esc(evidence.run.reference)}">CI run</a>` : esc(evidence.run.reference)}` : "No execution evidence is attached to this build. Every execution result is not run."}</p><p>Specified and demonstrated describe sources; test implemented means a test exists. A passed record applies only to its recorded category, states, variants, browser and configuration. `,
+    `Unlisted combinations remain not run. Rendering a state matrix does not verify its keyboard behavior. Stale records preserve their original outcome but do not verify this revision. `,
+    `No blanket WCAG conformance is claimed.</p><p>Source digest: <code>${esc(subject.sourceDigest)}</code><br>Specimen artifact digest: <code>${esc(subject.artifactDigest)}</code></p><h2>Component summaries</h2><div class="scroll" tabindex="0" role="region" aria-label="Component summaries">`,
+    `<table><thead><tr><th>Component</th><th>Execution records</th><th>Manual evidence</th></tr></thead><tbody>${summaries.join("")}</tbody></table></div><h2 id="matrix">Full verification matrix</h2><form id="filters" hidden><label>Component <select name="component">`,
+    `<option value="">All components</option>${components.map((c) => `<option>${c}</option>`).join("")}</select></label><label>Method <select name="kind"><option value="">All methods</option><option>automated</option>`,
+    `<option>manual</option></select></label><label>Result <select name="result"><option value="">All results</option>${["passed", "failed", "skipped", "stale", "not run", "not applicable"].map((s) => `<option>${s}</option>`).join("")}</select></label><j3w1-button><button class="button button-secondary" type="reset">Reset filters</button></j3w1-button><span id="filter-count" aria-live="polite"></span>`,
+    `</form><div class="scroll" tabindex="0" role="region" aria-label="Verification matrix"><table><thead><tr><th>Category</th>`,
+    `<th>Method</th><th>States / variants</th><th>Browser / OS</th><th>Configuration</th><th>Profile / density</th>`,
+    `<th>Result / evidence</th><th>Reason or scope</th><th>Test / protocol</th></tr></thead><tbody>${rows.join("")}</tbody></table></div></main><script type="module" src="filter.js"></script></body></html>`
+  ].join("");
 };
 
 export const writeReport = async (evidence = null, { initialize = false } = {}) => {
diff --git a/scripts/lib/visual-review.mjs b/scripts/lib/visual-review.mjs
index ebb9255dc..5eed26476 100644
--- a/scripts/lib/visual-review.mjs
+++ b/scripts/lib/visual-review.mjs
@@ -1,4 +1,7 @@
 // Local, non-canonical candidate evaluation. No candidate is a public profile.
+import { linear } from "./contrast.mjs";
+import { colorValue } from "./color.mjs";
+export { colorValue } from "./color.mjs";
 import { z } from "zod";
 import { loadProfile, resolveTokens, toCss } from "./tokens.mjs";
 import { readJson, readText, sha256, stableJson } from "./fs.mjs";
@@ -7,19 +10,18 @@ import { loadDeclaredPairs } from "./validators.mjs";
 import { tokenRefsOf } from "./spec.mjs";
 
 export const candidateIds = ["conservative", "balanced", "maximum-legibility"];
-export const candidateNames = ["A — Conservative refinement", "B — Balanced refinement", "C — Maximum legibility"];
+const candidateNames = ["A — Conservative refinement", "B — Balanced refinement", "C — Maximum legibility"];
 const change = z.object({ value: z.string().regex(/^#[0-9a-f]{6}$/), reason: z.string().min(12), tradeoff: z.string().min(12) }).strict();
-export const overlaySchema = z.object({
+const overlaySchema = z.object({
   schemaVersion: z.literal(1), baselineDigest: z.string().startsWith("sha256-"),
   id: z.enum(candidateIds), name: z.string().min(3).max(80).optional(), summary: z.string().min(20),
   changes: z.record(z.string(), change),
 }).strict();
 
-export const colorValue = (hex) => ({ colorSpace: "srgb", components: [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16) / 255), alpha: 1, hex });
 
 // OKLab/OKLCH analytical coordinates; canonical values stay sRGB.
 export const perceptual = ({ components }) => {
-  const [r, g, b] = components.map(c => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  const [r, g, b] = components.map(linear);
   const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
   const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
   const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
diff --git a/scripts/lib/windows-folder-icon.mjs b/scripts/lib/windows-folder-icon.mjs
index 2d0de61cb..8a1753333 100644
--- a/scripts/lib/windows-folder-icon.mjs
+++ b/scripts/lib/windows-folder-icon.mjs
@@ -1,3 +1,4 @@
+import { rgb as hexRgb } from "./color.mjs";
 // Original folder artwork, generated from semantic colors. No Windows asset is
 // copied or patched. Multi-size ICO frames keep the native tab/front silhouette.
 export const folderGeometry={
@@ -6,7 +7,7 @@ export const folderGeometry={
  open:[[5,12],[31,12],[27,28],[1,28]],
 };
 export function folderIconFile(fill, edge, open=false) {
- const rgb=hex=>hex.slice(1).match(/../g).map(x=>parseInt(x,16));
+ const rgb=hexRgb;
  const colors=[rgb(edge),rgb(fill)];
  const sizes=[16,20,24,32,40,48,64,96,128,256];
  const images=sizes.map(size=>{
diff --git a/scripts/lib/windows-markdown.mjs b/scripts/lib/windows-markdown.mjs
index 4d1614a60..6bfd2b402 100644
--- a/scripts/lib/windows-markdown.mjs
+++ b/scripts/lib/windows-markdown.mjs
@@ -1,3 +1,4 @@
+import { rgb as hexRgb } from "./color.mjs";
 import {renderWindowsTemplate} from "./windows-template.mjs";
 /* PowerToys owns Markdown parsing, document bytes and WebView restrictions.
    This renderer supplies token-derived CSS and reversible backing at pinned public boundaries. */
@@ -41,7 +42,7 @@ export function windowsMarkdownArtifacts(host,resolved){
  const css=render(readFileSync(path.join(repoRoot,'ports/windows/src/markdown-theme.css.in'),'utf8'),roles).replace(/\r?\n/g,'');
  if(/[^\x20-\x7e]/.test(css))throw Error('Markdown CSS must be ASCII for the same-length boundary');
  if(md.headers.some(pin=>css.length>pin.styleLength))throw Error('Markdown CSS exceeds admitted extent');
- const rgb=role=>{const color=roles[role];if(!/^#[a-f0-9]{6}$/i.test(color))throw Error('Loading surface requires an opaque semantic color');return [1,3,5].map(i=>parseInt(color.slice(i,i+2),16)).join(',');};
+ const rgb=role=>{const color=roles[role];if(!/^#[a-f0-9]{6}$/i.test(color))throw Error('Loading surface requires an opaque semantic color');return hexRgb(color).join(',');};
  const subs={LOADING_BACKGROUND:rgb('CANVAS'),LOADING_FOREGROUND:rgb('PROSE'),VERSION:md.version,HEADER_PINS:md.headers.map(p=>` {${p.length},${p.styleOffset},${p.styleLength},"${p.sha256}"},`).join('\n'),
   PALETTE_CSS:css,HOST_SHA256:md.hostSha256,CONTROL_SHA256:md.controlSha256,HELPER_SHA256:md.helperSha256,
   PREVIEW_HOST_SHA256:native.sha256,PREVIEW_EXPLORER_SHA256:native.explorerSha256,
diff --git a/scripts/lib/windows-port.mjs b/scripts/lib/windows-port.mjs
index 61b4fef40..97db86374 100644
--- a/scripts/lib/windows-port.mjs
+++ b/scripts/lib/windows-port.mjs
@@ -1,3 +1,4 @@
+import { rgb as hexRgb } from "./color.mjs";
 import {renderWindowsTemplate} from "./windows-template.mjs";
 import {folderIconFile,folderGeometry} from './windows-folder-icon.mjs';
 /* Windows native artifacts. Host definitions own selectors; tokens own colors.
@@ -6,7 +7,7 @@ import { toCss } from './tokens.mjs';
 import {windowsMarkdownArtifacts} from './windows-markdown.mjs';
 import { stableJson, repoRoot } from './fs.mjs';
 import { readFileSync } from 'node:fs';
-import { createHash } from 'node:crypto';
+import { sha256Hex } from './host-install/files.mjs';
 import { buildSync } from 'esbuild';
 import path from 'node:path';
 
@@ -44,8 +45,8 @@ export function windowsWebContentStyles(items,val) {
   return {target:t.target,styles};
  });
 }
-const rgb = hex => [1,3,5].map(i => Number.parseInt(hex.slice(i,i+2),16));
-export const wallpaperBmp = hex => {
+const rgb=hexRgb;
+const wallpaperBmp = hex => {
   const b=Buffer.alloc(58); b.write('BM'); b.writeUInt32LE(58,2); b.writeUInt32LE(54,10);
   b.writeUInt32LE(40,14); b.writeInt32LE(1,18); b.writeInt32LE(1,22); b.writeUInt16LE(1,26); b.writeUInt16LE(24,28); b.writeUInt32LE(4,34);
   const [r,g,blue]=rgb(hex); b[54]=blue;b[55]=g;b[56]=r;return b;
@@ -102,7 +103,7 @@ function cursorImage(name,size,foreground,outline) {
   const dib=Buffer.alloc(40);dib.writeUInt32LE(40);dib.writeInt32LE(size,4);dib.writeInt32LE(size*2,8);dib.writeUInt16LE(1,12);dib.writeUInt16LE(32,14);dib.writeUInt32LE(rgba.length+mask.length,20);
   return {data:Buffer.concat([dib,rgba,mask]),hot:hot.map(v=>Math.round((inset+v*artworkScale)*scale))};
 }
-export function cursorFile(name,foreground,outline){
+function cursorFile(name,foreground,outline){
  const sizes=[32,48,64,96],head=Buffer.alloc(6+16*sizes.length);head.writeUInt16LE(2,2);head.writeUInt16LE(sizes.length,4);let offset=head.length;const data=[];
  sizes.forEach((size,i)=>{const img=cursorImage(name,size,foreground,outline),n=6+16*i;head[n]=size;head[n+1]=size;head.writeUInt16LE(img.hot[0],n+4);head.writeUInt16LE(img.hot[1],n+6);head.writeUInt32LE(img.data.length,n+8);head.writeUInt32LE(offset,n+12);offset+=img.data.length;data.push(img.data);});return Buffer.concat([head,...data]);
 }
@@ -174,7 +175,7 @@ export function windowsArtifacts({manifest,host,resolved}){
  const nativeSource=renderWindowsTemplate(readFileSync(path.join(repoRoot,'ports/windows/src/j3w1-explorer-native.wh.cpp.in'),'utf8'),substitutions,'native source');
  artifacts.push({path:`dist/${id}.wh.cpp`,text:nativeSource});
  json(`${id}.json`,nativeSettings);
- const bundledMods=[{id,version:native.version,path:`dist/${id}.wh.cpp`,sha256:createHash('sha256').update(nativeSource).digest('hex')}];
+ const bundledMods=[{id,version:native.version,path:`dist/${id}.wh.cpp`,sha256:sha256Hex(nativeSource)}];
  const preview=host.monacoPreview,previewId='j3w1-powertoys-preview';
  if(!/^\d+\.\d+\.\d+\.\d+$/.test(preview.hostVersion)||! /^[a-f0-9]{64}$/.test(preview.templateSha256))throw Error('Preview requires exact host and template identities');
  const previewParts=preview.hostVersion.split('.');
@@ -192,7 +193,7 @@ export function windowsArtifacts({manifest,host,resolved}){
  artifacts.push({path:`dist/${previewId}.wh.cpp`,text:previewSource});
  // Windhawk stores checkbox settings as integer strings (1/0).
  json(`${previewId}.json`,{enabled:1});
- bundledMods.push({id:previewId,version:preview.version,path:`dist/${previewId}.wh.cpp`,sha256:createHash('sha256').update(previewSource).digest('hex')});
+ bundledMods.push({id:previewId,version:preview.version,path:`dist/${previewId}.wh.cpp`,sha256:sha256Hex(previewSource)});
  const calculator=host.calculator,calculatorId='j3w1-calculator';
  const calculatorPackageVersion=calculator.packageFullName.split('_')[1];
  if(calculator.buttonStyleTarget!==
@@ -214,14 +215,14 @@ export function windowsArtifacts({manifest,host,resolved}){
  const calculatorSource=renderWindowsTemplate(readFileSync(path.join(repoRoot,'ports/windows/src/j3w1-calculator.wh.cpp.in'),'utf8'),calculatorSubs,'Calculator source');
  artifacts.push({path:`dist/${calculatorId}.wh.cpp`,text:calculatorSource});
  json(`${calculatorId}.json`,{enabled:1});
- bundledMods.push({id:calculatorId,version:calculator.version,path:`dist/${calculatorId}.wh.cpp`,sha256:createHash('sha256').update(calculatorSource).digest('hex')});
+ bundledMods.push({id:calculatorId,version:calculator.version,path:`dist/${calculatorId}.wh.cpp`,sha256:sha256Hex(calculatorSource)});
  const notepad=host.notepadNative,notepadId='j3w1-notepad-native';
  if(!/^Microsoft\.WindowsNotepad_\d+\.\d+\.\d+\.\d+_x64__8wekyb3d8bbwe$/.test(notepad.packageFullName)||! /^[a-f0-9]{64}$/.test(notepad.editorSha256))throw Error('Notepad editor requires exact package and binary identities');
  const notepadSubs={VERSION:notepad.version,PACKAGE_FULL_NAME:notepad.packageFullName,EDITOR_SHA256:notepad.editorSha256};
  for(const [key,role] of Object.entries(notepad.roles))notepadSubs[key]='RGB('+rgb(val(role)).join(',')+')';
  const notepadSource=renderWindowsTemplate(readFileSync(path.join(repoRoot,'ports/windows/src/j3w1-notepad-native.wh.cpp.in'),'utf8'),notepadSubs,'Notepad source');
  artifacts.push({path:'dist/'+notepadId+'.wh.cpp',text:notepadSource});json(notepadId+'.json',{enabled:1});
- bundledMods.push({id:notepadId,version:notepad.version,path:'dist/'+notepadId+'.wh.cpp',sha256:createHash('sha256').update(notepadSource).digest('hex')});
+ bundledMods.push({id:notepadId,version:notepad.version,path:'dist/'+notepadId+'.wh.cpp',sha256:sha256Hex(notepadSource)});
 
  for(const [chrome,chromeId,label,exe,packagePattern,nativeClass,rootClasses,clsid] of [
   [host.notepadChrome,'j3w1-notepad-chrome','Notepad','Notepad.exe',/^Microsoft\.WindowsNotepad_\d+\.\d+\.\d+\.\d+_x64__8wekyb3d8bbwe$/,'Notepad',['NotepadXamlUI.MainMenuBar','NotepadXamlUI.StatusBar','NotepadXamlUI.TabsBar','NotepadXamlUI.NotepadSettingsPage'],'0x9f12b9c4,0x7b9d,0x489f,{0x8e,0x31,0x4a,0x81,0x10,0x32,0x6b,0xc4}'],
@@ -247,7 +248,16 @@ export function windowsArtifacts({manifest,host,resolved}){
   const customCaption=chromeId==='j3w1-notepad-chrome';
   if(customCaption?chrome.existingCaptionRollback!=='windows-default':chrome.existingCaptionRollback!==undefined)throw Error(label+' requires its exact existing-caption rollback policy');
   const existingCaption=customCaption?readFileSync(path.join(repoRoot,'ports/windows/src/notepad-existing-caption.cpp.in'),'utf8'):'';
-  const existingSubs={NATIVE_CAPTION_CONTRACT:customCaption?"// Caption colors are write-only. Known creation/application baselines restore\n// exactly; existing unowned Notepad roots use the explicit owner-approved\n// Windows-default reset policy below. No original caption read is claimed.\n":'// Caption colors are write-only. Existing windows with unknown state are not\n// recolored until an application request supplies a baseline. Windows created\n// after hook installation have a known default baseline; creation-time requests\n// are captured by the same hook before CreateWindowEx returns.\n',NATIVE_CAPTION_RESET_STATE:customCaption?' bool resetToDefault=false;':'',NATIVE_CAPTION_RESET_CAPTURE:customCaption?'state->resetToDefault=false;':'',NATIVE_CAPTION_FORWARD:customCaption?'static void RefreshCaptions();\n':'',NATIVE_CAPTION_REFRESH:customCaption?' RefreshCaptions();\n':'',NATIVE_CAPTION_DISCOVERY:existingCaption,NATIVE_CAPTION_DISCOVER:customCaption?'DiscoverExistingCaptions();':'',NATIVE_CAPTION_WORKER_DISCOVER:customCaption?'  DiscoverExistingCaptions();\n':''};
+  const existingSubs={
+    NATIVE_CAPTION_CONTRACT:customCaption?"// Caption colors are write-only. Known creation/application baselines restore\n// exactly; existing unowned Notepad roots use the explicit owner-approved\n// Windows-default reset policy below. No original caption read is claimed.\n":'// Caption colors are write-only. Existing windows with unknown state are not\n// recolored until an application request supplies a baseline. Windows created\n// after hook installation have a known default baseline; creation-time requests\n// are captured by the same hook before CreateWindowEx returns.\n',
+    NATIVE_CAPTION_RESET_STATE:customCaption?' bool resetToDefault=false;':'',
+    NATIVE_CAPTION_RESET_CAPTURE:customCaption?'state->resetToDefault=false;':'',
+    NATIVE_CAPTION_FORWARD:customCaption?'static void RefreshCaptions();\n':'',
+    NATIVE_CAPTION_REFRESH:customCaption?' RefreshCaptions();\n':'',
+    NATIVE_CAPTION_DISCOVERY:existingCaption,
+    NATIVE_CAPTION_DISCOVER:customCaption?'DiscoverExistingCaptions();':'',
+    NATIVE_CAPTION_WORKER_DISCOVER:customCaption?'  DiscoverExistingCaptions();\n':''
+  };
   const admittedCaptionNames=customCaption||legacy?[]:publicCaptionNames;
   if(JSON.stringify(Object.keys(chrome.captionColors??{}))!==JSON.stringify(admittedCaptionNames))throw Error(label+' requires its exact ordered public caption-color contract');
   const captionSlots=admittedCaptionNames.map(key=>publicCaptionNames.indexOf(key));
@@ -284,12 +294,12 @@ export function windowsArtifacts({manifest,host,resolved}){
   if(legacy)chromeSource=chromeSource.replaceAll('Microsoft::UI::Xaml','Windows::UI::Xaml').replaceAll('L"Microsoft.UI.Xaml.','L"Windows.UI.Xaml.');
   if(legacy)chromeSource=chromeSource.replace('type==L"Windows.UI.Xaml.Controls.SplitButton"||type==L"Windows.UI.Xaml.Controls.SplitButton"','type==L"Microsoft.UI.Xaml.Controls.SplitButton"||type==L"Windows.UI.Xaml.Controls.SplitButton"');
   artifacts.push({path:'dist/'+chromeId+'.wh.cpp',text:chromeSource});json(chromeId+'.json',{enabled:1});
-  bundledMods.push({id:chromeId,version:chrome.version,path:'dist/'+chromeId+'.wh.cpp',sha256:createHash('sha256').update(chromeSource).digest('hex')});
+  bundledMods.push({id:chromeId,version:chrome.version,path:'dist/'+chromeId+'.wh.cpp',sha256:sha256Hex(chromeSource)});
  }
  const markdown=windowsMarkdownArtifacts(host,resolved);
  artifacts.push({path:`dist/${markdown.id}.wh.cpp`,text:markdown.source},{path:'dist/markdown-theme.css',text:markdown.css});
  json(`${markdown.id}.json`,{enabled:1});
- bundledMods.push({id:markdown.id,version:markdown.version,path:`dist/${markdown.id}.wh.cpp`,sha256:createHash('sha256').update(markdown.source).digest('hex')});
+ bundledMods.push({id:markdown.id,version:markdown.version,path:`dist/${markdown.id}.wh.cpp`,sha256:sha256Hex(markdown.source)});
  const startup=host.settingsStartup;
  const dependencies=JSON.parse(readFileSync(path.join(repoRoot,'ports/windows/dependencies.json'),'utf8'));
  if(startup.sourceSha256!==dependencies.mods.find(m=>m.id==='windows-11-settings-styler')?.sha256
@@ -325,8 +335,8 @@ export function windowsArtifacts({manifest,host,resolved}){
  artifacts.push({path:'dist/j3w1.theme',text:`; Generated j3w1 ${manifest.version}\n[Theme]\nDisplayName=j3w1\n[Control Panel\\Colors]\nBackground=${rgb(val('color.surface.desktop')).join(' ')}\n[Control Panel\\Desktop]\nWallpaper=${themeAssets}\\j3w1-wallpaper.bmp\nTileWallpaper=0\nWallpaperStyle=10\n[Control Panel\\Cursors]\n${themeCursors}\nDefaultValue=j3w1\n[VisualStyles]\nPath=%ResourceDir%\\Themes\\Aero\\Aero.msstyles\nColorStyle=NormalColor\nSize=NormalSize\nColorizationColor=0XFF${val('color.border.active').slice(1).toUpperCase()}\nAutoColorization=0\nSystemMode=Dark\nAppMode=Dark\n[MasterThemeSelector]\nMTSM=DABJDKT\n`});
  const runtime=buildSync({entryPoints:[path.join(repoRoot,'ports/windows/src/runtime.mjs')],bundle:true,mainFields:['module','main'],platform:'node',target:'node24',format:'cjs',write:false,legalComments:'eof'}).outputFiles[0].text;
  artifacts.push({path:'dist/runtime.cjs',text:runtime});
- const files=artifacts.map(a=>({path:a.path,sha256:createHash('sha256').update(a.bytes??a.text).digest('hex')}));
- for(const name of ['install.ps1','adapter.ps1','lockscreen.ps1','dependencies.json','host.json'])files.push({path:name,sha256:createHash('sha256').update(readFileSync(path.join(repoRoot,'ports/windows',name))).digest('hex')});
+ const files=artifacts.map(a=>({path:a.path,sha256:sha256Hex(a.bytes??a.text)}));
+ for(const name of ['install.ps1','adapter.ps1','lockscreen.ps1','dependencies.json','host.json'])files.push({path:name,sha256:sha256Hex(readFileSync(path.join(repoRoot,'ports/windows',name)))});
  json('install-manifest.json',{schemaVersion:1,version:manifest.version,files});
  return artifacts;
 }
diff --git a/scripts/phase6-visual-review.mjs b/scripts/phase6-visual-review.mjs
index ff2e8afda..9e1c5597d 100644
--- a/scripts/phase6-visual-review.mjs
+++ b/scripts/phase6-visual-review.mjs
@@ -1,3 +1,5 @@
+import { escapeHtml as esc } from "./lib/markup.mjs";
+import { cssVar } from "./lib/tokens.mjs";
 import { promises as fs } from "node:fs";
 import path from "node:path";
 import { createServer } from "node:http";
@@ -13,7 +15,6 @@ import { requestPath, send, sendFile } from "./tooling/static-server.mjs";
 
 const root = path.join(repoRoot, ".cache/phase6a");
 const output = path.join(root, "site");
-const esc = s => String(s).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll('"', "&quot;");
 const write = async (file, data) => {
   const target = path.join(output, file);
   await fs.mkdir(path.dirname(target), { recursive: true });
@@ -47,7 +48,7 @@ export const buildReview = async () => {
     await write(`review/${c.id}/tokens.css`, buildCss({ profiles: new Map([[c.id, c.resolved]]), defaultId: c.id }) + buildDensityCss(c.resolved));
     const data = { id: c.id, name: c.report.name, summary: c.report.summary, specimenDigest, baselineDigest: baseline.baselineDigest,
       focusHex: c.resolved.get("color.interaction.focus.ring").resolved.hex };
-    const foundations = ladderGroups.map(([name, prefix]) => `<section><h2>${name} ladder</h2><div class="ladder">${[...c.resolved].filter(([role]) => role.startsWith(prefix)).map(([role, token]) => `<div class="ladder-row"><span class="ladder-paint" style="background:var(--${role.replaceAll(".", "-")})" aria-hidden="true"></span><code>${role}</code><code>${token.resolved.hex}</code></div>`).join("")}</div></section>`).join("");
+    const foundations = ladderGroups.map(([name, prefix]) => `<section><h2>${name} ladder</h2><div class="ladder">${[...c.resolved].filter(([role]) => role.startsWith(prefix)).map(([role, token]) => `<div class="ladder-row"><span class="ladder-paint" style="background:var(${cssVar(role)})" aria-hidden="true"></span><code>${role}</code><code>${token.resolved.hex}</code></div>`).join("")}</div></section>`).join("");
     const metadata = `<script type="application/json" id="review-data">${JSON.stringify(data).replaceAll("<", "\\u003c")}</script>`;
     await write(`review/${c.id}/index.html`, decorateHexHtml(`${header(c, c.report.name)}${nav}<main id="main"><header class="review-intro"><p class="eyebrow">PHASE 6A / LOCAL VISUAL SELECTION</p><h1>${esc(c.report.name)}</h1><p>${esc(c.report.summary)}</p><p>Temporary candidate. Shared Vue preview, not the published component package. <a href="foundations/">Foundations</a> · <a href="components/">Full existing state board</a></p></header><div id="review-app"><p>Loading the interactive Vue composition…</p></div><noscript><p>The Vue composition requires JavaScript. <a href="components/">The complete static specimen board</a> and <a href="foundations/">foundations</a> remain available.</p></noscript></main>${metadata}<script type="module" src="/assets/review.js"></script></body></html>`));
     await write(`review/${c.id}/components/index.html`, decorateHexHtml(`${header(c, "State board")}${nav}<main id="main" class="board"><h1>${esc(c.report.name)} / state board</h1><p>All ${baseline.components.length} existing specifications, every declared variant and state. Forced states are visual references, not proof of implemented behavior. Deferred inventory is not claimed as productized.</p>${gallery}</main></body></html>`));
diff --git a/scripts/tooling/git.mjs b/scripts/tooling/git.mjs
index 5df7d894d..79e39cdce 100644
--- a/scripts/tooling/git.mjs
+++ b/scripts/tooling/git.mjs
@@ -7,7 +7,9 @@ import { repoRoot } from "../lib/fs.mjs";
 /* A full 40-hex commit, the only form the exports and kits accept as a pin. */
 export const REVISION = /^[a-f0-9]{40}$/;
 
-export const git = (args, options = {}) => execFileSync("git", args, { cwd: repoRoot, encoding: "utf8", ...options }).trim();
+export const gitBytes = (args, options = {}) => execFileSync("git", args, { cwd: repoRoot, ...options });
+
+export const git = (args, options = {}) => gitBytes(args, { encoding: "utf8", ...options }).trim();
 
 /* null instead of a throw, for callers that work outside a checkout. */
 export const tryGit = (args, options) => {
diff --git a/site/integrations/rehype-spec.mjs b/site/integrations/rehype-spec.mjs
index 787979592..279ec8c90 100644
--- a/site/integrations/rehype-spec.mjs
+++ b/site/integrations/rehype-spec.mjs
@@ -1,3 +1,4 @@
+import { decisionHeadingPattern } from "../../scripts/lib/spec.mjs";
 /* Rehype plugin for the spec Markdown:
    - shifts headings so the page outline stays h1 > h2 (doc or family) > h3
      (component) > h4 (sections): documents shift by one, components by two;
@@ -43,7 +44,7 @@ export default function rehypeSpec() {
         node.properties ??= {};
         const own = node.properties.id ?? slug(textOf(node));
         node.properties.id = `${prefix}${own}`;
-        const decision = stemOf(file) === "decisions" && textOf(node).match(/^(D-\d{3})\b/);
+        const decision = stemOf(file) === "decisions" && `## ${textOf(node)}`.match(decisionHeadingPattern);
         if (decision) node.properties.id = anchorFor.decision(decision[1]);
       }
       if (node.type === "comment" && /@compact:(start|end)/.test(node.value)) node.value = "";
diff --git a/site/src/components/ComponentSection.astro b/site/src/components/ComponentSection.astro
index 5d08e2be2..d925f2b47 100644
--- a/site/src/components/ComponentSection.astro
+++ b/site/src/components/ComponentSection.astro
@@ -4,24 +4,27 @@ import Eligibility from "./Eligibility.astro";
    specification body, the agent brief. Anchors come from scripts/lib/anchors.mjs. */
 import { render } from "astro:content";
 import { withBase } from "../lib/base";
-import { anchors, coverageLedger, cssVar, defaultTokens, familyList } from "../lib/theme";
+import { anchors, coverageLedger, defaultTokens, familyList } from "../lib/theme";
 import StateMatrix from "./StateMatrix.astro";
+import ContrastReport from "./ContrastReport.astro";
 import { splitVariants } from "../../../scripts/lib/spec.mjs";
 import { RECIPE_IDS } from "../../../schemas/recipe.mjs";
 import { PREVIEW_IDS } from "../../../schemas/playground.mjs";
 
 interface Props {
   entry: any;
-  demo: string | null;
+  demo?: string | null;
+  compact?: boolean;
 }
 
-const { entry, demo } = Astro.props;
+const { entry, demo = null, compact = false } = Astro.props;
 const c = entry.data;
-const { Content } = await render(entry);
+const { Content, headings } = await render(entry);
+const destination = withBase(`components/${c.id}/`);
 const fragments = demo ? (splitVariants(demo) as Map<string, string>) : new Map<string, string>();
 const coverage = (coverageLedger.components as Record<string, { specified: boolean; demonstrated: boolean; tested: boolean }>)[c.id];
 const family = familyList.find((f) => f.id === c.family);
-const statusTags = [coverage?.specified && "specified", coverage?.demonstrated && "demonstrated", coverage?.tested && "tested"].filter(Boolean) as string[];
+const statusTags = [coverage?.specified && "specified", coverage?.demonstrated && "demonstrated", coverage?.tested && "test implemented"].filter(Boolean) as string[];
 ---
 
 <section class="component" id={anchors.component(c.id)} data-component={c.id} data-family={c.family} data-states={c.states.join(",")} data-priority={c.priority} data-maturity={c.maturity} data-keywords={[c.name, ...c.keywords].join(" ").toLowerCase()}>
@@ -36,12 +39,22 @@ const statusTags = [coverage?.specified && "specified", coverage?.demonstrated &
     {c.maturity === "draft" && <li><span class="tag tag-proposed">draft</span></li>}
   </ul>
   <p class="prose">{c.summary}</p>
+  {compact ? <>
+    <p class="component-inventory">Variants: {c.variants.map((v: { name: string }) => v.name).join(", ")}. States: {c.states.join(", ")}.</p>
+    <nav class="component-links" aria-label={`${c.name} specification`}>
+      <a class="link link-standalone" data-legacy-target href={`${destination}#${anchors.component(c.id)}`}>Full specification →</a>
+      <a class="link" id={anchors.states(c.id)} data-legacy-target href={`${destination}#${anchors.states(c.id)}`}>State matrix</a>
+      {PREVIEW_IDS.includes(c.id) && <a class="link" id={anchors.workbench(c.id, "embedded")} data-legacy-target href={`${destination}#${anchors.workbench(c.id, "embedded")}`}>Live controls</a>}
+      {headings.map((heading: { slug: string; text: string }) => <a class="link" id={heading.slug} data-legacy-target href={`${destination}#${heading.slug}`}>{heading.text}</a>)}
+    </nav>
+  </> : <>
   <p><a href={withBase(`report/?component=${encodeURIComponent(c.id)}`)}>Report an issue with this component</a></p>
-  {PREVIEW_IDS.includes(c.id) && <div class="workbench-entry"><p><a href={withBase(`workbench/${c.id}/`)}>Open component workbench</a> <button type="button" class="btn js-only" data-workbench-open={withBase(`workbench/${c.id}/`)} aria-controls={anchors.workbench(c.id, "embedded")} aria-expanded="false">Open live controls here</button></p><div id={anchors.workbench(c.id, "embedded")} data-workbench-slot></div></div>}
+  {PREVIEW_IDS.includes(c.id) && <div class="workbench-entry"><p><a href={withBase(`workbench/${c.id}/`)}>Open component workbench</a> <button type="button" class="button button-secondary js-only" data-workbench-open={withBase(`workbench/${c.id}/`)} aria-controls={anchors.workbench(c.id, "embedded")} aria-expanded="false">Open live controls here</button></p><div id={anchors.workbench(c.id, "embedded")} data-workbench-slot></div></div>}
   {RECIPE_IDS.includes(c.id) && <p><a href={withBase(`recipes/${c.id}/`)}>View source and copy recipe</a> · <a href={withBase(`exports/recipes/${c.id}/example.html`)} download>Download standalone example</a>{c.id === "dialog" && " — visual-only; modal behavior is host-owned."}</p>}
 
   <div class="block">
     <h4>Tokens</h4>
+    <p>Focus a role to inspect its values; follow its link for persistent usage and source details.</p>
     <div class="table-scroll" tabindex="0" role="region" aria-label="Scrollable table">
       <table class="spec-table token-table">
         <thead><tr><th scope="col">Part</th><th scope="col">Role</th><th scope="col">Value</th><th scope="col">Use</th></tr></thead>
@@ -51,7 +64,7 @@ const statusTags = [coverage?.specified && "specified", coverage?.demonstrated &
             return (
               <tr>
                 <td><code>{part}</code></td>
-                <td><code data-token={path}>{path}</code><Eligibility token={token} /></td>
+                <td><a href={withBase(`tokens/${encodeURIComponent(path)}/`)} data-token={path}><code>{path}</code></a><Eligibility token={token} /></td>
                 <td><code>{token?.css ?? "unresolved"}</code></td>
                 <td>{token?.description}</td>
               </tr>
@@ -69,6 +82,8 @@ const statusTags = [coverage?.specified && "specified", coverage?.demonstrated &
     <Content />
   </div>
 
+  <ContrastReport component={c.id} />
+
   {c.keyboard.length > 0 && (
     <div class="block">
       <h4>Keys</h4>
@@ -87,9 +102,10 @@ const statusTags = [coverage?.specified && "specified", coverage?.demonstrated &
       <a href={withBase(`exports/components/${c.id}.json`)}>Component JSON</a> ·
       <a href={withBase(`exports/components/${c.id}.brief.txt`)}>Implementation brief</a> ·
       <a href={withBase(`kit/?components=${c.id}`)}>Build a task kit</a> ·
-      <button type="button" class="btn js-only" data-copy-brief={withBase(`exports/components/${c.id}.brief.txt`)}>Copy implementation brief</button>
+      <button type="button" class="button button-secondary js-only" data-copy-brief={withBase(`exports/components/${c.id}.brief.txt`)}>Copy implementation brief</button>
     </p>
-    {c.related.length > 0 && <p>Related: {c.related.map((r: string) => <><a href={`#${anchors.component(r)}`}><code>{r}</code></a> </>)}</p>}
+    {c.related.length > 0 && <p>Related: {c.related.map((r: string) => <><a href={withBase(`components/${r}/#${anchors.component(r)}`)}><code>{r}</code></a> </>)}</p>}
     {c.fixtures.length > 0 && <p>Stress fixtures: {c.fixtures.map((f: string) => <><code>{f}</code> </>)}</p>}
   </div>
+  </>}
 </section>
diff --git a/site/src/components/ContrastReport.astro b/site/src/components/ContrastReport.astro
index 98c640d9e..c6c04e789 100644
--- a/site/src/components/ContrastReport.astro
+++ b/site/src/components/ContrastReport.astro
@@ -1,7 +1,10 @@
 ---
+import { withBase } from "../lib/base";
 import { contrastReport } from "../lib/theme";
 
-const pairs = contrastReport.pairs as Array<{ label: string | null; source: string; state: string | null; kind: string; min: number; fg: string; bg: string; fgHex: string; bgHex: string; ratio: number; pass: boolean; waiver: string | null }>;
+interface Props { component?: string; summary?: boolean }
+const { component, summary = false } = Astro.props;
+const pairs = contrastReport.pairs.filter((pair) => !component || pair.source === component) as Array<{ label: string | null; source: string; state: string | null; kind: string; min: number; fg: string; bg: string; fgHex: string; bgHex: string; ratio: number; pass: boolean; waiver: string | null }>;
 const failing = pairs.filter((p) => !p.pass && !p.waiver).length;
 const waived = pairs.filter((p) => !p.pass && p.waiver).length;
 ---
@@ -9,7 +12,7 @@ const waived = pairs.filter((p) => !p.pass && p.waiver).length;
 <div class="block" id="contrast-report">
   <h3>Contrast report</h3>
   <p>{pairs.length} declared pairs measured on resolved sRGB values with the WCAG 2.x formula; {waived} waived (decorative only), {failing} failing. A pass is a design target for the named role, not an application-wide conformance claim.</p>
-  <div class="table-scroll" tabindex="0" role="region" aria-label="Scrollable table">
+  {summary ? <p><a class="link link-standalone" href={withBase("reference/contrast/#contrast-report")}>Every pair, computed ratio and waiver →</a></p> : <div class="table-scroll" tabindex="0" role="region" aria-label="Scrollable table">
     <table class="spec-table contrast-table">
       <thead>
         <tr>
@@ -38,5 +41,5 @@ const waived = pairs.filter((p) => !p.pass && p.waiver).length;
         ))}
       </tbody>
     </table>
-  </div>
+  </div>}
 </div>
diff --git a/site/src/components/CoverageLedger.astro b/site/src/components/CoverageLedger.astro
index c40dce76f..96231a051 100644
--- a/site/src/components/CoverageLedger.astro
+++ b/site/src/components/CoverageLedger.astro
@@ -34,7 +34,7 @@ const defs = coverageLedger.definitions as Record<string, string>;
         <tbody>
           {rows.map(([id, c]) => (
             <tr>
-              <td><a href={`#c-${id}`}><code>{id}</code></a> · <a href={`${withBase("verification/")}#${anchors.verification(id)}`}>evidence</a></td>
+              <td><a href={withBase(`components/${id}/#${anchors.component(id)}`)}><code>{id}</code></a> · <a href={`${withBase("verification/")}#${anchors.verification(id)}`}>evidence</a></td>
               <td>{c.family}</td>
               <td>{c.priority}</td>
               <td>{c.specified ? <span class="status-pass">yes</span> : "—"}</td>
diff --git a/site/src/components/Eligibility.astro b/site/src/components/Eligibility.astro
index fbb288af8..82806e165 100644
--- a/site/src/components/Eligibility.astro
+++ b/site/src/components/Eligibility.astro
@@ -1,4 +1,5 @@
 ---
+import { withBase } from "../lib/base";
 import { anchors, type ResolvedToken } from "../lib/theme";
 interface Props { token?: ResolvedToken }
 const { token } = Astro.props;
@@ -6,6 +7,6 @@ const { token } = Astro.props;
 {token && <span class="eligibility">
   <span class:list={["tag", { "tag-proposed": token.status === "proposed" }]}>{token.status}</span>
   {token.deprecated && <span class="tag tag-deprecated">deprecated</span>}
-  <span title={token.eligibility.reason}>{token.eligibility.action}</span>
-  {token.eligibility.decisionIds.map((id) => <a href={`#${anchors.decision(id)}`}>{id}</a>)}
+  <span>{token.eligibility.action}</span>
+  {token.eligibility.decisionIds.map((id) => <a href={withBase(`reference/decisions/#${anchors.decision(id)}`)}>{id}</a>)}
 </span>}
diff --git a/site/src/components/FamilySection.astro b/site/src/components/FamilySection.astro
index 1cd40dffb..8dd6ce4b1 100644
--- a/site/src/components/FamilySection.astro
+++ b/site/src/components/FamilySection.astro
@@ -5,14 +5,15 @@ import ComponentSection from "./ComponentSection.astro";
 interface Props {
   family: { id: string; title: string; description: string };
   entries: any[];
-  demos: Record<string, string>;
+  demos?: Record<string, string>;
+  compact?: boolean;
 }
 
-const { family, entries, demos } = Astro.props;
+const { family, entries, demos = {}, compact = false } = Astro.props;
 ---
 
 <section class="family" id={anchors.family(family.id)} data-family={family.id}>
   <h2>{family.title}</h2>
   <p class="family-description">{family.description}</p>
-  {entries.map((entry) => <ComponentSection entry={entry} demo={demos[entry.data.id] ?? null} />)}
+  {entries.map((entry) => <ComponentSection compact={compact} entry={entry} demo={demos[entry.data.id] ?? null} />)}
 </section>
diff --git a/site/src/components/FormWorkflow.astro b/site/src/components/FormWorkflow.astro
index be76829b6..8e9ce2d44 100644
--- a/site/src/components/FormWorkflow.astro
+++ b/site/src/components/FormWorkflow.astro
@@ -1,5 +1,8 @@
 ---
+/* The validation-recovery workflow. One filled primary per view (button.md):
+   the submit; the other steps are secondary, and Reset is tertiary. */
 import { anchorFor } from "../../../scripts/lib/anchors.mjs";
+
 const { prefix, templates } = Astro.props;
 ---
 <section class="admin-form form-tool" data-workflow={prefix} hidden>
@@ -8,15 +11,15 @@ const { prefix, templates } = Astro.props;
   <form novalidate>
     <div class="alert alert-danger form-tool-summary" data-errors role="alert" tabindex="-1" hidden></div>
     <fieldset class="form-tool-fields" data-fields aria-label="Enter values"></fieldset>
-    <div class="form-tool-actions"><button class="button button-primary" type="submit" data-event="submit">Review values</button></div>
+    <div class="form-tool-actions"><button class="button" type="submit" data-event="submit">Review values</button></div>
   </form>
   <table data-review class="table" hidden></table>
   <p data-status role="status" tabindex="-1" id={anchorFor.formField(prefix, "workflow", "status")}></p>
   <div class="form-tool-actions">
-    <button class="button" type="button" data-event="edit" hidden>Edit values</button>
-    <button class="button button-primary" type="button" data-event="confirm" hidden>Simulate save</button>
-    <button class="button" type="button" data-event="complete" hidden>Complete simulation</button>
-    <button class="button" type="button" data-event="reset">Reset values</button>
+    <button class="button button-secondary" type="button" data-event="edit" hidden>Edit values</button>
+    <button class="button button-secondary" type="button" data-event="confirm" hidden>Simulate save</button>
+    <button class="button button-secondary" type="button" data-event="complete" hidden>Complete simulation</button>
+    <button class="button button-tertiary" type="button" data-event="reset">Reset values</button>
   </div>
   {Object.entries(templates).map(([kind, html]) => <template data-field-template={kind} set:html={html} />)}
 </section>
diff --git a/site/src/components/FoundationSpecimens.astro b/site/src/components/FoundationSpecimens.astro
index c2bf2b3c1..182347eba 100644
--- a/site/src/components/FoundationSpecimens.astro
+++ b/site/src/components/FoundationSpecimens.astro
@@ -3,28 +3,21 @@
    each surface, selection versus focus, the border set, the status set, the
    terminal slots per profile. Token variables only. */
 import { anchors, defaultTokens, profiles } from "../lib/theme";
+import { contrastHex } from "../../../scripts/lib/contrast.mjs";
 
 const surfaces = ["canvas", "default", "raised"];
 const textRoles = ["prose", "bright", "default", "muted", "subtle", "disabled", "accent", "accent-strong"];
 const statuses = ["danger", "warning", "success", "info", "neutral"];
 const glyph: Record<string, string> = { danger: "✕", warning: "!", success: "✓", info: "i", neutral: "·" };
 const profileIds = Object.keys(profiles);
-const ratio = (fg: string, bg: string) => {
-  const lum = (hex: string) => {
-    const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
-    return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-  };
-  const a = lum(fg);
-  const b = lum(bg);
-  return ((Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05)).toFixed(2);
-};
+const ratio = (fg: string, bg: string) => contrastHex(fg, bg).toFixed(2);
 const hex = (path: string) => (defaultTokens[path].value as { hex: string }).hex;
 ---
 
 <div class="block" id={anchors.specimen("text-ladder")}>
   <h4>Text ladder on each surface</h4>
   <p class="family-description">Measured ratios; ordinary text needs 4.5:1, disabled text is exempt but held to 3:1.</p>
-  <div class="ladder">
+  <div class="ladder" data-specimen>
     {surfaces.map((s) => (
       <div class="ladder-surface" style={`background: var(--color-surface-${s})`}>
         <div class="ladder-title">surface.{s}</div>
@@ -65,7 +58,7 @@ const hex = (path: string) => (defaultTokens[path].value as { hex: string }).hex
 <div class="block" id={anchors.specimen("selection-focus")}>
   <h4>Selection is a fill; focus is a ring</h4>
   <p class="family-description">The four combinations every list, table and tab strip must show. Focus rings on fills take the on-fill text colour.</p>
-  <div class="spec-rows">
+  <div class="spec-rows" data-specimen>
     <div class="spec-row">plain row</div>
     <div class="spec-row" data-state="hover">hovered row</div>
     <div class="spec-row" data-state="focus-visible">focused row (ring only)</div>
@@ -77,7 +70,7 @@ const hex = (path: string) => (defaultTokens[path].value as { hex: string }).hex
 
 <div class="block" id={anchors.specimen("borders")}>
   <h4>Borders and radii</h4>
-  <div class="border-set">
+  <div class="border-set" data-specimen>
     <div class="border-box" style="border-color: var(--color-border-divider)">divider · decorative hairline between rows</div>
     <div class="border-box" style="border-color: var(--color-border-default)">default · decorative, never a control's only edge</div>
     <div class="border-box" style="border-color: var(--color-border-control)">control · every form control at rest (≥ 3:1)</div>
@@ -92,7 +85,7 @@ const hex = (path: string) => (defaultTokens[path].value as { hex: string }).hex
 <div class="block" id={anchors.specimen("status")}>
   <h4>Status set</h4>
   <p class="family-description">Each status has text, fill, tint and border roles and a mandatory glyph. The three extension hues (D-001) exist only here, in diagnostics, in diffs, in the opt-in <code>code.hued</code> syntax roles (D-030) and in the proposed overlay.</p>
-  <div class="status-set">
+  <div class="status-set" data-specimen>
     {statuses.map((s) => (
       <div class="status-card">
         <div class="status-text" style={`color: var(--color-status-${s}-text)`}>{glyph[s]} {s} text</div>
diff --git a/site/src/components/IssueDraft.astro b/site/src/components/IssueDraft.astro
index ac3811dcc..680ec4e4f 100644
--- a/site/src/components/IssueDraft.astro
+++ b/site/src/components/IssueDraft.astro
@@ -1,19 +1,30 @@
 ---
+import TextField from "./fields/TextField.astro";
+import Checkbox from "./fields/Checkbox.astro";
 import { anchorFor } from "../../../scripts/lib/anchors.mjs";
 import { issueSearchUrl, newIssueUrl } from "../lib/revision";
+
 const { id, context = null } = Astro.props;
 const key = (name: string) => anchorFor.workbench(id, `report-${name}`);
+const fields = [["expected", "Expected"], ["actual", "Actual"], ["steps", "Steps to reproduce"], ["evidence", "Evidence notes"]];
 ---
 <section data-issue-draft data-report-context={JSON.stringify(context)}>
   <h2>Prepare a public issue draft</h2>
   <p>Describe the problem and review the resulting draft. Entered specimen text, storage, screenshots, and unrelated URLs are not collected. No issue is submitted automatically.</p>
-  <p><a href={newIssueUrl(`${id}: describe the issue`)}>Open GitHub directly (also works without JavaScript)</a> · <a href={issueSearchUrl(`is:issue ${id}`)}>Search existing issues</a></p>
-  <form class="issue-draft js-only" data-issue-form>
-    {[["expected", "Expected"], ["actual", "Actual"], ["steps", "Steps to reproduce"], ["evidence", "Evidence notes"]].map(([name, label]) => <label for={key(name)}>{label}<textarea id={key(name)} name={name} maxlength="1600" rows="2"></textarea></label>)}
-    <button type="submit" class="btn">Prepare draft for review</button>
-    <label for={key("body")}>Public issue body<textarea id={key("body")} data-issue-body readonly rows="8"></textarea></label>
-    <label class="workbench-consent"><input type="checkbox" data-review-issue /> I reviewed this draft for public sharing</label>
-    <p><a class="btn" data-open-issue aria-disabled="true" target="_blank" rel="noopener noreferrer">Open GitHub composer</a> <button type="button" class="btn" data-copy-issue disabled>Copy draft</button> <button type="button" class="btn" data-cancel-issue>Clear draft</button></p>
+  <div class="site-actions">
+    <a class="link link-standalone" href={newIssueUrl(`${id}: describe the issue`)}>Open GitHub directly (also works without JavaScript)</a>
+    <a class="link link-standalone" href={issueSearchUrl(`is:issue ${id}`)}>Search existing issues</a>
+  </div>
+  <form class="site-form js-only" data-issue-form>
+    {fields.map(([name, label]) => <TextField id={key(name)} label={label} name={name} maxlength="1600" rows={2} />)}
+    <div class="site-actions"><button type="submit" class="button">Prepare draft for review</button></div>
+    <TextField id={key("body")} label="Public issue body" rows={8} data-issue-body readonly />
+    <Checkbox data-review-issue>I reviewed this draft for public sharing</Checkbox>
+    <div class="site-actions">
+      <a class="link link-standalone" data-open-issue aria-disabled="true" target="_blank" rel="noopener noreferrer">Open GitHub composer</a>
+      <button type="button" class="button button-secondary" data-copy-issue disabled>Copy draft</button>
+      <button type="button" class="button button-tertiary" data-cancel-issue>Clear draft</button>
+    </div>
     <p data-issue-status role="status"></p>
   </form>
 </section>
diff --git a/site/src/components/NonExamples.astro b/site/src/components/NonExamples.astro
index b367474b4..9003bb8eb 100644
--- a/site/src/components/NonExamples.astro
+++ b/site/src/components/NonExamples.astro
@@ -22,22 +22,102 @@ const onSelection = hexOf("color.interaction.selection.text")!;
 const status = (tone: string) => hexOf(`color.status.${tone}.border`)!;
 
 const items = [
-  { id: "pills", title: "Pills", rule: "Radius is 0 everywhere; buttons, chips, inputs and badges are square.", svg: `<rect x="8" y="14" width="120" height="32" rx="16" fill="${primary}"/><text x="68" y="35" text-anchor="middle" fill="${onAction}" font-size="12">Save</text>` },
-  { id: "glass", title: "Glass and blur", rule: "Surfaces are opaque warm blacks; no backdrop-filter, no translucent cards over content.", svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><text x="10" y="24" fill="${text}" font-size="11">content behind</text><rect x="20" y="10" width="110" height="44" fill="rgba(255,255,255,0.14)" stroke="rgba(255,255,255,0.4)"/>` },
-  { id: "gradients", title: "Gradients", rule: "Fills are flat tokens; no red-to-black buttons, gradient headers or gradient borders.", svg: `<defs><linearGradient id="g1"><stop offset="0" stop-color="#ff5a4f"/><stop offset="1" stop-color="#2a0000"/></linearGradient></defs><rect x="8" y="14" width="124" height="32" fill="url(#g1)"/><text x="70" y="35" text-anchor="middle" fill="#fff" font-size="12">Continue</text>` },
-  { id: "glow", title: "Glow instead of the ring", rule: "Focus is a 1px dashed ring at −2px; never a box-shadow halo, and elevation is a border, not a drop shadow.", svg: `<defs><filter id="f1"><feGaussianBlur stdDeviation="4"/></filter></defs><rect x="14" y="16" width="112" height="28" fill="${focus}" opacity="0.6" filter="url(#f1)"/><rect x="14" y="16" width="112" height="28" fill="${canvas}" stroke="${focus}"/><text x="70" y="35" text-anchor="middle" fill="${text}" font-size="12">focused</text>` },
-  { id: "everything-red", title: "Red on everything", rule: "Red marks interaction only: focus, selection, active borders, primary actions. Panels, body text and sidebars stay warm black and rose.", svg: `<rect x="0" y="0" width="140" height="60" fill="#8c1212"/><rect x="8" y="8" width="60" height="44" fill="#c81a1a"/><text x="76" y="24" fill="#ff8a80" font-size="10">red panel</text><text x="76" y="40" fill="#ff8a80" font-size="10">red text</text>` },
-  { id: "material", title: "Material redesign", rule: "No floating action buttons, ripples, floating labels or tonal elevation stacks. Modern means precise, not Material.", svg: `<rect x="8" y="8" width="90" height="30" fill="${raised}" stroke="${control}"/><text x="14" y="18" fill="${bright}" font-size="8">Label floating up</text><circle cx="118" cy="40" r="16" fill="${primary}"/><text x="118" y="45" text-anchor="middle" fill="#fff" font-size="16">+</text>` },
-  { id: "light", title: "Light mode", rule: "There is no light profile. White panels with dark text are a different theme.", svg: `<rect x="0" y="0" width="140" height="60" fill="#ffffff"/><rect x="8" y="8" width="124" height="20" fill="#f2f2f2" stroke="#ccc"/><text x="14" y="22" fill="#222" font-size="10">Settings</text><text x="14" y="46" fill="#444" font-size="10">dark on white</text>` },
-  { id: "rainbow", title: "Rainbow syntax in default", rule: "The reference syntax stays monochrome rose/red; the three bounded hues appear only through the opt-in code.hued roles (D-030) or the proposed extended overlay, and never purple, cyan or magenta.", svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><text x="8" y="22" font-size="11"><tspan fill="#c792ea">const</tspan> <tspan fill="#82aaff">x</tspan> <tspan fill="#89ddff">=</tspan> <tspan fill="#c3e88d">"s"</tspan><tspan fill="#89ddff">;</tspan></text><text x="8" y="44" font-size="11"><tspan fill="#ffcb6b">fn</tspan><tspan fill="#89ddff">(</tspan><tspan fill="#f78c6c">42</tspan><tspan fill="#89ddff">)</tspan></text>` },
-  { id: "traffic-light", title: "Colour-only status", rule: "Every status carries a glyph (✕ ! ✓ i ·) and a pattern; a coloured dot alone tells a colour-blind reader nothing.", svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><circle cx="24" cy="30" r="8" fill="${status("danger")}"/><circle cx="56" cy="30" r="8" fill="${status("warning")}"/><circle cx="88" cy="30" r="8" fill="${status("success")}"/><circle cx="120" cy="30" r="8" fill="${status("info")}"/>` },
-  { id: "sans", title: "Sans-serif chrome", rule: "One monospace family for chrome, reading and code; Inter or system-ui is another identity.", svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><text x="8" y="26" fill="${bright}" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" font-weight="600">Dashboard</text><text x="8" y="46" fill="${text}" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="11">Overview and settings</text>` },
-  { id: "inactive-text", title: `${inactive} as text`, rule: `The site's --inactive measures 1.86:1 on the canvas. It is a disabled border and rendered whitespace, never line numbers, comments or any text.`, svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><text x="8" y="22" fill="${inactive}" font-size="11">12  // a comment</text><text x="8" y="42" fill="${inactive}" font-size="11">13  return x;</text>` },
-  { id: "focus-as-selection", title: "Focus drawn as selection", rule: `Focus is a ring and selection is a fill. A focused row painted ${selection}, or a ${focus} ring on a ${selection} row (2.15:1), hides where the keyboard is.`, svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><rect x="8" y="10" width="124" height="18" fill="${selection}"/><text x="14" y="23" fill="${onSelection}" font-size="10">"focused" row</text><rect x="8" y="34" width="124" height="18" fill="${selection}" stroke="${focus}" stroke-dasharray="2 2"/><text x="14" y="47" fill="${onSelection}" font-size="10">selected + invisible ring</text>` },
-  { id: "heritage-ui", title: "Heritage ANSI as UI text", rule: `Slot 4 (${ansi4}) is a terminal colour, chosen for terminal programs. Directory names in a file browser use the text roles, not the terminal slots.`, svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><text x="8" y="22" fill="${ansi4}" font-size="11">assets/</text><text x="8" y="42" fill="${ansi4}" font-size="11">config/</text>` },
-  { id: "circles", title: "Circular avatars and spinners", rule: "A zero-radius system has square avatars and no circular spinner; loading is a static ⋯ glyph.", svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><circle cx="34" cy="30" r="18" fill="${raised}" stroke="${control}"/><text x="34" y="35" text-anchor="middle" fill="${bright}" font-size="12">JW</text><circle cx="100" cy="30" r="14" fill="none" stroke="${focus}" stroke-width="3" stroke-dasharray="40 30"/>` },
-  { id: "hairline-edge", title: "Hairline as the only edge", rule: `${hexOf("color.border.default")} is decorative (1.39:1). A form control needs color.border.control (${control}, 4.45:1) as its boundary.`, svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><rect x="8" y="16" width="124" height="28" fill="${canvas}" stroke="${hexOf("color.border.default")}"/><text x="14" y="34" fill="${hexOf("color.text.placeholder")}" font-size="11" font-style="italic">where is the box?</text>` },
-  { id: "opacity-disabled", title: "Disabled by opacity", rule: "opacity: .5 leaks the background and breaks contrast accounting; disabled uses text.disabled, border.disabled and the disabled fill.", svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><g opacity="0.45"><rect x="8" y="14" width="124" height="32" fill="${primary}"/><text x="70" y="35" text-anchor="middle" fill="${onAction}" font-size="12">Submit</text></g>` },
+  {
+    id: "pills",
+    title: "Pills",
+    rule: "Radius is 0 everywhere; buttons, chips, inputs and badges are square.",
+    svg: `<rect x="8" y="14" width="120" height="32" rx="16" fill="${primary}"/><text x="68" y="35" text-anchor="middle" fill="${onAction}" font-size="12">Save</text>`,
+  },
+  {
+    id: "glass",
+    title: "Glass and blur",
+    rule: "Surfaces are opaque warm blacks; no backdrop-filter, no translucent cards over content.",
+    svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><text x="10" y="24" fill="${text}" font-size="11">content behind</text><rect x="20" y="10" width="110" height="44" fill="rgba(255,255,255,0.14)" stroke="rgba(255,255,255,0.4)"/>`,
+  },
+  {
+    id: "gradients",
+    title: "Gradients",
+    rule: "Fills are flat tokens; no red-to-black buttons, gradient headers or gradient borders.",
+    svg: `<defs><linearGradient id="g1"><stop offset="0" stop-color="#ff5a4f"/><stop offset="1" stop-color="#2a0000"/></linearGradient></defs><rect x="8" y="14" width="124" height="32" fill="url(#g1)"/><text x="70" y="35" text-anchor="middle" fill="#fff" font-size="12">Continue</text>`,
+  },
+  {
+    id: "glow",
+    title: "Glow instead of the ring",
+    rule: "Focus is a 1px dashed ring at −2px; never a box-shadow halo, and elevation is a border, not a drop shadow.",
+    svg: `<defs><filter id="f1"><feGaussianBlur stdDeviation="4"/></filter></defs><rect x="14" y="16" width="112" height="28" fill="${focus}" opacity="0.6" filter="url(#f1)"/><rect x="14" y="16" width="112" height="28" fill="${canvas}" stroke="${focus}"/><text x="70" y="35" text-anchor="middle" fill="${text}" font-size="12">focused</text>`,
+  },
+  {
+    id: "everything-red",
+    title: "Red on everything",
+    rule: "Red marks interaction only: focus, selection, active borders, primary actions. Panels, body text and sidebars stay warm black and rose.",
+    svg: `<rect x="0" y="0" width="140" height="60" fill="#8c1212"/><rect x="8" y="8" width="60" height="44" fill="#c81a1a"/><text x="76" y="24" fill="#ff8a80" font-size="10">red panel</text><text x="76" y="40" fill="#ff8a80" font-size="10">red text</text>`,
+  },
+  {
+    id: "material",
+    title: "Material redesign",
+    rule: "No floating action buttons, ripples, floating labels or tonal elevation stacks. Modern means precise, not Material.",
+    svg: `<rect x="8" y="8" width="90" height="30" fill="${raised}" stroke="${control}"/><text x="14" y="18" fill="${bright}" font-size="8">Label floating up</text><circle cx="118" cy="40" r="16" fill="${primary}"/><text x="118" y="45" text-anchor="middle" fill="#fff" font-size="16">+</text>`,
+  },
+  {
+    id: "light",
+    title: "Light mode",
+    rule: "There is no light profile. White panels with dark text are a different theme.",
+    svg: `<rect x="0" y="0" width="140" height="60" fill="#ffffff"/><rect x="8" y="8" width="124" height="20" fill="#f2f2f2" stroke="#ccc"/><text x="14" y="22" fill="#222" font-size="10">Settings</text><text x="14" y="46" fill="#444" font-size="10">dark on white</text>`,
+  },
+  {
+    id: "rainbow",
+    title: "Rainbow syntax in default",
+    rule: "The reference syntax stays monochrome rose/red; the three bounded hues appear only through the opt-in code.hued roles (D-030) or the proposed extended overlay, and never purple, cyan or magenta.",
+    svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><text x="8" y="22" font-size="11"><tspan fill="#c792ea">const</tspan> <tspan fill="#82aaff">x</tspan> <tspan fill="#89ddff">=</tspan> <tspan fill="#c3e88d">"s"</tspan><tspan fill="#89ddff">;</tspan></text><text x="8" y="44" font-size="11"><tspan fill="#ffcb6b">fn</tspan><tspan fill="#89ddff">(</tspan><tspan fill="#f78c6c">42</tspan><tspan fill="#89ddff">)</tspan></text>`,
+  },
+  {
+    id: "traffic-light",
+    title: "Colour-only status",
+    rule: "Every status carries a glyph (✕ ! ✓ i ·) and a pattern; a coloured dot alone tells a colour-blind reader nothing.",
+    svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><circle cx="24" cy="30" r="8" fill="${status("danger")}"/><circle cx="56" cy="30" r="8" fill="${status("warning")}"/><circle cx="88" cy="30" r="8" fill="${status("success")}"/><circle cx="120" cy="30" r="8" fill="${status("info")}"/>`,
+  },
+  {
+    id: "sans",
+    title: "Sans-serif chrome",
+    rule: "One monospace family for chrome, reading and code; Inter or system-ui is another identity.",
+    svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><text x="8" y="26" fill="${bright}" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" font-weight="600">Dashboard</text><text x="8" y="46" fill="${text}" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="11">Overview and settings</text>`,
+  },
+  {
+    id: "inactive-text",
+    title: `${inactive} as text`,
+    rule: `The site's --inactive measures 1.86:1 on the canvas. It is a disabled border and rendered whitespace, never line numbers, comments or any text.`,
+    svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><text x="8" y="22" fill="${inactive}" font-size="11">12  // a comment</text><text x="8" y="42" fill="${inactive}" font-size="11">13  return x;</text>`,
+  },
+  {
+    id: "focus-as-selection",
+    title: "Focus drawn as selection",
+    rule: `Focus is a ring and selection is a fill. A focused row painted ${selection}, or a ${focus} ring on a ${selection} row (2.15:1), hides where the keyboard is.`,
+    svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><rect x="8" y="10" width="124" height="18" fill="${selection}"/><text x="14" y="23" fill="${onSelection}" font-size="10">"focused" row</text><rect x="8" y="34" width="124" height="18" fill="${selection}" stroke="${focus}" stroke-dasharray="2 2"/><text x="14" y="47" fill="${onSelection}" font-size="10">selected + invisible ring</text>`,
+  },
+  {
+    id: "heritage-ui",
+    title: "Heritage ANSI as UI text",
+    rule: `Slot 4 (${ansi4}) is a terminal colour, chosen for terminal programs. Directory names in a file browser use the text roles, not the terminal slots.`,
+    svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><text x="8" y="22" fill="${ansi4}" font-size="11">assets/</text><text x="8" y="42" fill="${ansi4}" font-size="11">config/</text>`,
+  },
+  {
+    id: "circles",
+    title: "Circular avatars and spinners",
+    rule: "A zero-radius system has square avatars and no circular spinner; loading is a static ⋯ glyph.",
+    svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><circle cx="34" cy="30" r="18" fill="${raised}" stroke="${control}"/><text x="34" y="35" text-anchor="middle" fill="${bright}" font-size="12">JW</text><circle cx="100" cy="30" r="14" fill="none" stroke="${focus}" stroke-width="3" stroke-dasharray="40 30"/>`,
+  },
+  {
+    id: "hairline-edge",
+    title: "Hairline as the only edge",
+    rule: `${hexOf("color.border.default")} is decorative (1.39:1). A form control needs color.border.control (${control}, 4.45:1) as its boundary.`,
+    svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><rect x="8" y="16" width="124" height="28" fill="${canvas}" stroke="${hexOf("color.border.default")}"/><text x="14" y="34" fill="${hexOf("color.text.placeholder")}" font-size="11" font-style="italic">where is the box?</text>`,
+  },
+  {
+    id: "opacity-disabled",
+    title: "Disabled by opacity",
+    rule: "opacity: .5 leaks the background and breaks contrast accounting; disabled uses text.disabled, border.disabled and the disabled fill.",
+    svg: `<rect x="0" y="0" width="140" height="60" fill="${canvas}"/><g opacity="0.45"><rect x="8" y="14" width="124" height="32" fill="${primary}"/><text x="70" y="35" text-anchor="middle" fill="${onAction}" font-size="12">Submit</text></g>`,
+  },
 ];
 ---
 
diff --git a/site/src/components/StateMatrix.astro b/site/src/components/StateMatrix.astro
index 98189023b..7d8f26726 100644
--- a/site/src/components/StateMatrix.astro
+++ b/site/src/components/StateMatrix.astro
@@ -5,6 +5,7 @@
    is live in the tab order; the others are aria-hidden with tabindex="-1"
    so keyboard users are not walked through dozens of copies. */
 
+import { anchorFor } from "../../../scripts/lib/anchors.mjs";
 import { renderSpecimenMarkup, stateAttributes } from "../../../scripts/lib/specimen-markup.mjs";
 
 interface Props {
@@ -19,7 +20,7 @@ const { id, states, variants, fragments, sizes } = Astro.props;
 
 ---
 
-<div class="block" id={`${id}-states`}>
+<div class={`block reference-matrix-${id}`} id={anchorFor.states(id)} data-specimen>
   <h4>State matrix</h4>
   <p class="family-description">Every declared state and combination, statically rendered; the default cell is live. Sizes: {sizes.join(", ")}<span class="js-only"> (switch with the density control above)</span>.</p>
   <div class="table-scroll" tabindex="0" role="region" aria-label="Scrollable table">
diff --git a/site/src/components/StressFixtures.astro b/site/src/components/StressFixtures.astro
index 4c44bb0be..204028e04 100644
--- a/site/src/components/StressFixtures.astro
+++ b/site/src/components/StressFixtures.astro
@@ -55,7 +55,7 @@ const cols = Array.from({ length: 12 }, (_, i) => `col${i + 1}`);
           {strings.map((s) => (
             <div lang={s.lang} dir={s.dir} class="fixture-cell">
               <div set:html={field(`fx-i18n-${s.lang}`, s.label, s.help, s.action)} />
-              <button type="button" class="btn">{s.action}</button>
+              <button type="button" class="button button-secondary">{s.action}</button>
             </div>
           ))}
         </div>
@@ -75,8 +75,8 @@ const cols = Array.from({ length: 12 }, (_, i) => `col${i + 1}`);
       )}
       {f.id === "FX-DENSITY" && (
         <div class="fixture-grid">
-          <div class="fixture-cell" data-density="compact"><span class="fixture-frame-label">compact</span><div set:html={field("fx-compact", "Inner gap", "24px control.", "14")} /><button type="button" class="btn">Apply</button></div>
-          <div class="fixture-cell" data-density="comfortable"><span class="fixture-frame-label">comfortable</span><div set:html={field("fx-comfortable", "Inner gap", "32px control.", "14")} /><button type="button" class="btn">Apply</button></div>
+          <div class="fixture-cell" data-density="compact"><span class="fixture-frame-label">compact</span><div set:html={field("fx-compact", "Inner gap", "24px control.", "14")} /><button type="button" class="button button-secondary">Apply</button></div>
+          <div class="fixture-cell" data-density="comfortable"><span class="fixture-frame-label">comfortable</span><div set:html={field("fx-comfortable", "Inner gap", "32px control.", "14")} /><button type="button" class="button button-secondary">Apply</button></div>
         </div>
       )}
       {f.id === "FX-OVERFLOW" && (
diff --git a/site/src/components/Swatch.astro b/site/src/components/Swatch.astro
deleted file mode 100644
index 4ab9240aa..000000000
--- a/site/src/components/Swatch.astro
+++ /dev/null
@@ -1,24 +0,0 @@
----
-/* A colour chip plus its path and value, linkable by token anchor. */
-import { anchors, cssVar, defaultTokens } from "../lib/theme";
-
-interface Props {
-  path: string;
-  showPath?: boolean;
-}
-
-const { path, showPath = true } = Astro.props;
-const token = defaultTokens[path];
-const isColor = token?.type === "color";
----
-
-{token && (
-  <span class="copy-target">
-
-    {showPath && <code data-token={path}>{path}</code>}
-    <code class="value">{token.css}</code>
-    <button type="button" class="copy-button js-only" data-copy={token.css} aria-label={`Copy ${token.css}`}>copy</button>
-  </span>
-)}
-{!token && <code>{path} (unresolved)</code>}
-<span hidden id={anchors.token(path)}></span>
diff --git a/site/src/components/Toc.astro b/site/src/components/Toc.astro
index 8cb1bbd8d..929251ae2 100644
--- a/site/src/components/Toc.astro
+++ b/site/src/components/Toc.astro
@@ -17,21 +17,21 @@ const { docs, families, extra } = Astro.props;
     <summary>Contents</summary>
     <ol>
       {docs.map((d) => (
-        <li><a href={`#${anchors.doc(d.id)}`}>{d.title}</a></li>
+        <li><a class="sidebar-nav-link toc-link" href={`#${anchors.doc(d.id)}`}>{d.title}</a></li>
       ))}
       {families.map((f) => (
         <li>
           <div class="toc-family">{f.title}</div>
-          <a href={`#${anchors.family(f.id)}`}>{f.title}</a>
+          <a class="sidebar-nav-link toc-link" href={`#${anchors.family(f.id)}`}>{f.title}</a>
           <ol>
             {f.components.map((c) => (
-              <li><a href={`#${anchors.component(c.id)}`} data-toc-component={c.id}>{c.name}</a></li>
+              <li><a class="sidebar-nav-link toc-link" href={`#${anchors.component(c.id)}`} data-toc-component={c.id}>{c.name}</a></li>
             ))}
           </ol>
         </li>
       ))}
       {extra.map((e) => (
-        <li><a href={`#${e.id}`}>{e.title}</a></li>
+        <li><a class="sidebar-nav-link toc-link" href={`#${e.id}`}>{e.title}</a></li>
       ))}
     </ol>
   </details>
diff --git a/site/src/components/TokenTable.astro b/site/src/components/TokenTable.astro
index 87b777033..3d6a0b854 100644
--- a/site/src/components/TokenTable.astro
+++ b/site/src/components/TokenTable.astro
@@ -1,66 +1,39 @@
 ---
-/* Every token under a prefix, with swatches, per-profile values and status. */
-import { anchors, cssVar, profiles, tokensInGroup } from "../lib/theme";
-import Eligibility from "./Eligibility.astro";
+/* Compact default-profile roles on the hub; other profiles live on /tokens/. */
+import { anchors, cssVar, tokensInGroup } from "../lib/theme";
+import { withBase } from "../lib/base";
 import { tokenUrl } from "../lib/usage";
+import Eligibility from "./Eligibility.astro";
 
-interface Props {
-  prefix: string;
-  title: string;
-  id?: string;
-  grid?: boolean;
-}
-
+interface Props { prefix: string; title: string; id?: string; grid?: boolean }
 const { prefix, title, id, grid = false } = Astro.props;
 const rows = tokensInGroup(prefix);
-const profileIds = Object.keys(profiles);
+const primitives = prefix === "color.primitive.";
 ---
-
 <div class="block" id={id ?? anchors.token(prefix.replace(/\.$/, ""))}>
   <h4>{title}</h4>
-  {grid ? (
+  {primitives ? <p class="primitive-index">{rows.map(([path]) => <a class="link" id={anchors.token(path)} data-legacy-target href={withBase(`tokens/#${anchors.token(path)}`)}><code>{path.replace(prefix, "")}</code></a>)}</p> : grid ? (
     <div class="swatch-grid">
-      {rows.map(([path, token]) => (
-        <div class="swatch-row" id={anchors.token(path)}>
-          <div class="paint" style={token.type === "color" ? `background: var(${cssVar(path)})` : ""} aria-hidden="true"></div>
-          <div class="label">
-            <a href={tokenUrl(path)} data-token={path}><code>{path.replace(prefix, "")}</code></a>
-            <span class="copy-target"><span class="value">{token.css}</span><button type="button" class="copy-button js-only" data-copy={token.css} aria-label={`Copy ${path}`}>copy</button></span>
-            <Eligibility token={token} />
-            {token.description && <span class="value"> — {token.description}</span>}
-          </div>
+      {rows.map(([path, token]) => <div class="swatch-row" id={anchors.token(path)}>
+        <div class="paint" style={token.type === "color" ? `background: var(${cssVar(path)})` : ""} aria-hidden="true"></div>
+        <div class="label">
+          <a href={tokenUrl(path)} data-token={path}><code>{path.replace(prefix, "")}</code></a>{" "}
+          <span class="copy-target"><span class="value">{token.css}</span><button type="button" class="button button-tertiary js-only" data-copy={token.css} aria-label={`Copy ${path}`}>Copy</button></span>
+          <code class="value">{cssVar(path)}</code>
+          <Eligibility token={token} />
         </div>
-      ))}
+      </div>)}
     </div>
   ) : (
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Scrollable table">
-      <table class="spec-table token-table profile-token-table">
-        <colgroup>
-          <col class="token-path-column" />
-          {profileIds.map(() => <col class="token-profile-column" />)}
-          <col class="token-use-column" />
-        </colgroup>
-        <thead>
-          <tr>
-            <th scope="col">Token</th>
-            {profileIds.map((p) => <th scope="col">{p}</th>)}
-            <th scope="col">Use</th>
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map(([path, token]) => (
-            <tr id={anchors.token(path)}>
-              <td>
-
-                <a href={tokenUrl(path)} data-token={path}><code>{path}</code></a>
-              </td>
-              {profileIds.map((p) => (
-                <td><span class="copy-target"><code>{profiles[p].tokens[path]?.css ?? "—"}</code>{profiles[p].tokens[path] && <button type="button" class="copy-button js-only" data-copy={profiles[p].tokens[path].css} aria-label={`Copy ${path} (${p})`}>copy</button>}</span><Eligibility token={profiles[p].tokens[path]} /></td>
-              ))}
-              <td>{token.description}</td>
-            </tr>
-          ))}
-        </tbody>
+    <div class="table-scroll" tabindex="0" role="region" aria-label={`${title} roles`}>
+      <table class="spec-table token-table compact-token-table">
+        <thead><tr><th scope="col">Role</th><th scope="col">CSS variable</th><th scope="col">Default value</th><th scope="col">Status / eligibility</th></tr></thead>
+        <tbody>{rows.map(([path, token]) => <tr id={anchors.token(path)}>
+          <td><a href={tokenUrl(path)} data-token={path}><code>{path}</code></a></td>
+          <td><code>{cssVar(path)}</code></td>
+          <td><code>{token.css}</code></td>
+          <td><Eligibility token={token} /></td>
+        </tr>)}</tbody>
       </table>
     </div>
   )}
diff --git a/site/src/components/Workbench.astro b/site/src/components/Workbench.astro
index 8b55c7151..44434d78d 100644
--- a/site/src/components/Workbench.astro
+++ b/site/src/components/Workbench.astro
@@ -1,5 +1,8 @@
 ---
 import IssueDraft from "./IssueDraft.astro";
+import SelectField from "./fields/SelectField.astro";
+import TextField from "./fields/TextField.astro";
+import Checkbox from "./fields/Checkbox.astro";
 import { anchorFor } from "../../../scripts/lib/anchors.mjs";
 import { renderSpecimenMarkup, stateAttributes } from "../../../scripts/lib/specimen-markup.mjs";
 import { withBase } from "../lib/base";
@@ -11,40 +14,56 @@ const key = (name: string) => anchorFor.workbench(c.id, name);
 const colors = Object.entries(data.tokens.default).filter(([, token]: any) => token.type === "color").map(([path]) => path);
 ---
 <section class="workbench" data-workbench data-workbench-data={JSON.stringify(metadata)} data-preview-url={withBase(`preview/${c.id}/`)}>
-  <p><a href={`${withBase("")}#${anchorFor.component(c.id)}`}>Component specification</a> · <a href={withBase(`preview/${c.id}/`)} data-open-preview>Open isolated preview</a></p>
+  <div class="site-actions">
+    <a class="link link-standalone" href={`${withBase(`components/${c.id}/`)}#${anchorFor.component(c.id)}`}>Component specification</a>
+    <a class="link link-standalone" href={withBase(`preview/${c.id}/`)} data-open-preview>Open isolated preview</a>
+  </div>
   <p>Controls use maintained specimens. A forced focus ring is a visual simulation; it does not move keyboard focus. Profile previews keep their published approval status. Sample text stays in this page unless explicitly included in a shared link.</p>
   <p data-revision-status role="status">{data.revision ? `Actual build: ${data.revision}` : "Actual build: local and unpinned."} Source snapshot: <code>{data.sourceDigest}</code></p>
-  <p><a href={withBase(`exports/components/${c.id}.json`)}>Machine contract</a> · <a href={newIssueUrl(`${c.id}: describe the issue`)}>Report an issue without JavaScript</a></p>
-  <div class="workbench-fallback"><h2>Canonical specimen</h2><div data-density="compact" data-profile="default" set:html={renderSpecimenMarkup(fragments.default, `workbench-static-${c.id}`)} /><p>JavaScript adds the controls below; the complete specification and this specimen remain available without it.</p></div>
-  <form class="workbench-controls js-only" data-workbench-controls>
-    <label for={key("variant")}>Variant<select id={key("variant")} name="variant">{c.variants.map((v: any) => <option value={v.id}>{v.name}</option>)}</select></label>
-    <label for={key("state")}>Initial state<select id={key("state")} name="state">{c.states.map((state: string) => <option value={state}>{state}</option>)}</select></label>
-    <label for={key("density")}>Density<select id={key("density")} name="density">{c.sizes.map((size: string) => <option value={size}>{size}</option>)}</select></label>
-    <label for={key("profile")}>Profile<select id={key("profile")} name="profile">{data.profiles.map((profile: any) => <option value={profile.id}>{profile.id} — {profile.status}</option>)}</select></label>
-    <label for={key("direction")}>Direction<select id={key("direction")} name="direction"><option value="ltr">Left to right</option><option value="rtl">Right to left</option></select></label>
-    <label for={key("fixture")}>Text fixture<select id={key("fixture")} name="fixture"><option value="canonical">Canonical</option><option value="en">English</option><option value="es">Spanish</option><option value="zh">Chinese</option><option value="ar">Arabic</option><option value="long">Long label</option></select></label>
-    <label for={key("label")}>{data.bindings.labelName}<input id={key("label")} name="label" maxlength="256" placeholder="Canonical fixture text" autocomplete="off" /></label>
-    {data.bindings.help && <label for={key("help")}>Help / description<input id={key("help")} name="help" maxlength="512" placeholder="Canonical fixture text" autocomplete="off" /></label>}
-    <label for={key("preset")}>Viewport preset<select id={key("preset")} data-width-preset><option value="320">320 px</option><option value="360">360 px</option><option value="640" selected>640 px</option><option value="1280">Wide — 1280 px</option><option value="custom">Custom</option></select></label>
-    <label for={key("width")}>Viewport width (CSS px)<input id={key("width")} name="width" type="number" min="320" max="1280" step="1" value="640" required /></label>
-    <label for={key("motion")}>Motion preference<select id={key("motion")} name="motion"><option value="system">System preference</option><option value="reduced">Reduced motion</option></select></label>
-    <label for={key("part")}>Inspect anatomy part<select id={key("part")} name="part"><option value="">No overlay</option>{c.anatomy.map((item: any) => <option value={item.part}>{item.part}</option>)}</select></label>
-    <button type="button" class="btn" data-workbench-reset>Reset specimen</button>
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase(`exports/components/${c.id}.json`)}>Machine contract</a>
+    <a class="link link-standalone" href={newIssueUrl(`${c.id}: describe the issue`)}>Report an issue without JavaScript</a>
+  </div>
+  <div class="workbench-fallback">
+    <h2>Canonical specimen</h2>
+    <div data-density="compact" data-profile="default" set:html={renderSpecimenMarkup(fragments.default, `workbench-static-${c.id}`)} />
+    <p>JavaScript adds the controls below; the complete specification and this specimen remain available without it.</p>
+  </div>
+  <form class="site-filters js-only" data-workbench-controls>
+    <SelectField id={key("variant")} label="Variant" name="variant">{c.variants.map((v: any) => <option value={v.id}>{v.name}</option>)}</SelectField>
+    <SelectField id={key("state")} label="Initial state" name="state">{c.states.map((state: string) => <option value={state}>{state}</option>)}</SelectField>
+    <SelectField id={key("density")} label="Density" name="density">{c.sizes.map((size: string) => <option value={size}>{size}</option>)}</SelectField>
+    <SelectField id={key("profile")} label="Profile" name="profile">{data.profiles.map((profile: any) => <option value={profile.id}>{profile.id} — {profile.status}</option>)}</SelectField>
+    <SelectField id={key("direction")} label="Direction" name="direction"><option value="ltr">Left to right</option><option value="rtl">Right to left</option></SelectField>
+    <SelectField id={key("fixture")} label="Text fixture" name="fixture">
+      <option value="canonical">Canonical</option><option value="en">English</option><option value="es">Spanish</option>
+      <option value="zh">Chinese</option><option value="ar">Arabic</option><option value="long">Long label</option>
+    </SelectField>
+    <TextField id={key("label")} label={data.bindings.labelName} name="label" maxlength="256" placeholder="Canonical fixture text" autocomplete="off" />
+    {data.bindings.help && <TextField id={key("help")} label="Help / description" name="help" maxlength="512" placeholder="Canonical fixture text" autocomplete="off" />}
+    <SelectField id={key("preset")} label="Viewport preset" data-width-preset>
+      <option value="320">320 px</option><option value="360">360 px</option><option value="640" selected>640 px</option>
+      <option value="1280">Wide — 1280 px</option><option value="custom">Custom</option>
+    </SelectField>
+    <TextField id={key("width")} label="Viewport width (CSS px)" name="width" type="number" min="320" max="1280" step="1" value="640" required />
+    <SelectField id={key("motion")} label="Motion preference" name="motion"><option value="system">System preference</option><option value="reduced">Reduced motion</option></SelectField>
+    <SelectField id={key("part")} label="Inspect anatomy part" name="part"><option value="">No overlay</option>{c.anatomy.map((item: any) => <option value={item.part}>{item.part}</option>)}</SelectField>
+    <button type="button" class="button button-secondary" data-workbench-reset>Reset specimen</button>
   </form>
   <p data-workbench-status role="status"></p>
   <div class="js-only workbench-live">
     <h2>Live specimen</h2>
     <p>The iframe has its own viewport. Wide previews scroll inside this inspection region. Resizing is not browser zoom, device emulation, or an accessibility pass. Initial configuration is reproducible; subsequent interactions are temporary.</p>
-    <label class="workbench-consent"><input type="checkbox" data-compare-enabled /> Compare the same specimen in another environment</label>
+    <Checkbox data-compare-enabled>Compare the same specimen in another environment</Checkbox>
     <div class="viewport-grid" data-viewport-grid><div>
     <div class="viewport-scroll" tabindex="0" role="region" aria-label="Scrollable preview viewport"><iframe title={`${c.name} isolated specimen`} data-workbench-frame loading="lazy" width="640" height="560"></iframe></div>
     <p data-viewport-report role="status"></p></div>
     <div data-comparison hidden>
-      <div class="workbench-controls">
-        <label for={key("compare-width")}>Comparison width<select id={key("compare-width")} data-compare-width><option value="320">320 px</option><option value="360">360 px</option><option value="640" selected>640 px</option><option value="1280">1280 px</option></select></label>
-        <label for={key("compare-density")}>Comparison density<select id={key("compare-density")} data-compare-density><option value="compact">Compact</option><option value="comfortable">Comfortable</option></select></label>
-        <label for={key("compare-direction")}>Comparison direction<select id={key("compare-direction")} data-compare-direction><option value="ltr">Left to right</option><option value="rtl">Right to left</option></select></label>
-        <label for={key("compare-motion")}>Comparison motion<select id={key("compare-motion")} data-compare-motion><option value="reduced">Reduced</option><option value="system">System preference</option></select></label>
+      <div class="site-filters">
+        <SelectField id={key("compare-width")} label="Comparison width" data-compare-width><option value="320">320 px</option><option value="360">360 px</option><option value="640" selected>640 px</option><option value="1280">1280 px</option></SelectField>
+        <SelectField id={key("compare-density")} label="Comparison density" data-compare-density><option value="compact">Compact</option><option value="comfortable">Comfortable</option></SelectField>
+        <SelectField id={key("compare-direction")} label="Comparison direction" data-compare-direction><option value="ltr">Left to right</option><option value="rtl">Right to left</option></SelectField>
+        <SelectField id={key("compare-motion")} label="Comparison motion" data-compare-motion><option value="reduced">Reduced</option><option value="system">System preference</option></SelectField>
       </div>
       <div class="viewport-scroll" tabindex="0" role="region" aria-label="Scrollable comparison viewport"><iframe title={`${c.name} comparison specimen`} data-comparison-frame loading="lazy" width="640" height="560"></iframe></div>
       <p data-comparison-report role="status"></p>
@@ -53,30 +72,52 @@ const colors = Object.entries(data.tokens.default).filter(([, token]: any) => to
     </div>
     <h2>Anatomy and measurements</h2>
     <p data-part-description>Select a documented part. The overlay does not capture input or change layout.</p>
-    <div class="table-scroll" tabindex="0" role="region" aria-label="Anatomy measurements"><table class="spec-table"><thead><tr><th>Metric / mapping</th><th>Declared role</th><th>Resolved value</th><th>Measured value / result</th></tr></thead><tbody data-measurements></tbody></table></div>
+    <div class="table-scroll" tabindex="0" role="region" aria-label="Anatomy measurements">
+      <table class="table">
+        <thead><tr><th class="table-header" scope="col">Metric / mapping</th><th class="table-header" scope="col">Declared role</th><th class="table-header" scope="col">Resolved value</th><th class="table-header" scope="col">Measured value / result</th></tr></thead>
+        <tbody class="table-body" data-measurements></tbody>
+      </table>
+    </div>
     <h2>Contrast lab</h2>
     <p>Uses the specification’s contrast engine. Choose a context explicitly; a ratio does not establish semantic suitability or overall accessibility. Large text means at least 18.66px bold or 24px regular. Alpha requires the selected opaque underlay.</p>
-    <form class="workbench-controls" data-contrast-controls>
-      <label for={key("pair")}>Declared pair<select id={key("pair")} name="pair"><option value="custom">Custom comparison</option>{c.contrast.map((pair: any, i: number) => <option value={i} selected={i === 0}>{pair.label}</option>)}</select></label>
-      <label for={key("fg")}>Foreground role<select id={key("fg")} name="fg">{colors.map((path) => <option value={path}>{path}</option>)}</select></label>
-      <label for={key("bg")}>Background role<select id={key("bg")} name="bg">{colors.map((path) => <option value={path}>{path}</option>)}</select></label>
-      <label for={key("underlay")}>Opaque underlay<select id={key("underlay")} name="underlay">{colors.filter((path) => (data.tokens.default[path].value.alpha ?? 1) === 1).map((path) => <option value={path} selected={path === "color.surface.default"}>{path}</option>)}</select></label>
-      <label for={key("context")}>Threshold context<select id={key("context")} name="context"><option value="declared">Declared pair threshold</option><option value="text">Normal text — 4.5:1</option><option value="large">Large text — 3:1</option><option value="ui">UI boundary — 3:1</option></select></label>
+    <form class="site-filters" data-contrast-controls>
+      <SelectField id={key("pair")} label="Declared pair" name="pair"><option value="custom">Custom comparison</option>{c.contrast.map((pair: any, i: number) => <option value={i} selected={i === 0}>{pair.label}</option>)}</SelectField>
+      <SelectField id={key("fg")} label="Foreground role" name="fg">{colors.map((path) => <option value={path}>{path}</option>)}</SelectField>
+      <SelectField id={key("bg")} label="Background role" name="bg">{colors.map((path) => <option value={path}>{path}</option>)}</SelectField>
+      <SelectField id={key("underlay")} label="Opaque underlay" name="underlay">{colors.filter((path) => (data.tokens.default[path].value.alpha ?? 1) === 1).map((path) => <option value={path} selected={path === "color.surface.default"}>{path}</option>)}</SelectField>
+      <SelectField id={key("context")} label="Threshold context" name="context"><option value="declared">Declared pair threshold</option><option value="text">Normal text — 4.5:1</option><option value="large">Large text — 3:1</option><option value="ui">UI boundary — 3:1</option></SelectField>
     </form>
     <div data-contrast-result role="status"></div>
-    <label for={key("contrast-copy")}>Contrast result with build context<textarea id={key("contrast-copy")} data-contrast-copy readonly rows="4"></textarea></label>
-    <button type="button" class="btn" data-copy-contrast>Copy contrast result</button>
+    <TextField id={key("contrast-copy")} label="Contrast result with build context" rows={4} data-contrast-copy readonly />
+    <div class="site-actions"><button type="button" class="button button-secondary" data-copy-contrast>Copy contrast result</button></div>
     <h2>Motion inspection</h2>
     <p>{data.bindings.motion ? "Replay the maintained hover background transition. Inspection speed is explicitly slowed to one quarter; system reduced motion always wins. Playback stops when the workbench is hidden." : "This specimen has no replayable maintained transition here. Dialog opacity is specified for capable hosts, but this reference does not add an opening animation. The loading glyph remains static."}</p>
     <p data-motion-report></p>
-    {data.bindings.motion && <p><button type="button" class="btn" data-replay="normal">Replay at normal speed</button> <button type="button" class="btn" data-replay="slow">Replay at ¼ speed</button> <button type="button" class="btn" data-replay="stop">Stop playback</button> <button type="button" class="btn" data-compare-reduced>Compare normal and reduced outcomes</button></p>}
+    {data.bindings.motion && <div class="site-actions">
+      <button type="button" class="button button-secondary" data-replay="normal">Replay at normal speed</button>
+      <button type="button" class="button button-secondary" data-replay="slow">Replay at ¼ speed</button>
+      <button type="button" class="button button-secondary" data-replay="stop">Stop playback</button>
+      <button type="button" class="button button-secondary" data-compare-reduced>Compare normal and reduced outcomes</button>
+    </div>}
     <h2>Share this configuration</h2>
-    <label class="workbench-consent"><input type="checkbox" data-include-text /> Include entered label and help text in the displayed share payload</label>
-    <label for={key("share-payload")}>Review structured payload<textarea id={key("share-payload")} data-share-payload readonly rows="5"></textarea></label>
-    <label for={key("share-link")}>Preview link<input id={key("share-link")} data-share-link readonly /></label>
-    <p><button type="button" class="btn" data-copy-config>Copy configuration</button> <button type="button" class="btn" data-copy-link>Copy preview link</button></p>
+    <Checkbox data-include-text>Include entered label and help text in the displayed share payload</Checkbox>
+    <TextField id={key("share-payload")} label="Review structured payload" rows={5} data-share-payload readonly />
+    <TextField id={key("share-link")} label="Preview link" data-share-link readonly />
+    <div class="site-actions">
+      <button type="button" class="button button-secondary" data-copy-config>Copy configuration</button>
+      <button type="button" class="button button-secondary" data-copy-link>Copy preview link</button>
+    </div>
     <IssueDraft id={c.id} />
   </div>
-  {data.bindings.motion && <div class="motion-static"><h2>Static motion endpoints</h2><p>Default and documented hover backgrounds, available without JavaScript. Property: {data.motion.property}; duration: {data.tokens.default[data.motion.role].css} from {data.motion.role}; easing: {data.motion.easing}. Reduced motion uses instant endpoints.</p><div class="motion-specimens">{["default", "hover"].map((state) => <div class="table-scroll" tabindex="0" role="region" aria-label={`${state} motion endpoint`}><h3>{state}</h3><div aria-hidden="true" set:html={`<div ${stateAttributes(state)}>${renderSpecimenMarkup(fragments.default, `motion-${c.id}-${state}`, { state, inert: true })}</div>`} /></div>)}</div></div>}
+  {data.bindings.motion && <div class="motion-static">
+    <h2>Static motion endpoints</h2>
+    <p>Default and documented hover backgrounds, available without JavaScript. Property: {data.motion.property}; duration: {data.tokens.default[data.motion.role].css} from {data.motion.role}; easing: {data.motion.easing}. Reduced motion uses instant endpoints.</p>
+    <div class="motion-specimens">
+      {["default", "hover"].map((state) => <div class="table-scroll" tabindex="0" role="region" aria-label={`${state} motion endpoint`}>
+        <h3>{state}</h3>
+        <div aria-hidden="true" data-specimen set:html={`<div ${stateAttributes(state)}>${renderSpecimenMarkup(fragments.default, `motion-${c.id}-${state}`, { state, inert: true })}</div>`} />
+      </div>)}
+    </div>
+  </div>}
 </section>
 <script>import "../scripts/workbench";</script>
diff --git a/site/src/components/fields/Checkbox.astro b/site/src/components/fields/Checkbox.astro
new file mode 100644
index 000000000..e2a09172a
--- /dev/null
+++ b/site/src/components/fields/Checkbox.astro
@@ -0,0 +1,24 @@
+---
+/* One canonical checkbox (spec/components/checkbox.md). The label is the
+   slot; extra attributes go to the input. `option` renders the bare option
+   for a checkbox group, without the field wrapper. */
+import "../../styles/components/checkbox.css";
+
+interface Props {
+  option?: boolean;
+  [attribute: string]: unknown;
+}
+
+const { option = false, class: className, ...attributes } = Astro.props;
+const Wrapper = option ? Fragment : "div";
+const wrapper = option ? {} : { class: ["checkbox", className].filter(Boolean).join(" ") };
+---
+<Wrapper {...wrapper}>
+  <label class="checkbox-option">
+    <span class="checkbox-control">
+      <input class="checkbox-input" type="checkbox" {...attributes} />
+      <svg class="checkbox-check" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M3.5 8.5l3 3 6-6" /></svg>
+    </span>
+    <span class="checkbox-text"><slot /></span>
+  </label>
+</Wrapper>
diff --git a/site/src/components/fields/SelectField.astro b/site/src/components/fields/SelectField.astro
new file mode 100644
index 000000000..d4764a64c
--- /dev/null
+++ b/site/src/components/fields/SelectField.astro
@@ -0,0 +1,23 @@
+---
+/* Canonical select markup (spec/components/select.md). Options are the slot;
+   extra attributes go to the native select, which the choice enhancement
+   renders (D-025). */
+import "../../styles/components/select.css";
+interface Props {
+  id: string;
+  label: string;
+  help?: string;
+  [attribute: string]: unknown;
+}
+
+const { id, label, help, class: className, ...attributes } = Astro.props;
+const describedBy = help ? `${id}-help` : undefined;
+---
+<div class:list={["select", className]}>
+  <label class="select-label" for={id}>{label}</label>
+  <div class="select-root">
+    <select class="select-control" id={id} aria-describedby={describedBy} {...attributes}><slot /></select>
+    <svg class="select-chevron" aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 6.5l4 4 4-4" /></svg>
+  </div>
+  {help && <p class="select-help" id={describedBy}>{help}</p>}
+</div>
diff --git a/site/src/components/fields/TextField.astro b/site/src/components/fields/TextField.astro
new file mode 100644
index 000000000..e2d7a6ff0
--- /dev/null
+++ b/site/src/components/fields/TextField.astro
@@ -0,0 +1,27 @@
+---
+/* Canonical text-field markup (spec/components/text-field.md); a textarea
+   when `rows` is given (spec/components/textarea.md). Extra attributes go to
+   the control. */
+import "../../styles/components/text-field.css";
+import "../../styles/components/textarea.css";
+interface Props {
+  id: string;
+  label: string;
+  help?: string;
+  rows?: number;
+  [attribute: string]: unknown;
+}
+
+const { id, label, help, rows, class: className, ...attributes } = Astro.props;
+const kind = rows ? "textarea" : "text-field";
+const describedBy = help ? `${id}-help` : undefined;
+---
+<div class:list={[kind, className]}>
+  <label class={`${kind}-label`} for={id}>{label}</label>
+  <div class={`${kind}-root`}>
+    {rows
+      ? <textarea class="textarea-input" id={id} rows={rows} aria-describedby={describedBy} {...attributes}></textarea>
+      : <input class="text-field-input" id={id} aria-describedby={describedBy} {...attributes} />}
+  </div>
+  {help && <p class={`${kind}-help`} id={describedBy}>{help}</p>}
+</div>
diff --git a/site/src/layouts/PortalLayout.astro b/site/src/layouts/PortalLayout.astro
deleted file mode 100644
index fff2a1d1c..000000000
--- a/site/src/layouts/PortalLayout.astro
+++ /dev/null
@@ -1,53 +0,0 @@
----
-import "../styles/tokens.generated.css";
-import "../styles/base.css";
-import "../styles/hex-swatches.css";
-import "../styles/portal.css";
-import "@j3w1/ui/styles/select.css";
-import "@j3w1/ui/styles/controls.css";
-import { withBase } from "../lib/base";
-import { theme } from "../lib/theme";
-import { anchorFor } from "../../../scripts/lib/anchors.mjs";
-const { title, description, density = "compact" } = Astro.props;
-const navigation = [["", "Overview"], ["foundations/", "Foundations"], ["components/", "Components"], ["patterns/", "Patterns"], ["tokens/", "Tokens"], ["tools/", "Tools"], ["implement/", "Implement"], ["agents/", "For agents"], ["ports/", "Ports"], ["releases/", "Releases"]];
-const commands = [...navigation, ["demo/", "Vue application demo"], ["reference/", "Complete UI theme specification"]];
-const id = (name) => anchorFor.uiExample("portal", name);
----
-<!doctype html>
-<html lang="en" data-density={density}>
-  <head>
-    <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="color-scheme" content="dark" /><meta name="description" content={description} />
-    <title>{title} · j3w1 UI Theme Spec</title>
-    <meta property="og:title" content={`${title} · j3w1 UI Theme Spec`} /><meta property="og:description" content={description} /><meta property="og:url" content={new URL(Astro.url.pathname, Astro.site).href} /><meta property="og:type" content="website" />
-    <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site).href} />
-    <link rel="icon" href={withBase("favicon.svg")} type="image/svg+xml" />
-    <link rel="alternate" type="text/plain" href={withBase("llms.txt")} title="Agent entry points" />
-    <link rel="stylesheet" href={withBase("ui/styles/command-palette.css")} /><slot name="head" />
-  </head>
-  <body>
-    <a class="skip-link" href="#main">Skip to content</a>
-    <div class="portal-shell">
-      <aside class="portal-sidebar" aria-label="Design system navigation">
-        <a class="portal-wordmark" href={withBase("")}>j3w1<span> / theme</span></a>
-        <p class="portal-eyebrow">UI THEME SPEC / {theme.version}</p>
-        <nav>{navigation.map(([path, label], index) => <a href={withBase(path)} aria-current={Astro.url.pathname === withBase(path) ? "page" : undefined}><span aria-hidden="true">{String(index + 1).padStart(2, "0")}</span>{label}</a>)}</nav>
-        <div class="portal-sidebar-foot"><span class="portal-eyebrow">TRUE BLACK / ROSE</span><a href={withBase("demo/")}>Open Vue demo ↗</a><a href={withBase("reference/")}>Full specification →</a><a href="https://github.com/j3w1/theme">Source on GitHub ↗</a></div>
-      </aside>
-      <div class="portal-workspace">
-        <header class="portal-topline"><span>j3w1 / {title}</span><span>Vue · HTML · React · Astro</span></header>
-        <main id="main" class="portal-main"><header class="portal-intro"><p class="portal-eyebrow">J3W1 / DESIGN SYSTEM</p><h1>{title}</h1><p>{description}</p></header><slot /></main>
-        <footer class="portal-footer">One versioned specification. Native semantics. Complete source.<br />Code MIT · Specimens and prose CC BY 4.0 · <a href={withBase("agents/")}>Machine-readable entry points</a></footer>
-      </div>
-    </div>
-    <j3w1-command-palette shortcut class="portal-command" data-search-index={withBase("search.json")}>
-      <div class="command-palette"><button class="command-palette-control portal-command-trigger" type="button" data-open aria-label="Search the design system">⌘ <kbd>Ctrl K</kbd></button>
-        <dialog class="command-palette-dialog" aria-labelledby={id("command-title")}><h2 id={id("command-title")}>j3w1 / command</h2><label for={id("query")}>Find a destination</label><input class="command-palette-control" id={id("query")} type="search" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls={id("results")} autocomplete="off" placeholder="> type a command" />
-          <ul id={id("results")} role="listbox" aria-label="Destinations">{commands.map(([path, label]) => <li role="option" data-action={withBase(path)}><span class="portal-command-category">{path === "demo/" ? "DEMO" : "SPEC"} </span><span class="portal-command-label">{label}</span></li>)}</ul><p role="status" data-command-status></p><button class="command-palette-control" type="button" data-close>Close · Esc</button>
-        </dialog>
-      </div>
-    </j3w1-command-palette>
-    <script type="module" is:inline src={withBase("ui/register/command-palette.js")}></script>
-    <script>import { initCopy } from "../scripts/copy"; import "../scripts/portal-search"; import { enhanceControls } from '@j3w1/ui/enhance/choice'; document.documentElement.classList.add("js"); initCopy(); enhanceControls(document.body);</script>
-  </body>
-</html>
diff --git a/site/src/layouts/SiteLayout.astro b/site/src/layouts/SiteLayout.astro
new file mode 100644
index 000000000..09a830571
--- /dev/null
+++ b/site/src/layouts/SiteLayout.astro
@@ -0,0 +1,211 @@
+---
+/* The one site shell (docs/ui-architecture.md, "Site chrome"): built from the
+   components the site documents, at the default compact density (D-038).
+   The rail is the canonical sidebar-nav at 240px; below 900px it becomes the
+   canonical drawer. Without JavaScript the rail stays in the page above the
+   content. */
+import "../styles/tokens.generated.css";
+import "@j3w1/ui/styles/controls.css";
+import "../styles/base.css";
+import "../styles/hex-swatches.css";
+import "../styles/components/button.css";
+import "../styles/components/link.css";
+import "../styles/components/skip-link.css";
+import "../styles/components/sidebar-nav.css";
+import "../styles/components/breadcrumbs.css";
+import "../styles/components/card.css";
+import "../styles/components/table.css";
+import "../styles/chrome.css";
+import "../styles/site.css";
+import "../styles/print.css";
+import { withBase } from "../lib/base";
+import { theme } from "../lib/theme";
+import { usageRevision } from "../lib/revision";
+import { anchorFor } from "../../../scripts/lib/anchors.mjs";
+
+interface Props {
+  title: string;
+  description: string;
+  hero?: boolean;
+  breadcrumbs?: boolean;
+  revision?: boolean;
+}
+
+const { title, description, hero = false, breadcrumbs = true, revision = false } = Astro.props;
+
+/* 16px line icons: 1.5px stroke, currentColor, no fill (spec/foundations.md, Icons). */
+const icons = {
+  overview: "M2.5 2.5h11v11h-11zM2.5 6.5h11",
+  foundations: "M2.5 10.5h11v3h-11zM4.5 6.5h7v4h-7zM6.5 2.5h3v4h-3z",
+  components: "M2.5 2.5h4.5v4.5h-4.5zM9 2.5h4.5v4.5H9zM2.5 9h4.5v4.5h-4.5zM9 9h4.5v4.5H9z",
+  patterns: "M2.5 2.5h6v6h-6zM7.5 7.5h6v6h-6z",
+  tokens: "M8 2.5a5.5 5.5 0 1 0 0 11a5.5 5.5 0 1 0 0-11zM8 2.5v11",
+  tools: "M2.5 4.5h11M2.5 11.5h11M5.5 2.5v4M10.5 9.5v4",
+  implement: "M6 4L2.5 8L6 12M10 4l3.5 4L10 12",
+  agents: "M2.5 4.5L6 8l-3.5 3.5M8 12h5.5",
+  ports: "M3 8h10M9 4l4 4l-4 4",
+  releases: "M8 2.5a5.5 5.5 0 1 0 0 11a5.5 5.5 0 1 0 0-11zM8 5v3l2 2",
+  reference: "M3 2.5h10v11H3zM6 2.5v11M8 5.5h3M8 8h3",
+  workbench: "M2.5 3h11v7.5h-11zM5.5 13.5h5M8 10.5v3",
+  builder: "M2.5 3h11v3.5h-11zM2.5 9.5h11V13h-11z",
+  kit: "M2.5 5.5L8 2.5l5.5 3v5L8 13.5l-5.5-3zM2.5 5.5L8 8.5l5.5-3M8 8.5v5",
+  recipes: "M3.5 2.5h7l2 2v9h-9zM5.5 7h5M5.5 9.5h5M5.5 12h3",
+  figma: "M2.5 5.5h4v5h-4zM9.5 5.5h4v5h-4zM6.5 8h3",
+  report: "M3.5 13.5v-11M3.5 3h8l-2 2.5l2 2.5h-8",
+};
+
+type Entry = { path: string; label: string; icon?: keyof typeof icons; children?: Entry[] };
+const navigation: Entry[] = [
+  { path: "", label: "Overview", icon: "overview" },
+  { path: "foundations/", label: "Foundations", icon: "foundations" },
+  { path: "components/", label: "Components", icon: "components" },
+  { path: "patterns/", label: "Patterns", icon: "patterns" },
+  { path: "tokens/", label: "Tokens", icon: "tokens" },
+  { path: "tools/", label: "Tools", icon: "tools", children: [
+    { path: "workbench/", icon: "workbench", label: "Workbench" },
+    { path: "builder/", icon: "builder", label: "Form builder" },
+    { path: "kit/", icon: "kit", label: "Task kit" },
+    { path: "recipes/", icon: "recipes", label: "Recipes" },
+    { path: "figma/", icon: "figma", label: "Figma bridge" },
+    { path: "report/", icon: "report", label: "Report an issue" },
+  ] },
+  { path: "implement/", label: "Implement", icon: "implement" },
+  { path: "agents/", label: "For agents", icon: "agents" },
+  { path: "ports/", label: "Ports", icon: "ports" },
+  { path: "releases/", label: "Releases", icon: "releases" },
+  { path: "reference/", label: "Specification", icon: "reference" },
+];
+
+const here = Astro.url.pathname.slice(withBase("").length);
+const flat = navigation.flatMap((entry) => [{ ...entry, parent: null as Entry | null }, ...(entry.children ?? []).map((child) => ({ ...child, parent: entry }))]);
+const section = flat.filter((entry) => entry.path && here.startsWith(entry.path)).sort((a, b) => b.path.length - a.path.length)[0];
+const trail = section ? [section.parent, section].filter((entry): entry is Entry => !!entry && entry.path !== here) : [];
+const crumbs = breadcrumbs && here ? [{ path: "", label: "Overview" }, ...trail] : [];
+const open = (entry: Entry) => !!entry.children?.some((child) => here.startsWith(child.path)) || here.startsWith(entry.path) && !!entry.children;
+const current = (path: string): "page" | "true" | undefined => path === here ? "page" : path && (here.startsWith(path) || navigation.find((entry) => entry.path === path)?.children?.some((child) => here.startsWith(child.path))) ? "true" : undefined;
+
+const commands = [...flat.map(({ path, label }) => [path, label]), ["demo/", "Vue application demo"]];
+const id = (name: string) => anchorFor.uiExample("portal", name);
+const canonical = new URL(Astro.url.pathname, Astro.site).href;
+---
+<!doctype html>
+<html lang="en" data-density="compact">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark" />
+    <meta name="description" content={description} />
+    <title>{title} · j3w1 UI Theme Spec</title>
+    <meta property="og:title" content={`${title} · j3w1 UI Theme Spec`} />
+    <meta property="og:description" content={description} />
+    <meta property="og:url" content={canonical} />
+    <meta property="og:type" content="website" />
+    <link rel="canonical" href={canonical} />
+    <link rel="icon" href={withBase("favicon.svg")} type="image/svg+xml" />
+    <link rel="alternate" type="text/plain" href={withBase("llms.txt")} title="Agent entry points" />
+    <link rel="stylesheet" href={withBase("ui/styles/command-palette.css")} />
+    <link rel="stylesheet" href={withBase("ui/styles/drawer.css")} />
+    <script is:inline>document.documentElement.classList.add("js");</script>
+    <slot name="head" />
+  </head>
+  <body>
+    <a class="skip-link" href="#main">Skip to content</a>
+    <header class="site-topbar">
+      <j3w1-drawer class="site-menu">
+        <button class="button button-tertiary" type="button" data-open aria-label="Open navigation">
+          <svg class="button-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11" /></svg>
+          <span class="button-label">Menu</span>
+        </button>
+        <dialog class="drawer drawer-start" aria-labelledby={id("menu-title")}>
+          <div class="drawer-header">
+            <h2 class="drawer-title" id={id("menu-title")}>j3w1 / theme</h2>
+            <button class="drawer-close" type="button" aria-label="Close">✕</button>
+          </div>
+          <nav class="drawer-body" aria-label="Site menu">
+            <ul class="drawer-list">
+              {flat.map((entry) => <li class="drawer-item"><a class="drawer-link" href={withBase(entry.path)} aria-current={current(entry.path)}>{entry.parent ? `${entry.parent.label} / ${entry.label}` : entry.label}</a></li>)}
+            </ul>
+          </nav>
+        </dialog>
+      </j3w1-drawer>
+      <a class="site-wordmark" href={withBase("")}>j3w1<span> / theme</span></a>
+      <span class="site-version">{theme.version}</span>
+      <j3w1-command-palette shortcut class="site-command" data-search-index={withBase("search.json")}>
+        <div class="command-palette">
+          <button class="button button-secondary" type="button" data-open aria-label="Search the design system">
+            <svg class="button-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M7 2.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 1 0 0-9zM10.5 10.5l3 3" /></svg>
+            <span class="button-label">Search</span>
+            <kbd>Ctrl K</kbd>
+          </button>
+          <dialog class="command-palette-dialog" aria-labelledby={id("command-title")}>
+            <h2 id={id("command-title")}>j3w1 / command</h2>
+            <label for={id("query")}>Find a destination</label>
+            <input class="command-palette-control" id={id("query")} type="search" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls={id("results")} autocomplete="off" placeholder="> type a command" />
+            <ul id={id("results")} role="listbox" aria-label="Destinations">
+              {commands.map(([path, label]) => <li role="option" data-action={withBase(path)}><span class="site-command-category">{path === "demo/" ? "DEMO" : "SPEC"} </span><span class="site-command-label">{label}</span></li>)}
+            </ul>
+            <p role="status" data-command-status></p>
+            <button class="command-palette-control" type="button" data-close>Close · Esc</button>
+          </dialog>
+        </div>
+      </j3w1-command-palette>
+    </header>
+    <div class="site-frame">
+      <nav class="sidebar-nav site-rail" aria-label="Site">
+        <ul class="sidebar-nav-list">
+          {navigation.map((entry) => <li class="sidebar-nav-item">
+            <a class="sidebar-nav-link" title={entry.label} href={withBase(entry.path)} aria-current={current(entry.path)}>
+              <span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><path d={icons[entry.icon!]} /></svg></span>
+              <span class="sidebar-nav-label">{entry.label}</span>
+            </a>
+            {entry.children && open(entry) && <ul class="sidebar-nav-list sidebar-nav-sublist">
+              {entry.children.map((child) => <li class="sidebar-nav-item"><a class="sidebar-nav-link" title={child.label} href={withBase(child.path)} aria-current={current(child.path)}><span class="sidebar-nav-icon" aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16" focusable="false"><path d={icons[child.icon ?? "tools"]} /></svg></span><span class="sidebar-nav-label">{child.label}</span></a></li>)}
+            </ul>}
+          </li>)}
+        </ul>
+      </nav>
+      <div class="site-column">
+        <main id="main" class="site-main">
+          {crumbs.length > 0 && <nav class="breadcrumbs" aria-label="Breadcrumb">
+            <ol class="breadcrumbs-list">
+              {crumbs.map((crumb) => <li class="breadcrumbs-item"><a class="breadcrumbs-link" href={withBase(crumb.path)}>{crumb.label}</a><span class="breadcrumbs-separator" aria-hidden="true">/</span></li>)}
+              <li class="breadcrumbs-item"><a class="breadcrumbs-link" href={Astro.url.pathname} aria-current="page">{title}</a></li>
+            </ol>
+          </nav>}
+          <header class:list={["site-intro", { "site-hero": hero }]}>
+            <h1>{title}</h1>
+            <p>{description}</p>
+            {revision && <p class="site-stamp">{usageRevision ? <>Source revision <code>{usageRevision}</code></> : "Local build: source locations are relative to this checkout; no published revision is claimed."}</p>}
+          </header>
+          <slot />
+        </main>
+        <footer class="site-footer">
+          <p>One versioned specification. Native semantics. Complete source. Code MIT · specimens and prose CC BY 4.0.</p>
+          <p>
+            <a class="link" href={withBase("reference/")}>Complete specification</a> ·
+            <a class="link" href={withBase("agents/")}>Machine-readable entry points</a> ·
+            <a class="link" href={withBase("demo/")}>Vue demo</a> ·
+            <a class="link" href="https://github.com/j3w1/theme">Source on GitHub ↗</a>
+          </p>
+        </footer>
+      </div>
+    </div>
+    <script type="module" is:inline src={withBase("ui/register/drawer.js")}></script>
+    <script type="module" is:inline src={withBase("ui/register/command-palette.js")}></script>
+    <div class="inspector" id="inspector" role="dialog" aria-label="Token inspector" data-inspector-source={withBase("tokens/inspector.json")} hidden></div>
+    <script>
+      import { initInspector } from "../scripts/inspector";
+      import { enhanceControls } from "@j3w1/ui/enhance/choice";
+      import { initCopy } from "../scripts/copy";
+      import "../scripts/portal-search";
+      initCopy();
+      initInspector();
+      /* Native state specimens must keep the exact maintained markup. */
+      const main = document.querySelector<HTMLElement>("main")!;
+      if (main.querySelector(".matrix")) {
+        const controls = main.querySelector<HTMLElement>("#controls");
+        if (controls) enhanceControls(controls);
+      } else enhanceControls(main);
+    </script>
+  </body>
+</html>
diff --git a/site/src/layouts/SpecLayout.astro b/site/src/layouts/SpecLayout.astro
deleted file mode 100644
index ddf94ad2c..000000000
--- a/site/src/layouts/SpecLayout.astro
+++ /dev/null
@@ -1,72 +0,0 @@
----
-import { buildCommit } from "../lib/revision";
-import "../styles/tokens.generated.css";
-import "../styles/base.css";
-import "../styles/site.css";
-import "../styles/hex-swatches.css";
-import "../styles/print.css";
-import "../styles/workbench.css";
-import "@j3w1/ui/styles/controls.css";
-/* Reference CSS for every specified component; the glob is a side-effect import. */
-import.meta.glob("../styles/components/*.css", { eager: true });
-import { tokenColorIndex } from "../../../scripts/lib/hex-literals.mjs";
-import { withBase } from "../lib/base";
-import { theme, defaultTokens, profiles, defaultProfileId } from "../lib/theme";
-
-interface Props {
-  title: string;
-  description: string;
-}
-
-const { title, description } = Astro.props;
-const canonical = new URL(Astro.url.pathname, Astro.site).href;
-const inspectorData = Object.fromEntries(
-  Object.entries(profiles).map(([id, p]) => [
-    id,
-    Object.fromEntries(Object.entries(p.tokens).map(([path, t]) => [path, [t.css, t.aliasOf ?? "", t.status, t.description ?? "", t.eligibility, t.deprecated]])),
-  ]),
-);
----
-
-<!doctype html>
-<html lang="en" data-density="compact">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{title}</title>
-    <meta name="description" content={description} />
-    <meta name="color-scheme" content="dark" />
-    <meta name="theme-color" content={(defaultTokens["color.surface.canvas"].value as { hex: string }).hex} />
-    <link rel="canonical" href={canonical} />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:url" content={canonical} />
-    <meta property="og:type" content="website" />
-    <link rel="icon" href={withBase("favicon.svg")} type="image/svg+xml" />
-    <link rel="alternate" type="text/markdown" href={withBase("exports/theme.compact.md")} title="Compact specification for agents" />
-    <script is:inline>
-      /* Restore the viewer's density and profile before first paint; both are
-         page preferences namespaced under j3w1-theme:*. Never throws. */
-      (function () {
-        try {
-          document.documentElement.classList.add("js");
-          var d = localStorage.getItem("j3w1-theme:density");
-          if (d === "compact" || d === "comfortable") document.documentElement.setAttribute("data-density", d);
-          var p = localStorage.getItem("j3w1-theme:profile");
-          if (p) document.documentElement.setAttribute("data-demo-profile", p);
-        } catch (e) {}
-      })();
-    </script>
-  </head>
-  <body>
-    <a class="skip-link" href="#main">Skip to content</a>
-    <div class="page">
-      <slot />
-    </div>
-    <div class="inspector" id="inspector" role="dialog" aria-label="Token inspector" hidden></div>
-    <script type="application/json" id="j3w1-tokens" set:html={JSON.stringify({ defaultProfile: defaultProfileId, version: theme.version, buildCommit, profiles: inspectorData, colorIndex: tokenColorIndex(profiles) })} />
-    <script>
-      import "../scripts/main";
-    </script>
-  </body>
-</html>
diff --git a/site/src/layouts/ToolLayout.astro b/site/src/layouts/ToolLayout.astro
deleted file mode 100644
index 557f45a09..000000000
--- a/site/src/layouts/ToolLayout.astro
+++ /dev/null
@@ -1,20 +0,0 @@
----
-import "../styles/tokens.generated.css";
-import "../styles/base.css";
-import "../styles/site.css";
-import "../styles/hex-swatches.css";
-import "../styles/print.css";
-import "../styles/tools.css";
-import PortalLayout from "./PortalLayout.astro";
-import { withBase } from "../lib/base";
-import { usageRevision } from "../lib/usage";
-const { title, description } = Astro.props;
----
-<PortalLayout title={title} description={description} density="compact">
-    <header class="tool-header">
-      <nav aria-label="Theme tools"><a href={withBase("reference/")}>Specification</a> · <a href={withBase("tokens/")}>Token usage</a> · <a href={withBase("recipes/")}>Recipes</a> · <a href={withBase("kit/")}>Task kit</a> · <a href={withBase("workbench/")}>Workbench</a> · <a href={withBase("releases/")}>Release comparison</a></nav>
-      <p class="stamp">{usageRevision ? <>Source revision <code>{usageRevision}</code></> : "Local build: source locations are relative to this checkout; no published revision is claimed."}</p>
-    </header>
-    <div class="tool-main"><slot /></div>
-    <footer class="tool-main"><a href={withBase("ports/")}>Port capabilities and mapping evidence</a> · <a href={withBase("patterns/validation-recovery/")}>Validation and recovery</a> · <a href={withBase("builder/")}>Form builder</a> · <a href={withBase("figma/")}>Figma Variables bridge</a></footer>
-</PortalLayout>
diff --git a/site/src/lib/base.ts b/site/src/lib/base.ts
index c667e184c..74f3064a5 100644
--- a/site/src/lib/base.ts
+++ b/site/src/lib/base.ts
@@ -5,5 +5,3 @@
 export const BASE = import.meta.env.BASE_URL.replace(/\/?$/, "/");
 
 export const withBase = (path: string): string => `${BASE}${path.replace(/^\//, "")}`;
-
-export const anchor = (id: string): string => `#${id}`;
diff --git a/site/src/lib/theme.ts b/site/src/lib/theme.ts
index cace35052..02172f8e5 100644
--- a/site/src/lib/theme.ts
+++ b/site/src/lib/theme.ts
@@ -1,6 +1,7 @@
 /* Typed access to the manifest and the committed exports. The page renders
    exports, not raw tokens, so what people read is what agents fetch. */
 
+import { hexOf as tokenHex } from "../../../scripts/lib/color.mjs";
 import manifest from "../../../theme.json";
 import resolved from "../../../exports/tokens.resolved.json";
 import contrast from "../../../exports/contrast.json";
@@ -36,14 +37,8 @@ export const anchors = anchorFor;
 export const tokensInGroup = (prefix: string): [string, ResolvedToken][] =>
   Object.entries(defaultTokens).filter(([path]) => path.startsWith(prefix));
 
-export const cssVar = (path: string): string => `--${path.replaceAll(".", "-")}`;
-
-export const isColor = (token: ResolvedToken): boolean => token.type === "color";
+export { cssVar } from "../../../scripts/lib/tokens.mjs";
 
 export const hexOf = (path: string): string | null => {
-  const token = defaultTokens[path];
-  return token && token.type === "color" ? (token.value as { hex: string }).hex : null;
+  return tokenHex(defaultTokens[path]);
 };
-
-export const valuePerProfile = (path: string): { profile: string; css: string; status: string }[] =>
-  Object.entries(profiles).map(([id, p]) => ({ profile: id, css: p.tokens[path]?.css ?? "—", status: p.status }));
diff --git a/site/src/pages/404.astro b/site/src/pages/404.astro
index 40f7ed708..2380650b5 100644
--- a/site/src/pages/404.astro
+++ b/site/src/pages/404.astro
@@ -1,12 +1,7 @@
 ---
-import SpecLayout from "../layouts/SpecLayout.astro";
+import SiteLayout from "../layouts/SiteLayout.astro";
 import { withBase } from "../lib/base";
 ---
-
-<SpecLayout title="Not found — j3w1 UI Theme Spec" description="The page you asked for is not part of the j3w1 UI Theme Spec.">
-  <header class="site-header">
-    <h1>Not found</h1>
-    <p class="lede">Start from <a href={withBase("")}>the overview</a>, or open <a href={withBase("reference/")}>the complete reference</a> and use its contents to find a component by anchor.</p>
-  </header>
-  <main id="main"></main>
-</SpecLayout>
+<SiteLayout title="Not found" description="The page you asked for is not part of the j3w1 UI Theme Spec." breadcrumbs={false}>
+  <p>Start from <a class="link" href={withBase("")}>the overview</a>, search with <kbd>Ctrl K</kbd>, or open <a class="link" href={withBase("reference/")}>the complete reference</a> and use its contents to find a component by anchor.</p>
+</SiteLayout>
diff --git a/site/src/pages/agents/index.astro b/site/src/pages/agents/index.astro
index 6ad848736..156e42b4e 100644
--- a/site/src/pages/agents/index.astro
+++ b/site/src/pages/agents/index.astro
@@ -1,27 +1,80 @@
 ---
-import PortalLayout from "../../layouts/PortalLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import SelectField from "../../components/fields/SelectField.astro";
 import { withBase } from "../../lib/base";
 import { theme } from "../../lib/theme";
+import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
 import index from "../../../../packages/ui/dist/index.json";
+
 const command = `j3w1-ui kit --components text-field,button,dialog --out ./vendor/j3w1/task`;
+const key = (name: string) => anchorFor.uiExample("agent-kit", name);
+const entryPoints = [
+  ["Small discovery request", "ui/index.json", true],
+  ["One implementation/API", "ui/contracts/<id>.json", false],
+  ["Maintained native markup", "ui/examples/<id>.json", false],
+  ["Complete copy files and digests", "ui/copy/<id>/manifest.json", false],
+  ["Canonical meaning and eligibility", "exports/components/<id>.json", false],
+  ["All implementation metadata", "ui/manifest.json", true],
+] as const;
 ---
-<PortalLayout title="Build with an agent" description="Give your agent a pinned contract and a complete implementation. The primary workflow is discovering, consuming and verifying exact j3w1 artifacts inside another application.">
-  <div class="portal-actions"><a class="portal-primary" href={withBase("ui/index.json")}>Compact implementation index</a><a href={withBase("llms.txt")}>llms.txt</a><a href={withBase("agents/consume.md")}>Canonical consumption contract</a></div>
-  <section class="portal-panel portal-section" data-agent-kit data-version={theme.version}>
+<SiteLayout title="Build with an agent" description="Give your agent a pinned contract and a complete implementation. The primary workflow is discovering, consuming and verifying exact j3w1 artifacts inside another application.">
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase("ui/index.json")}>Compact implementation index</a>
+    <a class="link link-standalone" href={withBase("llms.txt")}>llms.txt</a>
+    <a class="link link-standalone" href={withBase("agents/consume.md")}>Canonical consumption contract</a>
+  </div>
+  <section class="site-section" data-agent-kit data-version={theme.version}>
     <h2>Prepare an agent kit</h2>
     <p>Select the components your task needs. The installed CLI includes their complete dependency closure, canonical contracts, eligibility disclosures and shared rules.</p>
-    <form data-kit-form>
-      <div class="portal-actions"><label>Framework <select name="framework"><option value="vue">Vue</option><option value="html">HTML</option><option value="react">React</option><option value="astro">Astro</option><option value="native">Native host</option></select></label><label>Consumption mode <select name="mode"><option value="package">Package</option><option value="copy">Copy source</option><option value="mapping">Map to a host</option></select></label></div>
-      <label>Components <select name="components" multiple size="8" required>{index.components.map(({ id, name }) => <option value={id} selected={["text-field", "button", "dialog"].includes(id)}>{name} · {id}</option>)}</select></label>
-      <p>Click an entry to toggle it. Use arrow keys to move, Space to select, Shift with arrows for a range, or Ctrl/Command+A to select all. The list uses j3w1 selection colors.</p>
-      <div class="portal-actions"><button type="submit">Prepare command</button><button type="button" data-copy-kit>Copy command</button></div>
+    <form class="site-form" data-kit-form>
+      <div class="site-filters">
+        <SelectField id={key("framework")} label="Framework" name="framework">
+          <option value="vue">Vue</option><option value="html">HTML</option><option value="react">React</option><option value="astro">Astro</option><option value="native">Native host</option>
+        </SelectField>
+        <SelectField id={key("mode")} label="Consumption mode" name="mode">
+          <option value="package">Package</option><option value="copy">Copy source</option><option value="mapping">Map to a host</option>
+        </SelectField>
+      </div>
+      <SelectField id={key("components")} label="Components" name="components" multiple size="8" required help="Click an entry to toggle it. Use arrow keys to move, Space to select, Shift with arrows for a range, or Ctrl/Command+A to select all.">
+        {index.components.map(({ id, name }) => <option value={id} selected={["text-field", "button", "dialog"].includes(id)}>{name} · {id}</option>)}
+      </SelectField>
+      <div class="site-actions">
+        <button class="button" type="submit">Prepare command</button>
+        <button class="button button-secondary" type="button" data-copy-kit>Copy command</button>
+      </div>
     </form>
-    <pre class="portal-code"><code data-kit-command>{command}</code></pre><p role="status" data-kit-status></p>
+    <pre class="site-code"><code data-kit-command>{command}</code></pre>
+    <p role="status" data-kit-status></p>
     <noscript><p>Use the example command above and replace its component IDs. All canonical instructions remain available below.</p></noscript>
   </section>
-  <section class="portal-prose"><h2>A bounded consumption workflow</h2><ol><li>Pin one release, currently <code>{theme.version}</code>, and record the artifact digest.</li><li>Read the canonical consumption contract and compact implementation index.</li><li>Select component IDs. Read only their canonical JSON, implementation contract and maintained examples, plus shared accessibility and eligibility rules.</li><li>Prefer package mode in compatible web apps. Use complete copy bundles when source ownership is needed. Use the existing mapping workflow for incompatible/native hosts.</li><li>Integrate the native markup, CSS and registration closure; bind your application data and actions.</li><li>Verify your real form, keyboard, focus and lifecycle behavior. Record actual results separately from implementation availability.</li></ol>
-  <h2>Prepare a copy task</h2><pre class="portal-code"><code>{command}</code></pre><p>Use the installed binary from the exact package or release tarball. The output contains all selected component closures and refuses to overwrite application files. <a href={withBase("implement/")}>Full installation and framework guide →</a></p>
-  <h2>Machine entry points</h2><div class="portal-table-wrap"><table class="portal-table"><thead><tr><th>Need</th><th>Artifact</th></tr></thead><tbody><tr><td>Small discovery request</td><td><a href={withBase("ui/index.json")}>ui/index.json</a></td></tr><tr><td>One implementation/API</td><td><code>ui/contracts/&lt;id&gt;.json</code></td></tr><tr><td>Maintained native markup</td><td><code>ui/examples/&lt;id&gt;.json</code></td></tr><tr><td>Complete copy files and digests</td><td><code>ui/copy/&lt;id&gt;/manifest.json</code></td></tr><tr><td>Canonical meaning and eligibility</td><td><code>exports/components/&lt;id&gt;.json</code></td></tr><tr><td>All implementation metadata</td><td><a href={withBase("ui/manifest.json")}>ui/manifest.json</a></td></tr></tbody></table></div>
-  <p class="portal-note">Site URLs help humans explore the current release. For reproducible agent fetches, use the matching immutable release tag and its published digests. Never combine current-site examples with a different installed version.</p><h2>Mapping compatibility</h2><p>The existing <a href={withBase("kit/")}>canonical task kit</a>, lock format and portability disclosures remain available. An official package dependency is recorded alongside that integration evidence; it does not pretend to be a newly verified native port.</p></section>
-</PortalLayout>
+  <section class="site-prose">
+    <h2>A bounded consumption workflow</h2>
+    <ol>
+      <li>Pin one release, currently <code>{theme.version}</code>, and record the artifact digest.</li>
+      <li>Read the canonical consumption contract and compact implementation index.</li>
+      <li>Select component IDs. Read only their canonical JSON, implementation contract and maintained examples, plus shared accessibility and eligibility rules.</li>
+      <li>Prefer package mode in compatible web apps. Use complete copy bundles when source ownership is needed. Use the existing mapping workflow for incompatible/native hosts.</li>
+      <li>Integrate the native markup, CSS and registration closure; bind your application data and actions.</li>
+      <li>Verify your real form, keyboard, focus and lifecycle behavior. Record actual results separately from implementation availability.</li>
+    </ol>
+    <h2>Prepare a copy task</h2>
+    <pre class="site-code"><code>{command}</code></pre>
+    <p>Use the installed binary from the exact package or release tarball. The output contains all selected component closures and refuses to overwrite application files. <a class="link" href={withBase("implement/")}>Full installation and framework guide →</a></p>
+    <h2>Machine entry points</h2>
+    <div class="site-table-wrap">
+      <table class="table">
+        <thead><tr><th class="table-header" scope="col">Need</th><th class="table-header" scope="col">Artifact</th></tr></thead>
+        <tbody class="table-body">
+          {entryPoints.map(([need, path, linked]) => <tr class="table-row">
+            <td class="table-cell">{need}</td>
+            <td class="table-cell">{linked ? <a class="link" href={withBase(path)}>{path}</a> : <code>{path}</code>}</td>
+          </tr>)}
+        </tbody>
+      </table>
+    </div>
+    <p class="site-note">Site URLs help humans explore the current release. For reproducible agent fetches, use the matching immutable release tag and its published digests. Never combine current-site examples with a different installed version.</p>
+    <h2>Mapping compatibility</h2>
+    <p>The existing <a class="link" href={withBase("kit/")}>canonical task kit</a>, lock format and portability disclosures remain available. An official package dependency is recorded alongside that integration evidence; it does not pretend to be a newly verified native port.</p>
+  </section>
+</SiteLayout>
 <script>import "../../scripts/agent-kit";</script>
diff --git a/site/src/pages/builder/index.astro b/site/src/pages/builder/index.astro
index 107ad0255..075e1a00f 100644
--- a/site/src/pages/builder/index.astro
+++ b/site/src/pages/builder/index.astro
@@ -1,5 +1,5 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import { builderMarkup } from "../../../../packages/ui/src/examples/form-markup.mjs";
 import templateExport from "../../../../exports/forms/templates.json";
 import "../../styles/form-tools.css";
@@ -8,13 +8,28 @@ import { withBase } from "../../lib/base";
 import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
 import { renderFields } from "../../../../scripts/lib/form-fields.mjs";
 const templates = templateExport.templates;
-const sampleFields = ["text", "textarea", "select", "checkbox", "radio"].map(type => ({ id: type, type, label: `Example ${type}`, help: "Static canonical field; no submission.", required: false, options: ["select", "radio"].includes(type) ? [{ id: "one", label: "First option" }, { id: "two", label: "Second option" }] : [] }));
+const sampleFields = ["text", "textarea", "select", "checkbox", "radio"].map((type) => ({
+  id: type,
+  type,
+  label: `Example ${type}`,
+  help: "Static canonical field; no submission.",
+  required: false,
+  options: ["select", "radio"].includes(type) ? [{ id: "one", label: "First option" }, { id: "two", label: "Second option" }] : [],
+}));
 ---
-<ToolLayout title="Reference form builder" description="Compose five canonical field kinds, try a local preview, and transfer a bounded JSON definition.">
+<SiteLayout title="Reference form builder" description="Compose five canonical field kinds, try a local preview, and transfer a bounded JSON definition." revision>
   <p>Draft reference under proposed D-021. Definitions stay in memory. Import validates every field and the theme content identity before replacing your form. Definition changes clear preview values and errors; Download definition excludes entered values.</p>
-  <p><a href={withBase("reference/#" + anchorFor.component("form-builder"))}>Component contract</a> · <a href={withBase("patterns/validation-recovery/")}>Validation and recovery</a> · <a href={withBase("exports/forms/identity.json")}>Required theme content identity</a></p>
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase("reference/#" + anchorFor.component("form-builder"))}>Component contract</a>
+    <a class="link link-standalone" href={withBase("patterns/validation-recovery/")}>Validation and recovery</a>
+    <a class="link link-standalone" href={withBase("exports/forms/identity.json")}>Required theme content identity</a>
+  </div>
   <div set:html={builderMarkup("builder")} />
-  <section aria-label="Static builder reference"><h2>Without JavaScript</h2><p>The editor requires JavaScript. The definition format and representative fields remain readable here. A text field has a stable ID, label, help and required flag. A select or radio field also has stable option IDs and labels. Checkboxes hold a boolean preview value. No preview values belong in an exported definition.</p><p><a href={withBase("exports/components/form-builder.json")}>Download the static component contract</a>. Existing text-field, textarea, select, checkbox and radio-group rules remain authoritative. This is not a production backend or native port.</p></section>
+  <section class="site-section" aria-label="Static builder reference">
+    <h2>Without JavaScript</h2>
+    <p>The editor requires JavaScript. The definition format and representative fields remain readable here. A text field has a stable ID, label, help and required flag. A select or radio field also has stable option IDs and labels. Checkboxes hold a boolean preview value. No preview values belong in an exported definition.</p>
+    <p><a class="link" href={withBase("exports/components/form-builder.json")}>Download the static component contract</a>. Existing text-field, textarea, select, checkbox and radio-group rules remain authoritative. This is not a production backend or native port.</p>
+  </section>
   <div class="form-tool form-tool-fields" aria-label="Static representative fields" set:html={renderFields(sampleFields, {}, { templates, prefix: "builder-static" })} />
   <script>import "../../scripts/builder";</script>
-</ToolLayout>
+</SiteLayout>
diff --git a/site/src/pages/components/[id].astro b/site/src/pages/components/[id].astro
index 7f69f1f5a..ab40b3a92 100644
--- a/site/src/pages/components/[id].astro
+++ b/site/src/pages/components/[id].astro
@@ -1,29 +1,121 @@
 ---
-import { getCollection, render } from "astro:content";
-import PortalLayout from "../../layouts/PortalLayout.astro";
+import { getCollection } from "astro:content";
+import ComponentSection from "../../components/ComponentSection.astro";
+import SelectField from "../../components/fields/SelectField.astro";
+import { profiles } from "../../lib/theme";
+import { parseFragment } from "parse5";
+import { attribute, walkMarkup } from "../../../../scripts/lib/markup.mjs";
+import { cssSourceClosure } from "../../../../scripts/lib/ui-distribution.mjs";
+import { scopeRecipeCss } from "../../../../scripts/lib/recipe-css.mjs";
+import { definitions } from "../../../../packages/ui/src/catalogue.mjs";
+import "../../styles/site.css";
+import "../../styles/print.css";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import { withBase } from "../../lib/base";
 import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
 import implementations from "../../../../packages/ui/dist/manifest.json";
 import examples from "../../../../packages/ui/dist/examples.json";
-export async function getStaticPaths() { return (await getCollection("components")).map(entry => ({ params: { id: entry.id }, props: { entry } })); }
+
+export async function getStaticPaths() {
+  return (await getCollection("components")).map((entry) => ({ params: { id: entry.id }, props: { entry } }));
+}
+
 const { entry } = Astro.props;
-const id = entry.id, item = implementations.components.find(c => c.id === id)!;
-const { Content } = await render(entry);
+const id = entry.id;
+const item = implementations.components.find((c) => c.id === id)!;
+const demoModules = import.meta.glob("/spec/components/*.demo.html", { query: "?raw", import: "default", eager: true }) as Record<string, string>;
+const demo = demoModules[`/spec/components/${id}.demo.html`] ?? null;
+const styleModules = import.meta.glob("../../styles/**/*.css", { query: "?raw", import: "default", eager: true }) as Record<string, string>;
+const dependencies = new Set<string>();
+const addStyle = (name: string) => {
+  if (dependencies.has(name)) return;
+  dependencies.add(name);
+  for (const dependency of [...(definitions[name]?.styles ?? []), ...(definitions[name]?.dependencies ?? [])]) addStyle(dependency);
+};
+[id, ...item.styleDependencies].forEach(addStyle);
+// Raw specification demos can compose more parts than the package examples.
+// Resolve their actual roots too; every dependency stays inside this matrix.
+walkMarkup(parseFragment(demo ?? ""), (node) => {
+  for (const name of (attribute(node, "class") ?? "").split(/\s+/)) if (styleModules[`../../styles/components/${name}.css`]) addStyle(name);
+});
+const styleEntries = [...[...dependencies].map((name) => `components/${name}.css`), ...[...dependencies].flatMap((name) => definitions[name]?.extraStyles ?? []).map((file) => file.replace(/^site\/src\/styles\//, ""))];
+const matrixSources = await cssSourceClosure(".", styleEntries, { read: (file) => styleModules[`../../styles/${file}`] });
+const matrixCss = [...matrixSources.values()].map((source) => scopeRecipeCss(source, { scope: `.reference-matrix-${id}`, keepStates: true })).join("\n");
 const variants = examples[id];
 const imports = `import '@j3w1/ui/tokens.css';\nimport '@j3w1/ui/styles/${id}.css';\nimport '@j3w1/ui/register/${id}';`;
 const install = `npm install --save-exact @j3w1/ui@${item.version}`;
 const copy = `npx --package=@j3w1/ui@${item.version} j3w1-ui copy ${id} --out ./vendor/j3w1/${id}`;
+const links = [
+  [`ui/copy/${id}/index.html`, "Standalone example ↗"],
+  [`ui/copy/${id}/manifest.json`, "Copy file manifest"],
+  [`exports/components/${id}.json`, "Canonical JSON"],
+  [`demo/#/components/${id}`, "Vue gallery ↗"],
+  [`agents/?component=${id}`, "Prepare an agent kit →"],
+];
 ---
-<PortalLayout title={item.name} description={entry.data.summary}>
-  <Fragment slot="head"><link rel="stylesheet" href={withBase(`ui/styles/${id}.css`)} /></Fragment>
-  <p class="portal-eyebrow">{entry.data.maturity} · LIGHT DOM · {item.version}</p>
-  <p class="portal-note">{item.domReason} {id === "form-builder" && "The bounded form-builder contract remains draft; D-021 has not been promoted."}</p>
-  <div class="portal-actions"><a href={withBase(`ui/copy/${id}/index.html`)}>Standalone example ↗</a><a href={withBase(`ui/copy/${id}/manifest.json`)}>Copy file manifest</a><a href={withBase(`exports/components/${id}.json`)}>Canonical JSON</a><a href={withBase(`demo/#/components/${id}`)}>Vue gallery ↗</a><a href={withBase(`agents/?component=${id}`)}>Prepare an agent kit →</a></div>
-  <section class="portal-section"><h2>Live variants</h2>{Object.entries(variants).map(([variant, markup]) => <section class="portal-section"><h3>{variant}</h3><div class="portal-example" set:html={markup}></div><p><button class="portal-copy" type="button" data-copy={markup}>Copy markup</button></p><pre class="portal-code"><code>{markup}</code></pre></section>)}</section>
-  <section class="portal-section"><h2>Install and register</h2><p>Use the exact version. If npm publication is pending, install the release tarball from the <a href={withBase("implement/")}>installation guide</a>.</p><pre class="portal-code"><code>{install}</code></pre><pre class="portal-code"><code>{imports}</code></pre><p>Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.</p><p><a href={withBase("implement/")}>Vue SFC, React, Astro and plain HTML integration →</a></p></section>
-  <section class="portal-section"><h2>Copy the complete implementation</h2><pre class="portal-code"><code>{copy}</code></pre><p>The CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open <code>index.html</code>. Keep its modules, CSS, tokens and licence notices together.</p></section>
-  <section class="portal-section"><h2>Public API</h2>{["attributes", "properties", "methods", "events"].map(kind => <><h3>{kind}</h3><div class="portal-table-wrap"><table class="portal-table"><thead><tr><th>Name</th><th>Type / signature</th><th>Meaning</th></tr></thead><tbody>{(item.api[kind] ?? []).map(row => <tr><td><code>{row.name}</code></td><td><code>{row.type ?? row.signature ?? "CustomEvent"}</code></td><td>{row.description ?? row.detail ?? "See the canonical interaction contract below."}{row.readonly && " Read only."}</td></tr>)}</tbody></table></div></>)}</section>
-  <section class="portal-section"><h2>Dependencies and verification</h2><p>Registered components: {item.dependencies.length ? item.dependencies.join(", ") : "none"}. Style dependencies: {item.styleDependencies.length ? item.styleDependencies.join(", ") : "none"}.</p><p>Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. <a href={withBase(`verification/#${anchorFor.verification(id)}`)}>Read specification execution evidence</a>; <a href={withBase("verification/ui.json")}>read packed-consumer evidence</a>; <a href={withBase(`reference/#${anchorFor.component(id)}`)}>inspect the complete state matrix</a>.</p><p><a href={withBase("ui/manifest.json")}>Full implementation manifest, API and token dependency closure</a></p></section>
-  <section class="portal-prose" id={anchorFor.component(id)}><h2>Canonical specification</h2><Content /></section>
+<SiteLayout title={item.name} description={entry.data.summary}>
+  <Fragment slot="head"><link rel="stylesheet" href={withBase(`ui/styles/${id}.css`)} /><style is:inline set:html={matrixCss} /></Fragment>
+  <p class="site-note">{entry.data.maturity} · light DOM · {item.version}. {item.domReason} {id === "form-builder" && "The bounded form-builder contract remains draft; D-021 has not been promoted."}</p>
+  <div class="site-actions">
+    {links.map(([path, label]) => <a class="link link-standalone" href={withBase(path)}>{label}</a>)}
+  </div>
+  <section class="site-section">
+    <h2>Live variants</h2>
+    {Object.entries(variants).map(([variant, markup]) => <section>
+      <h3>{variant}</h3>
+      <div class="site-example" data-specimen set:html={markup}></div>
+      <div class="site-source">
+        <div class="site-source-bar">Markup<button class="button button-tertiary" type="button" data-copy={markup}>Copy markup</button></div>
+        <pre class="site-code" tabindex="0" role="region" aria-label={`${item.name} ${variant} markup`}><code>{markup}</code></pre>
+      </div>
+    </section>)}
+  </section>
+  <section class="site-section">
+    <h2>Install and register</h2>
+    <p>Use the exact version. If npm publication is pending, install the release tarball from the <a class="link" href={withBase("implement/")}>installation guide</a>.</p>
+    <pre class="site-code" tabindex="0" role="region" aria-label={`${item.name} installation command`}><code>{install}</code></pre>
+    <pre class="site-code" tabindex="0" role="region" aria-label={`${item.name} registration imports`}><code>{imports}</code></pre>
+    <p>Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.</p>
+    <p><a class="link link-standalone" href={withBase("implement/")}>Vue SFC, React, Astro and plain HTML integration →</a></p>
+  </section>
+  <section class="site-section">
+    <h2>Copy the complete implementation</h2>
+    <pre class="site-code" tabindex="0" role="region" aria-label={`${item.name} copy command`}><code>{copy}</code></pre>
+    <p>The CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open <code>index.html</code>. Keep its modules, CSS, tokens and licence notices together.</p>
+  </section>
+  <section class="site-section">
+    <h2>Public API</h2>
+    {["attributes", "properties", "methods", "events"].map((kind) => <>
+      <h3>{kind}</h3>
+      <div class="site-table-wrap" tabindex="0" role="region" aria-label={`${item.name} ${kind} API`}>
+        <table class="table">
+          <thead><tr><th class="table-header" scope="col">Name</th><th class="table-header" scope="col">Type / signature</th><th class="table-header" scope="col">Meaning</th></tr></thead>
+          <tbody class="table-body">
+            {(item.api[kind] ?? []).map((row) => <tr class="table-row">
+              <td class="table-cell"><code>{row.name}</code></td>
+              <td class="table-cell"><code>{row.type ?? row.signature ?? "CustomEvent"}</code></td>
+              <td class="table-cell">{row.description ?? row.detail ?? "See the canonical interaction contract below."}{row.readonly && " Read only."}</td>
+            </tr>)}
+          </tbody>
+        </table>
+      </div>
+    </>)}
+  </section>
+  <section class="site-section">
+    <h2>Dependencies and verification</h2>
+    <p>Registered components: {item.dependencies.length ? item.dependencies.join(", ") : "none"}. Style dependencies: {item.styleDependencies.length ? item.styleDependencies.join(", ") : "none"}.</p>
+    <p>Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. <a class="link" href={withBase(`verification/#${anchorFor.verification(id)}`)}>Read specification execution evidence</a>; <a class="link" href={withBase("verification/ui.json")}>read packed-consumer evidence</a>; <a class="link" href={`#${anchorFor.states(id)}`}>inspect the complete state matrix</a>.</p>
+    <p><a class="link link-standalone" href={withBase("ui/manifest.json")}>Full implementation manifest, API and token dependency closure</a></p>
+  </section>
+  <section class="site-section">
+    <h2>Canonical specification</h2>
+    <div class="controls js-only" id="controls">
+      <SelectField id="density" label="Specimen density"><option value="compact">compact</option><option value="comfortable">comfortable</option></SelectField>
+      <SelectField id="profile" label="Specimen profile">{Object.entries(profiles).map(([id, p]) => <option value={id}>{id} ({p.status})</option>)}</SelectField>
+      <button class="button button-tertiary" type="button" id="reset">Reset page preferences</button>
+    </div>
+    <ComponentSection entry={entry} demo={demo} />
+  </section>
+  <script>import "../../scripts/main";</script>
   <script type="module" is:inline src={withBase(`ui/register/${id}.js`)}></script>
-</PortalLayout>
+</SiteLayout>
diff --git a/site/src/pages/components/index.astro b/site/src/pages/components/index.astro
index b2de6187f..cf36158ff 100644
--- a/site/src/pages/components/index.astro
+++ b/site/src/pages/components/index.astro
@@ -1,10 +1,20 @@
 ---
-import PortalLayout from "../../layouts/PortalLayout.astro";
-import { withBase } from "../../lib/base";
 import { getCollection } from "astro:content";
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import { withBase } from "../../lib/base";
 import families from "../../../../spec/families.json";
-const components = (await getCollection("components")).sort((a,b) => a.data.order - b.data.order);
+
+const components = (await getCollection("components")).sort((a, b) => a.data.order - b.data.order);
 ---
-<PortalLayout title="Components" description={`${components.length} official implementations. Inspect live variants, native behavior, exact tokens, typed APIs and complete copy bundles.`}>
-  {families.filter(f => components.some(c => c.data.family === f.id)).map(family => <section class="portal-section"><h2>{family.title}</h2><div class="portal-grid">{components.filter(c => c.data.family === family.id).map(c => <a class="portal-card" href={withBase(`components/${c.id}/`)}><p class="portal-eyebrow">{c.data.maturity} / {c.id}</p><h3>{c.data.name} →</h3><p>{c.data.summary}</p></a>)}</div></section>)}
-</PortalLayout>
+<SiteLayout title="Components" description={`${components.length} official implementations. Inspect live variants, native behavior, exact tokens, typed APIs and complete copy bundles.`}>
+  {families.filter((f) => components.some((c) => c.data.family === f.id)).map((family) => <section class="site-section">
+    <h2>{family.title}</h2>
+    <div class="site-cards">
+      {components.filter((c) => c.data.family === family.id).map((c) => <a class="card card-link" href={withBase(`components/${c.id}/`)}>
+        <span class="card-title">{c.data.name} →</span>
+        <span class="card-body">{c.data.summary}</span>
+        <span class="card-meta">{c.data.maturity} · {c.id}</span>
+      </a>)}
+    </div>
+  </section>)}
+</SiteLayout>
diff --git a/site/src/pages/figma/index.astro b/site/src/pages/figma/index.astro
index a48125128..c80e76199 100644
--- a/site/src/pages/figma/index.astro
+++ b/site/src/pages/figma/index.astro
@@ -1,12 +1,18 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
 import { getCollection, render } from "astro:content";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import { withBase } from "../../lib/base";
-const entry = (await getCollection("docs")).find(item => item.data.id === "figma-bridge");
+
+const entry = (await getCollection("docs")).find((item) => item.data.id === "figma-bridge");
 const { Content } = await render(entry);
 ---
-<ToolLayout title="Figma Variables bridge" description="Pinned source values, explicit diffs and an external receipt for safe one-way import.">
-  <p><a href={withBase("exports/figma/importer.mjs")} download>Download the actual Variables adapter</a> · <a href="https://github.com/j3w1/theme/issues/15">Import verification evidence</a></p>
-  <h2>Mapping, operation and evidence</h2>
-  <Content />
-</ToolLayout>
+<SiteLayout title="Figma Variables bridge" description="Pinned source values, explicit diffs and an external receipt for safe one-way import." revision>
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase("exports/figma/importer.mjs")} download>Download the actual Variables adapter</a>
+    <a class="link link-standalone" href="https://github.com/j3w1/theme/issues/15">Import verification evidence ↗</a>
+  </div>
+  <div class="site-prose">
+    <h2>Mapping, operation and evidence</h2>
+    <Content />
+  </div>
+</SiteLayout>
diff --git a/site/src/pages/foundations/index.astro b/site/src/pages/foundations/index.astro
index 67d1be2b3..a09494cd7 100644
--- a/site/src/pages/foundations/index.astro
+++ b/site/src/pages/foundations/index.astro
@@ -1,7 +1,12 @@
 ---
 import { getCollection } from "astro:content";
-import PortalLayout from "../../layouts/PortalLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import DocSection from "../../components/DocSection.astro";
+
 const docs = await getCollection("docs");
 ---
-<PortalLayout title="Foundations" description="True Black / Rose is the permanent default: black canvas, warm dark panels, the original rose foregrounds and dark-red actions. Exact roles and accessibility rules remain authoritative."><div class="portal-prose">{["identity", "foundations", "accessibility"].map(id => <DocSection entry={docs.find(doc => doc.data.id === id)} />)}</div></PortalLayout>
+<SiteLayout title="Foundations" description="True Black / Rose is the permanent default: black canvas, warm dark panels, the original rose foregrounds and dark-red actions. Exact roles and accessibility rules remain authoritative.">
+  <div class="site-prose">
+    {["identity", "foundations", "accessibility"].map((id) => <DocSection entry={docs.find((doc) => doc.data.id === id)} />)}
+  </div>
+</SiteLayout>
diff --git a/site/src/pages/implement/index.astro b/site/src/pages/implement/index.astro
index deedd111b..aac6cdf77 100644
--- a/site/src/pages/implement/index.astro
+++ b/site/src/pages/implement/index.astro
@@ -1,12 +1,31 @@
 ---
-import PortalLayout from "../../layouts/PortalLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import Guide from "../../../../docs/ui-consumption.md";
 import { withBase } from "../../lib/base";
 import { theme } from "../../lib/theme";
 import { consumerExamples } from "../../../../scripts/lib/ui-consumer-examples.mjs";
+
 const files = await consumerExamples();
 const frameworkFiles = ["html/index.html", "html/main.js", "vue/App.vue", "vue/main.js", "vite.config.js", "react/main.js", "astro/src/pages/index.astro", "astro.config.mjs"];
 ---
-<PortalLayout title="Implement the theme" description="Install exact artifacts, preserve native semantics and bring j3w1 components into Vue, React, Astro or plain HTML."><div class="portal-actions"><a href={withBase(`downloads/j3w1-ui-${theme.version}.tgz`)}>Download the package tarball</a><a href={withBase("downloads/release.json")}>Artifact digest and publication status</a></div><div class="portal-prose"><Guide /></div>
-  <section class="portal-section"><h2>Maintained framework examples</h2><p>These exact source files are compiled and exercised against the packed artifact in isolated HTML, Vue, React and Astro fixtures. They demonstrate native submission, validation, reset and disabled fieldsets. Use the component pages for the native markup and API of other controls.</p>{frameworkFiles.map(file => <section class="portal-section"><h3>{file}</h3><p><a href={withBase(`ui/frameworks/${file}`)}>Download source</a></p><pre class="portal-code"><code>{files.get(file)}</code></pre><button class="portal-copy" data-copy={files.get(file)} type="button">Copy source</button></section>)}</section>
-</PortalLayout>
+<SiteLayout title="Implement the theme" description="Install exact artifacts, preserve native semantics and bring j3w1 components into Vue, React, Astro or plain HTML.">
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase(`downloads/j3w1-ui-${theme.version}.tgz`)}>Download the package tarball</a>
+    <a class="link link-standalone" href={withBase("downloads/release.json")}>Artifact digest and publication status</a>
+  </div>
+  <div class="site-prose"><Guide /></div>
+  <section class="site-section">
+    <h2>Maintained framework examples</h2>
+    <p>These exact source files are compiled and exercised against the packed artifact in isolated HTML, Vue, React and Astro fixtures. They demonstrate native submission, validation, reset and disabled fieldsets. Use the component pages for the native markup and API of other controls.</p>
+    {frameworkFiles.map((file) => <section>
+      <h3>{file}</h3>
+      <div class="site-source">
+        <div class="site-source-bar">
+          <a class="link" href={withBase(`ui/frameworks/${file}`)}>Download source</a>
+          <button class="button button-tertiary" data-copy={files.get(file)} type="button">Copy source</button>
+        </div>
+        <pre class="site-code"><code>{files.get(file)}</code></pre>
+      </div>
+    </section>)}
+  </section>
+</SiteLayout>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index f1df47fc2..644a33b5f 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -1,15 +1,55 @@
 ---
-import PortalLayout from "../layouts/PortalLayout.astro";
+import SiteLayout from "../layouts/SiteLayout.astro";
 import { withBase } from "../lib/base";
-import { defaultTokens, theme } from "../lib/theme";
+import { cssVar, defaultTokens, theme } from "../lib/theme";
 import inventory from "../../../spec/inventory.json";
+
 const roles = ["color.surface.canvas", "color.surface.chrome", "color.surface.default", "color.text.default", "color.text.bright", "color.action.primary.bg"];
+const metrics = [
+  ["Canonical foundation", theme.version, "Versioned tokens, contracts and migration guidance."],
+  ["Consumable inventory", inventory.components.length, "Elements, components and application compositions."],
+  ["Integration routes", "03", "Install a package. Copy complete source. Map to your host."],
+];
+const routes = [
+  ["components/", "Build with native semantics →", "Typed properties, native forms, keyboard behavior, live variants and complete dependency lists."],
+  ["demo/", "See the system at work ↗", "A Vue workspace with dashboards, records, productivity tools and realistic local workflows."],
+  ["agents/", "Give your agent the exact inputs →", "Pinned machine contracts, per-component imports and verified copy bundles. No screenshot interpretation required."],
+  ["reference/", "Read the complete specification →", "Every normative document, token, state matrix, accessibility rule and decision in one static reference."],
+];
 ---
-<PortalLayout title="The j3w1 UI theme" description="Black and Rose surfaces. Rose typography, dark-red actions and square native components. A complete foundation for the apps you and your agents build.">
-  <div class="portal-actions"><a class="portal-primary" href={withBase("components/")}>Explore components →</a><a href={withBase("demo/")}>Open Vue demo ↗</a><a href={withBase("implement/")}>Start building</a></div>
-  <div class="portal-grid portal-section"><div class="portal-panel"><p class="portal-eyebrow">CANONICAL FOUNDATION</p><strong class="portal-metric">{theme.version}</strong><p>Versioned tokens, contracts and migration guidance.</p></div><div class="portal-panel"><p class="portal-eyebrow">CONSUMABLE INVENTORY</p><strong class="portal-metric">{inventory.components.length}</strong><p>Elements, components and application compositions.</p></div><div class="portal-panel"><p class="portal-eyebrow">INTEGRATION ROUTES</p><strong class="portal-metric">03</strong><p>Install a package. Copy complete source. Map to your host.</p></div></div>
-  <section class="portal-section"><h2>The foundation, in exact values.</h2><div class="portal-swatches">{roles.map(role => <div class="portal-panel"><div class="portal-swatch" style={`background:var(--${role.replaceAll(".", "-")})`}></div><code>{defaultTokens[role].css}</code><p>{role.replace("color.", "")}</p></div>)}</div><p><a href={withBase("foundations/")}>Typography, spacing, density and accessibility rules →</a></p></section>
-  <section class="portal-section"><h2>From a single control to a complete application.</h2><div class="portal-grid">{[["components/", "Build with native semantics", "Typed properties, native forms, keyboard behavior, live variants and complete dependency lists."], ["demo/", "See the system at work", "A Vue workspace with dashboards, records, productivity tools and realistic local workflows."], ["agents/", "Give your agent the exact inputs", "Pinned machine contracts, per-component imports and verified copy bundles. No screenshot interpretation required."], ["reference/", "Read the complete specification", "Every normative document, token, state matrix, accessibility rule and decision in one static reference."]].map(([url, title, text]) => <a class="portal-card" href={withBase(url)}><h3>{title} ↗</h3><p>{text}</p></a>)}</div></section>
-  <p class="portal-note">Looking for an older bookmark? <a href={withBase("reference/")}>The full reference</a> preserves existing anchors. Visits to a legacy homepage hash go there automatically when JavaScript is available.</p>
+<SiteLayout hero title="The j3w1 UI theme" description="Black and Rose surfaces. Rose typography, dark-red actions and square native components. A complete foundation for the apps you and your agents build.">
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase("components/")}>Explore components →</a>
+    <a class="link link-standalone" href={withBase("demo/")}>Open Vue demo ↗</a>
+    <a class="link link-standalone" href={withBase("implement/")}>Start building</a>
+  </div>
+  <div class="site-cards site-cards-fit site-section">
+    {metrics.map(([label, value, text]) => <article class="card">
+      <p class="card-meta">{label}</p>
+      <strong class="site-metric">{value}</strong>
+      <p class="card-body">{text}</p>
+    </article>)}
+  </div>
+  <section class="site-section">
+    <h2>The foundation, in exact values</h2>
+    <div class="site-cards site-cards-fit site-swatches">
+      {roles.map((role) => <div class="card">
+        <div class="site-swatch" style={`background:var(${cssVar(role)})`}></div>
+        <code>{defaultTokens[role].css}</code>
+        <p class="card-meta">{role.replace("color.", "")}</p>
+      </div>)}
+    </div>
+    <div class="site-actions"><a class="link link-standalone" href={withBase("foundations/")}>Typography, spacing, density and accessibility rules →</a></div>
+  </section>
+  <section class="site-section">
+    <h2>From a single control to a complete application</h2>
+    <div class="site-cards">
+      {routes.map(([url, title, text]) => <a class="card card-link" href={withBase(url)}>
+        <span class="card-title">{title}</span>
+        <span class="card-body">{text}</span>
+      </a>)}
+    </div>
+  </section>
+  <p class="site-note">Looking for an older bookmark? <a class="link" href={withBase("reference/")}>The full reference</a> preserves existing anchors. Visits to a legacy homepage hash go there automatically when JavaScript is available.</p>
   <script>import "../scripts/legacy-hash";</script>
-</PortalLayout>
+</SiteLayout>
diff --git a/site/src/pages/kit/index.astro b/site/src/pages/kit/index.astro
index 3143116dc..f5dd38f04 100644
--- a/site/src/pages/kit/index.astro
+++ b/site/src/pages/kit/index.astro
@@ -1,6 +1,9 @@
 ---
 import { execFileSync } from "node:child_process";
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import TextField from "../../components/fields/TextField.astro";
+import SelectField from "../../components/fields/SelectField.astro";
+import Checkbox from "../../components/fields/Checkbox.astro";
 import { withBase } from "../../lib/base";
 import { usageRevision } from "../../lib/usage";
 import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
@@ -14,39 +17,56 @@ if (usageRevision) {
   source = { revision: usageRevision, resolvedAt: new Date(seconds * 1000).toISOString() };
 }
 ---
-<ToolLayout title="Build a task kit" description="Select component contracts and package one pinned, reproducible implementation task.">
+<SiteLayout title="Build a task kit" description="Select component contracts and package one pinned, reproducible implementation task." revision>
   <p>The kit contains selected specifications, shared rules, required tokens, source digests, a lock file and a bounded task prompt. Task text stays in this page; generation needs no account or model service.</p>
   <p>Standard includes available recipes. Minimal omits only optional recipes; both retain all required contracts and rules. The legacy single-component <code>--strict</code> reconstruction command remains separate.</p>
   {!source && <p>This local build has no committed source pin. Commit generated inputs and build with <code>GITHUB_SHA</code> set to that full commit to enable packaging, or use the CLI at a committed revision.</p>}
-  <noscript><p>Interactive packaging needs JavaScript. Use the CLI below or download the <a href={withBase("exports/task-inputs.json")}>dependency index</a> and <a href={withBase("agents/consume.md")}>consumption contract</a>.</p></noscript>
-  <form data-kit-form class="kit-form js-only">
-    <fieldset><legend>Component selection</legend>
-      <p><button type="button" class="btn" data-kit-example>Use settings-form selection</button> <button type="button" class="btn" data-kit-clear>Clear selection</button></p>
-      <div class="kit-components">{Object.entries(index.components).map(([id, entry]) => <label><input type="checkbox" name="component" value={id} /> {entry.title}</label>)}</div>
+  <noscript><p>Interactive packaging needs JavaScript. Use the CLI below or download the <a class="link" href={withBase("exports/task-inputs.json")}>dependency index</a> and <a class="link" href={withBase("agents/consume.md")}>consumption contract</a>.</p></noscript>
+  <form data-kit-form class="site-form site-kit js-only">
+    <fieldset class="checkbox checkbox-group">
+      <legend class="checkbox-legend">Component selection</legend>
+      <div class="site-actions">
+        <button type="button" class="button button-secondary" data-kit-example>Use settings-form selection</button>
+        <button type="button" class="button button-tertiary" data-kit-clear>Clear selection</button>
+      </div>
+      <div class="site-kit-components">
+        {Object.entries(index.components).map(([id, entry]) => <Checkbox option name="component" value={id}>{entry.title}</Checkbox>)}
+      </div>
     </fieldset>
-    <label for={anchorFor.kitControl("task")}>Implementation task</label>
-    <textarea id={anchorFor.kitControl("task")} name="task" rows="4" maxlength="12000" required placeholder="Describe the interface and the changes authorized in the consumer project." />
-    <div class="kit-fields">
-      <label for={anchorFor.kitControl("id")}>Integration ID</label><input id={anchorFor.kitControl("id")} name="integration-id" required maxlength="120" />
-      <label for={anchorFor.kitControl("version")}>Integration version</label><input id={anchorFor.kitControl("version")} name="integration-version" required maxlength="120" />
-      <label for={anchorFor.kitControl("kind")}>Integration kind</label><select id={anchorFor.kitControl("kind")} name="integration-kind">{INTEGRATION_KINDS.map((kind) => <option value={kind}>{kind}</option>)}</select>
-      <label for={anchorFor.kitControl("mode")}>Mode</label><select id={anchorFor.kitControl("mode")} name="mode"><option value="standard">Standard — include available recipes</option><option value="minimal">Minimal — contracts and rules, omit recipes</option></select>
+    <TextField id={anchorFor.kitControl("task")} label="Implementation task" name="task" rows={4} maxlength="12000" required placeholder="Describe the interface and the changes authorized in the consumer project." />
+    <div class="site-filters">
+      <TextField id={anchorFor.kitControl("id")} label="Integration ID" name="integration-id" required maxlength="120" />
+      <TextField id={anchorFor.kitControl("version")} label="Integration version" name="integration-version" required maxlength="120" />
+      <SelectField id={anchorFor.kitControl("kind")} label="Integration kind" name="integration-kind">
+        {INTEGRATION_KINDS.map((kind) => <option value={kind}>{kind}</option>)}
+      </SelectField>
+      <SelectField id={anchorFor.kitControl("mode")} label="Mode" name="mode">
+        <option value="standard">Standard — include available recipes</option>
+        <option value="minimal">Minimal — contracts and rules, omit recipes</option>
+      </SelectField>
     </div>
     <p>Delivery profile: <code>{index.profile}</code>. Proposed and historical profiles cannot become delivery kits. Pending roles retain their required decision disclosures.</p>
-    <button class="btn" type="submit" disabled={!source}>Build kit</button>
+    <div class="site-actions"><button class="button" type="submit" disabled={!source}>Build kit</button></div>
     <p role="status" aria-live="polite" data-kit-status></p>
   </form>
-  <section hidden data-kit-result>
+  <section class="site-section" hidden data-kit-result>
     <h2>Generated kit</h2>
     <p data-kit-summary></p>
-    <p><a data-kit-download download="j3w1-task-kit.zip">Download ZIP</a> · <button type="button" class="btn" data-kit-copy>Copy complete Markdown kit</button></p>
-    <label for={anchorFor.kitControl("output")}>Complete Markdown kit</label>
-    <textarea id={anchorFor.kitControl("output")} data-kit-output readonly rows="12" />
+    <div class="site-actions">
+      <a class="link link-standalone" data-kit-download download="j3w1-task-kit.zip">Download ZIP</a>
+      <button type="button" class="button button-secondary" data-kit-copy>Copy complete Markdown kit</button>
+    </div>
+    <TextField id={anchorFor.kitControl("output")} label="Complete Markdown kit" rows={12} data-kit-output readonly />
+  </section>
+  <section class="site-section">
+    <h2>CLI</h2>
+    <p>Run from a checkout containing the task-kit command. Supply the consumer integration identity and a new directory whose parent exists. Existing directories are never replaced. Omit <code>--ref</code> to pin the checkout’s current commit.</p>
+    <pre class="site-code" tabindex="0" role="region" aria-label="Task kit command, scrollable"><code>npm run task:kit -- --components text-field,checkbox,button,dialog --task "Implement a settings form" --integration-id settings --integration-version 1 --mode standard --out ../settings-kit</code></pre>
+    <div class="site-actions">
+      <a class="link link-standalone" href={withBase("exports/task-inputs.json")}>Dependency index</a>
+      <a class="link link-standalone" href={withBase("agents/consume.md")}>Consumer authority and reporting contract</a>
+    </div>
   </section>
-  <h2>CLI</h2>
-  <p>Run from a checkout containing the task-kit command. Supply the consumer integration identity and a new directory whose parent exists. Existing directories are never replaced. Omit <code>--ref</code> to pin the checkout’s current commit.</p>
-  <pre tabindex="0" role="region" aria-label="Task kit command, scrollable"><code>npm run task:kit -- --components text-field,checkbox,button,dialog --task "Implement a settings form" --integration-id settings --integration-version 1 --mode standard --out ../settings-kit</code></pre>
-  <p><a href={withBase("exports/task-inputs.json")}>Dependency index</a> · <a href={withBase("agents/consume.md")}>Consumer authority and reporting contract</a></p>
   <script type="application/json" id={anchorFor.kitControl("data")} set:html={JSON.stringify({ index, source }).replaceAll("<", "\\u003c")} />
   <script>import "../../scripts/kit";</script>
-</ToolLayout>
+</SiteLayout>
diff --git a/site/src/pages/patterns/index.astro b/site/src/pages/patterns/index.astro
index 6b34bf432..d2759db97 100644
--- a/site/src/pages/patterns/index.astro
+++ b/site/src/pages/patterns/index.astro
@@ -1,7 +1,16 @@
 ---
-import PortalLayout from "../../layouts/PortalLayout.astro";
-import { withBase } from "../../lib/base";
 import { getCollection } from "astro:content";
-const entries = (await getCollection("components")).filter(c => ["patterns", "compositions"].includes(c.data.family) || ["admin-form", "settings-panel", "filterable-table", "compact-dashboard", "file-browser", "i3-chrome"].includes(c.id));
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import { withBase } from "../../lib/base";
+
+const entries = (await getCollection("components")).filter((c) => ["patterns", "compositions"].includes(c.data.family) || ["admin-form", "settings-panel", "filterable-table", "compact-dashboard", "file-browser", "i3-chrome"].includes(c.id));
+const cards = [...entries.map((c) => [`components/${c.id}/`, c.data.name, c.data.summary]), ["patterns/validation-recovery/", "Validation and recovery", "Errors, review, correction and confirmation across a native form."]];
 ---
-<PortalLayout title="Application patterns" description="Compose native controls into complete workflows. Each pattern includes its behavior, nested component registrations, styles and token dependencies."><div class="portal-grid">{entries.map(c => <a class="portal-card" href={withBase(`components/${c.id}/`)}><h2>{c.data.name} →</h2><p>{c.data.summary}</p></a>)}<a class="portal-card" href={withBase("patterns/validation-recovery/")}><h2>Validation and recovery →</h2><p>Errors, review, correction and confirmation across a native form.</p></a></div></PortalLayout>
+<SiteLayout title="Application patterns" description="Compose native controls into complete workflows. Each pattern includes its behavior, nested component registrations, styles and token dependencies.">
+  <div class="site-cards">
+    {cards.map(([path, name, summary]) => <a class="card card-link" href={withBase(path)}>
+      <span class="card-title">{name} →</span>
+      <span class="card-body">{summary}</span>
+    </a>)}
+  </div>
+</SiteLayout>
diff --git a/site/src/pages/patterns/validation-recovery/index.astro b/site/src/pages/patterns/validation-recovery/index.astro
index 2bbad56e9..5bed062f7 100644
--- a/site/src/pages/patterns/validation-recovery/index.astro
+++ b/site/src/pages/patterns/validation-recovery/index.astro
@@ -1,5 +1,5 @@
 ---
-import ToolLayout from "../../../layouts/ToolLayout.astro";
+import SiteLayout from "../../../layouts/SiteLayout.astro";
 import FormWorkflow from "../../../components/FormWorkflow.astro";
 import "../../../styles/form-tools.css";
 import templateExport from "../../../../../exports/forms/templates.json";
@@ -10,21 +10,29 @@ import { withBase } from "../../../lib/base";
 import { anchorFor } from "../../../../../scripts/lib/anchors.mjs";
 const templates = templateExport.templates;
 ---
-<ToolLayout title="Validation and recovery" description="Enter, correct, review and explicitly complete a local simulated save.">
+<SiteLayout title="Validation and recovery" description="Enter, correct, review and explicitly complete a local simulated save." revision>
   <p>This reference composition follows admin-form. Submit to show a focused error summary; follow its links, correct values and submit again. Errors are not announced on each keystroke. Review keeps your values. Simulate save enters busy; only Complete simulation enters success.</p>
   <p>Name and Hostname reserve ws-07 in this local fixture. No uniqueness service is contacted. Hostname accepts lowercase letters, digits and hyphen-separated segments.</p>
-  <p><a href={withBase("exports/patterns/validation-recovery.json")} download>Download pattern contract</a> · <a href={withBase("reference/#" + anchorFor.doc("form-patterns"))}>Composition rules and limits</a> · <a href={withBase("verification/")}>Execution evidence</a></p>
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase("exports/patterns/validation-recovery.json")} download>Download pattern contract</a>
+    <a class="link link-standalone" href={withBase("reference/#" + anchorFor.doc("form-patterns"))}>Composition rules and limits</a>
+    <a class="link link-standalone" href={withBase("verification/")}>Execution evidence</a>
+  </div>
   <FormWorkflow prefix="recovery" templates={templates} />
-  <section class="form-tool" aria-label="Static workflow examples">
+  <section class="site-section form-tool" aria-label="Static workflow examples">
     <h2>Static reference examples</h2>
     <p>These remain available without JavaScript. The interactive simulation requires JavaScript. The examples do not submit or store data.</p>
-    <h3>Normal</h3><div class="form-tool-fields" set:html={renderFields(pattern.fields, pattern.fixtures.valid, { prefix: "static-normal", templates })} />
-    <h3>Invalid</h3><div class="alert alert-danger"><span class="alert-glyph" aria-hidden="true">✕</span><div class="alert-body"><p class="alert-text">Name and Hostname conflict with the reserved fixture. Preserve notes and choices while correcting them.</p></div></div>
+    <h3>Normal</h3>
+    <div class="form-tool-fields" set:html={renderFields(pattern.fields, pattern.fixtures.valid, { prefix: "static-normal", templates })} />
+    <h3>Invalid</h3>
+    <div class="alert alert-danger"><span class="alert-glyph" aria-hidden="true">✕</span><div class="alert-body"><p class="alert-text">Name and Hostname conflict with the reserved fixture. Preserve notes and choices while correcting them.</p></div></div>
     <div class="form-tool-fields" set:html={renderFields(pattern.fields, pattern.fixtures.invalid, { prefix: "static-invalid", templates, errors: validateWorkstation(pattern.fields, pattern.fixtures.invalid) })} />
-    <h3>Busy</h3><p>Simulated save pending. Disabled controls express temporary inactivity; they are not a success indication.</p>
+    <h3>Busy</h3>
+    <p>Simulated save pending. Disabled controls express temporary inactivity; they are not a success indication.</p>
     <fieldset class="form-tool-fields" disabled aria-label="Busy example" aria-busy="true" set:html={renderFields(pattern.fields.slice(0, 1), pattern.fixtures.valid, { prefix: "static-busy", templates, disabled: true })} />
-    <h3>Success</h3><div class="alert alert-success"><span class="alert-glyph" aria-hidden="true">✓</span><div class="alert-body"><p class="alert-text">Simulation completed. No request was sent and no record was stored.</p></div></div>
+    <h3>Success</h3>
+    <div class="alert alert-success"><span class="alert-glyph" aria-hidden="true">✓</span><div class="alert-body"><p class="alert-text">Simulation completed. No request was sent and no record was stored.</p></div></div>
   </section>
   <p>Automated tests cover DOM and keyboard behavior. No manual screen-reader or real persistence pass is claimed. D-020 remains proposed.</p>
   <script>import "../../../scripts/validation-recovery";</script>
-</ToolLayout>
+</SiteLayout>
diff --git a/site/src/pages/ports/[id].astro b/site/src/pages/ports/[id].astro
new file mode 100644
index 000000000..707af44c3
--- /dev/null
+++ b/site/src/pages/ports/[id].astro
@@ -0,0 +1,17 @@
+---
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import { renderPortCatalogue } from "../../../../scripts/lib/port-presentation.mjs";
+import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
+import catalogue from "../../../../exports/port-capabilities.json";
+import { withBase } from "../../lib/base";
+import { usageRevision } from "../../lib/revision";
+import "../../styles/components/text-field.css";
+export function getStaticPaths() { return catalogue.ports.map((port) => ({ params: { id: port.id }, props: { port } })); }
+const { port } = Astro.props;
+const markup = renderPortCatalogue({ ports: [port] }, { base: withBase(""), revision: usageRevision });
+---
+<SiteLayout title={port.displayName} description="Installation, supported surfaces, declared semantic mappings and import evidence." revision>
+  <p><a class="link" href={withBase("ports/")}>All ports</a> · <a class="link" href={withBase(`reference/#${anchorFor.doc("portability")}`)}>Portability rules</a></p>
+  <div data-port-content set:html={markup} />
+  <script>import "../../scripts/ports-filter";</script>
+</SiteLayout>
diff --git a/site/src/pages/ports/index.astro b/site/src/pages/ports/index.astro
index edd75aeb2..04aa942cb 100644
--- a/site/src/pages/ports/index.astro
+++ b/site/src/pages/ports/index.astro
@@ -1,14 +1,22 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import { renderPortCatalogue } from "../../../../scripts/lib/port-presentation.mjs";
 import catalogue from "../../../../exports/port-capabilities.json";
 import { withBase } from "../../lib/base";
 import { blobUrl, usageRevision } from "../../lib/revision";
-const source = (file) => blobUrl(file);
+import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
+import "../../styles/components/text-field.css";
+
+const contribute = blobUrl("ports/README.md");
+const markup = renderPortCatalogue(catalogue, { base: withBase(""), revision: usageRevision, summary: true });
 ---
-<ToolLayout title="Port capabilities" description="Declared native mappings, supported surfaces and evidence for published application ports.">
+<SiteLayout title="Port capabilities" description="Declared native mappings, supported surfaces and evidence for published application ports." revision>
   <p>Mapped roles describe an implementation. Verified means a real import with matching target, token, mapping and artifact evidence. Inherited, unsupported, out-of-scope, not-implemented and not verified remain separate.</p>
-  <p><a href={withBase("exports/port-capabilities.json")} download>Download mapping JSON</a> · <a href={withBase("reference/#portability")}>Portability rules</a>{source("ports/README.md") && <> · <a href={source("ports/README.md")}>Contribute a port</a></>}</p>
-  <div data-port-content set:html={renderPortCatalogue(catalogue, { base: withBase(""), revision: usageRevision })} />
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase("exports/port-capabilities.json")} download>Download mapping JSON</a>
+    <a class="link link-standalone" href={withBase(`reference/#${anchorFor.doc("portability")}`)}>Portability rules</a>
+    {contribute && <a class="link link-standalone" href={contribute}>Contribute a port</a>}
+  </div>
+  <div data-port-content set:html={markup} />
   <script>import "../../scripts/ports-filter";</script>
-</ToolLayout>
+</SiteLayout>
diff --git a/site/src/pages/preview/[id].astro b/site/src/pages/preview/[id].astro
index 4bf8ae9ff..a3c97001b 100644
--- a/site/src/pages/preview/[id].astro
+++ b/site/src/pages/preview/[id].astro
@@ -19,11 +19,11 @@ const id = data.contract.id;
 <html lang="en" data-density="compact" data-profile="default">
   <head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>{data.contract.name} isolated preview · j3w1</title></head>
   <body class="preview-page" data-preview-data={JSON.stringify(metadata)}>
-    <header class="preview-heading"><a href={withBase(`workbench/${id}/`)} target="_top">{data.contract.name} workbench</a> · <a href={`${withBase("")}#${anchorFor.component(id)}`} target="_top">Specification</a> · <a href={withBase(`exports/components/${id}.json`)}>Machine contract</a><p data-preview-revision>{data.revision ? `Build ${data.revision}` : "Local unpinned build"} · Theme {data.themeVersion} · <code>{data.sourceDigest}</code></p></header>
+    <header class="preview-heading"><a href={withBase(`workbench/${id}/`)} target="_top">{data.contract.name} workbench</a> · <a href={`${withBase(`components/${id}/`)}#${anchorFor.component(id)}`} target="_top">Specification</a> · <a href={withBase(`exports/components/${id}.json`)}>Machine contract</a><p data-preview-revision>{data.revision ? `Build ${data.revision}` : "Local unpinned build"} · Theme {data.themeVersion} · <code>{data.sourceDigest}</code></p></header>
     <main>
     <h1 class="preview-title">{data.contract.name} isolated specimen</h1>
     <p class="preview-note" data-preview-note>Canonical static specimen. Native browser controls work; scripted behavior requires JavaScript.</p>
-    <button type="button" class="btn js-only" data-open-dialog hidden={id !== "dialog"}>Open modal dialog</button>
+    <button type="button" class="button button-secondary js-only" data-open-dialog hidden={id !== "dialog"}>Open modal dialog</button>
     <div class="preview-specimen" data-preview-root data-profile="default" data-density="compact" set:html={renderSpecimenMarkup(fragments.default, `preview-static-${id}`)} />
     <p class="preview-note" role="status" data-preview-status></p>
     </main>
@@ -32,3 +32,8 @@ const id = data.contract.id;
     <script>import "../../scripts/preview";</script>
   </body>
 </html>
+
+<style>
+  /* The isolated specimen keeps its original inset after the old page layout retires. */
+  .preview-page main { padding: var(--space-16); min-width: 0; }
+</style>
diff --git a/site/src/pages/recipes/[id].astro b/site/src/pages/recipes/[id].astro
index 1fb3ef3e3..a68511eb3 100644
--- a/site/src/pages/recipes/[id].astro
+++ b/site/src/pages/recipes/[id].astro
@@ -1,10 +1,15 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import TextField from "../../components/fields/TextField.astro";
 import { withBase } from "../../lib/base";
 import { blobUrl } from "../../lib/revision";
 import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
 import index from "../../../../exports/recipes/index.json";
-export function getStaticPaths() { return index.recipes.map((recipe) => ({ params: { id: recipe.id } })); }
+
+export function getStaticPaths() {
+  return index.recipes.map((recipe) => ({ params: { id: recipe.id } }));
+}
+
 const id = Astro.params.id!;
 const root = `exports/recipes/${id}/`;
 const files = import.meta.glob("../../../../exports/recipes/**/*", { query: "?raw", import: "default", eager: true }) as Record<string, string>;
@@ -13,30 +18,51 @@ const metadata = JSON.parse(read("manifest.json"));
 const sources = ["markup.html", "tokens.css", "foundation.css", "component.css"].map((name) => ({ name, text: read(name) }));
 const template = read("template.html");
 ---
-<ToolLayout title={`${id} recipe`} description="A standalone reference generated from the canonical default specimen.">
-  <p><a href={withBase("recipes/")}>All recipes</a> · <a href={`${withBase("")}#${anchorFor.component(id)}`}>Component specification</a></p>
-  <h2>Behavior and limitations</h2>
-  <ul>{metadata.limitations.map((text: string) => <li>{text}</li>)}</ul>
-  <p>Supported visual states: {metadata.states.join(", ")}. No behavior module is supplied.</p>
-  <p><a href={withBase(`${root}example.html`)}>Open standalone example</a> · <a href={withBase(`${root}example.html`)} download>Download standalone HTML</a> · <a href={withBase(`${root}two-instances.html`)}>Two independent instances</a></p>
-  <p><a href={withBase(`${root}manifest.json`)} download>Dependency manifest and digests</a> · <a href={withBase(`${root}README.md`)} download>Integration instructions</a> · <a href={withBase(`${root}LICENSE.md`)} download>Licenses</a></p>
-  <p>Markup: CC BY 4.0, adapted from j3w1 UI Theme Spec. CSS: MIT. Preserve the notices. Fonts are referenced by name and are not bundled.</p>
-  <h2>Copy an instance</h2>
-  <p>Load token CSS, foundation CSS and component CSS in that order. Use a different instance prefix for every copy; all IDs, labels and ARIA references change together. Keep the wrapper and its density attribute. Styles are scoped to the wrapper; rem lengths preserve the specification’s 13px base without changing the host root.</p>
-  <form class="recipe-copy js-only" data-recipe-copy>
-    <label for={anchorFor.recipeSource("prefix")}>Unique instance prefix</label>
-    <input id={anchorFor.recipeSource("prefix")} name="prefix" value={`${id}-one`} required pattern="[a-z][a-z0-9-]{0,63}" maxlength="64" />
-    <button class="btn" type="submit">Copy instance markup</button>
-    <p role="status" data-recipe-status></p>
-  </form>
+<SiteLayout title={`${id} recipe`} description="A standalone reference generated from the canonical default specimen." revision>
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase("recipes/")}>All recipes</a>
+    <a class="link link-standalone" href={`${withBase(`components/${id}/`)}#${anchorFor.component(id)}`}>Component specification</a>
+  </div>
+  <section class="site-section">
+    <h2>Behavior and limitations</h2>
+    <ul>{metadata.limitations.map((text: string) => <li>{text}</li>)}</ul>
+    <p>Supported visual states: {metadata.states.join(", ")}. No behavior module is supplied.</p>
+    <div class="site-actions">
+      <a class="link link-standalone" href={withBase(`${root}example.html`)}>Open standalone example</a>
+      <a class="link link-standalone" href={withBase(`${root}example.html`)} download>Download standalone HTML</a>
+      <a class="link link-standalone" href={withBase(`${root}two-instances.html`)}>Two independent instances</a>
+    </div>
+    <div class="site-actions">
+      <a class="link link-standalone" href={withBase(`${root}manifest.json`)} download>Dependency manifest and digests</a>
+      <a class="link link-standalone" href={withBase(`${root}README.md`)} download>Integration instructions</a>
+      <a class="link link-standalone" href={withBase(`${root}LICENSE.md`)} download>Licenses</a>
+    </div>
+    <p>Markup: CC BY 4.0, adapted from j3w1 UI Theme Spec. CSS: MIT. Preserve the notices. Fonts are referenced by name and are not bundled.</p>
+  </section>
+  <section class="site-section">
+    <h2>Copy an instance</h2>
+    <p>Load token CSS, foundation CSS and component CSS in that order. Use a different instance prefix for every copy; all IDs, labels and ARIA references change together. Keep the wrapper and its density attribute. Styles are scoped to the wrapper; rem lengths preserve the specification’s 13px base without changing the host root.</p>
+    <form class="site-filters js-only" data-recipe-copy>
+      <TextField id={anchorFor.recipeSource("prefix")} label="Unique instance prefix" name="prefix" value={`${id}-one`} required pattern="[a-z][a-z0-9-]{0,63}" maxlength="64" />
+      <button class="button" type="submit">Copy instance markup</button>
+      <p role="status" data-recipe-status></p>
+    </form>
+  </section>
   <script type="application/json" id={anchorFor.recipeSource("template")} set:html={JSON.stringify({ template }).replaceAll("<", "\\u003c")} />
-  {sources.map(({ name, text }) => <section class="usage-section" id={anchorFor.recipeSource(name)}>
+  {sources.map(({ name, text }) => <section class="site-section" id={anchorFor.recipeSource(name)}>
     <h2>{name}</h2>
-    <p><a href={withBase(root + name)} download>Download {name}</a> · <button class="btn js-only" type="button" data-copy={text}>Copy {name}</button></p>
-    <pre tabindex="0" role="region" aria-label={`${name} source, scrollable`}><code>{text}</code></pre>
+    <div class="site-source">
+      <div class="site-source-bar">
+        <a class="link" href={withBase(root + name)} download>Download {name}</a>
+        <button class="button button-tertiary js-only" type="button" data-copy={text}>Copy {name}</button>
+      </div>
+      <pre class="site-code" tabindex="0" role="region" aria-label={`${name} source, scrollable`}><code>{text}</code></pre>
+    </div>
   </section>)}
-  <h2>Source identity</h2>
-  <p>Version {metadata.version}; profile {metadata.profile}; source digest <code>{metadata.source.digest}</code>. Pin the supplying commit when consuming these files. A version number alone does not identify this artifact.</p>
-  <ul>{Object.keys(metadata.source.files).map((file) => <li>{blobUrl(file) ? <a href={blobUrl(file)}>{file}</a> : <code>{file}</code>}</li>)}</ul>
+  <section class="site-section">
+    <h2>Source identity</h2>
+    <p>Version {metadata.version}; profile {metadata.profile}; source digest <code>{metadata.source.digest}</code>. Pin the supplying commit when consuming these files. A version number alone does not identify this artifact.</p>
+    <ul>{Object.keys(metadata.source.files).map((file) => <li>{blobUrl(file) ? <a class="link" href={blobUrl(file)}>{file}</a> : <code>{file}</code>}</li>)}</ul>
+  </section>
   <script>import "../../scripts/recipe-copy";</script>
-</ToolLayout>
+</SiteLayout>
diff --git a/site/src/pages/recipes/index.astro b/site/src/pages/recipes/index.astro
index 6d20e5df7..bf3dbe2fe 100644
--- a/site/src/pages/recipes/index.astro
+++ b/site/src/pages/recipes/index.astro
@@ -1,9 +1,14 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import { withBase } from "../../lib/base";
 import index from "../../../../exports/recipes/index.json";
 ---
-<ToolLayout title="Standalone recipes" description="Maintained reference examples with scoped styles, explicit dependencies and honest interaction limits.">
+<SiteLayout title="Standalone recipes" description="Maintained reference examples with scoped styles, explicit dependencies and honest interaction limits." revision>
   <p>Open an example without Astro, or copy its markup and three stylesheets into a host page. These references contain no JavaScript behavior modules. The dialog is visual-only.</p>
-  <ul>{index.recipes.map((recipe) => <li><a href={withBase(`recipes/${recipe.id}/`)}>{recipe.id}</a> — {recipe.limitations[0]}</li>)}</ul>
-</ToolLayout>
+  <div class="site-cards">
+    {index.recipes.map((recipe) => <a class="card card-link" href={withBase(`recipes/${recipe.id}/`)}>
+      <span class="card-title">{recipe.id} →</span>
+      <span class="card-body">{recipe.limitations[0]}</span>
+    </a>)}
+  </div>
+</SiteLayout>
diff --git a/site/src/pages/reference.astro b/site/src/pages/reference.astro
index 752dbb454..2bd8ee67c 100644
--- a/site/src/pages/reference.astro
+++ b/site/src/pages/reference.astro
@@ -1,20 +1,21 @@
 ---
-import { buildCommit } from "../lib/revision";
-/* The one long page. Order: identity → foundations → every family → accessibility
-   (with the contrast report) → portability (support table, coverage ledger)
-   → references → for agents → decisions. Everything normative is in the
-   initial HTML; scripts only enhance. */
+/* Static specification hub. Legacy anchors link directly to the full detail. */
 import { POLICY_TEXT, releaseOf } from "../../../scripts/lib/eligibility.mjs";
 import { getCollection, render } from "astro:content";
-import SpecLayout from "../layouts/SpecLayout.astro";
+import SiteLayout from "../layouts/SiteLayout.astro";
+import TextField from "../components/fields/TextField.astro";
+import SelectField from "../components/fields/SelectField.astro";
+import Checkbox from "../components/fields/Checkbox.astro";
+import "../styles/site.css";
+import "../styles/print.css";
 import Toc from "../components/Toc.astro";
 import DocSection from "../components/DocSection.astro";
 import FamilySection from "../components/FamilySection.astro";
 import TokenTable from "../components/TokenTable.astro";
 import FoundationSpecimens from "../components/FoundationSpecimens.astro";
 import ContrastReport from "../components/ContrastReport.astro";
-import NonExamples from "../components/NonExamples.astro";
-import StressFixtures from "../components/StressFixtures.astro";
+
+
 import SupportTable from "../components/SupportTable.astro";
 import CoverageLedger from "../components/CoverageLedger.astro";
 import { withBase } from "../lib/base";
@@ -28,10 +29,6 @@ const agentDocs = await getCollection("agents");
 const consume = agentDocs.find((a) => a.id === "consume");
 const { Content: ConsumeContent } = consume ? await render(consume) : { Content: null };
 
-const demoModules = import.meta.glob("/spec/components/*.demo.html", { query: "?raw", import: "default", eager: true }) as Record<string, string>;
-const demos: Record<string, string> = {};
-for (const [path, html] of Object.entries(demoModules)) demos[path.replace(/^.*\//, "").replace(/\.demo\.html$/, "")] = html;
-
 const familiesWithComponents = familyList
   .filter((f) => f.id !== "foundations")
   .map((f) => ({ ...f, entries: components.filter((c) => c.data.family === f.id) }))
@@ -39,8 +36,11 @@ const familiesWithComponents = familyList
 
 const repositories = referenceSources.repositories as Record<string, { repo: string; revision: string }>;
 const title = theme.displayName;
-const description = `${theme.description} One page: foundations, every component with its states, composed specimens, accessibility and portability rules, and exports for agents.`;
+const description = "Identity, role tables, component index, accessibility and portability rules. Full state matrices, contrast pairs and decisions have dedicated static pages.";
+const decisionEntry = doc("decisions");
+const { headings: decisionHeadings } = await render(decisionEntry);
 const tocDocs = [{ id: "identity", title: "Identity" }, { id: "foundations", title: "Foundations" }];
+const fixtureAnchors = [anchors.specimen("stress"), anchors.specimen("non-examples"), ...["FX-LONG", "FX-320", "FX-I18N", "FX-RTL", "FX-RM", "FX-HC", "FX-TOUCH", "FX-DENSITY", "FX-OVERFLOW"].map(anchors.fixture), ...["pills", "glass", "gradients", "glow", "everything-red", "material", "light", "rainbow", "traffic-light", "sans", "inactive-text", "focus-as-selection", "heritage-ui", "circles", "hairline-edge", "opacity-disabled"].map(anchors.nonExample)];
 const tocExtra = [
   { id: "stress-and-non-examples", title: "Stress fixtures and non-examples" },
   { id: anchors.doc("form-patterns"), title: "Form composition and recovery" },
@@ -53,50 +53,35 @@ const tocExtra = [
 ];
 ---
 
-<SpecLayout title={title} description={description}>
-  <header class="site-header">
-    <h1>{theme.displayName}</h1>
-    <p class="lede">True-black canvas. Warm-dark panels. Rose text. Red focus. One monospace family. Square components. This page is the complete visual specification of the j3w1 identity; agents read the exports linked at the end instead.</p>
-    <p class="stamp">
-      <span>version <code>{theme.version}</code></span>
-      {buildCommit && <span>build <code>{buildCommit}</code></span>}
-      <span>profiles {Object.entries(profiles).map(([id, p]) => <><code>{id}</code> ({p.status}) </>)}</span>
-      <span>sources {Object.entries(repositories).map(([id, r]) => <><code>{r.repo}@{r.revision.slice(0, 7)}</code> </>)}</span>
-      <span><a href="https://github.com/j3w1/theme">github.com/j3w1/theme</a></span>
-      <span><a href={withBase("tokens/")}>Token usage explorer</a></span>
-      <span><a href={withBase("releases/")}>Release comparison</a></span>
-    </p>
+<SiteLayout title={title} description={description} revision>
+  <header class="reference-header">
     <p class="banner" id="consumption-policy">{releaseOf(theme.version).stability}: <code>{theme.version}</code>. {POLICY_TEXT}</p>
     <div class="controls js-only" id="controls">
-      <label>Search components, documents and tokens
-        <input type="search" id="search" placeholder="e.g. focus ring, text-field, #e53935" autocomplete="off" />
-      </label>
+      <TextField id="search" type="search" label="Search components, documents and tokens" placeholder="e.g. focus ring, text-field" autocomplete="off" />
       <span class="live-count" id="search-count" aria-live="polite"></span>
       <fieldset id="family-filter">
         <legend>Families (all shown by default)</legend>
         {familyList.filter((f) => f.id !== "foundations").map((f) => (
-          <label><input type="checkbox" name="family" value={f.id} checked /> {f.title}</label>
+          <Checkbox name="family" value={f.id} checked>{f.title}</Checkbox>
         ))}
       </fieldset>
-      <label>Specimen density
-        <select id="density"><option value="comfortable">comfortable</option><option value="compact">compact</option></select>
-      </label>
-      <label>Specimen profile
-        <select id="profile">{Object.entries(profiles).map(([id, p]) => <option value={id}>{id} ({p.status})</option>)}</select>
-      </label>
-      <button type="button" class="btn btn-quiet" id="reset">Reset page preferences</button>
+      <SelectField id="density" label="Specimen density"><option value="compact">compact</option><option value="comfortable">comfortable</option></SelectField>
+      <SelectField id="profile" label="Specimen profile">{Object.entries(profiles).map(([id, p]) => <option value={id}>{id} ({p.status})</option>)}</SelectField>
+      <button type="button" class="button button-tertiary" id="reset">Reset page preferences</button>
     </div>
   </header>
 
   <div class="layout">
     <Toc docs={tocDocs} families={familiesWithComponents.map((f) => ({ id: f.id, title: f.title, components: f.entries.map((e) => ({ id: e.data.id, name: e.data.name })) }))} extra={tocExtra} />
 
-    <main id="main">
+    <div class="reference-content">
       <DocSection entry={doc("identity")} />
 
       <DocSection entry={doc("foundations")}>
         <div class="block" id={anchors.family("foundations")}>
           <h3>Tokens</h3>
+          <p id="eligibility-legend">Eligibility: <strong>use</strong> within the role's scope; <strong>use-and-report</strong> records its pending decision; <strong>blocked</strong> excludes delivery; <strong>historical-only</strong> preserves heritage; <strong>preview-only</strong> excludes delivery. Approval and consumption eligibility stay separate.</p>
+          <p><a class="link link-standalone" href={withBase("tokens/")}>All profile values, primitives and documented usage →</a></p>
           <TokenTable prefix="color.surface." title="Surfaces" grid />
           <TokenTable prefix="color.text." title="Text" grid />
           <FoundationSpecimens />
@@ -126,7 +111,7 @@ const tocExtra = [
         </div>
       </DocSection>
 
-      {familiesWithComponents.map((f) => <FamilySection family={f} entries={f.entries} demos={demos} />)}
+      {familiesWithComponents.map((f) => <FamilySection family={f} entries={f.entries} compact />)}
       {familiesWithComponents.length === 0 && (
         <section class="family" id="components-pending">
           <h2>Components</h2>
@@ -136,14 +121,14 @@ const tocExtra = [
 
       <section class="doc" id="stress-and-non-examples">
         <h2>Stress fixtures and non-examples</h2>
-        <StressFixtures />
-        <NonExamples />
+        <p><a class="link link-standalone" href={withBase("reference/fixtures/")}>Stress fixtures and labelled non-examples →</a></p>
+        {fixtureAnchors.map((id) => <p><a class="link" id={id} data-legacy-target href={withBase(`reference/fixtures/#${id}`)}>{id}</a></p>)}
       </section>
 
       <DocSection entry={doc("form-patterns")} />
       <DocSection entry={doc("figma-bridge")} />
       <DocSection entry={doc("accessibility")}>
-        <ContrastReport />
+        <ContrastReport summary />
       </DocSection>
 
       <DocSection entry={doc("portability")}>
@@ -189,12 +174,13 @@ const tocExtra = [
         {ConsumeContent && <div class="spec-body"><ConsumeContent /></div>}
       </section>
 
-      <DocSection entry={doc("decisions")} />
-    </main>
+      <section class="doc prose" id={anchors.doc("decisions")} data-doc="decisions">
+        <h2>Decisions</h2>
+        <p><a class="link link-standalone" href={withBase("reference/decisions/")}>Read the decision log →</a></p>
+        <ul class="decision-index">{decisionHeadings.map((heading) => <li><a class="link" id={heading.slug} data-legacy-target href={withBase(`reference/decisions/#${heading.slug}`)}>{heading.text}</a></li>)}</ul>
+      </section>
+    </div>
   </div>
 
-  <footer class="site-footer">
-    <p>{theme.displayName} {theme.version}. Contrast figures are WCAG 2.x measurements of the specified roles and the automated scan of this page is not a conformance claim; keyboard, focus, labels, reflow and manual review remain the consumer's responsibility. Code and tokens MIT; prose CC BY 4.0; reference screenshots all rights reserved. No fonts are distributed.</p>
-    <p>Source: <a href="https://github.com/j3w1/theme">github.com/j3w1/theme</a>. Flagship implementation: <a href="https://github.com/j3w1/j3w1.github.io">j3w1/j3w1.github.io</a>. Historical origin: <a href="https://github.com/j3w1/1w3j">j3w1/1w3j</a>.</p>
-  </footer>
-</SpecLayout>
+  <script>import "../scripts/main"; import "../scripts/legacy-hash";</script>
+</SiteLayout>
diff --git a/site/src/pages/reference/contrast.astro b/site/src/pages/reference/contrast.astro
new file mode 100644
index 000000000..bc562182a
--- /dev/null
+++ b/site/src/pages/reference/contrast.astro
@@ -0,0 +1,8 @@
+---
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import ContrastReport from "../../components/ContrastReport.astro";
+import "../../styles/site.css";
+---
+<SiteLayout title="Contrast report" description="Every declared role pair, computed on resolved sRGB values, with its state, minimum and waiver.">
+  <ContrastReport />
+</SiteLayout>
diff --git a/site/src/pages/reference/decisions.astro b/site/src/pages/reference/decisions.astro
new file mode 100644
index 000000000..0af3d7ca4
--- /dev/null
+++ b/site/src/pages/reference/decisions.astro
@@ -0,0 +1,10 @@
+---
+import { getCollection } from "astro:content";
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import DocSection from "../../components/DocSection.astro";
+import "../../styles/site.css";
+const entry = (await getCollection("docs")).find((doc) => doc.data.id === "decisions")!;
+---
+<SiteLayout title="Decision log" description="Approved and proposed decisions, grouped by subject. Only the owner changes a status.">
+  <DocSection entry={entry} />
+</SiteLayout>
diff --git a/site/src/pages/reference/fixtures.astro b/site/src/pages/reference/fixtures.astro
new file mode 100644
index 000000000..26d7e0f25
--- /dev/null
+++ b/site/src/pages/reference/fixtures.astro
@@ -0,0 +1,12 @@
+---
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import StressFixtures from "../../components/StressFixtures.astro";
+import NonExamples from "../../components/NonExamples.astro";
+import "../../styles/site.css";
+import "../../styles/components/text-field.css";
+import "../../styles/components/table.css";
+---
+<SiteLayout title="Stress fixtures and non-examples" description="Static fixtures for reflow, density, language and motion, and labelled misreadings of the theme.">
+  <StressFixtures />
+  <NonExamples />
+</SiteLayout>
diff --git a/site/src/pages/releases/[...comparison].astro b/site/src/pages/releases/[...comparison].astro
index 8b5862850..1317809bb 100644
--- a/site/src/pages/releases/[...comparison].astro
+++ b/site/src/pages/releases/[...comparison].astro
@@ -1,54 +1,111 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import SelectField from "../../components/fields/SelectField.astro";
 import prepared from "virtual:j3w1-release-comparisons";
 import { PREVIEW_IDS } from "../../../../schemas/playground.mjs";
 import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
 import { withBase } from "../../lib/base";
 import "../../styles/releases.css";
-export function getStaticPaths() { return prepared.comparisons.map((entry: any) => ({ params: { comparison: entry.path }, props: { entry } })); }
+import "../../styles/components/description-list.css";
+
+export function getStaticPaths() {
+  return prepared.comparisons.map((entry: any) => ({ params: { comparison: entry.path }, props: { entry } }));
+}
+
 const { entry } = Astro.props;
 const { report, from, to } = entry;
-const summary = (value: unknown) => { const text = JSON.stringify(value); return text.length > 280 ? `${text.slice(0, 280)}… (complete value in download)` : text; };
+const summary = (value: unknown) => {
+  const text = JSON.stringify(value);
+  return text.length > 280 ? `${text.slice(0, 280)}… (complete value in download)` : text;
+};
 const specimenUrl = (side: typeof from, path: string) => withBase(`releases/specimens/${side.pin.id}/${side.profile}/${path}`);
 const models = PREVIEW_IDS.map((component) => {
-  const before = from.specimens.cases.filter((row: any) => row.component === component), after = to.specimens.cases.filter((row: any) => row.component === component);
+  const before = from.specimens.cases.filter((row: any) => row.component === component);
+  const after = to.specimens.cases.filter((row: any) => row.component === component);
   const keys = [...new Set([...before, ...after].map((row: any) => `${row.variant}/${row.state}`))].sort() as string[];
   const cases = keys.map((key) => {
-    const a = before.find((row: any) => `${row.variant}/${row.state}` === key), b = after.find((row: any) => `${row.variant}/${row.state}` === key);
-    return { key, before: a ? specimenUrl(from, a.path) : null, after: b ? specimenUrl(to, b.path) : null, fixture: a && b ? a.fixtureDigest === b.fixtureDigest ? "Same fixture bytes on both sides." : "Fixture bytes changed: differences include content or markup, not only theme values." : "State or variant unavailable on one side; no replacement is inferred." };
+    const a = before.find((row: any) => `${row.variant}/${row.state}` === key);
+    const b = after.find((row: any) => `${row.variant}/${row.state}` === key);
+    const fixture = !a || !b
+      ? "State or variant unavailable on one side; no replacement is inferred."
+      : a.fixtureDigest === b.fixtureDigest ? "Same fixture bytes on both sides." : "Fixture bytes changed: differences include content or markup, not only theme values.";
+    return { key, before: a ? specimenUrl(from, a.path) : null, after: b ? specimenUrl(to, b.path) : null, fixture };
   });
   const initial = cases.find((row) => row.key === "default/default" && row.before && row.after) ?? cases.find((row) => row.before && row.after);
   return { component, cases, initial };
 });
 ---
-<ToolLayout title={`${from.pin.label} → ${to.pin.label}`} description={`Pinned release comparison · ${from.profile}`}>
-  <p><a href={withBase("releases/")}>Choose another pair</a> · <a href="comparison.json" download>Download JSON report</a> · <a href="comparison.md" download>Download Markdown migration report</a></p>
-  <dl class="release-metadata">
-    <dt>Before</dt><dd><code>{report.from.revision}</code> · version {report.from.version ?? "unknown"} · {report.from.profileStatus ?? "unknown"}</dd>
-    <dt>After</dt><dd><code>{report.to.revision}</code> · version {report.to.version ?? "unknown"} · {report.to.profileStatus ?? "unknown"}</dd>
-    <dt>Evidence formats</dt><dd>Contract {report.from.contractSchemaVersion ?? "unsupported"} → {report.to.contractSchemaVersion ?? "unsupported"}; execution schema {report.from.evidenceSchemaVersion ?? "unavailable"} → {report.to.evidenceSchemaVersion ?? "unavailable"}; shared renderer {report.rendererVersion}.</dd>
-    <dt>Semantic comparison</dt><dd>{report.semanticStatus}; {report.changes.length} recorded changes.</dd>
-    <dt>Visual execution</dt><dd>Not run by this report. <a href={withBase("verification/")}>Recorded browser evidence</a> has its own scope and digests.</dd>
+<SiteLayout title={`${from.pin.label} → ${to.pin.label}`} description={`Pinned release comparison · ${from.profile}`} revision>
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase("releases/")}>Choose another pair</a>
+    <a class="link link-standalone" href="comparison.json" download>Download JSON report</a>
+    <a class="link link-standalone" href="comparison.md" download>Download Markdown migration report</a>
+  </div>
+  <dl class="description-list">
+    <div><dt>Before</dt><dd><code>{report.from.revision}</code> · version {report.from.version ?? "unknown"} · {report.from.profileStatus ?? "unknown"}</dd></div>
+    <div><dt>After</dt><dd><code>{report.to.revision}</code> · version {report.to.version ?? "unknown"} · {report.to.profileStatus ?? "unknown"}</dd></div>
+    <div><dt>Evidence formats</dt><dd>Contract {report.from.contractSchemaVersion ?? "unsupported"} → {report.to.contractSchemaVersion ?? "unsupported"}; execution schema {report.from.evidenceSchemaVersion ?? "unavailable"} → {report.to.evidenceSchemaVersion ?? "unavailable"}; shared renderer {report.rendererVersion}.</dd></div>
+    <div><dt>Semantic comparison</dt><dd>{report.semanticStatus}; {report.changes.length} recorded changes.</dd></div>
+    <div><dt>Visual execution</dt><dd>Not run by this report. <a class="link" href={withBase("verification/")}>Recorded browser evidence</a> has its own scope and digests.</dd></div>
   </dl>
-  <h2>Historical availability</h2>
-  <ul>{[...report.from.availability.map((text: string) => `Before: ${text}`), ...report.to.availability.map((text: string) => `After: ${text}`)].map((text: string) => <li>{text}</li>)}</ul>
-  <h2>Semantic changes</h2>
-  {report.changes.length === 0 ? <p>{report.semanticStatus === "compared" ? "No semantic changes detected in supported inputs." : "Unsupported inputs: an empty change list does not establish equivalence."}</p> : <div class="release-scroll" tabindex="0" role="region" aria-label="Semantic changes"><table><thead><tr><th>Kind</th><th>Contract and source</th><th>Before</th><th>After</th></tr></thead><tbody>{report.changes.map((change: any) => <tr><td>{change.kind}</td><th scope="row"><code>{change.key}</code><br />{change.sources.map((source: any, index: number) => <><a href={source.url}>{index ? "After source" : "Before source"}</a> </>)}</th><td><code>{summary(change.before)}</code></td><td><code>{summary(change.after)}</code></td></tr>)}</tbody></table></div>}
-  <h2>Known downstream impact</h2>
-  <p>Port catalogue: <strong>{report.impact.catalogue}</strong>. {report.impact.unknownConsumers} Known affected means a recorded contract or dependency changed; it does not establish a regression in an application.</p>
-  <ul>{report.impact.components.map((item: any) => <li><strong>{item.id}: {item.classification}</strong>. {item.roles.length ? item.roles.join(", ") : "Component or shared appearance sources changed."} <a href={item.sources[0]?.url}>Dependency evidence</a> (all file and JSON-pointer references are in the report).</li>)}</ul>
-  <ul>{report.impact.ports.map((item: any) => <li>{item.id}: {item.classification}. {item.roles.join(", ")} <a href={item.sources[0].url}>Mapping evidence</a></li>)}</ul>
-  <h2>Matched visual references</h2>
-  <p>640 × 480 CSS pixels · comfortable · LTR · static endpoints · historical JavaScript disabled. Both frames use the same browser and available local fonts. A change to requested typography or fixture bytes can change appearance independently of color. No actual keyboard, screen-reader or historical-runtime pass is implied.</p>
-  <p>Requested font before: <code>{from.snapshot.tokens["font.family.mono"]?.css ?? "unavailable"}</code>; after: <code>{to.snapshot.tokens["font.family.mono"]?.css ?? "unavailable"}</code>.</p>
-  {[...from.specimens.unavailable, ...to.specimens.unavailable].length > 0 && <ul>{[...from.specimens.unavailable, ...to.specimens.unavailable].map((text: string) => <li>{text}</li>)}</ul>}
-  {models.map((model) => <section class="release-component" data-release-component={model.component} data-cases={JSON.stringify(model.cases)}>
-    <h3>{model.component}</h3>
-    <label class="js-only" for={anchorFor.release(`${model.component}-case`)}>Variant and visual state <select id={anchorFor.release(`${model.component}-case`)} data-release-case>{model.cases.filter((row) => row.before && row.after).map((row) => <option value={row.key} selected={row.key === model.initial?.key}>{row.key}</option>)}</select></label>
-    {model.initial ? <><p data-release-fixture>{model.initial.fixture}</p><div class="release-frames">{(["before", "after"] as const).map((side) => <figure><figcaption>{side === "before" ? "Before" : "After"} — {side === "before" ? from.pin.label : to.pin.label}</figcaption><div class="release-frame-scroll" tabindex="0" role="region" aria-label={`${model.component} ${side} fixed-width specimen`}><iframe data-release-side={side} src={model.initial![side]!} title={`${model.component} ${side} ${model.initial!.key}`} width="640" height="480" sandbox="" loading="lazy" /></div></figure>)}</div></> : <p>Matching historical visual evidence is unavailable.</p>}
-    <p>All maintained variants and states (static links):</p><ul class="release-case-links">{model.cases.map((row) => <li>{row.key}: {row.before ? <a href={row.before}>Before</a> : "Before unavailable"} · {row.after ? <a href={row.after}>After</a> : "After unavailable"}</li>)}</ul>
-  </section>)}
-  <h2>Expected migration verification</h2><ul>{report.verification.map((text: string) => <li>{text}</li>)}</ul>
-  <h2>Limits</h2><ul>{report.limitations.map((text: string) => <li>{text}</li>)}</ul>
+  <section class="site-section">
+    <h2>Historical availability</h2>
+    <ul>{[...report.from.availability.map((text: string) => `Before: ${text}`), ...report.to.availability.map((text: string) => `After: ${text}`)].map((text: string) => <li>{text}</li>)}</ul>
+  </section>
+  <section class="site-section">
+    <h2>Semantic changes</h2>
+    {report.changes.length === 0
+      ? <p>{report.semanticStatus === "compared" ? "No semantic changes detected in supported inputs." : "Unsupported inputs: an empty change list does not establish equivalence."}</p>
+      : <div class="site-table-wrap release-scroll" tabindex="0" role="region" aria-label="Semantic changes">
+          <table class="table">
+            <thead><tr><th class="table-header" scope="col">Kind</th><th class="table-header" scope="col">Contract and source</th><th class="table-header" scope="col">Before</th><th class="table-header" scope="col">After</th></tr></thead>
+            <tbody class="table-body">
+              {report.changes.map((change: any) => <tr class="table-row">
+                <td class="table-cell">{change.kind}</td>
+                <th class="table-cell" scope="row"><code>{change.key}</code><br />{change.sources.map((source: any, index: number) => <><a class="link" href={source.url}>{index ? "After source" : "Before source"}</a> </>)}</th>
+                <td class="table-cell"><code>{summary(change.before)}</code></td>
+                <td class="table-cell"><code>{summary(change.after)}</code></td>
+              </tr>)}
+            </tbody>
+          </table>
+        </div>}
+  </section>
+  <section class="site-section">
+    <h2>Known downstream impact</h2>
+    <p>Port catalogue: <strong>{report.impact.catalogue}</strong>. {report.impact.unknownConsumers} Known affected means a recorded contract or dependency changed; it does not establish a regression in an application.</p>
+    <ul>{report.impact.components.map((item: any) => <li><strong>{item.id}: {item.classification}</strong>. {item.roles.length ? item.roles.join(", ") : "Component or shared appearance sources changed."} <a class="link" href={item.sources[0]?.url}>Dependency evidence</a> (all file and JSON-pointer references are in the report).</li>)}</ul>
+    <ul>{report.impact.ports.map((item: any) => <li>{item.id}: {item.classification}. {item.roles.join(", ")} <a class="link" href={item.sources[0].url}>Mapping evidence</a></li>)}</ul>
+  </section>
+  <section class="site-section">
+    <h2>Matched visual references</h2>
+    <p>640 × 480 CSS pixels · comfortable · LTR · static endpoints · historical JavaScript disabled. Both frames use the same browser and available local fonts. A change to requested typography or fixture bytes can change appearance independently of color. No actual keyboard, screen-reader or historical-runtime pass is implied.</p>
+    <p>Requested font before: <code>{from.snapshot.tokens["font.family.mono"]?.css ?? "unavailable"}</code>; after: <code>{to.snapshot.tokens["font.family.mono"]?.css ?? "unavailable"}</code>.</p>
+    {[...from.specimens.unavailable, ...to.specimens.unavailable].length > 0 && <ul>{[...from.specimens.unavailable, ...to.specimens.unavailable].map((text: string) => <li>{text}</li>)}</ul>}
+    {models.map((model) => <section class="release-component" data-release-component={model.component} data-cases={JSON.stringify(model.cases)}>
+      <h3>{model.component}</h3>
+      <SelectField class="js-only" id={anchorFor.release(`${model.component}-case`)} label="Variant and visual state" data-release-case>
+        {model.cases.filter((row) => row.before && row.after).map((row) => <option value={row.key} selected={row.key === model.initial?.key}>{row.key}</option>)}
+      </SelectField>
+      {model.initial ? <>
+        <p data-release-fixture>{model.initial.fixture}</p>
+        <div class="release-frames">
+          {(["before", "after"] as const).map((side) => <figure>
+            <figcaption>{side === "before" ? "Before" : "After"} — {side === "before" ? from.pin.label : to.pin.label}</figcaption>
+            <div class="release-frame-scroll" tabindex="0" role="region" aria-label={`${model.component} ${side} fixed-width specimen`}>
+              <iframe data-release-side={side} src={model.initial![side]!} title={`${model.component} ${side} ${model.initial!.key}`} width="640" height="480" sandbox="" loading="lazy" />
+            </div>
+          </figure>)}
+        </div>
+      </> : <p>Matching historical visual evidence is unavailable.</p>}
+      <p>All maintained variants and states (static links):</p>
+      <ul class="release-case-links">{model.cases.map((row) => <li>{row.key}: {row.before ? <a class="link" href={row.before}>Before</a> : "Before unavailable"} · {row.after ? <a class="link" href={row.after}>After</a> : "After unavailable"}</li>)}</ul>
+    </section>)}
+  </section>
+  <section class="site-section">
+    <h2>Expected migration verification</h2>
+    <ul>{report.verification.map((text: string) => <li>{text}</li>)}</ul>
+    <h2>Limits</h2>
+    <ul>{report.limitations.map((text: string) => <li>{text}</li>)}</ul>
+  </section>
   <script>import "../../scripts/release-comparison";</script>
-</ToolLayout>
+</SiteLayout>
diff --git a/site/src/pages/releases/index.astro b/site/src/pages/releases/index.astro
index 2e7802a6e..1a6ca3a05 100644
--- a/site/src/pages/releases/index.astro
+++ b/site/src/pages/releases/index.astro
@@ -1,28 +1,40 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import SelectField from "../../components/fields/SelectField.astro";
 import prepared from "virtual:j3w1-release-comparisons";
 import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
 import { withBase } from "../../lib/base";
-import "../../styles/releases.css";
 const { catalogue, comparisons } = prepared;
 const routes = comparisons.map((entry) => entry.path);
 ---
-<ToolLayout title="Release comparison" description="Compare two pinned theme revisions, inspect historical specimens, and follow explicit dependency evidence.">
+<SiteLayout title="Release comparison" description="Compare two pinned theme revisions, inspect historical specimens, and follow explicit dependency evidence." revision>
   <p>Choose a release or a published commit checkpoint. Both sides keep their own values, status and provenance. A checkpoint is not a new release or approval. Proposed and heritage profiles remain inspection-only.</p>
-  <form class="release-picker js-only" data-release-picker data-routes={JSON.stringify(routes)} data-base={withBase("releases/")}>
-    <label for={anchorFor.release("from")}>Before revision</label><select id={anchorFor.release("from")} name="from">{catalogue.revisions.map((pin) => <option value={pin.id}>{pin.label}</option>)}</select>
-    <label for={anchorFor.release("to")}>After revision</label><select id={anchorFor.release("to")} name="to">{catalogue.revisions.map((pin, index) => <option value={pin.id} selected={index === catalogue.revisions.length - 1}>{pin.label}</option>)}</select>
-    <label for={anchorFor.release("profile")}>Profile</label><select id={anchorFor.release("profile")} name="profile">{catalogue.profiles.map((profile) => <option>{profile}</option>)}</select>
-    <button type="submit" class="btn">Open comparison</button>
+  <form class="site-filters js-only" data-release-picker data-routes={JSON.stringify(routes)} data-base={withBase("releases/")}>
+    <SelectField id={anchorFor.release("from")} label="Before revision" name="from">
+      {catalogue.revisions.map((pin) => <option value={pin.id}>{pin.label}</option>)}
+    </SelectField>
+    <SelectField id={anchorFor.release("to")} label="After revision" name="to">
+      {catalogue.revisions.map((pin, index) => <option value={pin.id} selected={index === catalogue.revisions.length - 1}>{pin.label}</option>)}
+    </SelectField>
+    <SelectField id={anchorFor.release("profile")} label="Profile" name="profile">
+      {catalogue.profiles.map((profile) => <option>{profile}</option>)}
+    </SelectField>
+    <button class="button" type="submit">Open comparison</button>
   </form>
-  <h2>Available comparisons</h2>
-  <p>Every comparison below is available without JavaScript. JSON and Markdown downloads include the full input pins, digests, changes, dependency references, verification steps and limitations.</p>
-  <ul>{comparisons.map((entry) => <li><a href={withBase(`releases/${entry.path}/`)}>{entry.from.pin.label} → {entry.to.pin.label} · {entry.from.profile}</a></li>)}</ul>
-  <h2>What the visual reference means</h2>
-  <p>Before and after frames use each revision's maintained specimen markup and styles through the same parsed renderer. The initial seven components reuse the workbench inventory, with every recorded variant and state. Frames use 640 × 480 CSS pixels, comfortable density, left-to-right direction, static motion endpoints and no historical JavaScript. Open a frame directly for a full-width view.</p>
-  <p>Fonts come from the same browser and machine; no font binaries are bundled or fetched. Different machines can use different fallbacks. Changed fixtures and requested fonts are reported so their effects are not mistaken for palette regressions. Actual captures and accessibility checks remain separate <a href={withBase("verification/")}>execution evidence</a>.</p>
-  <h2>Compare another pinned pair locally</h2>
-  <pre><code>npm run release:compare -- --from v0.1.0 --to b601998b3711dcd62949d497ed828af2089f9544 --out ../release-comparison</code></pre>
-  <p>The output directory must be new and have an existing, non-redirected parent. The command reads local Git objects without building historical code or fetching a branch. Missing historical exports remain unsupported; missing reverse indexes are reported, with direct mappings used where available.</p>
+  <section class="site-section">
+    <h2>Available comparisons</h2>
+    <p>Every comparison below is available without JavaScript. JSON and Markdown downloads include the full input pins, digests, changes, dependency references, verification steps and limitations.</p>
+    <ul>{comparisons.map((entry) => <li><a class="link" href={withBase(`releases/${entry.path}/`)}>{entry.from.pin.label} → {entry.to.pin.label} · {entry.from.profile}</a></li>)}</ul>
+  </section>
+  <section class="site-section">
+    <h2>What the visual reference means</h2>
+    <p>Before and after frames use each revision's maintained specimen markup and styles through the same parsed renderer. The initial seven components reuse the workbench inventory, with every recorded variant and state. Frames use 640 × 480 CSS pixels, comfortable density, left-to-right direction, static motion endpoints and no historical JavaScript. Open a frame directly for a full-width view.</p>
+    <p>Fonts come from the same browser and machine; no font binaries are bundled or fetched. Different machines can use different fallbacks. Changed fixtures and requested fonts are reported so their effects are not mistaken for palette regressions. Actual captures and accessibility checks remain separate <a class="link" href={withBase("verification/")}>execution evidence</a>.</p>
+  </section>
+  <section class="site-section">
+    <h2>Compare another pinned pair locally</h2>
+    <pre class="site-code"><code>npm run release:compare -- --from v0.1.0 --to b601998b3711dcd62949d497ed828af2089f9544 --out ../release-comparison</code></pre>
+    <p>The output directory must be new and have an existing, non-redirected parent. The command reads local Git objects without building historical code or fetching a branch. Missing historical exports remain unsupported; missing reverse indexes are reported, with direct mappings used where available.</p>
+  </section>
   <script>import "../../scripts/release-picker";</script>
-</ToolLayout>
+</SiteLayout>
diff --git a/site/src/pages/report/index.astro b/site/src/pages/report/index.astro
index a2e910f18..639d3b591 100644
--- a/site/src/pages/report/index.astro
+++ b/site/src/pages/report/index.astro
@@ -1,21 +1,37 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import IssueDraft from "../../components/IssueDraft.astro";
+import SelectField from "../../components/fields/SelectField.astro";
 import { theme, coverageLedger, defaultTokens } from "../../lib/theme";
 import { sha256 } from "../../../../scripts/lib/fs.mjs";
 import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
 import { usageRevision } from "../../lib/revision";
 import "../../styles/workbench.css";
-const data = { themeVersion: theme.version, siteUrl: theme.site.url, revision: usageRevision, sourceDigest: sha256(JSON.stringify({ theme, coverageLedger, defaultTokens })), components: Object.keys(coverageLedger.components), tokens: Object.keys(defaultTokens), profiles: theme.profiles.map(p => p.id) };
+
+const data = {
+  themeVersion: theme.version,
+  siteUrl: theme.site.url,
+  revision: usageRevision,
+  sourceDigest: sha256(JSON.stringify({ theme, coverageLedger, defaultTokens })),
+  components: Object.keys(coverageLedger.components),
+  tokens: Object.keys(defaultTokens),
+  profiles: theme.profiles.map((p) => p.id),
+};
 ---
-<ToolLayout title="Report a specification issue" description="Prepare and review a public issue for a component or token.">
+<SiteLayout title="Report a specification issue" description="Prepare and review a public issue for a component or token." revision>
   <div class="workbench" data-report-page data-report-data={JSON.stringify(data)}>
     <p data-report-target role="status">Choose a component or token. Without JavaScript, use the direct GitHub link below and describe the target in the issue.</p>
-    <form class="workbench-controls js-only" data-report-controls>
-      <label for={anchorFor.workbench("report", "target")}>Component or token<select id={anchorFor.workbench("report", "target")} name="target"><option value="">Choose a target</option><optgroup label="Components">{data.components.map(id => <option value={`component:${id}`}>{id}</option>)}</optgroup><optgroup label="Tokens">{data.tokens.map(id => <option value={`token:${id}`}>{id}</option>)}</optgroup></select></label>
-      <label for={anchorFor.workbench("report", "profile")}>Profile<select id={anchorFor.workbench("report", "profile")} name="profile">{theme.profiles.map(p => <option value={p.id}>{p.id} — {p.status}</option>)}</select></label>
+    <form class="site-filters js-only" data-report-controls>
+      <SelectField id={anchorFor.workbench("report", "target")} label="Component or token" name="target">
+        <option value="">Choose a target</option>
+        <optgroup label="Components">{data.components.map((id) => <option value={`component:${id}`}>{id}</option>)}</optgroup>
+        <optgroup label="Tokens">{data.tokens.map((id) => <option value={`token:${id}`}>{id}</option>)}</optgroup>
+      </SelectField>
+      <SelectField id={anchorFor.workbench("report", "profile")} label="Profile" name="profile">
+        {theme.profiles.map((p) => <option value={p.id}>{p.id} — {p.status}</option>)}
+      </SelectField>
     </form>
     <IssueDraft id="specification" />
   </div>
-</ToolLayout>
+</SiteLayout>
 <script>import "../../scripts/report";</script>
diff --git a/site/src/pages/search-index.json.ts b/site/src/pages/search-index.json.ts
index bf81909f1..1faf0f70f 100644
--- a/site/src/pages/search-index.json.ts
+++ b/site/src/pages/search-index.json.ts
@@ -1,37 +1,2 @@
-/* Build-time search index: components, documents and token paths. Fetched by
-   scripts/search.ts on first focus of the search field. */
-
-import type { APIRoute } from "astro";
-import { getCollection } from "astro:content";
-import { anchorFor } from "../../../scripts/lib/anchors.mjs";
-import { defaultTokens } from "../lib/theme";
-
-export const GET: APIRoute = async () => {
-  const components = (await getCollection("components")).map((c) => ({
-    kind: "component",
-    id: c.data.id,
-    anchor: anchorFor.component(c.data.id),
-    title: c.data.name,
-    family: c.data.family,
-    text: [c.data.name, c.data.summary, ...c.data.keywords, ...c.data.states].join(" ").toLowerCase(),
-  }));
-  const docs = (await getCollection("docs")).map((d) => ({
-    kind: "doc",
-    id: d.data.id,
-    anchor: anchorFor.doc(d.data.id),
-    title: d.data.title,
-    family: null,
-    text: [d.data.title, d.data.summary].join(" ").toLowerCase(),
-  }));
-  const tokens = Object.entries(defaultTokens).map(([path, t]) => ({
-    kind: "token",
-    id: path,
-    anchor: anchorFor.token(path),
-    title: path,
-    family: null,
-    text: [path, t.css, t.description ?? ""].join(" ").toLowerCase(),
-  }));
-  return new Response(JSON.stringify({ entries: [...docs, ...components, ...tokens] }), {
-    headers: { "content-type": "application/json; charset=utf-8" },
-  });
-};
+/* Compatibility endpoint; identical data, no second index implementation. */
+export { searchResponse as GET } from "../scripts/search-index";
diff --git a/site/src/pages/search.json.ts b/site/src/pages/search.json.ts
index 74c8a8184..b3c0133e2 100644
--- a/site/src/pages/search.json.ts
+++ b/site/src/pages/search.json.ts
@@ -1,21 +1,2 @@
-import { getCollection } from "astro:content";
-import { defaultTokens } from "../lib/theme";
-import { withBase } from "../lib/base";
-import { anchorFor } from "../../../scripts/lib/anchors.mjs";
-
-export async function GET() {
-  const entries: { category: string; label: string; href: string; value?: string }[] = [];
-  const add = (category: string, label: string, path: string, value?: string) => entries.push({ category, label, href: withBase(path), ...(value ? { value } : {}) });
-  for (const component of (await getCollection("components")).sort((a, b) => a.id.localeCompare(b.id, "en"))) add("COMP", `${component.data.name} / ${component.id}`, `components/${component.id}/`);
-  for (const [name, token] of Object.entries(defaultTokens).sort(([a], [b]) => a.localeCompare(b, "en"))) add("TOKEN", name, `tokens/${name}/`, token.css);
-  const docs = (await getCollection("docs")).sort((a, b) => a.data.order - b.data.order);
-  for (const doc of docs) add("SPEC", doc.data.title, `reference/#${anchorFor.doc(doc.id)}`);
-  for (const match of (docs.find(doc => doc.id === "decisions")?.body ?? "").matchAll(/^## (D-\d+)\s+(.+)$/gm)) add("DECISION", `${match[1]} ${match[2]}`, `reference/#${anchorFor.decision(match[1])}`);
-  for (const [path, label] of [["workbench/", "State workbench, viewport and contrast lab"], ["builder/", "Form builder"], ["kit/", "Mapping task kit"], ["figma/", "Figma Variables bridge"], ["verification/", "Execution evidence"], ["recipes/", "Standalone HTML recipes"]]) add("TOOL", label, path);
-  add("PATTERN", "Validation and recovery", "patterns/validation-recovery/");
-  add("AGENT", "Component package, copy and mapping kits", "agents/");
-  add("AGENT", "Installation and framework integration", "implement/");
-  add("PORT", "Port capabilities and mapping evidence", "ports/");
-  add("RELEASE", "Pinned release comparison", "releases/");
-  return new Response(JSON.stringify(entries.map((entry, index) => ({ id: anchorFor.uiExample("portal", `search-${index}`), ...entry }))), { headers: { "Content-Type": "application/json; charset=utf-8" } });
-}
+/* Canonical static search data. */
+export { searchResponse as GET } from "../scripts/search-index";
diff --git a/site/src/pages/tokens/[token].astro b/site/src/pages/tokens/[token].astro
index e865afb54..eb85179ca 100644
--- a/site/src/pages/tokens/[token].astro
+++ b/site/src/pages/tokens/[token].astro
@@ -1,50 +1,71 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import SourceLink from "../../components/SourceLink.astro";
 import { usageIndex, tokenUrl } from "../../lib/usage";
 import { withBase } from "../../lib/base";
 import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
+import "../../styles/components/description-list.css";
+
 export function getStaticPaths() {
   return Object.keys(usageIndex.profiles.default.tokens).map((token) => ({ params: { token } }));
 }
+
 const path = Astro.params.token!;
 const primary = usageIndex.profiles.default.tokens[path];
 ---
-<ToolLayout title={path} description={primary.description ?? "Documented token values and dependencies."}>
-  <p><a href={withBase(`tokens/?query=${encodeURIComponent(path)}`)}>Find related usage</a> · <a href={`${withBase("")}#${anchorFor.token(path)}`}>Specification anchor</a> · <a href={`${withBase("")}#contrast-report`}>Measured contrast report (default profile)</a></p>
-  <p><a href={withBase(`report/?token=${encodeURIComponent(path)}`)}>Report an issue with this token</a></p>
-  <div class="copy-target"><code>{path}</code><button class="copy-button js-only" type="button" data-copy={path} aria-label={`Copy token path ${path}`}>copy path</button></div>
-  <div class="copy-target"><code>{primary.variable}</code><button class="copy-button js-only" type="button" data-copy={primary.variable} aria-label={`Copy CSS variable ${path}`}>copy variable</button></div>
-  <nav aria-label="Profile details">{Object.keys(usageIndex.profiles).map((profile) => <a href={`#${anchorFor.tokenProfile(path, profile)}`}>{profile} </a>)}</nav>
+<SiteLayout title={path} description={primary.description ?? "Documented token values and dependencies."} revision>
+  <div class="site-actions">
+    <a class="link link-standalone" href={withBase(`tokens/?query=${encodeURIComponent(path)}`)}>Find related usage</a>
+    <a class="link link-standalone" href={`${withBase("reference/")}#${anchorFor.token(path)}`}>Specification anchor</a>
+    <a class="link link-standalone" href={`${withBase("reference/contrast/")}#contrast-report`}>Measured contrast report (default profile)</a>
+    <a class="link link-standalone" href={withBase(`report/?token=${encodeURIComponent(path)}`)}>Report an issue with this token</a>
+  </div>
+  <div class="site-actions js-only">
+    <code>{path}</code>
+    <button class="button button-secondary" type="button" data-copy={path} aria-label={`Copy token path ${path}`}>Copy path</button>
+    <code>{primary.variable}</code>
+    <button class="button button-secondary" type="button" data-copy={primary.variable} aria-label={`Copy CSS variable ${path}`}>Copy variable</button>
+  </div>
+  <nav class="site-actions" aria-label="Profile details">
+    {Object.keys(usageIndex.profiles).map((profile) => <a class="link link-standalone" href={`#${anchorFor.tokenProfile(path, profile)}`}>{profile}</a>)}
+  </nav>
   {Object.entries(usageIndex.profiles).map(([profile, data]) => {
     const token = data.tokens[path];
-    return <section class="usage-section" id={anchorFor.tokenProfile(path, profile)}>
+    return <section class="site-section usage-section" id={anchorFor.tokenProfile(path, profile)}>
       <h2>{profile} · {data.status}</h2>
-      <dl class="usage-metadata">
-        <dt>Resolved value</dt><dd><code>{token.css}</code></dd>
-        <dt>Status</dt><dd>{token.status}{token.deprecated && ` · deprecated: ${token.deprecated}`}</dd>
-        <dt>Consumption</dt><dd>{token.eligibility.action} — {token.eligibility.reason}</dd>
-        <dt>Decisions</dt><dd>{token.eligibility.decisionIds.length ? token.eligibility.decisionIds.map((id) => <a href={`${withBase("")}#${anchorFor.decision(id)}`}>{id} </a>) : "None pending."}</dd>
-        <dt>Source</dt><dd><SourceLink source={token.source} /></dd>
-        <dt>Alias chain</dt><dd>{token.aliases.length ? token.aliases.map((alias) => <><a href={tokenUrl(alias)}><code>{alias}</code></a> </>) : "Literal value; no alias dependencies."}</dd>
-        <dt>Used by aliases</dt><dd>{token.usedByAliases.length ? token.usedByAliases.map((alias) => <><a href={tokenUrl(alias)}><code>{alias}</code></a> </>) : "No declared aliases depend on this role."}</dd>
+      <dl class="description-list">
+        <div><dt>Resolved value</dt><dd><code>{token.css}</code></dd></div>
+        <div><dt>Status</dt><dd>{token.status}{token.deprecated && ` · deprecated: ${token.deprecated}`}</dd></div>
+        <div><dt>Consumption</dt><dd>{token.eligibility.action} — {token.eligibility.reason}</dd></div>
+        <div><dt>Decisions</dt><dd>{token.eligibility.decisionIds.length ? token.eligibility.decisionIds.map((id) => <a class="link" href={`${withBase("reference/decisions/")}#${anchorFor.decision(id)}`}>{id} </a>) : "None pending."}</dd></div>
+        <div><dt>Source</dt><dd><SourceLink source={token.source} /></dd></div>
+        <div><dt>Alias chain</dt><dd>{token.aliases.length ? token.aliases.map((alias) => <><a class="link" href={tokenUrl(alias)}><code>{alias}</code></a> </>) : "Literal value; no alias dependencies."}</dd></div>
+        <div><dt>Used by aliases</dt><dd>{token.usedByAliases.length ? token.usedByAliases.map((alias) => <><a class="link" href={tokenUrl(alias)}><code>{alias}</code></a> </>) : "No declared aliases depend on this role."}</dd></div>
       </dl>
       <h3>Provenance and restrictions</h3>
-      <pre><code>{JSON.stringify(token.provenance, null, 2)}</code></pre>
+      <pre class="site-code"><code>{JSON.stringify(token.provenance, null, 2)}</code></pre>
       <h3>Declared component and port usage</h3>
-      {token.uses.length ? <div class="table-scroll" tabindex="0" role="region" aria-label={`${profile} declared usage`}>
-        <table class="spec-table usage-table"><thead><tr><th scope="col">Consumer / kind</th><th scope="col">Part / variant</th><th scope="col">State / surface</th><th scope="col">Source declaration</th></tr></thead>
-          <tbody>{token.uses.map((use) => <tr>
-            <td>{use.component ? <a href={`${withBase("")}#${anchorFor.component(use.component)}`}>{use.component}</a> : use.port ?? "Shared rule"} · {use.kind}{use.nativeKey && <code>{use.nativeKey}</code>}</td>
-            <td>{use.part ?? "—"}{use.variant && ` · ${use.variant}`}</td>
-            <td>{use.state ?? "—"}{use.surface && <> · <a href={tokenUrl(use.surface)}>{use.surface}</a></>}</td>
-            <td><SourceLink source={use.source} /></td>
-          </tr>)}</tbody>
+      {token.uses.length ? <div class="site-table-wrap" tabindex="0" role="region" aria-label={`${profile} declared usage`}>
+        <table class="table">
+          <thead><tr><th class="table-header" scope="col">Consumer / kind</th><th class="table-header" scope="col">Part / variant</th><th class="table-header" scope="col">State / surface</th><th class="table-header" scope="col">Source declaration</th></tr></thead>
+          <tbody class="table-body">
+            {token.uses.map((use) => <tr class="table-row">
+              <td class="table-cell">{use.component ? <a class="link" href={`${withBase(`components/${use.component}/`)}#${anchorFor.component(use.component)}`}>{use.component}</a> : use.port ?? "Shared rule"} · {use.kind}{use.nativeKey && <code>{use.nativeKey}</code>}</td>
+              <td class="table-cell">{use.part ?? "—"}{use.variant && ` · ${use.variant}`}</td>
+              <td class="table-cell">{use.state ?? "—"}{use.surface && <> · <a class="link" href={tokenUrl(use.surface)}>{use.surface}</a></>}</td>
+              <td class="table-cell"><SourceLink source={use.source} /></td>
+            </tr>)}
+          </tbody>
         </table>
       </div> : <p>No declared component or port mapping. Unindexed consumers are unknown.</p>}
-      {token.unmappedPorts.length > 0 && <><h3>Declared unmapped ports</h3><ul>{token.unmappedPorts.map((port) => <li>{port.port}: {port.reason} · <SourceLink source={port.source} /></li>)}</ul></>}
+      {token.unmappedPorts.length > 0 && <>
+        <h3>Declared unmapped ports</h3>
+        <ul>{token.unmappedPorts.map((port) => <li>{port.port}: {port.reason} · <SourceLink source={port.source} /></li>)}</ul>
+      </>}
       <h3>Relevant contrast declarations</h3>
-      {token.contrast.length ? <ul>{token.contrast.map((pair) => <li>{pair.label ?? "Declared pair"}: <a href={tokenUrl(pair.fg)}>{pair.fg}</a> on <a href={tokenUrl(pair.bg)}>{pair.bg}</a> · <SourceLink source={pair.source} /></li>)}</ul> : <p>No contrast pair is declared for this role.</p>}
+      {token.contrast.length
+        ? <ul>{token.contrast.map((pair) => <li>{pair.label ?? "Declared pair"}: <a class="link" href={tokenUrl(pair.fg)}>{pair.fg}</a> on <a class="link" href={tokenUrl(pair.bg)}>{pair.bg}</a> · <SourceLink source={pair.source} /></li>)}</ul>
+        : <p>No contrast pair is declared for this role.</p>}
     </section>;
   })}
-</ToolLayout>
+</SiteLayout>
diff --git a/site/src/pages/tokens/index.astro b/site/src/pages/tokens/index.astro
index 7b5a868da..c3706e083 100644
--- a/site/src/pages/tokens/index.astro
+++ b/site/src/pages/tokens/index.astro
@@ -1,36 +1,57 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import TextField from "../../components/fields/TextField.astro";
+import SelectField from "../../components/fields/SelectField.astro";
+import Checkbox from "../../components/fields/Checkbox.astro";
 import { usageIndex, tokenUrl } from "../../lib/usage";
 import { anchorFor } from "../../../../scripts/lib/anchors.mjs";
-import { queryIndexOf } from "../../../../scripts/lib/usage-query.mjs";
+import { withBase } from "../../lib/base";
+
 const tokens = Object.values(usageIndex.profiles.default.tokens);
 const uses = tokens.flatMap((t) => t.uses);
 const values = (key: string) => [...new Set(uses.map((u) => u[key]).filter(Boolean))].sort();
-const fields = { group: [...new Set(tokens.map((t) => t.group))].sort(), component: values("component"), part: values("part"), state: values("state"), variant: values("variant"), surface: values("surface"), status: [...new Set(Object.values(usageIndex.profiles).flatMap((p) => Object.values(p.tokens).map((t) => t.status)))].sort() };
+const fields = {
+  group: [...new Set(tokens.map((t) => t.group))].sort(),
+  component: values("component"),
+  part: values("part"),
+  state: values("state"),
+  variant: values("variant"),
+  surface: values("surface"),
+  status: [...new Set(Object.values(usageIndex.profiles).flatMap((p) => Object.values(p.tokens).map((t) => t.status)))].sort(),
+};
 ---
-<ToolLayout title="Token usage" description="Choose roles by their documented component, part, state and surface. Equal colours do not imply interchangeable roles.">
+<SiteLayout title="Token usage" description="Choose roles by their documented component, part, state and surface. Equal colours do not imply interchangeable roles." revision>
   <p>Choose a role group, then narrow by component, part or state. Filters use documented relationships; unknown combinations return no match.</p>
-  <form class="usage-filters js-only" id="usage-filters">
-    <label>Path, variable, hex or words<input name="query" type="search" /></label>
-    <div><label for={anchorFor.usageControl("profile")}>Profile</label><select id={anchorFor.usageControl("profile")} name="profile">{Object.keys(usageIndex.profiles).map((id) => <option value={id}>{id}</option>)}</select></div>
-    {Object.entries(fields).map(([name, choices]) => <div><label for={anchorFor.usageControl(name)}>{name}</label><select id={anchorFor.usageControl(name)} name={name}><option value="">All</option>{choices.map((v) => <option value={v}>{v}</option>)}</select></div>)}
-    <label>Permitted roles only<input type="checkbox" name="eligible" /></label>
-    <button type="reset">Reset filters</button>
+  <form class="site-filters js-only" id="usage-filters">
+    <TextField id={anchorFor.usageControl("query")} label="Path, variable, hex or words" name="query" type="search" />
+    <SelectField id={anchorFor.usageControl("profile")} label="Profile" name="profile">
+      {Object.keys(usageIndex.profiles).map((id) => <option value={id}>{id}</option>)}
+    </SelectField>
+    {Object.entries(fields).map(([name, choices]) => <SelectField id={anchorFor.usageControl(name)} label={name} name={name}>
+      <option value="">All</option>
+      {choices.map((v) => <option value={v}>{v}</option>)}
+    </SelectField>)}
+    <Checkbox name="eligible">Permitted roles only</Checkbox>
+    <button class="button button-secondary" type="reset">Reset filters</button>
   </form>
   <p id="usage-count" role="status" aria-live="polite"></p>
   <p id="usage-empty" hidden>No documented match. Clear a facet or consult the component specification; similarity in colour is not a substitute for a documented relationship.</p>
-  {Object.entries(usageIndex.profiles).map(([profile, data]) => <section class="usage-section" data-usage-profile={profile}>
+  {Object.entries(usageIndex.profiles).map(([profile, data]) => <section class="site-section usage-section" data-usage-profile={profile}>
     <h2>{profile} · {data.status}</h2>
-    <div class="table-scroll" tabindex="0" role="region" aria-label={`${profile} token usage`}>
-      <table class="spec-table usage-table">
-        <thead><tr><th scope="col">Role</th><th scope="col">Value</th><th scope="col">Eligibility</th><th scope="col">Documented use</th></tr></thead>
-        <tbody>{Object.values(data.tokens).map((token) => <tr data-usage-path={token.path}>
-          <td><a href={tokenUrl(token.path)}><code>{token.path}</code></a></td><td><code>{token.css}</code></td>
-          <td>{token.status} · {token.eligibility.action}{token.deprecated && " · deprecated"}</td><td>{token.description ?? "No role description declared."}</td>
-        </tr>)}</tbody>
+    <div class="site-table-wrap" tabindex="0" role="region" aria-label={`${profile} token usage`}>
+      <table class="table">
+        <thead><tr><th class="table-header" scope="col">Role</th><th class="table-header" scope="col">Value</th><th class="table-header" scope="col">Eligibility</th><th class="table-header" scope="col">Documented use</th></tr></thead>
+        <tbody class="table-body">
+          {Object.values(data.tokens).map((token) => <tr class="table-row" data-usage-path={token.path} id={profile === "default" ? anchorFor.token(token.path) : undefined}>
+            <td class="table-cell"><a class="link" href={tokenUrl(token.path)} data-token={token.path}><code>{token.path.split(".").map((segment, index) => <>{index > 0 && <>.<wbr /></>}{segment}</>)}</code></a></td>
+            <td class="table-cell"><code>{token.css}</code></td>
+            <td class="table-cell">{token.status} · {token.eligibility.action}{token.deprecated && " · deprecated"}</td>
+            <td class="table-cell">{token.description ?? "No role description declared."}</td>
+          </tr>)}
+        </tbody>
       </table>
     </div>
   </section>)}
-  <script type="application/json" id="usage-data" set:html={JSON.stringify(queryIndexOf(usageIndex)).replaceAll("<", "\\u003c")} />
+  <div id="usage-data" data-source={withBase("tokens/query.json")}></div>
   <script>import "../../scripts/usage";</script>
-</ToolLayout>
+</SiteLayout>
diff --git a/site/src/pages/tokens/inspector.json.ts b/site/src/pages/tokens/inspector.json.ts
new file mode 100644
index 000000000..00f253dcb
--- /dev/null
+++ b/site/src/pages/tokens/inspector.json.ts
@@ -0,0 +1,7 @@
+/* Static inspector data is requested only after a token/swatch interaction. */
+import { tokenColorIndex } from "../../../../scripts/lib/hex-literals.mjs";
+import { profiles, defaultProfileId, theme } from "../../lib/theme";
+export function GET() {
+  const data = Object.fromEntries(Object.entries(profiles).map(([id, profile]) => [id, Object.fromEntries(Object.entries(profile.tokens).map(([path, token]) => [path, [token.css, token.aliasOf ?? "", token.status, token.description ?? "", token.eligibility, token.deprecated]]))]));
+  return new Response(JSON.stringify({ defaultProfile: defaultProfileId, version: theme.version, profiles: data, colorIndex: tokenColorIndex(profiles) }), { headers: { "Content-Type": "application/json; charset=utf-8" } });
+}
diff --git a/site/src/pages/tokens/query.json.ts b/site/src/pages/tokens/query.json.ts
new file mode 100644
index 000000000..a1ed60925
--- /dev/null
+++ b/site/src/pages/tokens/query.json.ts
@@ -0,0 +1,6 @@
+/* Search relationships stay out of the static, readable token tables. */
+import { usageIndex } from "../../lib/usage";
+import { queryIndexOf } from "../../../../scripts/lib/usage-query.mjs";
+export function GET() {
+  return new Response(JSON.stringify(queryIndexOf(usageIndex)), { headers: { "Content-Type": "application/json; charset=utf-8" } });
+}
diff --git a/site/src/pages/tools/index.astro b/site/src/pages/tools/index.astro
index 6f4552f92..4f00920da 100644
--- a/site/src/pages/tools/index.astro
+++ b/site/src/pages/tools/index.astro
@@ -1,6 +1,23 @@
 ---
-import PortalLayout from "../../layouts/PortalLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import { withBase } from "../../lib/base";
-const tools = [["tokens/", "Token explorer", "Inspect values, uses, provenance and eligibility."], ["workbench/", "State workbench", "Compare canonical variants and states."], ["builder/", "Form builder", "Compose and export the bounded five-kind form model."], ["kit/", "Mapping task kit", "Prepare canonical inputs for an incompatible or native host."], ["figma/", "Figma Variables bridge", "Generate portable variable collections."], ["verification/", "Execution evidence", "Inspect revision-aware automated results and explicit limits."]];
+
+const tools = [
+  ["tokens/", "Token explorer", "Inspect values, uses, provenance and eligibility."],
+  ["workbench/", "State workbench", "Compare canonical variants and states."],
+  ["builder/", "Form builder", "Compose and export the bounded five-kind form model."],
+  ["kit/", "Mapping task kit", "Prepare canonical inputs for an incompatible or native host."],
+  ["recipes/", "Standalone recipes", "Copy a maintained specimen with scoped styles and no framework."],
+  ["figma/", "Figma Variables bridge", "Generate portable variable collections."],
+  ["report/", "Report an issue", "Prepare a public issue for a component or token."],
+  ["verification/", "Execution evidence", "Inspect revision-aware automated results and explicit limits."],
+];
 ---
-<PortalLayout title="Tools" description="Inspect the specification, prepare application inputs and verify what has actually been exercised."><div class="portal-grid">{tools.map(([path, title, description]) => <a class="portal-card" href={withBase(path)}><h2>{title} →</h2><p>{description}</p></a>)}</div></PortalLayout>
+<SiteLayout title="Tools" description="Inspect the specification, prepare application inputs and verify what has actually been exercised.">
+  <div class="site-cards">
+    {tools.map(([path, title, description]) => <a class="card card-link" href={withBase(path)}>
+      <span class="card-title">{title} →</span>
+      <span class="card-body">{description}</span>
+    </a>)}
+  </div>
+</SiteLayout>
diff --git a/site/src/pages/workbench/[id].astro b/site/src/pages/workbench/[id].astro
index b47f59591..c3e69e77b 100644
--- a/site/src/pages/workbench/[id].astro
+++ b/site/src/pages/workbench/[id].astro
@@ -1,11 +1,17 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import Workbench from "../../components/Workbench.astro";
 import { PREVIEW_IDS } from "../../../../schemas/playground.mjs";
 import { buildWorkbenchData } from "../../lib/workbench";
 import "../../styles/workbench.css";
 import.meta.glob("../../styles/components/*.css", { eager: true });
-export function getStaticPaths() { return PREVIEW_IDS.map((id) => ({ params: { id } })); }
+
+export function getStaticPaths() {
+  return PREVIEW_IDS.map((id) => ({ params: { id } }));
+}
+
 const data = await buildWorkbenchData(Astro.params.id!);
 ---
-<ToolLayout title={`${data.contract.name} workbench`} description="Inspect maintained specimens, states, viewport behavior, anatomy and contrast."><Workbench data={data} /></ToolLayout>
+<SiteLayout title={`${data.contract.name} workbench`} description="Inspect maintained specimens, states, viewport behavior, anatomy and contrast." revision>
+  <Workbench data={data} />
+</SiteLayout>
diff --git a/site/src/pages/workbench/index.astro b/site/src/pages/workbench/index.astro
index 694310d7a..68e36c597 100644
--- a/site/src/pages/workbench/index.astro
+++ b/site/src/pages/workbench/index.astro
@@ -1,10 +1,12 @@
 ---
-import ToolLayout from "../../layouts/ToolLayout.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
 import { PREVIEW_IDS } from "../../../../schemas/playground.mjs";
 import { withBase } from "../../lib/base";
 ---
-<ToolLayout title="Component workbench" description="Live controls and bounded inspection tools for maintained j3w1 specimens.">
+<SiteLayout title="Component workbench" description="Live controls and bounded inspection tools for maintained j3w1 specimens." revision>
   <p>Open a component to inspect its declared states, profile, density, text, real viewport widths, anatomy, contrast, and maintained motion. Configuration links identify the supplying build and report unavailable snapshots honestly.</p>
-  <ul>{PREVIEW_IDS.map((id) => <li><a href={withBase(`workbench/${id}/`)}>{id}</a></li>)}</ul>
-  <p>Normative rules remain in the <a href={withBase("")}>complete static specification</a>. Workbench behavior is a reference implementation for these specimens; standalone recipes continue to declare their own behavior dependencies.</p>
-</ToolLayout>
+  <div class="site-cards">
+    {PREVIEW_IDS.map((id) => <a class="card card-link" href={withBase(`workbench/${id}/`)}><span class="card-title">{id} →</span></a>)}
+  </div>
+  <p>Normative rules remain in the <a class="link" href={withBase("reference/")}>complete static specification</a>. Workbench behavior is a reference implementation for these specimens; standalone recipes continue to declare their own behavior dependencies.</p>
+</SiteLayout>
diff --git a/site/src/scripts/agent-kit.ts b/site/src/scripts/agent-kit.ts
index 81c97948e..f94d09de2 100644
--- a/site/src/scripts/agent-kit.ts
+++ b/site/src/scripts/agent-kit.ts
@@ -1,4 +1,4 @@
-import { copyText } from "./clipboard";
+import { copyWithStatus } from "./clipboard";
 const root = document.querySelector<HTMLElement>("[data-agent-kit]");
 if (root) {
   const form = root.querySelector<HTMLFormElement>("form")!;
@@ -18,6 +18,8 @@ if (root) {
   };
   form.addEventListener("submit", event => { event.preventDefault(); prepare(); });
   form.addEventListener("change", prepare);
-  root.querySelector("[data-copy-kit]")!.addEventListener("click", async () => { status.textContent = (await copyText(command.textContent!)) ? "Command copied." : "Select the command above and copy it manually."; });
+  root.querySelector("[data-copy-kit]")!.addEventListener("click", () => {
+    copyWithStatus(command.textContent!, { status, copied: "Command copied.", failed: "Select the command above and copy it manually." });
+  });
   prepare();
 }
diff --git a/site/src/scripts/clipboard.ts b/site/src/scripts/clipboard.ts
index f6fb191c3..89040035f 100644
--- a/site/src/scripts/clipboard.ts
+++ b/site/src/scripts/clipboard.ts
@@ -1,7 +1,7 @@
-/* Writes text to the clipboard and reports whether it worked. The clipboard
-   is looked up at call time, never cached: pages may be given a different
-   one after this module loads (the recipe browser test does exactly that). */
-export const copyText = async (text: string): Promise<boolean> => {
+/* The site's only clipboard writer. The clipboard is looked up at call time,
+   never cached: pages may be given a different one after this module loads
+   (the recipe browser test does exactly that). */
+const copyText = async (text: string): Promise<boolean> => {
   try {
     await navigator.clipboard.writeText(text);
     return true;
@@ -9,3 +9,41 @@ export const copyText = async (text: string): Promise<boolean> => {
     return false;
   }
 };
+
+type Feedback = {
+  /* Reports the outcome as text in this live region. */
+  status?: HTMLElement;
+  /* Otherwise the button itself shows the outcome for 1.5 s. */
+  button?: HTMLElement;
+  copied?: string;
+  failed?: string;
+};
+
+/* A button's own label, captured on its first copy. Reading the label on
+   every click saved "copied" as the label when a second click came before
+   the reset, and the button never recovered (R-g). */
+const labels = new WeakMap<HTMLElement, { text: string; timer: number }>();
+
+export const copyWithStatus = async (source: string | (() => Promise<string>), { status, button, copied = "copied", failed = "copy failed" }: Feedback): Promise<boolean> => {
+  let ok = false;
+  try {
+    ok = await copyText(typeof source === "string" ? source : await source());
+  } catch {
+    ok = false;
+  }
+  const message = ok ? copied : failed;
+  if (status) status.textContent = message;
+  else if (button) {
+    const label = labels.get(button) ?? { text: button.textContent ?? "", timer: 0 };
+    window.clearTimeout(label.timer);
+    button.dataset.copied = String(ok);
+    button.textContent = message;
+    label.timer = window.setTimeout(() => {
+      delete button.dataset.copied;
+      button.textContent = label.text;
+      labels.delete(button);
+    }, 1500);
+    labels.set(button, label);
+  }
+  return ok;
+};
diff --git a/site/src/scripts/copy.ts b/site/src/scripts/copy.ts
index 4d549df05..2bd6866f2 100644
--- a/site/src/scripts/copy.ts
+++ b/site/src/scripts/copy.ts
@@ -2,34 +2,19 @@
    the committed brief text and copies it verbatim, so what the page copies
    is exactly what is in exports/components/<id>.brief.txt. */
 
-import { copyText } from "./clipboard";
+import { copyWithStatus } from "./clipboard";
 
-const flash = (button: HTMLElement, ok: boolean) => {
-  const label = button.textContent;
-  button.dataset.copied = ok ? "true" : "false";
-  button.textContent = ok ? "copied" : "copy failed";
-  window.setTimeout(() => {
-    delete button.dataset.copied;
-    button.textContent = label;
-  }, 1500);
+const brief = async (url: string) => {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Brief unavailable: ${response.status}`);
+  return response.text();
 };
 
-
 export const initCopy = (): void => {
-  document.addEventListener("click", async (event) => {
+  document.addEventListener("click", (event) => {
     const button = (event.target as HTMLElement).closest<HTMLElement>("[data-copy], [data-copy-brief]");
     if (!button) return;
-    if (button.dataset.copy !== undefined) {
-      flash(button, await copyText(button.dataset.copy));
-      return;
-    }
-    const url = button.dataset.copyBrief;
-    if (!url) return;
-    try {
-      const text = await (await fetch(url)).text();
-      flash(button, await copyText(text));
-    } catch {
-      flash(button, false);
-    }
+    if (button.dataset.copy !== undefined) copyWithStatus(button.dataset.copy, { button });
+    else if (button.dataset.copyBrief) copyWithStatus(() => brief(button.dataset.copyBrief!), { button });
   });
 };
diff --git a/site/src/scripts/density.ts b/site/src/scripts/density.ts
index 9459562e0..56fa5bc84 100644
--- a/site/src/scripts/density.ts
+++ b/site/src/scripts/density.ts
@@ -1,21 +1,16 @@
-/* Specimen density (D-009): sets data-density on <html>, which the generated
-   [data-density] blocks in tokens.generated.css turn into --density-* values. */
-
+/* Chrome stays compact (D-038); saved density applies only to specimens. */
 import { KEYS, get, set } from "./storage";
-
-/* The density the layouts render, and the one reset returns to. One constant,
-   so the markup and the reset button cannot drift apart. */
 export const DEFAULT_DENSITY = "compact";
-
+export const applyDensity = (density: string) => {
+  document.documentElement.dataset.demoDensity = density;
+  document.querySelectorAll<HTMLElement>("[data-specimen], .demo, .ladder, .spec-rows, .border-set, .status-set").forEach((target) => { target.dataset.density = density; });
+};
 export const initDensity = (): void => {
   const select = document.getElementById("density") as HTMLSelectElement | null;
-  const root = document.documentElement;
   const stored = get(KEYS.density);
-  if (stored === "compact" || stored === "comfortable") root.setAttribute("data-density", stored);
+  const density = stored === "comfortable" ? stored : DEFAULT_DENSITY;
+  applyDensity(density);
   if (!select) return;
-  select.value = root.getAttribute("data-density") ?? DEFAULT_DENSITY;
-  select.addEventListener("change", () => {
-    root.setAttribute("data-density", select.value);
-    set(KEYS.density, select.value);
-  });
+  select.value = density;
+  select.addEventListener("change", () => { applyDensity(select.value); set(KEYS.density, select.value); });
 };
diff --git a/site/src/scripts/filter.ts b/site/src/scripts/filter.ts
index a98225140..2658fbc43 100644
--- a/site/src/scripts/filter.ts
+++ b/site/src/scripts/filter.ts
@@ -1,31 +1,35 @@
-/* Family filter: checkboxes hide whole family sections. Everything is shown
-   by default; the selection lives in ?family= so it can be shared. */
-
+/* Search and family selection meet here, including their contents entries. */
+export const refreshVisibility = (): number => {
+  const boxes = [...document.querySelectorAll<HTMLInputElement>('#family-filter input[name="family"]')];
+  const on = new Set(boxes.filter((box) => box.checked).map((box) => box.value));
+  const sections = [...document.querySelectorAll<HTMLElement>("section.component")];
+  let shown = 0;
+  for (const section of sections) {
+    section.hidden = section.dataset.searchMatch === "false" || (boxes.length > 0 && !on.has(section.dataset.family ?? ""));
+    if (!section.hidden) shown++;
+    const link = document.querySelector<HTMLElement>(`[data-toc-component="${section.dataset.component}"]`);
+    if (link?.parentElement) link.parentElement.hidden = section.hidden;
+  }
+  document.querySelectorAll<HTMLElement>("section.family[data-family]").forEach((family) => { family.hidden = boxes.length > 0 && !on.has(family.dataset.family ?? ""); });
+  document.dispatchEvent(new CustomEvent("reference-visibility", { detail: shown }));
+  return shown;
+};
 export const initFilter = (): void => {
   const fieldset = document.getElementById("family-filter");
   if (!fieldset) return;
-  const boxes = Array.from(fieldset.querySelectorAll<HTMLInputElement>('input[name="family"]'));
-
-  const apply = () => {
-    const on = new Set(boxes.filter((b) => b.checked).map((b) => b.value));
-    document.querySelectorAll<HTMLElement>("section.family[data-family]").forEach((s) => {
-      s.hidden = !on.has(s.dataset.family ?? "");
-    });
-    document.querySelectorAll<HTMLElement>("[data-toc-component]").forEach((l) => {
-      const section = document.querySelector<HTMLElement>(`section.component[data-component="${l.dataset.tocComponent}"]`);
-      if (section) (l.parentElement as HTMLElement).hidden = !on.has(section.dataset.family ?? "");
-    });
-    const url = new URL(location.href);
-    if (on.size === boxes.length) url.searchParams.delete("family");
-    else url.searchParams.set("family", [...on].join(","));
-    history.replaceState(null, "", url);
-  };
-
+  const boxes = [...fieldset.querySelectorAll<HTMLInputElement>('input[name="family"]')];
   const initial = new URL(location.href).searchParams.get("family");
-  if (initial) {
-    const wanted = new Set(initial.split(","));
-    boxes.forEach((b) => (b.checked = wanted.has(b.value)));
+  if (initial !== null) {
+    const selected = new Set(initial.split(","));
+    boxes.forEach((box) => { box.checked = selected.has(box.value); });
   }
-  boxes.forEach((b) => b.addEventListener("change", apply));
-  if (initial) apply();
+  fieldset.addEventListener("change", () => {
+    refreshVisibility();
+    const on = boxes.filter((box) => box.checked).map((box) => box.value);
+    const url = new URL(location.href);
+    if (on.length === boxes.length) url.searchParams.delete("family");
+    else url.searchParams.set("family", on.join(","));
+    history.replaceState(null, "", url);
+  });
+  refreshVisibility();
 };
diff --git a/site/src/scripts/inspector.ts b/site/src/scripts/inspector.ts
index 831da13e7..0b475c886 100644
--- a/site/src/scripts/inspector.ts
+++ b/site/src/scripts/inspector.ts
@@ -1,9 +1,10 @@
 /* Token inspector: hovering or focusing any [data-token] element shows the
    role's path, CSS variable, resolved value per profile, alias and status,
-   read from the JSON the layout embedded. Escape closes it. The same data is
+   fetched from shared static data on first interaction. Escape closes it. The same data is
    in the token tables, so nothing is lost without JavaScript. */
 
 import { anchorFor } from "../../../scripts/lib/anchors.mjs";
+import { loadStaticJson } from "./search-loader";
 import { renderHexText, escapeHtml } from "../../../scripts/lib/hex-literals.mjs";
 import { withBase } from "../lib/base";
 type Row = [css: string, aliasOf: string, status: string, description: string, eligibility: { action: string; reason: string; decisionIds: string[] }, deprecated: boolean | string];
@@ -12,9 +13,10 @@ type Data = { defaultProfile: string; version: string; profiles: Record<string,
 
 export const initInspector = (): void => {
   const box = document.getElementById("inspector");
-  const raw = document.getElementById("j3w1-tokens")?.textContent;
-  if (!box || !raw) return;
-  const data = JSON.parse(raw) as Data;
+  const source = box?.dataset.inspectorSource;
+  if (!box || !source) return;
+  let data: Data;
+  const load = async () => { data = await loadStaticJson<Data>(source); return data; };
   const preview = document.createElement("div");
   preview.id = "hex-popup";
   preview.className = "inspector hex-popup";
@@ -43,11 +45,14 @@ export const initInspector = (): void => {
     popup.style.top = `${rect.bottom + 6 + popup.offsetHeight > innerHeight ? Math.max(8, rect.top - popup.offsetHeight - 6) : rect.bottom + 6}px`;
   };
   const placePreview = () => placeByPointer(preview, pointer);
-  document.addEventListener("pointermove", (event) => {
+  document.addEventListener("pointermove", async (event) => {
     const target = event.target instanceof Element ? event.target.closest<HTMLElement>(".hex-swatch[data-token-matches]") : null;
     if (!target || box.contains(target) || !["mouse", "pen"].includes(event.pointerType)) { closePreview(); return; }
     pointer = { x: event.clientX, y: event.clientY };
     if (circle !== target) {
+      circle = target;
+      try { await load(); } catch { closePreview(); return; }
+      if (circle !== target) return;
       const matches = data.colorIndex[target.dataset.tokenMatches ?? ""] ?? [];
       preview.innerHTML = `<p>Exact value matches; equality does not assign a role.</p><ul>${matches.map((match) => `<li>${escapeHtml(match.profile)}: <code>${escapeHtml(match.path)}</code></li>`).join("")}</ul>`;
       circle = target;
@@ -79,18 +84,21 @@ export const initInspector = (): void => {
   let current: HTMLElement | null = null;
   const text = (value: string) => renderHexText(value, data.colorIndex);
 
-  const show = (target: HTMLElement, byPointer = false) => {
+  const show = async (target: HTMLElement, byPointer = false) => {
     if (box.contains(target)) return;
+    current = target;
+    try { await load(); } catch { return; }
+    if (current !== target) return;
     const path = target.dataset.token ?? "";
     const profiles = Object.entries(data.profiles);
     const main = data.profiles[data.defaultProfile]?.[path];
     if (target.dataset.tokenMatches) {
       const matches = data.colorIndex[target.dataset.tokenMatches] ?? [];
-      box.innerHTML = `<p>Exact value matches; equality does not assign a role.</p><ul>${matches.map((match) => `<li>${escapeHtml(match.profile)}: <a href="#${anchorFor.token(match.path)}"><code>${escapeHtml(match.path)}</code></a></li>`).join("")}</ul>`;
+      box.innerHTML = `<p>Exact value matches; equality does not assign a role.</p><ul>${matches.map((match) => `<li>${escapeHtml(match.profile)}: <a href="${withBase("tokens/")}#${anchorFor.token(match.path)}"><code>${escapeHtml(match.path)}</code></a></li>`).join("")}</ul>`;
     } else {
       if (!main) return;
-      const rows = profiles.map(([id, tokens]) => `<dt>${escapeHtml(id)}</dt><dd><code>${text(tokens[path]?.[0] ?? "—")}</code> ${escapeHtml(tokens[path]?.[2] ?? "unresolved")} ${tokens[path]?.[4].action ?? "blocked"}${tokens[path]?.[5] ? " deprecated" : ""} ${(tokens[path]?.[4].decisionIds ?? []).map((id) => `<a href="#${anchorFor.decision(id)}">${id}</a>`).join(" ")}</dd>`).join("");
-      box.innerHTML = `<dl><dt>role</dt><dd><code>${escapeHtml(path)}</code></dd><dt>css</dt><dd><code>--${escapeHtml(path.replaceAll(".", "-"))}</code></dd>${rows}<dt>alias of</dt><dd><code>${escapeHtml(main[1] || "—")}</code></dd><dt>status</dt><dd>${escapeHtml(main[2])}</dd>${main[3] ? `<dt>use</dt><dd>${text(main[3])}</dd>` : ""}<dt>anchor</dt><dd><a href="#${anchorFor.token(path)}">#${anchorFor.token(path)}</a></dd></dl>`;
+      const rows = profiles.map(([id, tokens]) => `<dt>${escapeHtml(id)}</dt><dd><code>${text(tokens[path]?.[0] ?? "—")}</code> ${escapeHtml(tokens[path]?.[2] ?? "unresolved")} ${tokens[path]?.[4].action ?? "blocked"}${tokens[path]?.[5] ? " deprecated" : ""} ${(tokens[path]?.[4].decisionIds ?? []).map((id) => `<a href="${withBase("reference/decisions/")}#${anchorFor.decision(id)}">${id}</a>`).join(" ")}</dd>`).join("");
+      box.innerHTML = `<dl><dt>role</dt><dd><code>${escapeHtml(path)}</code></dd><dt>css</dt><dd><code>--${escapeHtml(path.replaceAll(".", "-"))}</code></dd>${rows}<dt>alias of</dt><dd><code>${escapeHtml(main[1] || "—")}</code></dd><dt>status</dt><dd>${escapeHtml(main[2])}</dd>${main[3] ? `<dt>use</dt><dd>${text(main[3])}</dd>` : ""}<dt>anchor</dt><dd><a href="${withBase("reference/")}#${anchorFor.token(path)}">#${anchorFor.token(path)}</a></dd></dl>`;
     }
     if (main) {
       const link = document.createElement("a");
@@ -118,7 +126,7 @@ export const initInspector = (): void => {
     if (!target) return;
     pointer = { x: event.clientX, y: event.clientY };
     if (target === current) placeByPointer(box, pointer);
-    else show(target, true);
+    else void show(target, true);
   });
   document.addEventListener("mouseout", (event) => {
     const target = (event.target as HTMLElement).closest<HTMLElement>("[data-token]");
@@ -127,19 +135,18 @@ export const initInspector = (): void => {
   document.addEventListener("focusin", (event) => {
     const target = (event.target as HTMLElement).closest<HTMLElement>("[data-token]");
     /* Keyboard focus has no pointer to follow; anchor to the element. */
-    if (target) show(target, false);
+    if (target) void show(target, false);
     else if (!box.contains(event.target as Node)) hide();
   });
   document.addEventListener("keydown", (event) => {
     if (event.key === "Escape" && !box.hidden) hide();
   });
-  document.querySelectorAll<HTMLElement>("[data-token]").forEach((el) => {
-    if (!el.hasAttribute("tabindex")) el.tabIndex = 0;
-    el.setAttribute("aria-describedby", "inspector");
-  });
+  /* Native role links in tables/grids already have a keyboard stop. Prose
+     references remain readable text; do not add thousands of duplicate stops. */
+  document.querySelectorAll<HTMLElement>("a[data-token]").forEach((el) => { el.setAttribute("aria-describedby", "inspector"); });
   /* A native token link can receive focus before this enhancement loads.
      Preserve that focus and restore the missed inspector, without refocusing. */
   const focused = document.activeElement instanceof HTMLElement
     ? document.activeElement.closest<HTMLElement>("[data-token]") : null;
-  if (focused) show(focused, false);
+  if (focused) void show(focused, false);
 };
diff --git a/site/src/scripts/issue-draft.ts b/site/src/scripts/issue-draft.ts
index ade82474c..24da3d390 100644
--- a/site/src/scripts/issue-draft.ts
+++ b/site/src/scripts/issue-draft.ts
@@ -1,4 +1,5 @@
 import { issueDraft, issueComposer } from "../../../scripts/lib/issue-draft.mjs";
+import { copyWithStatus } from "./clipboard";
 
 export function initializeIssueDraft(root: HTMLElement) {
   if (root.dataset.initialized) return;
@@ -28,8 +29,8 @@ export function initializeIssueDraft(root: HTMLElement) {
   });
   composer.addEventListener("click", (event) => { if (!reviewed.checked || !body.value) event.preventDefault(); });
   copy.addEventListener("click", async () => {
-    try { await navigator.clipboard.writeText(body.value); status.textContent = "Draft copied."; }
-    catch { body.focus(); body.select(); status.textContent = "Clipboard unavailable. The draft is selected for manual copying."; }
+    const copied = await copyWithStatus(body.value, { status, copied: "Draft copied.", failed: "Clipboard unavailable. The draft is selected for manual copying." });
+    if (!copied) { body.focus(); body.select(); }
   });
   root.querySelector("[data-cancel-issue]")!.addEventListener("click", () => { form.reset(); invalidate(); });
 }
diff --git a/site/src/scripts/kit.ts b/site/src/scripts/kit.ts
index 514ebf3f8..ae41d5f32 100644
--- a/site/src/scripts/kit.ts
+++ b/site/src/scripts/kit.ts
@@ -1,7 +1,7 @@
 import { buildTaskKit, zipTaskKit } from "../../../scripts/lib/task-kit.mjs";
 import { anchorFor } from "../../../scripts/lib/anchors.mjs";
 import { withBase } from "../lib/base";
-import { copyText } from "./clipboard";
+import { copyWithStatus } from "./clipboard";
 const { index, source } = JSON.parse(document.getElementById(anchorFor.kitControl("data"))!.textContent!);
 const form = document.querySelector<HTMLFormElement>("[data-kit-form]")!;
 const status = form.querySelector<HTMLElement>("[data-kit-status]")!;
@@ -41,5 +41,5 @@ form.addEventListener("submit", async (event) => {
   finally { button.disabled = false; }
 });
 document.querySelector("[data-kit-copy]")!.addEventListener("click", async () => {
-  status.textContent = (await copyText(markdown)) ? "Complete Markdown kit copied." : "Clipboard unavailable. Select the Markdown text or download the ZIP.";
+  await copyWithStatus(markdown, { status, copied: "Complete Markdown kit copied.", failed: "Clipboard unavailable. Select the Markdown text or download the ZIP." });
 });
diff --git a/site/src/scripts/legacy-hash.ts b/site/src/scripts/legacy-hash.ts
index 1d8b2e068..58781a267 100644
--- a/site/src/scripts/legacy-hash.ts
+++ b/site/src/scripts/legacy-hash.ts
@@ -1,2 +1,17 @@
+/* Old exports retain hub anchors. Static links work without JavaScript;
+   enhanced navigation follows their direct targets without a second stop. */
 import { withBase } from "../lib/base";
-if (location.hash && location.hash !== "#main") location.replace(withBase("reference/") + location.hash);
+const follow = () => {
+  if (!location.hash || location.hash === "#main") return;
+  if (location.pathname === withBase("")) {
+    location.replace(withBase("reference/") + location.hash);
+    return;
+  }
+  let id: string;
+  try { id = decodeURIComponent(location.hash.slice(1)); } catch { return; }
+  const target = document.getElementById(id);
+  const link = target instanceof HTMLAnchorElement && target.hasAttribute("data-legacy-target") ? target : target?.matches("section.component") ? target.querySelector<HTMLAnchorElement>("a[data-legacy-target]") : null;
+  if (link) location.replace(link.href);
+};
+follow();
+window.addEventListener("hashchange", follow);
diff --git a/site/src/scripts/main.ts b/site/src/scripts/main.ts
index 9b038bb5a..8cc9bd890 100644
--- a/site/src/scripts/main.ts
+++ b/site/src/scripts/main.ts
@@ -4,32 +4,23 @@
 
 import { initSearch } from "./search";
 import { initFilter } from "./filter";
-import { initInspector } from "./inspector";
-import { initCopy } from "./copy";
+
 import { initDensity } from "./density";
 import { initProfile } from "./profile";
 import { initReset } from "./reset";
 import { initPrint } from "./print";
 import { initToc } from "./toc";
 import { initWorkbenchEntry } from "./workbench-entry";
-import { enhanceControls } from "@j3w1/ui/enhance/choice";
 
-/* SpecLayout's pre-paint inline script has already marked <html> with .js. */
+
+/* The shared layout has already marked <html> with .js. */
 
 initDensity();
 initProfile();
 initSearch();
 initFilter();
-initInspector();
-initCopy();
 initReset();
 initPrint();
 initToc();
 initWorkbenchEntry();
 
-/* The page's own chrome takes the themed controls. It is scoped to #controls
-   and never the document: this page renders every component as a native
-   specimen in forced states, and enhancing those would replace the very thing
-   the reference exists to show. */
-const chrome = document.getElementById("controls");
-if (chrome) enhanceControls(chrome);
diff --git a/site/src/scripts/portal-search.ts b/site/src/scripts/portal-search.ts
index 627b7a6b0..5aacb957f 100644
--- a/site/src/scripts/portal-search.ts
+++ b/site/src/scripts/portal-search.ts
@@ -1,3 +1,4 @@
+import { loadSearchIndex } from "./search-loader";
 import { renderHexText } from "../../../scripts/lib/hex-literals.mjs";
 
 const root = document.querySelector<HTMLElement>("[data-search-index]");
@@ -27,19 +28,16 @@ if (root) {
     input.setAttribute("aria-busy", "true");
     pending = (async () => {
       try {
-        const response = await fetch(indexUrl);
-        if (!response.ok) throw new Error("Index unavailable");
-        const entries = await response.json();
-        if (!Array.isArray(entries)) throw new Error("Invalid index");
+        const { entries } = await loadSearchIndex();
         const fragment = document.createDocumentFragment();
         for (const entry of entries) {
-          if (typeof entry.id !== "string" || !/^[a-z0-9-]+$/.test(entry.id) || typeof entry.category !== "string" || typeof entry.label !== "string" || typeof entry.href !== "string" || (entry.value !== undefined && typeof entry.value !== "string")) throw new Error("Invalid command");
+          if (typeof entry.id !== "string" || !/^[a-z0-9-]+$/.test(entry.commandId) || typeof entry.category !== "string" || typeof entry.label !== "string" || typeof entry.href !== "string" || (entry.value !== undefined && typeof entry.value !== "string")) throw new Error("Invalid command");
           const target = commandTarget(entry.href);
           const option = document.createElement("li");
-          option.id = entry.id; option.setAttribute("role", "option"); option.tabIndex = -1; option.dataset.action = target.href;
-          const category = document.createElement("span"); category.className = "portal-command-category"; category.textContent = entry.category + " ";
-          const label = document.createElement("span"); label.className = "portal-command-label"; label.textContent = entry.label;
-          if (entry.value) { const value = document.createElement("small"); value.className = "portal-command-value"; value.innerHTML = renderHexText(" " + entry.value); label.append(value); }
+          option.id = entry.commandId; option.setAttribute("role", "option"); option.tabIndex = -1; option.dataset.action = target.href;
+          const category = document.createElement("span"); category.className = "site-command-category"; category.textContent = entry.category + " ";
+          const label = document.createElement("span"); label.className = "site-command-label"; label.textContent = entry.label;
+          if (entry.value) { const value = document.createElement("small"); value.className = "site-command-value"; value.innerHTML = renderHexText(" " + entry.value); label.append(value); }
           option.append(category, label); fragment.append(option);
         }
         list.append(fragment);
diff --git a/site/src/scripts/ports-filter.ts b/site/src/scripts/ports-filter.ts
index c04fb064f..41f9886a7 100644
--- a/site/src/scripts/ports-filter.ts
+++ b/site/src/scripts/ports-filter.ts
@@ -2,10 +2,16 @@ const form = document.querySelector<HTMLFormElement>("[data-port-filter]");
 if (form) {
   form.hidden = false;
   const input = form.elements.namedItem("query") as HTMLInputElement;
+  input.value = new URL(location.href).searchParams.get("q") ?? "";
   const apply = () => {
     const query = input.value.trim().toLowerCase();
     let count = 0;
     for (const section of document.querySelectorAll<HTMLElement>("[data-port-entry]")) {
+      if (section.dataset.portSearch !== undefined) {
+        section.hidden = !section.dataset.portSearch.includes(query);
+        if (!section.hidden) count++;
+        continue;
+      }
       const portMatch = section.querySelector("h2")?.textContent?.toLowerCase().includes(query);
       let visible = 0;
       for (const row of section.querySelectorAll<HTMLElement>("[data-port-row]")) {
@@ -14,9 +20,9 @@ if (form) {
       }
       section.hidden = visible === 0; count += visible;
     }
-    form.querySelector("[data-port-count]")!.textContent = count + " mappings shown";
+    form.querySelector("[data-port-count]")!.textContent = count + (document.querySelector("[data-port-search]") ? " ports shown" : " mappings shown");
   };
-  form.addEventListener("input", apply);
-  form.addEventListener("reset", () => { input.value = ""; apply(); });
+  form.addEventListener("input", () => { apply(); const url = new URL(location.href); if (input.value) url.searchParams.set("q", input.value); else url.searchParams.delete("q"); history.replaceState(null, "", url); });
+  form.addEventListener("reset", () => { input.value = ""; apply(); const url = new URL(location.href); url.searchParams.delete("q"); history.replaceState(null, "", url); });
   apply();
 }
diff --git a/site/src/scripts/profile.ts b/site/src/scripts/profile.ts
index 4299428cd..9772b233f 100644
--- a/site/src/scripts/profile.ts
+++ b/site/src/scripts/profile.ts
@@ -4,7 +4,7 @@
 
 import { KEYS, get, set } from "./storage";
 
-const targets = () => document.querySelectorAll<HTMLElement>(".demo, .ladder, .spec-rows, .border-set, .status-set");
+const targets = () => document.querySelectorAll<HTMLElement>("[data-specimen], .demo, .ladder, .spec-rows, .border-set, .status-set");
 
 export const apply = (id: string) => {
   document.documentElement.setAttribute("data-demo-profile", id);
diff --git a/site/src/scripts/recipe-copy.ts b/site/src/scripts/recipe-copy.ts
index fd618a690..df5030e44 100644
--- a/site/src/scripts/recipe-copy.ts
+++ b/site/src/scripts/recipe-copy.ts
@@ -1,16 +1,23 @@
 import { instantiateRecipe } from "../../../scripts/lib/recipe-markup.mjs";
 import { anchorFor } from "../../../scripts/lib/anchors.mjs";
-import { copyText } from "./clipboard";
+import { copyWithStatus } from "./clipboard";
 const data = JSON.parse(document.getElementById(anchorFor.recipeSource("template"))!.textContent!);
 const form = document.querySelector<HTMLFormElement>("[data-recipe-copy]")!;
 form.addEventListener("submit", async (event) => {
   event.preventDefault();
   const status = form.querySelector<HTMLElement>("[data-recipe-status]")!;
+  const prefix = new FormData(form).get("prefix") as string;
+  let markup: string;
   try {
-    const prefix = new FormData(form).get("prefix") as string;
-    const markup = instantiateRecipe(data.template, prefix);
-    const notice = data.template.match(/^<!--[^]*?-->/)?.[0] ?? "";
-    if (!(await copyText(`${notice}\n<div class="j3w1-recipe" data-density="comfortable">\n${markup}</div>\n`))) throw new Error("the clipboard is unavailable; select the markup and copy it manually");
-    status.textContent = `Copied instance ${prefix}. Use another prefix for the next copy.`;
-  } catch (error) { status.textContent = `Copy failed: ${(error as Error).message}`; }
+    markup = instantiateRecipe(data.template, prefix);
+  } catch (error) {
+    status.textContent = `Copy failed: ${(error as Error).message}`;
+    return;
+  }
+  const notice = data.template.match(/^<!--[^]*?-->/)?.[0] ?? "";
+  await copyWithStatus(`${notice}\n<div class="j3w1-recipe" data-density="comfortable">\n${markup}</div>\n`, {
+    status,
+    copied: `Copied instance ${prefix}. Use another prefix for the next copy.`,
+    failed: "Copy failed: the clipboard is unavailable; select the markup and copy it manually",
+  });
 });
diff --git a/site/src/scripts/search-index.ts b/site/src/scripts/search-index.ts
new file mode 100644
index 000000000..9a4c94b15
--- /dev/null
+++ b/site/src/scripts/search-index.ts
@@ -0,0 +1,23 @@
+/* One build-time index serves both the hub and command palette. */
+import { getCollection } from "astro:content";
+import { defaultTokens } from "../lib/theme";
+import { withBase } from "../lib/base";
+import { anchorFor } from "../../../scripts/lib/anchors.mjs";
+import ports from "../../../exports/port-capabilities.json";
+
+export async function searchIndex() {
+  const entries: Record<string, unknown>[] = [];
+  const categories: Record<string, string> = { component: "COMP", doc: "SPEC" };
+  const add = (kind: string, id: string, title: string, path: string, text: string, family: string | null = null, anchor = "", value?: string) => entries.push({ kind, id, title, label: title, category: categories[kind] ?? kind.toUpperCase(), href: withBase(path), text: text.toLowerCase(), family, anchor, ...(value ? { value } : {}) });
+  for (const c of (await getCollection("components")).sort((a, b) => a.id.localeCompare(b.id, "en"))) add("component", c.data.id, `${c.data.name} / ${c.data.id}`, `components/${c.data.id}/`, [c.data.name, c.data.summary, ...c.data.keywords, ...c.data.states].join(" "), c.data.family, anchorFor.component(c.data.id));
+  const docs = (await getCollection("docs")).sort((a, b) => a.data.order - b.data.order);
+  for (const d of docs) add("doc", d.data.id, d.data.title, `reference/${d.data.id === "decisions" ? "decisions/" : ""}#${anchorFor.doc(d.data.id)}`, `${d.data.title} ${d.data.summary}`, null, anchorFor.doc(d.data.id));
+  for (const match of (docs.find((d) => d.data.id === "decisions")?.body ?? "").matchAll(/^## (D-\d+)\s+(.+)$/gm)) add("decision", match[1], `${match[1]} ${match[2]}`, `reference/decisions/#${anchorFor.decision(match[1])}`, match[0], null, anchorFor.decision(match[1]));
+  for (const [path, t] of Object.entries(defaultTokens).sort(([a], [b]) => a.localeCompare(b, "en"))) add("token", path, path, `tokens/${path}/`, `${path} ${t.css} ${t.description ?? ""}`, null, anchorFor.token(path), t.css);
+  for (const [path, label] of [["workbench/", "State workbench, viewport and contrast lab"], ["builder/", "Form builder"], ["kit/", "Mapping task kit"], ["figma/", "Figma Variables bridge"], ["verification/", "Execution evidence"], ["recipes/", "Standalone HTML recipes"], ["reference/contrast/", "Computed contrast pairs"], ["reference/fixtures/", "Stress fixtures and non-examples"], ["patterns/validation-recovery/", "Validation and recovery"], ["agents/", "Component package, copy and mapping kits"], ["implement/", "Installation and framework integration"], ["ports/", "Port capabilities and mapping evidence"], ["releases/", "Pinned release comparison"]]) add("tool", path, label, path, label);
+  for (const port of ports.ports) add("port", port.id, port.displayName, `ports/${port.id}/`, `${port.displayName} ${port.format} ${port.os.join(" ")}`);
+  return { entries: entries.map((entry, index) => ({ ...entry, commandId: anchorFor.uiExample("portal", `search-${index}`) })) };
+}
+export async function searchResponse() {
+  return new Response(JSON.stringify(await searchIndex()), { headers: { "Content-Type": "application/json; charset=utf-8" } });
+}
diff --git a/site/src/scripts/search-loader.ts b/site/src/scripts/search-loader.ts
new file mode 100644
index 000000000..c47d48f67
--- /dev/null
+++ b/site/src/scripts/search-loader.ts
@@ -0,0 +1,21 @@
+/* Cache successful static requests; a failed request never poisons retries. */
+import { withBase } from "../lib/base";
+const requests = new Map<string, Promise<unknown>>();
+export const loadStaticJson = <T>(url: string, valid: (value: unknown) => boolean = () => true): Promise<T> => {
+  let request = requests.get(url);
+  if (!request) {
+    request = fetch(url).then(async (response) => {
+      if (!response.ok) throw new Error(`Static data unavailable (${response.status})`);
+      const data = await response.json();
+      if (!valid(data)) throw new Error("Invalid static data");
+      return data;
+    }).catch((error) => { requests.delete(url); throw error; });
+    requests.set(url, request);
+  }
+  return request as Promise<T>;
+};
+export type SearchEntry = { kind: string; id: string; commandId: string; anchor: string; title: string; label: string; category: string; href: string; family: string | null; text: string; value?: string };
+export const loadSearchIndex = () => loadStaticJson<{ entries: SearchEntry[] }>(withBase("search.json"), (value) => {
+  const entries = (value as { entries?: SearchEntry[] })?.entries;
+  return Array.isArray(entries) && entries.every((entry) => typeof entry.id === "string" && typeof entry.text === "string" && typeof entry.href === "string" && typeof entry.label === "string" && typeof entry.category === "string" && /^[a-z0-9-]+$/.test(entry.commandId));
+});
diff --git a/site/src/scripts/search.ts b/site/src/scripts/search.ts
index 9344b5047..5302b21c5 100644
--- a/site/src/scripts/search.ts
+++ b/site/src/scripts/search.ts
@@ -1,72 +1,32 @@
-/* Search over a build-time index (components, documents, tokens). Fetched on
-   first focus of the field; results hide non-matching component sections and
-   contents entries, and announce the count. The query lives in ?q= so a
-   filtered view can be shared. Without JavaScript the contents and the
-   browser's own find remain. */
-
-import { withBase } from "../lib/base";
-
-type Entry = { kind: string; id: string; anchor: string; title: string; family: string | null; text: string };
-
+/* Lazy static search; failures leave the index retryable on focus or input. */
+import { loadSearchIndex, type SearchEntry } from "./search-loader";
+import { refreshVisibility } from "./filter";
 export const initSearch = (): void => {
   const input = document.getElementById("search") as HTMLInputElement | null;
   const count = document.getElementById("search-count");
   if (!input || !count) return;
-  let entries: Entry[] | null = null;
-  let loading: Promise<Entry[]> | null = null;
-
-  const load = (): Promise<Entry[]> => {
-    if (entries) return Promise.resolve(entries);
-    loading ??= fetch(withBase("search-index.json"))
-      .then((r) => r.json())
-      .then((json: { entries: Entry[] }) => (entries = json.entries));
-    return loading;
+  let entries: SearchEntry[] = [];
+  let tokenHits = 0;
+  const announce = (shown: number) => { count.textContent = input.value.trim() ? `${shown} component${shown === 1 ? "" : "s"}${tokenHits ? `, ${tokenHits} tokens` : ""}` : ""; };
+  document.addEventListener("reference-visibility", (event) => announce((event as CustomEvent<number>).detail));
+  const apply = () => {
+    const q = input.value.trim().toLowerCase();
+    const matching = new Set(entries.filter((entry) => entry.text.includes(q) || entry.id.includes(q)).map((entry) => entry.id));
+    document.querySelectorAll<HTMLElement>("section.component").forEach((section) => { section.dataset.searchMatch = String(!q || matching.has(section.dataset.component ?? "") || (section.dataset.keywords ?? "").includes(q)); });
+    tokenHits = q ? entries.filter((entry) => entry.kind === "token" && (entry.text.includes(q) || entry.id.includes(q))).length : 0;
+    refreshVisibility();
   };
-
-  const apply = (query: string) => {
-    const q = query.trim().toLowerCase();
-    const sections = document.querySelectorAll<HTMLElement>("section.component");
-    const tocLinks = document.querySelectorAll<HTMLElement>("[data-toc-component]");
-    if (!q) {
-      sections.forEach((s) => (s.hidden = false));
-      tocLinks.forEach((l) => ((l.parentElement as HTMLElement).hidden = false));
-      count.textContent = "";
-      return;
-    }
-    const matching = new Set((entries ?? []).filter((e) => e.text.includes(q) || e.id.includes(q)).map((e) => e.id));
-    let shown = 0;
-    sections.forEach((s) => {
-      const id = s.dataset.component ?? "";
-      const hit = matching.has(id) || (s.dataset.keywords ?? "").includes(q);
-      s.hidden = !hit;
-      if (hit) shown += 1;
-    });
-    tocLinks.forEach((l) => {
-      const id = l.dataset.tocComponent ?? "";
-      (l.parentElement as HTMLElement).hidden = !(matching.has(id));
-    });
-    const tokenHits = (entries ?? []).filter((e) => e.kind === "token" && (e.text.includes(q) || e.id.includes(q)));
-    count.textContent = `${shown} component${shown === 1 ? "" : "s"}${tokenHits.length ? `, ${tokenHits.length} token${tokenHits.length === 1 ? "" : "s"} (first: ${tokenHits[0].id})` : ""}`;
+  const run = async () => {
+    try { entries = (await loadSearchIndex()).entries; apply(); }
+    catch { count.textContent = "Search index unavailable. Focus or type to retry; all sections remain readable."; }
   };
-
-  const sync = () => {
+  input.addEventListener("focus", () => void run());
+  input.addEventListener("input", () => {
     const url = new URL(location.href);
-    if (input.value.trim()) url.searchParams.set("q", input.value.trim());
-    else url.searchParams.delete("q");
+    if (input.value.trim()) url.searchParams.set("q", input.value.trim()); else url.searchParams.delete("q");
     history.replaceState(null, "", url);
-  };
-
-  input.addEventListener("focus", () => void load(), { once: true });
-  input.addEventListener("input", () => {
-    void load().then(() => {
-      apply(input.value);
-      sync();
-    });
+    void run();
   });
-
   const initial = new URL(location.href).searchParams.get("q");
-  if (initial) {
-    input.value = initial;
-    void load().then(() => apply(initial));
-  }
+  if (initial) { input.value = initial; void run(); }
 };
diff --git a/site/src/scripts/usage.ts b/site/src/scripts/usage.ts
index 0e53e9a68..62273240b 100644
--- a/site/src/scripts/usage.ts
+++ b/site/src/scripts/usage.ts
@@ -1,8 +1,9 @@
+import { loadStaticJson } from "./search-loader";
 import { queryUsage } from "../../../scripts/lib/usage-query.mjs";
 const form = document.getElementById("usage-filters") as HTMLFormElement | null;
 const raw = document.getElementById("usage-data");
-if (form && raw) {
-  const index = JSON.parse(raw.textContent!);
+if (form && raw) void (async () => {
+  const index = await loadStaticJson<any>(raw.dataset.source!);
   const params = new URLSearchParams(location.search);
   for (const control of Array.from(form.elements) as HTMLInputElement[]) {
     if (!control.name || !params.has(control.name)) continue;
@@ -31,4 +32,4 @@ if (form && raw) {
   // the controls on the next task, after their defaults have been restored.
   form.addEventListener("reset", () => setTimeout(update, 0));
   update();
-}
+})().catch(() => { document.getElementById("usage-count")!.textContent = "Filters unavailable; the static tables remain readable. Reload to retry."; });
diff --git a/site/src/scripts/workbench.ts b/site/src/scripts/workbench.ts
index 9bd544043..c449a9ba7 100644
--- a/site/src/scripts/workbench.ts
+++ b/site/src/scripts/workbench.ts
@@ -5,6 +5,7 @@ import { renderHexText, escapeHtml } from "../../../scripts/lib/hex-literals.mjs
 import { initializeIssueDraft } from "./issue-draft";
 import { anchorFor } from "../../../scripts/lib/anchors.mjs";
 import { withBase } from "../lib/base";
+import { copyWithStatus } from "./clipboard";
 
 for (const root of document.querySelectorAll<HTMLElement>("[data-workbench]")) {
   const data = JSON.parse(root.dataset.workbenchData!);
@@ -55,7 +56,10 @@ for (const root of document.querySelectorAll<HTMLElement>("[data-workbench]")) {
       const value = evaluateWorkbenchContrast(data, { profile: config.profile, ...Object.fromEntries(new FormData(contrastForm)) } as any);
       root.querySelector<HTMLTextAreaElement>("[data-contrast-copy]")!.value = JSON.stringify({ themeVersion: data.themeVersion, component: config.component, revision: data.revision, sourceDigest: data.sourceDigest, profile: config.profile, context: contrastField("context").value, ...value }, null, 2);
       const tokenLink = (path: string) => `<a href="${withBase(`tokens/${encodeURIComponent(path)}/`)}">${escapeHtml(path)}</a>`;
-      resultNode.innerHTML = `<p><strong>${value.display}:1 — ${value.pass ? "meets" : "below"} ${value.min}:1</strong> (${escapeHtml(value.kind)}). ${value.declaredState ? `Declared state: ${escapeHtml(value.declaredState)}; <a href="${withBase("")}#${anchorFor.component(config.component)}">component state rules</a>.` : ""} Decision uses the unrounded ratio: ${value.ratio}.</p><p>Composited foreground ${renderHexText(value.fg)}; background ${renderHexText(value.bg)}; underlay ${tokenLink(value.roles.underlay)}. ${value.waiver ? `Declared exception: ${escapeHtml(value.waiver)}. This is not an accessibility pass.` : "No waiver applied."}</p><ul>${value.eligibility.map((item: any) => `<li>${tokenLink(item.path)}: ${escapeHtml(item.action)} — ${escapeHtml(item.reason)}${item.decisionIds.length ? ` (${item.decisionIds.map(escapeHtml).join(", ")})` : ""}</li>`).join("")}</ul><p>${value.alternatives.length ? `Documented foreground alternatives for the exact same part/state/variant/surface: ${value.alternatives.map(tokenLink).join(", ")}. Re-evaluate contrast before use.` : "No documented foreground alternative for this exact part/state/variant/surface."}</p>`;
+      resultNode.innerHTML = `<p><strong>${value.display}:1 — ${value.pass ? "meets" : "below"} ${value.min}:1</strong> (${escapeHtml(value.kind)}). ${value.declaredState ? `Declared state: ${escapeHtml(value.declaredState)}; <a href="${withBase(`components/${config.component}/`)}#${anchorFor.component(config.component)}">component state rules</a>.` : ""} Decision uses the unrounded ratio: ${value.ratio}.</p>`
+        + `<p>Composited foreground ${renderHexText(value.fg)}; background ${renderHexText(value.bg)}; underlay ${tokenLink(value.roles.underlay)}. ${value.waiver ? `Declared exception: ${escapeHtml(value.waiver)}. This is not an accessibility pass.` : "No waiver applied."}</p>`
+        + `<ul>${value.eligibility.map((item: any) => `<li>${tokenLink(item.path)}: ${escapeHtml(item.action)} — ${escapeHtml(item.reason)}${item.decisionIds.length ? ` (${item.decisionIds.map(escapeHtml).join(", ")})` : ""}</li>`).join("")}</ul>`
+        + `<p>${value.alternatives.length ? `Documented foreground alternatives for the exact same part/state/variant/surface: ${value.alternatives.map(tokenLink).join(", ")}. Re-evaluate contrast before use.` : "No documented foreground alternative for this exact part/state/variant/surface."}</p>`;
     } catch (error) { resultNode.textContent = (error as Error).message; }
   }
   function setPair() {
@@ -72,7 +76,7 @@ for (const root of document.querySelectorAll<HTMLElement>("[data-workbench]")) {
     root.querySelector<HTMLElement>("[data-viewport-report]")!.textContent = `Actual viewport: ${value.width} × ${value.height} CSS px. Outer horizontal overflow: ${value.outerOverflow} px. Inner scrolling regions: ${value.innerOverflow.map((item: any) => `${item.element} (${item.overflow} px)`).join(", ") || "none"}.`;
     const selected = data.parts.find((part: any) => part.part === config.part);
     root.querySelector<HTMLElement>("[data-part-description]")!.textContent = selected ? `${selected.part}: ${selected.description}${value.available ? "" : " This part is absent or hidden in the selected variant/state."}` : "Select a documented part. The overlay does not capture input or change layout.";
-    const row = (cells: string[]) => `<tr>${cells.map((cell) => `<td>${renderHexText(cell)}</td>`).join("")}</tr>`;
+    const row = (cells: string[]) => `<tr class="table-row">${cells.map((cell) => `<td class="table-cell">${renderHexText(cell)}</td>`).join("")}</tr>`;
     const prefixes = config.part.split(/\s*\/\s*/);
     const declared = Object.entries(data.contract.tokens).filter(([part]) => prefixes.some((prefix: string) => part.startsWith(`${prefix}.`))).map(([part, role]) => row([part, role as string, data.tokens[config.profile][role as string].css, "Declared mapping; state-specific roles are not a computed-style assertion."]));
     const computed = value.available ? [row(["border-box width × height", "Not specified by a role mapping", "—", `${value.box.width} × ${value.box.height} px`]), ...Object.entries(value.measured).map(([name, actual]) => row([name, "Computed style", "—", String(actual)])), ...value.measurements.map((item: any) => row([item.property, item.role, item.expected, `${item.actual} — ${item.match ? "matches" : "MISMATCH"}`]))] : [];
@@ -104,8 +108,8 @@ for (const root of document.querySelectorAll<HTMLElement>("[data-workbench]")) {
     } catch (error) { announce(`Invalid preview link: ${(error as Error).message}. Reset restores the canonical specimen.`); }
   }
   async function copy(value: string, control: HTMLInputElement | HTMLTextAreaElement) {
-    try { await navigator.clipboard.writeText(value); announce("Copied."); }
-    catch { control.focus(); control.select(); announce("Clipboard unavailable. The displayed text is selected for manual copying."); }
+    const copied = await copyWithStatus(value, { status, copied: "Copied.", failed: "Clipboard unavailable. The displayed text is selected for manual copying." });
+    if (!copied) { control.focus(); control.select(); }
   }
   issueRoot.addEventListener("submit", () => invalidateDraft(), true);
   form.addEventListener("submit", (event) => event.preventDefault());
@@ -158,7 +162,7 @@ for (const root of document.querySelectorAll<HTMLElement>("[data-workbench]")) {
   window.addEventListener("popstate", fromUrl);
   window.addEventListener("hashchange", fromUrl);
   window.addEventListener("pagehide", () => { visibility.disconnect(); post({ type: "theme:stop" }); comparePost({ type: "theme:stop" }); });
-  // PortalLayout marks <html> with .js; the workbench only runs inside it.
+  // SiteLayout marks <html> with .js; the workbench only runs inside it.
   setPair(); fromUrl();
   frame.src = root.dataset.previewUrl!;
 }
diff --git a/site/src/styles/chrome.css b/site/src/styles/chrome.css
new file mode 100644
index 000000000..36c3151ea
--- /dev/null
+++ b/site/src/styles/chrome.css
@@ -0,0 +1,415 @@
+/* Site chrome: the shell around every portal page (SiteLayout.astro) and the
+   layout of the content inside it. Layout only: controls, links, cards,
+   tables, breadcrumbs and the rail are canonical component classes, so no
+   rule here gives them a look. Token variables only (tests/chrome-controls.test.js). */
+
+:root {
+  --_rail: calc(5 * var(--space-48)); /* 240px, sidebar-nav.md "responsive" */
+  --_topbar: var(--space-48);
+}
+
+/* Forced matrix states reveal selected hidden specimen parts themselves. */
+[hidden]:not(.demo *) {
+  display: none !important;
+}
+
+/* ---- top bar ---------------------------------------------------------- */
+
+.site-topbar {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-popover);
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  min-height: var(--_topbar);
+  padding: var(--space-8) var(--space-24);
+  background: var(--color-surface-chrome);
+  border-bottom: var(--border-width-default) solid var(--color-border-default);
+}
+
+/* The packaged elements carry the recipe foundation's canvas fill. */
+.site-menu,
+.site-command {
+  background: transparent;
+}
+
+.site-menu {
+  display: none;
+}
+
+.site-wordmark {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-h2);
+  line-height: var(--font-line-height-h2);
+  font-weight: var(--font-weight-bold);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.site-wordmark span {
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-regular);
+}
+
+.site-version {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.site-command {
+  margin-inline-start: auto;
+}
+
+.site-command > .command-palette {
+  display: contents;
+}
+
+.site-command .command-palette-dialog:modal {
+  width: min(40rem, calc(100vw - var(--space-32)));
+  max-height: 70vh;
+  inset: 15vh auto auto 50%;
+  transform: translateX(-50%);
+}
+
+.site-command [role="option"] {
+  display: grid;
+  grid-template-columns: 8ch minmax(0, 1fr);
+  gap: var(--space-12);
+  padding: var(--space-8);
+}
+
+.site-command-label {
+  overflow-wrap: anywhere;
+}
+
+.site-command-value {
+  display: block;
+}
+
+/* ---- frame: rail and column ------------------------------------------- */
+
+.site-frame {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-height: calc(100vh - var(--_topbar));
+}
+
+.site-rail {
+  max-width: none;
+}
+
+.site-column {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.site-main {
+  flex: 1 0 auto;
+  width: 100%;
+  max-width: var(--layout-app-max);
+  padding: var(--space-32) var(--space-48) var(--space-48);
+}
+
+.site-main > .breadcrumbs {
+  margin-bottom: var(--space-24);
+}
+
+.site-footer {
+  padding: var(--space-24) var(--space-48) var(--space-48);
+  border-top: var(--border-width-default) solid var(--color-border-default);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.site-footer p {
+  margin: 0 0 var(--space-8);
+}
+
+@media (min-width: 900px) {
+  .site-frame {
+    grid-template-columns: var(--_rail) minmax(0, 1fr);
+  }
+
+  .site-rail {
+    position: sticky;
+    top: var(--_topbar);
+    align-self: start;
+    height: calc(100vh - var(--_topbar));
+    overflow-y: auto;
+  }
+}
+
+@media (min-width: 900px) and (max-width: 1279.98px) {
+  :root { --_rail: var(--space-48); }
+  .site-rail { width: 100%; }
+}
+
+/* Below 900px the rail becomes the drawer; without JavaScript it stays in
+   the page, above the content. */
+@media (max-width: 899.98px) {
+  html.js .site-rail {
+    display: none;
+  }
+
+  html.js .site-menu {
+    display: block;
+  }
+
+  .site-rail {
+    border-inline-end: 0;
+    border-bottom: var(--border-width-default) solid var(--color-border-divider);
+  }
+
+  .site-topbar {
+    padding-inline: var(--space-16);
+  }
+
+  .site-main {
+    padding: var(--space-24) var(--space-16) var(--space-48);
+  }
+
+  .site-footer {
+    padding: var(--space-24) var(--space-16) var(--space-48);
+  }
+}
+
+@media (max-width: 599.98px) {
+  .site-version,
+  .site-command .button-label,
+  .site-command kbd,
+  .site-menu .button-label {
+    display: none;
+  }
+}
+
+/* ---- page header (D-037: display for heroes and figures, title for page titles) */
+
+.site-intro {
+  margin-bottom: var(--space-32);
+}
+
+.site-intro h1 {
+  font-size: var(--font-size-title);
+  line-height: var(--font-line-height-title);
+}
+
+.site-hero h1,
+.site-metric {
+  font-size: var(--font-size-display);
+  line-height: var(--font-line-height-display);
+}
+
+.site-intro p {
+  max-width: 72ch;
+  margin: var(--space-12) 0 0;
+  color: var(--color-text-prose);
+  font-size: var(--font-size-reading);
+  line-height: var(--font-line-height-reading);
+}
+
+.site-intro .site-stamp {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+  overflow-wrap: anywhere;
+}
+
+/* ---- content ---------------------------------------------------------- */
+
+html:not(.js) .js-only {
+  display: none;
+}
+
+.site-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  gap: var(--space-12) var(--space-16);
+  margin-block: var(--space-16);
+}
+
+.site-form {
+  display: grid;
+  gap: var(--space-12);
+  max-width: var(--layout-content-max);
+}
+
+.site-kit-components {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22ch), 1fr));
+  gap: var(--space-4) var(--space-12);
+}
+
+.site-filters > :is(.text-field, .select) {
+  min-width: min(100%, 14rem);
+}
+
+.site-section {
+  margin-block: var(--space-48);
+}
+
+.site-section > h2,
+.site-prose h2 {
+  margin-bottom: var(--space-16);
+  font-size: var(--font-size-h1);
+  line-height: var(--font-line-height-h1);
+}
+
+.site-section h3 {
+  margin-block: var(--space-24) var(--space-8);
+}
+
+.site-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8) var(--space-16);
+  margin-block: var(--space-16);
+}
+
+.site-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+  gap: var(--space-16);
+}
+
+/* A row that always fills the width, however few cards it holds. */
+.site-cards-fit {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}
+
+.site-cards > .card {
+  max-width: none;
+  align-content: start;
+}
+
+.site-cards-fit.site-swatches {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+}
+
+.site-metric {
+  display: block;
+  color: var(--color-text-bright);
+  font-weight: var(--font-weight-bold);
+}
+
+.site-swatch {
+  height: var(--space-48);
+  border: var(--border-width-default) solid var(--color-border-control);
+}
+
+.site-example {
+  min-width: 0;
+  overflow: auto;
+  padding: var(--space-24);
+  border: var(--border-width-default) solid var(--color-border-default);
+  background: var(--color-surface-default);
+}
+
+.site-code {
+  max-height: 32rem;
+  overflow: auto;
+  white-space: pre;
+}
+
+/* Source with its copy action: one unit, attached under its example. */
+.site-source {
+  margin-block-end: var(--space-24);
+  border: var(--border-width-default) solid var(--color-border-default);
+}
+
+.site-example + .site-source {
+  border-top: 0;
+}
+
+.site-source-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-8);
+  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
+  border-bottom: var(--border-width-default) solid var(--color-border-divider);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.site-source > pre {
+  margin: 0;
+  border: 0;
+}
+
+.site-note {
+  max-width: 72ch;
+  padding-inline-start: var(--space-16);
+  border-inline-start: var(--border-width-emphasis) solid var(--color-border-strong);
+  color: var(--color-text-muted);
+}
+
+.site-prose > :is(p, ul, ol, blockquote, dl) {
+  max-width: 72ch;
+}
+
+.site-prose h2,
+.site-prose h3 {
+  margin-block: var(--space-32) var(--space-12);
+}
+
+.site-table-wrap {
+  overflow-x: auto;
+}
+
+/* table.md: a table scrolls in its region, with a sticky first column below
+   600px. Cells wrap at word boundaries only (base.css breaks anywhere), so
+   columns keep a readable width instead of a few characters. A token path
+   wraps only at its dots (<wbr>), never inside a segment, and keeps one line
+   where there is room. */
+.usage-section .table-cell:first-child,
+.site-main :is(.table-scroll, .site-table-wrap) > table :is(th, td) {
+  overflow-wrap: normal;
+}
+
+.usage-section .table-cell:last-child {
+  min-width: 24ch;
+}
+
+@media (min-width: 600px) {
+  .usage-section .table-cell:first-child {
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 599.98px) {
+  .site-main :is(.table-scroll, .site-table-wrap) > table {
+    width: max-content;
+    min-width: 100%;
+  }
+
+  .site-main :is(.table-scroll, .site-table-wrap) > table :is(th, td) {
+    max-width: 36ch;
+  }
+
+  .usage-section .table-cell:first-child {
+    width: 24ch;
+  }
+}
+
+@media print {
+  .site-topbar,
+  .site-rail,
+  .site-footer {
+    display: none;
+  }
+
+  .site-frame {
+    display: block;
+  }
+
+  .site-main {
+    padding: 0;
+  }
+}
diff --git a/site/src/styles/components/avatar.css b/site/src/styles/components/avatar.css
index 8f9d39f87..5add80c9a 100644
--- a/site/src/styles/components/avatar.css
+++ b/site/src/styles/components/avatar.css
@@ -1,3 +1,2 @@
-.avatar {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.avatar :focus-visible,[data-state-focus-visible] .avatar {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-.avatar {display:inline-grid;place-items:center;inline-size:var(--space-32);block-size:var(--space-32);padding:0;overflow:hidden;font-weight:var(--font-weight-bold)}.avatar img {width:100%;height:100%;object-fit:cover}.avatar[data-loading] [data-avatar-fallback],[data-state-loading] .avatar [data-avatar-fallback],.avatar[data-error] [data-avatar-fallback],[data-state-error] .avatar [data-avatar-fallback] {display:block}
+.avatar {box-sizing:border-box;display:inline-grid;gap:var(--space-12);min-width:0;padding:0;background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;place-items:center;inline-size:var(--space-32);block-size:var(--space-32);overflow:hidden;font-weight:var(--font-weight-bold)}
+.avatar :focus-visible,[data-state-focus-visible] .avatar {outline:var(--focus-ring);outline-offset:var(--focus-offset)}.avatar img {width:100%;height:100%;object-fit:cover}.avatar[data-loading] [data-avatar-fallback],[data-state-loading] .avatar [data-avatar-fallback],.avatar[data-error] [data-avatar-fallback],[data-state-error] .avatar [data-avatar-fallback] {display:block}
diff --git a/site/src/styles/components/badge.css b/site/src/styles/components/badge.css
index c206e24a8..e6e4b5ea8 100644
--- a/site/src/styles/components/badge.css
+++ b/site/src/styles/components/badge.css
@@ -96,7 +96,6 @@
 }
 
 /* empty: a named dot; the glyph and the text stay for assistive technology */
-.badge-empty,
 [data-state-empty] .badge {
   width: var(--space-8);
   height: var(--space-8);
@@ -105,8 +104,6 @@
   gap: 0;
 }
 
-.badge-empty .badge-glyph,
-.badge-empty .badge-text,
 [data-state-empty] .badge-glyph,
 [data-state-empty] .badge-text {
   position: absolute;
diff --git a/site/src/styles/components/breadcrumbs.css b/site/src/styles/components/breadcrumbs.css
index 97be28bbe..e02257f9c 100644
--- a/site/src/styles/components/breadcrumbs.css
+++ b/site/src/styles/components/breadcrumbs.css
@@ -21,7 +21,7 @@
 .breadcrumbs-item {
   display: inline-flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
 }
 
 .breadcrumbs-item[hidden] {
@@ -45,8 +45,8 @@
 }
 
 .breadcrumbs-ellipsis {
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-4);
   background: transparent;
   border: 0;
@@ -59,7 +59,7 @@
 /* hover: links take the strong hover fill and the underline thickens */
 .breadcrumbs-link:hover,
 [data-state-hover] .breadcrumbs-link-demo-target {
-  background: var(--color-interaction-hover-bg-strong);
+  background: var(--color-interaction-hover-bg);
   color: var(--color-text-link-hover);
   text-decoration-thickness: var(--border-width-emphasis);
 }
diff --git a/site/src/styles/components/button-group.css b/site/src/styles/components/button-group.css
index d4e67666a..5d0d40a7b 100644
--- a/site/src/styles/components/button-group.css
+++ b/site/src/styles/components/button-group.css
@@ -1,6 +1,5 @@
-.button-group {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
+@import "../partials/button.css";
+.button-group {box-sizing:border-box;display:flex;gap:var(--space-4);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;flex-wrap:wrap}
 .button-group-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.button-group :focus-visible,[data-state-focus-visible] .button-group [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+.button-group :focus-visible,[data-state-focus-visible] .button-group [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 .button-group :disabled,[data-state-disabled] .button-group-control {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-.button-group-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
-.button-group {display:flex;flex-wrap:wrap;gap:var(--space-4)}
diff --git a/site/src/styles/components/button.css b/site/src/styles/components/button.css
index d4f3831d5..c7406dd3c 100644
--- a/site/src/styles/components/button.css
+++ b/site/src/styles/components/button.css
@@ -1,79 +1,8 @@
-/* button — reference CSS. Each tone sets the private colour slots; each
-   state rewrites the slots, and every real pseudo-class is paired with the
-   forced-state attribute the state matrix emits. Token variables only. */
-
-.button {
-  --_bg: var(--color-action-primary-bg);
-  --_fg: var(--color-action-primary-text);
-  --_border: var(--color-action-primary-border);
-  --_bg-hover: var(--color-action-primary-hover-bg);
-  --_fg-hover: var(--color-action-primary-text);
-  --_bg-active: var(--color-action-primary-pressed-bg);
-  --_border-active: var(--color-action-primary-border);
-  --_ring: var(--color-interaction-focus-ring-container);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  margin: 0;
-  background: var(--_bg);
-  color: var(--_fg);
-  border: var(--border-width-default) solid var(--_border);
-  border-radius: var(--radius-none);
-  font: inherit;
-  font-size: var(--font-size-ui-md);
-  line-height: var(--font-line-height-ui-md);
-  white-space: nowrap;
-  cursor: pointer;
-  outline: 0;
-}
-
-.button-secondary {
-  --_bg: var(--color-action-secondary-bg);
-  --_fg: var(--color-action-secondary-text);
-  --_border: var(--color-action-secondary-border);
-  --_bg-hover: var(--color-action-secondary-hover-bg);
-  --_fg-hover: var(--color-action-secondary-text);
-  --_bg-active: var(--color-action-secondary-pressed-bg);
-  --_border-active: var(--color-border-active);
-  --_ring: var(--color-interaction-focus-ring);
-}
-
-.button-tertiary {
-  --_bg: transparent;
-  --_fg: var(--color-action-tertiary-text);
-  --_border: transparent;
-  --_bg-hover: var(--color-action-tertiary-hover-bg);
-  --_fg-hover: var(--color-action-tertiary-text);
-  --_bg-active: var(--color-interaction-pressed-bg);
-  --_border-active: var(--color-border-active);
-  --_ring: var(--color-interaction-focus-ring);
-}
-
-.button-destructive {
-  --_bg: transparent;
-  --_fg: var(--color-action-destructive-text);
-  --_border: var(--color-action-destructive-border);
-  --_bg-hover: var(--color-action-destructive-hover-bg);
-  --_fg-hover: var(--color-action-destructive-hover-text);
-  --_bg-active: var(--color-action-destructive-pressed-bg);
-  --_border-active: var(--color-action-destructive-border);
-  --_ring: var(--color-interaction-focus-ring);
-}
-
-/* the filled destructive tone is reserved for confirm dialogs */
-.button-destructive-filled {
-  --_bg: var(--color-action-destructive-filled-bg);
-  --_fg: var(--color-action-destructive-filled-text);
-  --_border: var(--color-action-destructive-border);
-  --_bg-hover: var(--color-action-destructive-hover-bg);
-  --_fg-hover: var(--color-action-destructive-hover-text);
-  --_bg-active: var(--color-action-destructive-pressed-bg);
-  --_border-active: var(--color-action-destructive-border);
-  --_ring: var(--color-action-destructive-filled-text);
-}
+@import "../partials/button.css";
+/* button — reference CSS. The box, the tones and the real states come from
+   the shared button partial; this file adds the icon and loading parts and
+   the forced-state attributes the state matrix emits, which rewrite the same
+   slots. Token variables only. */
 
 .button-icon {
   flex: none;
@@ -92,18 +21,6 @@
   min-width: 0;
 }
 
-/* hover: fills and borders only, on hover-capable pointers */
-@media (hover: hover) {
-  .button:hover {
-    --_bg: var(--_bg-hover);
-    --_fg: var(--_fg-hover);
-  }
-
-  .button-destructive:hover {
-    --_ring: var(--color-action-destructive-hover-text);
-  }
-}
-
 [data-state-hover] .button {
   --_bg: var(--_bg-hover);
   --_fg: var(--_fg-hover);
@@ -113,16 +30,12 @@
   --_ring: var(--color-action-destructive-hover-text);
 }
 
-/* active: a darker fill and the active border; nothing moves */
-.button:active,
 [data-state-active] .button {
   --_bg: var(--_bg-active);
   --_fg: var(--_fg-hover);
   --_border: var(--_border-active);
 }
 
-/* focus-visible: the dashed ring in the on-fill colour of whatever fill is showing */
-.button:focus-visible,
 [data-state-focus-visible] .button {
   outline: var(--border-width-default) dashed var(--_ring);
   outline-offset: var(--focus-offset);
@@ -144,8 +57,6 @@
   cursor: progress;
 }
 
-/* disabled: the same three roles for every tone; no hover, no opacity */
-.button:disabled,
 [data-state-disabled] .button {
   --_bg: var(--color-interaction-disabled-bg);
   --_fg: var(--color-text-disabled);
@@ -164,7 +75,6 @@
 }
 
 @media (forced-colors: active) {
-  .button:focus-visible,
   [data-state-focus-visible] .button {
     outline-color: Highlight;
   }
diff --git a/site/src/styles/components/card.css b/site/src/styles/components/card.css
index 27a165071..8e0f66fde 100644
--- a/site/src/styles/components/card.css
+++ b/site/src/styles/components/card.css
@@ -7,7 +7,7 @@
   gap: var(--space-4);
   min-width: 0;
   max-width: 28rem;
-  padding: var(--density-control-padding-x, 12px);
+  padding: var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-default);
@@ -44,7 +44,7 @@
 
 .card-group {
   display: grid;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
 }
 
@@ -92,11 +92,11 @@
   border-color: var(--color-interaction-selection-bg);
 }
 
-/* selected + focus-visible: the fill and the container ring together */
+/* selected + focus-visible: the selection fill and the ordinary ring together */
 .card-selectable[aria-selected="true"]:focus-visible,
 [data-state-selected][data-state-focus-visible] .card-demo-target {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 @media (hover: none) {
diff --git a/site/src/styles/components/chart.css b/site/src/styles/components/chart.css
index 9245c1c69..2c3a0f3ce 100644
--- a/site/src/styles/components/chart.css
+++ b/site/src/styles/components/chart.css
@@ -1,6 +1,5 @@
-.chart {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.chart :focus-visible,[data-state-focus-visible] .chart {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-.chart {margin:0;min-width:0}.chart svg {width:100%;max-height:16rem}.chart-series {fill:var(--color-chart-series-2);stroke:var(--color-chart-axis);stroke-width:1}.chart table {width:100%;border-collapse:collapse}.chart th,.chart td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-chart-grid)}.chart caption {text-align:start;color:var(--color-chart-label)}.chart [data-chart-empty],[data-state-empty] .chart [data-chart-empty] {color:var(--color-text-muted)}.chart[aria-busy=true],[data-state-loading] .chart {border-style:dashed}
+.chart {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;margin:0}
+.chart :focus-visible,[data-state-focus-visible] .chart {outline:var(--focus-ring);outline-offset:var(--focus-offset)}.chart svg {width:100%;max-height:16rem}.chart-series {fill:var(--color-chart-series-2);stroke:var(--color-chart-axis);stroke-width:1}.chart table {width:100%;border-collapse:collapse}.chart th,.chart td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-chart-grid)}.chart caption {text-align:start;color:var(--color-chart-label)}.chart [data-chart-empty],[data-state-empty] .chart [data-chart-empty] {color:var(--color-text-muted)}.chart[aria-busy=true],[data-state-loading] .chart {border-style:dashed}
 .chart thead th {color:var(--color-text-bright);font-weight:var(--font-weight-bold)}
 .chart tbody {color:var(--color-text-default)}
 .chart tbody th {font-weight:var(--font-weight-regular)}
diff --git a/site/src/styles/components/checkbox.css b/site/src/styles/components/checkbox.css
index 726cfb369..644402eed 100644
--- a/site/src/styles/components/checkbox.css
+++ b/site/src/styles/components/checkbox.css
@@ -29,7 +29,7 @@
 
 .checkbox-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-4);
   min-height: var(--space-24);
@@ -39,8 +39,8 @@
 
 .checkbox-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-action-primary-text);
 }
 
@@ -50,8 +50,8 @@
 
 .checkbox-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -63,8 +63,8 @@
 .checkbox-check,
 .checkbox-dash {
   display: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   stroke: currentColor;
   fill: none;
   pointer-events: none;
diff --git a/site/src/styles/components/chip.css b/site/src/styles/components/chip.css
index 3f18d23c5..ea83dcb5d 100644
--- a/site/src/styles/components/chip.css
+++ b/site/src/styles/components/chip.css
@@ -7,7 +7,7 @@
   align-items: center;
   gap: var(--space-4);
   vertical-align: middle;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-8);
   box-sizing: border-box;
   background: var(--color-surface-default);
@@ -40,7 +40,7 @@
   align-items: center;
   justify-content: center;
   align-self: stretch;
-  min-width: calc(var(--density-control-height, 32px) - var(--border-width-emphasis));
+  min-width: calc(var(--density-control-height, 24px) - var(--border-width-emphasis));
   padding: 0 var(--space-4);
   background: transparent;
   border: 0;
@@ -103,11 +103,11 @@
   color: var(--color-interaction-selection-text);
 }
 
-/* selected + focus-visible: the ring takes the on-fill colour */
+/* selected + focus-visible: the ordinary ring stays on the selection fill */
 .chip-filter[aria-pressed="true"]:focus-visible,
 [data-state-selected][data-state-focus-visible] .chip-filter,
 [data-state-selected][data-state-focus-visible] .chip-remove {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
diff --git a/site/src/styles/components/code-editor.css b/site/src/styles/components/code-editor.css
index 6074358d3..3818206f4 100644
--- a/site/src/styles/components/code-editor.css
+++ b/site/src/styles/components/code-editor.css
@@ -66,6 +66,10 @@
   color: var(--color-code-whitespace);
 }
 
+.code-editor-ws::before {
+  content: attr(data-whitespace);
+}
+
 .code-editor-fold {
   display: inline-block;
   padding: 0 var(--space-4);
diff --git a/site/src/styles/components/combobox.css b/site/src/styles/components/combobox.css
index ee74ab242..f367798b1 100644
--- a/site/src/styles/components/combobox.css
+++ b/site/src/styles/components/combobox.css
@@ -1,3 +1,4 @@
+@import "../partials/field.css";
 /* combobox — reference CSS. The list is rendered in flow directly below the
    box (no floating layer in the demonstration). Every real pseudo-class is
    paired with the forced-state attribute the state matrix emits. The
@@ -12,25 +13,10 @@
   color: var(--color-text-default);
 }
 
-.combobox-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.combobox-root {
-  display: flex;
-  align-items: stretch;
-  min-height: var(--density-control-height, 32px);
-  background: var(--color-surface-input);
-  border: var(--border-width-default) solid var(--color-border-control);
-  border-radius: var(--radius-none);
-}
-
 .combobox-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -93,7 +79,7 @@
 }
 
 .combobox-listbox {
-  max-height: calc(8 * var(--density-row-height, 36px));
+  max-height: calc(8 * var(--density-row-height, 28px));
   overflow-y: auto;
   background: var(--color-surface-raised);
   border: var(--border-width-default) solid var(--color-border-overlay);
@@ -104,8 +90,8 @@
 .combobox-option {
   display: flex;
   align-items: center;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   cursor: default;
 }
 
@@ -115,13 +101,13 @@
   color: var(--color-text-link-hover);
 }
 
-/* selected: the active descendant carries the selection fill and a ring in
-   the fill's on-fill colour, because focus stays on the input */
+/* selected: the active descendant carries the selection fill and the ordinary ring,
+   because focus stays on the input */
 .combobox-option[aria-selected="true"],
 [data-state-selected] .combobox-option[aria-selected="true"] {
   background: var(--color-interaction-selection-bg);
   color: var(--color-interaction-selection-text);
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
@@ -136,7 +122,7 @@
 
 .combobox-group-heading {
   display: block;
-  padding: var(--space-4) var(--density-control-padding-x, 12px) 0;
+  padding: var(--space-4) var(--density-control-padding-x, 8px) 0;
   color: var(--color-text-subtle);
   font-size: var(--font-size-ui-sm);
   line-height: var(--font-line-height-ui-sm);
@@ -145,27 +131,12 @@
 .combobox-empty {
   display: none;
   align-items: center;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   color: var(--color-text-muted);
   font-style: italic;
 }
 
-.combobox-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.combobox-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 /* hover on the box */
 .combobox-root:hover,
 [data-state-hover] .combobox-root {
diff --git a/site/src/styles/components/command-palette.css b/site/src/styles/components/command-palette.css
index e69c1981d..3d724645b 100644
--- a/site/src/styles/components/command-palette.css
+++ b/site/src/styles/components/command-palette.css
@@ -1,7 +1,15 @@
+@import "../partials/button.css";
 .command-palette {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 .command-palette-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.command-palette :focus-visible,[data-state-focus-visible] .command-palette [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-.command-palette-dialog,[data-state-open] .command-palette-dialog {width:min(36rem,100%);max-height:80vh;margin:0;padding:var(--space-16);background:var(--color-surface-overlay);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-overlay);border-radius:var(--radius-none)}.command-palette [role=listbox] {list-style:none;padding:0;max-height:40vh;overflow:auto}.command-palette [role=option] {display:grid;grid-template-columns:5rem 1fr;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent;cursor:pointer}.command-palette [role=option] span {color:var(--color-text-muted)}.command-palette [aria-selected=true] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}.command-palette-dialog::backdrop {background:var(--color-surface-backdrop)}.command-palette-dialog:not([open]),[data-state-closed] .command-palette-dialog {display:none}.command-palette [data-command-status],[data-state-no-results] .command-palette [data-command-status] {color:var(--color-text-muted)}
+.command-palette :focus-visible,[data-state-focus-visible] .command-palette [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+.command-palette-dialog,[data-state-open] .command-palette-dialog {width:min(36rem,100%);max-height:80vh;margin:0;padding:var(--space-16);background:var(--color-surface-overlay);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-overlay);border-radius:var(--radius-none)}
+.command-palette [role=listbox] {list-style:none;padding:0;max-height:40vh;overflow:auto}
+.command-palette [role=option] {display:grid;grid-template-columns:5rem 1fr;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent;cursor:pointer}
+.command-palette [role=option] span {color:var(--color-text-muted)}
+.command-palette [aria-selected=true] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}
+.command-palette-dialog::backdrop {background:var(--color-surface-backdrop)}
+.command-palette-dialog:not([open]),[data-state-closed] .command-palette-dialog {display:none}
+.command-palette [data-command-status],[data-state-no-results] .command-palette [data-command-status] {color:var(--color-text-muted)}
 
 .command-palette [role="option"][aria-selected="true"] span { color: inherit; }
 
diff --git a/site/src/styles/components/compact-dashboard.css b/site/src/styles/components/compact-dashboard.css
index 0e3aec5a0..60bcfcc8c 100644
--- a/site/src/styles/components/compact-dashboard.css
+++ b/site/src/styles/components/compact-dashboard.css
@@ -1,6 +1,7 @@
+@import "../partials/button.css";
 .compact-dashboard {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 .compact-dashboard-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.compact-dashboard :focus-visible,[data-state-focus-visible] .compact-dashboard [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+.compact-dashboard :focus-visible,[data-state-focus-visible] .compact-dashboard [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 .compact-dashboard table {width:100%;border-collapse:collapse}.compact-dashboard th,.compact-dashboard td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}
 .compact-dashboard-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-12);margin:0}.compact-dashboard-metrics>div {padding:var(--space-12);background:var(--color-surface-chrome);border:var(--border-width-default) solid var(--color-border-divider)}.compact-dashboard dt {color:var(--color-text-muted)}.compact-dashboard dd {margin:var(--space-8) 0 0;font-size:var(--font-size-h2);color:var(--color-text-bright)}.compact-dashboard[aria-busy=true],[data-state-loading] .compact-dashboard {border-style:dashed}.compact-dashboard [data-dashboard-empty],[data-state-empty] .compact-dashboard [data-dashboard-empty] {color:var(--color-text-muted)}@media(max-width:480px){.compact-dashboard-metrics{grid-template-columns:1fr}}
 
diff --git a/site/src/styles/components/data-table.css b/site/src/styles/components/data-table.css
index 55b3a2f48..1398f3e7e 100644
--- a/site/src/styles/components/data-table.css
+++ b/site/src/styles/components/data-table.css
@@ -20,7 +20,7 @@
   position: relative;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -36,7 +36,7 @@
 
 .data-table .data-table-header-select,
 .data-table .data-table-cell-select {
-  width: var(--density-control-height, 32px);
+  width: var(--density-control-height, 24px);
   padding-inline-end: 0;
   text-align: center;
 }
@@ -51,7 +51,7 @@
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -73,8 +73,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   padding: 0;
   vertical-align: middle;
@@ -109,7 +109,7 @@
 .data-table-checkbox:checked::before {
   content: "✓";
   color: var(--color-action-primary-text);
-  font-size: calc(var(--density-icon, 16px) * 0.75);
+  font-size: calc(var(--density-icon, 12px) * 0.75);
   line-height: 1;
 }
 
@@ -125,7 +125,7 @@
 
 .data-table .data-table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -217,15 +217,15 @@
 [data-state-selected] .data-table-row-demo-target .data-table-checkbox::before {
   content: "✓";
   color: var(--color-action-primary-text);
-  font-size: calc(var(--density-icon, 16px) * 0.75);
+  font-size: calc(var(--density-icon, 12px) * 0.75);
   line-height: 1;
 }
 
-/* selected + focus-visible: the ring takes the on-fill colour */
+/* selected + focus-visible: the ordinary ring stays on the selection fill */
 .data-table .data-table-row[aria-selected="true"]:focus-visible,
 .data-table .data-table-row:has(.data-table-checkbox:checked):focus-visible,
 [data-state-selected][data-state-focus-visible] .data-table-row-demo-target {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
diff --git a/site/src/styles/components/date-picker.css b/site/src/styles/components/date-picker.css
index 6c1f893f9..58f8493fe 100644
--- a/site/src/styles/components/date-picker.css
+++ b/site/src/styles/components/date-picker.css
@@ -1,4 +1,5 @@
 @import "../themed-controls.css";
+@import "../partials/field.css";
 /* date-picker — reference CSS. The box is the text-field box; the calendar
    popup is the host's and only receives color-scheme. Every real pseudo-class
    is paired with the forced-state attribute the state matrix emits. */
@@ -43,19 +44,10 @@
   color: var(--color-text-muted);
 }
 
-.date-picker-root {
-  display: flex;
-  align-items: stretch;
-  min-height: var(--density-control-height, 32px);
-  background: var(--color-surface-input);
-  border: var(--border-width-default) solid var(--color-border-control);
-  border-radius: var(--radius-none);
-}
-
 .date-picker-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -75,21 +67,6 @@
   cursor: pointer;
 }
 
-.date-picker-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.date-picker-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 /* hover */
 .date-picker-root:hover,
 [data-state-hover] .date-picker-root {
diff --git a/site/src/styles/components/description-list.css b/site/src/styles/components/description-list.css
index b90f66bef..5d8ee2a77 100644
--- a/site/src/styles/components/description-list.css
+++ b/site/src/styles/components/description-list.css
@@ -1,3 +1,2 @@
-.description-list {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.description-list :focus-visible,[data-state-focus-visible] .description-list {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-.description-list {margin:0}.description-list>div {display:grid;grid-template-columns:minmax(6rem,1fr) 2fr;gap:var(--space-12);padding-block:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}.description-list dt {color:var(--color-text-muted)}.description-list dd {margin:0;overflow-wrap:anywhere}@media(max-width:480px){.description-list>div{grid-template-columns:1fr;gap:var(--space-4)}}[data-state-stacked] .description-list>div {grid-template-columns:1fr}
+.description-list {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;margin:0}
+.description-list :focus-visible,[data-state-focus-visible] .description-list {outline:var(--focus-ring);outline-offset:var(--focus-offset)}.description-list>div {display:grid;grid-template-columns:minmax(6rem,1fr) 2fr;gap:var(--space-12);padding-block:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}.description-list dt {color:var(--color-text-muted)}.description-list dd {margin:0;overflow-wrap:anywhere}@media(max-width:480px){.description-list>div{grid-template-columns:1fr;gap:var(--space-4)}}[data-state-stacked] .description-list>div {grid-template-columns:1fr}
diff --git a/site/src/styles/components/diagnostics.css b/site/src/styles/components/diagnostics.css
index 2f0896b8f..0ad1a9e73 100644
--- a/site/src/styles/components/diagnostics.css
+++ b/site/src/styles/components/diagnostics.css
@@ -119,8 +119,8 @@
   flex-wrap: wrap;
   gap: var(--space-12);
   align-items: baseline;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
 }
 
@@ -159,8 +159,8 @@
   grid-template-columns: auto minmax(0, 1fr) auto auto;
   gap: 0 var(--space-8);
   align-items: baseline;
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
   cursor: default;
 }
@@ -186,7 +186,7 @@
 .diagnostics-empty {
   display: none;
   margin: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
 }
 
 .diagnostics-status {
@@ -251,10 +251,10 @@
   background: var(--color-code-selection-bg);
 }
 
-/* selected + focus-visible: the ring recolours on the fill */
+/* selected + focus-visible: the ordinary ring stays on the fill */
 .diagnostics-list:focus-visible .diagnostics-row[aria-selected="true"],
 [data-state-selected][data-state-focus-visible] .diagnostics-row-active {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
diff --git a/site/src/styles/components/dialog.css b/site/src/styles/components/dialog.css
index f2f473fe5..047a614f9 100644
--- a/site/src/styles/components/dialog.css
+++ b/site/src/styles/components/dialog.css
@@ -1,3 +1,5 @@
+@import "../partials/button.css";
+@import "../partials/field.css";
 /* dialog — reference CSS. A native <dialog> rendered open in flow inside a
    wrapper that stands in for ::backdrop; a host uses showModal(), where the
    same rules apply to ::backdrop. Every real pseudo-class is paired with the
@@ -81,15 +83,9 @@
   gap: var(--space-4);
 }
 
-.dialog-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .dialog-field-input {
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -104,13 +100,6 @@
   outline-offset: var(--focus-offset);
 }
 
-.dialog-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .dialog-actions {
   display: flex;
   flex-wrap: wrap;
@@ -123,32 +112,6 @@
   margin-top: var(--space-4);
 }
 
-.dialog-button {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.dialog-button-primary {
-  background: var(--color-action-primary-bg);
-  border-color: var(--color-action-primary-border);
-  color: var(--color-action-primary-text);
-}
-
-.dialog-button-destructive {
-  background: var(--color-action-destructive-filled-bg);
-  border-color: var(--color-action-destructive-border);
-  color: var(--color-action-destructive-filled-text);
-}
-
 .dialog-trap-note {
   display: none;
   margin: var(--space-12) 0 0;
@@ -163,40 +126,19 @@
   background: var(--color-action-tertiary-hover-bg);
 }
 
-.dialog-button:hover,
+/* the actions take their box, tones and real states from the button partial */
 [data-state-hover] .dialog-button {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-.dialog-button-primary:hover,
-[data-state-hover] .dialog-button-primary {
-  background: var(--color-action-primary-hover-bg);
-}
-
-.dialog-button-destructive:hover,
-[data-state-hover] .dialog-button-destructive {
-  background: var(--color-action-destructive-hover-bg);
-  color: var(--color-action-destructive-hover-text);
+  --_bg: var(--_bg-hover);
+  --_fg: var(--_fg-hover);
 }
 
 /* focus-visible: the dashed ring; on a fill it takes the on-fill colour */
 .dialog-close:focus-visible,
-.dialog-button:focus-visible,
 [data-state-focus-visible] .dialog-close {
   outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
-.dialog-button-primary:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
-  outline-offset: var(--focus-offset);
-}
-
-.dialog-button-destructive:focus-visible {
-  outline: var(--border-width-default) dashed var(--color-action-destructive-filled-text);
-  outline-offset: var(--focus-offset);
-}
-
 /* open: the native attribute; the matrix re-adds it */
 .dialog[open],
 [data-state-open] .dialog {
@@ -209,7 +151,7 @@
 }
 
 [data-state-closed] .dialog-backdrop {
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   background: transparent;
 }
 
@@ -246,19 +188,6 @@
   .dialog-close:hover {
     background: transparent;
   }
-
-  .dialog-button:hover {
-    background: var(--color-action-secondary-bg);
-  }
-
-  .dialog-button-primary:hover {
-    background: var(--color-action-primary-bg);
-  }
-
-  .dialog-button-destructive:hover {
-    background: var(--color-action-destructive-filled-bg);
-    color: var(--color-action-destructive-filled-text);
-  }
 }
 
 @media (max-width: 320px) {
@@ -274,7 +203,6 @@
   }
 
   .dialog-close:focus-visible,
-  .dialog-button:focus-visible,
   .dialog:focus-visible,
   [data-state-focus-visible] .dialog-close,
   [data-state-focus-trapped] .dialog {
diff --git a/site/src/styles/components/diff-view.css b/site/src/styles/components/diff-view.css
index 515ade38e..c53855dec 100644
--- a/site/src/styles/components/diff-view.css
+++ b/site/src/styles/components/diff-view.css
@@ -182,7 +182,7 @@
   display: inline-flex;
   gap: var(--space-4);
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-4);
   background: transparent;
   border: 0;
@@ -241,7 +241,7 @@
   color: var(--color-interaction-selection-text);
 }
 
-/* focus-visible: the row ring; recoloured on the selection fill */
+/* focus-visible: the ordinary row ring, including on the selection fill */
 .diff-view-row:focus-visible,
 [data-state-focus-visible] .diff-view-row-active {
   outline: var(--focus-ring);
@@ -250,7 +250,7 @@
 
 .diff-view-row[aria-current="true"]:focus-visible,
 [data-state-selected][data-state-focus-visible] .diff-view-row-active {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
diff --git a/site/src/styles/components/disclosure.css b/site/src/styles/components/disclosure.css
index ee90de4e9..7e4129297 100644
--- a/site/src/styles/components/disclosure.css
+++ b/site/src/styles/components/disclosure.css
@@ -1,6 +1,3 @@
 .disclosure {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.disclosure-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.disclosure :focus-visible,[data-state-focus-visible] .disclosure [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-.disclosure :disabled,[data-state-disabled] .disclosure-control {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-.disclosure-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
+.disclosure :focus-visible,[data-state-focus-visible] .disclosure [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 .disclosure summary {cursor:pointer;min-height:var(--density-control-height);padding:var(--space-8)}.disclosure[open],[data-state-expanded] .disclosure {border-inline-start:var(--border-width-emphasis) solid var(--color-border-active)}.disclosure:not([open])>:not(summary),[data-state-collapsed] .disclosure>:not(summary) {display:none}
diff --git a/site/src/styles/components/drawer.css b/site/src/styles/components/drawer.css
index 010ca7e9c..ab02241a1 100644
--- a/site/src/styles/components/drawer.css
+++ b/site/src/styles/components/drawer.css
@@ -55,7 +55,7 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   padding: var(--space-8) var(--space-12);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
 }
@@ -107,7 +107,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   padding: 0 var(--space-12);
   color: var(--color-text-default);
   text-decoration: none;
@@ -164,7 +164,7 @@
 }
 
 [data-state-closed] .drawer-backdrop {
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   background: transparent;
 }
 
diff --git a/site/src/styles/components/editor-search.css b/site/src/styles/components/editor-search.css
index 3bea34171..fd16bbaad 100644
--- a/site/src/styles/components/editor-search.css
+++ b/site/src/styles/components/editor-search.css
@@ -1,4 +1,5 @@
+@import "../partials/button.css";
 .editor-search {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 .editor-search-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.editor-search :focus-visible,[data-state-focus-visible] .editor-search [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+.editor-search :focus-visible,[data-state-focus-visible] .editor-search [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 .editor-search pre {padding:var(--space-12);overflow:auto;background:var(--color-surface-code);font:inherit}.editor-search mark {background:var(--color-code-search-match-bg);color:var(--color-text-default)}.editor-search mark[data-current] {background:var(--color-code-search-current-bg);color:var(--color-code-search-current-text);outline:var(--border-width-default) dashed var(--color-interaction-focus-ring-container)}.editor-search [data-search-status],[data-state-no-results] .editor-search [data-search-status] {color:var(--color-text-muted)}.editor-search-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
diff --git a/site/src/styles/components/empty-state.css b/site/src/styles/components/empty-state.css
index 5bc7275a7..8f3516d68 100644
--- a/site/src/styles/components/empty-state.css
+++ b/site/src/styles/components/empty-state.css
@@ -1,3 +1,4 @@
+@import "../partials/button.css";
 /* empty-state — reference CSS. A centred block where content would be;
    only the optional action is interactive and it takes the secondary
    button's states. Token variables only. */
@@ -40,19 +41,9 @@
   overflow-wrap: anywhere;
 }
 
+/* the action is the secondary button from the button partial */
 .empty-state-action {
-  display: inline-flex;
-  align-items: center;
-  min-height: var(--density-control-height, 32px);
   margin-top: var(--space-8);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  font: inherit;
-  text-decoration: none;
-  cursor: pointer;
 }
 
 /* the block has only its default state; the matrix emits it as well */
@@ -60,20 +51,6 @@
   background: var(--color-surface-default);
 }
 
-.empty-state-action:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-.empty-state-action:active {
-  background: var(--color-action-secondary-pressed-bg);
-  border-color: var(--color-border-active);
-}
-
-.empty-state-action:focus-visible {
-  outline: var(--focus-ring);
-  outline-offset: var(--focus-offset);
-}
-
 @media (max-width: 320px) {
   .empty-state {
     padding: var(--space-16);
@@ -84,21 +61,3 @@
     justify-content: center;
   }
 }
-
-@media (hover: none) {
-  .empty-state-action:hover {
-    background: var(--color-action-secondary-bg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .empty-state-action {
-    transition: background-color var(--motion-duration-fast);
-  }
-}
-
-@media (forced-colors: active) {
-  .empty-state-action:focus-visible {
-    outline-color: Highlight;
-  }
-}
diff --git a/site/src/styles/components/error-state.css b/site/src/styles/components/error-state.css
index e027d989b..e0b237be5 100644
--- a/site/src/styles/components/error-state.css
+++ b/site/src/styles/components/error-state.css
@@ -1,3 +1,4 @@
+@import "../partials/button.css";
 .error-state {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.error-state :focus-visible,[data-state-focus-visible] .error-state {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+.error-state :focus-visible,[data-state-focus-visible] .error-state {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 .error-state-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}.error-state :disabled,[data-state-disabled] .error-state-control {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}.error-state,[data-state-error] .error-state {border-inline-start:var(--border-width-emphasis) solid var(--color-status-danger-border)}.error-state h3 {color:var(--color-status-danger-text)}.error-state[aria-busy=true],[data-state-loading] .error-state {border-block-style:dashed}
diff --git a/site/src/styles/components/field.css b/site/src/styles/components/field.css
index 77e248926..b7e4fd981 100644
--- a/site/src/styles/components/field.css
+++ b/site/src/styles/components/field.css
@@ -1,3 +1,4 @@
+@import "../partials/field.css";
 /* field — reference CSS. The wrapper owns the label, help and message; the
    control inside is styled by its own component. The minimal .field-input
    here is only what the demo needs. Every real pseudo-class is paired with
@@ -12,12 +13,6 @@
   color: var(--color-text-default);
 }
 
-.field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -30,8 +25,8 @@
 
 .field-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
diff --git a/site/src/styles/components/fieldset.css b/site/src/styles/components/fieldset.css
index 699f9c405..be8ef1630 100644
--- a/site/src/styles/components/fieldset.css
+++ b/site/src/styles/components/fieldset.css
@@ -1,3 +1,4 @@
+@import "../partials/field.css";
 /* fieldset — reference CSS. A divider border, a legend in text.bright and
    the fields stacked inside; disabled propagates natively and is paired
    with the forced-state attribute the state matrix emits. The minimal
@@ -33,16 +34,10 @@
   min-width: 0;
 }
 
-.fieldset-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .fieldset-input {
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-input);
   color: var(--color-text-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -57,13 +52,6 @@
   outline-offset: var(--focus-offset);
 }
 
-.fieldset-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 /* disabled: the legend and labels dim; every control inside takes its own disabled treatment */
 .fieldset:disabled .fieldset-legend,
 .fieldset:disabled .fieldset-label,
diff --git a/site/src/styles/components/file-browser.css b/site/src/styles/components/file-browser.css
index 213ca6f32..053b0d15c 100644
--- a/site/src/styles/components/file-browser.css
+++ b/site/src/styles/components/file-browser.css
@@ -1,8 +1,8 @@
-.file-browser {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
+@import "../partials/button.css";
+.file-browser {box-sizing:border-box;display:grid;gap:var(--space-16);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;grid-template-columns:minmax(8rem,1fr) 3fr}
 .file-browser-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.file-browser :focus-visible,[data-state-focus-visible] .file-browser [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-.file-browser table {width:100%;border-collapse:collapse}.file-browser th,.file-browser td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}
-.file-browser {grid-template-columns:minmax(8rem,1fr) 3fr;gap:var(--space-16)}.file-browser [aria-selected=true],[data-state-selected] .file-browser [role=treeitem]:first-child {border-inline-start:var(--border-width-emphasis) solid var(--color-border-selected-indicator)}.file-browser [data-file-status],[data-state-empty] .file-browser [data-file-status],[data-state-no-results] .file-browser [data-file-status] {color:var(--color-text-muted)}@media(max-width:640px){.file-browser{grid-template-columns:1fr}}
+.file-browser :focus-visible,[data-state-focus-visible] .file-browser [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+.file-browser table {width:100%;border-collapse:collapse}.file-browser th,.file-browser td {text-align:start;padding:var(--space-8);border-bottom:var(--border-width-default) solid var(--color-border-divider)}.file-browser [aria-selected=true],[data-state-selected] .file-browser [role=treeitem]:first-child {border-inline-start:var(--border-width-emphasis) solid var(--color-border-selected-indicator)}.file-browser [data-file-status],[data-state-empty] .file-browser [data-file-status],[data-state-no-results] .file-browser [data-file-status] {color:var(--color-text-muted)}@media(max-width:640px){.file-browser{grid-template-columns:1fr}}
 
 .file-browser thead th {color:var(--color-text-bright)}
 .file-browser tbody {color:var(--color-text-default)}
diff --git a/site/src/styles/components/file-input.css b/site/src/styles/components/file-input.css
index 8641fd0bc..5f5f12510 100644
--- a/site/src/styles/components/file-input.css
+++ b/site/src/styles/components/file-input.css
@@ -1,3 +1,5 @@
+@import "../partials/button.css";
+@import "../partials/field.css";
 /* file-input — reference CSS. The native input stays focusable (sr-only
    pattern) and a second label is drawn as the secondary button. Every real
    pseudo-class is paired with the forced-state attribute the state matrix
@@ -13,12 +15,6 @@
   color: var(--color-text-default);
 }
 
-.file-input-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .file-input-root {
   position: relative;
   display: flex;
@@ -51,19 +47,6 @@
   border: 0;
 }
 
-.file-input-button {
-  display: inline-flex;
-  align-items: center;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
-  background: var(--color-action-secondary-bg);
-  border: var(--border-width-default) solid var(--color-action-secondary-border);
-  border-radius: var(--radius-none);
-  color: var(--color-action-secondary-text);
-  white-space: nowrap;
-  cursor: pointer;
-}
-
 .file-input-status {
   min-width: 0;
   color: var(--color-text-muted);
@@ -102,7 +85,7 @@
   grid-template-columns: minmax(0, 1fr) auto auto;
   align-items: center;
   column-gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   border-bottom: var(--border-width-default) solid var(--color-border-divider);
 }
 
@@ -147,30 +130,11 @@
   line-height: var(--font-line-height-ui-sm);
 }
 
-.file-input-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.file-input-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 /* hover */
-.file-input-button:hover,
+/* the label is the secondary button from the button partial */
 [data-state-hover] .file-input-button {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-.file-input-button:active {
-  background: var(--color-action-secondary-pressed-bg);
-  border-color: var(--color-border-active);
+  --_bg: var(--_bg-hover);
+  --_fg: var(--_fg-hover);
 }
 
 /* focus-visible: the input has focus; the ring is drawn on its button label */
@@ -226,9 +190,13 @@
 /* disabled */
 .file-input-root:has(.file-input-native:disabled) .file-input-button,
 [data-state-disabled] .file-input-button {
-  background: var(--color-interaction-disabled-bg);
-  border-color: var(--color-border-disabled);
-  color: var(--color-text-disabled);
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
   cursor: not-allowed;
 }
 
@@ -254,14 +222,7 @@
   display: block;
 }
 
-@media (hover: none) {
-  .file-input-button:hover {
-    background: var(--color-action-secondary-bg);
-  }
-}
-
 @media (prefers-reduced-motion: no-preference) {
-  .file-input-button,
   .file-input-root {
     transition: background-color var(--motion-duration-fast);
   }
diff --git a/site/src/styles/components/filterable-table.css b/site/src/styles/components/filterable-table.css
index bf0eb6bb6..583ec69db 100644
--- a/site/src/styles/components/filterable-table.css
+++ b/site/src/styles/components/filterable-table.css
@@ -67,7 +67,7 @@
 .filterable-table-filters {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
   padding: 0 var(--space-8);
 }
@@ -188,7 +188,7 @@
 [data-state-selected] .filterable-table .filterable-table-row-selected .data-table-checkbox::before {
   content: "✓";
   color: var(--color-action-primary-text);
-  font-size: calc(var(--density-icon, 16px) * 0.75);
+  font-size: calc(var(--density-icon, 12px) * 0.75);
   line-height: 1;
 }
 
diff --git a/site/src/styles/components/form-builder.css b/site/src/styles/components/form-builder.css
index 980497bc4..f9402d95c 100644
--- a/site/src/styles/components/form-builder.css
+++ b/site/src/styles/components/form-builder.css
@@ -1,6 +1,8 @@
 .form-builder { min-inline-size: 0; max-inline-size: 56rem; padding: var(--space-16); background: var(--color-surface-default); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-control); }
 .form-builder-status { color: var(--color-text-muted); }
 .form-builder-editor { display: grid; gap: var(--space-8); }
+/* button.md: a button is as wide as its label, also inside the editor grid */
+.form-builder-editor > .button { justify-self: start; }
 .form-builder-editor label { display: grid; gap: var(--space-4); }
 .form-builder-editor :is(input:not([type=checkbox]), textarea, select) { inline-size: 100%; min-inline-size: 0; box-sizing: border-box; background: var(--color-surface-input); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-control); padding: var(--space-8); font: inherit; }
 .form-builder-editor label:has(input[type=checkbox]) { display: flex; }
diff --git a/site/src/styles/components/i3-window-frame.css b/site/src/styles/components/i3-window-frame.css
index bfafe4364..0be3d5ba5 100644
--- a/site/src/styles/components/i3-window-frame.css
+++ b/site/src/styles/components/i3-window-frame.css
@@ -85,7 +85,7 @@
 }
 
 .i3-window-frame-workspace[aria-selected="true"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 
 .i3-window-frame-workspace:focus:not(:focus-visible) {
diff --git a/site/src/styles/components/icon-button.css b/site/src/styles/components/icon-button.css
index e19bf6b39..429a6a53b 100644
--- a/site/src/styles/components/icon-button.css
+++ b/site/src/styles/components/icon-button.css
@@ -6,8 +6,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--density-control-height, 32px);
-  height: var(--density-control-height, 32px);
+  width: var(--density-control-height, 24px);
+  height: var(--density-control-height, 24px);
   padding: 0;
   margin: 0;
   background: var(--color-action-secondary-bg);
@@ -66,10 +66,10 @@
   fill: currentColor;
 }
 
-/* toggled + focus-visible: the ring takes the on-fill colour */
+/* toggled + focus-visible: the ordinary ring stays on the selection fill */
 .icon-button[aria-pressed="true"]:focus-visible,
 [data-state-toggled][data-state-focus-visible] .icon-button {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
diff --git a/site/src/styles/components/kbd.css b/site/src/styles/components/kbd.css
index 70a748d71..49d0aca1e 100644
--- a/site/src/styles/components/kbd.css
+++ b/site/src/styles/components/kbd.css
@@ -1,3 +1,2 @@
-.kbd {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.kbd :focus-visible,[data-state-focus-visible] .kbd {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-.kbd {display:inline-block;min-width:1.5em;text-align:center;padding:var(--space-2) var(--space-4);font:inherit;border-bottom-width:var(--border-width-emphasis)}
+.kbd {box-sizing:border-box;display:inline-block;gap:var(--space-12);min-width:1.5em;padding:var(--space-2) var(--space-4);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit;text-align:center;border-bottom-width:var(--border-width-emphasis)}
+.kbd :focus-visible,[data-state-focus-visible] .kbd {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
diff --git a/site/src/styles/components/link.css b/site/src/styles/components/link.css
index 0337eced4..8294b2832 100644
--- a/site/src/styles/components/link.css
+++ b/site/src/styles/components/link.css
@@ -29,7 +29,7 @@
   align-items: center;
   gap: var(--space-4);
   padding: 0 var(--space-4);
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   font-size: var(--font-size-ui-md);
   line-height: var(--font-line-height-ui-md);
 }
@@ -42,10 +42,10 @@
   fill: none;
 }
 
-/* hover: the strong fill, the explicit near-white hover highlight, a 2px underline in the text colour */
+/* hover (D-027): the plain hover fill, the explicit near-white hover highlight, a 2px underline in the text colour */
 @media (hover: hover) {
   .link:hover {
-    background: var(--color-interaction-hover-bg-strong);
+    background: var(--color-interaction-hover-bg);
     color: var(--color-text-link-hover);
     text-decoration-color: currentColor;
     text-decoration-thickness: var(--border-width-emphasis);
@@ -53,7 +53,7 @@
 }
 
 [data-state-hover] .link {
-  background: var(--color-interaction-hover-bg-strong);
+  background: var(--color-interaction-hover-bg);
   color: var(--color-text-link-hover);
   text-decoration-color: currentColor;
   text-decoration-thickness: var(--border-width-emphasis);
diff --git a/site/src/styles/components/list.css b/site/src/styles/components/list.css
index 41b55101c..d32fec074 100644
--- a/site/src/styles/components/list.css
+++ b/site/src/styles/components/list.css
@@ -1,5 +1,5 @@
 /* list — reference CSS. An APG listbox; the selected option is the
-   selection fill with a check glyph, and the ring recolours on the fill.
+   selection fill with a check glyph, and the ordinary ring stays on the fill.
    Every pseudo-class is paired with the forced-state attribute the state
    matrix emits. Token variables only. */
 
@@ -19,8 +19,8 @@
   display: flex;
   align-items: center;
   gap: var(--space-8);
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-2) var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-2) var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   border-top: var(--border-width-default) solid var(--color-border-divider);
   color: var(--color-text-default);
@@ -35,7 +35,7 @@
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-interaction-selection-text);
   visibility: hidden;
 }
@@ -94,10 +94,10 @@
   background: var(--color-interaction-selection-bg);
 }
 
-/* selected + focus-visible: the ring takes the on-fill colour */
+/* selected + focus-visible: the ordinary ring stays on the selection fill */
 .list-option[aria-selected="true"]:focus-visible,
 [data-state-selected][data-state-focus-visible] .list-option-demo-target {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
diff --git a/site/src/styles/components/loading-indicator.css b/site/src/styles/components/loading-indicator.css
index 9bf86d753..3d59d3685 100644
--- a/site/src/styles/components/loading-indicator.css
+++ b/site/src/styles/components/loading-indicator.css
@@ -21,7 +21,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
-  min-height: calc(3 * var(--density-row-height, 36px));
+  min-height: calc(3 * var(--density-row-height, 28px));
   padding: var(--space-16);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-divider);
diff --git a/site/src/styles/components/menu.css b/site/src/styles/components/menu.css
index b1704e4bd..268a3b0b4 100644
--- a/site/src/styles/components/menu.css
+++ b/site/src/styles/components/menu.css
@@ -15,8 +15,8 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -65,8 +65,8 @@
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -82,7 +82,7 @@
   display: inline-flex;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
   color: var(--color-text-bright);
   visibility: hidden;
 }
@@ -123,7 +123,7 @@
   color: var(--color-text-link-hover);
 }
 
-/* focus-visible: the ring on the button; on items it follows the fill */
+/* focus-visible: the ordinary ring on the button and selected items */
 .menu-button:focus-visible,
 [data-state-focus-visible] .menu-button {
   outline: var(--focus-ring);
@@ -131,8 +131,8 @@
 }
 
 .menu-item:focus-visible {
-  outline: var(--focus-ring-container);
-  outline-offset: var(--focus-offset-container);
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-offset);
 }
 
 .menu-button:focus:not(:focus-visible),
diff --git a/site/src/styles/components/multiselect.css b/site/src/styles/components/multiselect.css
index 19c09343f..8e9883c35 100644
--- a/site/src/styles/components/multiselect.css
+++ b/site/src/styles/components/multiselect.css
@@ -1,7 +1,7 @@
 @import "./checkbox.css";
+@import "../partials/button.css";
 .multiselect {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 .multiselect-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.multiselect :focus-visible,[data-state-focus-visible] .multiselect [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+.multiselect :focus-visible,[data-state-focus-visible] .multiselect [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 .multiselect :disabled,[data-state-disabled] .multiselect-control {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-.multiselect-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 .multiselect [data-options] {display:grid;gap:var(--space-8)}.multiselect label {display:flex;gap:var(--space-8);align-items:center;min-height:var(--density-control-height)}.multiselect input[type=checkbox] {accent-color:var(--color-action-primary-bg)}.multiselect label:has(:checked),[data-state-checked] .multiselect label:has(input[type=checkbox]):first-child {border-inline-start:var(--border-width-emphasis) solid var(--color-border-active)}.multiselect [data-selection-status],[data-state-no-results] .multiselect [data-selection-status] {color:var(--color-text-muted)}
diff --git a/site/src/styles/components/number-field.css b/site/src/styles/components/number-field.css
index 185ca4102..470dce969 100644
--- a/site/src/styles/components/number-field.css
+++ b/site/src/styles/components/number-field.css
@@ -1,4 +1,5 @@
 @import "../themed-controls.css";
+@import "../partials/field.css";
 /* number-field — reference CSS. The text-field box around a native number
    input, the host spinner hidden and replaced by two square stepper
    buttons. Every real pseudo-class is paired with the forced-state
@@ -13,25 +14,10 @@
   color: var(--color-text-default);
 }
 
-.number-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.number-field-root {
-  display: flex;
-  align-items: stretch;
-  min-height: var(--density-control-height, 32px);
-  background: var(--color-surface-input);
-  border: var(--border-width-default) solid var(--color-border-control);
-  border-radius: var(--radius-none);
-}
-
 .number-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -88,21 +74,6 @@
   border-top: var(--border-width-default) solid var(--color-border-divider);
 }
 
-.number-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.number-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 /* hover */
 @media (hover: hover) {
   .number-field-root:hover {
diff --git a/site/src/styles/components/pagination.css b/site/src/styles/components/pagination.css
index e5f0d0d8b..c4ba6c154 100644
--- a/site/src/styles/components/pagination.css
+++ b/site/src/styles/components/pagination.css
@@ -12,7 +12,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -31,8 +31,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-8);
   background: transparent;
   border-radius: var(--radius-none);
@@ -43,7 +43,7 @@
 }
 
 .pagination-edge {
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
 }
 
 .pagination-glyph {
@@ -54,8 +54,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
   color: var(--color-text-muted);
   user-select: none;
 }
@@ -63,7 +63,7 @@
 .pagination-status {
   display: inline-flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0 var(--space-8);
   color: var(--color-text-default);
   font-variant-numeric: tabular-nums;
@@ -98,7 +98,7 @@
   outline: 0;
 }
 
-/* current: the selection fill; the ring recolours on it */
+/* current: the selection fill; the ordinary ring stays on it */
 .pagination-link[aria-current="page"],
 [data-state-current] .pagination-current {
   background: var(--color-interaction-selection-bg);
@@ -111,7 +111,7 @@
 }
 
 .pagination-link[aria-current="page"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 
 /* disabled ends: no href, aria-disabled, never opacity */
diff --git a/site/src/styles/components/popover.css b/site/src/styles/components/popover.css
index cc8233258..310c899c9 100644
--- a/site/src/styles/components/popover.css
+++ b/site/src/styles/components/popover.css
@@ -1,4 +1,5 @@
+@import "../partials/button.css";
 .popover {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 .popover-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.popover :focus-visible,[data-state-focus-visible] .popover [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+.popover :focus-visible,[data-state-focus-visible] .popover [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 .popover-panel,[data-state-open] .popover-panel {padding:var(--space-16);max-width:min(24rem,90vw);background:var(--color-surface-overlay);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-overlay);border-radius:var(--radius-none);margin:0}.popover-panel::backdrop {background:transparent}.popover-panel[hidden],[data-state-closed] .popover-panel {display:none}
diff --git a/site/src/styles/components/radio-group.css b/site/src/styles/components/radio-group.css
index cac0969fe..0ee9189c4 100644
--- a/site/src/styles/components/radio-group.css
+++ b/site/src/styles/components/radio-group.css
@@ -1,3 +1,4 @@
+@import "../partials/field.css";
 /* radio-group — reference CSS. The native radio, appearance none, is a
    square box; the inner square stacks over it in the same 16px cell. Every
    real pseudo-class is paired with the forced-state attribute the state
@@ -41,7 +42,7 @@
 
 .radio-group-option {
   display: grid;
-  grid-template-columns: var(--density-icon, 16px) minmax(0, 1fr);
+  grid-template-columns: var(--density-icon, 12px) minmax(0, 1fr);
   align-items: start;
   gap: var(--space-8);
   min-height: var(--space-24);
@@ -51,8 +52,8 @@
 
 .radio-group-control {
   display: inline-grid;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
 }
 
 .radio-group-control > * {
@@ -61,8 +62,8 @@
 
 .radio-group-input {
   appearance: none;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   margin: 0;
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -85,14 +86,6 @@
   line-height: var(--font-line-height-ui-md);
 }
 
-.radio-group-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 /* hover: the box fill only, on hover-capable pointers */
 @media (hover: hover) {
   .radio-group-option:hover .radio-group-input:not(:disabled) {
diff --git a/site/src/styles/components/range.css b/site/src/styles/components/range.css
index 3262a15fd..8d2557418 100644
--- a/site/src/styles/components/range.css
+++ b/site/src/styles/components/range.css
@@ -1,7 +1,5 @@
 @import "../themed-controls.css";
 .range {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.range-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.range :focus-visible,[data-state-focus-visible] .range [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-.range :disabled,[data-state-disabled] .range-control {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-.range-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
+.range :focus-visible,[data-state-focus-visible] .range [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+.range :disabled,[data-state-disabled] .range input {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
 .range input {width:100%;min-height:var(--density-control-height);accent-color:var(--color-action-primary-bg)}.range output {font-variant-numeric:tabular-nums}
diff --git a/site/src/styles/components/repeater.css b/site/src/styles/components/repeater.css
index bbc14629c..d673d4106 100644
--- a/site/src/styles/components/repeater.css
+++ b/site/src/styles/components/repeater.css
@@ -1,6 +1,7 @@
+@import "../partials/button.css";
 .repeater {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
 .repeater-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.repeater :focus-visible,[data-state-focus-visible] .repeater [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+.repeater :focus-visible,[data-state-focus-visible] .repeater [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 .repeater :disabled,[data-state-disabled] .repeater-control {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
 .repeater-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
 .repeater ol {display:grid;gap:var(--space-12);padding-inline-start:var(--space-24)}.repeater [data-empty],[data-state-empty] .repeater [data-empty] {color:var(--color-text-muted)}
diff --git a/site/src/styles/components/search-field.css b/site/src/styles/components/search-field.css
index c96b1cb05..040922e7e 100644
--- a/site/src/styles/components/search-field.css
+++ b/site/src/styles/components/search-field.css
@@ -1,3 +1,4 @@
+@import "../partials/field.css";
 /* search-field — reference CSS. The text-field box around a native search
    input with a magnifier, a clear button, a shortcut hint, a loading glyph
    and a status line. Every real pseudo-class and attribute is paired with
@@ -11,16 +12,10 @@
   color: var(--color-text-default);
 }
 
-.search-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .search-field-root {
   display: flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding-inline-start: var(--space-8);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
@@ -112,13 +107,6 @@
   line-height: var(--font-line-height-ui-sm);
 }
 
-.search-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .search-field-status {
   display: none;
   margin: 0;
diff --git a/site/src/styles/components/segmented-control.css b/site/src/styles/components/segmented-control.css
index 6c50b8976..2dbe1b731 100644
--- a/site/src/styles/components/segmented-control.css
+++ b/site/src/styles/components/segmented-control.css
@@ -1,9 +1,7 @@
 @import "./radio-group.css";
 .segmented-control {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.segmented-control-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.segmented-control :focus-visible,[data-state-focus-visible] .segmented-control [data-demo-focus-target] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
-.segmented-control :disabled,[data-state-disabled] .segmented-control-control {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
-.segmented-control-actions {display:flex;flex-wrap:wrap;gap:var(--space-8)}
+.segmented-control :focus-visible,[data-state-focus-visible] .segmented-control [data-demo-focus-target] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+.segmented-control :disabled,[data-state-disabled] .segmented-control input {color:var(--color-text-disabled);background:var(--color-interaction-disabled-bg);border-color:var(--color-border-disabled);opacity:1}
 .segmented-control-options {display:flex;flex-wrap:wrap}.segmented-control label {display:flex;align-items:center;gap:var(--space-4);padding:var(--space-8);border:var(--border-width-default) solid var(--color-border-control)}.segmented-control label:has(:checked),[data-state-checked] .segmented-control label:first-child {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text)}.segmented-control input {accent-color:var(--color-action-primary-bg)}
 
 .segmented-control input:checked:focus-visible {outline-color:var(--color-interaction-focus-ring-container)}
diff --git a/site/src/styles/components/select.css b/site/src/styles/components/select.css
index 96404e4e5..f22f63f1d 100644
--- a/site/src/styles/components/select.css
+++ b/site/src/styles/components/select.css
@@ -1,4 +1,5 @@
 @import "../themed-controls.css";
+@import "../partials/field.css";
 /* select — reference CSS. The text-field box around a native <select>
    with the host chevron replaced by a line icon; the open popup stays
    host-rendered. Every real pseudo-class is paired with the forced-state
@@ -13,12 +14,6 @@
   color: var(--color-text-default);
 }
 
-.select-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .select-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -28,7 +23,7 @@
   position: relative;
   display: grid;
   min-width: 0;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   color: var(--color-icon-default);
   border: var(--border-width-default) solid var(--color-border-control);
@@ -39,8 +34,8 @@
   appearance: none;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
-  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) - 2 * var(--border-width-default));
+  padding: 0 calc(var(--density-control-padding-x, 8px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 8px);
   margin: 0;
   background: transparent;
   border: 0;
@@ -65,8 +60,8 @@
 }
 
 .select-control option {
-  padding: 0 var(--density-control-padding-x, 12px);
-  min-height: var(--density-row-height, 36px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  min-height: var(--density-row-height, 28px);
 }
 
 .select-control optgroup {
@@ -80,7 +75,7 @@
 
 .select-chevron {
   position: absolute;
-  inset-inline-end: var(--density-control-padding-x, 12px);
+  inset-inline-end: var(--density-control-padding-x, 8px);
   top: 50%;
   width: var(--icon-size-md);
   height: var(--icon-size-md);
@@ -90,21 +85,6 @@
   pointer-events: none;
 }
 
-.select-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.select-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 /* hover */
 @media (hover: hover) {
   .select-root:hover {
diff --git a/site/src/styles/components/settings-panel.css b/site/src/styles/components/settings-panel.css
index b2867f32a..a7b86d9cb 100644
--- a/site/src/styles/components/settings-panel.css
+++ b/site/src/styles/components/settings-panel.css
@@ -92,7 +92,7 @@
 
   .settings-panel-nav .sidebar-nav-list {
     display: flex;
-    gap: var(--density-gap, 4px);
+    gap: var(--density-gap, 2px);
     overflow-x: auto;
     scrollbar-width: thin;
   }
@@ -103,8 +103,8 @@
 
   .settings-panel-nav .sidebar-nav-link {
     width: auto;
-    min-height: var(--density-control-height, 32px);
-    padding: 0 var(--density-control-padding-x, 12px);
+    min-height: var(--density-control-height, 24px);
+    padding: 0 var(--density-control-padding-x, 8px);
     margin-bottom: calc(-1 * var(--border-width-default));
     border-inline-start: 0;
     border-bottom: var(--border-width-emphasis) solid transparent;
diff --git a/site/src/styles/components/sidebar-nav.css b/site/src/styles/components/sidebar-nav.css
index 49dbd4e17..b92635270 100644
--- a/site/src/styles/components/sidebar-nav.css
+++ b/site/src/styles/components/sidebar-nav.css
@@ -4,7 +4,7 @@
    state matrix emits. Token variables only. */
 
 .sidebar-nav {
-  --_indent: calc(var(--density-icon, 16px) + var(--space-8));
+  --_indent: calc(var(--density-icon, 12px) + var(--space-8));
   min-width: 0;
   max-width: 15rem;
   padding: var(--space-4) 0;
@@ -36,9 +36,9 @@
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
-  padding-inline-start: calc(var(--density-control-padding-x, 12px) - var(--border-width-emphasis));
+  min-height: var(--density-row-height, 28px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
+  padding-inline-start: calc(var(--density-control-padding-x, 8px) - var(--border-width-emphasis));
   box-sizing: border-box;
   background: transparent;
   border: 0;
@@ -54,8 +54,8 @@
 .sidebar-nav-icon {
   display: inline-flex;
   flex: 0 0 auto;
-  width: var(--density-icon, 16px);
-  height: var(--density-icon, 16px);
+  width: var(--density-icon, 12px);
+  height: var(--density-icon, 12px);
   color: var(--color-icon-default);
 }
 
@@ -107,18 +107,18 @@
 }
 
 /* current: the bar and bright text */
-.sidebar-nav-link[aria-current="page"],
+.sidebar-nav-link:is([aria-current="page"], [aria-current="true"]),
 [data-state-current] .sidebar-nav-current {
   border-inline-start-color: var(--color-border-selected-indicator);
   color: var(--color-text-bright);
 }
 
-.sidebar-nav-link[aria-current="page"] .sidebar-nav-icon,
+.sidebar-nav-link:is([aria-current="page"], [aria-current="true"]) .sidebar-nav-icon,
 [data-state-current] .sidebar-nav-current .sidebar-nav-icon {
   color: var(--color-text-bright);
 }
 
-/* selected: the fill; the ring recolours on it */
+/* selected: the fill; the ordinary ring stays on it */
 .sidebar-nav-link[aria-selected="true"],
 [data-state-selected] .sidebar-nav-link-demo-target {
   background: var(--color-interaction-selection-bg);
@@ -131,7 +131,7 @@
 }
 
 .sidebar-nav-link[aria-selected="true"]:focus-visible {
-  outline-color: var(--color-interaction-focus-ring-container);
+  outline-color: var(--color-interaction-focus-ring);
 }
 
 /* selected, container inactive */
@@ -191,6 +191,38 @@
   padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
 }
 
+@media (min-width: 900px) and (max-width: 1279.98px) {
+/* collapsed: an icon rail; labels are hidden, not removed */
+.site-rail {
+  max-width: none;
+  width: max-content;
+}
+
+.site-rail .sidebar-nav-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.site-rail .sidebar-nav-chevron {
+  display: none;
+}
+
+.site-rail .sidebar-nav-sublist {
+  padding-inline-start: 0;
+}
+
+.site-rail .sidebar-nav-link {
+  justify-content: center;
+  padding-inline: var(--space-8);
+  padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
+}
+
+}
+
 @media (hover: none) {
   .sidebar-nav-link:hover {
     background: transparent;
@@ -213,7 +245,7 @@
     outline-color: Highlight;
   }
 
-  .sidebar-nav-link[aria-current="page"],
+  .sidebar-nav-link:is([aria-current="page"], [aria-current="true"]),
   [data-state-current] .sidebar-nav-current {
     border-inline-start-color: Highlight;
   }
diff --git a/site/src/styles/components/skeleton.css b/site/src/styles/components/skeleton.css
index f2a40287d..f04243596 100644
--- a/site/src/styles/components/skeleton.css
+++ b/site/src/styles/components/skeleton.css
@@ -1,3 +1,3 @@
 .skeleton {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.skeleton :focus-visible,[data-state-focus-visible] .skeleton {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+.skeleton :focus-visible,[data-state-focus-visible] .skeleton {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 .skeleton-block {height:var(--space-16);background:var(--color-surface-raised);border:var(--border-width-default) solid var(--color-border-divider)}.skeleton-short {width:60%}.skeleton[aria-busy=true],[data-state-loading] .skeleton,[data-state-reduced-motion] .skeleton {animation:none;transition:none}
diff --git a/site/src/styles/components/skip-link.css b/site/src/styles/components/skip-link.css
index b95cb1278..7e0c6c239 100644
--- a/site/src/styles/components/skip-link.css
+++ b/site/src/styles/components/skip-link.css
@@ -1,14 +1,12 @@
-/* skip-link — reference CSS. Off-screen on the block axis until focused;
-   the site's own skip link is this component, so the values here match
-   site.css exactly. The matrix wraps every cell in .skip-link-demo, which
-   becomes the containing block so the demo stays inside its cell. */
+/* skip-link — reference CSS. Off-screen on the block axis until focused.
+   The site's own skip link is this component. */
 
 .skip-link {
   position: absolute;
   inset-inline-start: var(--space-8);
   top: calc(-1 * var(--space-48));
   z-index: var(--z-skip-link);
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: var(--space-4) var(--space-8);
   box-sizing: border-box;
   background: var(--color-surface-raised);
@@ -31,13 +29,6 @@
   outline: 0;
 }
 
-/* the matrix cell: a positioned, clipped box the link can appear inside */
-.skip-link-demo {
-  position: relative;
-  min-height: calc(var(--density-control-height, 32px) + var(--space-16));
-  overflow: hidden;
-}
-
 @media (forced-colors: active) {
   .skip-link:focus-visible,
   [data-state-focus-visible] .skip-link {
diff --git a/site/src/styles/components/table.css b/site/src/styles/components/table.css
index 3db9830eb..83f35d3a2 100644
--- a/site/src/styles/components/table.css
+++ b/site/src/styles/components/table.css
@@ -39,7 +39,7 @@
   position: static;
   height: var(--density-comfortable-row-height, 36px);
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: var(--color-surface-default);
   border: 0;
   border-bottom: var(--border-width-default) solid var(--color-border-strong);
@@ -61,7 +61,7 @@
   align-items: center;
   gap: var(--space-4);
   width: 100%;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   padding: 0;
   background: transparent;
   border: 0;
@@ -93,7 +93,7 @@
 
 .table .table-cell {
   min-width: 0;
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: inherit;
@@ -133,6 +133,24 @@
   border-bottom-width: var(--border-width-emphasis);
 }
 
+/* responsive: below 600px the host scrolls the table and the first column
+   stays in view; its cells carry the row's fill so nothing shows through */
+@media (max-width: 599.98px) {
+  .table :is(.table-header, .table-cell):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: var(--z-raised);
+  }
+
+  .table .table-cell:first-child {
+    background: var(--color-surface-default);
+  }
+
+  .table .table-row:is(:hover, [aria-selected="true"]) > .table-cell:first-child {
+    background: inherit;
+  }
+}
+
 /* hover: the row fill */
 .table-body .table-row:hover,
 [data-state-hover] .table-row-demo-target {
@@ -161,11 +179,11 @@
   background: var(--color-interaction-selection-bg);
 }
 
-/* selected + focus-visible: the ring recolours on the fill */
+/* selected + focus-visible: the ordinary ring stays on the fill */
 .table-row[aria-selected="true"]:focus-visible,
 .table-row[aria-selected="true"]:focus-within,
 [data-state-selected][data-state-focus-visible] .table-row-demo-target {
-  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
+  outline: var(--focus-ring);
   outline-offset: var(--focus-offset);
 }
 
diff --git a/site/src/styles/components/tabs.css b/site/src/styles/components/tabs.css
index ec06e82e4..311ac95fe 100644
--- a/site/src/styles/components/tabs.css
+++ b/site/src/styles/components/tabs.css
@@ -10,7 +10,7 @@
 
 .tabs-list {
   display: flex;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
@@ -21,8 +21,8 @@
 
 .tabs-tab {
   flex: 0 0 auto;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   margin-bottom: calc(-1 * var(--border-width-default)); /* the bar sits on the rule */
   background: transparent;
   border: 0;
diff --git a/site/src/styles/components/text-field.css b/site/src/styles/components/text-field.css
index 009f123d5..d34ced280 100644
--- a/site/src/styles/components/text-field.css
+++ b/site/src/styles/components/text-field.css
@@ -1,3 +1,4 @@
+@import "../partials/field.css";
 /* text-field — reference CSS. Every real pseudo-class is paired with the
    forced-state attribute the state matrix emits ([data-state-<part>]), so a
    state renders statically without scripts. Token variables only. */
@@ -11,12 +12,6 @@
   color: var(--color-text-default);
 }
 
-.text-field-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .text-field-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -26,7 +21,7 @@
   display: flex;
   min-width: 0; /* a grid item would otherwise refuse to shrink below the input's intrinsic width */
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -35,7 +30,7 @@
 .text-field-input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -112,21 +107,6 @@
   color: var(--color-text-muted);
 }
 
-.text-field-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.text-field-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 /* hover */
 .text-field-root:hover,
 [data-state-hover] .text-field-root {
diff --git a/site/src/styles/components/textarea.css b/site/src/styles/components/textarea.css
index 13ab13d1a..241a61d66 100644
--- a/site/src/styles/components/textarea.css
+++ b/site/src/styles/components/textarea.css
@@ -1,3 +1,4 @@
+@import "../partials/field.css";
 /* textarea — reference CSS. The text field's box around a native
    <textarea>; vertical resize only. Every real pseudo-class is paired with
    the forced-state attribute the state matrix emits. Token variables only. */
@@ -11,12 +12,6 @@
   color: var(--color-text-default);
 }
 
-.textarea-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .textarea-required {
   display: none;
   color: var(--color-status-danger-text);
@@ -34,8 +29,8 @@
   display: block;
   width: 100%;
   min-width: 0;
-  min-height: calc(var(--density-control-height, 32px) * 2);
-  padding: var(--space-4) var(--density-control-padding-x, 12px);
+  min-height: calc(var(--density-control-height, 24px) * 2);
+  padding: var(--space-4) var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -66,21 +61,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-.textarea-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.textarea-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 /* hover */
 .textarea-root:hover,
 [data-state-hover] .textarea-root {
diff --git a/site/src/styles/components/time-picker.css b/site/src/styles/components/time-picker.css
index 0d24b5afb..709a686c9 100644
--- a/site/src/styles/components/time-picker.css
+++ b/site/src/styles/components/time-picker.css
@@ -1,4 +1,5 @@
 @import "../themed-controls.css";
+@import "../partials/field.css";
 /* time-picker — reference CSS. The text-field box around a native time
    input; the clock popup is the host's and only receives color-scheme. Every
    real pseudo-class is paired with the forced-state attribute the state
@@ -14,16 +15,10 @@
   color: var(--color-text-default);
 }
 
-.time-picker-label {
-  color: var(--color-text-bright);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 .time-picker-root {
   display: inline-flex;
   align-items: stretch;
-  min-height: var(--density-control-height, 32px);
+  min-height: var(--density-control-height, 24px);
   background: var(--color-surface-input);
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
@@ -31,7 +26,7 @@
 
 .time-picker-input {
   min-width: 0;
-  padding: 0 var(--density-control-padding-x, 12px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   color: var(--color-text-default);
@@ -51,21 +46,6 @@
   cursor: pointer;
 }
 
-.time-picker-help {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
-.time-picker-message {
-  display: none;
-  margin: 0;
-  color: var(--color-status-danger-text);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-}
-
 /* hover */
 .time-picker-root:hover,
 [data-state-hover] .time-picker-root {
@@ -103,7 +83,7 @@
   clip: rect(0 0 0 0);
 }
 
-/* invalid + focus-visible (not a declared cell; the rule keeps the pair honest) */
+/* invalid + focus-visible: the danger border and the inset ring */
 .time-picker-root:has(.time-picker-input[aria-invalid="true"]:focus-visible),
 [data-state-invalid][data-state-focus-visible] .time-picker-root {
   outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
diff --git a/site/src/styles/components/timeline.css b/site/src/styles/components/timeline.css
index bcd0fe5d6..220981345 100644
--- a/site/src/styles/components/timeline.css
+++ b/site/src/styles/components/timeline.css
@@ -1,3 +1,3 @@
 .timeline {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.timeline :focus-visible,[data-state-focus-visible] .timeline {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}
+.timeline :focus-visible,[data-state-focus-visible] .timeline {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
 .timeline {list-style:none;margin:0}.timeline-item {display:grid;grid-template-columns:6rem 1fr;gap:var(--space-12);padding:var(--space-12);border-inline-start:var(--border-width-default) solid var(--color-border-divider)}.timeline-item[aria-current],[data-state-current] .timeline-item:last-child {border-inline-start:var(--border-width-emphasis) solid var(--color-border-active)}.timeline p {margin:var(--space-4) 0 0}.timeline time {color:var(--color-text-muted)}
diff --git a/site/src/styles/components/toast.css b/site/src/styles/components/toast.css
index 5397b5c26..71fa77fc3 100644
--- a/site/src/styles/components/toast.css
+++ b/site/src/styles/components/toast.css
@@ -129,7 +129,7 @@
 
 .toast-action:hover,
 [data-state-hover] .toast-action {
-  background: var(--color-interaction-hover-bg-strong);
+  background: var(--color-interaction-hover-bg);
   color: var(--color-text-link-hover);
   text-decoration-thickness: 2px;
 }
diff --git a/site/src/styles/components/toolbar.css b/site/src/styles/components/toolbar.css
index b1ddc9ab9..8f62df37f 100644
--- a/site/src/styles/components/toolbar.css
+++ b/site/src/styles/components/toolbar.css
@@ -5,9 +5,9 @@
 .toolbar {
   display: flex;
   align-items: center;
-  gap: var(--density-gap, 4px);
+  gap: var(--density-gap, 2px);
   min-width: 0;
-  min-height: var(--density-row-height, 36px);
+  min-height: var(--density-row-height, 28px);
   padding: var(--space-2) var(--space-4);
   overflow: hidden;
   background: var(--color-surface-chrome);
@@ -20,9 +20,9 @@
   align-items: center;
   gap: var(--space-4);
   flex: 0 0 auto;
-  min-width: var(--density-control-height, 32px);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-width: var(--density-control-height, 24px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: var(--border-width-default) solid transparent;
   border-radius: var(--radius-none);
diff --git a/site/src/styles/components/tooltip.css b/site/src/styles/components/tooltip.css
index f469f3d0d..b50445cd4 100644
--- a/site/src/styles/components/tooltip.css
+++ b/site/src/styles/components/tooltip.css
@@ -15,8 +15,8 @@
 .tooltip-trigger {
   display: inline-flex;
   align-items: center;
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: var(--border-width-default) solid var(--color-border-control);
   border-radius: var(--radius-none);
diff --git a/site/src/styles/components/tree.css b/site/src/styles/components/tree.css
index 9afa94233..07b75d602 100644
--- a/site/src/styles/components/tree.css
+++ b/site/src/styles/components/tree.css
@@ -1,5 +1,12 @@
 .tree {box-sizing:border-box;display:grid;gap:var(--space-12);min-width:0;padding:var(--space-12);background:var(--color-surface-default);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none);font:inherit}
-.tree-control {font:inherit;min-height:var(--density-control-height);padding:var(--space-8);background:var(--color-surface-input);color:var(--color-text-default);border:var(--border-width-default) solid var(--color-border-control);border-radius:var(--radius-none)}
-.tree,.tree [role=group] {list-style:none;padding:0;margin:0}.tree [role=group] {padding-inline-start:var(--space-16)}.tree [data-tree-label] {display:block;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent}.tree [aria-expanded]>[data-tree-label]::before {content:'▸ '}.tree [aria-expanded=true]>[data-tree-label]::before,[data-state-expanded] .tree>li:first-child>[data-tree-label]::before {content:'▾ '}.tree [aria-selected=true]>[data-tree-label],[data-state-selected] .tree>li:first-child>[data-tree-label] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}.tree [role=treeitem]:focus-visible>[data-tree-label],[data-state-focus-visible] .tree>li:first-child>[data-tree-label] {outline:var(--border-width-default) dashed var(--color-interaction-focus-ring);outline-offset:var(--space-2)}.tree [aria-expanded=false]>[role=group],[data-state-collapsed] .tree [role=group] {display:none}.tree [aria-disabled=true]>[data-tree-label],[data-state-disabled] .tree>li:first-child>[data-tree-label] {color:var(--color-text-disabled)}
+.tree,.tree [role=group] {list-style:none;padding:0;margin:0}
+.tree [role=group] {padding-inline-start:var(--space-16)}
+.tree [data-tree-label] {display:block;padding:var(--space-8);border-inline-start:var(--border-width-emphasis) solid transparent}
+.tree [aria-expanded]>[data-tree-label]::before {content:'▸ '}
+.tree [aria-expanded=true]>[data-tree-label]::before,[data-state-expanded] .tree>li:first-child>[data-tree-label]::before {content:'▾ '}
+.tree [aria-selected=true]>[data-tree-label],[data-state-selected] .tree>li:first-child>[data-tree-label] {background:var(--color-interaction-selection-bg);color:var(--color-interaction-selection-text);border-inline-start-color:var(--color-border-selected-indicator)}
+.tree [role=treeitem]:focus-visible>[data-tree-label],[data-state-focus-visible] .tree>li:first-child>[data-tree-label] {outline:var(--focus-ring);outline-offset:var(--focus-offset)}
+.tree [aria-expanded=false]>[role=group],[data-state-collapsed] .tree [role=group] {display:none}
+.tree [aria-disabled=true]>[data-tree-label],[data-state-disabled] .tree>li:first-child>[data-tree-label] {color:var(--color-text-disabled)}
 
 .tree [aria-selected=true]:focus-visible>[data-tree-label],[data-state-selected][data-state-focus-visible] .tree>li:first-child>[data-tree-label] {outline-color:var(--color-interaction-focus-ring)}
diff --git a/site/src/styles/components/wizard.css b/site/src/styles/components/wizard.css
index 2f23303ed..c90f53690 100644
--- a/site/src/styles/components/wizard.css
+++ b/site/src/styles/components/wizard.css
@@ -30,8 +30,8 @@
   align-items: center;
   gap: var(--space-8);
   width: 100%;
-  min-height: var(--density-row-height, 36px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-row-height, 28px);
+  padding: 0 var(--density-control-padding-x, 8px);
   background: transparent;
   border: 0;
   border-bottom: var(--border-width-emphasis) solid transparent;
@@ -99,8 +99,8 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  min-height: var(--density-control-height, 32px);
-  padding: 0 var(--density-control-padding-x, 12px);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
   border: var(--border-width-default) solid;
   border-radius: var(--radius-none);
   font: inherit;
diff --git a/site/src/styles/form-tools.css b/site/src/styles/form-tools.css
index 9aef18407..0faa345da 100644
--- a/site/src/styles/form-tools.css
+++ b/site/src/styles/form-tools.css
@@ -11,6 +11,11 @@
 .form-tool[hidden], .form-tool [hidden] { display: none !important; }
 .form-tool fieldset { min-inline-size: 0; }
 .form-tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block: var(--space-16); }
+/* Inside the admin-form grid the gap spaces every part. An empty status line
+   leaves the grid flow, so it adds no gaps, but stays rendered as a live region. */
+.admin-form.form-tool form { display: grid; gap: var(--space-16); }
+.admin-form.form-tool .form-tool-actions { margin-block: 0; }
+.admin-form.form-tool > [data-status]:empty { position: absolute; }
 .form-tool-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); border: 0; padding: 0; margin: 0; }
 .form-field-help { color: var(--color-text-muted); margin: 0; font-size: var(--font-size-ui-sm); }
 .form-tool-summary { margin-block: var(--space-4); }
diff --git a/site/src/styles/partials/button.css b/site/src/styles/partials/button.css
new file mode 100644
index 000000000..787a60c2f
--- /dev/null
+++ b/site/src/styles/partials/button.css
@@ -0,0 +1,150 @@
+/* The canonical button (button.md): one box, the tones as private colour
+   slots, and the real states. button.css and every component action that is
+   a button under its own class import this file, so each tone has one look
+   wherever it appears. Forced states stay in each component's own file, where
+   the state matrix and the spec validation read them; they rewrite the same
+   slots. The template controls (button-group, command palette, compact
+   dashboard, editor search, error state, file browser, multiselect, popover,
+   repeater) are the secondary button when they are buttons; as inputs they
+   keep their component's input look. Token variables only. */
+
+.button,
+.dialog-button,
+.empty-state-action,
+.file-input-button,
+button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  min-height: var(--density-control-height, 24px);
+  padding: 0 var(--density-control-padding-x, 8px);
+  margin: 0;
+  background: var(--_bg);
+  color: var(--_fg);
+  border: var(--border-width-default) solid var(--_border);
+  border-radius: var(--radius-none);
+  font: inherit;
+  font-size: var(--font-size-ui-md);
+  line-height: var(--font-line-height-ui-md);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: 0;
+}
+
+/* primary: the only filled tone at rest */
+.button,
+.dialog-button.dialog-button-primary {
+  --_bg: var(--color-action-primary-bg);
+  --_fg: var(--color-action-primary-text);
+  --_border: var(--color-action-primary-border);
+  --_bg-hover: var(--color-action-primary-hover-bg);
+  --_fg-hover: var(--color-action-primary-text);
+  --_bg-active: var(--color-action-primary-pressed-bg);
+  --_border-active: var(--color-action-primary-border);
+  --_ring: var(--color-interaction-focus-ring-container);
+}
+
+.button-secondary,
+.dialog-button,
+.empty-state-action,
+.file-input-button,
+button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+  --_bg: var(--color-action-secondary-bg);
+  --_fg: var(--color-action-secondary-text);
+  --_border: var(--color-action-secondary-border);
+  --_bg-hover: var(--color-action-secondary-hover-bg);
+  --_fg-hover: var(--color-action-secondary-text);
+  --_bg-active: var(--color-action-secondary-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+.button-tertiary {
+  --_bg: transparent;
+  --_fg: var(--color-action-tertiary-text);
+  --_border: transparent;
+  --_bg-hover: var(--color-action-tertiary-hover-bg);
+  --_fg-hover: var(--color-action-tertiary-text);
+  --_bg-active: var(--color-interaction-pressed-bg);
+  --_border-active: var(--color-border-active);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+.button-destructive {
+  --_bg: transparent;
+  --_fg: var(--color-action-destructive-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-interaction-focus-ring);
+}
+
+/* the filled destructive tone is reserved for confirm dialogs */
+.button-destructive-filled,
+.dialog-button.dialog-button-destructive {
+  --_bg: var(--color-action-destructive-filled-bg);
+  --_fg: var(--color-action-destructive-filled-text);
+  --_border: var(--color-action-destructive-border);
+  --_bg-hover: var(--color-action-destructive-hover-bg);
+  --_fg-hover: var(--color-action-destructive-hover-text);
+  --_bg-active: var(--color-action-destructive-pressed-bg);
+  --_border-active: var(--color-action-destructive-border);
+  --_ring: var(--color-action-destructive-filled-text);
+}
+
+/* hover: fills and borders only, on hover-capable pointers */
+@media (hover: hover) {
+  :is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):hover {
+    --_bg: var(--_bg-hover);
+    --_fg: var(--_fg-hover);
+  }
+
+  .button-destructive:hover {
+    --_ring: var(--color-action-destructive-hover-text);
+  }
+}
+
+/* active: a darker fill and the active border; nothing moves */
+:is(.button, .dialog-button, .empty-state-action, .file-input-button, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):active {
+  --_bg: var(--_bg-active);
+  --_fg: var(--_fg-hover);
+  --_border: var(--_border-active);
+}
+
+/* focus-visible: the dashed ring in the on-fill colour of whatever fill is showing */
+:is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+  outline: var(--border-width-default) dashed var(--_ring);
+  outline-offset: var(--focus-offset);
+}
+
+/* disabled: the same three roles for every tone; no hover, no opacity */
+:is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):disabled {
+  --_bg: var(--color-interaction-disabled-bg);
+  --_fg: var(--color-text-disabled);
+  --_border: var(--color-border-disabled);
+  --_bg-hover: var(--color-interaction-disabled-bg);
+  --_fg-hover: var(--color-text-disabled);
+  --_bg-active: var(--color-interaction-disabled-bg);
+  --_border-active: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+
+/* .button declares its own transition in button.css, where the workbench's
+   motion inspector reads it. */
+@media (prefers-reduced-motion: no-preference) {
+  .dialog-button,
+  .empty-state-action,
+  .file-input-button,
+  button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control) {
+    transition: background-color var(--motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  :is(.button, .dialog-button, .empty-state-action, button:is(.button-group-control, .command-palette-control, .compact-dashboard-control, .editor-search-control, .error-state-control, .file-browser-control, .multiselect-control, .popover-control, .repeater-control)):focus-visible {
+    outline-color: Highlight;
+  }
+}
diff --git a/site/src/styles/partials/field.css b/site/src/styles/partials/field.css
new file mode 100644
index 000000000..21f327336
--- /dev/null
+++ b/site/src/styles/partials/field.css
@@ -0,0 +1,65 @@
+/* The parts every field shares (text-field.md and its siblings): the label,
+   the help line, the error message that stays hidden until the field is
+   invalid, and the input box of the composite fields. Each field component
+   imports this file; its states stay in its own stylesheet. Token variables
+   only. */
+
+.combobox-label,
+.dialog-field-label,
+.field-label,
+.fieldset-label,
+.file-input-label,
+.number-field-label,
+.search-field-label,
+.select-label,
+.text-field-label,
+.textarea-label,
+.time-picker-label {
+  color: var(--color-text-bright);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.combobox-help,
+.date-picker-help,
+.dialog-field-help,
+.fieldset-help,
+.file-input-help,
+.number-field-help,
+.search-field-help,
+.select-help,
+.text-field-help,
+.textarea-help,
+.time-picker-help {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.combobox-message,
+.date-picker-message,
+.file-input-message,
+.number-field-message,
+.radio-group-message,
+.select-message,
+.text-field-message,
+.textarea-message,
+.time-picker-message {
+  display: none;
+  margin: 0;
+  color: var(--color-status-danger-text);
+  font-size: var(--font-size-ui-sm);
+  line-height: var(--font-line-height-ui-sm);
+}
+
+.combobox-root,
+.date-picker-root,
+.number-field-root {
+  display: flex;
+  align-items: stretch;
+  min-height: var(--density-control-height, 24px);
+  background: var(--color-surface-input);
+  border: var(--border-width-default) solid var(--color-border-control);
+  border-radius: var(--radius-none);
+}
diff --git a/site/src/styles/portal.css b/site/src/styles/portal.css
deleted file mode 100644
index 3b4d9c812..000000000
--- a/site/src/styles/portal.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.portal-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
-.portal-workspace { min-width: 0; }
-.portal-sidebar { background: var(--color-surface-chrome); border-inline-end: 1px solid var(--color-border-default); padding: 32px 20px; display: flex; flex-direction: column; gap: 24px; }
-.portal-wordmark { font-size: 24px; font-weight: var(--font-weight-bold); text-decoration: none; color: var(--color-text-bright); }
-.portal-wordmark span { font-size: 13px; color: var(--color-text-muted); }
-.portal-eyebrow { font-size: 11px; letter-spacing: .12em; color: var(--color-text-muted); margin: 0 0 12px; }
-.portal-sidebar nav { display: grid; gap: 4px; }
-.portal-sidebar nav a { display: flex; gap: 16px; padding: 10px 8px; text-decoration: none; color: var(--color-text-link); border-inline-start: 2px solid transparent; }
-.portal-sidebar nav a span { color: var(--color-text-muted); }
-.portal-sidebar nav a:hover { color: var(--color-text-link-hover); }
-.portal-sidebar nav a[aria-current="page"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-color: var(--color-interaction-focus-ring); }
-.portal-sidebar nav a[aria-current="page"] span { color: inherit; }
-.portal-sidebar nav a[aria-current="page"]:focus-visible { outline: var(--focus-ring-container); outline-offset: var(--focus-offset-container); }
-.portal-sidebar-foot { display: grid; gap: 14px; margin-top: auto; padding-top: 40px; }
-.portal-topline { padding: 18px 40px; border-bottom: 1px solid var(--color-border-default); display: flex; justify-content: space-between; gap: 16px; color: var(--color-text-muted); font-size: 12px; }
-.portal-main { max-width: 1420px; margin-inline: auto; padding: 48px 40px; }
-.portal-intro { max-width: 850px; margin-bottom: 40px; }
-.portal-intro h1 { font-size: clamp(28px, 4vw, 48px); line-height: 1.15; color: var(--color-text-heading); letter-spacing: -.035em; overflow-wrap: anywhere; }
-.portal-intro > p:last-child { color: var(--color-text-muted); font-size: 15px; line-height: 1.8; max-width: 72ch; margin-top: 20px; }
-.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
-.portal-card, .portal-panel { background: var(--color-surface-default); border: 1px solid var(--color-border-default); padding: 24px; min-width: 0; }
-.portal-card { display: block; color: var(--color-text-default); text-decoration: none; }
-a.portal-card:hover { border-color: var(--color-border-control); background: var(--color-interaction-hover-bg); }
-a.portal-card h2, a.portal-card h3 { color: var(--color-text-link); text-decoration: underline; text-decoration-color: var(--color-text-link-underline); text-underline-offset: var(--space-4); }
-a.portal-card:hover h2, a.portal-card:hover h3 { color: var(--color-text-link-hover); text-decoration-color: currentColor; }
-.portal-card h2, .portal-card h3 { font-size: 18px; margin-bottom: 12px; }
-.portal-card p { margin: 0; line-height: 1.7; }
-.portal-section { margin-block: 40px; }
-.portal-section > h2 { font-size: 22px; margin-bottom: 20px; }
-.portal-section > h3, .portal-prose h3 { color: var(--color-text-heading); font-size: 16px; font-weight: var(--font-weight-bold); }
-.portal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 20px; }
-.portal-actions a, .portal-actions button, .portal-copy { border: 1px solid var(--color-border-control); padding: 10px 14px; background: var(--color-surface-default); color: var(--color-text-default); text-decoration: none; font: inherit; cursor: pointer; }
-.portal-actions .portal-primary { background: var(--color-action-primary-bg); color: var(--color-action-primary-text); }
-.portal-actions a:not(.portal-primary) { color: var(--color-text-link); text-decoration: underline; }
-.portal-actions a:not(.portal-primary):hover { color: var(--color-text-link-hover); background: var(--color-interaction-hover-bg-strong); }
-.portal-metric { font-size: 32px; color: var(--color-text-bright); display: block; margin-block: 8px; }
-.portal-swatches { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 16px; }
-.portal-swatch { height: 72px; border: 1px solid var(--color-border-control); margin-bottom: 12px; }
-.portal-footer { padding: 32px 40px 80px; border-top: 1px solid var(--color-border-default); color: var(--color-text-muted); line-height: 1.8; }
-.portal-command-trigger { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 20; }
-.portal-command .command-palette-dialog:modal { width: min(520px, calc(100vw - 32px)); inset: 15vh auto auto 50%; transform: translateX(-50%); max-height: 70vh; }
-.portal-command [role="option"] { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: 12px; padding: 8px; }
-.portal-command [role="option"] .portal-command-label { color: inherit; overflow-wrap: anywhere; }
-.portal-command-value { display: block; }
-.portal-prose { max-width: 90ch; line-height: 1.8; }
-.portal-prose h2, .portal-prose h3 { margin-top: 32px; margin-bottom: 14px; }
-.portal-prose table, .portal-table { border-collapse: collapse; width: 100%; margin-block: 16px; }
-.portal-prose th, .portal-prose td, .portal-table th, .portal-table td { padding: 10px; border: 1px solid var(--color-border-default); text-align: start; vertical-align: top; }
-.portal-prose img { max-width: 100%; }
-.portal-code { white-space: pre; overflow: auto; max-height: 32rem; padding: 18px; border: 1px solid var(--color-border-default); background: var(--color-surface-code); color: var(--color-text-default); font-size: 12px; }
-.portal-example { overflow: auto; padding: 24px; border: 1px solid var(--color-border-default); background: var(--color-surface-default); min-width: 0; }
-.portal-note { border-inline-start: 2px solid var(--color-interaction-focus-ring); padding-inline-start: 16px; color: var(--color-text-muted); line-height: 1.8; }
-.portal-table-wrap { overflow: auto; }
-[data-agent-kit] label { display: grid; gap: var(--space-8); }
-[data-agent-kit] select { max-width: 100%; padding: var(--space-8); font: inherit; color: var(--color-text-default); background: var(--color-surface-input); border: var(--border-width-default) solid var(--color-border-control); }
-.portal-prose .table-scroll { overflow: auto; }
-.portal-prose thead th, .portal-table thead th { color: var(--color-text-bright); }
-.portal-prose tbody, .portal-table tbody { color: var(--color-text-default); }
-[hidden] { display: none !important; }
-.skip-link { position: absolute; top: -100px; left: 16px; z-index: var(--z-skip-link); padding: 12px; background: var(--color-surface-raised); }
-.skip-link:focus { top: 12px; }
-@media (max-width: 850px) { .portal-shell { grid-template-columns: minmax(0, 1fr); } .portal-sidebar { padding: 18px; gap: 12px; } .portal-sidebar nav { grid-template-columns: repeat(3, minmax(0,1fr)); } .portal-sidebar nav a { padding: 8px 2px; gap: 6px; font-size: 12px; } .portal-sidebar-foot { display: none; } .portal-topline { padding: 16px; } .portal-topline span:last-child { display: none; } .portal-main { padding: 28px 18px; } .portal-footer { padding: 24px 18px 90px; } }
-@media print { .portal-sidebar, .portal-command, .portal-copy { display: none; } .portal-shell { display: block; } .portal-main { padding: 0; } }
-
-.portal-command > .command-palette { display: contents; }
diff --git a/site/src/styles/print.css b/site/src/styles/print.css
index 7c2f198cc..168e611ac 100644
--- a/site/src/styles/print.css
+++ b/site/src/styles/print.css
@@ -9,7 +9,6 @@
 
   .controls,
   .skip-link,
-  .copy-button,
   .inspector {
     display: none !important;
   }
diff --git a/site/src/styles/recipe-foundation.css b/site/src/styles/recipe-foundation.css
index 439ce17b3..4d6d54d89 100644
--- a/site/src/styles/recipe-foundation.css
+++ b/site/src/styles/recipe-foundation.css
@@ -8,7 +8,9 @@
   line-height: var(--font-line-height-ui-md);
 }
 &, *, *::before, *::after { box-sizing: border-box; }
-button, input, select, textarea { font: inherit; }
+/* Bare controls only: a classed control sets its own font, and this rule
+   reaches the same specificity as a component class once it is scoped. */
+:where(button, input, select, textarea):where(:not([class])) { font: inherit; }
 ::selection {
   background: var(--color-interaction-text-selection-bg);
   color: var(--color-interaction-text-selection-text);
diff --git a/site/src/styles/releases.css b/site/src/styles/releases.css
index 379ca8d2d..9ad600756 100644
--- a/site/src/styles/releases.css
+++ b/site/src/styles/releases.css
@@ -1,12 +1,8 @@
-.release-picker { gap: var(--space-8); align-items: center; margin-block: var(--space-16); }
-html.js .release-picker { display: flex; flex-wrap: wrap; }
-.release-picker select, .release-component select { font: inherit; max-width: 100%; min-height: var(--density-comfortable-control-height); color: var(--color-text-default); background: var(--color-surface-input); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); }
-.release-picker :focus-visible, .release-component :focus-visible, .release-scroll:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
-.release-metadata { display: grid; grid-template-columns: minmax(0, 16ch) minmax(0, 1fr); gap: var(--space-8); }
-.release-metadata dd { margin: 0; overflow-wrap: anywhere; }
-.release-scroll, .release-frame-scroll { max-width: 100%; overflow-x: auto; }
+/* Release comparison layout: the change table and the fixed-size specimen
+   frames. Controls are canonical fields; focus is base.css's ring. */
 .release-scroll table { min-width: 70ch; }
 .release-scroll :is(td, th) { max-width: 48ch; overflow-wrap: anywhere; vertical-align: top; }
+.release-frame-scroll { max-width: 100%; overflow-x: auto; }
 .release-frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 44ch), 1fr)); gap: var(--space-16); }
 .release-frames figure { min-width: 0; margin: 0; }
 .release-frames iframe { display: block; width: 640px; min-width: 640px; height: 480px; border: 0; outline: var(--border-width-default) solid var(--color-border-default); outline-offset: calc(-1 * var(--border-width-default)); }
@@ -14,4 +10,3 @@ html.js .release-picker { display: flex; flex-wrap: wrap; }
 .release-component h3 { margin-block-end: var(--space-8); }
 .release-case-links { columns: 3 24ch; }
 .release-case-links li { break-inside: avoid; }
-.tool-main { overflow-wrap: anywhere; min-width: 0; }
diff --git a/site/src/styles/site.css b/site/src/styles/site.css
index 64b9fcb19..a02431221 100644
--- a/site/src/styles/site.css
+++ b/site/src/styles/site.css
@@ -1,70 +1,5 @@
-/* Page chrome: header, table of contents, sections, token tables, state
-   matrices, inspector, controls. Token variables only. */
-
-.skip-link {
-  position: absolute;
-  left: var(--space-8);
-  top: calc(-1 * var(--space-48));
-  z-index: var(--z-skip-link);
-  padding: var(--space-4) var(--space-8);
-  background: var(--color-surface-raised);
-  color: var(--color-text-bright);
-  border: var(--border-width-default) solid var(--color-border-overlay);
-}
-
-.skip-link:focus-visible {
-  top: var(--space-8);
-}
-
-.page {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 0;
-  min-height: 100vh;
-}
-
-.site-header {
-  border-bottom: var(--border-width-default) solid var(--color-border-strong);
-  border-top: var(--border-width-emphasis) solid var(--color-interaction-focus-ring);
-  background: var(--color-surface-chrome);
-  padding: var(--space-16);
-}
-
-.site-header .lede {
-  color: var(--color-text-prose);
-  font-size: var(--font-size-reading);
-  line-height: var(--font-line-height-reading);
-  max-width: 72ch;
-  margin: var(--space-8) 0 0;
-}
-
-.stamp {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-4) var(--space-12);
-  margin: var(--space-8) 0 0;
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-  color: var(--color-text-muted);
-}
-
-.stamp code {
-  color: var(--color-text-default);
-}
-
-.banner {
-  margin: var(--space-12) 0 0;
-  padding: var(--space-8) var(--space-12);
-  border: var(--border-width-default) solid var(--color-status-warning-border);
-  background: var(--color-status-warning-tint);
-  color: var(--color-status-warning-text);
-  max-width: 88ch;
-}
-
-.banner::before {
-  content: "! ";
-  font-weight: var(--font-weight-bold);
-}
+/* Reference content tables, specimens and token information. The shared
+   SiteLayout owns the chrome; actions use canonical component classes. */
 
 .controls {
   display: flex;
@@ -74,32 +9,6 @@
   margin-top: var(--space-12);
 }
 
-.controls label {
-  display: grid;
-  gap: var(--space-2);
-  font-size: var(--font-size-ui-sm);
-  color: var(--color-text-muted);
-}
-
-.controls input[type="search"],
-.controls select {
-  min-height: var(--density-control-height, 28px);
-  padding: 0 var(--space-8);
-  background: var(--color-surface-input);
-  color: var(--color-text-default);
-  border: var(--border-width-default) solid var(--color-border-control);
-}
-
-.controls input[type="search"]:hover,
-.controls select:hover {
-  background: var(--color-interaction-hover-bg);
-}
-
-.controls input[type="search"]:focus-visible,
-.controls select:focus-visible {
-  border-color: var(--color-border-active);
-}
-
 .controls fieldset {
   display: flex;
   flex-wrap: wrap;
@@ -122,61 +31,19 @@
   color: var(--color-text-default);
 }
 
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-4);
-  min-height: var(--density-control-height, 28px);
-  padding: 0 var(--space-12);
-  border: var(--border-width-default) solid var(--color-border-control);
-  background: var(--color-action-secondary-bg);
-  color: var(--color-action-secondary-text);
-  cursor: pointer;
-}
-
-.btn:hover {
-  background: var(--color-action-secondary-hover-bg);
-}
-
-.btn:active {
-  background: var(--color-action-secondary-pressed-bg);
-  border-color: var(--color-border-active);
-}
-
-.btn-quiet {
-  border-color: transparent;
-  color: var(--color-action-tertiary-text);
-}
-
-.btn-quiet:hover {
-  background: var(--color-action-tertiary-hover-bg);
-}
-
 .live-count {
   font-size: var(--font-size-ui-sm);
   color: var(--color-text-muted);
 }
 
-.js-only {
-  display: none;
-}
-
-html.js .js-only {
-  display: revert;
-}
-
-html.js .controls.js-only {
-  display: flex;
-}
-
 .layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 }
 
-@media (min-width: 900px) {
+@media screen and (min-width: 900px) {
   .layout {
-    grid-template-columns: 17rem minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
@@ -187,20 +54,8 @@ html.js .controls.js-only {
   line-height: var(--font-line-height-ui-sm);
 }
 
-@media (min-width: 900px) {
-  .toc {
-    position: sticky;
-    top: 0;
-    align-self: start;
-    max-height: 100vh;
-    overflow-y: auto;
-    border-bottom: 0;
-    border-right: var(--border-width-default) solid var(--color-border-divider);
-  }
-}
 
-.toc summary,
-.toc .toc-title {
+.toc summary {
   padding: var(--space-8) var(--space-12);
   color: var(--color-text-bright);
   font-weight: var(--font-weight-bold);
@@ -231,24 +86,6 @@ html.js .controls.js-only {
   margin: 0;
 }
 
-.toc a {
-  display: block;
-  padding: var(--space-2) var(--space-12);
-  color: var(--color-text-default);
-  text-decoration: none;
-  border-left: var(--border-width-emphasis) solid transparent;
-}
-
-.toc a:hover {
-  color: var(--color-text-link-hover);
-  background: var(--color-interaction-hover-bg-strong);
-}
-
-.toc a[aria-current="true"] {
-  border-left-color: var(--color-border-selected-indicator);
-  color: var(--color-text-bright);
-}
-
 .toc .toc-family {
   padding: var(--space-8) var(--space-12) var(--space-2);
   color: var(--color-text-muted);
@@ -261,12 +98,6 @@ html.js .controls.js-only {
   padding-left: var(--space-24);
 }
 
-main {
-  padding: var(--space-16);
-  max-width: var(--layout-app-max);
-  min-width: 0;
-}
-
 .doc,
 .family,
 .component,
@@ -340,11 +171,6 @@ main {
   content: "! ";
 }
 
-.tag-heritage {
-  border-color: var(--color-border-control);
-  color: var(--color-text-muted);
-}
-
 .tag-deprecated {
   border-color: var(--color-status-danger-border);
   color: var(--color-status-danger-text);
@@ -418,19 +244,10 @@ main {
   overflow-wrap: anywhere;
 }
 
-.profile-token-table {
-  table-layout: fixed;
-  min-width: 68rem;
-}
 
-.profile-token-table .token-path-column { width: 28%; }
-.profile-token-table .token-profile-column { width: 16%; }
-.profile-token-table .token-use-column { width: 24%; }
-.profile-token-table th { white-space: nowrap; }
-.profile-token-table .eligibility { margin-top: var(--space-4); }
 .token-table td:first-child { white-space: normal; }
-.token-table:not(.profile-token-table) { min-width: 60rem; }
-.token-table:not(.profile-token-table) td:last-child { min-width: 24ch; }
+.compact-token-table { min-width: 48rem; }
+.compact-token-table td:nth-child(2) { min-width: 24ch; }
 
 .contrast-table { min-width: 88rem; }
 .contrast-table td:first-child,
@@ -454,28 +271,6 @@ main {
   align-items: center;
 }
 
-.copy-button {
-  flex: none;
-  white-space: nowrap;
-  padding: 0 var(--space-4);
-  min-height: var(--density-compact-control-height);
-  border: var(--border-width-default) solid var(--color-border-divider);
-  background: transparent;
-  color: var(--color-text-muted);
-  cursor: pointer;
-  font-size: var(--font-size-caption);
-}
-
-.copy-button:hover {
-  color: var(--color-text-bright);
-  background: var(--color-interaction-hover-bg);
-}
-
-.copy-button[data-copied="true"] {
-  color: var(--color-status-success-text);
-  border-color: var(--color-status-success-border);
-}
-
 .matrix {
   border-collapse: separate;
   border-spacing: 0;
@@ -554,14 +349,6 @@ main {
   overflow-wrap: anywhere;
 }
 
-.site-footer {
-  border-top: var(--border-width-default) solid var(--color-border-divider);
-  padding: var(--space-16);
-  font-size: var(--font-size-ui-sm);
-  line-height: var(--font-line-height-ui-sm);
-  color: var(--color-text-muted);
-}
-
 .export-links {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
@@ -613,3 +400,22 @@ main {
 .eligibility { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--font-size-caption); line-height: var(--font-line-height-caption); }
 .eligibility > * { white-space: nowrap; }
 .inspector { max-height: 60vh; overflow: auto; }
+
+/* Hub contents occupy normal flow; families and components form a compact
+   static index. Details remain on their own pages. */
+.toc > details > ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
+.toc ol ol { padding-inline-start: var(--space-12); }
+.reference-content { min-width: 0; padding-block-start: var(--space-32); }
+.reference-content .component { margin-bottom: var(--space-12); padding: var(--space-12); }
+.reference-content .component p { margin-block: var(--space-8); }
+.component-links, .primitive-index { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); }
+.component-links { font-size: var(--font-size-ui-sm); line-height: var(--font-line-height-ui-sm); }
+.component-inventory { color: var(--color-text-muted); font-size: var(--font-size-ui-sm); }
+.decision-index { columns: 2 28ch; }
+.banner { padding: var(--space-8); border-inline-start: var(--border-width-emphasis) solid var(--color-border-strong); }
+[aria-current="true"].toc-link { border-inline-start-color: var(--color-border-selected-indicator); }
+@media print {
+  .controls, [data-copy], [data-copy-brief] { display: none !important; }
+  .toc { position: static; }
+  a[href^="http"]::after { content: " (" attr(href) ")"; color: var(--color-text-muted); font-size: var(--font-size-caption); }
+}
diff --git a/site/src/styles/themed-controls.css b/site/src/styles/themed-controls.css
index 3dc6d57f5..c0c0df41a 100644
--- a/site/src/styles/themed-controls.css
+++ b/site/src/styles/themed-controls.css
@@ -1,19 +1,25 @@
-/* D-025: the runtime owns choice rendering; the original select owns forms. */
+/* D-025: the runtime owns choice rendering; the original select owns forms.
+   The enhancement themes bare controls only. A control with a class belongs
+   to its component, and the generator prefixes every rule here with
+   [data-j3w1-controls], which raises a :where() rule to the specificity of
+   one class: matching classed controls let controls.css, loaded last, repaint
+   every .button on the portal as an input box. :where(:not([class])) keeps
+   each rule at its old specificity and away from component classes. */
 :where([data-j3w1-controls] *)[hidden] { display:none!important; }
-:where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea) { min-height:var(--density-control-height,32px); padding:var(--space-8) var(--density-control-padding-x,12px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+:where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea):where(:not([class])) { min-height:var(--density-control-height,24px); padding:var(--space-8) var(--density-control-padding-x,8px); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 /* Single-line controls take their height from density.<mode>.control-height, so
    the block padding has to yield to it. Fixed block padding plus the line box
    already exceeded both control heights, which made compact render identically
    to comfortable and left density.<mode>.control-padding-x unread. A textarea
    keeps its padding: it is multi-line and has no single control height to sit in. */
-:where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { padding-block:0; }
-:where([data-j3w1-controls] *):where(button,input,textarea):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
-:where([data-j3w1-controls] *):where(button,input,textarea):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
-:where([data-j3w1-controls] *):where(input,textarea)::placeholder { color:var(--color-text-placeholder); opacity:1; }
-:where([data-j3w1-controls] *):where(fieldset) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
+:where([data-j3w1-controls] *):where(button,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):where(:not([class])) { padding-block:0; }
+:where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
+:where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])):disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); border-color:var(--color-border-disabled); opacity:1; }
+:where([data-j3w1-controls] *):where(input,textarea):where(:not([class]))::placeholder { color:var(--color-text-placeholder); opacity:1; }
+:where([data-j3w1-controls] *):where(fieldset):where(:not([class])) { min-width:0; padding:var(--space-16); border:var(--border-width-default) solid var(--color-border-control); }
 .j3w1-temporal { display:block; min-width:0; max-width:100%; }
 .j3w1-temporal-row { display:flex; align-items:stretch; min-width:0; border:var(--border-width-default) solid var(--color-border-control); background:var(--color-surface-input); }
-.j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,12px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
+.j3w1-temporal-input { min-width:0; width:100%; padding:0 var(--density-control-padding-x,8px); border:0; border-radius:var(--radius-none); background:var(--color-surface-input); color:var(--color-text-default); font:inherit; }
 .j3w1-temporal-action { flex:none; min-width:var(--space-32); border:0; border-inline-start:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-surface-raised); color:var(--color-text-bright); font:inherit; cursor:pointer; }
 .j3w1-temporal-hint { display:block; margin-block-start:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-ui-sm); }
 .j3w1-temporal :focus-visible,.j3w1-calendar :focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@@ -37,7 +43,7 @@
 .j3w1-calendar [aria-pressed="true"]:focus-visible { outline:var(--focus-ring-container); }
 .j3w1-calendar button:disabled { color:var(--color-text-disabled); background:var(--color-interaction-disabled-bg); cursor:not-allowed; }
 .j3w1-choice { display: block; min-width: min(12rem, calc(100vw - var(--space-32))); max-width: 100%; color: var(--color-text-default); font: inherit; }
-.j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 32px); padding: 0 var(--density-control-padding-x, 12px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
+.j3w1-choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: var(--density-control-height, 24px); padding: 0 var(--density-control-padding-x, 8px); border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); border-radius: var(--radius-none); font: inherit; text-align: start; cursor: pointer; }
 .j3w1-choice-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* The canonical select and combobox give the chevron a square icon slot; this
    one was a bare glyph, so its em box sat wherever the font put it and it read
@@ -51,7 +57,7 @@
 .j3w1-choice-list { display: block; box-sizing: border-box; min-width: 0; max-width: calc(100vw - var(--space-16)); max-height: 18rem; overflow: auto; margin: 0; padding: 0; background: var(--color-surface-raised); color: var(--color-text-default); border: var(--border-width-default) solid var(--color-border-overlay); border-radius: var(--radius-none); font: inherit; z-index: var(--z-popover); }
 .j3w1-choice-list[popover] { inset: auto; }
 .j3w1-choice-list[hidden] { display: none; }
-.j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 32px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
+.j3w1-choice-option { display: flex; align-items: center; gap: var(--space-8); min-height: var(--density-control-height, 24px); padding: 0 var(--space-8); border-inline-start: var(--border-width-emphasis) solid transparent; cursor: pointer; overflow-wrap: anywhere; }
 .j3w1-choice-check { flex: none; width: var(--icon-size-md); visibility: hidden; }
 .j3w1-choice-option[aria-selected="true"] { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); border-inline-start-color: var(--color-border-selected-indicator); }
 .j3w1-choice-option[aria-selected="true"] .j3w1-choice-check { visibility: visible; }
@@ -69,16 +75,16 @@
 .j3w1-choice [aria-invalid="true"] { border: var(--border-width-emphasis) solid var(--color-status-danger-border); }
 .select-root:has(.j3w1-choice) > .select-chevron { display: none; }
 :where([data-j3w1-controls] *)::selection { color: var(--color-interaction-text-selection-text); background: var(--color-interaction-text-selection-bg); }
-:where([data-j3w1-controls] *):where(button,input,textarea) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
-input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input),input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 16px); height: var(--density-icon, 16px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
-input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked,input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
-input:where([data-j3w1-controls] *)[type="checkbox"]:not(.checkbox-input):checked::after { content: '✓'; font-size: calc(var(--density-icon, 16px) * 0.75); line-height: 1; }
-input:where([data-j3w1-controls] *)[type="radio"]:not(.radio-input):not(.radio-group-input):checked::after { content: ''; width: calc(var(--density-icon, 16px) / 2); height: calc(var(--density-icon, 16px) / 2); background: var(--color-interaction-selection-text); }
-input:where([data-j3w1-controls] *)[type="file"]::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
-input:where([data-j3w1-controls] *)[type="number"] { appearance: textfield; }
-input:where([data-j3w1-controls] *)[type="number"]::-webkit-inner-spin-button,input:where([data-j3w1-controls] *)[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
-input:where([data-j3w1-controls] *)[type="range"] { appearance:none; background:var(--color-surface-input); }
-input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
-input:where([data-j3w1-controls] *)[type="range"]::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
-input:where([data-j3w1-controls] *)[type="range"]::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
-input:where([data-j3w1-controls] *)[type="range"]::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+:where([data-j3w1-controls] *):where(button,input,textarea):where(:not([class])) { accent-color: var(--color-interaction-selection-bg); font: inherit; border-radius: var(--radius-none); }
+input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]),input:where([data-j3w1-controls] *)[type="radio"]:not([class]) { appearance: none; display: inline-grid; place-content: center; width: var(--density-icon, 12px); height: var(--density-icon, 12px); padding: 0; vertical-align: middle; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); }
+input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked,input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked { background: var(--color-interaction-selection-bg); color: var(--color-interaction-selection-text); }
+input:where([data-j3w1-controls] *)[type="checkbox"]:not([class]):checked::after { content: '✓'; font-size: calc(var(--density-icon, 12px) * 0.75); line-height: 1; }
+input:where([data-j3w1-controls] *)[type="radio"]:not([class]):checked::after { content: ''; width: calc(var(--density-icon, 12px) / 2); height: calc(var(--density-icon, 12px) / 2); background: var(--color-interaction-selection-text); }
+input:where([data-j3w1-controls] *)[type="file"]:where(:not([class]))::file-selector-button { font: inherit; padding: var(--space-8) var(--space-12); margin-inline-end: var(--space-12); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); color: var(--color-text-default); background: var(--color-surface-raised); }
+input:where([data-j3w1-controls] *)[type="number"]:where(:not([class])) { appearance: textfield; }
+input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-inner-spin-button,input:where([data-j3w1-controls] *)[type="number"]:where(:not([class]))::-webkit-outer-spin-button { appearance: none; margin: 0; }
+input:where([data-j3w1-controls] *)[type="range"]:where(:not([class])) { appearance:none; background:var(--color-surface-input); }
+input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-runnable-track { height:var(--space-4); background:var(--color-border-control); }
+input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-track { height:var(--space-4); background:var(--color-border-control); }
+input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-webkit-slider-thumb { appearance:none; width:var(--icon-size-md); height:var(--icon-size-md); margin-top:calc((var(--space-4) - var(--icon-size-md)) / 2); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
+input:where([data-j3w1-controls] *)[type="range"]:where(:not([class]))::-moz-range-thumb { width:var(--icon-size-md); height:var(--icon-size-md); border:var(--border-width-default) solid var(--color-border-control); border-radius:var(--radius-none); background:var(--color-action-primary-bg); }
diff --git a/site/src/styles/tokens.generated.css b/site/src/styles/tokens.generated.css
index b5f05093b..ac1182e41 100644
--- a/site/src/styles/tokens.generated.css
+++ b/site/src/styles/tokens.generated.css
@@ -303,6 +303,8 @@
   --font-size-reading: 15px;
   --font-size-code: 13px;
   --font-size-terminal: 13px;
+  --font-size-display: 32px;
+  --font-size-title: 24px;
   --font-size-h1: 20px;
   --font-size-h2: 16px;
   --font-size-h3: 13px;
@@ -313,6 +315,8 @@
   --font-line-height-reading: 24px;
   --font-line-height-code: 19px;
   --font-line-height-terminal: 19px;
+  --font-line-height-display: 40px;
+  --font-line-height-title: 32px;
   --font-line-height-h1: 28px;
   --font-line-height-h2: 24px;
   --font-line-height-h3: 18px;
@@ -423,7 +427,7 @@
   --color-chart-series-4: #7e9ebb;
 }
 
-[data-density="compact"] {
+:root, [data-density="compact"] {
   --density-control-height: 24px;
   --density-row-height: 28px;
   --density-control-padding-x: 8px;
diff --git a/site/src/styles/tools.css b/site/src/styles/tools.css
deleted file mode 100644
index 46cc39fae..000000000
--- a/site/src/styles/tools.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.tool-main { width: 100%; margin-inline: auto; }
-.tool-header .stamp { overflow-wrap: anywhere; }
-[data-port-content] code { overflow-wrap: anywhere; }
-[data-port-content] [hidden] { display: none !important; }
-.site-header h1 { overflow-wrap: anywhere; }
-.tool-main .copy-target code { overflow-wrap: anywhere; min-width: 0; }
-html.js .usage-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-8); margin-block: var(--space-16); }
-.usage-filters label { display: grid; gap: var(--space-4); font-size: var(--font-size-ui-sm); }
-.usage-filters :is(input, select, button) { min-height: var(--density-compact-control-height); max-width: 24ch; border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); padding-inline: var(--space-4); }
-.usage-filters input[type="checkbox"] { min-height: var(--space-16); width: var(--space-16); padding: 0; margin: 0; accent-color: var(--color-interaction-focus-ring); }
-.usage-section { margin-block: var(--space-24); }
-.usage-section h2 { border-bottom: var(--border-width-default) solid var(--color-border-strong); }
-.usage-metadata { display: grid; grid-template-columns: minmax(8ch, 16ch) minmax(0, 1fr); gap: var(--space-4) var(--space-8); }
-.usage-metadata dd { margin: 0; }
-.usage-table td:first-child { min-width: 30ch; }
-.usage-table td:last-child { min-width: 24ch; }
-.usage-source { overflow-wrap: anywhere; }
-.usage-section [hidden] { display: none !important; }
-html.js .recipe-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
-.recipe-copy input { min-width: 0; max-width: 100%; font: inherit; color: var(--color-text-default); background: var(--color-surface-input); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); }
-.recipe-copy input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
-.recipe-copy [role="status"] { flex-basis: 100%; }
-html.js .kit-form { display: grid; gap: var(--space-8); }
-.kit-form fieldset { min-width: 0; margin: 0; border: var(--border-width-default) solid var(--color-border-default); padding: var(--space-12); }
-.kit-components { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28ch), 1fr)); gap: var(--space-4) var(--space-12); }
-.kit-components label { display: flex; align-items: baseline; gap: var(--space-4); }
-.kit-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--space-8); }
-.kit-form :is(input, select, textarea), [data-kit-output] { min-width: 0; max-width: 100%; font: inherit; color: var(--color-text-default); background: var(--color-surface-input); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); }
-.kit-form input[type="checkbox"] { accent-color: var(--color-action-primary-bg); }
-.kit-form :is(input, select, textarea):focus-visible, [data-kit-output]:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
-.kit-form textarea, [data-kit-output] { width: 100%; resize: vertical; }
-.kit-form [type="submit"] { justify-self: start; }
-[data-kit-result][hidden] { display: none; }
diff --git a/site/src/styles/verification.css b/site/src/styles/verification.css
index b6a5aec58..1984dbc85 100644
--- a/site/src/styles/verification.css
+++ b/site/src/styles/verification.css
@@ -9,7 +9,7 @@ td, th { padding: var(--space-8); text-align: start; vertical-align: top; border
 code { overflow-wrap: anywhere; }
 form { margin-block: var(--space-16); }
 label { display: inline-block; margin: var(--space-8); }
-select, button { border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-default); color: var(--color-text-default); font: inherit; min-height: var(--density-comfortable-control-height); border-radius: var(--radius-none); }
-:focus-visible { outline: var(--border-width-default) dashed var(--color-interaction-focus-ring); outline-offset: -2px; }
+select { border: var(--border-width-default) solid var(--color-border-control); background: var(--color-surface-input); color: var(--color-text-default); font: inherit; min-height: var(--density-compact-control-height); border-radius: var(--radius-none); }
+:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
 [hidden] { display: none; }
 @media print { #filters { display: none; } .scroll { overflow: visible; } }
diff --git a/site/src/styles/workbench.css b/site/src/styles/workbench.css
index fe77bdc09..f7fbc28d1 100644
--- a/site/src/styles/workbench.css
+++ b/site/src/styles/workbench.css
@@ -1,28 +1,16 @@
-/* Workbench chrome uses the existing compact document controls and tokens. */
+/* Workbench layout: specimens, viewports, overlays and motion. Its controls are canonical fields and buttons. */
 .workbench { min-width: 0; }
 .workbench > p, .workbench-live > p { margin-block: var(--space-8); overflow-wrap: anywhere; }
 .workbench h2 { margin-block: var(--space-16) var(--space-8); }
-html.js .workbench-controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-8); margin-block: var(--space-12); }
-.workbench-controls label { display: grid; gap: var(--space-4); min-width: 0; max-width: 100%; font-size: var(--font-size-ui-sm); }
-.workbench :is(input, select, textarea) { min-width: 0; max-width: 100%; font: inherit; color: var(--color-text-default); background: var(--color-surface-input); border: var(--border-width-default) solid var(--color-border-control); border-radius: var(--radius-none); }
-.workbench :is(input, select) { min-height: var(--density-compact-control-height); padding-inline: var(--space-4); }
-.workbench-controls select { max-width: 34ch; }
-.workbench :is(input, select, textarea):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
-.workbench textarea, [data-share-link] { display: block; width: 100%; margin-block: var(--space-4) var(--space-8); }
-.workbench textarea { resize: vertical; padding: var(--space-4); }
-.workbench-consent { display: flex; align-items: center; gap: var(--space-4); margin-block: var(--space-8); min-height: var(--density-compact-control-height); }
-.workbench input[type="checkbox"] { width: var(--space-16); min-height: var(--space-16); accent-color: var(--color-action-primary-bg); }
 .viewport-scroll { overflow-x: auto; max-width: 100%; border: var(--border-width-default) solid var(--color-border-default); }
 .viewport-scroll iframe { display: block; max-width: none; border: 0; height: 560px; background: var(--color-surface-canvas); }
 .workbench-live { min-width: 0; }
-.workbench [hidden] { display: none !important; }
 .viewport-grid > div { min-width: 0; }
 .viewport-grid.has-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
 @media (max-width: 640px) { .viewport-grid.has-comparison { grid-template-columns: minmax(0, 1fr); } }
 html.js .workbench-live { display: block; }
 html.js .workbench-fallback { display: none; }
 .workbench-embedded { display: block; width: 100%; height: 760px; border: var(--border-width-default) solid var(--color-border-default); margin-block: var(--space-8); }
-html.js .workbench .issue-draft { display: grid; gap: var(--space-4); }
 .workbench [aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; }
 .motion-specimens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
 .motion-specimens h3 { margin-bottom: var(--space-8); }
@@ -41,4 +29,4 @@ html.js .workbench .issue-draft { display: grid; gap: var(--space-4); }
 .part-overlay[hidden], [data-open-dialog][hidden] { display: none !important; }
 [data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { transition: none !important; animation: none !important; }
 @media (prefers-reduced-motion: reduce) { .preview-specimen *, .preview-specimen *::before, .preview-specimen *::after { transition: none !important; animation: none !important; } }
-@media print { .workbench-controls, .workbench-live, .workbench-embedded { display: none !important; } html.js .workbench-fallback { display: block; } }
+@media print { [data-workbench-controls], .workbench-live, .workbench-embedded { display: none !important; } html.js .workbench-fallback { display: block; } }
diff --git a/spec/accessibility.md b/spec/accessibility.md
index c4812d0c6..749b7b653 100644
--- a/spec/accessibility.md
+++ b/spec/accessibility.md
@@ -7,13 +7,12 @@ summary: Contrast targets, focus and keyboard contracts, reduced motion, forced
 
 ## What is claimed
 
-WCAG 2.2 criteria are used as measurable **design targets** for the roles this
-theme defines. A green contrast report and a clean automated scan of the site
-show that the specified colours and the reference markup meet those targets.
-They are not a conformance claim for any application that adopts the theme.
-Keyboard operation, focus management, labels, reflow and manual review stay
-the consumer's job. The theme's own limits are listed at the end of this
-document.
+WCAG 2.2 criteria are measurable **design targets** for the theme's roles. A
+green contrast report and a clean automated scan show that the specified
+colours and the reference markup meet them; they are not a conformance claim
+for any adopting application. Keyboard operation, focus management, labels,
+reflow and manual review stay the consumer's job. The theme's own limits are
+under Limitations.
 
 ## Contrast
 
@@ -22,51 +21,43 @@ document.
 - Large text (18.66px bold or 24px regular and above): at least 3:1.
 - Control boundaries, focus rings, meaningful icons and chart marks: at least
   3:1 (WCAG 1.4.11).
-- Disabled text is exempt under WCAG 1.4.3, but house policy still needs 3:1
-  (`text.disabled` `#8a5559`, 3.52:1 on the true-black canvas). It sits below
-  the ordinary-text floor by design.
+- Disabled text is exempt under WCAG 1.4.3; house policy still needs 3:1
+  (`text.disabled`), below the ordinary-text floor by design.
 - Never round a value into a pass. The report keeps the unrounded ratio and
   shows two decimals: `4.4996` reads 4.50 and fails.
 - Heritage values that fail (`#a3676b` as text, `#7d1310` anywhere as text)
-  are flagged `$deprecated` in the `heritage-ansi` profile. They are never
-  shown as ordinary passes.
+  are flagged `$deprecated` in the `heritage-ansi` profile, never shown as
+  ordinary passes.
 
-`exports/contrast.md` lists every declared pair: the global pairs in
-`spec/contrast.json` and every `stateTokens` and `contrast[]` entry of every
-component. Waived pairs carry their reason. A waiver is only valid for
-decorative graphics that are never the only boundary of a control.
+`exports/contrast.md` lists every declared pair (the global pairs in
+`spec/contrast.json` and every component's `stateTokens` and `contrast[]`
+entries) with its computed ratio. Waived pairs carry their reason; a waiver is
+valid only for decorative graphics that are never the only boundary of a
+control.
 
 ## Text hierarchy
 
-D-033 makes ordinary interface and reading text rose (`color.text.default` and
-`color.text.prose`). Bold changes weight and inherits the current semantic
-foreground, including inside headings, links, muted and selected text. Content
-titles and H1-H6 use `color.text.heading`; near-white is not a readability or
-boldness requirement. Selection and contrast-critical on-fill roles stay
-explicit and are checked against their actual backgrounds. Heading level is
-also conveyed through structure, size and weight, never colour alone.
+The colour roles are in `spec/foundations.md`, Typography semantics (D-033);
+near-white is not a readability or boldness requirement. Selection and
+contrast-critical on-fill roles are checked against their actual
+backgrounds. Heading level is conveyed through structure, size and weight,
+never colour alone.
 
 ## Focus
 
 Focus is never lost and never invisible. The ring is defined once, in
-`spec/foundations.md`, Interaction states, rule 2 (D-006, D-015). In short:
-controls and rows show `focus.ring` (1px dashed `#e53935`, offset −2px);
-focusable containers show `focus.ring-container` (2px solid `#ffa2a7`, offset
-−3px); primary and checked controls use `focus.ring-container` where declared;
-destructive fills use their on-fill text role. Colour mapping does not change
-ring geometry.
-
-- `:focus` without `:focus-visible` draws nothing. Pointer clicks stay quiet,
-  and keyboard focus stays visible.
-- A component that removes a host's default indicator must draw this one.
-- The site's state matrices render every declared combination, including
-  `selected+focus-visible` and `invalid+focus-visible`, because that is where
-  rings disappear in practice.
+`spec/foundations.md`, Interaction states, rule 2 (D-006, D-015).
+
+- `:focus` without `:focus-visible` draws nothing: pointer clicks stay quiet,
+  keyboard focus stays visible.
+- The state matrices render every declared combination, including
+  `selected+focus-visible` and `invalid+focus-visible`, where rings disappear
+  in practice.
 
 ## Keyboard
 
-Native controls keep native keyboard behaviour. Custom widgets follow the WAI
-ARIA Authoring Practices pattern cited in their frontmatter (`aria.apg`):
+Native controls keep native keyboard behaviour. Custom widgets follow the
+WAI-ARIA Authoring Practices pattern in their `aria.apg`:
 
 - roving tabindex in toolbars, tabs, trees and listboxes;
 - `aria-activedescendant` in comboboxes;
@@ -79,8 +70,8 @@ keyboard, and the no-JS build keeps every normative section readable.
 
 ## Motion
 
-Durations are at most 150ms and apply to opacity, transform and background
-only. Under `prefers-reduced-motion: reduce` every duration is 0.01ms:
+Motion follows `spec/foundations.md`, Interaction states, rule 7. Under
+`prefers-reduced-motion: reduce`:
 
 - toasts, dialogs and drawers appear in place;
 - indeterminate progress shows static stripes;
@@ -88,67 +79,70 @@ only. Under `prefers-reduced-motion: reduce` every duration is 0.01ms:
 - skeletons do not shimmer;
 - tab indicators do not slide.
 
-No behaviour waits on `transitionend`.
-
 ## Forced colours and high contrast
 
-Under `forced-colors: active`, rings use `Highlight` and selections use
-`Highlight` / `HighlightText`. Borders survive, because they are real borders,
-not box-shadows. Pattern fills keep charts and diffs readable.
+Under `forced-colors: active`, rings use `Highlight` and selections
+`Highlight` / `HighlightText`. Borders survive because they are real borders,
+not box-shadows; pattern fills keep charts and diffs readable.
 
 ## Reflow, zoom and text
 
 Components reflow at 320 CSS pixels without horizontal page scrolling, at 200%
 browser zoom and at 200% text-only zoom. Rings and borders stay 1px / 2px CSS.
 Targets are at least 24×24 CSS pixels, with 4px spacing in `compact` density.
-Long labels wrap, or truncate with a visible affordance. The site's stress
-fixtures (English, Spanish, Chinese, Arabic with `dir="rtl"`) test this.
+Long labels wrap, or truncate with a visible affordance; the stress fixtures
+(English, Spanish, Chinese, Arabic with `dir="rtl"`) exercise this.
 
 ## Colour is never the only channel
 
-Every status has a glyph. Every state has a border, pattern or ARIA change.
-Diffs keep their `+ − ~` markers. Charts carry pattern fills and a table
-fallback. The `heritage-ansi` terminal palette has less hue difference by
-design; the specification records this as a limit instead of fixing it
-silently.
+Every status has a glyph; every state a border, pattern or ARIA change. Diffs
+keep their `+ − ~` markers. Charts carry pattern fills and a table fallback.
+The `heritage-ansi` terminal palette has less hue difference by design, a
+recorded limit.
 
 ## Limitations (recorded, not hidden)
 
 - The theme specifies colours, states and reference markup. It cannot make a
   host application's own focus management, labels or reading order correct.
-- The site's automated scan uses axe-core with the WCAG 2.x A and AA rule
-  sets. It does not test every success criterion. Manual checks (keyboard
-  walks, screen-reader reading, zoom) need their own execution evidence. A
-  missing protocol stays not run; the scan does not imply it.
-- In the `default` profile, terminal slot 8 is the dim tier at 3.01:1 on the
-  terminal background (D-029; slot 0 is the background). Programs that draw
-  text in slot 8 inherit that. The `heritage-ansi` profile keeps the historical
-  slots, where 1, 4, 6, 8, 9, 10, 12, 13, 14 and 15 fail 4.5:1. The `extended`
-  overlay proposes a semantic set.
-- Syntax roles inside an editor selection: type and comment drop below 4.5:1 on
-  `code.selection-bg` (4.24 and 4.13:1). Keyword, tag, property and heading
-  stay above it after D-029. A selection is short-lived; the code-editor
-  specification records this limit.
-- Text selection with `interaction.text-selection.tint` (D-036) keeps text at
-  4.5:1 or above only where the host draws the tint under the text.
+- The automated scan uses axe-core with the WCAG 2.x A and AA rule sets and
+  does not test every success criterion. Manual checks (keyboard walks,
+  screen-reader reading, zoom) need their own execution evidence; a missing
+  protocol stays not run.
+- In `default`, terminal slot 8 is the dim tier, under 4.5:1 on the terminal
+  background (D-029; slot 0 is the background); programs drawing text in it
+  inherit that. In `heritage-ansi`, slots 1, 4, 6, 8, 9, 10, 12, 13, 14 and 15
+  fail 4.5:1. The `extended` overlay proposes a semantic set.
+- Inside an editor selection, type and comment syntax drop below 4.5:1 on
+  `code.selection-bg`; keyword, tag, property and heading stay above it after
+  D-029. A selection is short-lived; the code-editor specification records
+  this limit.
+- `interaction.text-selection.tint` (D-036) keeps text at 4.5:1 only where the
+  host draws the tint under the text.
   - **Over the text:** where a host paints it over the text, as in Telegram's
-    rich editor and rich translation preview, selected text measures 2.96 to
-    3.43:1.
-  - **Links and code:** inside a selection they drop below 4.5:1 (links 3.45
-    to 4.30; code 3.13 to 4.24, and 4.40 for numbers in outgoing blocks).
+    rich editor and rich translation preview, selected text falls below 4.5:1.
+  - **Links and code:** inside a selection they drop below 4.5:1. Links are
+    not a declared pair: a failing pair needs a waiver, and waivers cover
+    decorative graphics only.
+  - **Strength:** no tint strength meets both the over-the-text case and the
+    floor on `surface.accent`.
+  - **Outgoing code blocks:** inside one, the selection stands only ΔE 18.3
+    (CIE76) from the block.
+
+  The global contrast pairs composite the tint over the canvas only; the
+  Telegram port's tests enforce the raised and accent cases. A selection is
+  short-lived, as in an editor.
 
 ## Verification evidence and freshness
 
 **Source coverage.** The coverage ledger records source facts: specified,
 demonstrated and test implemented. `exports/coverage.json` schemaVersion 1
-adds `testImplemented` and keeps `tested` as a compatibility alias with its
-original meaning (the test file exists). Component JSON coverage and family
-totals use the same definitions. No source coverage Boolean proves an
-execution or blanket WCAG conformance.
+adds `testImplemented` and keeps `tested` as a compatibility alias meaning the
+test file exists; component JSON and family totals use the same definitions.
+No coverage Boolean proves an execution or WCAG conformance.
 
-**Execution evidence.** The linked static verification report gives the real
-per-test outcomes and per-component summaries. Evidence schemaVersion 1
-records, for each result:
+**Execution evidence.** The static verification report gives per-test
+outcomes and per-component summaries. Evidence schemaVersion 1 records, for
+each result:
 
 - the method (automated or manual), category and component;
 - the states and variants it explicitly covers (empty lists mean
@@ -156,20 +150,20 @@ records, for each result:
 - browser and version, OS, viewport, profile, density and JavaScript setting;
 - a run or protocol reference.
 
-The recorded profile and density describe the starting configuration; tests
-that switch them say so in their scope. Results from one browser engine never
-stand for another. Skipped, failed, not run and not applicable are separate
-outcomes, and every non-pass has a reason. Manual screen-reader and keyboard
-claims need protocol records. The current automated suite targets Chromium;
-other engines stay not run.
-
-**Freshness.** A claim is current only while two things match: the digest of
-the tested artifact, and a broad source fingerprint. The fingerprint covers
-tracked contract sources, schemas, generators, site code, tests, agent
-guidance, CI configuration and the package lockfile. Any change to these
-makes the claim stale, so an unrelated change can make more evidence stale
-than strictly needed. A stale record keeps its real outcome and reference, but
-it no longer shows a current pass.
+The recorded profile and density are the page's declared `data-profile` and
+`data-density` when the test ends; tests that switch them say so in their
+scope. One browser engine never stands for
+another. Skipped, failed, not run and not applicable are separate outcomes,
+and every non-pass has a reason. Manual screen-reader and keyboard claims need
+protocol records. The automated suite targets Chromium; other engines stay not
+run.
+
+**Freshness.** A claim is current only while the tested artifact's digest and
+a broad source fingerprint both match. The fingerprint covers tracked contract
+sources, schemas, generators, site code, tests, agent guidance, CI
+configuration and the package lockfile, so an unrelated change can stale more
+evidence than strictly needed. A stale record keeps its real outcome and
+reference but no longer shows a current pass.
 
 **How the report is built.**
 
@@ -182,8 +176,7 @@ it no longer shows a current pass.
    never certifies itself.
 
 Run timestamps and revisions live only in this post-test evidence, outside the
-committed deterministic exports and their digests, so no hash depends on
-itself.
+committed exports and their digests, so no hash depends on itself.
 
 **Run it locally.**
 
@@ -192,12 +185,12 @@ itself.
 3. Run `npm run verification:report`, then `npm run verification:check`, then
    `npm run test:verification`.
 
-A local run names its local execution and digests. It is never presented as
+A local run names its local execution and digests and is never presented as
 hosted CI evidence.
 
 **Record a manual protocol.** Pass a schema-valid evidence document to
-`node scripts/verification-report.mjs <repo-relative-evidence.json>`. It must
-carry the real tested digests, the browser and environment, and a `protocol:`
-reference with the protocol identifier and the recorded observations. Keep the
-protocol with the evidence. Do not copy private artifacts into this public
+`node scripts/verification-report.mjs <repo-relative-evidence.json>`, carrying
+the real tested digests, the browser and environment, and a `protocol:`
+reference with the protocol identifier and recorded observations. Keep the
+protocol with the evidence; never copy private artifacts into this public
 repository.
diff --git a/spec/components/admin-form.md b/spec/components/admin-form.md
index 84e6541b7..6ab47d24c 100644
--- a/spec/components/admin-form.md
+++ b/spec/components/admin-form.md
@@ -129,76 +129,55 @@ compact: false
 
 ## Purpose
 
-A record screen that proves the advanced form components compose with the
-navigation and feedback components: a trail, a heading, a step list, a
-notice, a grid of fields and a row of actions, then the same screen at its
-review step. It exists to show validation, saving and inertness across a
-whole form, not to prescribe a product.
+A record screen proving that the advanced form components compose with the
+navigation and feedback components, then the same screen at its review step.
+It shows validation, saving and inertness across a whole form; it does not
+prescribe a product.
 
 ## Anatomy
 
-The region landmark; the breadcrumbs (Records / Workstations / New); the h2
-in {color.text.bright}; the wizard step list with the current step on the
-2px {color.border.selected-indicator}; an info alert on
-{color.status.info.tint}; the form landmark holding the name and hostname
-text-fields, the role select, the commissioned-on date-picker, the SSH-key
-file-input, the notes textarea with its count and the enable checkbox; the
-footer rule and the Back, Save draft and Continue buttons. The review
-variant replaces the fields with a table whose row headers are the field
-names in {color.text.muted} and whose last column is a tertiary Edit button.
-Every part is the component's own markup and classes.
+Parts as listed in the anatomy; each is the contained component's own markup
+and classes.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | rest tokens of every component on {color.surface.default}; the current step carries the indicator bar, future steps are disabled | `aria-current="step"` |
-| invalid | the name and hostname fields take the 2px {color.status.danger.border} and show their ✕ messages; the current step's marker becomes ✕; a danger alert on {color.status.danger.tint} summarising the two fields replaces the notice; the other fields stay at rest | border width 1 → 2px; glyphs; `aria-invalid`; `role="alert"` |
-| busy | Continue shows the static ⋯ glyph in {color.action.primary.text}; the form carries `aria-busy`; nothing shrinks or animates | glyph; `aria-busy`; cursor: progress |
-| disabled | every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover anywhere | `disabled` on the wrapping fieldset; cursor: not-allowed; never opacity |
+| default | every component's rest tokens on {color.surface.default}; the current step carries the indicator bar, future steps are disabled | `aria-current="step"` |
+| invalid | name and hostname take the 2px {color.status.danger.border} and ✕ messages; the current step's marker becomes ✕; a danger summary on {color.status.danger.tint} naming the two fields replaces the notice; other fields stay at rest | border 1 → 2px; glyphs; `aria-invalid`; `role="alert"` |
+| busy | Continue shows the static ⋯ in {color.action.primary.text}; nothing shrinks or animates | glyph; `aria-busy` on the form; cursor: progress |
+| disabled | every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover | `disabled` on the wrapping fieldset; cursor: not-allowed; never opacity |
 
-The composed components keep their own hover, focus-visible, required,
-placeholder-shown and read-only treatments; this specimen declares only the
-states the whole form adds to them.
+Contained components keep their own hover, focus-visible, required,
+placeholder-shown and read-only states; this table adds only the form-level
+ones.
 
 ## Keyboard
 
-Landmarks first: the region, the Breadcrumb navigation and the form are
-offered by name. Tab walks the trail, the reachable steps, the fields in
-reading order and the three buttons; the file-input's hidden native input is
-the stop and its visible button label is drawn with the ring. The select and
-the date field move with arrows inside one stop. In the review variant the
-Edit buttons are ordinary stops inside the table. Nothing traps focus.
+The region, the Breadcrumb navigation and the form are offered as landmarks
+by name. In the review variant the Edit buttons are ordinary stops inside the
+table. Nothing traps focus.
 
 ## Accessibility
 
-The region and the form are both named by the h2. Complete steps read ", complete"
-through a visually hidden suffix; future steps are disabled, not hidden.
-The notice is `role="status"` and the invalid summary is `role="alert"`, so
-the summary is announced once on submit while each field's message stays
-linked by `aria-describedby`; `aria-invalid` is set only after submit. While
-saving the form carries `aria-busy` and, once inert, sits inside a disabled
-fieldset so every control reports its state natively. The review table has
-a caption, column headers and row headers; each Edit button names its field
-through a visually hidden suffix. Contrast: notice title 6.5:1 or better on
-its tint, messages 5.26:1 on the panel surface, the invalid boundary 4.69:1
-on the input surface, disabled text 3.24:1 (exempt).
+The h2 names both the region and the form. Complete steps read ", complete"
+through a visually hidden suffix; future steps are disabled, not hidden. The
+summary alert is announced once on submit; each field's message stays linked
+by `aria-describedby`. Inside the disabled fieldset every control reports its
+state natively. The review table has a caption, column headers and row
+headers; each Edit button names its field through a visually hidden suffix.
+Text meets 4.5:1 and the invalid boundary 3:1; disabled text is exempt (house
+floor 3:1).
 
 ## Portability
 
-Landmarks, native controls, one container query and three root hooks
-(`data-state-invalid`, `data-state-busy`, `data-state-disabled`); no script
-is needed to render any state. Hosts without container queries stack the
-footer at the 600px viewport breakpoint. The 56rem reference width and the
-two-column field grid are layout of this specimen and not rules; the
-specimen proves composition, not a product. Toolkits port each contained
+No script is needed to render any state. Toolkits port each contained
 component through its own mapping.
 
 ## Non-examples
 
-A rounded card with a drop shadow around the form. A Material stepper with
-circular numbered badges and a connecting line. A red banner across the
-whole form instead of the summary alert plus field messages. Fields whose
-borders glow red. A spinner replacing the Continue label. Saving while the
-fields fade to half opacity. Placing the actions in a sticky footer bar with
-a shadow.
+A rounded card with a drop shadow. A Material stepper with numbered circles
+and a connecting line. A red banner across the whole form instead of the
+summary alert plus field messages. Field borders that glow red. A spinner
+replacing the Continue label. Fields fading to half opacity while saving. A
+sticky footer bar with a shadow.
diff --git a/spec/components/alert.md b/spec/components/alert.md
index c9128ea41..9edb2012f 100644
--- a/spec/components/alert.md
+++ b/spec/components/alert.md
@@ -103,62 +103,50 @@ compact: false
 ## Purpose
 
 A status message that belongs to the page or form around it: a failed
-submit, a saved draft, a deprecation notice. It stays in flow, is never
-timed, and is announced once when it appears. Transient confirmations are
-toasts; blocking questions are dialogs.
+submit, a saved draft, a deprecation notice. It stays in flow, is never timed,
+and is announced once when it appears. Transient confirmations are toasts;
+blocking questions are dialogs.
 
 ## Anatomy
 
-The block on the status tint behind a 1px status border; the glyph in the
-status text colour; the title in the same colour and the message in
-{color.text.default}; an optional close button at the end. The five statuses
-use their own `tint`, `border` and `text` roles: {color.status.danger.tint},
-{color.status.warning.tint}, {color.status.success.tint},
-{color.status.info.tint} and {color.status.neutral.tint} behind
-{color.status.danger.border}, {color.status.warning.border},
-{color.status.success.border}, {color.status.info.border} and
-{color.status.neutral.border}.
+Parts as listed in the anatomy. Each of the five statuses uses its own
+`tint`, `border` and `text` roles.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | status tint, 1px status border, glyph and title in the status text colour | the glyph ✕ ! ✓ i · |
-| hover | close button background → {color.action.tertiary.hover-bg}; the alert itself does not react | cursor: pointer on the button only |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the close button | the ring |
+| hover | close button → {color.action.tertiary.hover-bg}; the alert itself does not react | cursor: pointer on the button only |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px on the close button | the ring |
 
-The alert has no disabled, selected or loading state; a message that is no
-longer true is removed, not greyed.
+No disabled, selected or loading state: a message that is no longer true is
+removed, not greyed.
 
 ## Keyboard
 
-Only the close button is in the tab order. Enter or Space dismisses and
-returns focus to where it was, or to the next focusable element after the
-alert when that element is gone. Escape does nothing, so a page-level Escape
-handler is never swallowed.
+As in the key table. Escape does nothing so a page-level Escape handler is
+never swallowed.
 
 ## Accessibility
 
-Danger uses `role="alert"` (assertive) because it needs attention now; the
-other four use `role="status"` (polite). The container exists before its
-text is set, so the live region fires; text is never injected together with
-the container. The glyph is `aria-hidden` and the title states the status in
-words ("Build failed", "Saved"), so nothing depends on colour or on the glyph
-alone. The close button is `aria-label="Dismiss"` and at least 24×24 CSS
-pixels. Contrast: status text on its tint from 4.88:1 (danger) to 6.59:1
-(warning, info); body text at least 7.56:1 on every tint; borders from 4.07:1
-(neutral) to 6.59:1.
+Danger is `role="alert"` (assertive) because it needs attention now; the
+other four are `role="status"` (polite). The container exists before its text
+is set so the live region fires; never inject text together with the
+container. The glyph is `aria-hidden` and the title states the status in
+words ("Build failed", "Saved"), so nothing depends on colour or the glyph
+alone. The close button is at least 24×24 CSS pixels. Text meets 4.5:1 on
+every tint; borders 3:1.
 
 ## Portability
 
-Everything is a tint, a 1px border and text; the glyph is a text character,
-not an icon font. Toolkits with a native info bar map its type to the five
-statuses and keep the glyph in the text; toolkits without a tint draw the
-border only and record the deviation.
+The glyph is a text character, not an icon font. A toolkit with a native info
+bar maps its type to the five statuses and keeps the glyph in the text; one
+without a tint draws the border only and records the deviation.
 
 ## Non-examples
 
 A coloured left stripe with no border. A rounded, shadowed card. A banner
 that slides in or auto-dismisses. Colour-only status without the glyph and a
-worded title. Using `role="alert"` for success messages. A close button that
-is an icon with no accessible name. Fixed-position alerts covering content.
+worded title. `role="alert"` for success. A close icon with no accessible
+name. Fixed-position alerts covering content.
diff --git a/spec/components/avatar.md b/spec/components/avatar.md
index 32d03068e..c80894529 100644
--- a/spec/components/avatar.md
+++ b/spec/components/avatar.md
@@ -29,10 +29,10 @@ tokens:
   control.bg: color.surface.input
   control.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
+  dependency.role-focus-offset: focus.offset
   dependency.role-font-weight-bold: font.weight.bold
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
-  dependency.role-space-2: space.2
   dependency.role-space-32: space.32
 stateTokens:
   default:
@@ -92,33 +92,34 @@ compact: false
 
 ## Purpose
 
-Identify a person or entity with an optional caller-owned image and text fallback. The component ships no image service or assets. Failed images restore the fallback and retain the full accessible name.
+Identifies a person or entity; the caller owns the image.
 
 ## Anatomy
 
-- **frame:** Square bounded image area with a border.
-- **fallback:** Caller-supplied initials, backed by the full accessible name.
-- **image:** Optional image; failed loading restores the text fallback.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Initials or loaded image. | Full name on the image container. |
-| loading | Fallback remains visible. | No loss of the full accessible name while loading. |
-| error | Fallback remains visible. | Image failure does not remove the entity name. |
+| default | Initials or the loaded image. | Full name on the image container. |
+| loading | Fallback stays visible. | Full accessible name kept. |
+| error | Fallback stays visible. | Full accessible name kept. |
 
 ## Keyboard
 
-- **Tab:** No additional tab stop. An enclosing link remains native.
+As in the key table; nothing is bound.
 
 ## Accessibility
 
-Use one full accessible name, avoiding duplicate announcements from image alt and fallback text. Initials alone do not adequately identify a person. A decorative avatar beside an equivalent visible name may be aria-hidden.
+One full accessible name, never announced twice by image alt and fallback
+text; initials alone do not identify a person. A decorative avatar beside an
+equivalent visible name may be `aria-hidden`.
 
 ## Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 ## Non-examples
 
diff --git a/spec/components/badge.md b/spec/components/badge.md
index 0af93ce3b..14934f32c 100644
--- a/spec/components/badge.md
+++ b/spec/components/badge.md
@@ -97,57 +97,46 @@ compact: false
 ## Purpose
 
 Names a status or shows a count next to the thing it describes. A badge is
-read-only: it never opens, toggles or removes anything. An interactive
-label is a chip; a message with a status is an alert.
+read-only: it never opens, toggles or removes anything. An interactive label
+is a chip; a message with a status is an alert.
 
 ## Anatomy
 
-An inline span in caption type with 2px by 8px padding and square corners.
-Status badges fill with `color.status.<status>.fill` and use the matching
-`on-fill` text, preceded by the status glyph: ✕ danger, ! warning, ✓ success,
-i info, · neutral. Outline badges have no fill, the `text` colour and a 1px
-`border` in the same status. The count badge is a number on
-{color.action.primary.bg} in {color.action.primary.text} with a visually
-hidden unit. An empty badge is an 8px square dot in the status fill with a
-name.
+Parts as listed in the anatomy. The glyphs are ✕ danger, ! warning, ✓
+success, i info and · neutral.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | fill, glyph and text for the status; or the outline form | the glyph; the text |
-| empty | an 8px square dot in the status fill; the glyph and text visually hidden | `role="img"` with `aria-label`, or the hidden text; the dot's position beside its subject |
+| empty | an 8px square dot in the status fill; glyph and text visually hidden | `role="img"` with `aria-label`, or the hidden text; the dot's position beside its subject |
 
-A badge has no hover, focus, pressed or disabled state because it is not a
-control.
+No hover, focus, pressed or disabled state: a badge is not a control.
 
 ## Keyboard
 
-None. A badge is never focusable. When a badge summarises something the
-user can act on, the action lives in the neighbouring control and the badge
-is part of that control's name or description.
+None. When a badge summarises something the user can act on, the action lives
+in the neighbouring control and the badge is part of that control's name or
+description.
 
 ## Accessibility
 
-The glyph is `aria-hidden` and the text carries the meaning, so a screen
-reader hears "Failed", not "cross Failed". Count badges include their unit
-as visually hidden text ("12 unread"). An empty badge, a dot, carries
-`role="img"` and `aria-label` or wraps hidden text; a dot with no name is
-decoration and must be `aria-hidden`. Contrast: on-fill text 4.58:1 (danger),
-7.54:1 (warning), 7.13:1 (success), 7.08:1 (info), 4.71:1 (neutral); outline
-text 5.26:1 to 7.34:1; borders and dots at least 4.04:1 on the panel surface.
-Badges are not targets, so no minimum size applies beyond legibility at 11px
-caption type.
+The text carries the meaning, so a reader hears "Failed", not "cross Failed".
+The count's hidden unit reads as "12 unread". An empty badge may wrap hidden
+text instead of `aria-label`; a dot with no name is decoration and must be
+`aria-hidden`. Text meets 4.5:1; outline borders and dots 3:1 on the panel
+surface. Badges are not targets, so no size minimum applies beyond legibility
+at 11px caption type.
 
 ## Portability
 
-A filled or outlined span with a glyph. Toolkits without background colours
-on labels use the outline form. Hosts without the glyph characters use the
-nearest available (x, !, check mark, i, bullet) and record it.
+Toolkits without background colours on labels use the outline form. Hosts
+without the glyph characters use the nearest available (x, !, check mark, i,
+bullet) and record it.
 
 ## Non-examples
 
-Rounded or pill badges. A badge that is clickable. A status shown by colour
-without its glyph. A count badge that hides its unit from assistive
-technology. Purple, cyan or magenta statuses. A badge in body type. A badge
-whose text wraps. A dot without a name.
+Rounded or pill badges. A clickable badge. A status by colour without its
+glyph. A count unit hidden from assistive technology. Purple, cyan or magenta
+statuses. A badge in body type. Wrapping text. A dot without a name.
diff --git a/spec/components/breadcrumbs.md b/spec/components/breadcrumbs.md
index 794f2997b..3a49b1b0d 100644
--- a/spec/components/breadcrumbs.md
+++ b/spec/components/breadcrumbs.md
@@ -29,7 +29,7 @@ tokens:
   link.text: color.text.link
   link.underline: color.text.link-underline
   link.text-hover: color.text.link-hover
-  link.bg-hover: color.interaction.hover.bg-strong
+  link.bg-hover: color.interaction.hover.bg
   link.ring: color.interaction.focus.ring
   current.text: color.text.bright
   separator.text: color.text.muted
@@ -37,7 +37,7 @@ tokens:
   ellipsis.bg-hover: color.interaction.hover.bg
 stateTokens:
   default: { fg: color.text.link, bg: color.surface.default }
-  hover: { fg: color.text.link-hover, bg: color.interaction.hover.bg-strong }
+  hover: { fg: color.text.link-hover, bg: color.interaction.hover.bg }
   focus-visible: { fg: color.text.link, bg: color.surface.default, outline: color.interaction.focus.ring }
   current: { fg: color.text.bright, bg: color.surface.default }
   truncated: { fg: color.text.default, bg: color.surface.default }
@@ -79,57 +79,48 @@ compact: false
 
 ## Purpose
 
-Shows where the current page sits in a hierarchy and lets the user jump to
-any ancestor. Breadcrumbs are secondary navigation: they never replace the
-sidebar or the page title, and they are omitted on the root page.
+Where the current page sits in a hierarchy, with a jump to any ancestor.
+Secondary navigation: never a replacement for the sidebar or page title, and
+omitted on the root page.
 
 ## Anatomy
 
-A `nav` labelled "Breadcrumb" wrapping an `ol`. Each ancestor is a link in
-{color.text.link} with a 1px {color.text.link-underline}; a `/` separator in
-{color.text.muted} follows every item but the last; the last item is the
-current page in {color.text.bright} with `aria-current="page"`. When the
-trail is deeper than the space allows, the middle levels collapse behind an
-ellipsis button that names how many levels it hides.
+Parts as listed in the anatomy; the separator follows every item but the last.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | links {color.text.link}, 1px underline; separators {color.text.muted}; current {color.text.bright} | underline on links; none on the current page |
-| hover | link background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover} | underline thickens 1px → 2px; cursor |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px around the link | the ring |
-| current | text {color.text.bright}; no underline; no hover | `aria-current="page"`; no underline |
-| truncated | the middle levels are replaced by an `…` button in {color.text.default} | `aria-expanded="false"` on the button; its label counts the hidden levels |
+| hover | link → {color.interaction.hover.bg}, text {color.text.link-hover} | underline 1px → 2px; cursor |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px around the link | the ring |
+| current | {color.text.bright}; no underline; no hover | `aria-current="page"`; no underline |
+| truncated | middle levels replaced by an `…` button in {color.text.default} | `aria-expanded="false"`; its label counts the hidden levels |
 
 ## Keyboard
 
-Every ancestor link is a tab stop in trail order. The ellipsis button is a tab
-stop that discloses the hidden levels in place on Enter or Space and sets its
-own `aria-expanded`; focus stays on the button so the newly revealed links are
-the next Tab presses.
+As in the key table. The ellipsis button discloses the hidden levels in place
+on Enter or Space; focus stays on it, so the revealed links are the next Tab
+stops.
 
 ## Accessibility
 
-`aria-label="Breadcrumb"` on the `nav`, translated. The separator is
-`aria-hidden` so nothing voices "slash"; the list structure gives the count.
-`aria-current="page"` marks the last item whether or not it is a link. Hidden
-levels stay in the DOM under the ellipsis (`hidden` until disclosed) so a
-find-in-page still reaches them. Contrast: link text 10.10:1, current
-10.10:1, separator 5.66:1, underline 4.57:1 on the panel surface. Each link
-is at least 24 CSS pixels tall through its line box and padding.
+The `nav` label "Breadcrumb" is translated. The `aria-hidden` separator keeps
+"slash" unspoken; the list gives the count. `aria-current="page"` marks the
+last item, link or not. Hidden levels stay in the DOM (`hidden` until
+disclosed) so find-in-page reaches them. Text meets 4.5:1; underline and ring
+3:1. Each link is at least 24 CSS pixels tall through line box and padding.
 
 ## Portability
 
-Plain inline links and text; the only requirement is an inline-start margin
-on the separator that flips in RTL. Toolkits without an underline draw the
-link in the link colour and record the deviation. The ellipsis disclosure is
-optional; hosts without it show the full trail and let it wrap.
+Plain inline links and text; the separator needs only an inline-start margin
+that flips in RTL. Without an underline, a toolkit draws the link in the link
+colour and records the deviation. The ellipsis is optional; without it the
+full trail shows and wraps.
 
 ## Non-examples
 
-Chevrons, arrows or bullets as separators. A trail that ends with the site
-name instead of the current page. The current page drawn as a link with an
-underline. Automatic truncation by `text-overflow` that hides levels without
-a way to reach them. A trail that scrolls horizontally. Uppercase or
-letter-spaced items. Separators that are read aloud.
+Chevrons, arrows or bullets as separators. A trail ending with the site name
+instead of the current page. The current page as an underlined link.
+`text-overflow` truncation that hides unreachable levels. A horizontally
+scrolling trail. Uppercase or letter-spaced items. Separators read aloud.
diff --git a/spec/components/button-group.md b/spec/components/button-group.md
index 54746e2f2..a59511a55 100644
--- a/spec/components/button-group.md
+++ b/spec/components/button-group.md
@@ -26,7 +26,12 @@ tokens:
   root.border: color.border.control
   heading.text: color.text.bright
   secondary.text: color.text.muted
-  control.bg: color.surface.input
+  control.bg: color.action.secondary.bg
+  control.text: color.action.secondary.text
+  control.border: color.action.secondary.border
+  control.bg-hover: color.action.secondary.hover-bg
+  control.bg-active: color.action.secondary.pressed-bg
+  control.border-active: color.border.active
   control.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-color-border-disabled: color.border.disabled
@@ -34,9 +39,9 @@ tokens:
   dependency.role-color-text-disabled: color.text.disabled
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
-  dependency.role-space-2: space.2
   dependency.role-space-4: space.4
   dependency.role-space-8: space.8
 stateTokens:
@@ -56,6 +61,12 @@ contrast:
     min: 3
     kind: ui
     label: Control boundary
+  - fg: color.action.secondary.text
+    bg: color.surface.default
+    label: Button label
+  - fg: color.action.secondary.text
+    bg: color.action.secondary.hover-bg
+    label: Button label on hover
 anatomy:
   - part: group
     description: Labelled group that wraps its buttons.
@@ -98,29 +109,28 @@ compact: false
 
 ## Purpose
 
-Group related independent actions without turning them into an exclusive choice. Each button keeps its native type, accessible name and tab stop. Application effects belong to the host.
+Groups related, independent actions without making them an exclusive choice.
 
 ## Anatomy
 
-- **group:** Labelled group that wraps its buttons.
-- **actions:** Independent buttons in source order.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Named content on the default surface. | Native text and structure. |
+| default | Named content on the default surface. Its buttons are the secondary button (button.md). | Native text and structure. |
 | focus-visible | Dashed focus ring. | Native keyboard focus position. |
 | disabled | Disabled semantic foreground, background and border at full opacity. | Native disabled state blocks activation. |
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Visit each enabled button.
-- **Enter / Space:** Activate the focused native button.
+As in the key table; no arrow-key navigation is added.
 
 ## Accessibility
 
-Use role=group with a visible or accessible label. Buttons retain distinct names and native disabled behavior. A button group does not add arrow-key navigation or selection semantics.
+`role=group` with a visible or accessible label. Buttons keep distinct names
+and native disabled behaviour; the group adds no selection semantics.
 
 ## Portability
 
@@ -128,4 +138,5 @@ Follows the shared component defaults in `spec/portability.md` (section "Shared
 
 ## Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls, colour-only status, drag-only operations, hidden required
+instructions, stolen focus or an invented service success.
diff --git a/spec/components/button.md b/spec/components/button.md
index ac3fbb894..1b28e551d 100644
--- a/spec/components/button.md
+++ b/spec/components/button.md
@@ -64,7 +64,7 @@ stateTokens:
   active: { fg: color.action.primary.text, bg: color.action.primary.pressed-bg }
   loading: { fg: color.action.primary.text, bg: color.action.primary.bg }
 contrast:
-  - { fg: color.action.primary.bg, bg: color.surface.default, min: 3, kind: ui, label: "primary fill against the panel (decorative; the label identifies the button)", waiver: "the fill is not the boundary of the control; the label text at 9.28:1 identifies it, and hover, active and focus each add a second channel" }
+  - { fg: color.action.primary.bg, bg: color.surface.default, min: 3, kind: ui, label: "primary fill against the panel (decorative; the label identifies the button)", waiver: "the fill is not the boundary of the control; the label text identifies it, and hover, active and focus each add a second channel" }
   - { fg: color.action.secondary.text, bg: color.action.secondary.bg, label: "secondary text at rest" }
   - { fg: color.action.secondary.border, bg: color.action.secondary.bg, min: 3, kind: ui, label: "secondary border at rest" }
   - { fg: color.action.secondary.text, bg: color.action.secondary.hover-bg, state: hover, label: "secondary text on the hover fill" }
@@ -114,20 +114,16 @@ compact: true
 
 ## Purpose
 
-The push button that triggers an action. Four tones and no more: `primary`
-is the single filled button in a view, `secondary` is the outline for every
-other action, `tertiary` is the ghost for low-emphasis and toolbar actions,
-`destructive` is an outline in the danger tone that fills on hover. A
-destructive button also requires a confirmation step or an undo affordance;
-the colour is not the safeguard. Navigation is a link, not a button.
+Triggers an action; navigation is a link. Four tones only, and one `primary`
+per view; `secondary` serves every other action, `tertiary` low-emphasis and
+toolbar actions. A `destructive` button also needs a confirmation step or an
+undo; the colour is not the safeguard.
 
 ## Anatomy
 
-A native `<button>`; optional leading icon; the label. The loading glyph
-occupies the icon slot so the size never changes. A filled destructive
-modifier (`.button-destructive-filled`, {color.action.destructive.filled-bg}
-with {color.action.destructive.filled-text}) exists only inside confirm
-dialogs.
+The filled destructive modifier (`.button-destructive-filled`,
+{color.action.destructive.filled-bg} with
+{color.action.destructive.filled-text}) exists only inside confirm dialogs.
 
 ## States
 
@@ -135,49 +131,39 @@ dialogs.
 | --- | --- | --- |
 | default | primary: {color.action.primary.bg} fill, {color.action.primary.text}, 1px {color.action.primary.border}; secondary: 1px {color.action.secondary.border}, {color.action.secondary.text}; tertiary: {color.action.tertiary.text}, no border; destructive: 1px {color.action.destructive.border}, {color.action.destructive.text} | — |
 | hover | primary → {color.action.primary.hover-bg}; secondary → {color.action.secondary.hover-bg}; tertiary → {color.action.tertiary.hover-bg}; destructive fills {color.action.destructive.hover-bg} with {color.action.destructive.hover-text} | cursor: pointer; hover-capable pointers only |
-| focus-visible | ring 1px dashed at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill | the ring |
-| active | primary → {color.action.primary.pressed-bg}; secondary → {color.action.secondary.pressed-bg}; tertiary → {color.interaction.pressed.bg}; destructive → {color.action.destructive.pressed-bg}; primary keeps {color.action.primary.border}, secondary and tertiary use {color.border.active}, destructive keeps {color.action.destructive.border} (D-015) | border change on secondary and tertiary; no translation or scale |
-| disabled | {color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}, every tone alike; no hover or active styling | `disabled`; cursor: not-allowed; never opacity |
-| loading | size unchanged; the static `⋯` glyph replaces the icon; the button keeps its tone and stays focusable but ignores activation | glyph; `aria-busy` |
+| focus-visible | 1px dashed ring at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill | the ring |
+| active | fill: primary {color.action.primary.pressed-bg}, secondary {color.action.secondary.pressed-bg}, tertiary {color.interaction.pressed.bg}, destructive {color.action.destructive.pressed-bg}; border: primary and destructive keep theirs, secondary and tertiary take {color.border.active} (D-015) | border change on secondary and tertiary; no translation or scale |
+| disabled | {color.text.disabled} on {color.interaction.disabled.bg}, 1px {color.border.disabled}, every tone alike; no hover or active styling | `disabled`; cursor: not-allowed; never opacity |
+| loading | size and tone unchanged; the static `⋯` glyph replaces the icon; stays focusable, ignores activation | glyph; `aria-busy` |
 
 Precedence: disabled > loading > active > hover; focus-visible is always
 drawn.
 
-The primary edge stays unchanged when pressed (D-015). Its exact role is
-`root.border-active` in the part map, just as `root.border` names the rest
-edge. The default-tone state contrast map checks the text against the
-pressed fill; it does not substitute `color.border.active` for this
-unchanged edge. The existing primary-action contrast declaration identifies
-the labelled button through its text, not through the fill's boundary.
-
 ## Keyboard
 
-Native. Enter and Space activate; nothing else is bound. A loading button
-stays in the tab order so focus is not lost mid-action, and the host ignores
-activation until `aria-busy` clears.
+Native; nothing else is bound. A loading button keeps its tab stop so focus
+is not lost mid-action.
 
 ## Accessibility
 
-The accessible name is the label text; an icon-only button is the
-icon-button component. Never `aria-disabled` on a button that should be
-skipped, and never `disabled` on a button whose reason a user needs to
-discover: prefer keeping it enabled and explaining on activation. Contrast:
-primary 9.28:1, secondary 10.37:1, tertiary 8.65:1, destructive 5.40:1 at
-rest and 4.58:1 on the hover fill; every outline border ≥ 4.45:1; rings ≥
-3:1 on every fill they sit on. The target is at least 24×24 CSS pixels in
-`compact` density with 4px between neighbours.
+The accessible name is the label; an icon-only button is `icon-button`.
+Never `aria-disabled` on a button that should be skipped. When a user needs
+to discover why an action is unavailable, keep the button enabled and
+explain on activation instead of disabling it. Text meets 4.5:1 and borders
+and rings 3:1 on every fill they sit on. Target at least 24×24 CSS pixels in
+`compact`, with 4px between neighbours.
 
 ## Portability
 
 Fill, border and outline express every state; no gradient, shadow or
-transform is used. Hosts without dashed outlines draw a solid 1px ring in the
-same colour and record the deviation. Hosts that cannot recolour the ring on
-a fill draw it outside the fill at +1px.
+transform. A host without dashed outlines draws a solid 1px ring in the same
+colour and records the deviation; one that cannot recolour the ring on a
+fill draws it outside the fill at +1px.
 
 ## Non-examples
 
-Rounded corners or pill shapes. Two filled buttons in one view. A red
-filled destructive button at rest. A hover that only changes text colour.
-Translating or scaling the button on press. A spinner inside the button.
-Disabling with opacity. A `<div>` or `<a>` styled as a button. A gradient or
-shadow to suggest depth.
+Rounded or pill shapes. Two filled buttons in one view. A red filled
+destructive button at rest. A hover that only changes text colour.
+Translating or scaling on press. A spinner inside the button. Disabling with
+opacity. A `<div>` or `<a>` styled as a button. A gradient or shadow for
+depth.
diff --git a/spec/components/card.md b/spec/components/card.md
index 643bc51eb..d4dc66bb7 100644
--- a/spec/components/card.md
+++ b/spec/components/card.md
@@ -39,19 +39,19 @@ tokens:
   meta.text: color.text.muted
   selected.bg: color.interaction.selection.bg
   selected.text: color.interaction.selection.text
-  selected.ring: color.interaction.focus.ring-container
+  selected.ring: color.interaction.focus.ring
 stateTokens:
   default: { fg: color.text.default, bg: color.surface.default }
   hover: { fg: color.text.default, bg: color.interaction.hover.bg, border: color.border.control }
   focus-visible: { fg: color.text.default, bg: color.surface.default, outline: color.interaction.focus.ring-container }
   selected: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg }
-  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring-container }
+  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring }
 contrast:
   - { fg: color.text.bright, bg: color.surface.default, label: "title on the card" }
   - { fg: color.text.muted, bg: color.surface.default, label: "metadata on the card" }
   - { fg: color.text.bright, bg: color.interaction.hover.bg, state: hover, label: "title on the hover fill" }
   - { fg: color.text.muted, bg: color.interaction.hover.bg, state: hover, label: "metadata on the hover fill" }
-  - { fg: color.border.default, bg: color.surface.default, min: 1, kind: ui, label: "card edge (decorative; the card is not a control at rest)", waiver: "the default border groups content; a link or selectable card gains border.control on hover and the container ring on focus" }
+  - { fg: color.border.default, bg: color.surface.default, min: 1, kind: ui, label: "card edge (decorative; the card is not a control at rest)", waiver: "the default border groups content; interactive cards gain border.control on hover and a focus ring; selected cards use the ordinary ring" }
 anatomy:
   - part: root
     description: The article, anchor or option; 1px border.default on surface.default; no shadow, no radius.
@@ -89,18 +89,14 @@ compact: false
 
 ## Purpose
 
-Groups a small unit of content — a title, a line or two, a metadata line —
-so it reads as one thing. A card is static by default; it becomes a link
-when the whole unit leads somewhere, and an option when the user picks among
-several units. A card is not a dialog, not a form and not a table row.
+Groups a title, a line or two and a metadata line so they read as one
+thing. Static by default; a link when the whole unit leads somewhere, an
+option when the user picks among units. Not a dialog, a form or a table row.
 
 ## Anatomy
 
-A 1px {color.border.default} edge on {color.surface.default}, no shadow, no
-radius. Inside, a title in {color.text.bright}, body text in
-{color.text.default}, metadata in {color.text.muted}. Padding is 12px in
-`comfortable` and 8px in `compact` density. A link card is one anchor around
-the same content; a selectable card is an option inside a listbox group.
+Parts as listed in the anatomy. Padding 12px in `comfortable`, 8px in
+`compact`.
 
 ## States
 
@@ -109,42 +105,34 @@ the same content; a selectable card is an option inside a listbox group.
 | default | 1px {color.border.default} on {color.surface.default} | — |
 | hover | link and selectable cards only: background → {color.interaction.hover.bg}; border → {color.border.control} | cursor: pointer; the border lightens from decorative to control |
 | focus-visible | container ring 2px solid {color.interaction.focus.ring-container} at −3px | the ring |
-| selected | fill {color.interaction.selection.bg} with {color.interaction.selection.text} on every line | `aria-selected="true"`; the fill's on-fill text |
-| selected+focus-visible | the fill and the 2px ring in {color.interaction.focus.ring-container} | both visible at once |
+| selected | fill {color.interaction.selection.bg}, {color.interaction.selection.text} on every line | `aria-selected="true"`; the on-fill text |
+| selected+focus-visible | the fill and 1px dashed {color.interaction.focus.ring} at −2px | both visible at once |
 
-A static card has no hover and no focus: nothing happens on a pointer and it
-is not in the tab order.
+A static card has no hover and no focus, and is not in the tab order.
 
 ## Keyboard
 
-A link card is one tab stop and Enter follows it; controls inside a link
-card are not allowed (a link cannot contain a button). A selectable group is
-a listbox with roving tabindex: Tab lands on the selected card, the arrow
-keys move and select, Space toggles in a multi-select group. A static card
-that contains controls contributes those controls to the tab order and
-nothing else.
+A link card may hold no controls (a link cannot contain a button). A static
+card contributes only the controls it contains to the tab order.
 
 ## Accessibility
 
 A static card is an `article` with a heading when it stands alone, or a
-`section` inside a list. A link card names itself from its content and the
-title comes first so it is read first. Selectable cards are `role="option"`
-inside `role="listbox"` with `aria-label`; `aria-selected` on each option.
-Contrast: title 10.10:1, body 8.43:1, metadata 5.66:1 on the card; on the
-selection fill every line switches to the on-fill text (12.47:1) because muted
-text would fall to 4.19:1. The ring is 10.10:1 on the card and 7.48:1 on the
-fill.
+`section` inside a list. A link card names itself from its content, title
+first. A selectable group's listbox carries `aria-label`. On the selection
+fill every line takes the on-fill text, because muted text would fall below
+4.5:1. Text meets 4.5:1; the ring 3:1 on the card and on the fill.
 
 ## Portability
 
-A bordered box with a background and an outline. Toolkits that add a shadow
-to their frames remove it. Hosts without container outlines draw the ring
-as a 2px inner border and record it.
+A bordered box with a background and an outline. Toolkits that shadow their
+frames remove it. A host without outlines draws a 2px inner border for the container ring,
+1px for the selected card, and records it.
 
 ## Non-examples
 
-A drop shadow or elevation. Rounded corners. A hover lift or scale. A static
-card with a hover fill. A card whose only clickable part is an invisible
-overlay. A link card containing buttons. A selected card shown by a border
-colour alone without the fill and `aria-selected`. Muted metadata left on the
-selection fill.
+A shadow or elevation. Rounded corners. A hover lift or scale. A hover fill
+on a static card. An invisible overlay as the only clickable part. A link
+card containing buttons. A selected card shown by border colour alone,
+without the fill and `aria-selected`. Muted metadata left on the selection
+fill.
diff --git a/spec/components/chart.md b/spec/components/chart.md
index 0b28ea1c4..d132fcb13 100644
--- a/spec/components/chart.md
+++ b/spec/components/chart.md
@@ -32,12 +32,12 @@ tokens:
   dependency.role-color-chart-axis: color.chart.axis
   dependency.role-color-chart-grid: color.chart.grid
   dependency.role-color-chart-label: color.chart.label
+  dependency.role-focus-offset: focus.offset
   series.primary: color.chart.series-2
   header.text: color.text.bright
   row.text: color.text.default
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
-  dependency.role-space-2: space.2
   dependency.role-space-8: space.8
 stateTokens:
   default:
@@ -100,18 +100,16 @@ compact: false
 
 ## Purpose
 
-Show one bounded numeric series with its complete textual data table. Labels and exact values carry the meaning without color. The API accepts finite non-negative values; it rejects invalid data rather than silently inventing missing numbers.
+One bounded numeric series, plotted beside the complete data table that
+carries its meaning.
 
 ## Anatomy
 
-- **figure:** Caption identifies the measure and units.
-- **plot:** Responsive SVG with an accessible name.
-- **table:** Always-visible labels and exact values.
-- **empty:** Explicit message when the supplied series is empty.
+Parts as listed in the anatomy; each SVG bar has a text label.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Red primary series (`color.chart.series-2`), with canonical axis and label roles. | Complete labelled data table. |
 | empty | Plot and rows are absent. | Explicit No data available text. |
@@ -119,16 +117,16 @@ Show one bounded numeric series with its complete textual data table. Labels and
 
 ## Keyboard
 
-- **Tab:** Visit any scrollable data region. Points do not add unnecessary tab stops.
+As in the key table.
 
 ## Accessibility
 
-Keep the table visible without JavaScript. Do not replace it with tooltips or color-only legends. The single series uses the approved red chart role `color.chart.series-2`, as requested by the owner for graphs; foreground typography retains its rose roles. Each SVG bar has a text label. A loading status must distinguish old data from a completed refresh.
-
-Column headers use `color.text.bright`; body row labels and numeric values use
-`color.text.default`. Row-header semantics remain native `th scope="row"` even
-though their typography matches body values. Do not apply the column-header color
-to every `th` indiscriminately.
+The table stays visible without JavaScript and is never replaced by tooltips
+or colour-only legends. Text keeps its rose roles; only the series is red. A
+loading status distinguishes old data from a completed refresh. Column
+headers use `color.text.bright`; row labels and values use
+`color.text.default`, while row headers stay native `th scope="row"`. Do not
+give every `th` the column-header colour.
 
 ## Portability
 
@@ -136,4 +134,5 @@ Follows the shared component defaults in `spec/portability.md` (section "Shared
 
 ## Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls, colour-only status, drag-only operations, hidden required
+instructions, stolen focus or an invented service success.
diff --git a/spec/components/checkbox.md b/spec/components/checkbox.md
index 88e7baa3a..addc92ff7 100644
--- a/spec/components/checkbox.md
+++ b/spec/components/checkbox.md
@@ -104,32 +104,29 @@ compact: true
 
 ## Purpose
 
-An independent yes/no choice, or several of them under one legend. A
-setting that takes effect immediately is a switch; one of several exclusive
-options is a radio group. A parent checkbox over a partly selected set shows
-the mixed state.
+An independent yes/no choice, or several under one legend. A setting that
+takes effect immediately is a switch; one of several exclusive options is a
+radio group. A parent checkbox over a partly selected set shows the mixed
+state.
 
 ## Anatomy
 
-The box is the native input itself with `appearance: none`, so it keeps
-native focus, form and keyboard behaviour. The ✓ and – glyphs are inline
-SVGs stacked over it in the same 16px cell. The option row is a `<label>`,
-at least 24px tall, which makes the text part of the target. A group is a
-`<fieldset>` with a `<legend>`.
+Parts as listed in the anatomy. Because the box is the native input, it keeps
+native focus, form and keyboard behaviour.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 16px box, 1px {color.border.control} on {color.surface.input}; text {color.text.default} | — |
-| hover | box background → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px around the box | the ring |
-| checked | box fills {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control} | the ✓ glyph; `checked` |
-| mixed | box fills {color.action.primary.bg}; – in {color.action.primary.text} | the – glyph; `indeterminate` / `aria-checked="mixed"` |
-| checked+focus-visible | the fill and a ring in {color.interaction.focus.ring-container} | glyph and ring |
-| checked+disabled | box {color.interaction.disabled.bg} with 1px {color.border.disabled}; ✓ and text in {color.text.disabled} | glyph; `disabled`; cursor: not-allowed |
-| disabled | box {color.interaction.disabled.bg} with 1px {color.border.disabled}; text {color.text.disabled} | `disabled`; cursor: not-allowed |
-| invalid | box border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
+| hover | box → {color.interaction.hover.bg}; checked box → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px around the box | the ring |
+| checked | fill {color.action.primary.bg}; ✓ in {color.action.primary.text}; border stays {color.border.control} | ✓ glyph; `checked` |
+| mixed | fill {color.action.primary.bg}; – in {color.action.primary.text} | – glyph; `indeterminate` / `aria-checked="mixed"` |
+| checked+focus-visible | the fill plus a {color.interaction.focus.ring-container} ring | glyph and ring |
+| checked+disabled | box {color.interaction.disabled.bg}, 1px {color.border.disabled}; ✓ and text {color.text.disabled} | glyph; `disabled`; cursor: not-allowed |
+| disabled | box {color.interaction.disabled.bg}, 1px {color.border.disabled}; text {color.text.disabled} | `disabled`; cursor: not-allowed |
+| invalid | 2px {color.status.danger.border} box border; message with the ✕ glyph | border 1 → 2px; glyph; `aria-invalid` |
 | required | `*` after the text or legend in {color.status.danger.text} plus visually hidden "required" | `required`; the mark |
 
 Precedence: disabled > invalid > checked > hover; focus-visible is always
@@ -137,30 +134,24 @@ drawn.
 
 ## Keyboard
 
-Native. Space toggles; Enter does nothing. Every checkbox in a group is a
-separate tab stop, unlike radios. A mixed parent becomes checked on the
-first Space and unchecked on the second, never mixed again by keyboard.
+Native; Enter does nothing. A mixed parent becomes checked on the first Space
+and unchecked on the second, never mixed again by keyboard.
 
 ## Accessibility
 
-The text is the label through the wrapping `<label>`; a group has its
-legend read before each option. `indeterminate` is a DOM property with no
-attribute, so the host mirrors it to `data-state-mixed` for styling and the
-state reads as "mixed" natively. A required group marks the legend, not
-every option, and validates on submit. Contrast: text 8.43:1, glyph 9.28:1
-on the fill, box edge 4.45:1 on the input surface and 4.33:1 against the
-panel when checked, ring 4.69:1, container ring 5.57:1 on the fill.
+A group's legend is read before each option. The mixed state reads as "mixed"
+natively. A required group marks the legend, not every option, and validates
+on submit. Text and glyphs meet 4.5:1; box edges and rings 3:1.
 
 ## Portability
 
-A square with a border and a fill plus two glyphs. Hosts that draw their own
-indicator set it square, 16px, and use the same fill and glyph colours; a
-host without a mixed indicator draws the dash itself or records the gap.
+Hosts that draw their own indicator make it square, 16px, with the same fill
+and glyph colours; a host without a mixed indicator draws the dash itself or
+records the gap.
 
 ## Non-examples
 
-Rounded or circular boxes. A tick drawn with a border trick or an icon
-font. A checked state shown by border colour alone with no glyph. A box
-smaller than 16px or a row shorter than 24px. The mixed state used as a
-third value. A checkbox that saves on change. Disabling by opacity. A div
-with `role="checkbox"`.
+Rounded or circular boxes. A tick drawn with a border trick or an icon font.
+A checked state shown by border colour alone. A box under 16px or a row under
+24px. The mixed state as a third value. Saving on change. Disabling by
+opacity. A div with `role="checkbox"`.
diff --git a/spec/components/chip.md b/spec/components/chip.md
index efed73022..8ad286746 100644
--- a/spec/components/chip.md
+++ b/spec/components/chip.md
@@ -40,7 +40,7 @@ tokens:
   root.bg-disabled: color.interaction.disabled.bg
   selected.bg: color.interaction.selection.bg
   selected.text: color.interaction.selection.text
-  selected.ring: color.interaction.focus.ring-container
+  selected.ring: color.interaction.focus.ring
   remove.text: color.text.muted
   remove.text-hover: color.text.bright
   remove.bg-hover: color.interaction.hover.bg-strong
@@ -49,7 +49,7 @@ stateTokens:
   hover: { fg: color.text.default, bg: color.interaction.hover.bg, border: color.border.control }
   focus-visible: { fg: color.text.default, bg: color.surface.default, border: color.border.control, outline: color.interaction.focus.ring }
   selected: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg }
-  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring-container }
+  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring }
 contrast:
   - { fg: color.text.muted, bg: color.surface.default, label: "remove glyph at rest" }
   - { fg: color.text.disabled, bg: color.interaction.disabled.bg, min: 3, kind: ui, state: disabled, label: "disabled chip text (exempt; house floor 3:1)" }
@@ -87,63 +87,51 @@ compact: false
 
 ## Purpose
 
-Represents one value the user can toggle or remove: a filter in a
-filterable table, a chosen item in a multiselect, a tag on a record. A chip
-that only informs is a badge; a chip that runs an action is a button.
+One value the user can toggle or remove: a filter, a multiselect choice, a
+record's tag. A chip that only informs is a badge; one that runs an action is
+a button.
 
 ## Anatomy
 
-A square control-height box with 1px {color.border.control} on
-{color.surface.default} and text in {color.text.default}. A filter chip is a
-button with a check gutter that shows ✓ while pressed. A removable chip is a
-span holding the label and a × button in {color.text.muted}. A static chip is
-a span with nothing else. When selected, the chip fills with
-{color.interaction.selection.bg} and its text becomes
-{color.interaction.selection.text}.
+Parts as listed in the anatomy; a static chip is a span with nothing else.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.default}; text {color.text.default} | — |
-| hover | background → {color.interaction.hover.bg}; the remove button → {color.interaction.hover.bg-strong} with {color.text.bright} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the chip or on the remove button | the ring |
-| selected | fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text}; the border takes the fill colour | `aria-pressed="true"`; the ✓ glyph |
-| selected+focus-visible | the fill and the ring in {color.interaction.focus.ring-container} | both visible at once |
-| disabled | text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no hover | `disabled`; cursor: not-allowed |
+| hover | background → {color.interaction.hover.bg}; remove button → {color.interaction.hover.bg-strong} with {color.text.bright} | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the chip or the remove button | the ring |
+| selected | fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text}; border takes the fill colour | `aria-pressed="true"`; the ✓ glyph |
+| selected+focus-visible | the fill and 1px dashed {color.interaction.focus.ring} at −2px | both visible at once |
+| disabled | {color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}; no hover | `disabled`; cursor: not-allowed |
 
-Pressing a filter chip uses {color.interaction.pressed.bg} for the duration
-of the press only. Precedence: disabled > selected > hover; focus-visible is
-always drawn.
+A filter chip shows {color.interaction.pressed.bg} only while pressed.
+Precedence: disabled > selected > hover; focus-visible is always drawn.
 
 ## Keyboard
 
-A filter chip is one tab stop that toggles on Space or Enter. A removable
-chip contributes only its remove button to the tab order; the label is not
-focusable. A static chip is never focusable. Inside a token field the field
-owns Backspace and the arrow keys.
+As in the key table. The label of a removable chip is not focusable; inside a
+token field the field owns Backspace and the arrow keys.
 
 ## Accessibility
 
-Filter chips expose `aria-pressed` and keep the same label in both states;
-the ✓ glyph is `aria-hidden`. The remove button is named "Remove <value>" so
-it is unambiguous out of context, and removing a chip moves focus to the
-next chip or the field. Contrast: text 8.43:1, border 4.33:1, selected text
-12.47:1 on the fill, ring 4.57:1 on the surface and 7.48:1 on the fill,
-remove glyph 5.66:1. Chips and remove buttons are at least 24×24 CSS pixels
-in `compact` density with 4px between neighbours.
+A filter chip keeps the same label in both states; the ✓ is `aria-hidden`.
+The remove button's name ("Remove <value>") is unambiguous out of context;
+removing a chip moves focus to the next chip or the field. Text meets 4.5:1;
+border and rings 3:1. Chips and remove buttons are at least 24×24 CSS pixels
+in `compact`, with 4px between neighbours.
 
 ## Portability
 
 A bordered box with a background and an outline; the remove control is an
-ordinary small button. Toolkits with a native toggle button take the fill
-for the checked state. Hosts without a glyph draw the check as a 2px inset
-rule at the inline start and record it.
+ordinary small button. Native toggle buttons take the fill for the checked
+state. A host without a glyph draws the check as a 2px inset rule at the
+inline start and records it.
 
 ## Non-examples
 
-Pill or rounded chips. A selected chip shown by a border colour alone
-without the fill and `aria-pressed`. A removable chip whose × has no name.
-A chip that is a link. A static tag that reacts to hover. Disabling by
-opacity. A chip whose label clips inside the border. A chip in caption
-type (that is a badge).
+Pill or rounded chips. A selected chip shown by border colour alone, without
+the fill and `aria-pressed`. A nameless ×. A chip that is a link. A static tag
+that reacts to hover. Disabling by opacity. A label clipped by the border. A
+chip in caption type (that is a badge).
diff --git a/spec/components/code-editor.md b/spec/components/code-editor.md
index 9aace92ed..8940cafc3 100644
--- a/spec/components/code-editor.md
+++ b/spec/components/code-editor.md
@@ -89,6 +89,8 @@ contrast:
   - { fg: color.code.syntax.tag, bg: color.code.bg, label: "tag" }
   - { fg: color.code.syntax.attribute, bg: color.code.bg, label: "attribute and escape" }
   - { fg: color.code.syntax.deprecated, bg: color.code.bg, label: "deprecated text" }
+  - { fg: color.code.syntax.comment, bg: color.code.selection-bg, min: 4.5, kind: ui, state: selected, label: "comment syntax decoration inside the selection", waiver: "syntax colour is decoration; the short-lived selection preserves syntax roles, and comment falls below the text floor on this recorded selection value" }
+  - { fg: color.code.syntax.type, bg: color.code.selection-bg, min: 4.5, kind: ui, state: selected, label: "type syntax decoration inside the selection", waiver: "syntax colour is decoration; the short-lived selection preserves syntax roles, and type falls below the text floor on this recorded selection value" }
   - { fg: color.code.syntax.string, bg: color.code.selection-bg, state: selected, label: "muted string text inside the selection" }
   - { fg: color.code.syntax.keyword, bg: color.code.selection-bg, state: selected, label: "keyword and tag text inside the selection (D-029)" }
   - { fg: color.code.syntax.property, bg: color.code.selection-bg, state: selected, label: "property, heading and invalid text inside the selection (D-029)" }
@@ -138,92 +140,71 @@ compact: false
 
 ## Purpose
 
-The reference rendering of source code: the surface, gutter, caret, current
-line, selection, bracket match, indent guides, rendered whitespace, fold
-markers and the seventeen monochrome syntax roles. It is the contract a
-real editor's theme API is mapped onto; this component never edits.
+The reference rendering of source code: the contract a real editor's theme
+API is mapped onto. It never edits.
 
 ## Anatomy
 
-Root `.code-editor`; parts `.code-editor-<part>`: `-pre` (the `<pre>`),
-`-line`, `-ln` (line number), `-text`, `-indent`, `-ws` (rendered
-whitespace), `-caret`, `-sel` (selection range), `-bracket`, `-fold`, and
-the gutter fold glyph `-fold-gutter`. Syntax spans are `.code-editor-<role>`:
-`-kw` keyword, `-str` string, `-cm` comment, `-num` number, `-const`
-constant, `-fn` function, `-var` variable, `-type` type, `-op` operator,
-`-punct` punctuation, `-prop` property, `-heading` heading, `-tag` tag,
-`-attr` attribute, `-esc` escape, `-invalid` invalid, `-deprecated`
-deprecated. Line numbers are {color.code.line-number} on
-{color.code.gutter-bg}, separated from the text by a 1px
-{color.code.gutter-rule}; indent guides are 1px {color.code.indent-guide};
-rendered whitespace is {color.code.whitespace}. Every colour is a role
-variable, so the profile switch on the specimen recolours the sample without
-touching the markup.
+Root `.code-editor`; parts `.code-editor-<part>`: `-pre`, `-line`, `-ln`
+(line number), `-text`, `-indent`, `-ws` (rendered whitespace), `-caret`,
+`-sel` (selection range), `-bracket`, `-fold`, `-fold-gutter`. Syntax spans
+are `.code-editor-<role>`: `-kw` keyword, `-str` string, `-cm` comment,
+`-num` number, `-const` constant, `-fn` function, `-var` variable, `-type`,
+`-op` operator, `-punct` punctuation, `-prop` property, `-heading`, `-tag`,
+`-attr` attribute, `-esc` escape, `-invalid`, `-deprecated`.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | code on {color.code.bg}; comments italic; invalid text wavy-underlined in {color.code.syntax.invalid}; deprecated text struck through | italic, wavy underline, line-through |
-| focus-visible | container ring 2px {color.interaction.focus.ring-container} at −3px; a 1px {color.code.caret} bar; the caret line filled {color.code.current-line} across gutter and text; its number in {color.code.line-number-active} | the ring; the caret bar |
-| selected | the range filled {color.code.selection-bg}; syntax colours kept | the range is announced through the host's selection; the fill spans line ends |
-| selected+container-inactive | the same range in {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no caret, no ring | lightness drop between the two fills |
-| current | both characters of the matched pair outlined 1px solid {color.code.bracket-match} | the outline is a box, not a colour change |
-| read-only | gutter drops to {color.surface.sunken} behind the same line numbers; the gutter rule becomes dotted; no caret is drawn | `aria-readonly`; dotted rule; missing caret |
+| focus-visible | 2px {color.interaction.focus.ring-container} ring at −3px; 1px {color.code.caret} bar; caret line filled {color.code.current-line} across gutter and text, its number {color.code.line-number-active} | the ring; the caret bar |
+| selected | range filled {color.code.selection-bg}; syntax colours kept | the host's selection is announced; the fill spans line ends |
+| selected+container-inactive | same range in {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no caret, no ring | lightness drop between the two fills |
+| current | both characters of the matched pair outlined 1px solid {color.code.bracket-match} | an outline box, not a colour change |
+| read-only | gutter on {color.surface.sunken}, same line numbers; dotted gutter rule; no caret | `aria-readonly`; dotted rule; no caret |
 
-Precedence: selection is drawn under the text, the current line under the
-selection, the bracket outline and the caret above everything. The caret
-never blinks in the reference; a host that blinks it keeps the user's
-cursor-blink setting and stops under reduced motion.
+Precedence: selection under the text, current line under the selection,
+bracket outline and caret above everything. The caret never blinks in the
+reference; a host that blinks it follows the user's cursor-blink setting and
+stops under reduced motion.
 
 ## Keyboard
 
-The host editor owns every binding. The theme states only what it draws in
-response: the caret and current line while focused, the selection fill for
-the host's selection, the outline for the host's bracket match. The reference
-markup is one Tab stop and, being read-only, consumes no key. A host that
-captures Tab for indentation must offer an escape route (Escape, then Tab) and
-announce it; the theme does not provide one.
+As in the key table. The theme only draws what the host's keys produce; the
+read-only reference consumes no key. A host that captures Tab offers Escape,
+then Tab, and announces it.
 
 ## Accessibility
 
-Syntax colour is decoration: no meaning is carried by colour alone. Invalid
-text has the wavy underline, deprecated text the line-through, comments the
-italic. Selection is a fill and focus is a ring, drawn together and never
-substituted for one another. Every syntax role reaches 4.5:1 on
-{color.code.bg} (the lowest is {color.code.syntax.comment} at 5.10:1) and
-{color.text.default} reaches 7.02:1 inside the selection fill. D-029 lifted
-the keyword, tag, property and heading reds so they stay at 4.5:1 or more
-inside {color.code.selection-bg} (4.51–4.52:1); comment and type text still
-drop below it there (4.13 and 4.24:1). That is a recorded limitation of the
-selection value and is not to be fixed by recolouring the tokens locally. The reference editor
-stays monochrome; a host that wants hue differentiation maps the opt-in
-{color.code.hued.string}, {color.code.hued.number}, {color.code.hued.type} and
-the other `code.hued.*` roles (D-030), which reach 5.74:1 or more inside the
-selection. Line
-numbers are metadata people read and use {color.text.subtle}, not a graphic
-colour; indent guides, rendered whitespace and the gutter rule are decorative.
-In forced-colours mode the caret, selection and bracket outline take the
-system `Highlight`, and the syntax spans keep their text styles.
+Syntax colour is decoration; meaning never rides on colour alone (italic
+comments, wavy-underlined invalid text, struck-through deprecated text).
+Selection is a fill and focus a ring, drawn together, never substituting for
+each other. Every syntax role meets 4.5:1 on {color.code.bg}. Inside
+{color.code.selection-bg}, D-029 keeps keyword, tag, property and heading at
+4.5:1; comment and type text fall below it, a recorded limitation of the
+selection value, never fixed by recolouring tokens locally. The reference
+stays monochrome; a host that wants hue maps {color.code.hued.string} and the
+other opt-in `code.hued.*` roles (D-030), which meet 4.5:1 inside the
+selection. Line numbers are text people read and meet the text floor; indent
+guides, rendered whitespace and the gutter rule are decorative. In forced
+colours the caret, selection and bracket outline take `Highlight`; syntax
+spans keep their text styles.
 
 ## Portability
 
-A real editor is a host surface: CodeMirror, Monaco, GtkSourceView,
-KSyntaxHighlighting, an `.icls` scheme or a terminal editor each expose a
-theme API, and the port maps the roles here onto that API without touching
-caret behaviour, keyboard handling or selection semantics. Where a host has no
-bracket-match outline it may use the bold weight and records the deviation;
-where a host cannot draw a 1px caret it uses its own caret in
-{color.code.caret}. The `heritage-ansi` and `extended` profiles change only
-role values; the mapping does not change.
+The port maps these roles onto the host's theme API without touching caret
+behaviour, keyboard handling or selection semantics. No bracket-match
+outline: bold weight, deviation recorded. No 1px caret: the host's own caret
+in {color.code.caret}. The `heritage-ansi` and `extended` profiles change
+role values only, never the mapping.
 
 ## Non-examples
 
-Rainbow syntax in the reference editor, or any hue outside the three bounded
-ones (the opt-in `code.hued.*` roles of D-030 carry them for hosts that want
-hue differentiation). A blinking or animated caret in the reference.
-A selection that recolours the text to white and loses the syntax roles. A
-current-line highlight brighter than the selection. A bracket match drawn as
-a background fill, which reads as a selection. Line numbers in the decorative
-`#7d1310`. A glow, gradient or rounded corner on the editor box. Removing the
-host's focus indicator without drawing the container ring.
+Rainbow syntax in the reference, or any hue beyond the three bounded ones
+(hosts opt into `code.hued.*`, D-030). A blinking or animated caret in the
+reference. A selection that turns text white and drops the syntax roles. A
+current line brighter than the selection. A bracket match as a background
+fill, which reads as a selection. Line numbers in a decorative colour. A glow,
+gradient or rounded corner on the box. Removing the host's focus indicator
+without drawing the container ring.
diff --git a/spec/components/combobox.md b/spec/components/combobox.md
index ef258e5fc..ca0029762 100644
--- a/spec/components/combobox.md
+++ b/spec/components/combobox.md
@@ -55,7 +55,7 @@ tokens:
   option.text-hover: color.text.link-hover
   option.bg-selected: color.interaction.selection.bg
   option.text-selected: color.interaction.selection.text
-  option.ring-selected: color.interaction.focus.ring-container
+  option.ring-selected: color.interaction.focus.ring
   group.text: color.text.subtle
   group.border: color.border.divider
   empty.text: color.text.muted
@@ -66,7 +66,7 @@ stateTokens:
   hover: { fg: color.text.link-hover, bg: color.interaction.hover.bg-strong }
   focus-visible: { fg: color.text.default, bg: color.surface.input, border: color.border.active, outline: color.interaction.focus.ring }
   open: { fg: color.text.default, bg: color.surface.raised, border: color.border.overlay }
-  selected: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring-container }
+  selected: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring }
   invalid: { fg: color.text.default, bg: color.surface.input, border: color.status.danger.border }
   invalid+focus-visible: { fg: color.text.default, bg: color.surface.input, border: color.status.danger.border, outline: color.interaction.focus.ring-container }
   no-results: { fg: color.text.muted, bg: color.surface.raised, border: color.border.overlay }
@@ -126,34 +126,30 @@ compact: false
 
 ## Purpose
 
-A text input whose value is completed from a list of suggestions. It is the
-right control when the set is large or open-ended (fonts, hosts, tags); a
-closed set of a dozen values is the select component. The demonstration
-renders the list open so every option state is visible without a script.
+A text input completed from a list of suggestions, for large or open-ended
+sets (fonts, hosts, tags); a closed set of a dozen values is `select`. The
+demonstration renders the list open so every option state shows without a
+script.
 
 ## Anatomy
 
-Label above the box; the box with the input and an optional toggle; the
-listbox directly below, on {color.surface.raised} behind a 1px
-{color.border.overlay}; options in {color.text.default}, an optional group
-heading in {color.text.subtle} above a {color.border.divider} rule; the empty
-message in {color.text.muted}; help and validation message below, as in the
-text field.
+Parts as listed in the anatomy; help and validation message behave as in
+`text-field`.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | 1px {color.border.control} on {color.surface.input}; list on {color.surface.raised} with a 1px {color.border.overlay} | — |
-| hover | box background → {color.interaction.hover.bg}; the hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover} | cursor: text on the box, default on the list |
-| focus-visible | box border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
-| open | list visible below the box; toggle glyph rotated 180° | `aria-expanded="true"`; the toggle glyph |
-| closed | list absent; the box unchanged | `aria-expanded="false"`; nothing below the box |
-| selected | the active option filled {color.interaction.selection.bg} with {color.interaction.selection.text} and a 1px dashed ring in {color.interaction.focus.ring-container} | `aria-selected="true"`; `aria-activedescendant`; the ring |
-| invalid | box border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
-| invalid+focus-visible | the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
-| disabled | text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; list never opens | `disabled`; cursor: not-allowed |
-| no-results | the list holds only the empty row in {color.text.muted}, italic | `aria-disabled` row; italic; a polite announcement of zero matches |
+| default | 1px {color.border.control} on {color.surface.input}; list on {color.surface.raised}, 1px {color.border.overlay} | — |
+| hover | box → {color.interaction.hover.bg}; hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover} | cursor: text on the box, default on the list |
+| focus-visible | box border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| open | list below the box; toggle glyph rotated 180° | `aria-expanded="true"`; toggle glyph |
+| closed | no list; box unchanged | `aria-expanded="false"`; nothing below the box |
+| selected | active option filled {color.interaction.selection.bg} with {color.interaction.selection.text}, 1px dashed {color.interaction.focus.ring} ring at −2px | `aria-selected="true"`; `aria-activedescendant`; the ring |
+| invalid | 2px {color.status.danger.border}; message with ✕ | border 1 → 2px; glyph; `aria-invalid` |
+| invalid+focus-visible | 2px danger border and {color.interaction.focus.ring-container} ring at −4px | double boundary |
+| disabled | {color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}; list never opens | `disabled`; cursor: not-allowed |
+| no-results | only the empty row, {color.text.muted} italic | `aria-disabled` row; italic; polite zero-match announcement |
 
 Precedence when several apply: disabled > invalid > selected > hover;
 focus-visible is always drawn on the box, and the selection ring on the
@@ -161,40 +157,28 @@ option.
 
 ## Keyboard
 
-DOM focus never leaves the input. Down and Up open the list and move the
-active option, which the input reports through `aria-activedescendant`; Enter
-accepts it; Escape closes the list and, when the list is already closed,
-clears the value. Alt+Down and Alt+Up open and close without changing the
-active option. Home and End move the caret. Tab closes the list and keeps
-whatever is typed. Typing filters the list on every keystroke; the number of
-matches is announced through a polite live region, not by re-reading the list.
+As in the key table. Typing filters on every keystroke; the match count is
+announced through a polite live region, not by re-reading the list.
 
 ## Accessibility
 
-The input carries `role="combobox"`, `aria-autocomplete="list"`,
-`aria-expanded`, `aria-controls` pointing at the listbox and, while an option
-is active, `aria-activedescendant`. The listbox has an accessible name
-(`aria-label` or `aria-labelledby` the field label); options are `role="option"`
-with `aria-selected` on the active one only; groups are `role="group"` with
-`aria-labelledby` their heading. The empty row is a disabled option so the
-list is never empty; the zero-match count is announced through the same polite
-live region as every other count. Contrast: option text 8.43:1 on the
-raised surface, selection text 12.47:1 on the selection fill, the selection ring
-7.48:1 on the fill, the list border 4.57:1 on the raised surface, group
-headings 4.96:1.
+The listbox is named (`aria-label`, or `aria-labelledby` the field label);
+options are `role="option"`, `aria-selected` on the active one only; groups
+are `role="group"` labelled by their heading. The empty row is a disabled
+option so the list is never empty. Text meets 4.5:1; list border and
+selection ring 3:1.
 
 ## Portability
 
-Everything is expressible with background, border and outline; the toggle
-rotation is a transform inside the motion budget. Toolkits with a native
-completion popup use it and map the option fill to the selection roles; the
-list border is the popover frame. Toolkits without `aria-activedescendant`
-move real focus to the option and record the deviation.
+Background, border and outline express everything; the toggle rotation is a
+transform inside the motion budget. A toolkit with a native completion popup
+uses it, mapping the option fill to the selection roles and the list border
+to the popover frame. Without `aria-activedescendant`, real focus moves to the
+option and the deviation is recorded.
 
 ## Non-examples
 
-A select restyled as a combobox. Moving DOM focus into the list on Down. A
-list that floats over the page with a shadow or a rounded frame. Highlighting
-the active option with a colour change of the text alone. A no-results state
-that silently shows the full list. Opening on hover. A list that slides or
-fades in for longer than 150 ms.
+A select restyled as a combobox. DOM focus moving into the list on Down. A
+list floating with a shadow or rounded frame. The active option marked by text
+colour alone. A no-results state that silently shows the full list. Opening
+on hover. A list that slides or fades in for longer than 150 ms.
diff --git a/spec/components/command-palette.md b/spec/components/command-palette.md
index 313ff3262..e9dadb705 100644
--- a/spec/components/command-palette.md
+++ b/spec/components/command-palette.md
@@ -31,6 +31,13 @@ tokens:
   secondary.text: color.text.muted
   control.bg: color.surface.input
   control.focus: color.interaction.focus.ring
+  button.bg: color.action.secondary.bg
+  button.text: color.action.secondary.text
+  button.border: color.action.secondary.border
+  button.bg-hover: color.action.secondary.hover-bg
+  button.bg-active: color.action.secondary.pressed-bg
+  button.border-active: color.border.active
+  button.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-border-width-emphasis: border.width.emphasis
   dependency.role-color-border-overlay: color.border.overlay
@@ -41,10 +48,10 @@ tokens:
   dependency.role-color-surface-overlay: color.surface.overlay
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
   dependency.role-space-16: space.16
-  dependency.role-space-2: space.2
   dependency.role-space-8: space.8
 stateTokens:
   default:
@@ -63,6 +70,12 @@ contrast:
     min: 3
     kind: ui
     label: Control boundary
+  - fg: color.action.secondary.text
+    bg: color.surface.default
+    label: Button label
+  - fg: color.action.secondary.text
+    bg: color.action.secondary.hover-bg
+    label: Button label on hover
 anatomy:
   - part: trigger
     description: Named native button opens the utility panel.
@@ -116,40 +129,37 @@ compact: false
 
 ## Purpose
 
-Find and invoke local commands from a compact square floating utility panel. One prompt filters dense rows with category labels. Results are caller-supplied links or bounded actions; no remote search occurs. The host may opt into Ctrl+K or Cmd+K.
+Finds and invokes local commands; navigation the site requires stays
+available outside the palette, without JavaScript.
 
 ## Anatomy
 
-- **trigger:** Named native button opens the utility panel.
-- **prompt:** Labelled combobox input retains focus while navigating results.
-- **results:** Listbox results include category and command text.
-- **dialog:** Native modal dialog provides containment and return.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | One prompt and dense command rows. | Visible names and categories. |
-| open | Square overlay surface and border. | Native modal dialog and active-descendant relationship. |
-| closed | Panel absent. | Opener remains focusable. |
-| focus-visible | Dashed input ring. | Input retains DOM focus while results change. |
-| no-results | Muted zero-results status. | Explicit result count and no active descendant. |
+| default | One prompt, dense command rows. Button controls are the secondary button (button.md); inputs keep the input look. | Visible names and categories. |
+| open | Square overlay surface and border. | Native modal dialog; active-descendant relationship. |
+| closed | Panel absent. | Opener stays focusable. |
+| focus-visible | Dashed input ring. | Input keeps DOM focus while results change. |
+| no-results | Muted zero-results status. | Explicit result count; no active descendant. |
 
 ## Keyboard
 
-- **Ctrl+K / Cmd+K:** Open when the host explicitly enables the shortcut.
-- **Up / Down:** Move the active result while retaining input focus.
-- **Enter:** Invoke the active enabled result and close.
-- **Escape:** Close and restore the opener.
-- **Tab / Shift+Tab:** Cycle through native modal controls.
+As in the key table. Shortcuts are never intercepted globally unless the host
+opts in, and one Escape closes the palette.
 
 ## Accessibility
 
-Combine native modal focus behavior with the editable combobox pattern. Result names include their category and command text; selection uses the approved selected roles. Escape closes once and restores focus. Required site navigation remains available outside the palette without JavaScript. Do not globally intercept shortcuts unless the host opts in.
+Each result's name includes its category and command text. Selection uses the
+approved selected roles.
 
 ## Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 ## Non-examples
 
diff --git a/spec/components/compact-dashboard.md b/spec/components/compact-dashboard.md
index 255d9ffc5..c83f55451 100644
--- a/spec/components/compact-dashboard.md
+++ b/spec/components/compact-dashboard.md
@@ -28,17 +28,22 @@ tokens:
   root.border: color.border.control
   heading.text: color.text.bright
   secondary.text: color.text.muted
-  control.bg: color.surface.input
+  control.bg: color.action.secondary.bg
+  control.text: color.action.secondary.text
+  control.border: color.action.secondary.border
+  control.bg-hover: color.action.secondary.hover-bg
+  control.bg-active: color.action.secondary.pressed-bg
+  control.border-active: color.border.active
   control.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-color-border-divider: color.border.divider
   dependency.role-color-surface-chrome: color.surface.chrome
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-font-size-h2: font.size.h2
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
-  dependency.role-space-2: space.2
   dependency.role-space-8: space.8
 stateTokens:
   default:
@@ -57,6 +62,12 @@ contrast:
     min: 3
     kind: ui
     label: Control boundary
+  - fg: color.action.secondary.text
+    bg: color.surface.default
+    label: Button label
+  - fg: color.action.secondary.text
+    bg: color.action.secondary.hover-bg
+    label: Button label on hover
 anatomy:
   - part: metrics
     description: Terms and values pair each metric name with its number.
@@ -104,35 +115,36 @@ compact: false
 
 ## Purpose
 
-Compose a small operational overview from named metrics, a complete chart and a records table. All figures are caller data. Synthetic fixtures are labelled; the component does not fetch data or infer business health.
+A small operational overview of caller data; it fetches nothing and infers no
+business health.
 
 ## Anatomy
 
-- **metrics:** Terms and values pair each metric name with its number.
-- **activity:** Chart retains its full textual data table.
-- **records:** Native rows include named actions and explicit status words.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Square metric panels and readable tables. | Metric names, exact values and status text. |
-| loading | Busy boundary with existing content retained. | aria-busy and host-provided loading status. |
-| empty | Explicit absence of records. | Empty message; metric zero differs from unknown. |
+| default | Square metric panels, readable tables. Its buttons are the secondary button (button.md). | Metric names, exact values, status text. |
+| loading | Busy boundary; existing content kept. | `aria-busy` and host-provided loading status. |
+| empty | Explicit absence of records. | Empty message; a zero metric differs from an unknown one. |
 | focus-visible | Dashed action outline. | Native keyboard focus. |
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Visit record actions and any scrollable data region.
-- **Enter / Space:** Request the chosen record through an event.
+As in the key table; nothing else is bound.
 
 ## Accessibility
 
-Keep metrics as term/value pairs, tables labelled and all chart data visible. Do not use a color-only health score. Busy status does not manufacture a completed refresh. The host decides how unknown metrics are described, rather than silently displaying zero.
+Metrics stay term/value pairs, tables are labelled and all chart data stays
+visible. No colour-only health score. Busy status never implies a completed
+refresh. The host words unknown metrics; never show them silently as zero.
 
 ## Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 ## Non-examples
 
diff --git a/spec/components/data-table.md b/spec/components/data-table.md
index 73e60a77f..b0b6d10a1 100644
--- a/spec/components/data-table.md
+++ b/spec/components/data-table.md
@@ -43,7 +43,7 @@ tokens:
   row.ring: color.interaction.focus.ring
   selected.bg: color.interaction.selection.bg
   selected.text: color.interaction.selection.text
-  selected.ring: color.interaction.focus.ring-container
+  selected.ring: color.interaction.focus.ring
   checkbox.bg: color.surface.input
   checkbox.border: color.border.control
   checkbox.checked-bg: color.action.primary.bg
@@ -57,7 +57,7 @@ stateTokens:
   hover: { fg: color.text.default, bg: color.interaction.hover.bg }
   focus-visible: { fg: color.text.default, bg: color.surface.default, outline: color.interaction.focus.ring }
   selected: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg }
-  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring-container }
+  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring }
   sorted: { fg: color.text.bright, bg: color.surface.default }
   mixed: { fg: color.action.primary.text, bg: color.action.primary.bg }
   empty: { fg: color.text.muted, bg: color.surface.default }
@@ -116,76 +116,59 @@ compact: false
 
 ## Purpose
 
-A table the user works in: selects rows, sorts, resizes columns. The
-plain table is for reading; this component adds the controls and the
-keyboard model. It stays a native table so its cells keep their header
-associations; hosts that need cell-level navigation promote it to a grid
-and record the change.
+A table the user works in; the plain `table` is for reading. It stays a
+native table so cells keep their header associations; a host that needs
+cell-level navigation promotes it to a grid and records the change.
 
 ## Anatomy
 
-The table component's structure with the same rule, dividers and fills,
-plus: a selection column whose header holds a select-all with
-`aria-checked` true, false or mixed, drawn on {color.action.primary.bg} with
-the ✓ or – glyph in {color.action.primary.text}; native checkboxes in each
-row on {color.surface.input} with a 1px {color.border.control} boundary;
-rows that can take focus; and in the resizable variant a 1px handle in
-{color.border.default} at the inline end of each header that turns
-{color.border.active} under the pointer.
+The `table` structure, rule, dividers and fills, plus the parts listed in
+the anatomy; row checkboxes have a 1px {color.border.control} boundary.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | rows on {color.surface.default}; header rule 1px {color.border.strong} | — |
-| hover | row background → {color.interaction.hover.bg}; a resize handle → {color.border.active} | cursor: default on rows, col-resize on handles |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px around the focused row or control | the ring |
-| selected | row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; the row checkbox checked | `aria-selected="true"`; the checked box |
-| selected+focus-visible | the fill and the ring in {color.interaction.focus.ring-container} | both visible at once |
+| hover | row → {color.interaction.hover.bg}; a resize handle → {color.border.active} | cursor: default on rows, col-resize on handles |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px around the focused row or control | the ring |
+| selected | row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text}; row checkbox checked | `aria-selected="true"`; the checked box |
+| selected+focus-visible | the fill and 1px dashed {color.interaction.focus.ring} at −2px | both visible at once |
 | sorted | ▲ or ▼ in {color.text.bright} on the sorted header | `aria-sort`; the glyph |
-| mixed | the select-all on {color.action.primary.bg} with the – glyph | `aria-checked="mixed"`; the glyph |
-| empty | one full-width cell in {color.text.muted}: "No rows match."; the header and controls stay | the message text |
+| mixed | select-all on {color.action.primary.bg} with the – glyph | `aria-checked="mixed"`; the glyph |
+| empty | one full-width cell in {color.text.muted}: "No rows match."; header and controls stay | the message text |
 | loading | one full-width cell with the static `⋯` glyph; the header stays | `aria-busy="true"`; the glyph; no animation |
 
 Precedence: loading > empty; selected > hover; focus-visible is always
-drawn. Selection is a fill; focus is a ring; they never borrow each other's
-form.
+drawn. Selection is a fill, focus a ring; neither borrows the other's form.
 
 ## Keyboard
 
-Header controls first: the select-all, then each sort button. Rows use a
-roving tabindex so the body costs one tab stop; Up and Down move, Space
-toggles, Shift extends, Ctrl+A selects all. Controls inside the focused row
-are reached with Tab and left with Shift+Tab. Column widths are set from a
-header menu or by dragging the handle; the handle itself is never a tab
-stop.
+Controls inside the focused row are reached with Tab and left with
+Shift+Tab. Column widths come from a header menu or the handle, which is
+never a tab stop.
 
 ## Accessibility
 
-Every row checkbox is labelled by the row's first data cell
-(`aria-labelledby`); the select-all is named "Select all rows" and exposes
-`aria-checked="mixed"` when only some are selected. `aria-selected` on the
-row mirrors its checkbox. Sorted headers carry `aria-sort`; the table
-carries `aria-busy` while loading; the count of selected rows is announced
-through a live region owned by the surrounding toolbar. Contrast: text
-8.43:1, header 10.10:1, selected text 12.47:1 on the fill, ring 4.57:1 on the
-surface and 7.48:1 on the fill, checkbox boundary 4.33:1, check glyph 9.28:1
-on the primary fill. Checkboxes and handles are at least 24 CSS pixels tall
-in `compact` density.
+Each row checkbox is labelled by the row's first data cell
+(`aria-labelledby`); the select-all is named "Select all rows".
+`aria-selected` on the row mirrors its checkbox. The selected-row count is
+announced through a live region owned by the surrounding toolbar. Text meets
+4.5:1; boundaries and rings 3:1. Checkboxes and handles are at least 24 CSS
+pixels tall in `compact`.
 
 ## Portability
 
-The table component's drawing plus a checkbox column and a header
-checkbox; the handle is a 1px rule. Toolkits with native table views map
-row selection to their selection model and the mixed state to their
-tristate checkbox. Hosts without row focus fall back to the checkbox as the
-only row control and record it.
+The `table` drawing plus a checkbox column and header checkbox; the handle
+is a 1px rule. Native table views map row selection to their selection model
+and mixed to their tristate checkbox. A host without row focus keeps the
+checkbox as the only row control and records it.
 
 ## Non-examples
 
-A grid role on a table that is not navigated cell by cell. Zebra stripes.
-A select-all that is a native checkbox with a script-only indeterminate
-state and no `aria-checked`. Rows selected by clicking anywhere with no
-checkbox alternative. A selected row shown by a border alone. A resize
-handle that is a tab stop. An animated loading skeleton. Rounded checkboxes.
-Text truncated with no full-value affordance.
+A grid role on a table not navigated cell by cell. Zebra stripes. A
+select-all that is a native checkbox with a script-only indeterminate state
+and no `aria-checked`.
+Row selection by click with no checkbox alternative. A selected row shown by
+a border alone. A resize handle as a tab stop. An animated loading skeleton.
+Rounded checkboxes. Truncated text with no full-value affordance.
diff --git a/spec/components/date-picker.md b/spec/components/date-picker.md
index 7ea7b9387..00da6694e 100644
--- a/spec/components/date-picker.md
+++ b/spec/components/date-picker.md
@@ -176,40 +176,52 @@ compact: false
 
 ## Purpose
 
-Choose a date by explicit text entry or a themed calendar. A range is two separately labeled date controls. D-025 requires theme-owned web controls rather than browser popup styling.
+Choose a date by typing or from a themed calendar; a range is two
+separately labelled date controls. D-025: theme-owned web controls, not
+browser popup styling.
 
 ## Anatomy
 
-A label, editor, calendar trigger, format hint and validation message. The native date input remains the successful form control and owns its value, defaults and constraints. It is hidden only after enhancement.
+A label, editor, calendar trigger, format hint and validation message. The
+native date input stays the successful form control, owns value, defaults
+and constraints, and is hidden only after enhancement.
 
 ## States
 
-| State | Treatment |
-| --- | --- |
-| default | Input surface, default text and control border. |
-| hover | The declared hover fill. |
-| focus-visible | Active border and the canonical focus ring. |
-| invalid | Danger border and a linked message. |
-| invalid+focus-visible | Danger border plus the container focus ring. |
-| disabled | Disabled colors; editor and calendar actions unavailable. |
-| read-only | Readable canvas text and bottom edge; calendar action unavailable. |
-
-Use the declared state tokens: default input surface and control border; hover fill; the canonical focus ring; danger border and message for invalid input; disabled colors and unavailable actions. Read-only values remain readable and cannot open a picker or change through step buttons. The date read-only treatment retains the canvas surface and unobtrusive bottom edge.
+| State | Visual | Non-colour channel |
+| --- | --- | --- |
+| default | {color.text.default} on {color.surface.input}, 1px {color.border.control} | — |
+| hover | background → {color.interaction.hover.bg} | hover-capable pointers only |
+| focus-visible | border → {color.border.active}; the canonical focus ring | the ring |
+| invalid | 2px {color.status.danger.border}; a linked message | border 1 → 2px; ✕ glyph; `aria-invalid` |
+| invalid+focus-visible | the danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
+| disabled | {color.text.disabled} on {color.interaction.disabled.bg}, border {color.border.disabled}; editor and calendar actions unavailable | `disabled`; cursor: not-allowed |
+| read-only | readable text on {color.surface.canvas}, no box, 1px dotted {color.border.divider} bottom edge; the calendar cannot open | `readonly`; dotted edge |
 
 ## Keyboard
 
-Alt+Down opens the calendar. Arrows move by a day or week, Home/End reach week boundaries, and PageUp/PageDown change months. Enter/Space chooses a focused date. Escape closes and restores editor focus. Tab leaves normally; the calendar is a nonmodal popup.
+Arrows move by a day or a week. Tab leaves normally; the calendar is a
+nonmodal popup.
 
 ## Accessibility
 
-The visible editor receives the original label, descriptions, required state and error state. Format hints are always available. Native min, max, step and required constraints remain authoritative. Invalid entry focuses the visible editor and exposes a theme-owned message. Calendar selection is a fill; keyboard focus is a separate ring. Disabled dates cannot be selected. The range validates that its end is not before its start. Form reset restores the native defaults.
-
-Automated evidence records its actual browser, states and limitations; it is not a manual screen-reader acceptance.
+The visible editor receives the original label, descriptions, required and
+error state. Format hints are always available. Native min, max, step and
+required stay authoritative. Invalid entry focuses the visible editor and
+shows a theme-owned message. Calendar selection is a fill, focus a separate
+ring. Disabled dates cannot be chosen. A range rejects an end before its
+start. Form reset restores the native defaults. Automated evidence records
+its browser, states and limits and is not a manual screen-reader acceptance.
 
 ## Portability
 
-The package and complete copy distribution include the renderer. The public control enhancement applies the same behavior to existing native markup. The no-JavaScript fallback and non-web platform mappings remain native.
+The package and the complete copy distribution include the renderer; the
+public control enhancement applies it to existing native markup. Without
+JavaScript, and on non-web platforms, the control stays native.
 
 ## Non-examples
 
-An unthemed host popup presented as fully themed. A second named input that duplicates form values. Discarding native constraints, labels or reset behavior. Literal colors, rounded corners, or a selected fill with no distinguishable focus boundary.
+An unthemed host popup presented as themed. A second named input
+duplicating form values. Dropping native constraints, labels or reset.
+Literal colours, rounded corners, or a selected fill with no distinct focus
+boundary.
diff --git a/spec/components/description-list.md b/spec/components/description-list.md
index 703027f7a..90a04d434 100644
--- a/spec/components/description-list.md
+++ b/spec/components/description-list.md
@@ -29,9 +29,9 @@ tokens:
   control.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-color-border-divider: color.border.divider
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
-  dependency.role-space-2: space.2
   dependency.role-space-4: space.4
   dependency.role-space-8: space.8
 stateTokens:
@@ -93,32 +93,32 @@ compact: false
 
 ## Purpose
 
-Present named facts as semantic terms and descriptions. Terms remain adjacent to their values in source order. A narrow view stacks the term above its value.
+Named facts as term and value pairs.
 
 ## Anatomy
 
-- **list:** Native description list.
-- **term:** Concise name for a fact.
-- **value:** Text, links or semantic inline content.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Two aligned columns. | Native term and description relationships. |
 | stacked | One column at narrow widths. | Each term immediately precedes its value. |
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Visit links in values. Plain facts are not tab stops.
+As in the key table.
 
 ## Accessibility
 
-Use dt and dd rather than a grid of unrelated paragraphs. Long values wrap without clipping. Preserve meaningful link text and do not make every value keyboard focusable.
+Use `dt` and `dd`, not a grid of unrelated paragraphs. Long values wrap
+without clipping. Keep link text meaningful.
 
 ## Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 ## Non-examples
 
diff --git a/spec/components/diagnostics.md b/spec/components/diagnostics.md
index 83176b6d0..5d1c29635 100644
--- a/spec/components/diagnostics.md
+++ b/spec/components/diagnostics.md
@@ -56,7 +56,7 @@ tokens:
   row.ring: color.interaction.focus.ring
   row.bg-selected: color.interaction.selection.bg
   row.text-selected: color.interaction.selection.text
-  row.ring-selected: color.interaction.focus.ring-container
+  row.ring-selected: color.interaction.focus.ring
   header.text: color.text.bright
   status.text: color.status.danger.text
   empty.text: color.text.muted
@@ -66,7 +66,7 @@ stateTokens:
   hover: { fg: color.text.default, bg: color.interaction.hover.bg }
   focus-visible: { fg: color.text.default, bg: color.surface.default, outline: color.interaction.focus.ring }
   selected: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg }
-  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring-container }
+  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring }
   error: { fg: color.status.danger.text, bg: color.surface.default }
   empty: { fg: color.text.muted, bg: color.surface.default }
 contrast:
@@ -142,20 +142,19 @@ compact: false
 
 ## Purpose
 
-How problems appear on code and in the list that indexes them. Six kinds are
-distinguished by pattern and glyph as well as colour: error, warning, info,
-hint, unused and deprecated. The panel is the keyboard route to every marker.
+How problems appear on code and in the list that indexes them. Six kinds,
+each told apart by pattern and glyph as well as colour. The panel is the
+keyboard route to every marker.
 
 ## Anatomy
 
-Root `.diagnostics` with the variant class `.diagnostics-inline` or
-`.diagnostics-panel`. Inline parts: `.diagnostics-code` (the `<pre>`),
-`-line`, `-ln`, `-text`, `-mark` (the stripe cell), and the ranges
-`.diagnostics-error`, `-warning`, `-info`, `-hint`, `-unused`, `-deprecated`;
-`.diagnostics-line-error` marks the row filled {color.diagnostic.error.bg};
-`.diagnostics-target` is the range that belongs to the selected row. Panel
-parts: `-header`, `-title`, `-count`, `-status`, `-list`, `-row`, `-glyph`
-(with `-glyph-error` and so on), `-message`, `-loc`, `-rule`, `-empty`.
+Root `.diagnostics` with `.diagnostics-inline` or `.diagnostics-panel`.
+Inline: `.diagnostics-code` (the `<pre>`), `-line`, `-ln`, `-text`, `-mark`
+(the stripe cell) and the ranges `.diagnostics-error`, `-warning`, `-info`,
+`-hint`, `-unused`, `-deprecated`; `.diagnostics-line-error` is the filled
+row; `.diagnostics-target` is the range of the selected row. Panel:
+`-header`, `-title`, `-count`, `-status`, `-list`, `-row`, `-glyph` (with
+`-glyph-error` and so on), `-message`, `-loc`, `-rule`, `-empty`.
 Patterns: error and warning wavy, info and hint dotted, unused dotted in
 {color.diagnostic.unused.text}, deprecated line-through in
 {color.code.syntax.deprecated}. Glyphs: `✕` error in
@@ -168,54 +167,43 @@ The stripe mark repeats the glyph in the stripe colour
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | ranges decorated as above on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default} with 1px {color.border.divider} between them | underline pattern; glyph |
-| hover | panel row background → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface) | cursor: default on rows |
-| focus-visible | the active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: the container ring 2px {color.interaction.focus.ring-container} at −3px | the ring |
+| default | ranges decorated on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default}, 1px {color.border.divider} between | underline pattern; glyph |
+| hover | panel row → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface) | cursor: default on rows |
+| focus-visible | active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: 2px {color.interaction.focus.ring-container} at −3px | the ring |
 | selected | row filled {color.interaction.selection.bg}, text and glyph {color.interaction.selection.text}; the matching inline range filled {color.code.selection-bg} under its underline | `aria-selected`; the glyph stays; the fill spans the row |
-| selected+focus-visible | the selection fill and a 1px dashed ring in {color.interaction.focus.ring-container} | both at once |
-| error | the provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the inline stripe shows the same `✕` at its top | glyph; live announcement |
-| empty | no problems: rows and stripe marks hidden; `✓ No problems` in {color.text.muted} with the glyph in {color.status.success.text}; inline decorations removed | glyph; the absence of decoration |
+| selected+focus-visible | the selection fill and 1px dashed {color.interaction.focus.ring} at −2px | both at once |
+| error | provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the stripe shows the same `✕` at its top | glyph; live announcement |
+| empty | rows, stripe marks and inline decorations removed; `✓ No problems` in {color.text.muted}, glyph in {color.status.success.text} | glyph; the absence of decoration |
 
 Precedence: selected > hover; focus-visible is drawn on top. A selected row
-recolours its glyph to the on-selection text so the shape, not the hue,
+recolours its glyph to the on-selection text, so the shape, not the hue,
 carries the severity.
 
 ## Keyboard
 
-The panel follows the APG listbox pattern with `aria-activedescendant`:
-the list is one Tab stop, Up and Down move the active row, Home and End jump,
-type-ahead matches message text, Enter opens the location. Selection follows
-focus. Inline markers add no keys; next-problem and previous-problem
-navigation and the hover card are host bindings and host surfaces.
+As in the key table; next and previous problem and the hover card belong to
+the host.
 
 ## Accessibility
 
-Never colour-only: every severity has its underline pattern in code and its
-glyph in the panel, and the glyph is part of the option's accessible name
-("Error: frmae is not defined, title.js line 6"). The error row background
-is an addition to the wavy underline, not a replacement. Contrast:
-{color.diagnostic.error.text} reaches 4.88:1 on the error row and 5.26:1 on
-the panel; every underline reaches 3:1 on its actual background including
-the selected range (the error underline measures 3.81:1 on the code
-selection fill); {color.diagnostic.unused.text} reaches 5.81:1
-so unused code is still readable. `aria-selected` and `aria-activedescendant`
-carry the state; the status line is `role=status`, announced once. In
-forced-colours mode the underline patterns persist because they are
-`text-decoration`, not backgrounds.
+Never colour-only: the underline pattern in code, the glyph in the panel, and
+the glyph is part of the option's accessible name ("Error: frmae is not
+defined, title.js line 6"). The error row fill adds to the wavy underline,
+never replaces it. Text, including unused code, meets 4.5:1; every underline
+meets 3:1 on its actual background, the selected range included. The status
+line is announced once. In forced-colours mode the patterns persist because
+they are `text-decoration`, not backgrounds.
 
 ## Portability
 
-Underline styles are native in Pango, Qt, JetBrains and most terminal
-emulators; where wavy is unavailable the port uses a plain underline plus the
-glyph and records the deviation. Hosts that draw their own overview ruler map
-the stripe colours; hosts without one omit the stripe and keep the glyphs.
-The listbox maps to any single-selection list widget.
+Where wavy is unavailable the port uses a plain underline plus the glyph and
+records the deviation. Hosts with their own overview ruler map the stripe
+colours; hosts without one omit the stripe and keep the glyphs.
 
 ## Non-examples
 
-Red-only errors without the `✕` glyph or the wavy pattern. A wavy underline
-for every severity, which leaves the pattern meaningless. Purple or cyan for
-info and hint. A hover on a panel row that changes only the text colour. A
-selected row whose glyph keeps its severity colour on the red fill (2.47:1).
-A panel row with a rounded highlight or a left accent bar instead of the fill.
-Removing the error line background to "calm" the editor.
+Red-only errors without `✕` or the wavy pattern. Wavy for every severity.
+Purple or cyan for info and hint. A row hover that changes only text colour.
+A selected row whose glyph keeps its severity colour on the fill. A rounded
+highlight or left accent bar instead of the row fill. Removing the error line
+fill to "calm" the editor.
diff --git a/spec/components/dialog.md b/spec/components/dialog.md
index 341de0bd9..6e299005d 100644
--- a/spec/components/dialog.md
+++ b/spec/components/dialog.md
@@ -109,21 +109,16 @@ compact: true
 
 ## Purpose
 
-A question or a small task that must be answered before the page continues:
-confirm a destructive action, name a new profile, sign in again. It takes
-the whole screen's attention, so it is short, has a clear title, and always
-offers a way out. The demonstration renders the dialog open in flow, with a
-wrapper standing in for the backdrop; a host always uses `showModal()`.
+A question or small task the page cannot continue without: confirm a
+destructive action, name a new profile, sign in again. It takes the whole
+screen's attention, so it is short, clearly titled and always offers a way
+out.
 
 ## Anatomy
 
-The backdrop, {color.surface.backdrop} over the page; the dialog on
-{color.surface.overlay} behind a 1px {color.border.overlay}; the header with
-the title in {color.text.bright} and Close; the body in {color.text.default};
-the actions row. Confirmation semantics do not prescribe action tone (D-015):
-ordinary confirmations use primary. A destructive confirmation uses the filled destructive button,
-{color.action.destructive.filled-bg} with {color.action.destructive.filled-text};
-the form dialog holds a labelled text field on {color.surface.input}.
+Confirmations take no fixed tone (D-015): an ordinary one uses primary, a
+destructive one the filled destructive button. The form variant holds a
+labelled text field on {color.surface.input}.
 
 ## States
 
@@ -131,47 +126,39 @@ the form dialog holds a labelled text field on {color.surface.input}.
 | --- | --- | --- |
 | default | the dialog open on its backdrop | `open`; the page behind is inert |
 | open | as default; opacity 0 → 1 within 150 ms on capable hosts | `open`; focus inside the dialog |
-| closed | nothing: the dialog and its backdrop are absent | no `open`; focus back on the opener |
-| focus-trapped | the dialog itself carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles | Tab never leaves; the note text |
-| hover | Close background → {color.action.tertiary.hover-bg}; other buttons take their tone's hover | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive uses {color.action.destructive.filled-text} (D-015) | the ring |
-| reduced-motion | no opacity transition; the dialog is simply present or absent | `prefers-reduced-motion` |
+| closed | dialog and backdrop absent | no `open`; focus back on the opener |
+| focus-trapped | when it holds focus, the dialog carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px; the note says Tab cycles | Tab never leaves; the note text |
+| hover | Close → {color.action.tertiary.hover-bg}; other buttons take their tone's hover | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the focused control; primary uses {color.interaction.focus.ring-container}, destructive {color.action.destructive.filled-text} (D-015) | the ring |
+| reduced-motion | no opacity transition; present or absent | `prefers-reduced-motion` |
 
 A dialog is never disabled; a busy dialog disables its confirm button and
 shows the ⋯ glyph on it.
 
 ## Keyboard
 
-Tab and Shift+Tab cycle inside the dialog; nothing behind it is reachable.
-Escape closes and cancels, and focus returns to the opener. Enter submits a
-form dialog; elsewhere it only activates the focused button, so a
-destructive confirm is never triggered by Enter on the dialog itself. On
-open, focus goes to the first focusable element, or to the dialog when the
-first element is destructive; on close, back to the opener.
+As in the key table. Enter on the dialog itself never triggers a destructive
+confirm. On open, focus goes to the first focusable element, or to the
+dialog when that element is destructive.
 
 ## Accessibility
 
-The dialog is named by its title through `aria-labelledby` and described by
-its first paragraph through `aria-describedby`. Confirmations use
-`role="alertdialog"`. `showModal()` makes the rest of the page inert and
-supplies the top layer; the theme never re-implements the trap on a
-non-modal dialog. The backdrop is decorative and not a click target for
-cancel unless Close is also present. Contrast: text 7.92:1 and title 9.49:1
-on the overlay surface, the overlay border 4.30:1, secondary buttons 6.84:1
-on hover, destructive confirm text 4.58:1 on its fill, the container ring
-9.49:1.
+Title and first paragraph link through `aria-labelledby` and
+`aria-describedby`. The theme never re-implements the trap
+on a non-modal dialog. The backdrop is decorative and cancels on click only
+when Close is also present. Text meets 4.5:1; the overlay border and rings
+3:1.
 
 ## Portability
 
-A box, a border, a dimmed backdrop and the button tones. Toolkits with a
-native modal window use it with the overlay border on the frame and record
-that the backdrop is the host's. Toolkits without a top layer draw the
-backdrop as a full-window overlay under the dialog.
+A toolkit with a native modal window uses it with the overlay border on the
+frame and records that the backdrop is the host's; one without a top layer
+draws the backdrop as a full-window overlay under the dialog.
 
 ## Non-examples
 
-A glowing or shadowed card. Rounded corners. A dialog that slides or scales
-in. `<dialog>` shown with `show()` and a hand-written focus trap. A dialog
-with no title, or with the title only in the accessible name. A destructive
-confirm as the default Enter action. A backdrop that closes the dialog with
-no Close button. A dialog stacked on a dialog.
+A glowing or shadowed card. Rounded corners. Sliding or scaling in.
+`<dialog>` shown with `show()` and a hand-written trap. No title, or the
+title only in the accessible name. A destructive confirm as the default
+Enter action. A backdrop that closes the dialog with no Close button. A
+dialog stacked on a dialog.
diff --git a/spec/components/diff-view.md b/spec/components/diff-view.md
index 910b2564c..95fecc314 100644
--- a/spec/components/diff-view.md
+++ b/spec/components/diff-view.md
@@ -58,7 +58,7 @@ tokens:
   row.ring: color.interaction.focus.ring
   row.bg-selected: color.interaction.selection.bg
   row.text-selected: color.interaction.selection.text
-  row.ring-selected: color.interaction.focus.ring-container
+  row.ring-selected: color.interaction.focus.ring
 stateTokens:
   default: { fg: color.text.default, bg: color.code.bg, border: color.border.control }
   hover: { fg: color.text.default, bg: color.interaction.hover.bg }
@@ -86,7 +86,7 @@ contrast:
   - { fg: color.interaction.focus.ring, bg: color.diff.added.bg, min: 3, kind: ui, state: focus-visible, label: "ring on an added row" }
   - { fg: color.interaction.focus.ring, bg: color.diff.removed.bg, min: 3, kind: ui, state: focus-visible, label: "ring on a removed row" }
   - { fg: color.interaction.focus.ring, bg: color.diff.modified.bg, min: 3, kind: ui, state: focus-visible, label: "ring on a modified row" }
-  - { fg: color.interaction.focus.ring-container, bg: color.interaction.selection.bg, min: 3, kind: ui, state: focus-visible, label: "ring on the selected row" }
+  - { fg: color.interaction.focus.ring, bg: color.interaction.selection.bg, min: 3, kind: ui, state: focus-visible, label: "ring on the selected row" }
   - { fg: color.text.link, bg: color.diff.header-bg, label: "fold button text" }
 anatomy:
   - part: root
@@ -131,83 +131,67 @@ compact: false
 
 ## Purpose
 
-How changed text is shown: line rows with a fill and a textual marker,
-word-level changes as underlines that leave text contrast untouched, hunk
-headers, collapsible unchanged regions, and merge conflicts in a double
-border. The `+`, `−` and `~` markers are content, present in every state and
-every profile.
+The `+`, `−` and `~` markers are content, present in every state and every
+profile; word-level underlines leave the text contrast untouched.
 
 ## Anatomy
 
-Root `.diff-view` (the table) with the variant class `.diff-view-unified`,
-`-split`, `-word-level` or `-conflict`. Row classes: `.diff-view-row`,
-`-row-context`, `-row-added`, `-row-removed`, `-row-modified`, `-row-hunk`,
-`-row-fold`, `-row-conflict` with `-row-conflict-start`, `-row-conflict-mid`
-and `-row-conflict-end` for the marker lines. Cells: `.diff-view-ln`,
-`-marker`, `-text`, `-fold-cell`, and `-range` for the `@@` span; the split
-variant adds `-side-old` and `-side-new` on cells and, on a `-row-pair`,
-`-cell-removed` and `-cell-added` per side (an empty `-cell-blank` faces an
-added line); the conflict variant adds `-row-ours` and `-row-theirs`. Word-level spans: `.diff-view-word-added` (2px underline in
-{color.diff.added.emphasis}) and `.diff-view-word-removed` (underline plus
-line-through in {color.diff.removed.emphasis}). The fold button is
-`.diff-view-fold` with an inline SVG chevron `.diff-view-chevron` and two
-labels, `-fold-collapsed` and `-fold-expanded`; the folded rows are a
-`<tbody class="diff-view-folded" hidden>`. Line numbers
-use {color.text.muted} rather than {color.code.line-number} because the
-modified fill would drop the subtle step to 4.45:1.
+Root `.diff-view` with `.diff-view-unified`, `-split`, `-word-level` or
+`-conflict`. Rows: `.diff-view-row`, `-row-context`, `-row-added`,
+`-row-removed`, `-row-modified`, `-row-hunk`, `-row-fold`, `-row-conflict`
+(marker lines `-row-conflict-start`, `-mid`, `-end`). Cells: `.diff-view-ln`,
+`-marker`, `-text`, `-fold-cell`, `-range` (the `@@` span). Split adds
+`-side-old` and `-side-new`, and on a `-row-pair` `-cell-removed` and
+`-cell-added` (an empty `-cell-blank` faces an added line); conflict adds
+`-row-ours` and `-row-theirs`. Word spans: `.diff-view-word-added` (2px
+underline in {color.diff.added.emphasis}) and `.diff-view-word-removed`
+(underline plus line-through in {color.diff.removed.emphasis}). Fold:
+`.diff-view-fold` with SVG chevron `.diff-view-chevron` and labels
+`-fold-collapsed` and `-fold-expanded`; folded rows are `<tbody
+class="diff-view-folded" hidden>`. Line numbers use {color.text.muted}, not
+{color.code.line-number}, which falls below 4.5:1 on the modified fill.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | added rows {color.diff.added.bg} with `+` in {color.diff.added.gutter}; removed {color.diff.removed.bg} with `−` in {color.diff.removed.gutter}; modified {color.diff.modified.bg} with `~` in {color.diff.modified.gutter}; hunk rows {color.diff.header-bg}; conflicts in a 3px double {color.diff.conflict-border} | the markers; the double border |
-| hover | the row's number and marker cells → {color.interaction.hover.bg}; the text cell keeps its fill | cursor: default; only on hover-capable pointers |
-| selected | the whole row filled {color.interaction.selection.bg} with {color.interaction.selection.text}; the marker stays | `aria-current` (or `:target` for a permalinked line); the marker glyph |
-| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px around the row; on a selected row the ring is {color.interaction.focus.ring-container} | the ring |
-| expanded | the folded `<tbody>` is shown; the chevron points down; the button reads "Hide 12 unchanged lines" | `aria-expanded="true"`; the rows appear |
-| collapsed | the folded `<tbody>` is hidden; the chevron points to the inline end; "… 12 unchanged lines" | `aria-expanded="false"`; the ellipsis |
+| default | added {color.diff.added.bg}, `+` in {color.diff.added.gutter}; removed {color.diff.removed.bg}, `−` in {color.diff.removed.gutter}; modified {color.diff.modified.bg}, `~` in {color.diff.modified.gutter}; hunks {color.diff.header-bg}; conflicts in a 3px double {color.diff.conflict-border} | the markers; the double border |
+| hover | number and marker cells → {color.interaction.hover.bg}; the text cell keeps its fill | cursor: default; hover-capable pointers only |
+| selected | whole row {color.interaction.selection.bg} with {color.interaction.selection.text}; the marker stays | `aria-current` (or `:target` for a permalinked line); the marker glyph |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px around the row, including a selected row | the ring |
+| expanded | folded `<tbody>` shown; chevron down; "Hide 12 unchanged lines" | `aria-expanded="true"`; the rows appear |
+| collapsed | folded `<tbody>` hidden; chevron to the inline end; "… 12 unchanged lines" | `aria-expanded="false"`; the ellipsis |
 
 Precedence: selected > hover; focus-visible is always drawn. A selected row
-loses its diff fill but never its marker, which is why the marker is content.
+loses its diff fill, never its marker.
 
 ## Keyboard
 
-A plain table has no row focus. The official web distribution places it in a
-named, focusable scroll region so keyboard users can inspect wide lines without
-page overflow. The region uses the canonical container focus ring. Within the
-table, the fold buttons are the only stops and
-toggle with Enter or Space, the chevron turning within the motion budget.
-Hosts that expose the diff as a grid own row navigation and draw the ring on
-the focused row; the theme adds no binding of its own.
+A plain table has no row focus. The web distribution wraps it in a named,
+focusable scroll region with the container focus ring, so wide lines can be
+read without page overflow. The chevron turns within the motion budget.
 
 ## Accessibility
 
-The caption names both files. Every changed row carries its marker in a cell
-of its own, so a screen reader announces `+` or `−` before the line and a
-monochrome print keeps the distinction. Word-level changes use
-`text-decoration` (underline, or underline and line-through), never a fill,
-so the row text stays at 7.56:1 or better on every diff fill. The `−` marker
-measures 4.24:1 on the removed fill: it is bold, sits on its own fill and is
-a glyph, so it is held to the 3:1 graphics floor and recorded here. Folded
-hunks use `aria-expanded` and `aria-controls` on a real button; the hidden
-rows are `hidden`, not visually clipped, so they are not read while
-collapsed. Conflict markers are the literal `<<<<<<<`, `=======` and
-`>>>>>>>` lines in {color.text.bright} on {color.diff.header-bg}, inside the
-double border.
+Each marker sits in its own cell, so a screen reader announces `+` or `−`
+before the line and monochrome print keeps the distinction. Word-level
+changes use `text-decoration`, never a fill, so row text keeps 4.5:1 on
+every diff fill. The `−` marker is a bold glyph on its own fill and is held
+to the 3:1 graphics floor. Folded rows are `hidden`, not visually clipped,
+so they are not read while collapsed. Conflict markers are the literal
+`<<<<<<<`, `=======` and `>>>>>>>` lines.
 
 ## Portability
 
-A table with cell backgrounds, borders and text decoration is expressible in
-every toolkit. Hosts without double borders draw two 1px lines and record it;
-hosts without line-through keep the underline and the `−` marker. The three
-extension hues are confined to the `diff` group here and change with the
-profile; the markers do not.
+Cell backgrounds, borders and text decoration exist in every toolkit. Without
+double borders, draw two 1px lines and record it; without line-through, keep
+the underline and the `−` marker. The three extension hues are confined to
+the `diff` group and change with the profile; the markers do not.
 
 ## Non-examples
 
-Red and green fills with no `+`/`−` marker. Word-level changes drawn as a
-bright fill that pushes the text below 4.5:1. A removed line rendered in
-`text.disabled` or struck through as a whole. Collapsed hunks that are only
-visually clipped and still read out. Conflict blocks in purple. Hover that
-recolours the code text. Round-cornered hunk cards floating on the page. A
-selected row that drops the marker because "the colour says it".
+Red and green fills without `+`/`−`. Word-level changes as a bright fill
+that pushes text below 4.5:1. A removed line in `text.disabled` or struck
+through whole. Collapsed hunks only visually clipped and still read out.
+Purple conflict blocks. Hover that recolours the code text. Round-cornered
+hunk cards. A selected row that drops the marker.
diff --git a/spec/components/disclosure.md b/spec/components/disclosure.md
index 87e2e7f13..6160be642 100644
--- a/spec/components/disclosure.md
+++ b/spec/components/disclosure.md
@@ -37,9 +37,9 @@ tokens:
   dependency.role-color-text-disabled: color.text.disabled
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
-  dependency.role-space-2: space.2
   dependency.role-space-8: space.8
 stateTokens:
   default:
@@ -99,16 +99,15 @@ compact: false
 
 ## Purpose
 
-Reveal supporting content with native details and summary. Essential instructions stay outside a collapsed disclosure. The summary supplies a complete accessible name; content remains in normal reading order.
+Reveals optional supporting content on request.
 
 ## Anatomy
 
-- **details:** Native expanded state and content container.
-- **summary:** Visible name and native disclosure marker.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Named content on the default surface. | Native text and structure. |
 | expanded | Expanded content and native marker. | Native open state exposes the content. |
@@ -117,12 +116,11 @@ Reveal supporting content with native details and summary. Essential instruction
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Reach the summary and expanded interactive content.
-- **Enter / Space:** Toggle native details.
+As in the key table.
 
 ## Accessibility
 
-Keep the native marker and summary semantics. Do not add a competing aria-expanded value. Required instructions and the portal's normative content are never placed only inside a disclosure.
+Keep the native marker and summary semantics; add no competing aria-expanded value. Required instructions and the portal's normative content are never placed only inside a disclosure.
 
 ## Portability
 
diff --git a/spec/components/drawer.md b/spec/components/drawer.md
index 3a3f99dfb..e19643ced 100644
--- a/spec/components/drawer.md
+++ b/spec/components/drawer.md
@@ -86,20 +86,13 @@ compact: false
 
 ## Purpose
 
-A panel that opens from the side to hold navigation or a task on narrow
-screens, or a secondary form on wide ones. It is a modal dialog with a
-different shape: full height, anchored to the start or end edge, with a
-single visible border on the edge that faces the page. Below 900px the
-sidebar collapses into a drawer; above it, a drawer holds tasks that need
-more room than a dialog.
+A modal dialog shaped as a full-height side panel, for navigation or a task.
+Below 900px the sidebar collapses into a drawer; above it, a drawer holds
+tasks that need more room than a dialog.
 
 ## Anatomy
 
-The backdrop, {color.surface.backdrop} over the page; the panel on
-{color.surface.overlay} with a 1px {color.border.overlay} on its inner edge;
-the header with the title in {color.text.bright} and Close; the body, rows
-divided by {color.border.divider}. The demonstration renders the panel inside
-a stage of fixed height standing in for the viewport.
+Parts as listed in the anatomy; the overlay border is the only visible edge.
 
 ## States
 
@@ -107,41 +100,35 @@ a stage of fixed height standing in for the viewport.
 | --- | --- | --- |
 | default | the panel open at its edge on the backdrop | `open`; the page behind is inert |
 | open | as default; opacity 0 → 1 within 150 ms on capable hosts; never a slide | `open`; focus inside the panel |
-| closed | nothing: the panel and the backdrop are absent | no `open`; focus back on the opener |
-| focus-trapped | the panel carries the container ring, 2px solid {color.interaction.focus.ring-container} at −3px, when it holds focus; the note says Tab cycles | Tab never leaves; the note text |
-| reduced-motion | no opacity transition; the panel is simply present or absent | `prefers-reduced-motion` |
+| closed | panel and backdrop absent | no `open`; focus back on the opener |
+| focus-trapped | while it holds focus, the panel carries the 2px solid {color.interaction.focus.ring-container} ring at −3px; the note says Tab cycles | Tab never leaves; the note text |
+| reduced-motion | no opacity transition; present or absent | `prefers-reduced-motion` |
 
-Items inside the drawer take the states of the list or navigation they
-belong to; Close takes the tertiary button's hover and ring.
+Items take the states of their list or navigation; Close takes the tertiary
+button's hover and ring.
 
 ## Keyboard
 
-Tab and Shift+Tab cycle inside the panel; the page behind is inert. Escape
-closes and returns focus to the opener. Enter or Space on a navigation item
-navigates and closes. On open, focus goes to the first focusable element,
-which is the first item or Close.
+As in the key table. On open, focus goes to the first focusable element, the
+first item or Close.
 
 ## Accessibility
 
-The panel is named by its title through `aria-labelledby`. `showModal()`
-supplies the top layer and inertness; the theme never re-implements the trap
-on a non-modal element or on a plain aside. The backdrop is decorative; a
-click on it may close the drawer only because Close is also present. Both
-edges use logical properties, so the panel and its border mirror in RTL with
-no extra rules. Contrast: text 7.92:1 and title 9.49:1 on the overlay
-surface, the border 4.30:1, the ring 4.30:1, hovered items 11.41:1 on the
-strong hover fill.
+Named by its title through `aria-labelledby`. Never re-implement the trap on
+a non-modal element or a plain aside. The backdrop is decorative; a click on
+it may close the drawer only because Close is also present. Logical
+properties mirror the panel and its border in RTL. Text meets 4.5:1; the
+border and ring 3:1.
 
 ## Portability
 
-A full-height box with one border and a dimmed backdrop. Toolkits without a
-top layer draw the backdrop as a full-window overlay under the panel;
-toolkits with a native sidebar keep it non-modal and record that it is a
-sidebar, not a drawer.
+Toolkits without a top layer draw the backdrop as a full-window overlay under
+the panel; toolkits with a native sidebar keep it non-modal and record that it
+is a sidebar, not a drawer.
 
 ## Non-examples
 
-A panel that slides in from the edge. A drawer with a shadow or a rounded
-inner corner. A drawer that is a plain aside with a hand-written focus trap.
-A bottom sheet with a drag handle. A drawer with no Close button. A drawer
-that stays open under a dialog. A translucent panel over page content.
+A panel that slides in. A shadow or a rounded inner corner. A plain aside
+with a hand-written focus trap. A bottom sheet with a drag handle. No Close
+button. A drawer that stays open under a dialog. A translucent panel over page
+content.
diff --git a/spec/components/editor-search.md b/spec/components/editor-search.md
index 565153057..9f68b59bd 100644
--- a/spec/components/editor-search.md
+++ b/spec/components/editor-search.md
@@ -29,6 +29,13 @@ tokens:
   secondary.text: color.text.muted
   control.bg: color.surface.input
   control.focus: color.interaction.focus.ring
+  button.bg: color.action.secondary.bg
+  button.text: color.action.secondary.text
+  button.border: color.action.secondary.border
+  button.bg-hover: color.action.secondary.hover-bg
+  button.bg-active: color.action.secondary.pressed-bg
+  button.border-active: color.border.active
+  button.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-color-code-search-current-bg: color.code.search-current-bg
   dependency.role-color-code-search-current-text: color.code.search-current-text
@@ -37,9 +44,9 @@ tokens:
   dependency.role-color-surface-code: color.surface.code
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
-  dependency.role-space-2: space.2
   dependency.role-space-8: space.8
 stateTokens:
   default:
@@ -58,6 +65,12 @@ contrast:
     min: 3
     kind: ui
     label: Control boundary
+  - fg: color.action.secondary.text
+    bg: color.surface.default
+    label: Button label
+  - fg: color.action.secondary.text
+    bg: color.action.secondary.hover-bg
+    label: Button label on hover
 anatomy:
   - part: query
     description: Labelled search input.
@@ -106,29 +119,25 @@ compact: false
 
 ## Purpose
 
-Find literal text in a read-only code sample. Search, previous and next expose exact match counts and the current match. The component does not execute regexes, mutate source text or provide a code editor backend.
+Finds literal text in a read-only code sample. Searching a list or a site is
+the search-field.
 
 ## Anatomy
 
-- **query:** Labelled search input.
-- **navigation:** Previous and next actions, disabled without matches.
-- **source:** Escaped text with native mark elements.
-- **status:** Current and total match counts.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Plain escaped source. | Readable preformatted text. |
+| default | Plain escaped source. Button controls are the secondary button (button.md); inputs keep the input look. | Readable preformatted text. |
 | filled | Match fill; current match has its own marker. | Exact current and total counts. |
 | no-results | No highlighted matches. | Explicit zero-results status. |
 | focus-visible | Dashed control ring. | Native keyboard focus. |
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Reach query and match navigation.
-- **Enter / Shift+Enter:** Move to next or previous match.
-- **Escape:** Clear the query and retain focus.
+As in the key table.
 
 ## Accessibility
 
diff --git a/spec/components/empty-state.md b/spec/components/empty-state.md
index d6da9059d..269b5bf66 100644
--- a/spec/components/empty-state.md
+++ b/spec/components/empty-state.md
@@ -70,18 +70,13 @@ compact: false
 
 ## Purpose
 
-A region with nothing in it says so, and says what would fill it. It
-replaces a blank pane, an empty table body or a list with no rows after a
-filter, and it offers the one action that changes that when there is one.
-A failure is the error state; a wait is the loading indicator.
+Replaces a blank pane, an empty table body or a filtered-out list: it says
+what is empty and offers the one action that changes it, when there is one. A
+failure is the error state; a wait is the loading indicator.
 
 ## Anatomy
 
-The block on {color.surface.default} inside a 1px {color.border.divider},
-content centred; the glyph in {color.icon.decorative}; the heading in
-{color.text.bright}; the sentence in {color.text.muted}; the optional
-secondary action in {color.action.secondary.text} with a 1px
-{color.action.secondary.border}.
+Parts as listed in the anatomy.
 
 ## States
 
@@ -89,34 +84,30 @@ secondary action in {color.action.secondary.text} with a 1px
 | --- | --- | --- |
 | default | glyph, heading and sentence centred; the action, when present, below them | the worded heading; the action is a real button |
 
-The block has no states of its own; the action takes the secondary
-button's hover and ring.
+No states of its own; the action takes the secondary button's hover and ring.
 
 ## Keyboard
 
-Only the action is in the tab order. When a filter empties a list that had
-focus inside it, focus moves to the heading of the region, not into the
-empty state, so the person hears where they are.
+As in the key table. When a filter empties a list that had focus inside it,
+focus moves to the region's heading, not into the empty state, so the person
+hears where they are.
 
 ## Accessibility
 
-The heading is a real heading at the level the region uses, so the empty
-state appears in the outline; the sentence follows it in the reading order.
-The glyph is `aria-hidden`. When content becomes empty after an action
-(filter, delete), a polite live region announces the heading text. The
-action is never the only route: filters can also be cleared where they were
-set. Contrast: heading 10.10:1, sentence 5.66:1, action text 10.10:1 and its
-border 4.33:1 on the panel surface.
+The heading is a real heading at the region's level, so the empty state
+appears in the outline; the sentence follows it in reading order. When
+content becomes empty after an action (filter, delete), a polite live region
+announces the heading text. The action is never the only route: filters can
+also be cleared where they were set. Text meets 4.5:1; the action border 3:1.
 
 ## Portability
 
-Text and one optional button. Toolkits with a status page use it with the
-glyph as text; toolkits with only a placeholder string add the action as a
-separate button below the view.
+A toolkit with only a placeholder string adds the action as a separate button
+below the view.
 
 ## Non-examples
 
-An illustration or mascot. A primary (filled) call to action. A blank pane.
-A greyed-out table header with no message. A message that only says "No
-data". A heading in the accent red. An empty state that appears while
-loading. Centred text in a rounded card with a shadow.
+An illustration or mascot. A primary (filled) call to action. A blank pane. A
+greyed-out table header with no message. Only "No data". A heading in the
+accent red. An empty state shown while loading. Centred text in a rounded,
+shadowed card.
diff --git a/spec/components/error-state.md b/spec/components/error-state.md
index 0f3c348ac..b2a8674bc 100644
--- a/spec/components/error-state.md
+++ b/spec/components/error-state.md
@@ -28,7 +28,12 @@ tokens:
   root.border: color.border.control
   heading.text: color.text.bright
   secondary.text: color.text.muted
-  control.bg: color.surface.input
+  control.bg: color.action.secondary.bg
+  control.text: color.action.secondary.text
+  control.border: color.action.secondary.border
+  control.bg-hover: color.action.secondary.hover-bg
+  control.bg-active: color.action.secondary.pressed-bg
+  control.border-active: color.border.active
   control.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-border-width-emphasis: border.width.emphasis
@@ -39,9 +44,9 @@ tokens:
   dependency.role-color-text-disabled: color.text.disabled
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
-  dependency.role-space-2: space.2
   dependency.role-space-8: space.8
 stateTokens:
   default:
@@ -60,6 +65,12 @@ contrast:
     min: 3
     kind: ui
     label: Control boundary
+  - fg: color.action.secondary.text
+    bg: color.surface.default
+    label: Button label
+  - fg: color.action.secondary.text
+    bg: color.action.secondary.hover-bg
+    label: Button label on hover
 anatomy:
   - part: message
     description: Heading, explanation and text error glyph.
@@ -102,18 +113,18 @@ compact: false
 
 ## Purpose
 
-Explain a failed operation and offer a bounded recovery action. Retrying emits a request; the component does not claim that a service recovered. The host updates content when the actual operation completes.
+Explains a failed operation and asks for an explicit recovery; it never
+claims the service recovered.
 
 ## Anatomy
 
-- **message:** Heading, explanation and text error glyph.
-- **recovery:** Native retry action, disabled while the host request is pending.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Danger border and text heading. | Specific written explanation and error glyph. |
+| default | Danger border and text heading. Its buttons are the secondary button (button.md). | Specific written explanation and error glyph. |
 | error | Same explicit failure treatment. | Failure text remains available. |
 | loading | Busy status accompanies the existing explanation. | aria-busy and host-provided pending text. |
 | disabled | Disabled roles at full opacity. | Native retry button is disabled. |
@@ -121,12 +132,13 @@ Explain a failed operation and offer a bounded recovery action. Retrying emits a
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Reach the recovery action.
-- **Enter / Space:** Request a retry without moving focus.
+As in the key table.
 
 ## Accessibility
 
-Do not rely only on color or a glyph. Give the retry action a specific name. Announce a newly occurring error in an appropriate host status region, without repeatedly interrupting reading. Keep focus unless recovery requires an explicit next step.
+Never rely on colour or the glyph alone. Give the retry action a specific
+name. Announce a new error in a host status region without repeatedly
+interrupting reading. Keep focus unless recovery needs an explicit next step.
 
 ## Portability
 
@@ -134,4 +146,5 @@ Follows the shared component defaults in `spec/portability.md` (section "Shared
 
 ## Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls, colour-only status, drag-only operations, hidden required
+instructions, stolen focus or an invented service success.
diff --git a/spec/components/field.md b/spec/components/field.md
index 173d88731..f01f5eb68 100644
--- a/spec/components/field.md
+++ b/spec/components/field.md
@@ -72,18 +72,13 @@ compact: false
 
 ## Purpose
 
-The wrapper that gives every control the same label, description and error
-treatment. Controls specify their box; the field specifies what sits above
-and below it and how they are linked. Every form control in this theme is
-rendered inside a field or a fieldset.
+Gives every control the same label, description and error treatment: the
+control specifies its box, the field what sits above and below it and how
+they are linked. Every form control renders inside a field or a fieldset.
 
 ## Anatomy
 
-Label above the control, always stacked; the control slot; help text
-below in {color.text.muted}; the validation message, which takes the help
-slot visually while help stays in the DOM and `aria-describedby` lists both.
-The required mark is present in the markup and shown only when the control
-is required.
+Parts as listed in the anatomy.
 
 ## States
 
@@ -92,34 +87,29 @@ is required.
 | default | label {color.text.bright}; help {color.text.muted}; control as its own component | — |
 | required | `*` after the label in {color.status.danger.text} plus visually hidden "required" | `required` attribute; the mark |
 | invalid | the control's 2px {color.status.danger.border}; message with the ✕ glyph in {color.status.danger.text}; help visually hidden | border width 1 → 2px; glyph; `aria-invalid` |
-| disabled | label and control text {color.text.disabled}; control {color.interaction.disabled.bg} with 1px {color.border.disabled}; help unchanged | `disabled`; cursor: not-allowed |
+| disabled | label and control text {color.text.disabled}; control {color.interaction.disabled.bg}, 1px {color.border.disabled}; help unchanged | `disabled`; cursor: not-allowed |
 
 Precedence: disabled > invalid; required is shown in every state.
 
 ## Keyboard
 
-The field adds no behaviour. Clicking the label focuses the control
-(native `for`). Focus order inside the field is the control's own.
+Adds no behaviour; clicking the label focuses the control (native `for`).
 
 ## Accessibility
 
-Every control has a programmatic label; placeholder text is never the
-label. Help and message are linked with `aria-describedby` in that order so
-the description is read before the error. `aria-invalid="true"` is set only
-after interaction or submit. The message keeps its glyph so the state is not
-colour-only. Contrast: label 10.10:1, help 5.66:1, message 5.26:1 on the
-panel surface; disabled label 3.24:1 (exempt).
+Every control has a programmatic label; placeholder text is never the label.
+The message keeps its glyph, so the state is not colour-only. Text meets
+4.5:1; disabled text is exempt, with a house floor of 3:1.
 
 ## Portability
 
-Plain block layout; the only pseudo-element is nothing, the mark is real
-markup. Hosts without `aria-describedby` put help and message in the
-control's tooltip or accessible description and record it.
+No pseudo-elements: the required mark is real markup. Hosts without
+`aria-describedby` put help and message in the control's tooltip or
+accessible description and record it.
 
 ## Non-examples
 
-A floating label inside the control. A label to the left of the control.
-Placeholder text as the only label. An error shown by a red border alone. A
-message that replaces the help text in the DOM. A required mark that is only
-a colour change. An asterisk with no text alternative. Two controls in one
-field.
+A floating label inside the control. A label left of the control.
+Placeholder as the only label. An error shown by a red border alone. A
+message that replaces the help in the DOM. A colour-only required mark. An
+asterisk with no text alternative. Two controls in one field.
diff --git a/spec/components/fieldset.md b/spec/components/fieldset.md
index dfefde13c..08389bd1a 100644
--- a/spec/components/fieldset.md
+++ b/spec/components/fieldset.md
@@ -64,49 +64,43 @@ compact: false
 
 ## Purpose
 
-Grouping fields that belong together: an address, a set of credentials,
-the options of one feature. The legend names the group for sighted users
-and assistive technology alike, and disabling the fieldset disables every
-control inside it in one step. Checkbox and radio groups use their own
-components, which are fieldsets too.
+Groups fields that belong together: an address, a set of credentials, the
+options of one feature. Checkbox and radio groups use their own components,
+which are fieldsets too.
 
 ## Anatomy
 
-The native `<fieldset>` with a 1px {color.border.divider} border and 16px
-padding; the `<legend>` in {color.text.bright} sitting in the top border;
-the fields stacked inside. The border is a section rule, decorative by
-design; the legend and the spacing carry the grouping.
+Parts as listed in the anatomy. The border is a decorative section rule; the
+legend and the spacing carry the grouping.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 1px {color.border.divider} border; legend {color.text.bright}; fields as their own components | the border and the legend |
-| disabled | legend and labels {color.text.disabled}; every control inside takes its own disabled treatment ({color.interaction.disabled.bg}, {color.border.disabled}); the border unchanged | `disabled` on the fieldset; cursor: not-allowed on the controls |
+| disabled | legend and labels {color.text.disabled}; each control takes its own disabled treatment ({color.interaction.disabled.bg}, {color.border.disabled}); border unchanged | `disabled` on the fieldset; cursor: not-allowed on the controls |
 
 ## Keyboard
 
-None of its own. Disabled fieldsets remove their controls from the tab
-order natively, so a disabled group is skipped rather than walked.
+None of its own; a disabled group's controls leave the tab order natively.
 
 ## Accessibility
 
-The legend is the accessible name of the group and is announced before the
-first field inside; it says what the group is, not what to do. A group
-never nests deeper than two levels. Disabling a group hides its controls
-from keyboard users, so a disabled group states why in text before it or
-keeps its controls enabled. Contrast: legend 10.10:1, labels 8.43:1, help
-5.66:1 on the panel surface.
+The legend names the group and is announced before its first field; it says
+what the group is, not what to do. Groups nest at most two levels. Because
+disabling hides controls from keyboard users, a disabled group states why in
+text before it or keeps its controls enabled. Legend, labels and help meet
+4.5:1.
 
 ## Portability
 
-A border and a heading. Hosts without a legend-in-border draw the heading
-above the box and record it. Disabled propagation is native on the web and
-in GTK and Qt; a host without it disables each control.
+Hosts without a legend-in-border draw the heading above the box and record
+it. Disabled propagation is native on the web, GTK and Qt; a host without it
+disables each control.
 
 ## Non-examples
 
-A fieldset with no legend or with a legend hidden visually. A card used
-instead of a fieldset for form controls. Rounded corners. A 2px or
-`border.control` border on the group, which would read as a control. A
-legend in accent red. Disabling only the legend. Nesting three levels deep.
+No legend, or a visually hidden one. A card instead of a fieldset for form
+controls. Rounded corners. A 2px or `border.control` border, which reads as a
+control. A legend in accent red. Disabling only the legend. Three levels of
+nesting.
diff --git a/spec/components/file-browser.md b/spec/components/file-browser.md
index 8d31ee7bc..882c9f488 100644
--- a/spec/components/file-browser.md
+++ b/spec/components/file-browser.md
@@ -31,16 +31,23 @@ tokens:
   secondary.text: color.text.muted
   control.bg: color.surface.input
   control.focus: color.interaction.focus.ring
+  button.bg: color.action.secondary.bg
+  button.text: color.action.secondary.text
+  button.border: color.action.secondary.border
+  button.bg-hover: color.action.secondary.hover-bg
+  button.bg-active: color.action.secondary.pressed-bg
+  button.border-active: color.border.active
+  button.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-border-width-emphasis: border.width.emphasis
   dependency.role-color-border-divider: color.border.divider
   dependency.role-color-border-selected-indicator: color.border.selected-indicator
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
   dependency.role-space-16: space.16
-  dependency.role-space-2: space.2
   dependency.role-space-8: space.8
 stateTokens:
   default:
@@ -59,6 +66,12 @@ contrast:
     min: 3
     kind: ui
     label: Control boundary
+  - fg: color.action.secondary.text
+    bg: color.surface.default
+    label: Button label
+  - fg: color.action.secondary.text
+    bg: color.action.secondary.hover-bg
+    label: Button label on hover
 anatomy:
   - part: locations
     description: Tree navigation selects a location filter.
@@ -109,19 +122,18 @@ compact: false
 
 ## Purpose
 
-Compose hierarchical location navigation with a filterable file table. Opening an entry emits its stable identity. The caller owns file access, upload, deletion and permissions. The supplied names and sizes are synthetic local examples.
+Finds a file by location and name; every file operation belongs to the
+caller.
 
 ## Anatomy
 
-- **locations:** Tree navigation selects a location filter.
-- **query:** Labelled native search filters visible rows.
-- **table:** Native rows show names, kinds and sizes with explicit Open actions.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Locations and native file rows. | Explicit names, kinds and sizes. |
+| default | Locations and native file rows. Button controls are the secondary button (button.md); inputs keep the input look. | Explicit names, kinds and sizes. |
 | selected | Selected location follows the tree contract. | aria-selected plus location filter. |
 | empty | No file rows. | Explicit zero-files text. |
 | no-results | Filtered rows are hidden. | Matching count and retained search query. |
@@ -129,17 +141,19 @@ Compose hierarchical location navigation with a filterable file table. Opening a
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Move among tree navigation, search and row actions.
-- **Arrow keys:** Use the tree contract inside navigation.
-- **Enter / Space:** Request opening the chosen file through an event.
+As in the key table.
 
 ## Accessibility
 
-Keep the complete nested tree behavior and semantic table headers. Filtering does not move focus. Announce counts, and keep the search field available after zero results. File actions must not imply access beyond the host's actual permissions.
+Keep the complete nested tree behaviour and semantic table headers.
+Filtering does not move focus. Announce counts, and keep the search field
+available after zero results. File actions never imply access beyond the
+host's actual permissions.
 
 ## Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 ## Non-examples
 
diff --git a/spec/components/file-input.md b/spec/components/file-input.md
index d92104c91..1bb2afc7f 100644
--- a/spec/components/file-input.md
+++ b/spec/components/file-input.md
@@ -60,7 +60,7 @@ stateTokens:
   drop-target: { fg: color.text.default, bg: color.interaction.marquee, border: color.interaction.drop-target }
   invalid: { fg: color.action.secondary.text, bg: color.surface.canvas, border: color.status.danger.border }
 contrast:
-  - { fg: color.action.secondary.border, bg: color.surface.canvas, min: 3, kind: ui, state: hover, label: "hovered button boundary against the canvas outside it", waiver: "inside the hover fill the control border measures 2.94:1; the boundary is judged against the canvas on its outer side (4.45:1), and the fill change is itself the hover signal" }
+  - { fg: color.action.secondary.border, bg: color.surface.canvas, min: 3, kind: ui, state: hover, label: "hovered button boundary against the canvas outside it", waiver: "inside the hover fill the control border falls below the floor; the boundary is judged against the canvas on its outer side, and the fill change is itself the hover signal" }
   - { fg: color.interaction.drop-target, bg: color.surface.canvas, min: 3, kind: ui, label: "drop-zone dashed border at rest" }
   - { fg: color.text.muted, bg: color.surface.canvas, label: "status, hint and help text on the canvas" }
   - { fg: color.text.subtle, bg: color.surface.canvas, label: "file sizes on the canvas" }
@@ -112,66 +112,52 @@ compact: false
 ## Purpose
 
 Choosing one or more files from the host. The native input keeps the host
-chooser, its keyboard behaviour and its security model; the theme replaces
-only the input's own rendering with a button-styled label, adds an optional
-drop zone, and lists what was chosen with any per-file error.
+chooser, its keyboard and its security model; the theme replaces only its
+rendering.
 
 ## Anatomy
 
-The field label; the root row (or the drop zone) holding the button-styled
-label and the status text; the hidden-but-focusable native input; an optional
-list of chosen files, each with name, size in {color.text.subtle} and a
-remove button, one of which may carry the ✕ glyph and an error in
-{color.status.danger.text}; a static striped progress bar while uploading;
-help and validation message below.
+Parts as listed in the anatomy; help and message sit below the root.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | button: 1px {color.action.secondary.border} outline, text {color.action.secondary.text}; zone: 1px dashed {color.interaction.drop-target} | — |
-| hover | button background → {color.action.secondary.hover-bg}; border unchanged | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the button (the input has focus) | the ring |
-| drop-target | root fill {color.interaction.marquee}; border 1px dashed {color.interaction.drop-target} | dashed pattern; the hint text changes to "Release to add" |
-| invalid | button border 2px {color.status.danger.border}; message with the ✕ glyph; a failed row shows its own ✕ | border width 1 → 2px; glyphs; `aria-invalid` |
-| disabled | button text {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; the zone's dashes take {color.border.disabled}; no hover | `disabled`; cursor: not-allowed |
-| loading | a static bar of 45° stripes, {color.action.primary.bg} on {color.interaction.pressed.bg}, below the row; the button stays enabled | `aria-busy`; the status text reads "Uploading n files"; no animation |
+| hover | button → {color.action.secondary.hover-bg}; border unchanged | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the button (the input has focus) | the ring |
+| drop-target | root fill {color.interaction.marquee}; 1px dashed {color.interaction.drop-target} border | dashed pattern; hint reads "Release to add" |
+| invalid | button border 2px {color.status.danger.border}; message with ✕; a failed row shows its own ✕ | border 1 → 2px; glyphs; `aria-invalid` |
+| disabled | button text {color.text.disabled}, border {color.border.disabled}, fill {color.interaction.disabled.bg}; zone dashes {color.border.disabled}; no hover | `disabled`; cursor: not-allowed |
+| loading | static 45° stripes, {color.action.primary.bg} on {color.interaction.pressed.bg}, below the row; the button stays enabled | `aria-busy`; status reads "Uploading n files"; no animation |
 
-Precedence when several apply: disabled > loading > invalid > drop-target >
-hover; focus-visible is always drawn.
+Precedence: disabled > loading > invalid > drop-target > hover;
+focus-visible is always drawn.
 
 ## Keyboard
 
-Tab reaches the native input, which is drawn as the button; Enter or Space
-opens the host chooser; Escape in the chooser returns to the input. Each
-remove button in the list is its own tab stop after the input, and Delete or
-Backspace on it acts like Enter. Dropping is a pointer gesture only and never
-the sole way to add a file.
+As in the key table; closing the chooser returns focus to the input.
+Dropping is pointer-only and never the sole way to add a file.
 
 ## Accessibility
 
-The native input is hidden with the `sr-only` pattern, never `display: none`
-or `visibility: hidden`, so it keeps focus and the host chooser. It is named
-by both labels ("Attachments" and "Choose files"), and `aria-describedby`
-lists help and message. The status text and the list are announced through a
-polite live region after a choice; per-file errors are in the row text, not
-only in colour. The drop zone has no role and no `tabindex`; `aria-busy` on
-the root marks uploading. Contrast: button text 10.37:1 on the canvas and
-6.84:1 on the hover fill, button border 4.45:1, drop-target border 4.69:1 on
-the canvas and 4.52:1 on the marquee fill, status and help 5.81:1, sizes
-5.10:1, danger text 5.40:1.
+Hide the input with `sr-only`, never `display: none` or `visibility: hidden`,
+so it keeps focus and the chooser. Both labels name it ("Attachments",
+"Choose files"); `aria-describedby` lists help and message. The status and
+list are announced through a polite live region after a choice; per-file
+errors are in the row text. The drop zone has no role and no `tabindex`.
+Text meets 4.5:1; borders 3:1.
 
 ## Portability
 
-The button is the secondary button of the actions family; the zone is a
-dashed border and a translucent fill; the stripes are a repeating gradient
-(or a hatched brush). Toolkits without drag-and-drop omit the zone and keep
-the button; toolkits without a translucent fill composite the marquee over the
-canvas and record the value.
+The button is the secondary button of the actions family; the stripes are a
+repeating gradient or a hatched brush. Toolkits without drag-and-drop omit
+the zone and keep the button; without a translucent fill, composite the
+marquee over the canvas and record the value.
 
 ## Non-examples
 
-A hidden input with `display: none` and a button that clicks it by script. A
-drop zone that is the only way to add files. A rounded, dotted, animated
-"pulsing" zone. A spinner while uploading. A progress bar that animates its
-stripes. Errors shown by a red file name alone. Disabling by opacity.
+`display: none` on the input and a button that clicks it by script. A drop
+zone as the only way to add files. A rounded, dotted or pulsing zone. A
+spinner, or animated stripes, while uploading. Errors shown by a red file
+name alone. Disabling by opacity.
diff --git a/spec/components/filterable-table.md b/spec/components/filterable-table.md
index 902792b89..fab9367be 100644
--- a/spec/components/filterable-table.md
+++ b/spec/components/filterable-table.md
@@ -131,75 +131,54 @@ compact: false
 
 ## Purpose
 
-A list screen that proves the navigation, display and feedback components
-compose around one data-table: find, filter, select, page. It exists to
-show the states of a whole list screen, including nothing matching and
-still loading, not to prescribe a product.
+Proves that navigation, display and feedback components compose around one
+data-table (find, filter, select, page), including nothing matching and still
+loading. It shows a whole list screen's states; it does not prescribe a
+product.
 
 ## Anatomy
 
-The region landmark; the toolbar on {color.surface.chrome} with the
-search-field, the Filter menu button, the Columns toggle, a separator and the
-primary New button; a row of removable chips (priority: R1, maturity:
-stable); the scroller around the data-table, whose Name header carries
-`aria-sort`, whose rows carry `aria-selected` and a checkbox, and whose last
-column is a status badge (✓ Tested on {color.status.success.fill}, i
-Demonstrated on {color.status.info.fill}); the count in {color.text.muted}
-and the compact pagination. The empty variant adds the empty-state block;
-the loading variant marks the table `aria-busy`. Every part is the
-component's own markup and classes.
+Parts as listed in the anatomy; badges carry ✓ (Tested) and i
+(Demonstrated). Every part is the composed component's own markup and
+classes.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | rest tokens of every component; Name sorted ascending with its ▲ glyph; Prev disabled | `aria-sort`; the glyph |
-| hover | the pointed row takes {color.interaction.hover.bg}; the toolbar controls and chips keep their own hover on their own pointer events only | cursor |
-| focus-visible | the dashed {color.interaction.focus.ring} on the row holding focus (shown on the third row); the toolbar and chips stay at rest | the ring |
-| selected | two rows take {color.interaction.selection.bg} with {color.interaction.selection.text} and a checked box; the select-all reports mixed with the – glyph | `aria-selected`; ✓ and – glyphs; `aria-checked="mixed"` |
-| no-results | the body is the "No components match" row, the count reads 0 of 43, the search field's status line announces it; the chips stay so the cause is visible | text; `role="status"` |
+| default | each component at rest; Name sorted ascending with ▲; Prev disabled | `aria-sort`; the glyph |
+| hover | the pointed row takes {color.interaction.hover.bg}; toolbar controls and chips hover only on their own pointer events | cursor |
+| focus-visible | dashed {color.interaction.focus.ring} on the focused row (the third in the specimen); toolbar and chips at rest | the ring |
+| selected | two rows in {color.interaction.selection.bg} with {color.interaction.selection.text} and a checked box; select-all mixed with – | `aria-selected`; ✓ and – glyphs; `aria-checked="mixed"` |
+| no-results | the body is the "No components match" row; count reads 0 of 43; the search status line announces it; chips stay so the cause is visible | text; `role="status"` |
 
 The composed components keep their own pressed, sorted, disabled, loading
-and open treatments; this specimen declares only the states the whole
-screen adds to them.
+and open treatments; only the states the whole screen adds are declared here.
 
 ## Keyboard
 
-Landmarks first: the region, the toolbar's search landmark and the
-pagination navigation are offered by name. The toolbar is one stop with
-arrow movement between the search field, Filter, Columns and New (the
-toolbar contract); Escape clears the search. Each chip's Remove button is
-its own stop. The table follows the data-table contract: the first row is
-the stop, arrows move between rows, Space on a row's checkbox toggles it,
-Enter on a header sorts. Next is the last stop; a disabled Prev is not
-focusable.
+As in the key table, following the toolbar and data-table contracts. The
+region, the search landmark and the pagination navigation are offered by
+name. A disabled Prev is not focusable.
 
 ## Accessibility
 
-The search field's visible label is replaced by a visually hidden one so the
-toolbar stays one row; its status line is visually hidden too and announces
-"No components match" through `role="status"`. The count is a second status
-region and changes once per filter. Rows are named by their Name cell
-through `aria-labelledby` on the row checkbox; the select-all is a
-checkbox-role button whose mixed state carries the – glyph. Badges carry
-their glyphs so status survives without colour. Contrast: toolbar text
-8.60:1 on the chrome surface, boundaries 4.42:1, headers 10.10:1, badges
-7.08:1 and 7.13:1 on their fills, the ring 7.48:1 on the selection fill.
+The search field's label and its status line are visually hidden so the
+toolbar stays one row; the status line announces "No components match"
+through `role="status"`. The count is a second status region and changes once
+per filter. Rows are named by their Name cell through `aria-labelledby` on
+the row checkbox. Badge glyphs keep status readable without colour. Text and
+badges meet 4.5:1; boundaries and the ring on the selection fill meet 3:1.
 
 ## Portability
 
-Native table semantics, a toolbar, a menu button and a status region; the
-roving tabindex and the menu need the host's script, every state renders
-without one from the root hooks `data-state-selected` and
-`data-state-no-results` and the table's own `aria-busy`. Hosts without
-container queries wrap the toolbar at the 600px viewport breakpoint. The
-56rem width and the 44rem table minimum are layout of this specimen and not
-rules; the specimen proves composition, not a product.
+Every state renders without script from the root hooks
+`data-state-selected` and `data-state-no-results` and the table's own
+`aria-busy`.
 
 ## Non-examples
 
-A rounded search pill with a magnifier inside a shadowed toolbar. Filter
-chips drawn as pills with a coloured fill per category. Zebra-striped rows.
-A selected row shown by a coloured left bar and no fill. A blue Material
-checkbox. A skeleton shimmer while loading. An infinite scroll with no count
-and no pages.
+A rounded search pill with a magnifier in a shadowed toolbar. Chips as pills
+with a coloured fill per category. Zebra-striped rows. A selected row shown by
+a coloured left bar and no fill. A blue Material checkbox. A skeleton shimmer
+while loading. Infinite scroll with no count and no pages.
diff --git a/spec/components/form-builder.md b/spec/components/form-builder.md
index 9b3a98f89..fa061a1fe 100644
--- a/spec/components/form-builder.md
+++ b/spec/components/form-builder.md
@@ -51,57 +51,56 @@ compact: false
 
 ## Purpose
 
-Build a bounded reference form from text, textarea, select, checkbox and radio
-fields in the [interactive builder](https://j3w1.github.io/theme/builder/). D-021 remains proposed. This
-draft component does not promote new tokens, roles, profiles or native ports.
+Build a bounded reference form in the
+[interactive builder](https://j3w1.github.io/theme/builder/). D-021 remains
+proposed; this draft promotes no tokens, roles, profiles or native ports.
 
 ## Anatomy
 
-Each field has a stable ID, label, help, required flag and, for select/radio,
-stable option IDs and labels. Add and remove fields, edit definitions and move
-them with explicit Move up / Move down buttons. Saving an edit validates the
-complete proposed definition before replacing the current one.
+Each field has a stable ID, label, help, required flag and, for select and
+radio, stable option IDs and labels. Saving an edit validates the whole
+proposed definition before replacing the current one.
 
-The preview uses the same canonical field renderer and validation model as
-the validation-recovery composition. Changing a definition clears preview
-values and errors. Merely moving focus or typing a preview value does not
-change the definition. Preview state is separate from schema state.
+The preview uses the canonical field renderer and validation model of the
+validation-recovery composition. Changing a definition clears preview values
+and errors; moving focus or typing a preview value never changes the
+definition.
 
 ## States
 
-The empty state displays an explanation and an add action. An invalid import or definition
-edit reports a corrective message and leaves the current definition intact.
-Unavailable movement buttons are disabled at the list boundaries. The default state
-shows the ordered definition and preview. The static specimen represents the
-definition; interactive execution evidence is recorded separately.
+The empty state shows an explanation and an add action. An invalid import or edit
+reports a corrective message and keeps the current definition. Move buttons
+are disabled at the list boundaries. Default shows the ordered definition and
+preview. The static specimen shows the definition; interactive execution
+evidence is recorded separately.
 
 ## Keyboard
 
-All operations use native controls. No drag operation is required. Move actions
-keep focus on the moved field's controls. Removing a field focuses the next
-remaining field or the add control. Import and reset return to the add control.
-Preview submit focuses its error summary; links target stable field control IDs.
+No drag is required. Moving keeps focus on the moved field's controls;
+removing focuses the next remaining field or the add control; import and
+reset return to the add control. Preview submit focuses its error summary,
+whose links target stable field control IDs.
 
 ## Accessibility
 
 Use the canonical label, help and error associations, required markers and
-radio fieldset/legend semantics. Stable IDs survive JSON round trips and field
-reordering. Imported strings are text, never markup. No manual screen-reader
-pass is claimed by test presence.
+radio fieldset/legend semantics. Stable IDs survive JSON round trips and
+reordering. Imported strings are text, never markup. Test presence claims no
+manual screen-reader pass.
 
 ## Portability
 
 Definition schema version 1 pins theme name, version, default profile and
-constituent component content digest. Accept at most 64 KiB, 20 fields, 20
-options per choice field, 120-character labels and 400-character help. Preview
-text is limited to 2000 characters. Unknown keys, duplicate IDs, unsupported
-kinds, invalid choices and mismatched theme identity are rejected atomically.
-An old content identity requires an explicit migration outside this tool.
-
-Everything stays in memory. Only explicit Download definition creates a file,
-containing the schema and no entered values. Reset clears the definition and
-preview. There is no autosave, network submission, schema execution, arbitrary
-HTML/CSS/JavaScript or imported validation expression.
+constituent component content digest. Limits: 64 KiB, 20 fields, 20 options
+per choice field, 120-character labels, 400-character help, 2000-character
+preview text. Unknown keys, duplicate IDs, unsupported kinds, invalid choices
+and mismatched theme identity are rejected atomically. An old content
+identity needs an explicit migration outside this tool.
+
+Everything stays in memory; only Download definition creates a file, with the
+schema and no entered values. Reset clears definition and preview. No
+autosave, network submission, schema execution, arbitrary HTML/CSS/JavaScript
+or imported validation expression.
 
 ## Non-examples
 
diff --git a/spec/components/i3-window-frame.md b/spec/components/i3-window-frame.md
index 58781ad9d..7cb0b23f4 100644
--- a/spec/components/i3-window-frame.md
+++ b/spec/components/i3-window-frame.md
@@ -39,7 +39,7 @@ tokens:
   workspace.selected-text: color.interaction.selection.text
   workspace.bg-hover: color.interaction.hover.bg
   workspace.ring: color.interaction.focus.ring
-  workspace.ring-on-selection: color.interaction.focus.ring-container
+  workspace.ring-on-selection: color.interaction.focus.ring
   workspace.urgent-bg: color.status.danger.fill
   workspace.urgent-text: color.status.danger.on-fill
   status.separator: color.text.muted
@@ -68,6 +68,7 @@ stateTokens:
   container-inactive: { fg: color.text.muted, bg: color.surface.chrome }
   error: { fg: color.status.danger.on-fill, bg: color.status.danger.fill }
 contrast:
+  - { fg: color.interaction.focus.ring, bg: color.interaction.selection.bg, min: 3, kind: ui, state: selected, label: "ring on a selected workspace when focused" }
   - { fg: color.text.default, bg: color.surface.chrome, label: "workspace names and status text on the bar" }
   - { fg: color.text.bright, bg: color.surface.chrome, label: "clock on the bar" }
   - { fg: color.text.bright, bg: color.surface.chrome-alt, label: "focused title" }
@@ -125,80 +126,52 @@ compact: false
 
 ## Purpose
 
-The frame the palette was tuned in: an i3 bar, tiled windows with 1px
-pixel borders, 14/−2 gaps, a tabbed container and one floating window. It
-proves that the terminal and code-editor components sit inside window
-chrome drawn from the same roles, and it records the workstation's geometry
-as reference metrics. It is a specimen of composition, not a desktop.
+The frame the palette was tuned in. It proves that the terminal and
+code-editor components sit in window chrome drawn from the same roles, and it
+records the workstation's geometry as reference metrics. A specimen of
+composition, not a desktop: only i3 and sway ports draw this frame.
 
 ## Anatomy
 
-The region on {color.surface.desktop}; the 28px bar on
-{color.surface.chrome} with the workspace tablist (the visible workspace on
-{color.interaction.selection.bg}) and the i3status group in Chinese with
-its clock in {color.text.bright}; the workspace grid with the reference
-gaps; each window a focusable group behind a 1px {color.border.default}
-frame, {color.border.active} when focused, with a 23px title bar in
-{color.text.muted} on {color.surface.chrome} that turns {color.text.bright}
-on {color.surface.chrome-alt} when focused; the terminal or code-editor as
-the client with its own boundary given up to the frame. Tabbed: the titles
-form a tablist whose visible tab carries the 2px
-{color.border.selected-indicator}. Floating: the editor sits above the
-terminal behind {color.border.overlay} with {shadow.floating}, the only
-shadow in the theme.
+Parts as listed in the anatomy.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | the terminal window focused: {color.border.active} frame and the bright title; the editor at rest; workspace 1 filled | the title text; `aria-selected` |
-| focus-visible | the 2px {color.interaction.focus.ring-container} ring at −3px inside the focused window or container; the client draws no second ring | the ring |
-| selected | workspace 2 takes the selection fill with {color.interaction.selection.text}; workspace 1 drops to rest | `aria-selected` |
-| container-inactive | no window has focus: every frame {color.border.default}, every title {color.text.muted} on {color.surface.chrome}, the tab indicator {color.border.selected-indicator-inactive}, no caret | lightness drop; no caret |
-| error | workspace 3 is urgent: {color.status.danger.fill} with {color.status.danger.on-fill} and a trailing ! | the ! mark; "urgent" read to assistive technology |
+| default | terminal window focused: {color.border.active} frame, bright title; editor at rest; workspace 1 filled | the title text; `aria-selected` |
+| focus-visible | 2px {color.interaction.focus.ring-container} ring at −3px inside the focused window or container; the client draws no second ring | the ring |
+| selected | workspace 2 takes the selection fill with {color.interaction.selection.text}, 1px dashed {color.interaction.focus.ring} at −2px when focused; workspace 1 at rest | `aria-selected` |
+| container-inactive | no window focused: every frame {color.border.default}, every title {color.text.muted} on {color.surface.chrome}, tab indicator {color.border.selected-indicator-inactive}, no caret | lightness drop; no caret |
+| error | workspace 3 urgent: {color.status.danger.fill} with {color.status.danger.on-fill} and a trailing ! | the ! mark; "urgent" read to assistive technology |
 
 The clients keep their own states (the terminal's busy cursor, the editor's
-selection and read-only gutter); this specimen declares only the states the
-frame adds around them.
+selection and read-only gutter); only the states the frame adds are declared
+here.
 
 ## Keyboard
 
-The workspace tablist is one stop with arrow movement; Enter or Space shows
-a workspace. Each window is a focusable group so the frame itself can hold
-focus, as i3 focuses a container; Tab then enters the client, whose own
-contract applies (the terminal log, the read-only editor textbox). In the
-tabbed variant the tab list is one stop and only the visible panel's client
-follows. Mod+h j k l and Mod+1..9 belong to the window manager and are
-documented, not reimplemented. Nothing traps focus.
+As in the key table. A window group can hold focus itself, as i3 focuses a
+container. Nothing traps focus.
 
 ## Accessibility
 
-The region names its workspace and layout. The bar is a group holding a
-named tablist and a status group in `lang="zh"`, whose Nerd Font glyphs
-are `aria-hidden` so only the labels are read. Every window is a named
-group; the focused one says so in its name and the floating one too.
-Urgency carries the ! mark and a visually hidden "urgent". Contrast:
-workspace names 8.60:1 and the clock 10.31:1 on the bar, focused titles
-10.01:1, rest titles 5.77:1, the focused frame 4.97:1 and the ring 10.37:1
-on the window surface, the urgent fill 4.12:1 against the bar with 4.58:1
-text on it.
+The region names its workspace and layout. The workspace tablist is named;
+the status group is `lang="zh"`;
+its Nerd Font glyphs are `aria-hidden`, so only the labels are read. Every
+window is a named group; the focused and the floating window say so in their
+names. Urgency carries the ! mark and a visually hidden "urgent". Text meets
+4.5:1; frames, the ring and the urgent fill 3:1.
 
 ## Portability
 
-Groups, a tablist and the clients' own roles; every state renders from the
-root hooks without a script. The i3 geometry — bar 28px, titles 23px, gaps
-14px inner and −2px outer — is reproduced with private variables on this
-specimen's root only. Those numbers are reference metrics of the
-workstation, recorded so a port of the i3 configuration matches it; they
-are not tokens and not a rule for any other application, which keeps its
-own window manager, bar and gaps. The specimen proves composition, not a
-product; only i3 and sway ports draw this frame.
+The geometry is recorded so a port of the i3 configuration matches the
+workstation; any other application keeps its own window manager, bar and
+gaps.
 
 ## Non-examples
 
-A window with rounded corners or a title bar gradient. A focused window
-that glows or blurs its neighbours. A shadow under a tiled window; the only
-shadow is the floating one. Gaps of 14/−2 forced into an unrelated
-application's layout. A workspace indicator drawn as a red underline
-instead of the selection fill. Traffic-light close buttons in the title
-bar. A translucent bar.
+Rounded corners or a title-bar gradient. A focused window that glows or
+blurs its neighbours. A shadow under a tiled window. 14/−2 gaps forced into
+an unrelated application. A red underline instead of the selection fill for
+the workspace. Traffic-light buttons in the title bar. A translucent bar.
diff --git a/spec/components/icon-button.md b/spec/components/icon-button.md
index 3f4432728..a89afca3a 100644
--- a/spec/components/icon-button.md
+++ b/spec/components/icon-button.md
@@ -30,7 +30,7 @@ tokens:
   root.bg-toggled: color.interaction.selection.bg
   root.text-toggled: color.interaction.selection.text
   root.border-toggled: color.border.selected-indicator
-  root.ring-toggled: color.interaction.focus.ring-container
+  root.ring-toggled: color.interaction.focus.ring
   root.text-disabled: color.text.disabled
   root.bg-disabled: color.interaction.disabled.bg
   root.border-disabled: color.border.disabled
@@ -41,7 +41,7 @@ stateTokens:
   focus-visible: { fg: color.action.tertiary.text, bg: color.action.secondary.bg, outline: color.interaction.focus.ring }
   active: { fg: color.action.tertiary.text, bg: color.interaction.pressed.bg, border: color.border.active }
   toggled: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg }
-  toggled+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring-container }
+  toggled+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring }
 contrast:
   - { fg: color.border.selected-indicator, bg: color.surface.default, min: 3, kind: ui, state: toggled, label: "toggled border against the panel" }
   - { fg: color.interaction.selection.bg, bg: color.surface.default, min: 3, kind: ui, state: toggled, label: "toggled fill against the panel (decorative)", waiver: "aria-pressed, the filled icon form and the 1px selected-indicator border carry the state; the fill is not the boundary" }
@@ -74,58 +74,52 @@ compact: false
 
 ## Purpose
 
-A button whose whole content is one icon: toolbar actions, close and clear
-affordances, and boolean toggles such as pin, mute or wrap. It is the
-tertiary tone constrained to a square. Any icon button needs an accessible
-name and a tooltip; if the label must be visible it is a button.
+The tertiary tone in a square, for toolbar actions, close and clear
+affordances and boolean toggles such as pin, mute or wrap. If the label must
+be visible, use `button`.
 
 ## Anatomy
 
-A native `<button>` sized to the density control height in both axes with a
-single 16px inline SVG inside. The border is 1px and transparent at rest so
-the active and toggled borders do not shift the layout.
+Parts as listed in the anatomy.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | {color.action.tertiary.text} icon on nothing; transparent 1px border | — |
+| default | {color.action.tertiary.text} icon, no fill; transparent 1px border | — |
 | hover | background → {color.action.tertiary.hover-bg} | cursor: pointer; hover-capable pointers only |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| focus-visible | 1px dashed ring {color.interaction.focus.ring} at −2px | the ring |
 | active | background → {color.interaction.pressed.bg}; border → {color.border.active} | border change; no translation |
-| disabled | {color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}; no hover | `disabled`; cursor: not-allowed |
-| toggled | fill {color.interaction.selection.bg} with {color.interaction.selection.text}; border {color.border.selected-indicator}; the icon draws in its filled form | `aria-pressed="true"`; the filled icon shape; the border |
-| toggled+focus-visible | the selection fill and a ring in {color.interaction.focus.ring-container} | both visible at once |
+| disabled | {color.text.disabled} on {color.interaction.disabled.bg}, 1px {color.border.disabled}; no hover | `disabled`; cursor: not-allowed |
+| toggled | {color.interaction.selection.bg} fill, {color.interaction.selection.text}, border {color.border.selected-indicator}; filled icon form | `aria-pressed="true"`; the filled icon shape; the border |
+| toggled+focus-visible | the selection fill and 1px dashed {color.interaction.focus.ring} at −2px | both visible at once |
 
 Precedence: disabled > toggled > active > hover; focus-visible is always
 drawn.
 
 ## Keyboard
 
-Native. The toggle variant flips `aria-pressed` on Enter and Space and does
-not move focus. Inside a toolbar the host applies roving tabindex; the
-button itself binds nothing.
+Native; the toggle does not move focus. In a toolbar the host applies roving
+tabindex; the button binds nothing.
 
 ## Accessibility
 
-`aria-label` (or `aria-labelledby`) names the button; the tooltip repeats
-the same text and is not the name. The SVG is `aria-hidden="true"` and
-`focusable="false"`. A toggle uses `aria-pressed`, whose value is announced;
-the name never changes with the state ("Mute", not "Mute" / "Unmute").
-Contrast: icon 8.65:1 at rest, 12.47:1 on the selection fill; ring 4.69:1,
-container ring 7.48:1 on the selection fill. Target ≥ 24×24 CSS pixels with
-4px between neighbours in `compact` density.
+Every icon button has an accessible name (`aria-label` or `aria-labelledby`)
+and a tooltip that repeats it but is not the name. The SVG is
+`aria-hidden="true"` and `focusable="false"`. The name never changes with
+the state ("Mute", not "Mute" / "Unmute"). The icon meets 4.5:1 and rings
+3:1 on every fill. Target at least 24×24 CSS pixels in `compact`, with 4px
+between neighbours.
 
 ## Portability
 
-Square, fill, border, outline; the icon is currentColor so it follows every
-state without its own colour. Hosts without inline SVG use their icon theme at
-16px and record the substitution. Hosts without dashed outlines draw a solid
-1px ring.
+Square, fill, border and outline; the `currentColor` icon follows every
+state. A host without inline SVG uses its icon theme at 16px and records the
+substitution; one without dashed outlines draws a solid 1px ring.
 
 ## Non-examples
 
-A circle. An icon button without an accessible name. A toggle that changes
-its label instead of `aria-pressed`. A hover that recolours the icon alone.
-An emoji or icon-font glyph in place of the SVG. A toggled state shown by
-colour alone with a line icon. A shadow or scale on press.
+A circle. No accessible name. A toggle that changes its label instead of
+`aria-pressed`. A hover that recolours only the icon. An emoji or icon-font
+glyph instead of the SVG. A toggled state shown by colour alone with a line
+icon. A shadow or scale on press.
diff --git a/spec/components/kbd.md b/spec/components/kbd.md
index 711ff1446..619e60e33 100644
--- a/spec/components/kbd.md
+++ b/spec/components/kbd.md
@@ -28,6 +28,7 @@ tokens:
   control.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-border-width-emphasis: border.width.emphasis
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
   dependency.role-space-2: space.2
@@ -87,30 +88,32 @@ compact: false
 
 ## Purpose
 
-Show readable key names using native kbd text. This documents a shortcut; it does not bind one. State the platform when shortcuts differ.
+Shows the reader a key or shortcut; it binds nothing.
 
 ## Anatomy
 
-- **key:** Native kbd containing a readable key name.
-- **sequence:** Separate keys joined by text in activation order.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Named content on the default surface. | Native text and structure. |
 
 ## Keyboard
 
-- **None:** The keycap is documentation, not a button.
+Not interactive; nothing is bound.
 
 ## Accessibility
 
-Write readable names such as Ctrl, Shift and Escape. Keep sequence punctuation as text. A shortcut hint does not replace an action's accessible name.
+Write readable names such as Ctrl, Shift and Escape, and keep sequence
+punctuation as text. A shortcut hint never replaces an action's accessible
+name.
 
 ## Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 ## Non-examples
 
diff --git a/spec/components/link.md b/spec/components/link.md
index 98ae75e37..24202fd16 100644
--- a/spec/components/link.md
+++ b/spec/components/link.md
@@ -6,7 +6,7 @@ maturity: stable
 priority: R1
 since: 0.1.0
 order: 30
-summary: The native anchor for navigation; always underlined in the link-underline role, hover fills with the strong hover surface, the current page carries a 2px indicator bar.
+summary: The native anchor for navigation; always underlined in the link-underline role, hover fills with the hover surface, the current page carries a 2px indicator bar.
 native: true
 aria:
   pattern: native <a href>
@@ -26,7 +26,7 @@ tokens:
   root.text: color.text.link
   root.underline: color.text.link-underline
   root.text-hover: color.text.link-hover
-  root.bg-hover: color.interaction.hover.bg-strong
+  root.bg-hover: color.interaction.hover.bg
   root.ring: color.interaction.focus.ring
   root.text-visited: color.text.link
   root.text-current: color.text.bright
@@ -34,7 +34,7 @@ tokens:
   icon.stroke: color.icon.default
 stateTokens:
   default: { fg: color.text.link, bg: color.surface.canvas }
-  hover: { fg: color.text.link-hover, bg: color.interaction.hover.bg-strong }
+  hover: { fg: color.text.link-hover, bg: color.interaction.hover.bg }
   focus-visible: { fg: color.text.link, bg: color.surface.canvas, outline: color.interaction.focus.ring }
   visited: { fg: color.text.link, bg: color.surface.canvas }
   current: { fg: color.text.bright, bg: color.surface.canvas, border: color.border.selected-indicator }
@@ -43,7 +43,7 @@ contrast:
   - { fg: color.text.link-underline, bg: color.surface.default, min: 3, kind: ui, label: "underline on the panel" }
   - { fg: color.text.link, bg: color.surface.default, label: "link text on the panel" }
   - { fg: color.text.link, bg: color.surface.raised, label: "link text on raised surfaces" }
-  - { fg: color.interaction.focus.ring, bg: color.interaction.hover.bg-strong, min: 3, kind: ui, state: hover, label: "ring on the hover fill" }
+  - { fg: color.interaction.focus.ring, bg: color.interaction.hover.bg, min: 3, kind: ui, state: hover, label: "ring on the hover fill" }
 anatomy:
   - part: root
     description: The native <a href>; 1px underline in text.link-underline offset 2px; no padding inline, 0 4px standalone.
@@ -71,52 +71,47 @@ compact: true
 
 ## Purpose
 
-Navigation to another document, section or resource. A link never performs
-an action on the current page; that is a button. Links are recognisable by
-the persistent underline as well as strong red {color.text.link}, distinct
-from rose body text and headings (D-024).
+Navigation to another document, section or resource; an action on the
+current page is a button. A link is recognised by its persistent underline as
+well as strong red {color.text.link}, distinct from rose body text and
+headings (D-024).
 
 ## Anatomy
 
-A native `<a href>`. Inline: text plus the 1px underline. Standalone: the
-same with a trailing arrow icon and a little horizontal padding so the hover
-fill has room. Current: `aria-current="page"`, brighter text and a 2px bar
-replacing the underline.
+Parts as listed in the anatomy; the current link has no underline, only its
+2px bar.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | {color.text.link}; underline 1px {color.text.link-underline} offset 2px | the underline |
-| hover | background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover}; underline 2px in the text colour | underline thickens 1px → 2px; cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px; no change to the underline | the ring |
-| visited | {color.text.link}; underline unchanged | the underline continues to mark navigation; browsing history does not reduce its visibility |
-| current | text → {color.text.bright}; the underline becomes a 2px {color.border.selected-indicator} bottom border; no hover fill | `aria-current="page"`; the bar's 2px weight |
+| default | {color.text.link}; 1px {color.text.link-underline} underline, offset 2px | the underline |
+| hover | fill {color.interaction.hover.bg} (D-027); text {color.text.link-hover}; underline 2px in the text colour | underline 1px → 2px; cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px; underline unchanged | the ring |
+| visited | as default | the underline still marks navigation |
+| current | {color.text.bright}; a 2px {color.border.selected-indicator} bottom border replaces the underline; no hover fill | `aria-current="page"`; the 2px bar |
 
 Precedence: current > hover; focus-visible is always drawn.
 
 ## Keyboard
 
-Native. Enter follows the link; Space never does. Skip links and in-page
-links move focus to their target, which needs `tabindex="-1"` when it is not
-focusable.
+As in the key table. An in-page or skip-link target that is not focusable
+takes `tabindex="-1"` so focus moves to it.
 
 ## Accessibility
 
-The link text describes the destination on its own ("Release notes", never
-"here"). Same destination, same text. `aria-current="page"` marks the
-current document in navigation and nothing else. Links that open a new
-window say so in text. Link text meets 4.5:1 on canvas, panel and raised
-surfaces; the underline meets 3:1. The generated contrast report records exact
-ratios for the current profile, including hover text and focus. Inline targets are exempt
-from the 24×24 minimum; standalone links reach it through their line box.
+Link text names the destination on its own ("Release notes", never "here");
+same destination, same text. `aria-current="page"` marks the current document
+in navigation and nothing else. A link that opens a new window says so in
+text. Text meets 4.5:1 on canvas, panel and raised surfaces; the underline
+3:1. Inline links are exempt from the 24×24 target minimum; standalone links
+reach it through their line box.
 
 ## Portability
 
-Colour, underline thickness, background and outline; the arrow is an inline
-SVG in currentColor. Hosts that cannot thicken an underline invert the link on
-hover instead and record it. Hosts without `aria-current` expose the current
-link as selected.
+The arrow is an inline SVG in currentColor. A host that cannot thicken an
+underline inverts the link on hover instead and records it. A host without `aria-current` exposes the current link as
+selected.
 
 ## Non-examples
 
diff --git a/spec/components/list.md b/spec/components/list.md
index 592ff6cb8..06278938e 100644
--- a/spec/components/list.md
+++ b/spec/components/list.md
@@ -41,7 +41,7 @@ tokens:
   row.text-disabled: color.text.disabled
   selected.bg: color.interaction.selection.bg
   selected.text: color.interaction.selection.text
-  selected.ring: color.interaction.focus.ring-container
+  selected.ring: color.interaction.focus.ring
   selected.inactive-bg: color.interaction.selection.inactive-bg
   selected.inactive-text: color.interaction.selection.inactive-text
   check.glyph: color.interaction.selection.text
@@ -51,7 +51,7 @@ stateTokens:
   hover: { fg: color.text.default, bg: color.interaction.hover.bg }
   focus-visible: { fg: color.text.default, bg: color.surface.default, outline: color.interaction.focus.ring }
   selected: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg }
-  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring-container }
+  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring }
   selected+container-inactive: { fg: color.interaction.selection.inactive-text, bg: color.interaction.selection.inactive-bg }
 contrast:
   - { fg: color.text.muted, bg: color.surface.default, label: "metadata column on the list surface" }
@@ -101,30 +101,24 @@ compact: false
 
 ## Purpose
 
-Lets the user choose one or several rows from a short, visible set. A list
-is a listbox: it holds a selection, it does not navigate. Rows that lead
-somewhere are sidebar-nav; rows with columns are a table; a long set that
-needs filtering is a combobox.
+Choose one or several rows from a short, visible set. It holds a selection
+and never navigates: rows that lead somewhere are `sidebar-nav`, rows with
+columns a `table`, a long set that needs filtering a `combobox`.
 
 ## Anatomy
 
-A `ul` with `role="listbox"` framed by 1px {color.border.control} on
-{color.surface.default}. Each option is one row: a check gutter, the label in
-{color.text.default}, and in the metadata variant a trailing column in
-{color.text.muted}. Rows are separated by 1px {color.border.divider}. A
-selected row is filled with {color.interaction.selection.bg}; every part of
-it, including the metadata and the ✓ glyph, takes
-{color.interaction.selection.text}.
+Parts as listed in the anatomy; on a selected row every part, metadata and
+✓ included, takes {color.interaction.selection.text}.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | text {color.text.default}; no fill; the check gutter empty | — |
+| default | text {color.text.default}; no fill; check gutter empty | — |
 | hover | background → {color.interaction.hover.bg} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the option | the ring |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the option | the ring |
 | selected | fill {color.interaction.selection.bg}; text and glyph {color.interaction.selection.text} | `aria-selected="true"`; the ✓ glyph |
-| selected+focus-visible | the fill and the ring in {color.interaction.focus.ring-container} | both visible at once |
+| selected+focus-visible | the fill and 1px dashed {color.interaction.focus.ring} at −2px | both visible at once |
 | selected+container-inactive | fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring | lightness drop between the two fills; the glyph stays |
 | disabled | text {color.text.disabled}; no fill; no hover; still reachable by arrow keys | `aria-disabled="true"`; cursor: not-allowed |
 
@@ -132,36 +126,28 @@ Precedence: disabled > selected > hover; focus-visible is always drawn.
 
 ## Keyboard
 
-Roving tabindex: the selected option (or the first) has `tabindex="0"`, the
-rest `-1`, so the list costs one tab stop. Up and Down move; in single
-selection the selection follows focus, in multiple selection Space toggles
-and Shift with the arrows extends. Home and End jump; Ctrl+A selects all in a
-multi-select list; typing jumps to the next matching label. Disabled options
-are reachable and announced, never skipped silently.
+The list costs one tab stop (`tabindex="0"` on the selected or first
+option, `-1` on the rest). Disabled options are reached and announced, never
+skipped.
 
 ## Accessibility
 
-`aria-label` or `aria-labelledby` on the listbox; `aria-multiselectable`
-when several may be chosen; `aria-selected` on every option, including
-`"false"`. The ✓ glyph is `aria-hidden`; `aria-selected` is the state.
-Metadata is inside the option so it is read with the label. Contrast: text
-8.43:1, metadata 5.66:1, selected text 12.47:1 on the fill, inactive selection
-7.02:1, ring 4.57:1 on the surface and 7.48:1 on the fill, frame 4.33:1. Rows
-are at least 24 CSS pixels tall with the check gutter as the leading target
-area.
+`aria-label` or `aria-labelledby` names the listbox; every option carries
+`aria-selected`, including `"false"`. The ✓ is `aria-hidden`;
+`aria-selected` is the state. Metadata sits inside the option so it is read
+with the label. Text meets 4.5:1; frame and rings 3:1. Rows are at least 24
+CSS pixels tall, with the check gutter as the leading target area.
 
 ## Portability
 
-Rows with a background, a glyph gutter and an outline; nothing else. Hosts
-with a native list view take the fill, the inactive fill and the divider
-colour and keep their keyboard model. The inactive fill applies when the
-list's window or pane loses focus, which a web page detects through
-`:focus-within` on the pane.
+Rows with a background, a glyph gutter and an outline; nothing else. Native
+list views take the fill, inactive fill and divider colour and keep their
+own keyboard model. The inactive fill applies when the list's window or pane
+loses focus; the web detects it with `:focus-within` on the pane.
 
 ## Non-examples
 
-A selected row marked by a border or a check alone without the fill. Rounded
-row highlights. Muted metadata left on the selection fill. A list where every
-row is a tab stop. A list that navigates on selection. Disabled rows removed
-from the arrow-key order. Hover that changes the text colour. A list without
-a frame on the canvas.
+A selected row marked by a border or check without the fill. Rounded row
+highlights. Muted metadata left on the selection fill. Every row a tab stop.
+Navigating on selection. Disabled rows removed from the arrow-key order.
+Hover that changes text colour. A frameless list on the canvas.
diff --git a/spec/components/loading-indicator.md b/spec/components/loading-indicator.md
index 8b1aeac88..ffd9a1dad 100644
--- a/spec/components/loading-indicator.md
+++ b/spec/components/loading-indicator.md
@@ -60,53 +60,46 @@ compact: false
 
 ## Purpose
 
-Marks the moment between a request and its result when there is nothing to
-measure: a list that is being fetched, a field that is being validated. The
-theme has no spinner; the same static ⋯ glyph that a loading control shows
-appears here beside a worded label, and the container says it is busy.
+Marks the wait between a request and its result when there is nothing to
+measure: a list being fetched, a field being validated. There is no spinner;
+the static ⋯ a loading control shows appears here beside a worded label.
 
 ## Anatomy
 
-The busy container; the glyph in {color.text.muted}; the label in
-{color.text.default}. Inline, the two follow the text they qualify; as a
-block, they sit centred on {color.surface.default} inside a
-{color.border.divider} edge where the content will appear.
+Inline, glyph and label follow the text they qualify; as a block they sit
+centred, inside a {color.border.divider} edge, where the content will appear.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | the static ⋯ and the label | `aria-busy="true"`; the glyph; the worded label |
-| reduced-motion | identical: there is nothing to reduce | `prefers-reduced-motion` |
+| reduced-motion | identical: nothing to reduce | `prefers-reduced-motion` |
 
-The indicator has no hover, focus or disabled state; it is not a control.
+Not a control: no hover, focus or disabled state.
 
 ## Keyboard
 
-None. The indicator is never focusable. When loading replaces content that
-had focus, focus moves to the container's heading or to the indicator's
-parent region, never to the indicator itself, and returns to the result when
-it arrives.
+Never focusable. When loading replaces content that had focus, focus moves to
+the container's heading or parent region, never the indicator, and returns to
+the result when it arrives.
 
 ## Accessibility
 
-The container is `role="status"` with `aria-busy="true"` while loading, so
-assistive technology can wait for the subtree to settle and announce the
-label once. The glyph is `aria-hidden`; the label is a real sentence with the
-object named ("Loading fonts") and is visible in both variants; a host that
-must hide it inline keeps it visually hidden, never absent. Because nothing moves, there is no
-`prefers-reduced-motion` branch to get wrong. Contrast: label 8.65:1 on the
-canvas and 8.43:1 on the panel surface; glyph 5.81:1 and 5.66:1.
+`aria-busy` lets assistive technology wait for the subtree to settle and
+announce the label once. The label names the object ("Loading fonts"); a host
+that must hide it inline keeps it visually hidden, never absent. Nothing
+moves, so there is no reduced-motion branch to get wrong. Label and glyph meet
+4.5:1.
 
 ## Portability
 
-Text only. Toolkits with a spinner widget do not use it; the glyph and label
-are a plain label. Hosts that insist on an activity indicator record the
-deviation and keep it under the 150 ms motion budget with a reduced-motion
-branch.
+Text only; a toolkit's spinner widget is not used. A host that insists on an
+activity indicator records the deviation and keeps it within the 150 ms
+motion budget with a reduced-motion branch.
 
 ## Non-examples
 
-A spinner or rotating ring. Animated dots. A shimmering skeleton. A full-page
-overlay that blocks input for a fetch. A glyph with no label. An indicator
-that takes focus. A dimmed container at reduced opacity.
+A spinner or rotating ring. Animated dots. A shimmering skeleton. A
+full-page overlay blocking input for a fetch. A glyph with no label. An
+indicator that takes focus. A dimmed, reduced-opacity container.
diff --git a/spec/components/menu.md b/spec/components/menu.md
index f6203c49f..1952a6898 100644
--- a/spec/components/menu.md
+++ b/spec/components/menu.md
@@ -48,7 +48,7 @@ tokens:
   item.text-disabled: color.text.disabled
   active.bg: color.interaction.selection.bg
   active.text: color.interaction.selection.text
-  active.ring: color.interaction.focus.ring-container
+  active.ring: color.interaction.focus.ring
   check.glyph: color.text.bright
   shortcut.text: color.text.muted
   separator.color: color.border.divider
@@ -60,7 +60,7 @@ stateTokens:
   open: { fg: color.text.default, bg: color.interaction.pressed.bg, border: color.border.active }
   closed: { fg: color.text.default, bg: color.surface.default, border: color.border.control }
   checked: { fg: color.text.bright, bg: color.surface.raised }
-  selected: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring-container }
+  selected: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring }
 contrast:
   - { fg: color.text.muted, bg: color.surface.raised, label: "shortcut hint on the raised surface" }
   - { fg: color.text.disabled, bg: color.surface.raised, min: 3, kind: ui, state: disabled, label: "disabled item text (exempt; house floor 3:1)" }
@@ -113,68 +113,51 @@ compact: true
 
 ## Purpose
 
-Offers a short list of actions behind one button. A menu is for commands;
-choosing a value belongs in select or combobox, and moving between views in
-tabs or the sidebar. Menus close as soon as an action runs.
+A short list of commands behind one button. Choosing a value is `select` or
+`combobox`; moving between views is tabs or the sidebar. Running an action
+closes the menu; a check item toggles and leaves it open.
 
 ## Anatomy
 
-A menu button, styled as a secondary button, that opens a list on
-{color.surface.raised} inside a 1px {color.border.overlay} frame. Items are
-buttons in {color.text.default} with a check gutter at the inline start, the
-label, and an optional shortcut hint in {color.text.muted}. Separators are
-1px {color.border.divider} rules. The active item, whether reached by pointer
-or by arrow key, is the selection fill {color.interaction.selection.bg} with
-{color.interaction.selection.text}. The reference renders the menu open in
-flow beneath the button; a host positions it at `z.popover`.
+Parts as listed in the anatomy. The active item, reached by pointer or arrow
+key, takes the selection fill.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | the button at rest; the list on {color.surface.raised} with the {color.border.overlay} frame | — |
-| hover | item background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the button; on the active item the ring is {color.interaction.focus.ring-container} | the ring |
-| open | button fill {color.interaction.pressed.bg} with 1px {color.border.active}; the list shown | `aria-expanded="true"`; the list is present |
-| closed | the button at rest; the list hidden | `aria-expanded="false"`; the list is absent from the tree |
-| disabled | item text {color.text.disabled}; no hover; still focusable by arrow keys when `aria-disabled` | `aria-disabled="true"`; cursor: not-allowed |
-| checked | the ✓ glyph in {color.text.bright} in the gutter | `aria-checked="true"`; the glyph |
-| selected | the active item: fill {color.interaction.selection.bg} with {color.interaction.selection.text} | focus is on the item; `aria-activedescendant` where used |
+| default | button at rest; list on {color.surface.raised} in the {color.border.overlay} frame | — |
+| hover | item → {color.interaction.hover.bg-strong}, text {color.text.link-hover} | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the button and the active item | the ring |
+| open | button {color.interaction.pressed.bg} with 1px {color.border.active}; list shown | `aria-expanded="true"`; list present |
+| closed | button at rest; list hidden | `aria-expanded="false"`; list absent from the tree |
+| disabled | item text {color.text.disabled}; no hover; still reachable by arrow keys when `aria-disabled` | `aria-disabled="true"`; cursor: not-allowed |
+| checked | ✓ in {color.text.bright} in the gutter | `aria-checked="true"`; the glyph |
+| selected | active item filled {color.interaction.selection.bg} with {color.interaction.selection.text} | focus on the item; `aria-activedescendant` where used |
 
 Precedence: disabled > selected > hover; focus-visible is always drawn.
 
 ## Keyboard
 
-The button opens on Enter, Space or Down (focus on the first item) and on Up
-(focus on the last). Inside, Up and Down move and wrap, Home and End jump,
-Right opens a submenu and Left closes it, typing a letter jumps to the next
-matching item. Enter or Space activates; a check item toggles without closing.
-Escape closes and returns focus to the button; Tab closes and continues the
-tab order. Focus never rests on a separator.
+As in the key table; focus never rests on a separator.
 
 ## Accessibility
 
-The button carries `aria-haspopup="menu"`, `aria-expanded` and
-`aria-controls`; the list `role="menu"` and `aria-labelledby` pointing at the
-button. Items are `role="menuitem"` or `role="menuitemcheckbox"` with
-`aria-checked`; disabled items use `aria-disabled` so they remain reachable
-and announced. Shortcut hints are text, not `aria-keyshortcuts` alone.
-Contrast: item text 8.43:1 and shortcut 5.66:1 on the raised surface, active
-text 12.47:1 on the fill, the frame 4.57:1, ring-container 7.48:1 on the fill.
-Items are the row height, at least 24 CSS pixels in `compact` density.
+The list is `aria-labelledby` the button. Disabled items use `aria-disabled`
+so they stay reachable and announced. Shortcut hints are text, not
+`aria-keyshortcuts` alone. Text meets 4.5:1; frame and ring 3:1. Items are at
+least 24 CSS pixels tall in `compact`.
 
 ## Portability
 
-A framed box with rows; the active row is a fill, the frame a border, the
-ring an outline. Toolkits with native menus keep their keyboard model and
-take the surface, frame and fill colours. Hosts that cannot draw the frame
-in the overlay colour draw it in the strong border colour and record the
-deviation.
+A framed box of rows: the active row a fill, the frame a border, the ring an
+outline. Native menus keep their keyboard model and take the surface, frame
+and fill colours. A host that cannot draw the frame in the overlay colour
+uses the strong border colour and records the deviation.
 
 ## Non-examples
 
-A shadow under the menu. Rounded corners on the menu or the items. An active
-item marked by text colour alone. A hover fill that differs from every other
-menu in the product. Icons in the check gutter of a plain menuitem. A menu
-that stays open after an action. Items that are links styled as menu items
-without `role="menuitem"`. Disabling by opacity.
+A shadow under the menu. Rounded menu or items. An active item marked by text
+colour alone. A hover fill unlike every other menu in the product. Icons in a
+plain menuitem's check gutter. A menu that stays open after an action. Links
+styled as menu items without `role="menuitem"`. Disabling by opacity.
diff --git a/spec/components/multiselect.md b/spec/components/multiselect.md
index 9853c1f4a..346f710d5 100644
--- a/spec/components/multiselect.md
+++ b/spec/components/multiselect.md
@@ -30,6 +30,13 @@ tokens:
   secondary.text: color.text.muted
   control.bg: color.surface.input
   control.focus: color.interaction.focus.ring
+  button.bg: color.action.secondary.bg
+  button.text: color.action.secondary.text
+  button.border: color.action.secondary.border
+  button.bg-hover: color.action.secondary.hover-bg
+  button.bg-active: color.action.secondary.pressed-bg
+  button.border-active: color.border.active
+  button.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-border-width-emphasis: border.width.emphasis
   dependency.role-color-action-primary-bg: color.action.primary.bg
@@ -75,6 +82,12 @@ contrast:
     min: 3
     kind: ui
     label: Control boundary
+  - fg: color.action.secondary.text
+    bg: color.surface.default
+    label: Button label
+  - fg: color.action.secondary.text
+    bg: color.action.secondary.hover-bg
+    label: Button label on hover
 anatomy:
   - part: group
     description: Fieldset and legend name the choice.
@@ -123,34 +136,32 @@ compact: false
 
 ## Purpose
 
-Select zero or more named values using a labelled native checkbox list. Local search filters visible choices without clearing selections. Successful checkboxes retain repeated native form keys. Clear selection is an explicit action.
+Select zero or more named values from a searchable native checkbox list.
 
 ## Anatomy
 
-- **group:** Fieldset and legend name the choice.
-- **filter:** Labelled search input filters option labels.
-- **options:** Native checkboxes remain selected when filtered out.
-- **status:** Visible count distinguishes matching options from selected values.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Named content on the default surface. | Native text and structure. |
+| default | Named content on the default surface. Button controls are the secondary button (button.md); inputs keep the input look. | Native text and structure. |
 | checked | Selected fill and a check indicator. | Native checked state. |
 | focus-visible | Dashed focus ring. | Native keyboard focus position. |
 | disabled | Disabled semantic foreground, background and border at full opacity. | Native disabled state blocks activation. |
-| no-results | Muted result count. | Zero-results text; existing selected values remain selected. |
+| no-results | Muted result count. | Zero-results text; selected values stay selected. |
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Visit search, clear and each visible enabled checkbox.
-- **Space:** Toggle the focused checkbox.
-- **Escape:** Clear a non-empty query without clearing selection.
+As in the key table.
 
 ## Accessibility
 
-Keep labels and native checkbox semantics. Hidden choices leave the focus order but retain checked form values. Announce matching and selected counts, including zero. Required selection policy belongs to the host; marking every checkbox required would require every option.
+Keep labels and native checkbox semantics. Filtered-out choices leave the
+focus order but keep their checked form values. Announce matching and
+selected counts, including zero. Required-selection policy belongs to the
+host; marking every checkbox required would require every option.
 
 ## Portability
 
diff --git a/spec/components/number-field.md b/spec/components/number-field.md
index f33a22cf4..0c04773cb 100644
--- a/spec/components/number-field.md
+++ b/spec/components/number-field.md
@@ -107,17 +107,14 @@ compact: false
 
 ## Purpose
 
-Entering a bounded number: a gap in pixels, a timeout in milliseconds, a
-count. The theme replaces the host spinner, which is tiny and inconsistent,
-with two square buttons that are real tab stops. Free-form numeric text such
-as a version or an identifier is a text field with `inputmode`.
+Entering a bounded number: a gap in pixels, a timeout, a count. The host
+spinner, tiny and inconsistent, gives way to two square buttons that are
+real tab stops. Free-form numeric text (a version, an identifier) is a
+`text-field` with `inputmode`.
 
 ## Anatomy
 
-Label above; the box; the input with digits aligned to the end; the
-optional unit; the stepper with + over −, each button half the control
-height and at least 24px wide; help stating the range; the validation
-message.
+Parts as listed in the anatomy; each stepper button is at least 24px wide.
 
 ## States
 
@@ -125,40 +122,36 @@ message.
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.input}; digits {color.text.default}; unit {color.text.muted}; stepper glyphs {color.action.tertiary.text} | — |
 | hover | background → {color.interaction.hover.bg}; a hovered stepper button → {color.action.tertiary.hover-bg} | cursor: text on the input, pointer on the buttons |
-| focus-visible | border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px on the box, or on the focused stepper button | the ring |
-| invalid | border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
+| focus-visible | border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px on the box or the focused stepper button | the ring |
+| invalid | 2px {color.status.danger.border}; message with the ✕ glyph | border 1 → 2px; glyph; `aria-invalid` |
 | invalid+focus-visible | the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
 | disabled | text, unit and glyphs {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; buttons disabled | `disabled`; cursor: not-allowed |
-| read-only | no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; the stepper is hidden | `readonly`; dotted edge; no buttons |
+| read-only | no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; stepper hidden | `readonly`; dotted edge; no buttons |
 
 Precedence: disabled > invalid > hover; focus-visible is always drawn.
 
 ## Keyboard
 
-Native arrow stepping inside the input; the stepper buttons are ordinary
-buttons after it in the tab order and call `stepUp()` / `stepDown()`.
-Typing a value outside the range is allowed and reported as invalid on
-blur or submit, never clamped silently.
+A value outside the range may be typed; it is reported invalid on blur or
+submit, never clamped silently.
 
 ## Accessibility
 
-A programmatic label is required. The unit is `aria-hidden` and repeated in
-the label or help ("Inner gap (px)"), so it is never lost. Stepper buttons
-are named "Increase <label>" and "Decrease <label>". Help states min, max
-and step before the user types. `aria-invalid` only after interaction or
-submit. Contrast: digits 8.65:1, unit 5.81:1, glyphs 8.65:1, control border
-4.45:1, invalid border 4.69:1.
+A programmatic label is required. The `aria-hidden` unit is repeated in the
+label or help ("Inner gap (px)"). Help states min, max and step before the
+user types. `aria-invalid` only after interaction or submit. Text meets
+4.5:1; borders 3:1.
 
 ## Portability
 
-The text field's box plus two buttons; the host spinner is hidden with the
-engine's pseudo-elements and `appearance: textfield`. Hosts whose spin
-buttons cannot be replaced style them square in the same colours and record
-it.
+The `text-field` box plus two buttons; the host spinner is hidden with the
+engine's pseudo-elements and `appearance: textfield`. A host whose spin
+buttons cannot be replaced styles them square in the same colours and
+records it.
 
 ## Non-examples
 
 The host's default spinner. Round or overlapping stepper buttons. A value
-clamped silently on blur. Left-aligned digits. A unit typed into the value.
-A number field for phone numbers, postcodes or identifiers. Invalid shown by
-colour alone. Disabling by opacity.
+clamped silently. Left-aligned digits. A unit typed into the value. A number
+field for phone numbers, postcodes or identifiers. Invalid by colour alone.
+Disabling by opacity.
diff --git a/spec/components/pagination.md b/spec/components/pagination.md
index eeb64d4ae..4d394b259 100644
--- a/spec/components/pagination.md
+++ b/spec/components/pagination.md
@@ -33,7 +33,7 @@ tokens:
   link.text-disabled: color.text.disabled
   current.bg: color.interaction.selection.bg
   current.text: color.text.on-selection
-  current.ring: color.interaction.focus.ring-container
+  current.ring: color.interaction.focus.ring
   gap.text: color.text.muted
   status.text: color.text.default
   status.emphasis: color.text.bright
@@ -43,7 +43,7 @@ stateTokens:
   focus-visible: { fg: color.text.default, bg: color.surface.default, outline: color.interaction.focus.ring }
   current: { fg: color.text.on-selection, bg: color.interaction.selection.bg }
 contrast:
-  - { fg: color.interaction.focus.ring-container, bg: color.interaction.selection.bg, min: 3, kind: ui, state: current, label: "ring on the current page when focused" }
+  - { fg: color.interaction.focus.ring, bg: color.interaction.selection.bg, min: 3, kind: ui, state: current, label: "ring on the current page when focused" }
   - { fg: color.text.disabled, bg: color.surface.default, min: 3, kind: ui, state: disabled, label: "disabled previous/next (exempt; house floor 3:1)" }
   - { fg: color.text.muted, bg: color.surface.default, label: "gap ellipsis on the panel surface" }
 anatomy:
@@ -81,59 +81,47 @@ compact: false
 
 ## Purpose
 
-Moves through a result set that is split into pages. Pagination is for sets
-whose size is known; use a "load more" button or infinite scroll for feeds,
-and a range field for jumping to an arbitrary offset.
+Moves through a paged result set of known size. Feeds use a "load more"
+button or infinite scroll; jumping to an arbitrary offset is a range field.
 
 ## Anatomy
 
-A `nav` labelled "Pagination" holding a `ul`: previous, the page links with
-an aria-hidden `…` gap where pages are skipped, next. Every page link is a
-square target in {color.text.default} with no border; the current page is
-filled with {color.interaction.selection.bg} and {color.text.on-selection}.
-The compact variant keeps previous and next and replaces the numbers with
-"3 of 12", the current number in {color.text.bright}.
+Parts as listed in the anatomy; page links have no border.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | text {color.text.default}; no fill; no border | — |
+| default | {color.text.default}; no fill, no border | — |
 | hover | background → {color.interaction.hover.bg} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px; on the current page the ring is {color.interaction.focus.ring-container} | the ring |
-| current | fill {color.interaction.selection.bg}; text {color.text.on-selection}; no hover | `aria-current="page"` |
-| disabled | text {color.text.disabled}; no fill; no hover | `aria-disabled="true"`; no `href`; cursor: not-allowed |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px, including the current page | the ring |
+| current | fill {color.interaction.selection.bg}, text {color.text.on-selection}; no hover | `aria-current="page"` |
+| disabled | {color.text.disabled}; no fill, no hover | `aria-disabled="true"`; no `href`; cursor: not-allowed |
 
-Pressing a link uses {color.interaction.pressed.bg} for the duration of the
-press only.
+A link shows {color.interaction.pressed.bg} only while pressed.
 
 ## Keyboard
 
-Plain links in document order: previous, the pages, next. A disabled end has
-no `href`, so it is not a tab stop and cannot be activated. The current page
-remains a link to itself so a keyboard user can reload it.
+As in the key table. The current page stays a link to itself so a keyboard
+user can reload it.
 
 ## Accessibility
 
-`aria-label="Pagination"` on the `nav`; a second pagination on the same page
-gets a distinct label. Previous and next carry a visible word, not just a
-glyph, and `aria-label` gives the target page number when it is known
-("Previous page, 2"). The gap is `aria-hidden`; the list count tells a screen
-reader how many links follow. Contrast: link text 8.43:1, current text 12.47:1
-on the selection fill, ring-container 7.48:1 on the fill, disabled 3.24:1
-(exempt). Targets are at least 24×24 CSS pixels in `compact` density.
+A second pagination on the same page gets a distinct label. Previous and next
+carry a visible word, not just a glyph; `aria-label` gives the target page
+when known ("Previous page, 2"). The list count tells a screen reader how many
+links follow. Text meets 4.5:1 and the ring 3:1; disabled ends are exempt
+(house floor 3:1). Targets are at least 24×24 CSS pixels in `compact`.
 
 ## Portability
 
-Links with a background and an outline; nothing else. Hosts that cannot
-remove `href` from a disabled link use a disabled button for the ends and
-record it. The compact variant is plain text and two links and ports
-anywhere.
+Links with a background and an outline; nothing else. A host that cannot
+remove `href` from a disabled link uses a disabled button for the ends and
+records it. The compact variant is plain text and two links.
 
 ## Non-examples
 
 Rounded or circular page buttons. A border around every page link. The
-current page marked by colour or bold alone without `aria-current`. Previous
-and next as glyph-only links without a label. A disabled end that still has
-an `href`. Pagination that hides the last page number. A row that scrolls
-horizontally.
+current page marked by colour or bold alone, without `aria-current`.
+Glyph-only previous and next. A disabled end with an `href`. Hiding the last
+page number. A horizontally scrolling row.
diff --git a/spec/components/popover.md b/spec/components/popover.md
index 015658862..67cde9dcf 100644
--- a/spec/components/popover.md
+++ b/spec/components/popover.md
@@ -27,17 +27,22 @@ tokens:
   root.border: color.border.control
   heading.text: color.text.bright
   secondary.text: color.text.muted
-  control.bg: color.surface.input
+  control.bg: color.action.secondary.bg
+  control.text: color.action.secondary.text
+  control.border: color.action.secondary.border
+  control.bg-hover: color.action.secondary.hover-bg
+  control.bg-active: color.action.secondary.pressed-bg
+  control.border-active: color.border.active
   control.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-color-border-overlay: color.border.overlay
   dependency.role-color-surface-overlay: color.surface.overlay
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
   dependency.role-space-16: space.16
-  dependency.role-space-2: space.2
   dependency.role-space-8: space.8
 stateTokens:
   default:
@@ -56,6 +61,12 @@ contrast:
     min: 3
     kind: ui
     label: Control boundary
+  - fg: color.action.secondary.text
+    bg: color.surface.default
+    label: Button label
+  - fg: color.action.secondary.text
+    bg: color.action.secondary.hover-bg
+    label: Button label on hover
 anatomy:
   - part: trigger
     description: Native button with expanded state and panel relationship.
@@ -100,35 +111,35 @@ compact: false
 
 ## Purpose
 
-Disclose a non-modal supporting panel near its trigger. Interactive content follows ordinary tab order. Escape and outside activation dismiss; focus is not trapped. Use the native Popover API when available with an equivalent documented fallback.
+Supporting content beside its trigger that never blocks the page.
 
 ## Anatomy
 
-- **trigger:** Native button with expanded state and panel relationship.
-- **panel:** Named supporting content and optional visible close action.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Named trigger. | Button semantics and accessible name. |
+| default | Named trigger. Its buttons are the secondary button (button.md). | Button semantics and accessible name. |
 | open | Square overlay surface and border. | aria-expanded=true; panel is reachable. |
 | closed | Panel hidden. | aria-expanded=false; hidden controls leave focus order. |
 | focus-visible | Dashed focus ring. | Native keyboard focus. |
 
 ## Keyboard
 
-- **Enter / Space:** Toggle from the trigger.
-- **Tab / Shift+Tab:** Move through ordinary controls without trapping focus.
-- **Escape:** Close and restore the trigger.
+As in the key table.
 
 ## Accessibility
 
-Keep essential instructions outside collapsed panels. Use a visible label or aria-label for the panel. Do not add aria-modal or a focus trap. Native automatic dismissal and the fallback both synchronize expanded state.
+Keep essential instructions outside collapsed panels. Name the panel with a
+visible label or `aria-label`. No `aria-modal` and no focus trap. Native
+automatic dismissal and the fallback both synchronise the expanded state.
 
 ## Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 ## Non-examples
 
diff --git a/spec/components/progress.md b/spec/components/progress.md
index 163977453..a6f518d25 100644
--- a/spec/components/progress.md
+++ b/spec/components/progress.md
@@ -41,7 +41,7 @@ stateTokens:
 contrast:
   - { fg: color.text.bright, bg: color.surface.canvas, label: "label on the canvas" }
   - { fg: color.text.muted, bg: color.surface.canvas, label: "detail line on the canvas" }
-  - { fg: color.action.primary.bg, bg: color.interaction.pressed.bg, min: 3, kind: ui, label: "value fill against the track", waiver: "the fill measures 1.51:1 against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control, 4.45:1) marks the full extent" }
+  - { fg: color.action.primary.bg, bg: color.interaction.pressed.bg, min: 3, kind: ui, label: "value fill against the track", waiver: "the fill falls below the floor against the track; the value is carried by the visible percentage text and the native value, and the track boundary (border.control) marks the full extent" }
   - { fg: color.action.primary.bg, bg: color.interaction.pressed.bg, min: 1, kind: ui, state: busy, label: "stripes (decorative pattern)", waiver: "the stripes are a pattern, not a boundary; busy is carried by aria-busy and aria-valuetext" }
   - { fg: color.status.danger.fill, bg: color.interaction.pressed.bg, min: 3, kind: ui, state: error, label: "error fill against the track" }
 anatomy:
@@ -77,25 +77,21 @@ compact: false
 
 ## Purpose
 
-Shows how far a known task has gone, or that an unbounded one is running.
-It reports; it never blocks. A task that can be cancelled has a button beside
-the bar. A short wait with no bar is the loading indicator.
+Shows how far a known task has gone, or that an unbounded one is running. It
+reports; it never blocks. A cancellable task has a button beside the bar. A
+short wait with no bar is the loading indicator.
 
 ## Anatomy
 
-The header row with the label in {color.text.bright} and the value in
-{color.text.default}; the bar, a native progress element whose track is
-{color.interaction.pressed.bg} behind a 1px {color.border.control} and whose
-fill is {color.action.primary.bg}; an optional detail line in
-{color.text.muted}.
+Parts as listed in the anatomy.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | fill {color.action.primary.bg} on the track; the value text | the native value; the percentage text |
-| busy | the whole track shows static 45° stripes of {color.action.primary.bg} on {color.interaction.pressed.bg}; no value text | `aria-busy`; `aria-valuetext`; the stripe pattern; no animation |
-| error | fill → {color.status.danger.fill}; the label gains the ✕ glyph in {color.status.danger.text}; the detail line says what failed | glyph; worded detail |
+| default | {color.action.primary.bg} fill on the track; the value text | the native value; the percentage text |
+| busy | static 45° stripes of {color.action.primary.bg} on {color.interaction.pressed.bg} across the track; no value text | `aria-busy`; `aria-valuetext`; the stripe pattern; no animation |
+| error | fill → {color.status.danger.fill}; the label gains ✕ in {color.status.danger.text}; the detail line says what failed | glyph; worded detail |
 | reduced-motion | identical to default and busy: nothing animates in any state | `prefers-reduced-motion` |
 
 Indeterminate work is the busy state; the determinate variant enters it while
@@ -103,29 +99,26 @@ the total is unknown and leaves it once known.
 
 ## Keyboard
 
-None. The progress element is not focusable and receives no key. A cancel
-button next to the bar is an ordinary button with its own tab stop.
+None; a cancel button beside the bar has its own tab stop.
 
 ## Accessibility
 
-The label is a real `<label for>` on the progress element, so its name is
-programmatic; the value is in the native `value` and repeated in text.
-Indeterminate bars set `aria-valuetext` ("Preparing"), and the container sets
-`aria-busy` for the duration. Completion and failure are announced through a
-polite live region, not by the bar. Contrast: label 10.37:1, value 8.65:1,
-detail 5.81:1, track boundary 4.45:1, error fill 3.36:1 against the track.
-The primary fill against the track measures 1.51:1 and is waived because the
-value is stated in text; a host that must meet 3:1 graphically raises the
-track to {color.surface.canvas}.
+The value is in the native `value` and repeated in text. Indeterminate bars
+set `aria-valuetext` ("Preparing"); the container sets `aria-busy` for the
+duration. Completion and failure are announced through a polite live region,
+not by the bar. Text meets 4.5:1; the track boundary and error fill 3:1. The
+primary fill against the track is waived because the value is stated in
+text; a host that must meet 3:1 graphically raises the track to
+{color.surface.canvas}.
 
 ## Portability
 
-A track, a fill and a hatched pattern. Toolkits with a native bar map the
-fill to the primary colour and disable pulse animation; toolkits without
-gradients draw the stripes with a hatched brush or alternating characters.
+A toolkit with a native bar maps the fill to the primary colour and disables
+pulse animation; one without gradients draws the stripes with a hatched brush
+or alternating characters.
 
 ## Non-examples
 
-A spinner. Animated or "barber-pole" stripes. A shimmering skeleton in place
-of a bar. A circular ring. A rounded pill-shaped bar. Colour-only failure
-without the glyph and text. A bar with no label. A bar that blocks input.
+A spinner. Animated or barber-pole stripes. A shimmering skeleton instead of
+a bar. A circular ring. A rounded pill bar. Colour-only failure without the
+glyph and text. A bar with no label. A bar that blocks input.
diff --git a/spec/components/radio-group.md b/spec/components/radio-group.md
index 6f1c34175..9d1bbaffb 100644
--- a/spec/components/radio-group.md
+++ b/spec/components/radio-group.md
@@ -105,29 +105,24 @@ compact: true
 
 ## Purpose
 
-One choice out of a few visible options. Below two options a checkbox or
-switch is used; above roughly six, a select. The radios are square, as every
-control in this theme is, and are told apart from checkboxes by the inner
-square instead of the ✓ glyph and by arrow-key movement instead of separate
-tab stops.
+One choice among two to roughly six visible options; fewer is a checkbox or
+switch, more a select. It differs from a checkbox by the inner square
+instead of ✓ and by arrow keys instead of separate tab stops.
 
 ## Anatomy
 
-A `<fieldset>` whose `<legend>` asks the question; a list of `<label>` rows
-each holding the native input, drawn as a 16px square with `appearance:
-none`, and its text; the validation message at the end. The inner square is
-a real element stacked over the input in the same cell.
+Parts as listed in the anatomy.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 16px square, 1px {color.border.control} on {color.surface.input}; text {color.text.default} | — |
-| hover | box background → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px around the box | the ring |
-| checked | box fills {color.action.primary.bg}; an 8px inner square in {color.action.primary.text}; border stays {color.border.control} | the inner square; `checked` |
+| hover | box → {color.interaction.hover.bg}; a checked box → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px around the box | the ring |
+| checked | box fills {color.action.primary.bg}; 8px inner square in {color.action.primary.text}; border stays {color.border.control} | the inner square; `checked` |
 | checked+focus-visible | the fill and a ring in {color.interaction.focus.ring-container} | inner square and ring |
-| disabled | boxes {color.interaction.disabled.bg} with 1px {color.border.disabled}; inner square and text {color.text.disabled} | `disabled`; cursor: not-allowed |
+| disabled | boxes {color.interaction.disabled.bg}, 1px {color.border.disabled}; inner square and text {color.text.disabled} | `disabled`; cursor: not-allowed |
 | invalid | every box border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
 | required | `*` after the legend in {color.status.danger.text} plus visually hidden "required" | `required`; the mark |
 
@@ -136,31 +131,26 @@ drawn.
 
 ## Keyboard
 
-Native. The group is one tab stop; the arrow keys move both focus and the
-check, so moving through a group changes the value. That is why a radio
-group never triggers navigation or a request on change; the value is read on
-submit or through an explicit action.
+Native and one tab stop. Arrows move focus and the check together, so a
+radio group never navigates or sends a request on change; the value is read
+on submit or through an explicit action.
 
 ## Accessibility
 
-The legend is read before each option and is the group's name. Options
-share a `name`. The message is linked with `aria-describedby` on the
-fieldset and `aria-invalid` is set on the inputs after submit. A group with
-no default checked radio must have a required mark or a "none" option, so
-the empty state is intentional. Contrast: text 8.43:1, inner square 9.28:1
-on the fill, box edge 4.45:1 on the input surface and 4.33:1 against the
-panel when checked, ring 4.69:1, container ring 5.57:1.
+The legend names the group and is read before each option. `aria-invalid` is
+set on the inputs after submit. A group with no default checked radio has a
+required mark or a "none" option, so the empty state is intentional. Text
+meets 4.5:1; box edges, the inner square and rings 3:1.
 
 ## Portability
 
-Square, border, fill and one inner square; no pseudo-element is needed.
-Hosts that insist on a circular radio indicator record the deviation rather
-than replacing the control with a custom widget.
+Square, border, fill and one inner square; no pseudo-element. A host that
+insists on a circular indicator records the deviation instead of replacing
+the control with a custom widget.
 
 ## Non-examples
 
-Circular radios. A checked state shown by border colour alone with no inner
-square. Radios that submit or navigate on change. A group with no legend or
-with the legend rendered as a label on one option. Separate tab stops per
-radio. One radio on its own. Disabling by opacity. A div with
-`role="radiogroup"` built from spans.
+Circular radios. Checked shown by border colour alone, without the inner
+square. Submitting or navigating on change. No legend, or the legend as one
+option's label. A tab stop per radio. A lone radio. Disabling by opacity. A
+div with `role="radiogroup"` built from spans.
diff --git a/spec/components/range.md b/spec/components/range.md
index f7468d60f..29af590e4 100644
--- a/spec/components/range.md
+++ b/spec/components/range.md
@@ -35,6 +35,7 @@ tokens:
   dependency.role-color-text-disabled: color.text.disabled
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
   dependency.role-space-2: space.2
@@ -100,35 +101,36 @@ compact: false
 
 ## Purpose
 
-Set a numeric value with a native range input and a visible output. The input retains min, max, step, disabled, name/value submission and form reset. Platform track geometry is a native rendering boundary; the semantic accent and focus roles remain explicit.
+A bounded numeric value on a native slider with a visible output.
 
 ## Anatomy
 
-- **label:** Visible label linked to the input.
-- **input:** Native range control with caller-specified bounds.
-- **output:** Current numeric value linked using for.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Named content on the default surface. | Native text and structure. |
-| focus-visible | Dashed focus ring. | Native keyboard focus position. |
-| disabled | Disabled semantic foreground, background and border at full opacity. | Native disabled state blocks activation. |
+| default | named content on the default surface | native text and structure |
+| focus-visible | dashed focus ring | native focus position |
+| disabled | disabled foreground, background and border at full opacity | native disabled state blocks activation |
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Reach and leave the slider.
-- **Arrow keys / Home / End:** Use native stepping, minimum and maximum behavior.
+Native, as in the key table.
 
 ## Accessibility
 
-Retain the input's accessible name and native value semantics. The visible output does not replace its label. Put units in the label or help text. No value changes solely from receiving focus.
+The input keeps its accessible name and native value semantics; the output
+never replaces the label. Units go in the label or help text. Focus alone
+never changes the value.
 
 ## Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 ## Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls. Colour-only status. Drag-only operations. Hidden
+required instructions. Stolen focus. An invented service success.
diff --git a/spec/components/repeater.md b/spec/components/repeater.md
index 13535933e..a34700bd4 100644
--- a/spec/components/repeater.md
+++ b/spec/components/repeater.md
@@ -29,15 +29,22 @@ tokens:
   secondary.text: color.text.muted
   control.bg: color.surface.input
   control.focus: color.interaction.focus.ring
+  button.bg: color.action.secondary.bg
+  button.text: color.action.secondary.text
+  button.border: color.action.secondary.border
+  button.bg-hover: color.action.secondary.hover-bg
+  button.bg-active: color.action.secondary.pressed-bg
+  button.border-active: color.border.active
+  button.focus: color.interaction.focus.ring
   dependency.role-border-width-default: border.width.default
   dependency.role-color-border-disabled: color.border.disabled
   dependency.role-color-interaction-disabled-bg: color.interaction.disabled.bg
   dependency.role-color-text-disabled: color.text.disabled
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
-  dependency.role-space-2: space.2
   dependency.role-space-24: space.24
   dependency.role-space-8: space.8
 stateTokens:
@@ -57,6 +64,12 @@ contrast:
     min: 3
     kind: ui
     label: Control boundary
+  - fg: color.action.secondary.text
+    bg: color.surface.default
+    label: Button label
+  - fg: color.action.secondary.text
+    bg: color.action.secondary.hover-bg
+    label: Button label on hover
 anatomy:
   - part: rows
     description: Ordered list of independently named field rows.
@@ -102,36 +115,38 @@ compact: false
 
 ## Purpose
 
-Repeat native fields from trusted inert HTML. Add, remove and reorder preserve row identities. The host supplies fields and handles submission; the component does not execute a schema or provide persistence. A max attribute bounds the number of rows; the supplied example is limited to ten.
+A variable number of the same native field row in one form; the host owns
+the fields, submission and persistence.
 
 ## Anatomy
 
-- **rows:** Ordered list of independently named field rows.
-- **template:** Trusted native markup cloned on explicit Add.
-- **actions:** Add, remove, move up and move down; no drag-only behavior.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Named content on the default surface. | Native text and structure. |
-| empty | A muted empty message. | Explicit text and retained Add action. |
-| focus-visible | Dashed focus ring. | Native keyboard focus position. |
-| disabled | Disabled semantic foreground, background and border at full opacity. | Native disabled state blocks activation. |
+| default | named content on the default surface. Button controls are the secondary button (button.md); inputs keep the input look. | native text and structure |
+| empty | a muted empty message | explicit text; Add stays |
+| focus-visible | dashed focus ring | native focus position |
+| disabled | disabled foreground, background and border at full opacity | native disabled state blocks activation |
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Visit fields and row actions in source order.
-- **Enter / Space:** Add, remove or move a row. Focus follows the affected row or nearest survivor.
+As in the key table; nothing else is bound.
 
 ## Accessibility
 
-Namespace IDs and label/ARIA references for each row. Row identities do not change during reordering. Actions have names and disabled boundary states. Removing a focused row restores focus to a surviving row or Add; announce each explicit operation.
+IDs and label and ARIA references are namespaced per row. Actions are named
+and keep their boundary when disabled. Removing a focused row moves focus to
+a surviving row or to Add; each explicit operation is announced.
 
 ## Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 ## Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls. Colour-only status. Drag-only operations. Hidden
+required instructions. Stolen focus. An invented service success.
diff --git a/spec/components/search-field.md b/spec/components/search-field.md
index b038f7545..8a84e3ac6 100644
--- a/spec/components/search-field.md
+++ b/spec/components/search-field.md
@@ -61,7 +61,7 @@ contrast:
   - { fg: color.action.tertiary.text, bg: color.surface.input, label: "clear glyph on the input surface" }
   - { fg: color.action.tertiary.text, bg: color.action.tertiary.hover-bg, state: hover, label: "clear glyph on its hover fill" }
   - { fg: color.text.muted, bg: color.surface.default, label: "help and no-results status on the panel surface" }
-  - { fg: color.border.default, bg: color.surface.input, min: 1, kind: ui, label: "kbd hint edge (decorative)", waiver: "the hint is not a control; its text at 5.81:1 carries the meaning" }
+  - { fg: color.border.default, bg: color.surface.input, min: 1, kind: ui, label: "kbd hint edge (decorative)", waiver: "the hint is not a control; its text carries the meaning" }
   - { fg: color.text.disabled, bg: color.interaction.disabled.bg, min: 3, kind: ui, state: disabled, label: "disabled text (exempt; house floor 3:1)" }
   - { fg: color.border.disabled, bg: color.interaction.disabled.bg, min: 1, kind: ui, state: disabled, label: "disabled border (exempt)", waiver: "disabled controls are exempt from 1.4.11" }
 anatomy:
@@ -109,60 +109,49 @@ compact: false
 
 ## Purpose
 
-Filtering a list or table or searching a site. It is the text field's box
-with the parts a search needs: an icon that says what the box is for, a
-clear button, a place for the shortcut that reaches it, a loading glyph
-while results arrive and a status line when nothing matches. A search that
-offers suggestions as you type is the combobox component.
+Filtering a list or table, or searching a site. A search that suggests as you
+type is the combobox.
 
 ## Anatomy
 
-Label above (or visually hidden); the box with the magnifier, the input,
-the clear button and the optional hint; help; the status line. The loading
-glyph takes the magnifier's slot so the box never changes size.
+Parts as listed in the anatomy. The loading glyph takes the magnifier's slot,
+so the box never changes size.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.input}; magnifier {color.icon.default}; text {color.text.default} | the magnifier |
-| hover | background → {color.interaction.hover.bg}; the clear button → {color.action.tertiary.hover-bg} when hovered | cursor: text |
-| focus-visible | border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px; the hint hides | the ring |
-| placeholder-shown | placeholder in {color.text.placeholder}, italic; no clear button | italic; the clear button is absent |
-| filled | as default with a value; the clear button is present | the clear button |
-| loading | the static `⋯` glyph in {color.text.muted} replaces the magnifier; the input stays editable | glyph; `aria-busy` |
-| disabled | text and icon {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no clear button | `disabled`; cursor: not-allowed |
-| no-results | the status line "No results for …" in {color.text.muted} below the help; the box unchanged | the status text; `role="status"` |
+| hover | background → {color.interaction.hover.bg}; a hovered clear button → {color.action.tertiary.hover-bg} | cursor: text |
+| focus-visible | border → {color.border.active}; 1px dashed {color.interaction.focus.ring} ring at −2px; the hint hides | the ring |
+| placeholder-shown | placeholder in {color.text.placeholder}, italic; no clear button | italic; clear button absent |
+| filled | as default with a value; clear button present | the clear button |
+| loading | static `⋯` in {color.text.muted} replaces the magnifier; input stays editable | glyph; `aria-busy` |
+| disabled | text and icon {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; no clear button | `disabled`; cursor: not-allowed |
+| no-results | status line "No results for …" in {color.text.muted} below the help; box unchanged | the status text; `role="status"` |
 
-Precedence: disabled > loading > hover; focus-visible is always drawn.
-A search field is never invalid; an empty result is a status, not an error.
+Precedence: disabled > loading > hover; focus-visible is always drawn. A
+search field is never invalid; an empty result is a status, not an error.
 
 ## Keyboard
 
-Escape clears a non-empty value and keeps focus, which is native for
-`type="search"` in most engines and scripted where it is not. The clear
-button is a separate tab stop only while it is visible. The shortcut in the
-hint is bound by the host and never captured while another field has focus.
+Escape-to-clear is native for `type="search"` in most engines and scripted
+where it is not. The host never captures the shortcut while another field has
+focus.
 
 ## Accessibility
 
-A programmatic label is required even when hidden. The landmark
-`role="search"` lets users jump to it. The status line is `role="status"`
-so "No results" is announced once, after the query settles, and the result
-count is announced there too ("12 results"). The magnifier and hint are
-`aria-hidden`; the clear button is named "Clear <label>". Contrast: text
-8.65:1, placeholder 5.81:1, magnifier 8.65:1, glyph 5.81:1, hint 5.81:1,
-control border 4.45:1.
+A programmatic label is required even when hidden. The status line announces
+"No results" once, after the query settles, and the result count there too
+("12 results"). The clear button is named "Clear <label>". Text meets 4.5:1;
+the magnifier, borders and rings 3:1.
 
 ## Portability
 
-The text field plus icons and a status line. Hosts hide their own cancel
-button; hosts that cannot draw the hint omit it and keep the shortcut in the
-tooltip.
+Hosts that cannot draw the hint omit it and keep the shortcut in the tooltip.
 
 ## Non-examples
 
-Rounded or pill-shaped search boxes. A magnifier button that submits
-instead of an icon. A spinner while loading. Results announced on every
-keystroke. "No results" in red or with the ✕ glyph. A clear button that is
-always visible. A search field without a label. Disabling by opacity.
+Rounded or pill-shaped boxes. A magnifier button that submits. A spinner while
+loading. Results announced on every keystroke. "No results" in red or with
+the ✕ glyph. An always-visible clear button. No label. Disabling by opacity.
diff --git a/spec/components/segmented-control.md b/spec/components/segmented-control.md
index 3866b6074..9244755ff 100644
--- a/spec/components/segmented-control.md
+++ b/spec/components/segmented-control.md
@@ -55,7 +55,6 @@ tokens:
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
   dependency.role-space-16: space.16
-  dependency.role-space-2: space.2
   dependency.role-space-24: space.24
   dependency.role-space-4: space.4
   dependency.role-space-8: space.8
@@ -118,16 +117,16 @@ compact: false
 
 ## Purpose
 
-Choose one value from a short labelled set using native radios. This changes a value; use tabs for associated content panels. Native names, required checks, disabled fieldsets and form reset are preserved.
+Changes one value from a short labelled set; for associated content panels
+use tabs.
 
 ## Anatomy
 
-- **fieldset:** Legend names the choice.
-- **options:** Native radios sharing one name, each with a visible label.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Named content on the default surface. | Native text and structure. |
 | checked | Selected fill and a check indicator. | Native checked state. |
@@ -136,12 +135,13 @@ Choose one value from a short labelled set using native radios. This changes a v
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Enter the native radio group once and leave it.
-- **Arrow keys / Space:** Use native radio selection and wrapping.
+As in the key table.
 
 ## Accessibility
 
-Keep native radios and labels. A checked value has both a visible native indicator and its programmatic checked state. Do not hide all radios from assistive technology or put role=tab on the labels.
+Keep native radios and labels. A checked value has both a visible native
+indicator and its programmatic checked state. Never hide all radios from
+assistive technology or put `role=tab` on the labels.
 
 ## Portability
 
diff --git a/spec/components/select.md b/spec/components/select.md
index eb5d596c9..b899e96a9 100644
--- a/spec/components/select.md
+++ b/spec/components/select.md
@@ -110,18 +110,14 @@ compact: true
 
 ## Purpose
 
-Choosing one option, or several, from a fixed list. D-025 requires theme-owned
-choice surfaces in web applications. The native select remains the form-value
-and constraint source. A searchable or asynchronous list is the separate
-combobox component.
+One or several options from a fixed list. D-025 requires theme-owned choice
+surfaces in web applications; the native select stays the form-value and
+constraint source. A searchable or asynchronous list is `combobox`.
 
 ## Anatomy
 
-Label above; a theme-owned trigger and listbox for single choices, or an
-always-visible multiselectable listbox. Each selected option has a check mark
-and the canonical selection fill. The hidden native `<select>` retains its
-name, options, current values and defaults. Help and validation are linked
-to the visible control. Without JavaScript the original native control is visible.
+Each selected option has a check mark and the selection fill. The hidden
+native `<select>` keeps its name, options, current values and defaults.
 
 ## States
 
@@ -129,49 +125,44 @@ to the visible control. Without JavaScript the original native control is visibl
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.input}; value {color.text.default}; chevron {color.icon.default} | the chevron |
 | hover | background → {color.interaction.hover.bg}; border unchanged | cursor: default; hover-capable pointers only |
-| focus-visible | border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| focus-visible | border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px | the ring |
 | required | `*` after the label in {color.status.danger.text} plus visually hidden "required" | `required`; the mark |
-| invalid | border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
-| invalid+focus-visible | the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
-| disabled | text and chevron {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg} | `disabled`; cursor: not-allowed |
+| invalid | 2px {color.status.danger.border}; message with ✕ | border 1 → 2px; glyph; `aria-invalid` |
+| invalid+focus-visible | 2px danger border and {color.interaction.focus.ring-container} ring at −4px | double boundary |
+| disabled | text and chevron {color.text.disabled}; {color.border.disabled}; {color.interaction.disabled.bg} | `disabled`; cursor: not-allowed |
 
-Inside the theme-owned list, a selected option is
-{color.interaction.selection.bg} with {color.interaction.selection.text} and
-group labels are {color.text.muted} on {color.surface.raised}. Precedence:
-disabled > invalid > hover; focus-visible is always drawn.
+In the list, a selected option is {color.interaction.selection.bg} with
+{color.interaction.selection.text}; group labels {color.text.muted} on
+{color.surface.raised}. Precedence: disabled > invalid > hover; focus-visible
+is always drawn.
 
 ## Keyboard
 
-The single control follows the select-only combobox pattern: arrows open and
-move the active option, Home/End reach the ends, typing finds an option, and
-Enter/Space commits. Escape and Tab close without committing. Multiple choices
-use arrows, Space or click to toggle, Shift with arrows for a range, and
-Ctrl/Command+A to select or clear all enabled choices. No modifier is required
-for ordinary multiple selection. The native fallback uses host keyboard behavior.
+As in the key table, plus Home/End to the ends of the single list. Ordinary
+multiple selection needs no modifier. The native fallback keeps host
+behaviour.
 
 ## Accessibility
 
-A programmatic label is required; the first option is a real choice or a
-placeholder option that is `disabled` and `selected` with text such as
-"Choose a workspace", never an empty string. `aria-invalid="true"` only after
-interaction or submit. Help and message through `aria-describedby`. The
-themed popup uses the declared contrast roles. The visible control receives
-the label, required/invalid state and descriptions. A failed native constraint
-focuses that visible control and exposes a theme-owned error. Disabled options,
-optgroups and fieldsets remain unavailable. Current values and defaults survive
+A programmatic label is required. The first option is a real choice or a
+`disabled` `selected` placeholder with text ("Choose a workspace"), never
+empty. `aria-invalid="true"` only after interaction or submit. The visible
+control carries the label, required and invalid state, and descriptions
+(help and message via `aria-describedby`). A failed native constraint focuses
+the visible control and shows a theme-owned error. Disabled options,
+optgroups and fieldsets stay unavailable. Values and defaults survive
 reconnection, programmatic updates and form reset. Automated evidence records
-its actual environments; it does not imply a manual screen-reader pass.
+its real environments and implies no manual screen-reader pass.
 
 ## Portability
 
-Use the packaged behavior and complete copy closure for web implementations.
-The supported enhancement can apply the same renderer to existing selects
-without moving them or duplicating form values. Native platforms keep the
-mappings listed above; no-JavaScript pages expose the native fallback.
+Web implementations use the packaged behaviour and its complete copy closure.
+The enhancement can apply the same renderer to existing selects without
+moving them or duplicating form values.
 
 ## Non-examples
 
-An unthemed browser popup presented as a fully themed implementation. A background-image chevron in
-a literal colour. Rounded corners. A select whose first option is blank. A
-select that triggers navigation on change. Invalid shown by colour alone.
-A glow instead of the ring. Disabling by opacity.
+An unthemed browser popup presented as fully themed. A background-image
+chevron in a literal colour. Rounded corners. A blank first option. Navigation
+on change. Invalid by colour alone. A glow instead of the ring. Disabling by
+opacity.
diff --git a/spec/components/settings-panel.md b/spec/components/settings-panel.md
index 12f6dc6e1..328ec204b 100644
--- a/spec/components/settings-panel.md
+++ b/spec/components/settings-panel.md
@@ -81,7 +81,7 @@ keyboard:
   - key: Tab / Shift+Tab
     action: Walks the section links, then the controls in reading order, then Apply and Reset; nothing inside is a composite widget, so every control is its own stop.
   - key: Enter / Space
-    action: Follows a section link; toggles a switch or checkbox; opens the select.
+    action: Enter follows a section link; Space toggles a switch or native checkbox; Enter or Space opens the select.
   - key: Arrow keys
     action: Move within the radio-group and the select's options; step the numeric field.
   - key: Escape
@@ -103,68 +103,47 @@ compact: false
 
 ## Purpose
 
-A settings screen that proves the form components compose without new
-tokens: a section list on the left, one fieldset of preferences on the
-right, and a footer of actions. It exists to show the pieces together under
-every state and at every width, not to prescribe a product.
+Proves the form components compose without new tokens, in every state and
+at every width; it prescribes no product.
 
 ## Anatomy
 
-The region landmark; the sidebar-nav with the open section marked by
-`aria-current` and the 2px {color.border.selected-indicator}; the form
-landmark with its h2 in {color.text.bright} and lead in {color.text.muted};
-one fieldset with a {color.border.divider} edge holding two switches (Hide
-the bar, Smart gaps), a wallpaper select, the bar-label radio-group (中文 /
-English), the inner-gap text-field with a `px` suffix and the bar-module
-checkbox group; a footer rule and the Apply (primary) and Reset (secondary)
-buttons. Every part is the component's own markup and classes.
+Parts as listed in the anatomy; each uses its component's own markup and
+classes.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | rest tokens of every component on {color.surface.default}; the open section carries the indicator bar | `aria-current` |
-| focus-visible | the dashed {color.interaction.focus.ring} on the control holding focus (shown on the first switch); the other controls stay at rest | the ring |
-| invalid | the inner-gap field takes the 2px {color.status.danger.border} and shows its ✕ message; the other controls stay at rest | border width 1 → 2px; glyph; `aria-invalid` |
+| default | every component's rest tokens on {color.surface.default}; the open section carries the indicator bar | `aria-current` |
+| focus-visible | the dashed {color.interaction.focus.ring} on the focused control (shown on the first switch); others at rest | the ring |
+| invalid | the inner-gap field takes the 2px {color.status.danger.border} and its ✕ message; others at rest | border width 1 → 2px; glyph; `aria-invalid` |
 | busy | Apply shows the static ⋯ glyph in {color.action.primary.text}; the form carries `aria-busy`; nothing shrinks or animates | glyph; `aria-busy`; cursor: progress |
 
 The composed components keep their own hover, checked, disabled and
-read-only treatments; this specimen declares only the states the screen adds
-to them.
+read-only treatments; only the states the screen adds are declared here.
 
 ## Keyboard
 
-Landmarks first: a screen reader's landmark list offers the region, the
-navigation and the form by name. Tab walks the section links, then every
-control in reading order, then Apply and Reset. The radio-group and the
-select move with arrows inside one stop; the numeric field steps with Up and
-Down; switches and checkboxes toggle with Space. Nothing traps focus and
-nothing changes on hover alone.
+As in the key table. Nothing traps focus and nothing changes on hover alone.
 
 ## Accessibility
 
-The region is named by the h2 through `aria-labelledby`; the nav has its own
-label so two navigation landmarks on a page stay distinguishable; the open
-section is `aria-current="page"`. The form is named by the same h2 and
-carries `aria-busy="true"` while Apply is in progress, so the pending state
-is announced without a live region. Every control has a programmatic label;
-every message is linked by `aria-describedby`. Contrast: title 10.10:1 and
-lead 5.66:1 on the panel surface, control boundaries 4.33:1, the indicator
-bar 4.57:1, the danger border 4.69:1 on the input surface.
+The nav has its own label, so two navigation landmarks on a page stay
+distinguishable; the open section is `aria-current="page"`. `aria-busy` on the form announces the pending Apply without
+a live region. Every control has a programmatic label; every message is
+linked by `aria-describedby`. Text meets 4.5:1; control boundaries, the
+indicator bar and the danger border 3:1.
 
 ## Portability
 
-Three landmarks, native controls and a container query; nothing here needs a
-script. A host without container queries collapses the sidebar at the 600px
-viewport breakpoint. The 56rem reference width, the sidebar width and the
-two-column grid belong to this specimen and are not rules; the specimen
-proves composition, not a product. Toolkits port each contained component
-through its own mapping and place them with their native layout.
+The sidebar width is specimen layout too, not a rule. Toolkits port each
+contained component through its own mapping and place them with their native
+layout.
 
 ## Non-examples
 
 A rounded, shadowed settings card. A Material-style app bar above the form.
-Toggle switches with rounded pills or animated thumbs. Section links drawn
-as filled tabs instead of the indicator bar. A red form background to show
-that something is invalid. Applying while the controls are dimmed with
-opacity. A spinner replacing the Apply label.
+Pill switches or animated thumbs. Section links as filled tabs instead of
+the indicator bar. A red form background for invalid. Dimming the controls
+with opacity while applying. A spinner replacing the Apply label.
diff --git a/spec/components/sidebar-nav.md b/spec/components/sidebar-nav.md
index 99d72d4e1..82c86409a 100644
--- a/spec/components/sidebar-nav.md
+++ b/spec/components/sidebar-nav.md
@@ -43,7 +43,7 @@ tokens:
   current.text: color.text.bright
   selected.bg: color.interaction.selection.bg
   selected.text: color.interaction.selection.text
-  selected.ring: color.interaction.focus.ring-container
+  selected.ring: color.interaction.focus.ring
   selected.inactive-bg: color.interaction.selection.inactive-bg
   selected.inactive-text: color.interaction.selection.inactive-text
   icon.stroke: color.icon.default
@@ -58,7 +58,7 @@ stateTokens:
   expanded: { fg: color.text.default, bg: color.surface.default }
   collapsed: { fg: color.text.default, bg: color.surface.default }
 contrast:
-  - { fg: color.interaction.focus.ring-container, bg: color.interaction.selection.bg, min: 3, kind: ui, state: selected, label: "ring on a selected item when focused" }
+  - { fg: color.interaction.focus.ring, bg: color.interaction.selection.bg, min: 3, kind: ui, state: selected, label: "ring on a selected item when focused" }
   - { fg: color.icon.decorative, bg: color.surface.default, min: 1, kind: ui, label: "group chevron (decorative; aria-expanded carries the state)", waiver: "the chevron duplicates aria-expanded and the visible children; it is not the only channel" }
   - { fg: color.border.divider, bg: color.surface.default, min: 1, kind: ui, label: "rail edge (decorative)", waiver: "the edge separates the rail from the canvas; the links are the targets" }
 anatomy:
@@ -98,69 +98,55 @@ compact: false
 
 ## Purpose
 
-Moves between the sections of an application. The sidebar is the primary
-navigation of a settings panel, an admin area or a documentation site; tabs
-switch views inside one section, and a tree browses data rather than
-sections.
+Moves between the sections of an application: the primary navigation of a
+settings panel, admin area or documentation site. Tabs switch views inside
+one section; a tree browses data, not sections.
 
 ## Anatomy
 
 A `nav` on {color.surface.default} with a 1px {color.border.divider}
-inline-end edge. Each link is one row: an icon slot, a label in
-{color.text.default}, and a transparent 2px inline-start edge. The current
-link colours that edge with {color.border.selected-indicator} and its text
-with {color.text.bright}. Groups are buttons with a chevron in
-{color.icon.decorative}; their children sit in a sublist indented by one icon
-width. Collapsed, the rail keeps the icons and hides the labels visually.
+inline-end edge; otherwise parts as listed in the anatomy.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | text {color.text.default}; no fill; transparent inline-start edge | — |
-| hover | background → {color.interaction.hover.bg} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| hover | → {color.interaction.hover.bg} | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px | the ring |
 | current | 2px {color.border.selected-indicator} inline-start bar; text {color.text.bright} | `aria-current="page"`; the bar |
-| selected | fill {color.interaction.selection.bg} with {color.interaction.selection.text}; the ring in {color.interaction.focus.ring-container} when focused | `aria-selected` on a listbox-style rail; the fill's on-fill text |
-| selected+container-inactive | fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring | lightness drop between the two fills |
-| expanded | the group's chevron rotated 90°; its sublist shown | `aria-expanded="true"`; the children are present |
-| collapsed | labels visually hidden; icons centred; the current bar and fills unchanged | the labels remain for assistive technology and as tooltips |
+| selected | {color.interaction.selection.bg} with {color.interaction.selection.text}; 1px dashed {color.interaction.focus.ring} at −2px when focused | `aria-selected` on a listbox-style rail; the on-fill text |
+| selected+container-inactive | {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring | lightness drop between the two fills |
+| expanded | chevron rotated 90°; sublist shown | `aria-expanded="true"`; the children are present |
+| collapsed | labels visually hidden; icons centred; current bar and fills unchanged | labels remain for assistive technology and as tooltips |
 
 `current` is where the user is; `selected` is what the user chose in a rail
-that drives a detail pane. A rail is one or the other, never both at once.
+that drives a detail pane. A rail is one or the other, never both.
 
 ## Keyboard
 
-Every link and every group button is a tab stop in document order; children
-of a closed group are hidden and skipped. Enter follows a link; Enter or Space
-toggles a group and leaves focus on the button. There is no arrow-key model:
-the rail is a list of links, not a tree, so the native tab order is the whole
-contract.
+As in the key table; toggling a group leaves focus on its button. No arrow
+keys: the rail is a list of links, not a tree.
 
 ## Accessibility
 
-`aria-label` on the `nav` distinguishes it from other landmarks. The current
-link carries `aria-current="page"`; a rail that drives a detail pane uses a
-listbox with `aria-selected` instead of links. Group buttons carry
-`aria-expanded` and `aria-controls`; the sublist is `hidden` until expanded
-so its links leave the tab order. Collapsed labels use a clip-rect hiding, not
-`display: none`, so names survive; icon-only links also get a `title`.
-Contrast: text 8.43:1, current text 10.10:1, indicator 4.57:1, selection text
-12.47:1 on the fill, inactive selection 7.02:1. Rows are at least 24 CSS pixels
-tall in `compact` density.
+`aria-label` on the `nav` distinguishes the landmark. A rail that drives a
+detail pane is a listbox with `aria-selected`, not links. A closed sublist is
+`hidden`, so its links leave the tab order. Collapsed labels are clipped, not
+`display: none`, so names survive; icon-only links also get a `title`. Text
+meets 4.5:1; the indicator 3:1. Rows are at least 24 CSS pixels tall in
+`compact`.
 
 ## Portability
 
-A border-inline-start, a background and an outline; the chevron is an SVG.
-Toolkits without logical borders draw the bar on the left in LTR and on the
-right in RTL explicitly. The collapsed rail is a width change and a hidden
-label; hosts that cannot hide labels while keeping their names show the full
-rail.
+The chevron is an SVG. Toolkits without logical borders draw the bar on the
+left in LTR and on the right in RTL explicitly. Hosts that cannot hide labels while keeping their
+names show the full rail.
 
 ## Non-examples
 
 A filled or rounded current item. The indicator on the inline-end edge. A
-current item marked by bold text alone. Labels removed from the DOM when
-collapsed. A group whose children stay in the tab order while hidden. A rail
-that scrolls horizontally. Icon-only links with no accessible name. Hover that
-changes the text colour.
+current item marked by bold alone. Labels removed from the DOM when
+collapsed. Hidden children left in the tab order. A rail that scrolls
+horizontally. Icon-only links without an accessible name. Hover that changes
+the text colour.
diff --git a/spec/components/skeleton.md b/spec/components/skeleton.md
index b436fa5fe..89ea2da8a 100644
--- a/spec/components/skeleton.md
+++ b/spec/components/skeleton.md
@@ -31,10 +31,10 @@ tokens:
   dependency.role-border-width-default: border.width.default
   dependency.role-color-border-divider: color.border.divider
   dependency.role-color-surface-raised: color.surface.raised
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
   dependency.role-space-16: space.16
-  dependency.role-space-2: space.2
 stateTokens:
   default:
     fg: color.text.default
@@ -91,33 +91,37 @@ compact: false
 
 ## Purpose
 
-Reserve approximate layout space while a named region loads. Decorative blocks are hidden from accessibility APIs. A separate status describes loading. The skeleton is static and never shimmers.
+Reserves approximate layout space while a named region loads. Static; it
+never shimmers.
 
 ## Anatomy
 
-- **status:** Text names what is loading.
-- **blocks:** Decorative square placeholders retain approximate dimensions.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | Static decorative blocks. | Named loading status. |
-| loading | Raised surface blocks; no opacity fade. | aria-busy on the region. |
-| reduced-motion | Same static presentation. | No information depends on movement. |
+| default | static decorative blocks | named loading status |
+| loading | raised-surface blocks; no opacity fade | `aria-busy` on the region |
+| reduced-motion | the same static presentation | no information depends on movement |
 
 ## Keyboard
 
-- **Tab:** No new tab stops or focus capture.
+Adds no tab stop and captures no focus.
 
 ## Accessibility
 
-Apply aria-busy to the region being updated and provide a concise status. Decorative blocks are aria-hidden. Do not remove the focused control merely to show a skeleton. Replacement content must keep a sensible reading order.
+`aria-busy` goes on the region being updated, with a concise status;
+blocks are `aria-hidden`. Never remove the focused control just to show a
+skeleton. Replacement content keeps a sensible reading order.
 
 ## Portability
 
-Follows the shared component defaults in `spec/portability.md` (section "Shared component defaults").
+Follows the shared component defaults in `spec/portability.md` (section
+"Shared component defaults").
 
 ## Non-examples
 
-Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.
+Unlabelled controls. Colour-only status. Drag-only operations. Hidden
+required instructions. Stolen focus. An invented service success.
diff --git a/spec/components/skip-link.md b/spec/components/skip-link.md
index 50cd51199..e2ab9bec2 100644
--- a/spec/components/skip-link.md
+++ b/spec/components/skip-link.md
@@ -53,52 +53,45 @@ compact: false
 
 ## Purpose
 
-Lets a keyboard user bypass the header, navigation and toolbars in one
-press. It satisfies WCAG 2.4.1 for pages that have repeated blocks before
-the content; a page with nothing before `main` does not need one.
+Lets a keyboard user bypass the header, navigation and toolbars in one press,
+satisfying WCAG 2.4.1. A page with nothing before `main` does not need one.
 
 ## Anatomy
 
-One anchor, first in the body, with `href` pointing at the `main` landmark.
-It is a small raised card: {color.surface.raised}, 1px {color.border.overlay},
-text {color.text.bright}, at the top inline-start corner at `z.skip-link`.
-Off-screen at rest (a negative top), on-screen while focused.
+A small raised card: {color.surface.raised}, 1px {color.border.overlay}, text
+{color.text.bright}.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | off-screen; nothing is painted | the link is still in the tab order and the accessibility tree |
-| focus-visible | appears in the top corner; ring 1px dashed {color.interaction.focus.ring} at −2px | the link appears; the ring |
+| default | off-screen; nothing painted | still in the tab order and the accessibility tree |
+| focus-visible | appears in the top corner; 1px dashed {color.interaction.focus.ring} ring at −2px | the link appears; the ring |
 
-There is no hover state: a pointer cannot reach it while it is hidden, and
-once visible it behaves as a link.
+No hover state: a pointer cannot reach the hidden link, and once visible it
+behaves as a link.
 
 ## Keyboard
 
-Tab from the top of the document reaches it first. Enter moves focus to
-`main`, which carries `tabindex="-1"` so the browser's focus actually lands
-there and the next Tab continues inside the content. Tab away hides it again.
+As in the key table; after Enter the next Tab continues inside the content.
 
 ## Accessibility
 
-The link text names the destination ("Skip to content"), translated. Hiding
-uses position only, so the link remains in the accessibility tree; `display:
-none`, `visibility: hidden` and `aria-hidden` all defeat it. The reveal is an
-instant position change: nothing slides, so reduced motion needs no special
-case. Contrast: text 10.10:1 on the raised surface, frame 4.57:1,
-ring 4.57:1. The visible target is at least 24 CSS pixels tall.
+The link text names the destination ("Skip to content"), translated.
+`aria-hidden` defeats it as surely as `display: none` or `visibility: hidden`.
+The reveal is an instant position change, so reduced motion needs no special
+case. Text meets 4.5:1; frame and ring 3:1. The visible target is at least 24
+CSS pixels tall.
 
 ## Portability
 
-Web-only. Frameworks that render their own header keep this exact markup
-first in the body; a host stylesheet that removes outlines must restore the
-ring here. The reference site uses this component for its own skip link.
+Web-only. Frameworks that render their own header keep this exact markup first
+in the body; a host stylesheet that removes outlines must restore the ring
+here. The reference site uses this component for its own skip link.
 
 ## Non-examples
 
-A skip link that is always visible. One hidden with `display: none` or
-`visibility: hidden`. One that is not the first tab stop. One that points at
-an element without `tabindex="-1"`, so focus does not move. A skip link
-that slides in from the side and causes horizontal scroll while hidden. A
-rounded pill. One rendered without the frame on the canvas.
+Always visible. Hidden with `display: none` or `visibility: hidden`. Not the
+first tab stop. Pointing at an element without `tabindex="-1"`, so focus does
+not move. Sliding in from the side and causing horizontal scroll while hidden.
+A rounded pill. Rendered without the frame on the canvas.
diff --git a/spec/components/switch.md b/spec/components/switch.md
index b6d4b5133..0e1779a2f 100644
--- a/spec/components/switch.md
+++ b/spec/components/switch.md
@@ -93,28 +93,26 @@ compact: false
 
 ## Purpose
 
-A setting that turns on or off the moment it is toggled: notifications,
-wrap lines, follow system theme. A choice that is only applied on submit is
-a checkbox. The switch is a button because it acts; it is not a form field.
+A setting that applies the moment it is toggled: notifications, wrap lines,
+follow system theme. A choice applied on submit is a checkbox. The switch is
+a button because it acts; it is not a form field.
 
 ## Anatomy
 
-A `<button role="switch">`; inside it the track, a 32×16px box with square
-corners, and the thumb, a 10px square that sits at the start when off and
-at the end when on. The with-labels variant adds a visible name before the
-button and an "Off" / "On" word after the track.
+Parts as listed in the anatomy; the thumb sits at the start when off and at
+the end when on.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | track 1px {color.border.control} on {color.surface.input}; thumb {color.text.default} at the start | thumb position |
-| hover | track background → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the track | the ring |
-| checked | track fills {color.action.primary.bg}; thumb {color.action.primary.text} moves to the end; border stays {color.border.control}; the word reads "On" | `aria-checked="true"`; thumb position; the word |
-| checked+focus-visible | the fill and a ring in {color.interaction.focus.ring-container} on the track | position and ring |
-| disabled | track {color.interaction.disabled.bg} with 1px {color.border.disabled}; thumb and name {color.text.disabled} | `disabled`; cursor: not-allowed |
-| checked+disabled | as disabled with the thumb at the end | `disabled`; `aria-checked="true"`; thumb position |
+| hover | off track → {color.interaction.hover.bg}; on track → {color.action.primary.hover-bg} | cursor: pointer; hover-capable pointers only |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the track | the ring |
+| checked | track fills {color.action.primary.bg}; thumb {color.action.primary.text} at the end; border stays {color.border.control}; the word reads "On" | `aria-checked="true"`; thumb position; the word |
+| checked+focus-visible | the fill and a {color.interaction.focus.ring-container} ring on the track | position and ring |
+| disabled | track {color.interaction.disabled.bg}, 1px {color.border.disabled}; thumb and name {color.text.disabled} | `disabled`; cursor: not-allowed |
+| checked+disabled | as disabled, thumb at the end | `disabled`; `aria-checked="true"`; thumb position |
 
 The thumb moves without animation by default; a host may transition
 `transform` for at most 120ms under `prefers-reduced-motion:
@@ -123,29 +121,25 @@ always drawn.
 
 ## Keyboard
 
-Space and Enter toggle. Nothing else is bound; there is no arrow-key
-movement between switches. Focus never moves as a result of toggling.
+As in the key table; no arrow keys between switches. Toggling never moves
+focus.
 
 ## Accessibility
 
-`role="switch"` on a native button gives the correct name, role and value
-with the button's own keyboard handling; only `aria-checked` is scripted.
-The name states what is on ("Wrap long lines"), never the current value;
-the "Off" / "On" word is `aria-hidden` because assistive technology reads
-`aria-checked`. The state is also carried by thumb position and, in the
-with-labels variant, the word. Contrast: thumb 8.65:1 on the off track,
-9.28:1 on the on track; track edge 4.45:1; ring 4.69:1 off, 5.57:1 on.
+On a native button only `aria-checked` is scripted. The name states what is
+on ("Wrap long lines"), never the current value. Thumb position and, with
+labels, the word also carry the state. The thumb and track edge meet 3:1,
+the ring 3:1 off and on.
 
 ## Portability
 
-Two nested rectangles, a border and a fill; the thumb position is layout,
-not a transform, so it survives hosts with no animation. Hosts with a native
-switch use it, square it, and map the two fills.
+The thumb position is layout, not a transform, so it survives hosts with no
+animation. Hosts with a native switch use it, square it, and map the two
+fills.
 
 ## Non-examples
 
-A pill-shaped track or a round thumb. A switch that only takes effect on
-submit. A checkbox input styled as a switch. Colour as the only difference
-between on and off. A green on colour. A label that reads "On" as the name.
-Disabling by opacity. A sliding animation longer than 120ms or one that
-runs under reduced motion.
+A pill track or round thumb. A switch that applies on submit. A checkbox
+input styled as a switch. Colour as the only on/off difference. A green on
+colour. "On" as the name. Disabling by opacity. A slide longer than 120ms or
+one under reduced motion.
diff --git a/spec/components/table.md b/spec/components/table.md
index 8c72e801f..4871a500e 100644
--- a/spec/components/table.md
+++ b/spec/components/table.md
@@ -46,7 +46,7 @@ tokens:
   row.bg-hover: color.interaction.hover.bg
   selected.bg: color.interaction.selection.bg
   selected.text: color.interaction.selection.text
-  selected.ring: color.interaction.focus.ring-container
+  selected.ring: color.interaction.focus.ring
   selected.inactive-bg: color.interaction.selection.inactive-bg
   selected.inactive-text: color.interaction.selection.inactive-text
   caption.text: color.text.muted
@@ -56,7 +56,7 @@ stateTokens:
   default: { fg: color.text.default, bg: color.surface.default }
   hover: { fg: color.text.default, bg: color.interaction.hover.bg }
   selected: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg }
-  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring-container }
+  selected+focus-visible: { fg: color.interaction.selection.text, bg: color.interaction.selection.bg, outline: color.interaction.focus.ring }
   selected+container-inactive: { fg: color.interaction.selection.inactive-text, bg: color.interaction.selection.inactive-bg }
   sorted: { fg: color.text.bright, bg: color.surface.default }
   empty: { fg: color.text.muted, bg: color.surface.default }
@@ -107,70 +107,55 @@ compact: true
 
 ## Purpose
 
-Shows records as rows and attributes as columns so they can be compared
-down a column. The table is for reading; a table with selection
-checkboxes, resizable columns and a toolbar is the data-table. A single
-column of rows is a list.
+Records as rows, attributes as columns, compared down a column. For
+reading only: selection, resizing and a toolbar make it a `data-table`; a
+single column of rows is a `list`.
 
 ## Anatomy
 
-A collapsed native table on {color.surface.default} with no outer border.
-The header row is {color.text.bright} above a 1px {color.border.strong} rule
-(2px when the header is sticky, on {color.surface.raised}); sortable headers
-wrap their label in a button and show ▲ or ▼ when sorted. Body rows are the
-row height, separated by 1px {color.border.divider}, text in
-{color.text.default}; numeric cells are end-aligned with tabular numbers.
-An optional caption in {color.text.muted} sits above. Two special rows,
-hidden unless needed, span every column: the empty message and the loading
-glyph.
+Parts as listed in the anatomy; the sticky header sits on
+{color.surface.raised}.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | rows on {color.surface.default}; header rule 1px {color.border.strong} | — |
-| hover | row background → {color.interaction.hover.bg} | cursor: default; only on hover-capable pointers |
+| hover | row → {color.interaction.hover.bg} | cursor: default; hover-capable pointers only |
 | selected | row fill {color.interaction.selection.bg}; every cell {color.interaction.selection.text} | `aria-selected="true"` on the row |
-| selected+focus-visible | the fill and a ring in {color.interaction.focus.ring-container} around the row | both visible at once |
+| selected+focus-visible | the fill and 1px dashed {color.interaction.focus.ring} at −2px around the row | both visible at once |
 | selected+container-inactive | row fill {color.interaction.selection.inactive-bg} with {color.interaction.selection.inactive-text}; no ring | lightness drop between the two fills |
-| sorted | the sorted header shows ▲ (ascending) or ▼ (descending) in {color.text.bright} | `aria-sort`; the glyph |
-| empty | the body is one full-width cell in {color.text.muted}: "No rows match." | the message text |
-| loading | the body is one full-width cell with the static `⋯` glyph in {color.text.muted}; the header stays | `aria-busy="true"`; the glyph; no animation |
+| sorted | ▲ (ascending) or ▼ (descending) in {color.text.bright} on the sorted header | `aria-sort`; the glyph |
+| empty | one full-width cell in {color.text.muted}: "No rows match." | the message text |
+| loading | one full-width cell with the static `⋯` glyph in {color.text.muted}; the header stays | `aria-busy="true"`; the glyph; no animation |
 
 Precedence: loading > empty; selected > hover; focus-visible is always
 drawn.
 
 ## Keyboard
 
-A plain table has no row focus: Tab reaches the sort buttons in the header
-and any control inside a cell. Enter or Space on a sort button cycles
-ascending, descending. Tables whose rows are targets (row links, row
-selection) are the data-table and add row focus there.
+As in the key table. Rows that are targets (row links, row selection) make
+it a `data-table`, which adds row focus.
 
 ## Accessibility
 
-`caption` or `aria-labelledby` names the table; `th scope="col"` on every
-header and `scope="row"` on a row header column. `aria-sort` on the sorted
-`th`, `none` or absent elsewhere; the glyph is `aria-hidden`. The empty and
-loading rows are real rows so the table stays a table; `aria-busy="true"`
-on the table while loading and a live region for the outcome. Contrast:
-body text 8.43:1, header 10.10:1, caption and empty message 5.66:1, selected
-text 12.47:1 on the fill, inactive 7.02:1, ring 7.48:1 on the fill, sort ring
-4.57:1. Rows are at least 24 CSS pixels tall; sort buttons fill the header
-cell.
+`caption` or `aria-labelledby` names the table; `scope="row"` on a row
+header column. `aria-sort` is `none` or absent on unsorted headers; the
+glyph is `aria-hidden`. Empty and loading rows are real rows; a live region
+reports the loading outcome. Text meets 4.5:1; rings 3:1. Rows are at least
+24 CSS pixels tall; sort buttons fill the header cell.
 
 ## Portability
 
 Row backgrounds, one border under the header, one between rows, an outline
-on a selected row. Toolkits with a native table view take the rule, the
-divider and the two fills. Hosts that cannot draw an outline on a row draw
-the ring as an inset 1px border and record it.
+on a selected row. Native table views take the rule, the divider and the two
+fills. A host that cannot outline a row draws the ring as an inset 1px
+border and records it.
 
 ## Non-examples
 
-Zebra striping. A rounded or bordered table frame. A selected row marked by
-a left bar (that is navigation, not selection). Header text in caption size
-or uppercase. Sorting shown by colour alone without `aria-sort` and a glyph.
-An animated spinner while loading. An empty state that removes the header.
-Text truncated with no way to read the full value. A hover fill on a
-touch device.
+Zebra striping. A rounded or bordered frame. A selected row marked by a
+left bar (that is navigation). Header text in caption size or uppercase.
+Sorting by colour alone without `aria-sort` and a glyph. An animated
+spinner. An empty state that removes the header. Truncated text with no way
+to read the full value. Hover fill on touch.
diff --git a/spec/components/tabs.md b/spec/components/tabs.md
index 8467d2023..412b01bcf 100644
--- a/spec/components/tabs.md
+++ b/spec/components/tabs.md
@@ -88,18 +88,14 @@ compact: true
 
 ## Purpose
 
-Switches between peer panels in place without leaving the page. Tabs are
-navigation within one view; for moving between views use sidebar-nav, for
-mutually exclusive options inside a form use radio-group or
+Navigation between peer panels within one view. Between views use
+sidebar-nav; for exclusive options in a form use radio-group or
 segmented-control.
 
 ## Anatomy
 
-A tablist strip on {color.surface.default} with a 1px {color.border.divider}
-rule beneath it; tab buttons in {color.text.default}; the selected tab in
-{color.text.bright} with a 2px {color.border.selected-indicator} bottom bar
-that sits on the rule; the panel below in {color.text.default}. Tabs carry no
-fill and no box; the bar is the only ornament.
+Parts as listed in the anatomy. The indicator sits on the rule; tabs carry no
+fill and no box, and the bar is the only ornament.
 
 ## States
 
@@ -107,46 +103,38 @@ fill and no box; the bar is the only ornament.
 | --- | --- | --- |
 | default | text {color.text.default}; transparent 2px bottom edge | — |
 | hover | background → {color.interaction.hover.bg}; text unchanged | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px | the ring |
 | selected | text {color.text.bright}; 2px {color.border.selected-indicator} bar | `aria-selected="true"`; the bar; tabindex 0 |
-| selected+focus-visible | the bar and the ring together | both visible |
+| selected+focus-visible | bar and ring together | both visible |
 | selected+container-inactive | bar → {color.border.selected-indicator-inactive}; text stays bright | lightness drop of the bar; the container's own inactive state |
 | disabled | text {color.text.disabled}; no hover; bar hidden unless selected | `disabled` or `aria-disabled`; cursor: not-allowed |
 
 Precedence: disabled > selected > hover; focus-visible is always drawn.
-Pressing a tab uses {color.interaction.pressed.bg} for the duration of the
-press only.
+{color.interaction.pressed.bg} shows only for the duration of a press.
 
 ## Keyboard
 
-One tab stop for the whole strip: the selected tab has `tabindex="0"`, every
-other tab `tabindex="-1"` (roving tabindex). Left and Right move focus and
-wrap; Home and End jump to the ends; Enter and Space activate when activation
-is manual. Automatic activation is the default in this theme because panels
-are cheap; use manual activation when a panel is expensive to render. The
-panel is a tab stop only when it has no focusable content.
+As in the key table. Automatic activation is the default because panels are
+cheap; use manual activation when a panel is expensive to render. The panel is
+a tab stop only when it has no focusable content.
 
 ## Accessibility
 
-The tablist carries `aria-label` or `aria-labelledby`; each tab has
-`aria-controls` pointing at its panel and each panel `aria-labelledby`
-pointing back. Vertical tablists set `aria-orientation="vertical"` and swap
-the arrow keys. Contrast: tab text 8.43:1, selected text 10.10:1, indicator
-4.57:1 (≥ 3:1) and ring 4.57:1 on the panel surface. Each tab is at least
-24×24 CSS pixels in `compact` density with 4px between neighbours. The
-indicator is never the only signal: `aria-selected` and the bright text
-travel with it.
+The tablist carries `aria-label` or `aria-labelledby`. A vertical tablist
+sets `aria-orientation="vertical"` and swaps the arrow keys. Text meets
+4.5:1; the indicator and ring 3:1. Each tab is at least 24×24 CSS pixels in
+`compact`, with 4px between neighbours. The indicator is never the only
+signal: `aria-selected` and the bright text travel with it.
 
 ## Portability
 
-A border-bottom that changes colour and an outline are all the drawing needed.
-Toolkits that cannot draw a partial bottom border draw a 2px rule across the
-full tab width. Hosts that have their own tab strip (browsers, editors) keep
+A toolkit that cannot draw a partial bottom border draws a 2px rule across
+the full tab width. Hosts with their own tab strip (browsers, editors) keep
 their keyboard model and take only the colours and the 2px bar.
 
 ## Non-examples
 
-Pill or filled tabs. A selected tab drawn with the selection fill. Rounded
-corners on the tab or the bar. A tab strip that wraps to two lines. A tab that
-changes only its text colour when selected. A glow instead of the dashed ring.
-Every tab in the tab order. Disabling by opacity.
+Pill or filled tabs. A selected tab in the selection fill. Rounded tabs or
+bar. A strip that wraps to two lines. A selected tab that changes only its
+text colour. A glow instead of the dashed ring. Every tab in the tab order.
+Disabling by opacity.
diff --git a/spec/components/terminal.md b/spec/components/terminal.md
index 2b335239d..76c658238 100644
--- a/spec/components/terminal.md
+++ b/spec/components/terminal.md
@@ -135,97 +135,75 @@ compact: false
 
 ## Purpose
 
-The reference for terminal text: the surface, the default foreground, the
-cursor, the selection, the six attributes and the sixteen slots the
-workstation froze in `Xresources`. The slots are the origin of the theme:
-the `heritage-ansi` profile carries them exactly, and the `default` profile
-carries the readable heritage sixteen (D-029), the same hues with the dim
-slots lifted so text in any slot reads, except slot 6, which is coral (D-032). What a program does with a slot is
-that program's choice; the theme makes every slot but the dim tier safe for
-text rather than steering programs to particular slots.
+The reference for terminal text. The sixteen slots, frozen in `Xresources`,
+are the theme's origin: `heritage-ansi` carries them exactly; `default`
+lifts the dim slots to readable values of the same hues (D-029) and makes
+slot 6 coral (D-032). Programs choose their slots; the theme makes every slot
+but the dim tier safe for text instead of steering them.
 
 ## Anatomy
 
-Root `.terminal` (the `<pre>`) with a variant class `.terminal-transcript`,
-`.terminal-ansi-grid` or `.terminal-attributes`. Parts `.terminal-<part>`:
-`-line`, `-prompt` with `-prompt-path`, `-prompt-branch` and `-prompt-arrow`,
-`-cursor`, `-sel`, `-label`, `-fail` (the `✕`), and the attributes `-bold`,
-`-dim`, `-italic`, `-underline`, `-inverse`, `-strike`. Slot classes are
-`.terminal-fg-0` … `.terminal-fg-15` and `.terminal-bg-0` … `.terminal-bg-15`,
-each a single role variable {color.terminal.ansi.0} … {color.terminal.ansi.15},
-so the profile switch on the specimen recolours the grid without touching
-the markup. The foreground is {color.terminal.fg} on {color.terminal.bg};
-the prompt path segment is {color.terminal.prompt-text} on
-{color.terminal.prompt-bg} and the branch segment {color.terminal.bg} on
-{color.terminal.ansi.3}, the two agnoster backgrounds the workstation used.
-{color.terminal.prompt-bg} is the heritage dark red in every profile, so the
-prompt looks the same whatever slot 4 carries (D-032).
+Root `.terminal` plus `.terminal-transcript`, `.terminal-ansi-grid` or
+`.terminal-attributes`; parts `.terminal-line`, `-prompt` (`-prompt-path`,
+`-prompt-branch`, `-prompt-arrow`), `-cursor`, `-sel`, `-label`, `-fail`,
+`-bold`, `-dim`, `-italic`, `-underline`, `-inverse`, `-strike`. Each slot
+class reads one role variable ({color.terminal.ansi.0} …
+{color.terminal.ansi.15}), so a profile switch recolours without touching
+markup. {color.terminal.prompt-bg} is the heritage dark red in every profile,
+whatever slot 4 carries (D-032).
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | text on {color.terminal.bg}; the cursor cell hollow, a 1px {color.terminal.cursor} outline; no ring | the hollow cursor |
-| focus-visible | container ring 2px {color.interaction.focus.ring-container} at −3px; the cursor solid {color.terminal.cursor} with {color.terminal.bg} text | the ring; the cursor fills |
-| selected | the run filled {color.terminal.selection-bg} with {color.terminal.selection-text}; slot colours inside the run give way to the selection text | the fill spans whole cells; the emulator exposes the selection |
-| busy | a command is running: the cursor is a solid static block at the end of the output; the transcript is `aria-busy` | `aria-busy`; the cursor shape; no blink |
-| current | the cursor line filled {color.code.current-line} across its width; the cursor as in focus | the row fill; the cursor cell |
+| default | text on {color.terminal.bg}; cursor hollow, 1px {color.terminal.cursor} outline; no ring | the hollow cursor |
+| focus-visible | 2px {color.interaction.focus.ring-container} container ring at −3px; cursor solid {color.terminal.cursor} with {color.terminal.bg} text | the ring; the cursor fills |
+| selected | run filled {color.terminal.selection-bg} with {color.terminal.selection-text}; slot colours inside give way to the selection text | whole-cell fill; the emulator exposes the selection |
+| busy | command running: solid static block cursor at the end of the output; transcript `aria-busy` | `aria-busy`; cursor shape; no blink |
+| current | cursor line filled {color.code.current-line} across its width; cursor as in focus | row fill; cursor cell |
 
-The cursor never blinks in the reference. A host keeps the user's own blink
-setting and stops blinking under reduced motion; the theme never turns it on.
+The reference cursor never blinks. A host keeps the user's blink setting and
+stops it under reduced motion; the theme never turns it on.
 
 ## Keyboard
 
-The emulator and the shell own every key, including Tab, Escape and the
-selection modifiers. The reference transcript is a single focus stop that
-consumes nothing. The theme draws the ring when the host reports focus, the
-fill when the host reports a selection, and the block cursor where the host
-puts it.
+As in the key table. The reference transcript consumes no key; the theme
+draws the ring, selection and block cursor where the host reports them.
 
 ## Accessibility
 
-The transcript is `role=log` so new output is announced politely; the grid
-and the attribute sheet are plain `<pre>` elements with a label. In the
-`default` profile slots 1–7 and 9–15 reach 4.5:1 on the terminal background
-(4.55:1–10.37:1, D-029); slot 6 is coral, so highlighted names stand apart
-from the rose text (D-032). Slot 8 is the dim tier at 3.01:1 and slot 0 is the
-background itself; the grid marks both with a `✕` after the number so the
-exception is visible, not implied. The `heritage-ansi` profile keeps the
-historical values, where ten slots fail (1.86:1–4.45:1); the grid's crosses
-follow the default profile, so under `heritage-ansi` its sample text shows
-those failures directly. The `extended` overlay proposes a semantic sixteen
-that all reach 4.5:1. The site's profile control shows the grid under each. The background
-row is legible only with a foreground the program chooses: the default
-foreground passes only on slot 0, while the terminal background passes on
-every slot except 0 and 8, which is why the row is shown and not declared as
-a contract. Two escape families bypass the slots entirely and
-are outside the theme: bold-as-bright, which substitutes slots 8–15 for 0–7
-and must be off for the slots to hold, and 256-colour or 24-bit sequences,
-which carry their own values. Attributes are attributes: dim uses
-{color.text.muted} (5.81:1) rather than a slot in the reference, but most
-emulators draw dim by mixing a slot's colour halfway into the background, so
-dimmed slot 6 falls to about 2.7:1. The theme does not brighten slots to make up for it; a host setting
-that changes dim text alone may (D-032). Inverse swaps foreground and
-background (8.65:1), and bold, italic, underline and strikethrough are text
-styles a screen reader can expose.
+In `default`, slots 1–7 and 9–15 meet 4.5:1 on the terminal background
+(D-029); coral slot 6 sets highlighted names apart from rose text (D-032).
+Slot 8 (dim tier) and slot 0 (the background) do not; the grid marks both
+with `✕`. The crosses follow `default`, so under `heritage-ansi` (ten slots
+fail) the sample text shows the failures. The `extended` overlay proposes a
+semantic sixteen that all meet 4.5:1. The background row is not a contract:
+the default foreground passes only on slot 0, the terminal background on
+every slot but 0 and 8. Bold-as-bright and 256-colour or 24-bit sequences
+bypass the slots and are outside the theme. Most emulators dim by mixing a
+slot halfway into the background (dimmed slot 6 falls under 3:1); the theme
+does not brighten slots to compensate, a host setting for dim text alone may
+(D-032). Bold, italic, underline and strikethrough are styles a screen reader
+can expose.
 
 ## Portability
 
-Every emulator with a sixteen-slot palette can hold these values byte for
-byte; the port's evidence records whether bold-as-bright is off and whether
-the cursor and selection keys exist. A port carries the profile's slots as
-they are; it may recommend `LS_COLORS` or a prompt configuration (a prompt
-draws its path segment in {color.terminal.prompt-bg} and
-{color.terminal.prompt-text} as 24-bit colours, so the slots do not change
-it) but never changes the slots to compensate. The
-cursor shape (block, bar, underline) is the user's setting; the theme only
-supplies its colour.
+Hosts that set the palette (Orca, Ghostty, Warp, CE Devbox's shell palette)
+share one; the prompt is the one deliberate heritage-style exception, set in
+24-bit {color.terminal.prompt-bg} and {color.terminal.prompt-text} whatever
+the slots carry. CE Devbox's shell palette and its Agnoster directory and
+virtualenv segments follow in that repository (D-029, D-032).
+
+Any sixteen-slot emulator holds these values byte for byte; port evidence
+records whether bold-as-bright is off and whether cursor and selection keys
+exist. A port carries the slots unchanged; it may recommend `LS_COLORS` or a
+prompt configuration but never changes slots to compensate. Cursor shape is the
+user's; the theme supplies only its colour.
 
 ## Non-examples
 
-Normalising the heritage slots so every one reaches 4.5:1 and calling it
-`heritage-ansi`. A blinking cursor in the reference. A cursor that is a
-glowing bar. Bold rendered as bright, which silently swaps the slots. A
-purple or cyan slot borrowed from another scheme. Wrapping the transcript at
-narrow widths and breaking the prompt segments. A selection drawn as a ring
-instead of a fill. Rounded prompt segments or a gradient prompt.
+Normalising the heritage slots to 4.5:1 and calling it `heritage-ansi`. A
+blinking cursor in the reference. A glowing bar cursor. Bold rendered as
+bright. A purple or cyan slot borrowed from another scheme. Wrapping the
+transcript and breaking the prompt segments. A selection drawn as a ring
+instead of a fill. Rounded or gradient prompt segments.
diff --git a/spec/components/text-field.md b/spec/components/text-field.md
index 92922c8f8..9ccc78aed 100644
--- a/spec/components/text-field.md
+++ b/spec/components/text-field.md
@@ -119,18 +119,13 @@ compact: true
 
 ## Purpose
 
-Single-line free-text entry. Every native `type` that renders as a line box
-(`text`, `password`, `search`, `number`, `email`, `url`, `tel`) is this
-component; date and time inputs are the date-picker and time-picker
-components because their popups are host surfaces.
+Single-line free-text entry for every native `type` that renders as a line
+box (`text`, `password`, `search`, `number`, `email`, `url`, `tel`). Date and
+time inputs are the date-picker and time-picker components.
 
 ## Anatomy
 
-Label above the control; the control box; optional prefix and suffix inside
-the box separated by a {color.border.divider} rule; the input; optional
-trailing actions (clear, reveal, stepper); help text below; the validation
-message, which takes the help slot visually while help stays in the DOM and
-`aria-describedby` lists both.
+Parts as listed in the anatomy.
 
 ## States
 
@@ -138,50 +133,45 @@ message, which takes the help slot visually while help stays in the DOM and
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.input}; text {color.text.default} | — |
 | hover | background → {color.interaction.hover.bg}; border unchanged | cursor: text |
-| focus-visible | border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| focus-visible | border → {color.border.active}; 1px dashed {color.interaction.focus.ring} ring at −2px | the ring |
 | placeholder-shown | placeholder in {color.text.placeholder}, italic | italic |
 | filled | as default with a value | — |
 | required | `*` after the label in {color.status.danger.text} plus visually hidden "required" | `required` attribute; the mark |
-| invalid | border 2px {color.status.danger.border}; message with the ✕ glyph | border width 1 → 2px; glyph; `aria-invalid` |
-| invalid+focus-visible | the 2px danger border and a 1px dashed ring in {color.interaction.focus.ring-container} at −4px (the control form, recoloured; never the 2px container form) | double boundary |
+| invalid | 2px {color.status.danger.border}; message with the ✕ glyph | border 1 → 2px; glyph; `aria-invalid` |
+| invalid+focus-visible | the 2px danger border plus a 1px dashed {color.interaction.focus.ring-container} ring at −4px (the control form recoloured, never the 2px container form) | double boundary |
 | invalid+hover | as invalid with the hover background | cursor |
-| disabled | text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no hover; the label and help keep their colours | `disabled`; cursor: not-allowed |
+| disabled | text {color.text.disabled}, border {color.border.disabled}, background {color.interaction.disabled.bg}; no hover; label and help keep their colours | `disabled`; cursor: not-allowed |
 | disabled+filled | as disabled with a value | `disabled` |
 | read-only | no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; text {color.text.default}; focusable and selectable | `readonly`; dotted edge |
-| read-only+focus-visible | the dotted {color.border.divider} edge unchanged, plus the dashed ring at −2px | the ring |
-| loading | size unchanged; a static `⋯` glyph in {color.text.muted} inside the box after the input and before any trailing action; input remains editable | glyph; `aria-busy` |
+| read-only+focus-visible | the dotted edge unchanged, plus the dashed ring at −2px | the ring |
+| loading | size unchanged; static `⋯` in {color.text.muted} after the input, before any trailing action; still editable | glyph; `aria-busy` |
 
-Precedence when several apply: disabled > loading > invalid > hover;
-focus-visible is always drawn.
+Precedence: disabled > loading > invalid > hover; focus-visible is always
+drawn.
 
 ## Keyboard
 
-Focus order is label (not focusable) → input → clear or reveal → stepper
-buttons. The clear button is `type="button"` with `aria-label="Clear <label>"`;
-the reveal button toggles `type` between `password` and `text` and its own
-`aria-pressed`. Escape in the search variant clears a non-empty value.
+As in the key table; the label is not a stop, and clear or reveal precede the
+stepper buttons.
 
 ## Accessibility
 
-A programmatic label is required (`<label for>`). Help and message are linked
-through `aria-describedby` in that order. `aria-invalid="true"` is set only
-after the user interacted with the field or submitted the form, never on first
-paint. The message is announced on submit through the form's live region, not
-on every keystroke. Contrast: text 8.65:1 on the input surface, placeholder
-5.81:1, disabled text 3.33:1 (exempt), control border 4.45:1 (≥ 3:1), invalid
-border 4.69:1, danger message 5.40:1. The box is at least 24×24 CSS pixels in
-`compact` density.
+The clear button is `type="button"` with `aria-label="Clear <label>"`; the
+reveal button toggles `type` between `password` and `text` and its own
+`aria-pressed`. `aria-invalid` is never set on first paint. The message is
+announced on submit through the form's live region, not on every keystroke.
+Text meets 4.5:1 and borders and rings 3:1; disabled text is exempt (house
+floor 3:1). The box is at least 24×24 CSS pixels in `compact`.
 
 ## Portability
 
-Everything is expressible with border, background and outline; the only
-pseudo-element is the required mark. Toolkits without dashed outlines draw a
-solid 1px ring in the same colour and record the deviation. Toolkits without a
-read-only style treat read-only as default text and record it.
+Border, background and outline express everything; the only pseudo-element is
+the required mark. Toolkits without dashed outlines draw a solid 1px ring in
+the same colour; toolkits without a read-only style show read-only as default
+text. Both record the deviation.
 
 ## Non-examples
 
-Rounded corners. A floating or animated label. An underline-only field with no
-box. A glow instead of the dashed ring. Placeholder text in red. Disabling by
-opacity. Using colour alone for the invalid state. A hover that changes the
-text colour.
+Rounded corners. A floating or animated label. An underline-only field. A glow
+instead of the dashed ring. Red placeholder text. Disabling by opacity. Colour
+alone for the invalid state. A hover that changes the text colour.
diff --git a/spec/components/textarea.md b/spec/components/textarea.md
index ff2697dc5..f5dc71610 100644
--- a/spec/components/textarea.md
+++ b/spec/components/textarea.md
@@ -106,57 +106,50 @@ compact: false
 
 Free text longer than a line: descriptions, messages, notes. It shares the
 text field's box, states and message so a form reads as one system. Code
-goes in the code-editor component, not a textarea.
+goes in the code-editor component.
 
 ## Anatomy
 
-Label above; the box with the native `<textarea>` inside, at least three
-rows tall, resizable downwards only; the optional count; help; the
-validation message that takes the help slot visually while help stays in the
-DOM.
+Parts as listed in the anatomy, top to bottom: label, box, count, help; the
+message takes the help slot visually while help stays in the DOM.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | 1px {color.border.control} on {color.surface.input}; text {color.text.default} | — |
-| hover | background → {color.interaction.hover.bg}; border unchanged | cursor: text |
-| focus-visible | border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
-| placeholder-shown | placeholder in {color.text.placeholder}, italic | italic |
+| hover | → {color.interaction.hover.bg}; border unchanged | cursor: text |
+| focus-visible | border → {color.border.active}; 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| placeholder-shown | {color.text.placeholder}, italic | italic |
 | filled | as default with a value | — |
 | required | `*` after the label in {color.status.danger.text} plus visually hidden "required" | `required`; the mark |
-| invalid | border 2px {color.status.danger.border}; message with the ✕ glyph; a count past its limit turns {color.status.danger.text} with the glyph | border width 1 → 2px; glyph; `aria-invalid` |
-| invalid+focus-visible | the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
-| disabled | text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; no resize handle | `disabled`; cursor: not-allowed |
+| invalid | 2px {color.status.danger.border}; message with ✕; a count past its limit turns {color.status.danger.text} with the glyph | border 1 → 2px; glyph; `aria-invalid` |
+| invalid+focus-visible | the 2px danger border and a {color.interaction.focus.ring-container} ring at −4px | double boundary |
+| disabled | text {color.text.disabled}, border {color.border.disabled}, fill {color.interaction.disabled.bg}; no resize handle | `disabled`; cursor: not-allowed |
 | read-only | no box: 1px dotted {color.border.divider} bottom edge on {color.surface.canvas}; no resize handle; selectable | `readonly`; dotted edge |
 
 Precedence: disabled > invalid > hover; focus-visible is always drawn.
 
 ## Keyboard
 
-Native editing. Enter inserts a line break and never submits. Tab leaves
-the control; a host that needs literal tabs provides a separate command and
-documents it. The count is not focusable.
+As in the key table. A host that needs literal tabs provides a separate
+command and documents it. The count is not focusable.
 
 ## Accessibility
 
-A programmatic label is required. Help, count and message are linked
-through `aria-describedby` in that order. The count is `aria-live="polite"`
-and throttled so it does not announce every keystroke; the limit is stated
-in the help text so it is known before typing. `aria-invalid="true"` only
-after interaction or submit. Contrast as the text field: text 8.65:1,
-placeholder 5.81:1, control border 4.45:1, invalid border 4.69:1, message
-5.40:1.
+A programmatic label is required. `aria-describedby` lists help, count and
+message in that order. The help text states the limit before typing.
+`aria-invalid="true"` only after interaction or submit. Text and placeholder
+meet 4.5:1; control and invalid borders 3:1.
 
 ## Portability
 
-Border, background, outline and `resize: vertical`. Hosts without a resize
-handle grow the box with content up to a maximum and record it. Hosts
-without dashed outlines draw a solid 1px ring.
+Hosts without a resize handle grow the box with content up to a maximum and
+record it. Hosts without dashed outlines draw a solid 1px ring.
 
 ## Non-examples
 
 Horizontal or free resizing. A box narrower than its label column. A count
 that only changes colour past the limit. A glow instead of the dashed ring.
-Rounded corners. An auto-growing box with no maximum. Tab inserting a
-character. Placeholder text as the label. Disabling by opacity.
+Rounded corners. Auto-growing with no maximum. Tab inserting a character.
+Placeholder as the label. Disabling by opacity.
diff --git a/spec/components/time-picker.md b/spec/components/time-picker.md
index ac8ad27f5..48aacfd0b 100644
--- a/spec/components/time-picker.md
+++ b/spec/components/time-picker.md
@@ -22,6 +22,7 @@ states:
   - hover
   - focus-visible
   - invalid
+  - invalid+focus-visible
   - disabled
 tokens:
   root.bg: color.surface.input
@@ -29,6 +30,7 @@ tokens:
   root.bg-hover: color.interaction.hover.bg
   root.border-focus: color.border.active
   root.ring: color.interaction.focus.ring
+  root.ring-invalid: color.interaction.focus.ring-container
   root.border-invalid: color.status.danger.border
   root.border-disabled: color.border.disabled
   root.bg-disabled: color.interaction.disabled.bg
@@ -56,6 +58,11 @@ stateTokens:
     fg: color.text.default
     bg: color.surface.input
     border: color.status.danger.border
+  invalid+focus-visible:
+    fg: color.text.default
+    bg: color.surface.input
+    border: color.status.danger.border
+    outline: color.interaction.focus.ring-container
 contrast:
   - fg: color.status.danger.text
     bg: color.surface.canvas
@@ -131,38 +138,51 @@ compact: false
 
 ## Purpose
 
-Enter a time explicitly or adjust it using themed step buttons. D-025 requires theme-owned web controls rather than browser popup styling.
+Enter a time by typing or with themed step buttons. D-025: theme-owned web
+controls, not browser popup styling.
 
 ## Anatomy
 
-A label, editor, increase/decrease buttons, format hint and validation message. The native time input remains the successful form control and owns its value, defaults and constraints. It is hidden only after enhancement.
+A label, editor, increase and decrease buttons, format hint and validation
+message. The native time input stays the successful form control, owns
+value, defaults and constraints, and is hidden only after enhancement.
 
 ## States
 
-| State | Treatment |
-| --- | --- |
-| default | Input surface, default text and control border. |
-| hover | The declared hover fill. |
-| focus-visible | Active border and the canonical focus ring. |
-| invalid | Danger border and a linked message. |
-| disabled | Disabled colors; editor and step actions unavailable. |
+| State | Visual | Non-colour channel |
+| --- | --- | --- |
+| default | {color.text.default} on {color.surface.input}, 1px {color.border.control} | — |
+| hover | background → {color.interaction.hover.bg} | hover-capable pointers only |
+| focus-visible | border → {color.border.active}; the canonical focus ring | the ring |
+| invalid | 2px {color.status.danger.border}; a linked message | border 1 → 2px; ✕ glyph; `aria-invalid` |
+| invalid+focus-visible | the danger border and the ring in {color.interaction.focus.ring-container} at −4px | double boundary |
+| disabled | {color.text.disabled} on {color.interaction.disabled.bg}, border {color.border.disabled}; editor and step actions unavailable | `disabled`; cursor: not-allowed |
 
-Use the declared state tokens: default input surface and control border; hover fill; the canonical focus ring; danger border and message for invalid input; disabled colors and unavailable actions. Read-only values remain readable and cannot open a picker or change through step buttons. The date read-only treatment retains the canvas surface and unobtrusive bottom edge.
+A read-only value stays readable and cannot change through the step
+buttons.
 
 ## Keyboard
 
-Type HH:MM or HH:MM:SS in the editor. Tab reaches the named step buttons; Enter/Space activates them. Each step uses the native input step attribute. With step="any", use direct entry and the step buttons remain unavailable.
+As in the key table; the step buttons are named.
 
 ## Accessibility
 
-The visible editor receives the original label, descriptions, required state and error state. Format hints are always available. Native min, max, step and required constraints remain authoritative. Invalid entry focuses the visible editor and exposes a theme-owned message. No host clock popup or browser segment selection is used in the enhanced control. Form reset restores the native defaults.
-
-Automated evidence records its actual browser, states and limitations; it is not a manual screen-reader acceptance.
+The visible editor receives the original label, descriptions, required and
+error state. Format hints are always available. Native min, max, step and
+required stay authoritative. Invalid entry focuses the visible editor and
+shows a theme-owned message. The enhanced control uses no host clock popup
+or browser segment selection. Form reset restores the native defaults.
+Automated evidence records its browser, states and limits and is not a
+manual screen-reader acceptance.
 
 ## Portability
 
-The package and complete copy distribution include the renderer. The public control enhancement applies the same behavior to existing native markup. The no-JavaScript fallback and non-web platform mappings remain native.
+The package and the complete copy distribution include the renderer; the
+public control enhancement applies it to existing native markup. Without
+JavaScript, and on non-web platforms, the control stays native.
 
 ## Non-examples
 
-An unthemed host popup presented as fully themed. A second named input that duplicates form values. Discarding native constraints, labels or reset behavior. Literal colors, rounded corners, or a selected fill with no distinguishable focus boundary.
+An unthemed host popup presented as themed. A second named input
+duplicating form values. Dropping native constraints, labels or reset.
+Literal colours or rounded corners.
diff --git a/spec/components/timeline.md b/spec/components/timeline.md
index c8e639a7f..1dc0732fd 100644
--- a/spec/components/timeline.md
+++ b/spec/components/timeline.md
@@ -31,9 +31,9 @@ tokens:
   dependency.role-border-width-emphasis: border.width.emphasis
   dependency.role-color-border-active: color.border.active
   dependency.role-color-border-divider: color.border.divider
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
-  dependency.role-space-2: space.2
   dependency.role-space-4: space.4
 stateTokens:
   default:
@@ -93,28 +93,28 @@ compact: false
 
 ## Purpose
 
-Read events as an ordered list with explicit time and status text. The caller supplies order; the component does not reorder unknown dates. Lines support the sequence without becoming the only status channel.
+Chronological events read as an ordered list in the order the caller gives.
 
 ## Anatomy
 
-- **list:** Ordered events in reading order.
-- **time:** Native time element with machine-readable datetime.
-- **event:** Heading and status-bearing description.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Divider along the event sequence. | Ordered list and visible time. |
 | current | Emphasized start border. | aria-current and explicit Current text. |
 
 ## Keyboard
 
-- **Tab / Shift+Tab:** Reach event links and actions. The sequence is not focusable.
+As in the key table.
 
 ## Accessibility
 
-Use real time values and visible dates. Identify the current event with aria-current and text. Avoid a color-only dot or an order that changes between visual presentation and reading order.
+Use real time values and visible dates. Mark the current event with
+`aria-current` and text. No colour-only dot; visual order matches reading
+order.
 
 ## Portability
 
diff --git a/spec/components/toast.md b/spec/components/toast.md
index 72fa8c772..4a6e056d5 100644
--- a/spec/components/toast.md
+++ b/spec/components/toast.md
@@ -46,7 +46,7 @@ tokens:
   danger.text: color.status.danger.on-fill
   danger.button-bg-hover: color.action.destructive.pressed-bg
   action.text: color.text.link
-  action.bg-hover: color.interaction.hover.bg-strong
+  action.bg-hover: color.interaction.hover.bg
   action.text-hover: color.text.link-hover
   close.text: color.action.tertiary.text
   close.bg-hover: color.action.tertiary.hover-bg
@@ -55,7 +55,7 @@ tokens:
   stack.z: z.toast
 stateTokens:
   default: { fg: color.text.default, bg: color.surface.canvas, border: color.border.overlay }
-  hover: { fg: color.text.link-hover, bg: color.interaction.hover.bg-strong }
+  hover: { fg: color.text.link-hover, bg: color.interaction.hover.bg }
   focus-visible: { fg: color.action.tertiary.text, bg: color.surface.canvas, outline: color.interaction.focus.ring }
   stacked: { fg: color.text.muted, bg: color.surface.canvas, border: color.border.overlay }
   reduced-motion: { fg: color.text.default, bg: color.surface.canvas, border: color.border.overlay }
@@ -76,7 +76,7 @@ contrast:
   - { fg: color.text.default, bg: color.status.neutral.tint, label: "text on the neutral tint" }
   - { fg: color.status.danger.on-fill, bg: color.status.danger.fill, label: "text, glyph and buttons on the danger fill" }
   - { fg: color.status.danger.fill, bg: color.surface.canvas, min: 3, kind: ui, label: "the danger fill is its own boundary against the canvas" }
-  - { fg: color.status.danger.border, bg: color.status.danger.fill, min: 1, kind: ui, label: "danger border on the danger fill (decorative)", waiver: "the fill is the boundary at 4.14:1 against the canvas; the border only keeps the box model identical across statuses" }
+  - { fg: color.status.danger.border, bg: color.status.danger.fill, min: 1, kind: ui, label: "danger border on the danger fill (decorative)", waiver: "the fill is the boundary against the canvas; the border only keeps the box model identical across statuses" }
 anatomy:
   - part: stack
     description: The region that holds the toasts, fixed in the end corner of the viewport at z.toast; in flow in the demonstration.
@@ -118,60 +118,49 @@ compact: false
 
 ## Purpose
 
-A short confirmation or notice that does not belong to any one element on
-the page: "Saved", "Copied", "Connection lost". It appears in a fixed corner
-stack, is announced politely, and leaves on its own after a pause or when
-dismissed. Anything that needs a decision is a dialog; anything tied to a
-form is an alert.
+A short notice that belongs to no one element on the page: "Saved",
+"Copied", "Connection lost". It leaves on its own after a pause or when
+dismissed. A decision is a dialog; a notice tied to a form is an alert.
 
 ## Anatomy
 
-The stack region; each toast on {color.surface.canvas} behind a 1px
-{color.border.overlay}, or on a status tint with its status border; the glyph
-and the text; an optional action; the Dismiss button; the "+n" count. The
-danger toast is the historical critical notification: {color.status.danger.fill}
-with {color.status.danger.on-fill} for the text, the glyph and both buttons.
+Parts as listed in the anatomy. The danger toast is the historical critical
+notification: {color.status.danger.fill} with {color.status.danger.on-fill}
+for the text, the glyph and both buttons.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | canvas surface, 1px overlay border, glyph in the status text colour | the glyph; the worded text |
-| hover | action → {color.interaction.hover.bg-strong} with {color.text.link-hover}; Dismiss → {color.action.tertiary.hover-bg}; the timeout pauses | cursor: pointer; underline thickens on the action |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the focused button; on the danger fill the ring takes {color.status.danger.on-fill}; the timeout pauses | the ring |
-| stacked | toasts sit in one column with a 4px gap, newest at the end; the last visible toast shows "+n" in {color.text.muted} for queued ones | the count text; at most three visible |
-| reduced-motion | no transition; the toast is simply present or absent | `prefers-reduced-motion`; nothing moves |
+| hover | action → {color.interaction.hover.bg} with {color.text.link-hover}; Dismiss → {color.action.tertiary.hover-bg}; the timeout pauses | cursor: pointer; the action's underline thickens |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the focused button, {color.status.danger.on-fill} on the danger fill; the timeout pauses | the ring |
+| stacked | one column, 4px gap, newest at the end; the last visible toast shows "+n" in {color.text.muted} | the count text; at most three visible |
+| reduced-motion | no transition; present or absent | `prefers-reduced-motion`; nothing moves |
 
-The toast has no disabled, selected or busy state.
+No disabled, selected or busy state.
 
 ## Keyboard
 
-Toasts never take focus when they appear. A host shortcut (F6 on the web
-reference) moves focus into the region; Tab then walks each toast's action
-and Dismiss; Escape dismisses the focused toast. While any toast has focus or
-the pointer, its timeout is paused.
+As in the key table. F6 is the web reference's shortcut; the timeout pauses
+while a toast has focus or the pointer.
 
 ## Accessibility
 
-The region is named "Notifications"; each toast is `role="status"` so it is
-announced politely, and danger toasts are `role="alert"`. The text states the
-outcome in words and the glyph is `aria-hidden`. Every toast has Dismiss and
-the timeout is at least 8 seconds, extended for toasts with an action; an
-action is never the only way to reach what it does. Contrast: text 8.65:1 on
-the canvas, the overlay border 4.69:1, status text on its tint from 5.31:1
-(neutral) to 6.59:1, on-fill text 4.58:1 on the danger fill, which is itself
-4.14:1 against the canvas.
+The text states the outcome in words; the glyph is `aria-hidden`. Every toast
+has Dismiss; the timeout, at least 8 seconds, is extended for toasts with an
+action, and an action is never the only way to reach what it does. Text
+meets 4.5:1 on the canvas, on its tint and on the danger fill; borders, and
+the danger fill against the canvas, 3:1.
 
 ## Portability
 
-A fixed region, tints, 1px borders and text glyphs. Hosts with a notification
-daemon send the text and urgency instead of drawing a toast; the danger fill
-maps to the critical urgency. Toolkits with a native toast overlay use it and
-record that the danger fill is not available.
+Hosts with a notification daemon send the text and urgency instead of
+drawing a toast. Toolkits with a native toast overlay use it and record that
+the danger fill is not available.
 
 ## Non-examples
 
-A toast that slides in from an edge. A rounded, shadowed pill. A toast with
-no Dismiss that vanishes after two seconds. A toast that takes focus on
-appearance. Stacking more than three with no count. A form error shown as a
-toast. Colour-only status without the glyph and worded text.
+A toast that slides in. A rounded, shadowed pill. No Dismiss and gone in two
+seconds. Taking focus on appearance. More than three stacked with no count. A
+form error as a toast. Colour-only status without the glyph and worded text.
diff --git a/spec/components/toolbar.md b/spec/components/toolbar.md
index 24507bc9c..6bd6cd1df 100644
--- a/spec/components/toolbar.md
+++ b/spec/components/toolbar.md
@@ -84,19 +84,13 @@ compact: false
 
 ## Purpose
 
-Groups the frequent actions of a view into one row that costs one tab stop.
-A toolbar is for actions on the content beneath it; navigation between views
-belongs in tabs or the sidebar, and a set of mutually exclusive choices in a
-segmented control or radio group.
+Groups a view's frequent actions on the content beneath it into one row that
+costs one tab stop. Navigation between views belongs in tabs or the sidebar;
+mutually exclusive choices in a segmented control or radio group.
 
 ## Anatomy
 
-A `div` with `role="toolbar"` on {color.surface.chrome} with a 1px
-{color.border.divider} bottom edge. Inside, ghost buttons in
-{color.text.default} with a transparent 1px border, vertical separators in
-{color.border.default} between groups, and in the overflow variant a trailing
-"More" button that opens a menu with the controls that do not fit. Toggle
-buttons carry `aria-pressed`.
+Parts as listed in the anatomy.
 
 ## States
 
@@ -104,44 +98,34 @@ buttons carry `aria-pressed`.
 | --- | --- | --- |
 | default | text {color.text.default}; no fill; transparent border | — |
 | hover | background → {color.interaction.hover.bg} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px | the ring |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px | the ring |
 | disabled | text {color.text.disabled}; no fill; no hover | `disabled`; cursor: not-allowed; skipped by the arrow keys |
 | toggled | fill {color.interaction.pressed.bg}; 1px {color.border.active} border; text {color.text.bright} | `aria-pressed="true"`; the border |
 
-Pressing a button uses {color.interaction.pressed.bg} for the duration of
-the press only; a toggled button keeps it.
+A press shows {color.interaction.pressed.bg} only while it lasts; a toggled
+button keeps it.
 
 ## Keyboard
 
-The toolbar is one tab stop: the last focused control (initially the first
-enabled one) has `tabindex="0"`, every other control `tabindex="-1"`. Left
-and Right move between controls and wrap; Home and End jump to the ends;
-Enter and Space activate. Disabled controls are skipped. Vertical toolbars
-declare `aria-orientation="vertical"` and use Up and Down. Without script
-every button is a tab stop, which is acceptable, not ideal.
+As in the key table. The roving stop is the last focused control, initially
+the first enabled one.
 
 ## Accessibility
 
-`aria-label` names the toolbar; a page with several toolbars gives each a
-distinct name. Toggle buttons expose `aria-pressed`; their label does not
-change with the state. Separators are `role="separator"` with
-`aria-orientation="vertical"` and are never focusable. Icon-only buttons
-carry `aria-label` and a tooltip. Contrast: text 8.60:1 on the chrome
-surface, toggled text 8.41:1 on the pressed fill, the toggled border 3.81:1,
-ring 4.66:1. Every control is at least 24×24 CSS pixels with 4px between
-neighbours in `compact` density.
+A page with several toolbars names each distinctly. A toggle button's label
+does not change with its state. Icon-only buttons carry `aria-label` and a
+tooltip. Text meets 4.5:1, the toggled border and the ring 3:1. Every control
+is at least 24×24 CSS pixels with 4px between neighbours in `compact`.
 
 ## Portability
 
-Ghost buttons with a background and a border; the separator is a 1px rule.
 Toolkits with a native toolbar keep their own keyboard model and take the
-colours. The overflow menu is a menu component; hosts without one wrap the
-row instead and record the deviation.
+colours. The overflow menu is the menu component; hosts without one wrap the
+row and record the deviation.
 
 ## Non-examples
 
-Buttons with a visible border at rest. A filled primary button inside the
-toolbar. Rounded buttons or a pill-shaped toolbar. Every button in the tab
-order when script is available. A toggled state shown by colour alone without
-`aria-pressed`. A toolbar that wraps to two lines. A separator that receives
-focus. Disabling by opacity.
+Buttons bordered at rest. A filled primary button in the toolbar. Rounded
+buttons or a pill-shaped toolbar. Every button in the tab order when script
+is available. A toggled state by colour alone without `aria-pressed`. A
+toolbar wrapping to two lines. A focusable separator. Disabling by opacity.
diff --git a/spec/components/tooltip.md b/spec/components/tooltip.md
index 04bfc8558..16218e00a 100644
--- a/spec/components/tooltip.md
+++ b/spec/components/tooltip.md
@@ -74,59 +74,49 @@ compact: false
 
 ## Purpose
 
-A few words that explain a control without being its name: what an icon
-button does, which shortcut opens it, why it is disabled. It is a description
-only. Anything a person must read to use the control belongs in the control
-or its label, and anything interactive is a popover.
+Describes a control without being its name: what an icon button does, its
+shortcut, why it is disabled. Anything needed to use the control belongs in
+the control or its label; anything interactive is a popover.
 
 ## Anatomy
 
-The trigger and the popup. The popup is {color.surface.raised} behind a 1px
-{color.border.overlay}, text in {color.text.default}, optional shortcut in a
-`kbd` with {color.text.bright} inside a 1px {color.border.control}; no arrow,
-no shadow, no radius. The demonstration renders it in flow below the trigger.
+Parts as listed in the anatomy; no arrow, shadow or radius.
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | trigger at rest; the popup shown for the demonstration | `aria-describedby` on the trigger |
-| hover | trigger background → {color.action.tertiary.hover-bg}; the popup appears after 300 ms | cursor: pointer; the popup itself |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px on the trigger; the popup appears at once | the ring; the popup |
-| open | the popup visible, 1px {color.border.overlay} on {color.surface.raised} | the popup is present in the accessibility tree |
-| closed | the popup absent; the trigger unchanged | `hidden`; the description is still read from the DOM |
+| default | trigger at rest; popup shown for the demonstration | `aria-describedby` on the trigger |
+| hover | trigger background → {color.action.tertiary.hover-bg}; popup after 300 ms | cursor: pointer; the popup |
+| focus-visible | 1px dashed {color.interaction.focus.ring} at −2px on the trigger; popup at once | the ring; the popup |
+| open | popup visible, 1px {color.border.overlay} on {color.surface.raised} | popup in the accessibility tree |
+| closed | popup absent; trigger unchanged | `hidden`; the description is still read from the DOM |
 
-The popup itself has no hover, pressed or focus state: it is not
-interactive.
+The popup has no hover, pressed or focus state; it is not interactive.
 
 ## Keyboard
 
-Focus on the trigger shows the tooltip without delay; moving focus away
-hides it. Escape hides it and does nothing else, so a dialog behind the
-trigger does not close. The popup never receives focus and contains no
-focusable element.
+As in the key table. Escape does nothing else, so a dialog behind the
+trigger stays open. The popup never receives focus and contains nothing
+focusable.
 
 ## Accessibility
 
-The trigger points at the popup with `aria-describedby`, so the description
-is available whether or not the popup is shown; the popup is `role="tooltip"`.
-It opens on hover and on focus, stays open while the pointer is over the
-trigger or the popup (WCAG 1.4.13: hoverable, dismissible, persistent), and
-closes on Escape. The trigger has its own accessible name; the tooltip never
-supplies it. Touch has no hover: the description is available through a
-long-press or is shown inline. Contrast: text 8.43:1 on the raised surface,
-shortcut 10.10:1, border 4.57:1.
+The popup stays open while the pointer is over the trigger or the popup
+(WCAG 1.4.13: hoverable, dismissible, persistent). The trigger has its own
+accessible name; the tooltip never supplies it. Touch has no hover: offer the
+description by long-press or inline. Text meets 4.5:1; the popup border and
+the shortcut border 3:1.
 
 ## Portability
 
-A box with a border and text; placement is the host's positioning primitive.
-Toolkits with a native tooltip use it with the tokens for border and
-background and record any radius they cannot remove.
+A bordered box of text; placement is the host's positioning primitive. A
+toolkit with a native tooltip uses it with the border and background tokens
+and records any radius it cannot remove.
 
 ## Non-examples
 
-A rounded bubble with an arrow. A tooltip with a shadow or a fade longer
-than 150 ms. A tooltip as the only accessible name of an icon button. A
-tooltip with a link or a button inside. One that opens on focus but not on
-hover, or on hover with no delay. A title attribute. A tooltip that follows
-the pointer.
+A rounded bubble with an arrow. A shadow, or a fade longer than 150 ms. The
+tooltip as an icon button's only accessible name. A link or button inside.
+Opening on focus but not hover, or on hover with no delay. A `title`
+attribute. Following the pointer.
diff --git a/spec/components/tree.md b/spec/components/tree.md
index 85fc2bde1..6e2abdb27 100644
--- a/spec/components/tree.md
+++ b/spec/components/tree.md
@@ -40,10 +40,10 @@ tokens:
   dependency.role-color-text-disabled: color.text.disabled
   dependency.role-density-comfortable-control-height: density.comfortable.control-height
   dependency.role-density-compact-control-height: density.compact.control-height
+  dependency.role-focus-offset: focus.offset
   dependency.role-radius-none: radius.none
   dependency.role-space-12: space.12
   dependency.role-space-16: space.16
-  dependency.role-space-2: space.2
   dependency.role-space-8: space.8
 stateTokens:
   default:
@@ -110,17 +110,15 @@ compact: false
 
 ## Purpose
 
-Navigate hierarchical items with explicit expansion and a single roving tab stop. Selection differs from expansion. Caller-supplied nodes represent identities; activation emits an event and never invents file access.
+Navigates a hierarchy; selection and expansion are separate actions.
 
 ## Anatomy
 
-- **tree:** Labelled tree with nested groups.
-- **item:** Named treeitems expose selection; parents also expose expansion.
-- **children:** A nested group hidden when the parent collapses.
+Parts as listed in the anatomy.
 
 ## States
 
-| State | Presentation | Non-colour channel |
+| State | Visual | Non-colour channel |
 | --- | --- | --- |
 | default | Visible named tree items. | Tree and group hierarchy. |
 | selected | Selected fill, text and start indicator. | aria-selected. |
@@ -131,14 +129,12 @@ Navigate hierarchical items with explicit expansion and a single roving tab stop
 
 ## Keyboard
 
-- **Up / Down / Home / End:** Move through visible items in source order.
-- **Right / Left:** Expand or enter a parent, collapse it or return to its parent. Mirror these keys in RTL.
-- **Enter / Space:** Select the focused enabled item.
-- **Typing:** Move to the next visible label starting with the character.
+As in the key table; only one visible item has tabindex=0.
 
 ## Accessibility
 
-Implement the linked tree pattern. Only one visible item has tabindex=0. Labels exclude descendant text. Collapsing a parent of the focused item moves focus to that parent. Selection has a programmatic state and border indicator; disabled items do not activate.
+Labels exclude descendant text. Collapsing a parent of the focused item moves
+focus to that parent.
 
 ## Portability
 
diff --git a/spec/components/wizard.md b/spec/components/wizard.md
index d9e2b3980..f06a0f271 100644
--- a/spec/components/wizard.md
+++ b/spec/components/wizard.md
@@ -66,7 +66,7 @@ contrast:
   - { fg: color.border.default, bg: color.surface.canvas, min: 1, kind: ui, label: "panel edge (decorative)", waiver: "the panel is identified by its heading and position, not by this edge" }
   - { fg: color.action.secondary.text, bg: color.surface.canvas, label: "back button text" }
   - { fg: color.action.secondary.border, bg: color.surface.canvas, min: 3, kind: ui, label: "back button boundary" }
-  - { fg: color.action.primary.border, bg: color.surface.canvas, min: 3, kind: ui, label: "next button boundary", waiver: "the primary button is identified by its text at 9.28:1 on its fill and by its position; the fill measures 1.86:1 and its border 2.56:1 against the canvas, a documented property of the actions family, not of the wizard" }
+  - { fg: color.action.primary.border, bg: color.surface.canvas, min: 3, kind: ui, label: "next button boundary", waiver: "the primary button is identified by its text on the fill and by its position; the low-contrast fill and border against the canvas are a documented property of the actions family" }
   - { fg: color.interaction.focus.ring-container, bg: color.action.primary.bg, min: 3, kind: ui, state: focus-visible, label: "ring on the next button's fill" }
   - { fg: color.text.disabled, bg: color.surface.canvas, min: 3, kind: ui, state: disabled, label: "future step text (exempt; house floor 3:1)" }
 anatomy:
@@ -104,67 +104,53 @@ compact: false
 
 ## Purpose
 
-A form too long for one screen, split into ordered steps that are validated
-one at a time. The stepper shows where the person is and which steps are
-complete; the panel holds the current step; Back and Next move through the
-sequence. Steps are not tabs: a future step is unreachable until the steps
-before it pass.
+A form too long for one screen, split into ordered steps validated one at a
+time. Steps are not tabs: a future step is unreachable until the steps before
+it pass.
 
 ## Anatomy
 
-The stepper, an ordered list of step buttons over a {color.border.divider}
-rule; each step's marker and name; the panel on {color.surface.default} with
-its "Step n of m" heading in {color.text.bright}; the actions row with Back
-(secondary) and Next (primary, {color.action.primary.bg} with
-{color.action.primary.text}).
+Parts as listed in the anatomy; the panel heading reads "Step n of m".
 
 ## States
 
 | State | Visual | Non-colour channel |
 | --- | --- | --- |
-| default | steps in {color.text.default}; complete steps carry the ✓ in {color.status.success.text} | the ✓ glyph; the numbers |
-| hover | step background → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg} | cursor: pointer |
-| focus-visible | ring 1px dashed {color.interaction.focus.ring} at −2px; on Next's fill the ring takes {color.interaction.focus.ring-container} | the ring |
+| default | steps in {color.text.default}; complete steps carry ✓ in {color.status.success.text} | the ✓ glyph; the numbers |
+| hover | step → {color.interaction.hover.bg}; Next → {color.action.primary.hover-bg}; Back → {color.action.secondary.hover-bg} | cursor: pointer |
+| focus-visible | 1px dashed {color.interaction.focus.ring} ring at −2px; {color.interaction.focus.ring-container} on Next's fill | the ring |
 | current | 2px {color.border.selected-indicator} under the step; name in {color.text.bright} | `aria-current="step"`; the indicator bar; the heading reads "Step n of m" |
 | disabled | a future step in {color.text.disabled}; no hover | `disabled`; cursor: not-allowed; skipped by Tab |
-| invalid | the step's marker becomes ✕ in {color.status.danger.text}; its indicator takes {color.status.danger.border}; the panel shows the message | glyph; message text; `aria-invalid` on the failing fields |
-| busy | Next shows the static ⋯ glyph before its label and does not respond; size unchanged | `aria-busy` on the wizard; the glyph; cursor: progress |
+| invalid | marker becomes ✕ in {color.status.danger.text}; indicator {color.status.danger.border}; the panel shows the message | glyph; message text; `aria-invalid` on the failing fields |
+| busy | Next shows the static ⋯ before its label and ignores activation; size unchanged | `aria-busy` on the wizard; the glyph; cursor: progress |
 
-Precedence when several apply: disabled > busy > invalid > current > hover;
-focus-visible is always drawn.
+Precedence: disabled > busy > invalid > current > hover; focus-visible is
+always drawn.
 
 ## Keyboard
 
-Tab walks the enabled step buttons in order, then the panel's fields, then
-Back and Next. Enter or Space on a reachable step goes to it; on Next it
-validates the panel, and on failure moves focus to the first invalid field,
-on success advances and moves focus to the new panel heading. Back never
-validates. There is no arrow-key navigation between steps, because the
+As in the key table. A failed Next moves focus to the first invalid field; a
+successful one to the new panel heading. No arrow keys between steps: the
 stepper is a list of buttons, not a tablist.
 
 ## Accessibility
 
-The wizard is a region named by `aria-label`; the stepper is an `<ol>` so
-count and position are announced; the current step carries
-`aria-current="step"`; complete steps append visually hidden ", complete";
-unreachable steps are `disabled`, not `aria-disabled`, because they cannot be
-activated. The panel is a `<section>` named by its heading, which receives
-focus after each step change. Validation failures are announced through the
-form's live region and the ✕ marker; `aria-busy` marks the wizard while Next
-is in progress. Contrast: step text 8.65:1, current name 10.37:1, complete
-marker 7.13:1, indicator 4.69:1, Next text 9.28:1 on its fill, ring 5.57:1 on
-the primary fill, future step text 3.33:1 (exempt).
+The wizard is a region named by `aria-label`; the `<ol>` announces count and
+position. Complete steps append a visually hidden ", complete". Unreachable
+steps are `disabled`, not `aria-disabled`, because they cannot be activated.
+Validation failures are announced through the form's live region and the ✕
+marker. Text meets 4.5:1; the indicator and rings 3:1; future step text is
+exempt (house floor 3:1).
 
 ## Portability
 
-Everything is text, a 2px bottom border and the button tones; no icon font
-(the markers are text glyphs). Toolkits with a native assistant use its page
-list and map the indicator to the current page; toolkits with none draw the
-stepper as a row of buttons and record any deviation in the indicator width.
+Text, a 2px bottom border and the button tones; markers are text glyphs, no
+icon font. A toolkit without a native assistant draws the stepper as a row of
+buttons and records any deviation in the indicator width.
 
 ## Non-examples
 
-Tabs restyled as steps. A progress bar in place of the stepper. Circles with
-connecting lines that need a rounded radius. Future steps that look enabled
-and reject the click. A spinner on Next. Colour-only completion marks.
-Validation that blocks Back. Animated slides between panels.
+Tabs restyled as steps. A progress bar instead of the stepper. Circles with
+connecting lines that need a radius. Future steps that look enabled and
+reject the click. A spinner on Next. Colour-only completion marks. Validation
+that blocks Back. Animated slides between panels.
diff --git a/spec/decisions.md b/spec/decisions.md
index 4232e37e7..45428d6ed 100644
--- a/spec/decisions.md
+++ b/spec/decisions.md
@@ -10,122 +10,114 @@ A token moves from `proposed` to `approved` only by an `accepted` decision refer
 in its `$extensions["io.github.j3w1.theme"].approval.decision`. Agents may open
 `proposed` entries; only the owner changes a status.
 
-Each entry has a Decision and a Status line (status, date, who decided, and
-what later entries changed), plus Why, Consequences and Alternatives where they
-apply.
+Each entry has a Decision (what was chosen, with `Rule:` naming the section
+that holds the rule), a Why (the reason and the rejected alternatives worth
+remembering) and a Status line (status, date, who decided, and what later
+entries changed). Computed ratios are in `exports/contrast.md`. Entries are
+ordered by topic.
+
+## Decisions by topic
+
+### Governance and process
 
 | # | Title | Status | Date | Decided by |
 | --- | --- | --- | --- | --- |
 | D-000 | Responsibility split: tokens, spec, ports, evidence | accepted | 2026-09-05 | owner (design package) |
-| D-001 | Controlled three-hue extension for status, diagnostics and diffs | accepted | 2026-09-06 | owner |
 | D-002 | v0.1.0 ships the full R1 component inventory | accepted | 2026-09-06 | owner |
-| D-003 | Text-role corrections with new in-hue values | accepted | 2026-09-06 | owner |
 | D-004 | Public repository; MIT code, CC BY 4.0 prose | accepted | 2026-09-06 | owner |
 | D-005 | Default profile id is `default` | proposed | 2026-09-06 | — |
-| D-006 | Focus-ring rule, including invalid + focus | proposed | 2026-09-06 | — |
-| D-007 | `border.control` uses `#A3676B` | proposed | 2026-09-06 | — |
-| D-008 | Fold site hairlines into `border.divider`; `surface.sunken`; unified overlay border | proposed | 2026-09-06 | — |
-| D-009 | Density modes `compact` and `comfortable` as tokens | proposed | 2026-09-06 | — |
 | D-010 | The site deploys from `main` | proposed | 2026-09-06 | — |
 | D-011 | Reference screenshots are cropped before publication | proposed | 2026-09-06 | — |
 | D-012 | Exports are committed and drift-checked | proposed | 2026-09-06 | — |
 | D-013 | Consumption eligibility is separate from approval | proposed | 2026-09-07 | — |
-| D-014 | Automatic inline literal color previews | proposed | 2026-09-07 | — |
-| D-015 | Clarify component mappings exposed by consumption acceptance | proposed | 2026-09-07 | — |
-| D-016 | Pinned release comparison report and historical rendering | proposed | 2026-09-08 | — |
-| D-017 | Private framework parity evidence | proposed | 2026-09-08 | — |
-| D-018 | Declared port capabilities and fresh import evidence | proposed | 2026-09-08 | — |
-| D-019 | One-way namespaced Figma Variables bridge | proposed | 2026-09-08 | — |
-| D-020 | Bounded local validation and recovery workflow | proposed | 2026-09-08 | — |
-| D-021 | Local form composition with versioned data | proposed | 2026-09-08 | — |
-| D-022 | Local visual selection before agent implementation distribution | proposed | 2026-09-08 | — |
+| D-028 | Merge gates and the deployment gate are different suites | accepted | 2026-09-11 | owner (explicit verification-split instruction) |
+| D-031 | Select the checks a change needs; shard the deployment matrix | accepted | 2026-09-26 | owner (explicit CI renovation request, plan approval) |
+
+### Colour foundation
+
+| # | Title | Status | Date | Decided by |
+| --- | --- | --- | --- | --- |
+| D-001 | Controlled three-hue extension for status, diagnostics and diffs | accepted | 2026-09-06 | owner |
+| D-003 | Text-role corrections with new in-hue values | accepted | 2026-09-06 | owner |
+| D-007 | `border.control` uses `#A3676B` | proposed | 2026-09-06 | — |
+| D-008 | Fold site hairlines into `border.divider`; `surface.sunken`; unified overlay border | proposed | 2026-09-06 | — |
 | D-023 | True Black / Rose canonical foundation | accepted | 2026-09-08 | owner (explicit selection of candidate I) |
-| D-024 | Distinguish links from body text and headings | accepted | 2026-09-08 | owner (explicit preview correction) |
-| D-025 | Theme interactive controls throughout the portal and demo | accepted | 2026-09-09 | owner (explicit native-control replacement request) |
 | D-026 | Primary action fill darkens off heritage ANSI 12 | accepted | 2026-09-11 | owner (explicit acceptance after visual review) |
 | D-027 | Recede the interactive chrome | accepted | 2026-09-11 | owner (explicit acceptance after visual review) |
-| D-028 | Merge gates and the deployment gate are different suites | accepted | 2026-09-11 | owner (explicit verification-split instruction) |
 | D-029 | Readable terminal and code reds | accepted | 2026-09-26 | owner (explicit selection of values and release in planning) |
 | D-030 | Hued syntax roles for opt-in code highlighting | accepted | 2026-09-26 | owner (explicit request for a more colourful Codex, selection of the extended hues) |
-| D-031 | Select the checks a change needs; shard the deployment matrix | accepted | 2026-09-26 | owner (explicit CI renovation request, plan approval) |
 | D-032 | Coral slot 6 and a fixed prompt background | accepted | 2026-09-26 | owner (explicit selection of coral and the PowerShell prompt look) |
-| D-033 | Rose prose, semantic content headings and inherited bold | accepted | 2026-09-28 | owner (explicit implementation plan) |
-| D-034 | Versioned Windows native and Windhawk adapters | accepted | 2026-09-28 | owner (explicit implementation plan) |
 | D-035 | An accent surface for the user's own content | accepted | 2026-10-06 | owner (Telegram acceptance: own and other people's messages too similar; chose #3d0c0a from a side-by-side comparison) |
 | D-036 | A translucent text-selection tint | accepted | 2026-10-06 | owner (Telegram acceptance: Android text selection barely visible; chose 50% from a side-by-side comparison) |
 
-## D-000 Responsibility split
-
-**Decision.** Token files own literal values and aliases; the specification owns
-meaning, permitted uses and constraints; port mappings own native keys; evidence
-records own what was actually tested. README, the site and pictures summarise
-them and never replace them.
-
-**Consequences.** A disagreement between spec and tokens is a defect to fix, not
-a choice. Images never override token values. Historical source is evidence of
-origin, not an override of the adopted accessible design.
+### Typography and density
 
-**Status.** accepted · 2026-09-05 · owner (design package `ARCHITECTURE.md`).
+| # | Title | Status | Date | Decided by |
+| --- | --- | --- | --- | --- |
+| D-009 | Density modes `compact` and `comfortable` as tokens | proposed | 2026-09-06 | — |
+| D-033 | Rose prose, semantic content headings and inherited bold | accepted | 2026-09-28 | owner (explicit implementation plan) |
+| D-037 | Display and title type sizes | accepted | 2026-10-14 | owner (G2 authority review) |
+| D-038 | Compact is the default density | accepted | 2026-10-14 | owner (explicit instruction at the G1 design review) |
 
-## D-001 Controlled three-hue extension
+### Interaction and components
 
-**Decision.** `default` adds three desaturated, warm-shifted hues: amber
-`#C9973F` (warning, modified), green `#86A46F` (success, added), blue `#7E9EBB`
-(info); dark tints `#1F1A0C`, `#0F1A0E`, `#0F141C`. They appear only in
-`status`, `diagnostic` and `diff` (plus `code`, `terminal` and `chart` in
-`extended`), never in `surface`, `text`, `border`, `interaction` or `action`. No
-purple, cyan or magenta. Every status role also has a glyph, underline pattern
-or border style. `default` syntax stays monochrome; `extended` stays `proposed`.
-
-**Why.** Lightness alone cannot separate diagnostics, diffs and status (a
-200-line diff cannot be scanned by glyph); the owner's PhpStorm scheme already
-uses such hues.
+| # | Title | Status | Date | Decided by |
+| --- | --- | --- | --- | --- |
+| D-006 | Focus-ring rule, including invalid + focus | proposed | 2026-09-06 | — |
+| D-014 | Automatic inline literal color previews | proposed | 2026-09-07 | — |
+| D-015 | Clarify component mappings exposed by consumption acceptance | proposed | 2026-09-07 | — |
+| D-024 | Distinguish links from body text and headings | accepted | 2026-09-08 | owner (explicit preview correction) |
+| D-025 | Theme interactive controls throughout the portal and demo | accepted | 2026-09-09 | owner (explicit native-control replacement request) |
 
-**Consequences.** Contrast on canvas / surface / raised: amber 7.54 / 7.34 /
-6.90, green 7.13 / 6.95 / 6.53, blue 7.08 / 6.90 / 6.48.
+### Site, tools and distribution
 
-**Status.** accepted · 2026-09-06 · owner. Superseded in part by D-030 (opt-in
-`code.hued.*`; `code.syntax.*` stays monochrome).
+| # | Title | Status | Date | Decided by |
+| --- | --- | --- | --- | --- |
+| D-016 | Pinned release comparison report and historical rendering | proposed | 2026-09-08 | — |
+| D-017 | Private framework parity evidence | proposed | 2026-09-08 | — |
+| D-019 | One-way namespaced Figma Variables bridge | proposed | 2026-09-08 | — |
+| D-020 | Bounded local validation and recovery workflow | proposed | 2026-09-08 | — |
+| D-021 | Local form composition with versioned data | proposed | 2026-09-08 | — |
+| D-022 | Local visual selection before agent implementation distribution | proposed | 2026-09-08 | — |
 
-## D-002 v0.1.0 inventory
+### Ports
 
-**Decision.** The first public release holds every `R1` inventory component
-(about 47 across all nine families) plus four composed specimens (settings
-panel, administrative form, filterable table, i3 window frame), each *specified*
-and *demonstrated*. Ten core components are also *tested*: button, link,
-text-field, select, checkbox, radio-group, tabs, dialog, menu, table.
+| # | Title | Status | Date | Decided by |
+| --- | --- | --- | --- | --- |
+| D-018 | Declared port capabilities and fresh import evidence | proposed | 2026-09-08 | — |
+| D-034 | Versioned Windows native and Windhawk adapters | accepted | 2026-09-28 | owner (explicit implementation plan) |
 
-**Consequences.** `R2` items and the form-builder specimen wait for v0.2.
+## D-000 Responsibility split
 
-**Status.** accepted · 2026-09-06 · owner.
+**Decision.** Token files own literal values and aliases; the specification
+owns meaning, permitted uses and constraints; port mappings own native keys;
+evidence records own what was tested. README, the site and pictures only
+summarise them. Rule: `AGENTS.md`, Source of truth.
 
-## D-003 Text-role corrections
+**Why.** With one owner per fact, a disagreement between spec and tokens is a
+defect to fix, not a choice, and neither images nor historical sources can
+override the adopted accessible design.
 
-**Decision.** `text.subtle` = `#AD7175` (5.10 / 4.96 / 4.67) for metadata,
-comments and line numbers. `text.disabled` = `#8A5559` (3.33 / 3.24 / 3.05;
-exempt under WCAG 1.4.3, at least 3:1 by house policy). `#A3676B` stays as
-`border.control`, `icon.decorative`, `status.neutral.fill` and `chart.series.4`
-(non-text, at least 3:1); `#7D1310` only as `border.disabled`, `code.whitespace`
-and minor grid lines, never text.
+**Status.** accepted · 2026-09-05 · owner (design package `ARCHITECTURE.md`).
 
-**Why.** `#A3676B` (the site's `--quiet`) measures 4.45:1 on `#0C0909` and
-`#7D1310` (`--inactive`) 1.86:1, yet the site used `#7D1310` for line numbers;
-its suggested `#A8403A` measures only 3.27:1.
+## D-002 v0.1.0 inventory
 
-**Consequences.** `heritage-ansi` keeps the original assignments, flagged
-`$deprecated`.
+**Decision.** The first public release holds every `R1` inventory component
+plus four composed specimens (settings panel, administrative form, filterable
+table, i3 window frame), each specified and demonstrated. Ten core components
+are also tested: button, link, text-field, select, checkbox, radio-group,
+tabs, dialog, menu, table. `R2` items and the form-builder specimen wait for
+v0.2.
 
 **Status.** accepted · 2026-09-06 · owner.
 
 ## D-004 Visibility and licensing
 
-**Decision.** The repository is public. MIT: code, tokens, schemas, scripts,
-tests, site source, generated JSON/CSS exports. CC BY 4.0: specification prose,
-specimens, generated Markdown exports. Screenshots under `references/`: all
-rights reserved, reference only.
-
-**Consequences.** Fonts, vendor template material and private business data are
-never committed; CI scans for them. See `LICENSE.md`.
+**Decision.** The repository is public: MIT for code, tokens, schemas and
+generated JSON/CSS; CC BY 4.0 for specification prose, specimens and generated
+Markdown; screenshots under `references/` are reference only, all rights
+reserved. Fonts, vendor template material and private business data are never
+committed; CI scans for them. Rule: `LICENSE.md`.
 
 **Status.** accepted · 2026-09-06 · owner.
 
@@ -136,62 +128,11 @@ renaming it later is a MAJOR version change.
 
 **Status.** proposed · 2026-09-06.
 
-## D-006 Focus-ring rule
-
-**Decision.** Controls and rows: `outline: 1px dashed
-{color.interaction.focus.ring}` (`#E53935`), `outline-offset: -2px`. Focusable
-containers (panes, windows, dialogs, cards): `outline: 2px solid
-{color.interaction.focus.ring-container}` (`#FFA2A7`), `outline-offset: -3px`.
-On any fill (selection, action, status) the ring takes the on-fill text colour;
-on invalid + focus, where the 2px danger border is already red, it takes
-`#FFA2A7` at `outline-offset: -4px`. `:focus:not(:focus-visible)` draws nothing;
-forced-colors mode uses `Highlight`. Selection is a fill, focus a ring.
-
-**Why.** `#E53935` on `#911410` measures 2.15:1.
-
-**Status.** proposed · 2026-09-06. Clarified by D-015 (declared component ring
-mappings on fills). Since D-027 a selected row (`#531310`, 3.38:1) takes the
-ordinary ring.
-
-## D-007 Control boundary colour
-
-**Decision.** `border.control` = `#A3676B` (4.45 / 4.33 / 4.07).
-
-**Why.** Control boundaries need 3:1 against their surface (WCAG 1.4.11);
-`#531310` (1.39) and `#9E231F` (2.56) fail.
-
-**Alternatives.** `#C81A1A` (3.42): too loud for every input at rest.
-
-**Status.** proposed · 2026-09-06.
-
-## D-008 Hairlines, sunken surface, overlay border
-
-**Decision.** The site's six near-identical hairlines (`#290D0C`, `#24100F`,
-`#321110`, `#38100F`, `#190B0B`, `#2B0E0D`) fold into `border.divider` =
-`#2B0E0D`. `#0A0707` becomes `surface.sunken`. Every floating layer (dialog,
-drawer, menu, popover, toast) takes a 1px `border.overlay` = `#E53935`.
-
-**Consequences.** The dunst frame `#AE1914` survives only in `heritage-ansi`.
-
-**Status.** proposed · 2026-09-06.
-
-## D-009 Density modes
-
-**Decision.** Density modes are tokens, set with `data-density` on any subtree.
-`compact` matches the site: control 24px, row 28px, UI type 12/16, icon 16, list
-gap 2. `comfortable`: control 32px, row 36px, UI type 13/18, icon 16, list gap
-4.
-
-**Consequences.** Both meet the 24×24 CSS-pixel target minimum; `compact` needs
-4px between adjacent targets.
-
-**Status.** proposed · 2026-09-06.
-
 ## D-010 Deployment source
 
-**Decision.** The site deploys from `main` through GitHub Actions after the full
-pipeline passes. The page header prints the version and build commit and links
-to the latest tag. Consumers still pin tags or commits.
+**Decision.** The site deploys from `main` through GitHub Actions after the
+full pipeline passes. The page header prints the version and build commit and
+links to the latest tag. Consumers still pin tags or commits.
 
 **Status.** proposed · 2026-09-06.
 
@@ -199,753 +140,623 @@ to the latest tag. Consumers still pin tags or commits.
 
 **Decision.** Crop the title bar (or redact the name) before committing a
 screenshot under `references/`, and disclose the redaction in its provenance
-record. If the owner prefers, screenshots stay out of the repository, described
-only in `references/catalogue.json`.
+record. If the owner prefers, screenshots stay out of the repository,
+described only in `references/catalogue.json`.
 
-**Why.** The four PhpStorm screenshots show a private project name in the title
-bar.
+**Why.** The four PhpStorm screenshots show a private project name in the
+title bar.
 
 **Status.** proposed · 2026-09-06.
 
 ## D-012 Committed exports
 
-**Decision.** `exports/`, `site/src/styles/tokens.generated.css`,
-`schemas/json/` and the README marker blocks are generated and committed; `npm
-run check` fails CI on drift or orphan files. No timestamps or commit hashes, so
-two runs are byte-identical. `dist/` is never committed.
+**Decision.** Generated files (`exports/`, `site/src/styles/tokens.generated.css`,
+`schemas/json/`, the README marker blocks) are committed and byte-identical
+across runs, with no timestamps or commit hashes; `npm run check` fails CI on
+drift or orphans. `dist/` is never committed. Rule: `AGENTS.md`, Source of
+truth.
 
 **Status.** proposed · 2026-09-06.
 
 ## D-013 Consumption eligibility is separate from approval
 
-**Decision.** In an approved default profile, pending roles may be used at a
-pinned revision with their pending decision IDs (dependencies included)
-disclosed. Proposed profiles are preview-only and blocked for delivery; heritage
-profiles are historical-only; deprecated or heritage roles cannot be newly
-mapped in an approved profile, and no substitute is implied. Observed/approved
-roles are usable within their documented scope; primitives are inspection-only.
-Release version, profile status, role status, deprecation and eligibility are
-separate facts; the generator emits the policy and eligibility metadata.
-
-**Why.** Issue #4 found conflicting instructions to use and to prohibit pending
-roles in the approved default profile.
-
-**Consequences.** Governs consumption only: no pending value is approved, and
-D-005 through D-012 are unchanged.
+**Decision.** Eligibility is a separate fact from approval. In the approved
+default profile, pending roles may be used at a pinned revision when their
+pending decision IDs, dependencies included, are disclosed. Proposed profiles
+are preview-only, heritage profiles historical-only, and deprecated or
+heritage roles cannot be newly mapped. Nothing pending is approved. Rule:
+`agents/consume.md`, Pick a profile (generated policy).
 
-**Alternatives.** Block pending roles until individually approved.
+**Why.** Issue #4 found conflicting instructions to use and to prohibit
+pending roles in the approved default profile. Rejected: blocking them until
+each is approved.
 
 **Status.** proposed · 2026-09-07 (formal log status remains owner-controlled).
 Owner direction, 2026-09-07, in Phase 1 planning: "Use and report", and "Block
 new use" for deprecated roles; implementation authorized.
 
-## D-014 Automatic inline literal color previews
+## D-028 Merge gates and the deployment gate are different suites
 
-**Decision.** Every visible CSS hex literal on the spec page gets one generated
-preview; the literal stays exact and is data, never inferred from a token or
-screenshot. The preview is 16px with its theme-derived 1px boundary, circular at
-rest; on CSS `:hover` it scales to 17.4px with radius zero (fast duration token
-and ease-out on transform and border-radius; none under reduced motion). Alpha
-shows over a checkerboard of theme tokens. Only this preview may use rounded
-geometry, patterned gradient backgrounds and border-radius animation. Text,
-copying, keyboard order and no-JS access stay intact. Syntax specimens `#f00`,
-`#f008`, `#ff0000`, `#ff000080`, `#000000`, `#ffffff` (literal data, not roles)
-also test copy fidelity and transparent, dark and light previews in the browser
-suite.
+**Decision.** The full browser and packed-consumer matrix gates deployment,
+not merging: it runs on `main` before `deploy` and on demand through the
+workflow dispatch. A subset never writes evidence; it uses the plain list
+reporter, because the evidence reporter would publish a matrix that only
+looked complete. Packed consumers run with the browser suite, and
+`scripts/ui-verification-report.mjs` requires their complete protocol on all
+three engines. No mandatory local gate: `npm run test:all` is recommended,
+never verified (`AGENTS.md`, The check loop).
+
+**Why.** Accepting D-026 and D-027 cost 29.5 minutes of CI before merge, 84%
+of it the browser matrix. A browser failure stops publication, not a correct
+merge; a local receipt proves only that something wrote it. Rejected:
+sharding before merge (partial evidence files) and packed consumers on the
+merge path.
 
-**Why.** Issue #1 asks for circular previews and a transparency checkerboard,
-against the square and no-gradient rules.
+**Status.** accepted · 2026-09-11 · owner: merges gate on a few minutes of
+checks, the full matrix gates deployment, a local full run stays recommended.
+Superseded in part by D-031 (path-selected pull-request checks, a sharded
+deployment matrix with one evidence report, `release-gate` as the only required
+check); the rules above still hold.
 
-**Consequences.** Literal-data presentation only: no new palette, semantic role
-or geometry rule.
+## D-031 Select the checks a change needs; shard the deployment matrix
 
-**Status.** proposed · 2026-09-07 (formal log status remains owner-controlled).
-Owner direction, 2026-09-07: the narrow exception explicitly approved,
-implementation authorized.
+**Decision.** CI is `select` → checks → `release-gate`. The rules stay here:
+no spec section or guide owns CI, and `scripts/ci/select.mjs` and `AGENTS.md`
+carry only parts.
 
-### Follow the pointer hovering effect
+- `select` reads the changed paths and `scripts/ci/proofs.json`; a path gets
+  cheaper only when a rule claims it. Unclaimed paths and control files
+  (workflows, the selector and registry, `package.json`, the lockfile, the
+  Playwright configs) run every check. On a pull request the base commit's
+  control list also applies, so a change cannot make itself cheaper. A file a
+  browser spec imports runs that spec and counts as a site change.
+- A pull request runs only the selected checks, unit tests and build in
+  parallel; browser subsets write no evidence (D-028).
+- A push to `main` that changes the site runs the whole matrix in shards
+  (desktop in four parts; projects read from the Playwright config), with
+  packed consumers in parallel. Blob reports merge once into the evidence
+  reporter, which refuses a missing shard or configured test; then the
+  verification report and deployment. No site change, no deployment. Changed
+  paths count from the last commit that reached Pages.
+- `release-gate`, the only required check, recomputes the plan from Git with
+  the same code and checks each job ran as planned and passed.
+- `fullyParallel`, two workers per CI job, zero retries. The page axe scan is
+  two tests (colour contrast; every other rule) covering exactly the tagged
+  rules. Only an unnarrowed `playwright test`, or the merge of every shard,
+  writes evidence.
 
-Part of this exception only; the tooltip and focus contracts are unchanged.
-Mouse and pen pointers open a non-interactive popup with the exact value; touch
-and unknown pointers do not. CSS `:hover` alone drives the morph; neither uses
-the `hover` or `any-hover` media features, which can report no hover despite
-mouse input. The popup follows the pointer inside the circle at an 8px gap,
-flips when necessary and stays within an 8px viewport gutter, bounded by the
-viewport. It closes at once when the pointer leaves the circle, on an outside
-press, Escape or loss of window focus, and after page or nested-container
-scrolling unless the same circle is still under the last pointer position. It
-cannot capture input or hold itself open and adds no keyboard stop; token tables
-and the keyboard-accessible token inspector keep the persistent information and
-links. Tracking has no animation or easing, even under reduced motion. Circles
-and literal text stay visible without JavaScript.
+**Why.** `main` ran every check whatever changed: a terminal-kit-only change
+took 63 minutes to deploy, and the browser suite ran on one worker for 24.7
+minutes. Merged blob reports remove D-028's objection to sharding. Rejected: a
+self-hosted runner (fork pull requests could run code on it), reusing
+pull-request evidence on `main` (the build stamps the commit), Playwright's
+internal shard weights (not public).
 
-## D-015 Clarify component mappings exposed by consumption acceptance
+**Status.** accepted · 2026-09-26 · owner, who found thirty-minute runs on
+`main` unacceptable and asked for classified checks modelled on theselfish.one.
+Supersedes D-028 in part.
 
-**Decision.** Keep current component appearance and all token values. Ordinary
-confirmation uses the primary tone; destructive tone is for destructive actions,
-whatever the confirmation's semantic role. A pressed primary button keeps
-`color.action.primary.border`, secondary and tertiary use `color.border.active`,
-destructive keeps its declared border; the generic metadata is corrected to
-match. Controls keep their documented ring mappings (primary and
-checked/selected fills: `color.interaction.focus.ring-container` where declared;
-destructive fills: their on-fill text role). The global wording points to them,
-keeping ring geometry, forced-colors behavior and every contrast floor.
+## D-001 Controlled three-hue extension
 
-**Why.** Phase 2's independently reviewed composed acceptance preserved these
-three contradictions; Phase 3 controls must not present an arbitrary
-interpretation as canonical.
+**Decision.** `default` adds three desaturated, warm-shifted hues: amber
+`#C9973F` (warning, modified), green `#86A46F` (success, added), blue
+`#7E9EBB` (info), with dark tints `#1F1A0C`, `#0F1A0E`, `#0F141C`. They serve
+status, diagnostics and diffs only (plus code, terminal and chart in
+`extended`). Rule: `spec/foundations.md`, Status, diagnostics and diffs.
 
-**Consequences.** No profile or pending-token approval; historical acceptance
-reports stay historical evidence.
+**Why.** Lightness alone cannot separate diagnostics, diffs and status (a
+200-line diff cannot be scanned by glyph); the owner's PhpStorm scheme already
+uses such hues.
 
-**Alternatives.** Enforce the generic prose everywhere, or mark affected
-workbench configurations unresolved.
+**Status.** accepted · 2026-09-06 · owner. Superseded in part by D-030 (opt-in
+`code.hued.*`; `code.syntax.*` stays monochrome).
 
-**Status.** proposed · 2026-09-07. The owner directed application on 2026-09-07;
-formal status remains owner-managed.
+## D-003 Text-role corrections
 
-## D-016 Pinned release comparison report and historical rendering
+**Decision.** `text.subtle` = `#AD7175` for metadata, comments and line
+numbers; `text.disabled` = `#8A5559`. `#A3676B` and `#7D1310` keep only
+non-text roles; `heritage-ansi` keeps the original assignments, flagged
+`$deprecated`. Rule: `spec/foundations.md`, Text ladder.
 
-**Decision.** A report (schema version 1) records both immutable revisions,
-profile and input digests, separate semantic change categories, explicit
-dependency evidence and unsupported historical inputs. Reports and historical
-specimen renderings are build artifacts in `dist/releases/`; canonical exports
-keep their contract. History is read from Git, never executed as a build or
-imported as a module. The shared specimen renderer draws each side's maintained
-markup and styles (documented renderer version, matched conditions): a
-reconstructed reference, not evidence that an old site's JavaScript or an
-external port ran. Browser captures are run evidence with environment and
-artifact hashes; missing evidence stays not run. A rename needs an explicit
-mapping naming both revisions; equal values do not establish one.
+**Why.** `#A3676B` (the site's `--quiet`) falls just short of the text floor
+and `#7D1310` (`--inactive`) far short, yet the site used `#7D1310` for line
+numbers; its suggested `#A8403A` failed too.
 
-**Why.** Run metadata must stay out of deterministic exports, and missing
-historical fields must not be read by today's rules.
+**Status.** accepted · 2026-09-06 · owner.
 
-**Consequences.** No design values, eligibility rules or verification statuses
-change.
+## D-007 Control boundary colour
 
-**Alternatives.** A raw file diff (no semantic categories) or running historical
-applications (a wider trust boundary).
+**Decision.** `border.control` = `#A3676B`.
 
-**Status.** proposed · 2026-09-08. Issue #2 authorizes derived release
-diagnostics; formal status and all theme approvals remain owner-managed.
+**Why.** Control boundaries need 3:1 against their surface (WCAG 1.4.11):
+`#531310` and `#9E231F` fail, and `#C81A1A` is too loud for every input at
+rest.
 
-## D-017 Private framework parity evidence
+**Status.** proposed · 2026-09-06.
 
-**Decision.** An independently authored private harness takes an
-operator-supplied licensed target and an explicit license review, copies only
-declared template inputs into a new private fixture directory, uses synthetic
-examples and records exact theme, template, framework, dependency and fixture
-identities. The target and its application behavior stay outside its write scope; browser captures, copied
-vendor inputs and detailed results stay private; missing prerequisites give
-not-run output.
+## D-008 Hairlines, sunken surface, overlay border
 
-**Consequences.** A successful diagnostic run is not a verified port or a claim
-of complete visual parity.
+**Decision.** The site's six near-identical hairlines fold into
+`border.divider` = `#2B0E0D`; `#0A0707` becomes `surface.sunken`; every
+floating layer takes a 1px `border.overlay` = `#E53935`. The dunst frame
+`#AE1914` survives only in `heritage-ansi`. Rule: `spec/foundations.md`,
+Borders.
 
-**Alternatives.** A public vendor copy (breaks the license boundary) or a
-generic mock presented as template evidence.
+**Status.** proposed · 2026-09-06.
 
-**Status.** proposed · 2026-09-08. Issue #3 authorizes the harness; approval
-statuses and license boundaries are unchanged.
+## D-023 True Black / Rose canonical foundation
 
-## D-018 Declared port capabilities and fresh import evidence
+**Decision.** Seven surface roles change: canvas, sunken, input,
+`surface.code` and `surface.terminal` take the existing pure black; chrome
+takes `#090707` and default panels `#100c0c`, as new primitives
+`color.primitive.ink.14` and `ink.28`. Everything else stays as reviewed, the
+historical profile keeps its surfaces, and the A–I candidate reviews stay
+local evidence. It approves nothing else and ships in 1.0.0 as a major change.
+Rule: `spec/foundations.md`, Surfaces.
 
-**Decision.** Optional `capabilities.json` refines each mapped/unmapped role
-into mapped, inherited, unsupported, out-of-scope or not-implemented, with a
-surface and reason; legacy unmapped reasons stay unclassified, never guessed.
-Import verification is separate from mapping state and declared status: verified
-output needs a recorded real-import protocol bound to current target metadata,
-canonical tokens, mappings, capabilities and artifact bytes. Relevant changes
-make evidence stale; failed or missing checks cannot pass. One generated
-catalogue feeds summaries, drill-downs and task kits; private parity records
-never enter it automatically.
-
-**Alternatives.** A hand-maintained support matrix, or a parse treated as an
-import.
+**Why.** The owner explicitly selected the reviewed candidate I: "use the True
+Black / Rose theme and make it permanent for j3w1/theme".
 
-**Status.** proposed · 2026-09-08. Issue #14 authorizes a derived mapping
-explorer; it creates no port, changes no host capability and approves no
-profile.
+**Status.** accepted · 2026-09-08 · owner, who also authorized the remaining
+Phase 6 implementation. Superseded in part only: D-024 (`text.link`), D-026
+(`action.primary.bg`), D-027 (`surface.raised`, `interaction.selection.bg`,
+`text.placeholder`).
 
-## D-019 One-way namespaced Figma Variables bridge
+## D-026 Primary action fill darkens off heritage ANSI 12
 
-**Decision.** An explicit pinned revision supplies colors and scalar
-spacing/radius values, one way. Aliases keep their dependency structure;
-dependency-only primitives are hidden from property pickers; unsupported types
-and non-approved profiles are reported. One collection and one mode avoid
-assuming paid mode capabilities. Dry-run is read-only, apply explicit; import
-receipts identify owned IDs and their last observed values; conflicts and manual
-edits stop an update or rollback. The bridge never stores ownership in
-unsupported plugin data, overwrites unrelated variables or writes back to the
-repository.
+**Decision.** `color.action.primary.bg` aliases the existing
+`color.primitive.red.200` (`#7d1310`) instead of `red.300`; pressed `#630f0d`
+stays below it and hover `#911410` above. No colour is minted. The decorative
+pair `primary fill against the panel` stays waived (the label identifies the
+button); no waiver is added or widened. Rule: `spec/foundations.md`, Actions.
 
-**Alternatives.** Manual duplicate maintenance, a paid-only REST workflow, or
-flattening aliases/composites.
+**Why.** The owner asked for a slightly darker fill on primary actions.
+`red.300` is also heritage ANSI 12, which `schemas/roles.mjs` pins, so it
+could not darken without repainting the terminal's bright red. Rejected: a new
+primitive, or a darker portal button alone (a value outside `tokens/`).
 
-**Status.** proposed · 2026-09-08. Issue #15 authorizes this bounded adapter;
-approval and eligibility follow the canonical source.
+**Status.** accepted · 2026-09-11 · owner (accepted as implemented after
+review). Supersedes D-023 only for `action.primary.bg` (`#871f19`, kept "exactly
+as reviewed" under its red actions clause).
 
-## D-020 Bounded local validation and recovery workflow
+## D-027 Recede the interactive chrome
 
-**Decision.** One executable pattern: editing, invalid, review, busy, success.
-Validation runs on explicit submission, keeps values and shows linked errors;
-typing does not rewrite live announcements. Review can return to a field;
-confirm enters busy, a separate local simulation-completion event enters
-success, and no request is made. The workstation example's reserved name and
-hostname are local fixture conflicts, not business policy. The contract pins
-constituent component content digests and reports automated evidence apart from
-manual screen-reader acceptance.
+**Decision.** Four roles move to existing palette values; no colour is minted
+and no waiver is added or widened.
 
-**Alternatives.** A color-only invalid snapshot, validation on every keystroke,
-or a submit click treated as a successful save.
+- `surface.raised`: `ink.30` (`#160b0b`), so an open list reads as depth.
+- `interaction.selection.bg`: `red.100` (`#531310`); the 2px
+  `border.selected-indicator` and the check glyph carry selection, not the
+  fill.
+- `text.placeholder`: `rose.350` (`#a3676b`), over the text floor on
+  `surface.input` without a waiver.
+- Links hover on `interaction.hover.bg`; menu items keep
+  `interaction.hover.bg-strong`.
 
-**Status.** proposed · 2026-09-08. Issue #16 authorizes one pattern from
-existing admin-form, field, alert and button rules, without new palette roles.
+A selected row now takes the ordinary ring; primary and danger fills keep the
+recoloured one. Rule: `spec/foundations.md`, Interaction states, rule 1.
+D-006 stays as written.
 
-## D-021 Local form composition with versioned data
+**Why.** The owner found the open list, selected row, placeholder and link
+hover louder than the content they sit against. Rejected: darkening only the
+pointed-at components, or adding intermediate primitives.
 
-**Decision.** Five canonical field kinds can be added, edited, removed and
-reordered with buttons. Definitions, preview values and validation state are
-separate. JSON imports have closed fields, bounded size/counts and unique stable
-IDs; a failed import changes nothing. Content identity pins the supplying theme
-and component contracts; downloads hold definitions, never entered values.
-Rendering and validation reuse D-020.
+**Status.** accepted · 2026-09-11 · owner (accepted as implemented after
+review). Supersedes D-023 only for `surface.raised` (`#241010`),
+`interaction.selection.bg` (`#911410`) and `text.placeholder` (`#bd787d`).
 
-**Consequences.** A draft reference component, not a backend platform or native
-port.
+## D-029 Readable terminal and code reds
 
-**Alternatives.** Arbitrary HTML/schema execution, a conditional workflow
-engine, or a second field implementation.
+**Decision.** `default` carries a readable heritage sixteen: each slot below
+the text floor keeps its hue and saturation and gains HSL lightness, in the
+heritage light-to-dark order. Slot 8 (bright black) stays the dim tier. Slots
+0, 2, 3, 5, 7 and 11 already passed.
+
+| slot | heritage | default profile |
+| --- | --- | --- |
+| 1 | `#c81a1a` | `#e84b4b` |
+| 4 | `#8c1212` | `#e53131` |
+| 6 | `#9e474a` | `#bb696c` |
+| 8 | `#7d1310` | `#b71c17` (dim tier) |
+| 9 | `#ab1612` | `#ea3833` |
+| 10 | `#ad2721` | `#dc4f49` |
+| 12 | `#871f19` | `#db433a` |
+| 13 | `#e82132` | `#ed5360` |
+| 14 | `#e0292f` | `#e6565a` |
+| 15 | `#a3676b` | `#b17e81` |
+
+Syntax reds lift: `code.syntax.keyword` and `tag` to `#f7463c`
+(`color.primitive.red.860`), `property`, `heading` and `invalid` to `#e95551`
+(`color.primitive.red.810`). Interface reds are unchanged. New role
+`color.terminal.prompt-text` colours the prompt's path segment. Rule:
+`spec/foundations.md`, Code and terminal.
 
-**Status.** proposed · 2026-09-08. Issue #19 authorizes the deferred
-form-builder demonstration.
+**Why.** In Orca, Claude Code and Codex the owner found the reds right but too
+dim: Claude Code's inline code uses slot 12, code-block keywords and Codex git
+branches slot 4, both far under 3:1. Ten of the sixteen slots failed the text
+floor, and programs, not the theme, pick the slot. Rejected: the heritage
+slots, the `extended` palette (the owner keeps the red and rose families), a
+gentle lift leaving slots 4 and 12 near 3:1, and an OKLCH lift (gamut clipping
+drifts toward raspberry).
 
-## D-022 Local visual selection before agent implementation distribution
+**Status.** accepted · 2026-09-26 · owner, who chose the values, asked for the
+change and approved this entry by selecting them. Superseded in part by D-032:
+slot 6 is coral `#ff7a66`, not `#bb696c`; the prompt gets
+`color.terminal.prompt-bg` (heritage `#8c1212`) with `#ffa2a7` text in
+`default`.
+
+## D-030 Hued syntax roles for opt-in code highlighting
 
-**Decision.** Before canonicalization a local harness compares exactly three
-explicit token overlays with Current, using shared specimen rendering and an
-original Vue composition. Overlays, reports and review builds stay ignored,
-never public profiles or delivery artifacts. The existing alias resolver and
-unrounded contrast engine judge candidates without changing canonical values,
-historical ANSI slots or waivers. Numbers and browser evidence approve nothing:
-the owner selects a concrete candidate before foundation freeze, mass
-productization or deployment. See `docs/phase6-visual-review.md`.
+**Decision.** `default` gains opt-in `color.code.hued.*` roles carrying the
+`extended` code hues; keywords, tags, comments, variables and punctuation keep
+`code.syntax`. Consumers keep `code.syntax.*` unless a host opts in by mapping
+`code.hued.*`, as the Codex port does. This extends D-001's code allowance to
+these roles only; `extended` stays proposed. Rule: `spec/foundations.md`, Code
+and terminal.
 
-**Why.** Agents need installable or copyable components and compositions with
-complete dependencies and pinned contracts, shared by the future package,
-documentation portal and Vue application.
+**Why.** The owner found Codex's code "too boring and single-coloured"; D-001
+allowed code hues only in the proposed `extended` overlay, which is blocked
+for delivery. Approving all of `extended` would reassign terminal slots too.
 
-**Alternatives.** Productizing the old palette first, unapproved preview
-profiles, or appearance-only snippets.
+**Status.** accepted · 2026-09-26 · owner, who chose the extended hues.
 
-**Status.** proposed · 2026-09-08. Issue #37 and the owner's implementation
-instruction authorize three local candidates; design approval remains
-owner-managed. The selection is D-023.
+## D-032 Coral slot 6 and a fixed prompt background
 
-## D-023 True Black / Rose canonical foundation
+**Decision.**
 
-**Decision.** Seven surface assignments change: canvas, sunken, input, code and
-terminal use the existing pure black primitive; chrome uses `#090707`; default
-panels use `#100c0c`. The two new values become `color.primitive.ink.14` and
-`color.primitive.ink.28`, keeping luminance order and all historical primitives.
-Everything else stays exactly as reviewed (rose/white foreground, red actions,
-focus, borders, selections, status and chart roles); raised/overlay stay
-`#241010`, alternate chrome `#1c0a09`. The historical profile keeps its previous
-surfaces.
+- Slot 6 is coral `#ff7a66` (`color.primitive.coral.700`): warm and vivid,
+  apart from the rose text, without taking amber's code role. Brightening it
+  so that dimmed coral passes is ruled out.
+- New role `color.terminal.prompt-bg` is heritage `#8c1212`
+  (`color.primitive.ansi.4`) in every profile. `color.terminal.prompt-text` is
+  bright rose `#ffa2a7` in `default` and `extended`, `#f4eeee` in
+  `heritage-ansi`.
 
-**Why.** The owner explicitly selected the reviewed candidate I: "use the True
-Black / Rose theme and make it permanent for j3w1/theme".
+Rule: `spec/components/terminal.md`, Accessibility and Portability.
 
-**Consequences.** Approves these surfaces only, not other pending decisions, new
-colors or accessibility waivers. The rejected A/B/C, revised D/E/F and final
-G/H/I reviews are historical local evidence, not public profiles. Foundation for
-the Phase 6 package, copy distributions, static portal and Vue showcase; ships
-in 1.0.0 under the major-version rule, existing pins immutable.
+**Why.** Claude Code highlights fenced code with fixed ANSI slots: PowerShell
+cmdlets took slot 6 (`#bb696c`, nearly the rose text), and dimmed types fell
+far under the floor. Agnoster's directory segment sits on slot 4, which D-029
+brightened, so its slot-7 text fell under 3:1; the owner's PowerShell shows
+`#ffa2a7` on `#8c1212`, the look to keep. Rejected: peach `#ffab91`, blush
+`#ffc2c5` or amber `#e0a84a` for slot 6; dark text on the bright slot 4; the
+heritage palette in SSH shells (palettes should match across hosts).
 
-**Status.** accepted · 2026-09-08 · owner, who also authorized the remaining
-Phase 6 implementation. Superseded in part only: D-024 (`text.link`), D-026
-(`action.primary.bg`), D-027 (`surface.raised`, `interaction.selection.bg`,
-`text.placeholder`).
+**Status.** accepted · 2026-09-26 · owner, who saw both problems in real use and
+chose the values. Supersedes D-029 in part.
 
-## D-024 Distinguish links from body text and headings
+## D-035 An accent surface for the user's own content
 
-**Decision.** `color.text.link` maps to the existing strong red `#f73f35`,
-keeping the persistent red underline and near-white hover text on the strong
-dark-red hover fill. Visited links keep color and underline; current-page and
-selected navigation keep their on-fill roles; body and heading colors are
-unchanged.
+First recorded as D-034 and renumbered before merge, because PR #69 held D-033
+and D-034.
+
+**Decision.** New role `color.surface.accent` for the user's own content set
+apart from neighbouring surfaces, such as outgoing chat messages, valued at a
+new primitive `color.primitive.red.40` (`#3d0c0a`). Secondary text on it uses
+`text.muted`, because `text.subtle` misses the floor there. Rule:
+`spec/foundations.md`, Surfaces; port use in `spec/portability.md`, Native
+ports.
+
+**Why.** In live acceptance on Android and Windows the owner found their own
+messages too hard to tell from other people's (`#241010` against `#160b0b`,
+ΔE 7.4). Reusing `#2b0e0d` (ΔE 12.6) was still too subtle; from four options
+rendered in real colours (`#241010`, `#2b0e0d`, `#330b09`, `#3d0c0a`) the
+owner chose the deepest, just under the ceiling red links set. Not chosen:
+`#330b09` (ΔE 18.6, though it keeps `text.subtle` readable); incoming on
+`surface.default` (nearly merges with the wallpaper); `status.danger.tint`
+(the wrong meaning).
 
-**Why.** In the implementation preview the owner asked for links more
-distinguishable from normal text, using different colors.
+**Status.** accepted · 2026-10-06 · owner, who saw the problem in real use,
+rejected the first value after a second look, and chose `#3d0c0a` from the
+side-by-side comparison.
 
-**Consequences.** No new primitive, status hue, contrast exception or focus
-rule; the historical profile keeps the old link; ships in the same unreleased
-1.0.0.
+## D-036 A translucent text-selection tint
 
-**Alternatives.** Bright rose (the heading color) or blue/purple (an unrelated
-hue).
+First recorded as D-035 and renumbered before merge (see D-035).
+
+**Decision.** New role `color.interaction.text-selection.tint` for hosts that
+keep the text colour inside a selection, valued at a new primitive
+`color.primitive.alpha.red-50`: the text-selection red `red.350` (`#911410`)
+at 50%. Being translucent, it also suits hosts that paint the fill over their
+content. Rule: `spec/foundations.md`, Interaction states; limits in
+`spec/accessibility.md`, Limitations; port use in `spec/portability.md`,
+Native ports.
+
+**Why.** On Android the owner found selected text barely visible in the
+message field: the 12% `interaction.marquee` was ΔE 5.2 from the field. The
+first fix, opaque `interaction.selection.bg`, hid content on pinned Telegram
+paths that paint the fill after it (rich-editor tables, captions and media
+blocks; the rich-message translation preview, found by review r10) and was ΔE
+10.2 on the outgoing bubble. The owner compared it with the tint at 40, 50 and
+60% in the message field, both bubbles and a rich-editor photo, and chose 50%.
+Rejected: 40% (ΔE 17.8 on the accent surface, near the 18.6 rejected for
+bubbles); 60% (links lower still, media dimmer); opaque `text-selection.bg`
+(rose text falls under the floor, because Android cannot recolour it). Review
+r11 found the over-the-text limit after the owner's choice.
 
-**Status.** accepted · 2026-09-08 · owner, correcting D-023 for links only.
-D-027 later moves link hover to `interaction.hover.bg`.
+**Status.** accepted · 2026-10-06 · owner, who saw the problem in real use and
+chose 50% from the side-by-side comparison after the review rejected the opaque
+fill.
 
-## D-025 Theme interactive controls throughout the portal and demo
+## D-009 Density modes
 
-**Decision.** The maintained select renders its single-choice popup and
-multiple-choice list in theme-owned DOM with the existing selection, surface,
-text, border and focus roles; the native select remains the form-value and
-constraint source and the no-JavaScript fallback. It follows the select-only
-combobox and multiple listbox keyboard patterns, keeps labels, disabled
-options/fieldsets, native input/change events, defaults and form reset, and
-documents its tested scope. The same enhancement serves existing application
-controls, the portal, the Vue demo, consumption docs and copy closures; input,
-button, checkbox, radio, range and file chrome is themed too. Date inputs get a
-theme-owned text editor and calendar, time inputs text entry and theme-owned
-step buttons; native inputs keep constraints and values. Browser-owned system dialogs and
-no-JavaScript fallbacks stay native, without platform hacks; native ports keep
-their mappings. The command field fills its dialog width below its label.
+**Decision.** Density modes are tokens, set with `data-density` on any
+subtree: `compact` matches the site, `comfortable` suits everyday
+applications. Rule: `spec/foundations.md`, Spacing and density.
 
-**Why.** Seeing native blue selections in the work board and agent-kit picker,
-the owner explicitly instructed: "replace mostly all native components like
-`<select>` we must use all j3w1 themed", and asked for a properly proportioned
-command-search field.
+**Status.** proposed · 2026-09-06.
 
-**Consequences.** Supersedes the select spec's ban on replacing the host popup
-(web implementations) and the date/time specs' host-popup descriptions (enhanced
-web implementations). Ships in 1.1.0; 1.0.0 pins stay immutable. No new hues,
-focus rules, accessibility waivers or license changes.
+## D-033 Rose prose, semantic content headings and inherited bold
 
-**Alternatives.** Advisory option CSS (the blue selection stays) or one-off
-dropdowns (duplicated behavior).
+**Decision.** Interface, body and long-form prose use rose `#e99499`;
+`text.prose` aliases `text.default`, and `text.bright` `#ffa2a7` stays for
+brighter UI labels. New `text.heading` (content titles and H1–H6) and
+`text.highlight` use the existing paper `#f4eeee`. Bold changes weight only
+and inherits its semantic foreground.
+Primary action labels are bright rose in every state; on-fill text keeps paper
+`#f9faf9` where contrast needs it. Version 4.0.0 ships it; historical ANSI
+slots, decision records, waivers and contrast floors are unchanged. Rule:
+`spec/foundations.md`, Text ladder and Typography semantics; audit in
+`docs/rose-typography-migration.md`.
+
+**Why.** White prose and white bold overwhelmed the rose identity, and prose
+was an ambiguous alias for white. Headings are distinguished by typography,
+not by turning lower headings into body text. Rejected: Obsidian-only
+overrides, white bold and rose lower headings.
 
-**Status.** accepted · 2026-09-09 · owner.
+**Status.** accepted · 2026-09-28 · owner, explicit instruction and implementation
+plan approval. Supersedes earlier near-white prose descriptions and bright/red
+content-heading assignments; updates D-026's primary foreground only.
 
-## D-026 Primary action fill darkens off heritage ANSI 12
+## D-037 Display and title type sizes
 
-**Decision.** `color.action.primary.bg` aliases the existing
-`color.primitive.red.200` (`#7d1310`) instead of `color.primitive.red.300`; no
-colour is minted.
+**Decision.** Two type roles join the scale: `font.size.display` with
+`font.line-height.display` (32/40) for page heroes and metric figures, and
+`font.size.title` with `font.line-height.title` (24/32) for page titles above
+h1. Portal pages use them instead of literal sizes; components keep h1–h3.
+Rule: `spec/foundations.md`, Typography.
 
-**Why.** The owner asked for a slightly darker fill on primary actions such as
-the portal's `Explore components` button. `color.primitive.red.300` is also
-`color.primitive.ansi.12` and `color.terminal.ansi.12`, and `schemas/roles.mjs`
-pins every `color.primitive.ansi.<i>` to its heritage value, so it cannot darken
-without repainting the terminal's bright red.
+**Why.** The portal set 48, 32, 24, 22 and 18px outside the token scale. The
+owner chose token sizes over shrinking every heading to h1 (planning,
+2026-10-14), or page-local literal sizes.
 
-**Consequences.** Label contrast rises from 8.17:1 to 9.28:1, the ring over the
-fill from 4.90:1 to 5.57:1. Pressed `#630f0d` stays below, hover `#911410`
-above. The decorative waiver `primary fill against the panel` goes from 2.07:1
-to 1.83:1 (the label identifies the button); no waiver is added or widened.
+**Status.** accepted · 2026-10-14 · owner (G2 authority review). The owner
+asked for display type tokens in planning.
 
-**Alternatives.** A new primitive at the exact value, or a darker portal button
-only (a value outside `tokens/`, against the confirmation-only rule in
-`theme.json`).
+## D-038 Compact is the default density
 
-**Status.** accepted · 2026-09-11 · owner (accepted as implemented after
-review). Supersedes D-023 only for `action.primary.bg` (`#871f19`, kept "exactly
-as reviewed" under its red actions clause).
+**Decision.** `compact` is the default density for components, the site and
+copied bundles: the density variables carry the compact values wherever no
+`data-density` is set. `comfortable` stays available as an opt-in on any
+subtree. The site chrome is compact.
 
-## D-027 Recede the interactive chrome
+**Why.** The owner, reviewing the redesigned site: "keep components compacted
+by default, j3w1/theme default is compacted components", and "if it is not
+stated that default is compaction, then standardize it in j3w1/theme". Before
+this, only `[data-density]` blocks defined the variables, so unset subtrees fell
+back to per-component values that were the comfortable ones.
 
-**Decision.** Four roles move to existing palette values; no colour is minted.
-`surface.raised`: `ink.30` (`#160b0b`), was `ink.52`; an open list reads as
-depth, distinct from `surface.default` (`#100c0c`). `interaction.selection.bg`:
-`red.100` (`#531310`), was `red.350`; text on it rises from 7.92:1 to 12.47:1.
-`text.placeholder`: `rose.350` (`#a3676b`), was `rose.600`; 4.71:1 on
-`surface.input`, over the 4.5:1 floor without a waiver. Links hover on
-`interaction.hover.bg`, not `interaction.hover.bg-strong`, which menu items
-keep.
-
-**Why.** The owner found the open list, selected row, placeholder and link hover
-louder than the content they sit against.
-
-**Consequences.** The fill never carried selection (2.00:1 at `#911410` against
-the raised surface, under the 3:1 non-text minimum); the unchanged 2px
-`border.selected-indicator` and check glyph do, per `spec/foundations.md`. The
-report still has 954 pairs, 17 waived, none failing; no waiver is added or
-widened. The ring measures 3.38:1 on `#531310` (2.15:1 on `#911410` was D-006's
-reason to recolour), so a selected row takes the ordinary 1px dashed ring, not
-the 2px solid container ring; `action.primary.bg` (2.52:1) and
-`status.danger.fill` (1.13:1) keep the recoloured ring. `spec/foundations.md`
-was corrected (its stale 2.15:1 reason); D-006 stays as written. `tests/foundation-selection.test.js`
-guards the set.
-
-**Alternatives.** Darken only the pointed-at components, or add intermediate
-primitives.
+**Status.** accepted · 2026-10-14 · owner (explicit instruction at the G1
+design review). Builds on D-009 (proposed), which defines the two modes.
 
-**Status.** accepted · 2026-09-11 · owner (accepted as implemented after
-review). Supersedes D-023 only for `surface.raised` (`#241010`),
-`interaction.selection.bg` (`#911410`) and `text.placeholder` (`#bd787d`).
+## D-006 Focus-ring rule
 
-## D-028 Merge gates and the deployment gate are different suites
+**Decision.** Two rings: controls and rows take a 1px dashed
+`interaction.focus.ring`, focusable containers a 2px solid
+`interaction.focus.ring-container`. On a fill the ring takes the on-fill text
+colour; on invalid + focus it takes `ring-container` at the invalid offset;
+forced colours use `Highlight`. Selection is a fill, focus a ring. Rule:
+`spec/foundations.md`, Interaction states, rules 1–2.
 
-**Decision.** The full browser and packed-consumer matrix gates deployment, not
-merging; it runs on `main` before `deploy` and on demand through the workflow
-dispatch. A subset never writes evidence: it uses the plain list reporter,
-because the evidence reporter would mark unselected tests not run and publish a
-matrix that only looked complete. Packed consumers move with the browser suite,
-which republishes their evidence against the deployed package;
-`scripts/ui-verification-report.mjs` requires the complete protocol on all three
-engines. No mandatory local gate: `npm run test:all` is recommended, never
-verified; the practice is recorded in `AGENTS.md`.
-
-**Why.** Accepting D-026 and D-027 cost 29.5 minutes of CI before merge (sources
-0.6 minutes, build 0.7, packed consumers 3.3, browser matrix 24.9: 84% of the
-wait), pure latency on a public repository. A browser failure stops publication,
-not a correct merge; a local receipt proves only that something wrote it.
-
-**Consequences.** As first recorded, pull requests merged on `validate`, `build`
-and a new `smoke` job (desktop project; page, portal, button and text-field
-specs; plain list reporter): the built site loads under its base path, renders
-from the tokens and takes a keyboard. `smoke` is never a coverage claim.
-
-**Alternatives.** Sharding before merge (about six minutes, bounded by the
-largest spec file, partial evidence files) or consumers on the merge path (three
-more minutes).
+**Why.** The red ring vanishes on red fills: `#E53935` on `#911410` falls
+under 3:1.
 
-**Status.** accepted · 2026-09-11 · owner: merges gate on a few minutes of
-checks, the full matrix gates deployment, a local full run stays recommended.
-Superseded in part by D-031 (path-selected pull-request checks, a sharded
-deployment matrix with one evidence report, `release-gate` as the only required
-check); the rules above still hold.
+**Status.** proposed · 2026-09-06. Clarified by D-015 (declared component ring
+mappings on fills). Since D-027 a selected row (`#531310`, 3.38:1) takes the
+ordinary ring.
 
-## D-029 Readable terminal and code reds
+## D-014 Automatic inline literal color previews
 
-**Decision.** `default` carries a readable heritage sixteen: each slot below the
-text floor keeps its hue and saturation with its HSL lightness raised, in the
-heritage light-to-dark order. Slot 8 (bright black) stays the deliberately dim
-tier at about 3:1, the dark-red decorative and background slot.
-
-| slot | heritage | default profile | contrast on `#0c0909` |
-| --- | --- | --- | --- |
-| 1 | `#c81a1a` | `#e84b4b` | 3.42 → 5.23 |
-| 4 | `#8c1212` | `#e53131` | 2.09 → 4.55 |
-| 6 | `#9e474a` | `#bb696c` | 3.26 → 5.05 |
-| 8 | `#7d1310` | `#b71c17` | 1.86 → 3.01 (dim tier) |
-| 9 | `#ab1612` | `#ea3833` | 2.70 → 4.83 |
-| 10 | `#ad2721` | `#dc4f49` | 2.92 → 4.97 |
-| 12 | `#871f19` | `#db433a` | 2.12 → 4.61 |
-| 13 | `#e82132` | `#ed5360` | 4.43 → 5.67 |
-| 14 | `#e0292f` | `#e6565a` | 4.28 → 5.52 |
-| 15 | `#a3676b` | `#b17e81` | 4.45 → 5.83 |
-
-Slots 0, 2, 3, 5, 7 and 11 already passed. New values live in
-`color.primitive.ansi-readable.*`; `color.primitive.ansi.*` keeps the heritage
-values byte for byte, and `heritage-ansi` pins changed roles back to them.
-Syntax reds lift slightly: `code.syntax.keyword` and `tag` `#f73f35` → `#f7463c`
-(`color.primitive.red.860`), `property`, `heading` and `invalid` `#e53935` →
-`#e95551` (`color.primitive.red.810`): 5.56:1 on the code background, 4.52 and
-4.51 in an editor selection (were 4.38 and 3.81). Interface reds are unchanged.
-New role `color.terminal.prompt-text` colours the prompt's path segment: the
-terminal background in `default` (4.55:1 on slot 4), the historical light
-selection text in `heritage-ansi`.
+**Decision.** Every visible CSS hex literal on the spec page gets one
+generated preview. The literal stays exact and is data, never inferred from a
+token or screenshot. Only this preview may be round, patterned or animate its
+radius. The browser suite tests copy fidelity and transparent, dark and light
+previews with the syntax specimens `#f00`, `#f008`, `#ff0000`, `#ff000080`,
+`#000000`, `#ffffff` (literal data, not roles). Rule: `spec/identity.md`, What
+"modern" means here.
 
-**Why.** In Orca, Claude Code and Codex the owner found the reds right but too
-dim: Claude Code's inline code such as `scriptblock` uses slot 12 (`#871f19`,
-2.12:1), code-block keywords and Codex git branches slot 4 (`#8c1212`, 2.09:1).
-Ten of the sixteen slots failed the 4.5:1 text floor, and programs, not the
-theme, pick the slot.
+**Why.** Issue #1 asks for circular previews and a transparency checkerboard,
+against the square and no-gradient rules.
 
-**Consequences.** Terminal ports regenerate; CE Devbox's shell palette and the
-Agnoster prompt's directory text follow in their own repositories.
-`heritage-ansi` stays the exact historical record.
+**Status.** proposed · 2026-09-07 (formal log status remains owner-controlled).
+Owner direction, 2026-09-07: the narrow exception explicitly approved,
+implementation authorized.
 
-**Alternatives.** All rejected: the heritage slots (the owner: unreadable), the
-`extended` palette (the owner keeps the red and rose families), a gentle lift
-leaving slots 4 and 12 near 3:1, an OKLCH lift (gamut clipping drifts toward
-raspberry).
+### Follow the pointer hovering effect
 
-**Status.** accepted · 2026-09-26 · owner, who chose the values, asked for the
-change and approved this entry by selecting them. Superseded in part by D-032:
-slot 6 is coral `#ff7a66`, not `#bb696c`; the prompt gets
-`color.terminal.prompt-bg` (heritage `#8c1212`) with `#ffa2a7` text in
-`default`.
+Part of this exception only; the rules are in `spec/identity.md`, What
+"modern" means here.
 
-## D-030 Hued syntax roles for opt-in code highlighting
+## D-015 Clarify component mappings exposed by consumption acceptance
 
-**Decision.** `default` gains opt-in `color.code.hued.*` roles with the
-`extended` code hues: strings green `#86a46f`; numbers, constants, functions,
-attributes and escapes amber `#c9973f`; types and properties blue `#7e9ebb`;
-operators bright rose `#ffa2a7`. Keywords, tags, comments, variables and
-punctuation keep `code.syntax`. Every hued role reaches 7.08:1 or more on the
-code background (operators 10.37:1) and 5.74:1 or more in an editor selection.
+**Decision.** Keep every appearance and token value, and settle three
+contradictions found by Phase 2's composed acceptance. Ordinary confirmation
+uses the primary tone; the destructive tone is for destructive actions. A
+pressed primary button keeps `color.action.primary.border`, secondary and
+tertiary take `color.border.active`, destructive keeps its declared border.
+Filled controls keep their declared ring mappings. Nothing pending is
+approved. Rule: `spec/foundations.md`, Interaction states, rule 2, and each
+component's mapping.
 
-**Why.** The owner found Codex's code "too boring and single-coloured"; D-001
-allowed code hues only in the proposed `extended` overlay, which is blocked for
-delivery.
+**Why.** Phase 3 controls must not present an arbitrary interpretation as
+canonical. Rejected: enforcing the generic prose everywhere, or marking the
+affected workbench configurations unresolved.
 
-**Consequences.** The reference editor and other consumers keep `code.syntax.*`;
-a host opts in by mapping `code.hued.*`, as the Codex port (`ports/codex/`, once
-the terminal kit's Codex theme) does. This extends D-001's code-group allowance to these
-roles; `extended` stays proposed.
+**Status.** proposed · 2026-09-07. The owner directed application on 2026-09-07;
+formal status remains owner-managed.
 
-**Alternatives.** Keep Codex monochrome (rejected by the owner), approve all of
-`extended` (it reassigns terminal slots too), or replace `code.syntax.*`.
+## D-024 Distinguish links from body text and headings
 
-**Status.** accepted · 2026-09-26 · owner, who chose the extended hues.
+**Decision.** `color.text.link` maps to the existing strong red `#f73f35`,
+keeping the red underline and the near-white hover text; visited links keep
+colour and underline, and the historical profile keeps the old link. No new
+primitive, hue, contrast exception or focus rule. Rule: `spec/foundations.md`,
+Text ladder.
 
-## D-031 Select the checks a change needs; shard the deployment matrix
+**Why.** In the implementation preview the owner asked for links more
+distinguishable from normal text. Rejected: bright rose (then the heading
+colour) and blue or purple (an unrelated hue).
 
-**Decision.** CI is `select` → checks → `release-gate`.
+**Status.** accepted · 2026-09-08 · owner, correcting D-023 for links only.
+D-027 later moves link hover to `interaction.hover.bg`.
 
-- `select` reads the changed paths and `scripts/ci/proofs.json`; a path gets
-  cheaper only when a rule claims it. Unclaimed paths and control files
-  (workflows, the selector and registry, `package.json`, the lockfile, the
-  Playwright configs) run every check: a broad rule is a floor, never a verdict.
-  On a pull request the base commit's control list also applies, so a change
-  cannot make itself cheaper; review protects the selector. A file a browser
-  spec imports runs that spec and counts as a site change.
-- Unit tests and the build run in parallel. A pull request runs only the
-  selected checks; browser subsets use the plain list reporter and write no
-  evidence (D-028).
-- A push to `main` that changes the site runs the whole matrix: browser projects
-  split into jobs (desktop in four parts; projects read from the Playwright
-  config) with blob reports merged once into the evidence reporter, and packed
-  consumers in parallel. The merge needs every shard passed and reported; a
-  check refuses evidence missing any configured test in any project. Then the
-  verification report and deployment; no site change, no deployment. Changed
-  paths count from the last commit that reached Pages, so a failed deploy is
-  counted again.
-- `release-gate`, the only required check, recomputes the plan from Git with the
-  same code, refuses a mismatch, and checks each job ran exactly as planned and
-  passed.
-- `fullyParallel`, two workers per CI job, zero retries. The page axe scan is
-  two tests (colour contrast; every other rule) from a tag-based run, together
-  exactly the tagged rules. Only `playwright test` with nothing narrowing or
-  listing it, or the merge of every shard, writes evidence; the counting check
-  runs no reporter and proves the evidence file unchanged.
+## D-025 Theme interactive controls throughout the portal and demo
 
-**Why.** `main` ran every check whatever changed: a terminal-kit-only change,
-which the site never reads, took 63 minutes to deploy; the browser suite ran on
-one worker for 24.7 minutes (one axe scan 3.6 minutes); `npm test` spent 139 of
-its 141 seconds in terminal-kit suites.
+**Decision.** The maintained select renders its single- and multiple-choice
+lists in theme-owned DOM with the existing roles, following the select-only
+combobox and multiple listbox patterns; the native select stays the form-value
+and constraint source and the no-JavaScript fallback. The same enhancement
+serves application controls, the portal, the Vue demo and copy bundles, and
+themes input, button, checkbox, radio, range and file chrome; date and time
+inputs get theme-owned editors. Browser system dialogs stay native; native
+ports keep their mappings. The command field fills its dialog width below its
+label. This supersedes, for enhanced web implementations, the select spec's
+ban on replacing the host popup and the date/time host-popup descriptions.
+Ships in 1.1.0. Rule: `spec/components/select.md`, `date-picker.md`,
+`time-picker.md`; `docs/ui-consumption.md`.
 
-**Consequences.** D-028's objection to sharding (partial evidence files) no
-longer applies: shards write blob reports and one merge writes one report. A
-change needing more cannot merge on `validate`, `build` and `smoke` alone.
+**Why.** Seeing native blue selections in the work board and agent-kit picker,
+the owner instructed: "replace mostly all native components like `<select>` we
+must use all j3w1 themed", and asked for a properly proportioned
+command-search field. Rejected: advisory option CSS (keeps the blue
+selection) and one-off dropdowns (duplicate behaviour).
 
-**Alternatives.** A self-hosted runner as on theselfish.one (fork pull requests
-could run code on it), reusing pull-request evidence on `main` (not possible
-today: the build stamps the commit), Playwright's internal shard weights (not
-public).
+**Status.** accepted · 2026-09-09 · owner.
 
-**Status.** accepted · 2026-09-26 · owner, who found thirty-minute runs on
-`main` unacceptable and asked for classified checks modelled on theselfish.one.
-Supersedes D-028 in part.
+## D-016 Pinned release comparison report and historical rendering
 
-## D-032 Coral slot 6 and a fixed prompt background
+**Decision.** A release comparison report (schema version 1) records both
+immutable revisions, profile and input digests, separate semantic change
+categories, dependency evidence and unsupported historical inputs. Reports
+and historical specimen renderings are build artifacts in `dist/releases/`.
+History is read from Git, never executed or imported; the shared renderer
+draws each side's maintained markup and styles, a reconstruction rather than
+evidence that old JavaScript or a port ran. Browser captures are run evidence;
+missing evidence stays not run. A rename needs an explicit mapping naming
+both revisions. No design value, eligibility rule or verification status
+changes. The rules stay here: no spec section covers release comparison.
+
+**Why.** Run metadata must stay out of deterministic exports, and today's
+rules must not read missing historical fields. Rejected: a raw file diff (no
+semantic categories) and running historical applications (a wider trust
+boundary).
 
-**Decision.**
+**Status.** proposed · 2026-09-08. Issue #2 authorizes derived release
+diagnostics; formal status and all theme approvals remain owner-managed.
 
-- Slot 6 is coral `#ff7a66` (`color.primitive.coral.700`, 7.77:1 on the terminal
-  background): warm and vivid, apart from the rose text, without taking amber's
-  code role.
-- Dim text is not fixed in the slots: emulators mix dim colours halfway into the
-  background, so dimmed coral is about 2.7:1. A dim-only host setting may help;
-  brightening slot 6 to compensate is ruled out.
-- New role `color.terminal.prompt-bg`, the prompt's path-segment background, is
-  heritage `#8c1212` (`color.primitive.ansi.4`) in every profile.
-  `color.terminal.prompt-text` is bright rose `#ffa2a7` in `default` (4.97:1)
-  and the proposed `extended`, and `#f4eeee` in `heritage-ansi` (8.28:1).
-  Prompts set both as 24-bit colours, whatever the slots carry.
-- Hosts that set the palette (Orca, Ghostty, Warp, CE Devbox's shell palette)
-  all use the same one; the prompt is the one deliberate heritage-style
-  exception.
+## D-017 Private framework parity evidence
 
-**Why.** Claude Code highlights fenced code with fixed ANSI slots: PowerShell
-cmdlets such as `Invoke-RestMethod` took slot 6 (`#bb696c`, nearly the hue of
-the rose text `#e99499`), and types such as `[scriptblock]` slot 6 dimmed
-(2.07:1). Agnoster's directory segment sits on slot 4, which D-029 made
-`#e53131`, so its text (slot 7, `#ffa2a7`) fell to 2.28:1 in Orca; the owner's
-PowerShell, on the old palette, shows `#ffa2a7` on `#8c1212` (4.97:1), the look
-to keep.
-
-**Consequences.** Terminal ports regenerate. CE Devbox maps Agnoster's directory
-and virtualenv segments to the prompt roles in its own repository.
-`heritage-ansi` values are unchanged; it gains `prompt-bg` at its slot-4 value.
-
-**Alternatives.** Peach `#ffab91`, blush `#ffc2c5` or amber `#e0a84a` for slot
-6; dark text on the bright slot 4, as D-029 first proposed (rejected by the
-owner after seeing it); the heritage palette in SSH shells (rejected: palettes
-should match across hosts).
+**Decision.** An independently authored private harness takes an
+operator-supplied licensed target and an explicit licence review, copies only
+declared template inputs into a new private fixture, uses synthetic examples,
+and records exact theme, template, framework, dependency and fixture
+identities. It never writes to the target; captures, copied vendor inputs and
+detailed results stay private; missing prerequisites give not-run output. A
+successful run is not a verified port or a claim of visual parity. The rules
+stay here: no spec section covers the harness.
 
-**Status.** accepted · 2026-09-26 · owner, who saw both problems in real use and
-chose the values. Supersedes D-029 in part.
+**Why.** Rejected: a public vendor copy (breaks the licence boundary) and a
+generic mock (would pose as template evidence).
 
-## D-033 Rose prose, semantic content headings and inherited bold
+**Status.** proposed · 2026-09-08. Issue #3 authorizes the harness; approval
+statuses and license boundaries are unchanged.
 
-**Decision.** Ordinary interface, body and long-form prose use rose `#e99499`.
-`text.prose` aliases `text.default`. `text.bright` remains `#ffa2a7` for brighter
-UI labels. New `text.heading` and `text.highlight` use existing paper `#f4eeee`:
-the former for content titles and H1–H6, the latter for deliberate exceptional
-highlights. Application/window chrome titles use rose default or bright.
-Bold changes weight only and inherits its semantic foreground. It is never a
-reason to choose white. Selection remains an explicit near-white exception.
-Primary action labels use bright rose across rest, hover and pressed states;
-danger/on-fill text retains paper `#f9faf9` where contrast requires it.
+## D-019 One-way namespaced Figma Variables bridge
 
-**Why.** White prose and white bold overwhelmed the intended rose identity.
-Headings are distinguished by typography, not by turning lower headings into
-ordinary body text. Prose must no longer be an ambiguous alias for white.
+**Decision.** A one-way bridge from a pinned revision to Figma Variables:
+colours and scalar spacing and radius values with their aliases, in one
+collection and one mode. Dry-run is read-only and apply explicit; receipts
+kept outside Figma guard every update and rollback. Rule:
+`spec/figma-bridge.md`.
 
-**Consequences.** Version 4.0.0 changes the canonical semantics, site and ports.
-The audit and migration are in `docs/rose-typography-migration.md`. Historical
-ANSI slots and historical decision records remain unchanged. Contrasts are
-tested per state; no waiver or contrast floor changes.
+**Why.** Rejected: manual duplicate maintenance, a paid-only REST workflow,
+and flattening aliases or composites.
 
-**Alternatives.** Obsidian-only overrides, white bold, and rose lower headings
-were rejected by the owner in favor of one canonical hierarchy.
+**Status.** proposed · 2026-09-08. Issue #15 authorizes this bounded adapter;
+approval and eligibility follow the canonical source.
 
-**Status.** accepted · 2026-09-28 · owner, explicit instruction and implementation
-plan approval. Supersedes earlier near-white prose descriptions and bright/red
-content-heading assignments; updates D-026's primary foreground only.
+## D-020 Bounded local validation and recovery workflow
 
-## D-034 Versioned Windows native and Windhawk adapters
+**Decision.** One executable validation and recovery pattern (editing,
+invalid, review, busy, success) built from the existing admin-form, field,
+alert and button rules: validation on explicit submission, values kept, a
+separate simulated completion, no request. Rule: `spec/form-patterns.md`.
 
-**Decision.** A Windows port uses native settings where sufficient and pinned
-Windhawk 2.0 alpha 6 stylers solely as rendering adapters for canonical semantic
-tokens. This is a bounded exception to the unsupported-injection prohibition in
-portability. No binary patching, shell replacement, paid tool or third-party
-theme is permitted. Unknown shell versions/structures fail closed. Full lifecycle
-support includes pinned install/update, verification, original-state restore,
-transaction rollback and removal of owned theme assets. User shortcuts, window
-management, existing layouts and desktop icons are preserved; cursors and black
-wallpaper are included. Native limitations are disclosed, not silently patched.
+**Why.** Rejected: a colour-only invalid snapshot, validation on every
+keystroke, and a submit click treated as a successful save.
 
-**Why.** Native settings cannot represent the full black/rose shell identity.
-The owner explicitly accepted the pinned prerelease to use its upstream CLI.
+**Status.** proposed · 2026-09-08. Issue #16 authorizes one pattern from
+existing admin-form, field, alert and button rules, without new palette roles.
 
-**Alternatives.** Native-only styling lacks shell coverage; private storage edits
-and UI automation are less reproducible; binary theme patching was rejected.
+## D-021 Local form composition with versioned data
 
-**Status.** accepted · 2026-09-28 · owner, explicit implementation plan approval.
+**Decision.** A local form builder for five canonical field kinds, added,
+edited, removed and reordered with buttons. Definitions, preview values and
+validation state stay separate; JSON import is bounded and download holds
+definitions only. Rendering and validation reuse D-020. A draft reference
+component, not a backend platform or native port. Rule:
+`spec/components/form-builder.md`.
 
-## D-035 An accent surface for the user's own content
+**Why.** Rejected: arbitrary HTML or schema execution, a conditional workflow
+engine, and a second field implementation.
 
-Numbering: D-033 and D-034 belong to PR #69, which was not merged when this was
-written. This decision was first recorded as D-034 and renumbered before merge.
+**Status.** proposed · 2026-09-08. Issue #19 authorizes the deferred
+form-builder demonstration.
 
-**Decision.**
+## D-022 Local visual selection before agent implementation distribution
 
-- New role `color.surface.accent`: the user's own content, set apart from
-  neighbouring surfaces, such as outgoing chat messages.
-- Its value is a new primitive, `color.primitive.red.40` (`#3d0c0a`): the
-  deepest of the reds compared side by side, chosen by the owner, with
-  `text.link` at 4.55:1.
-- Text on it: `text.default` 7.30, `text.bright` 8.74, `text.muted` 4.90,
-  `text.link` 4.55.
-- `text.subtle` does not reach 4.5:1 on it (4.30). Secondary text on the accent
-  surface therefore uses `text.muted`.
-- The Telegram port sets outgoing bubbles to it. Incoming bubbles stay
-  `surface.raised`. Bubble timestamps on both sides use `text.muted`, so they
-  match. Outgoing and incoming bubbles are ΔE 24.0 apart (CIE76).
-
-**Why.** In live acceptance on Android and Windows, the owner found their own
-messages too hard to tell from other people's. Outgoing bubbles used
-`surface.overlay` (`#241010`), incoming bubbles `surface.raised` (`#160b0b`):
-ΔE 7.4.
-- **First round.** The role reused the existing `#2b0e0d` (ΔE 12.6). The owner
-  still saw too little difference on both clients.
-- **Second round.** The owner compared four options rendered in real colours
-  (#241010, #2b0e0d, #330b09 and #3d0c0a, with real text, timestamps and links)
-  and chose the deepest red.
-- **The ceiling.** Red links cap how bright an outgoing bubble can be. At this
-  hue they still pass at `#3f0c0a` (4.51:1), and fall to 4.48:1 at `#400c0a`
-  and 4.44:1 at `#420c0a`. `#3d0c0a` keeps a small margin below that limit.
-
-**Alternatives.**
-- **Keep `#2b0e0d`** (ΔE 12.6), with no new colour: too subtle in real use.
-- **`#330b09`** (ΔE 18.6), which keeps `text.subtle` timestamps at 4.52:1: not
-  chosen.
-- **Incoming on `surface.default`** (ΔE 10.2): incoming bubbles nearly merge
-  with the wallpaper (ΔE 1.8).
-- **Reusing `status.danger.tint` directly:** rejected, the wrong meaning.
-
-**Consequences.**
-- **Palette.** It gains one colour.
-- **Ports.** Every port classifies the role. Only Telegram maps it. Claude
-  Code's `userMessageBackground` keeps `interaction.selection.bg`; adopting the
-  new role there is a separate change.
-- **Rule.** `text.subtle` is not used on `surface.accent`.
+**Decision.** Before canonicalisation a local harness compares exactly three
+explicit token overlays with Current, using the shared specimen rendering and
+an original Vue composition. Overlays, reports and review builds stay
+ignored, never public profiles. Numbers and browser evidence approve nothing:
+the owner selects a candidate. Rule: `docs/phase6-visual-review.md`.
 
-**Status.** accepted · 2026-10-06 · owner, who saw the problem in real use,
-rejected the first value after a second look, and chose `#3d0c0a` from the
-side-by-side comparison.
+**Why.** Agents need installable or copyable components with complete
+dependencies and pinned contracts, shared by the package, the portal and the
+Vue application. Rejected: productising the old palette first, unapproved
+preview profiles, and appearance-only snippets.
 
-## D-036 A translucent text-selection tint
+**Status.** proposed · 2026-09-08. Issue #37 and the owner's implementation
+instruction authorize three local candidates; design approval remains
+owner-managed. The selection is D-023.
 
-Numbering: first recorded as D-035 and renumbered before merge (see D-035).
+## D-018 Declared port capabilities and fresh import evidence
 
-**Decision.**
+**Decision.** Ports declare per-role capabilities in an optional
+`capabilities.json`, and a `verified` port needs a fresh real import bound to
+its current inputs. Rule: `spec/portability.md`, Native ports.
 
-- New role `color.interaction.text-selection.tint`: text selection on hosts
-  that keep the text colour inside a selection. It is translucent, so it also
-  suits hosts that paint the fill over their content.
-- Its value is a new primitive, `color.primitive.alpha.red-50`: the existing
-  text-selection red `red.350` (`#911410`) at 50%.
-- Over the canvas, the raised and the accent surface, it is ΔE 36.5, 35.1 and
-  21.5 from the surface (CIE76). These are Android's 8-bit composites
-  (`#490a08`, `#54100e`, `#67100d`).
-- Text drawn on the tint stays at 4.5:1 or above: `text.default` 6.89, 6.29
-  and 5.53. Links do not: `text.link` measures 4.30, 3.92 and 3.45 while
-  selected.
-- **What the canonical contrast pairs cover.** They composite over the canvas
-  only, with float alpha (`#480a08`): default text 6.91, bright 8.28. The
-  raised and accent figures are enforced by the Telegram port's tests.
-- **Links are not a declared pair.** Waivers are for decorative graphics only,
-  so the link limit (4.31 over the canvas) is recorded in the limits below and
-  in `spec/accessibility.md` instead.
-- Hosts that recolour selected text use `text-selection.bg` with
-  `text-selection.text`. The Telegram port gives Android text selection the
-  tint. Desktop keeps `selection.bg` with near-white selected text.
-
-**Why.** In live acceptance on Android, the owner found selected text barely
-visible in the message field. Android's text-selection keys had the 12%
-`interaction.marquee`: ΔE 5.2 from the field.
-- **First fix.** The opaque `interaction.selection.bg` (`#531310`). The
-  independent review (r10) found pinned Telegram paths that paint the selection
-  fill *after* their content: the rich editor's tables, captions and media
-  blocks, and the rich-message translation preview. An opaque fill hides them.
-  It was also ΔE 10.2 on the outgoing bubble, below the 12.6 the owner found too
-  subtle for bubbles (D-035).
-- **Translucent fills.** A translucent fill keeps that content visible. The
-  only translucent roles were the 12% marquee and black scrims.
-- **The comparison.** The owner compared the opaque fill and the tint at 40, 50
-  and 60%, rendered in the message field, both bubbles and a rich-editor photo,
-  and chose 50%.
-
-**Alternatives.**
-- **Opaque `selection.bg`:** hides content on those paths, and is faint on the
-  accent surface.
-- **40%:** ΔE 17.8 on the accent surface, close to the 18.6 rejected for
-  bubbles.
-- **60%:** links fall to 3.24:1, and media dims more.
-- **Opaque `text-selection.bg`:** rose text falls to 3.96:1, because Android
-  cannot recolour it.
-
-**Consequences.**
-- **Palette.** It gains one translucent value of an existing colour.
-- **Ports.** Every port classifies the role. Only Telegram maps it.
-- **Obsidian.** Obsidian also keeps the text colour inside a selection: rose
-  text measures 3.96:1 on its `text-selection.bg` (its IMPLEMENTATION.md), so
-  the tint fits it. Adopting it changes the Obsidian artifact and needs its own
-  import check, so that is a separate change.
-- **Contrast.** Two global pairs measure default and bright text on the tint
-  over the canvas.
-- **Limits, while a selection lasts on Android:**
-  - links are below 4.5:1 (3.45 to 4.30);
-  - where a host paints the fill over the text (Telegram's rich-editor tables
-    and captions, and the rich-message translation preview), selected text
-    measures 2.96 to 3.43:1. No strength meets both this and the accent-surface
-    floor: 40% gives 4.34 and 3.68. The owner's comparison did not show this
-    case; it was found by review r11 after the choice;
-  - in code blocks, keyword, string and comment colours are 3.13 to 4.24:1,
-    number and constant colours 4.40:1 in outgoing blocks only, and inside an outgoing code block the selection stands
-    ΔE 18.3 from the block.
-
-  A selection is short-lived, as with editor selections in
-  `spec/accessibility.md`.
+**Why.** Rejected: a hand-maintained support matrix, and a parse treated as an
+import.
 
-**Status.** accepted · 2026-10-06 · owner, who saw the problem in real use and
-chose 50% from the side-by-side comparison after the review rejected the opaque
-fill.
+**Status.** proposed · 2026-09-08. Issue #14 authorizes a derived mapping
+explorer; it creates no port, changes no host capability and approves no
+profile.
+
+## D-034 Versioned Windows native and Windhawk adapters
+
+**Decision.** A Windows port uses native settings where sufficient and pinned
+Windhawk 2.0 alpha 6 stylers solely as rendering adapters for canonical
+semantic tokens: a bounded exception to the ban on unsupported injection. No
+binary patching, shell replacement, paid tool or third-party theme; unknown
+shell versions or structures fail closed. Its lifecycle (pinned install and
+update, verification, original-state restore, rollback, removal of owned
+assets) preserves user shortcuts, window management, layouts and desktop
+icons. Rule: `spec/portability.md`, Scope of a port; `ports/windows/README.md`.
+
+**Why.** Native settings cannot represent the full black/rose shell identity,
+and the owner accepted the pinned prerelease to use its upstream CLI.
+Rejected: private storage edits and UI automation (less reproducible), and
+binary theme patching.
+
+**Status.** accepted · 2026-09-28 · owner, explicit implementation plan approval.
diff --git a/spec/figma-bridge.md b/spec/figma-bridge.md
index 4a69d967c..b8b679f10 100644
--- a/spec/figma-bridge.md
+++ b/spec/figma-bridge.md
@@ -8,7 +8,7 @@ summary: A one-way, pinned Variables API bridge with explicit diffs and external
 ## Supported mapping
 
 This independently written bridge maps sRGB colors to COLOR variables and
-scalar px spacing/radius to FLOAT variables.
+scalar px spacing and radius to FLOAT variables.
 
 - Aliases stay native variable aliases.
 - Token paths are stable identities. Slash-separated names live in the
@@ -18,13 +18,13 @@ scalar px spacing/radius to FLOAT variables.
 - Semantic scopes are specific to text, fills, strokes, gaps and corner radius.
 - Eligibility and pending decision IDs travel with each definition.
 
-Only the approved default profile is imported. Heritage and proposed profiles
+Only the approved default profile is imported; heritage and proposed profiles
 are reported, never turned into extra modes. Typography, shadows, composite
 borders and other unsupported types are reported, not flattened. Figma does
-not import this JSON natively: the adapter uses the
+not import this JSON natively; the adapter uses the
 [Variables Plugin API](https://developers.figma.com/docs/plugins/api/figma-variables/).
-Install the font families named in the pinned typography tokens yourself; this
-bridge neither imports fonts nor distributes binaries.
+Fonts are neither imported nor distributed: install the families the pinned
+typography tokens name.
 
 ## Generate a pinned payload
 
@@ -34,18 +34,18 @@ In a verified checkout, run:
 node scripts/figma-bridge.mjs --ref FULL_COMMIT_OR_RELEASE_TAG > payload.json
 ```
 
-The default sample selects color.surface.default, color.text.default, space.4
-and radius.none, plus their two alias dependencies. Pass `--roles` with an
-explicit comma-separated list of roles to change the sample. The command reads
-Git objects at the resolved full revision. It records source and payload
-digests, the mapping version, unsupported items and excluded profiles. It
-never reads moving branch bytes or uses the working tree instead.
+The default sample is color.surface.default, color.text.default, space.4 and
+radius.none, plus their two alias dependencies; `--roles` takes an explicit
+comma-separated list instead. The command reads Git objects at the resolved
+full revision, never moving branch bytes or the working tree, and records
+source and payload digests, the mapping version, unsupported items and
+excluded profiles.
 
 ## Reviewed import route
 
 Use the Figma connector's `use_figma` Variables API route, in a new design
-draft or in an existing collection whose current receipt you still hold. Read
-the connector's current skill/API instructions first. The adapter is
+draft or an existing collection whose current receipt you hold, after reading
+the connector's current skill/API instructions. The adapter is
 [exports/figma/importer.mjs](https://j3w1.github.io/theme/exports/figma/importer.mjs); pin its download to
 the same reviewed delivery revision as these instructions.
 
@@ -66,7 +66,7 @@ the same reviewed delivery revision as these instructions.
    Every later dry-run and apply must pass that receipt and the same document
    key.
 
-An exact re-import changes nothing. Updates show before/after definitions.
+An exact re-import changes nothing; updates show before/after definitions.
 Owned variables left out of a payload are kept and reported, never silently
 removed. Receipts are trusted local ownership records, not importable
 third-party configuration.
@@ -97,10 +97,10 @@ receipt.
   import before you roll back; this adapter does not audit every canvas node.
 
 Before any change, the adapter compares every owned ID, value, description,
-scope, collection identity and mode against the receipt. Missing, detached or
+scope, collection identity and mode against the receipt; missing, detached or
 hand-edited variables stop apply and rollback. It never adopts a matching name
-without a receipt. Resolve a conflict on purpose in Figma, or create a
-separate draft; do not throw away ownership records to force an overwrite.
+without a receipt. Resolve a conflict deliberately in Figma or in a separate
+draft; never discard ownership records to force an overwrite.
 
 ## Actual verification status
 
@@ -115,12 +115,10 @@ design draft, with Starter/Full access and Plugin API 1.0.0.
 - A deliberate manual edit was rejected without being overwritten; the test
   edit was then explicitly restored.
 
-Private receipts stay outside public artifacts. The issue evidence records the
-exact candidate and source revision.
-
-Source protocols also cover detached IDs, value updates, first rollback,
-unrelated variables, invalid payloads and extra modes, using an explicit API
-fixture. Those are fixture results, not claims about more account
-capabilities. No full component kit, native port, library publication, manual
-design review, or automatic Figma-to-token sync is claimed. D-019 remains
-proposed.
+Private receipts stay outside public artifacts; the issue evidence records
+the exact candidate and source revision. Source protocols also cover detached
+IDs, value updates, first rollback, unrelated variables, invalid payloads and
+extra modes against an explicit API fixture; these are fixture results, not
+account-capability claims. No component kit, native port, library
+publication, manual design review or automatic Figma-to-token sync is
+claimed. D-019 remains proposed.
diff --git a/spec/form-patterns.md b/spec/form-patterns.md
index 9f63e58eb..7d151caa7 100644
--- a/spec/form-patterns.md
+++ b/spec/form-patterns.md
@@ -7,40 +7,39 @@ summary: A local reference workflow preserves values through validation, review
 
 ## Scope
 
-The [validation and recovery pattern](https://j3w1.github.io/theme/patterns/validation-recovery/) composes
-admin-form, text-field, textarea, select, checkbox, alert, button and table.
-It is a reference composition under proposed D-020. It is not a new approved
-profile or a production persistence system, and the existing component rules
-still apply. Its compact JSON contract records the content digests of the
-components it uses, plus its fields, fixtures, transitions and limits.
+The [validation and recovery pattern](https://j3w1.github.io/theme/patterns/validation-recovery/)
+composes admin-form, text-field, textarea, select, checkbox, alert, button and
+table under proposed D-020. It is a reference composition, not an approved
+profile or a persistence system; the component rules still apply. Its JSON
+contract (`spec/patterns/validation-recovery.json`) records the components'
+content digests, fields, fixtures, transitions and limits.
 
 ## Interaction
 
-1. Enter values and submit to validate. Errors appear together in a focused
-   summary, with links to the affected fields. Every entered value is kept,
-   including unrelated notes and choices.
-2. Correct the fields and submit again to reach review. Editing does not
-   announce errors on each keystroke, and it does not silently remove the last
-   submitted error summary. Review offers an explicit way back to editing.
-3. Confirm the review to enter busy: the form controls are disabled and a
-   pending message is shown.
-4. Use the separate Complete simulation action to reach success. A submit
-   click alone is never success.
+1. Submit to validate. Errors appear together in a focused summary linking to
+   the affected fields; every entered value is kept, including unrelated
+   notes and choices.
+2. Correct and submit again to reach review. Editing never announces errors
+   per keystroke nor silently removes the last submitted summary. Review
+   offers an explicit way back to editing.
+3. Confirming the review enters busy: controls are disabled and a pending
+   message is shown.
+4. Only the separate Complete simulation action reaches success; a submit
+   click alone never does.
 
 Busy, disabled, invalid and success each mean something different. Reset
 clears in-memory values and errors.
 
-The example reserves ws-07 for Name and Hostname. It requires a lowercase
-hostname made of letters, digits and hyphen-separated segments. These are
-named local fixtures from admin-form, not server uniqueness checks. No request,
-account, storage or database is involved. Without JavaScript, the page keeps
-static normal, invalid, busy and success examples.
+The ws-07 conflict on Name and Hostname and the lowercase hostname rule
+(letters, digits, hyphen-separated segments) are local admin-form fixtures,
+not server checks; no request, account, storage or database is involved.
+Without JavaScript the page keeps static normal, invalid, busy and success
+examples.
 
 ## Evidence and limits
 
-Automated protocols cover keyboard submission, summary navigation, correction,
-preservation, review, busy and success, plus narrow layout and no-JS content.
-A test that exists is not a passing run: read the published verification
-report for real runs. No manual screen-reader pass is claimed. The submit-time
-feedback follows the
-[GOV.UK validation pattern](https://design-system.service.gov.uk/patterns/validation/).
+Automated protocols cover keyboard submission, summary navigation,
+correction, preservation, review, busy, success, narrow layout and no-JS
+content; a test that exists is not a passing run (see the verification
+report). No manual screen-reader pass is claimed. Submit-time feedback follows
+the [GOV.UK validation pattern](https://design-system.service.gov.uk/patterns/validation/).
diff --git a/spec/foundations.md b/spec/foundations.md
index 3b35a32d4..97a19ec7b 100644
--- a/spec/foundations.md
+++ b/spec/foundations.md
@@ -5,61 +5,58 @@ order: 20
 summary: Surfaces, text ladder, borders, interaction states, focus, typography, spacing, density, elevation, motion, icons and layout, with the rules that govern each role.
 ---
 
-Values live in `tokens/`. This document says what each role means and where it
-may be used. Every rule below is normative for the `default` profile.
+Values live in `tokens/`; this document says what each role means and where
+it may be used. Every rule is normative for the `default` profile.
 
 ## Surfaces
 
-`surface.desktop` and `surface.canvas` are true black (`#000000`). Put readable
-content on the canvas or on these surfaces:
+`surface.desktop` and `surface.canvas` are true black (`#000000`). Readable
+content sits on the canvas or on:
 
 - `default` (`#100c0c`) for panels and cards;
 - `raised` (`#160b0b`) for sticky headers, menus and popovers;
 - `overlay` for dialogs and drawers;
-- `accent` (`#3d0c0a`) for the user's own content set apart from its neighbours, such as outgoing chat messages; secondary text on it uses `text.muted`, never `text.subtle` (D-035);
+- `accent` (`#3d0c0a`) for the user's own content set apart from its neighbours, such as outgoing chat messages; secondary text on it uses `text.muted`, never `text.subtle`. Red links cap its brightness: at this hue it stays at or below `#3f0c0a` (D-035);
 - `sunken` (`#000000`) for reading and detail panes;
 - `input` for form-control fills;
 - `chrome` and `chrome-alt` for window frames and bars.
 
-The layers differ only a little, by design. That must never hide the edge of a
-control, so controls also carry `border.control`.
-
-Never tint photos, video, document content or user-defined data colours to put
-more red on screen.
+The layers differ only slightly, so controls also carry `border.control`.
+Never tint photos, video, document content or user-defined data colours.
 
 ## Text ladder
 
-| Role | Value | Contrast on canvas / default / raised | Use |
-| --- | --- | --- | --- |
-| `text.prose` | `#e99499` | 9.16 / 8.48 / 7.92 | long-form reading; aliases text.default (D-033) |
-| `text.heading` | `#f4eeee` | see generated contrast report | content titles and H1–H6 |
-| `text.highlight` | `#f4eeee` | see generated contrast report | deliberate exceptional highlights |
-| `text.bright` | `#ffa2a7` | 10.98 / 10.17 / 9.49 | brighter UI labels and semantic rose emphasis |
-| `text.default` | `#e99499` | 9.16 / 8.48 / 7.92 | interface and body text |
-| `text.muted` | `#bd787d` | 6.15 / 5.69 / 5.31 | secondary text; the darkest colour permitted for chrome text |
-| `text.subtle` | `#ad7175` | 5.40 / 5.00 / 4.66 | metadata, comments, line numbers |
-| `text.disabled` | `#8a5559` | 3.52 / 3.26 / 3.05 | disabled controls only (exempt under WCAG 1.4.3; at least 3:1 by policy) |
-| `text.accent` | `#e53935` | 4.97 / 4.60 / 4.30 | accent text on canvas and default surfaces only |
-| `text.accent-strong` | `#f73f35` | 5.72 / 5.29 / 4.94 | accent text safe on every surface |
-
-`#a3676b` and `#7d1310` are never text roles in `default`, even where a darker
-background would raise their ratio. They stay in service as `border.control`,
-`icon.decorative`, `status.neutral.fill` and `border.disabled`. Metadata and
-comments that people need to read are not decorative: they use `text.subtle`,
-not a graphic colour. The contrast floor is rule 6 under Interaction states.
+| Role | Value | Use |
+| --- | --- | --- |
+| `text.prose` | `#e99499` | long-form reading; aliases text.default (D-033) |
+| `text.heading` | `#f4eeee` | content titles and H1–H6 |
+| `text.highlight` | `#f4eeee` | deliberate exceptional highlights |
+| `text.bright` | `#ffa2a7` | brighter UI labels and semantic rose emphasis |
+| `text.default` | `#e99499` | interface and body text |
+| `text.muted` | `#bd787d` | secondary text; the darkest colour permitted for chrome text |
+| `text.subtle` | `#ad7175` | metadata, comments, line numbers |
+| `text.disabled` | `#8a5559` | disabled controls only (exempt under WCAG 1.4.3; at least 3:1 by policy) |
+| `text.accent` | `#e53935` | accent text on canvas and default surfaces only |
+| `text.accent-strong` | `#f73f35` | accent text safe on every surface |
+| `text.link` | `#f73f35` | links, always underlined, distinct from rose body and headings (D-024); hover is near-white `text.link-hover` on `interaction.hover.bg` (D-027) |
+
+Ratios per surface are in the contrast report. `#a3676b` and `#7d1310` are
+never text roles in `default`, even on a darker background (D-003); they serve
+as `border.control`, `icon.decorative`, `status.neutral.fill`,
+`chart.series.4`, `border.disabled` and `code.whitespace`. Metadata and
+comments people need to read use `text.subtle`, not a graphic colour.
 
 ## Borders
 
 Every border is 1px (`border.width.default`). 2px (`border.width.emphasis`) is
 only for the selected indicator bar, the sticky-header rule and the invalid
-border. The quote rule is the one wider edge, at twice the emphasis width,
-because it marks a block rather than bounding a control.
+border. The quote rule, which marks a block rather than bounding a control, is
+the one wider edge, at twice the emphasis width.
 
 - `border.divider` (`#2b0e0d`) separates rows and sections.
-- `border.default` (`#531310`) is decorative. It may never be the only visible
-  edge of a control.
-- `border.control` (`#a3676b`, 4.71:1) is the edge of every form control at
-  rest.
+- `border.default` (`#531310`) is decorative, never the only visible edge of
+  a control.
+- `border.control` (`#a3676b`) is the edge of every form control at rest.
 - `border.active` (`#e53935`) marks the focused or active control.
 - `border.overlay` (`#e53935`) frames every floating layer.
 
@@ -79,10 +76,10 @@ Every interactive component declares which of these apply and demonstrates every
 | active / pressed | background → `interaction.pressed.bg`; border → `border.active` | border change; no translation |
 | focus-visible | the ring (below) | the ring itself; never a glow or a colour shift alone |
 | selected | fill `interaction.selection.bg` with `interaction.selection.text`; tabs and navigation use a 2px `border.selected-indicator` | `aria-selected` / `aria-current`; a check glyph in lists |
-| selected + focus-visible | the selection fill **and** a ring in the fill's on-fill colour (`interaction.focus.ring-container`, 7.48:1 on the selection) | both visible at once |
+| selected + focus-visible | the selection fill **and** the ordinary ring (rule 1; D-027) | both visible at once |
 | text selected, host keeps the text colour | translucent `interaction.text-selection.tint` (D-036), which also suits hosts that paint the fill over their content; where the host can recolour selected text, `interaction.text-selection.bg` with `interaction.text-selection.text` | the host's selection handles |
 | selected, container inactive | `interaction.selection.inactive-bg` with `interaction.selection.inactive-text`; no ring | lightness drop between the two fills |
-| disabled | `text.disabled`, `border.disabled`, `interaction.disabled.bg`; no hover or pressed styling; still focusable when `aria-disabled` | `disabled` / `aria-disabled`; `cursor: not-allowed`; never opacity |
+| disabled | `text.disabled`, `border.disabled`, `interaction.disabled.bg`; no hover or pressed styling; still focusable when `aria-disabled` | `disabled` / `aria-disabled`; `cursor: not-allowed` (rule 5) |
 | invalid | border → `status.danger.border` at 2px; message in `status.danger.text` with the `✕` glyph; `aria-invalid`; `aria-describedby` | border width 1 → 2px; glyph; message |
 | invalid + focus-visible | the 2px danger border **and** the ring in `interaction.focus.ring-container` at `focus.offset-invalid` | double boundary |
 | read-only | `text.default`; 1px dotted `border.divider` bottom; no fill; focusable; selectable | `readonly`; dotted edge |
@@ -95,7 +92,7 @@ Every interactive component declares which of these apply and demonstrates every
 
 Rules that apply everywhere:
 
-1. **Selection is a fill; focus is a ring.** Neither borrows the other's form. A ring still has to be visible on whatever it sits over: `#e53935` measures 2.52:1 on `action.primary.bg` and 1.13:1 on `status.danger.fill`, which is why the ring recolours on those fills instead of relying on hue. It measures 3.38:1 on the `interaction.selection.bg` recessed by D-027, so a selected row keeps the ordinary control ring.
+1. **Selection is a fill; focus is a ring.** Neither borrows the other's form. The ring must reach 3:1 on whatever it sits over: `#e53935` falls below it on `action.primary.bg` and `status.danger.fill`, so the ring recolours on those fills; it meets it on `interaction.selection.bg` (D-027), so a selected row keeps the ordinary control ring.
 2. **Focus ring (D-006; component mapping clarification D-015).** Controls and rows: `outline: 1px dashed {color.interaction.focus.ring}; outline-offset: -2px`. Focusable containers (panes, windows, dialogs, cards): `outline: 2px solid {color.interaction.focus.ring-container}; outline-offset: -3px`. On filled surfaces use the component's explicit ring mapping: primary buttons and checked controls use `interaction.focus.ring-container` where declared; destructive buttons use their declared on-fill text role. The selection fill is the exception and takes the ordinary ring, on the measurement in rule 1. Keep the control or container geometry independently of the colour mapping. `:focus:not(:focus-visible)` draws nothing. Forced-colors mode uses `Highlight`. A host focus indicator is never removed without this replacement.
 3. **Never colour-only.** Every state and every status carries a second channel: a glyph (`✕ ! ✓ i ·`), a border width, an underline pattern, or an ARIA state. Charts carry pattern fills.
 4. **Hover changes fills and borders, never text colour alone**, and only on hover-capable pointers.
@@ -106,18 +103,18 @@ Rules that apply everywhere:
 
 ## Actions
 
-There are four button tones:
+Four button tones:
 
-- `primary` is the only filled button at rest (`action.primary.bg` `#7d1310`
-  with `action.primary.text` (bright rose; D-033)).
-- `secondary` is an outline (`border.control`, text `text.bright`).
-- `tertiary` is a ghost or icon button (`text.default`, hover
-  `interaction.hover.bg`).
-- `destructive` is an outline in `action.destructive.text` (`#f73f35`). On
-  hover it fills with `action.destructive.hover-bg` (`#dc282e`) and `#f9faf9`
-  text (4.58:1). A filled variant exists for confirm dialogs.
+- `primary`, the only filled button at rest: `action.primary.bg` (`#7d1310`)
+  with `action.primary.text` (bright rose; D-033).
+- `secondary`, an outline: `border.control`, text `text.bright`.
+- `tertiary`, a ghost or icon button: `text.default`, hover
+  `interaction.hover.bg`.
+- `destructive`, an outline in `action.destructive.text` (`#f73f35`) that
+  fills on hover with `action.destructive.hover-bg` (`#dc282e`) and `#f9faf9`
+  text. A filled variant exists for confirm dialogs.
 
-Destructive actions also need a confirmation step or an undo. The colour is
+Destructive actions also need a confirmation step or an undo; the colour is
 not the safeguard.
 
 ## Status, diagnostics and diffs (D-001)
@@ -127,10 +124,10 @@ Five statuses: `danger` (`#f73f35` text, `#dc282e` fill), `warning`
 text, `#a3676b` fill). Each has `text`, `fill`, `on-fill`, `tint` and `border`
 roles, a required glyph (`✕ ! ✓ i ·`) and its own underline or border pattern
 (wavy, dashed, solid, dotted, double). The three extension hues are
-desaturated and shifted warm so they fit the identity. All sit between 6.5:1
-and 7.6:1 on every surface. They are **forbidden** in `surface`, `text`,
-`border`, `interaction` and `action`. Purple, cyan and magenta do not exist in
-the theme.
+desaturated and shifted warm to fit the identity, and meet 4.5:1 as text on
+every surface. They are **forbidden** in `surface`, `text`, `border`,
+`interaction` and `action`. Purple, cyan and magenta do not exist in the
+theme.
 
 Diagnostics:
 
@@ -161,7 +158,7 @@ Editor surfaces:
 - line numbers `code.line-number` (`text.subtle`, replacing the site's
   `#7d1310`);
 - caret `#e99499`;
-- selection `#420f0c` (muted text stays 4.71:1 inside it);
+- selection `#420f0c` (muted text stays above 4.5:1 inside it);
 - search matches `#630f0d`, with the current match inverted (`#ffa2a7` on
   `#0c0909`);
 - bracket match as a 1px `#e53935` border;
@@ -170,8 +167,8 @@ Editor surfaces:
 Syntax in `default` is monochrome: keywords `#f7463c`, strings `#bd787d`,
 comments `#ad7175` italic, numbers and constants `#d4868b`, functions
 `#ffa2a7`, variables and operators `#e99499`, types `#b37175`, properties and
-headings `#e95551`, tags `#f7463c`, attributes and escapes `#d4868b`. D-029
-lifted the two syntax reds. Hosts that want hue can opt in to `code.hued.*`
+headings `#e95551`, tags `#f7463c`, attributes and escapes `#d4868b` (the two
+reds as lifted by D-029). Hosts that want hue can opt in to `code.hued.*`
 (D-030): strings green `#86a46f`; numbers, constants, functions, attributes and
 escapes amber `#c9973f`; types and properties blue `#7e9ebb`; operators
 `#ffa2a7`. Keywords, tags, comments, variables and punctuation do not change.
@@ -183,40 +180,40 @@ Inside an editor selection some syntax roles fall below 4.5:1; see
 Terminal slots:
 
 - `heritage-ansi` carries the sixteen `Xresources` slots exactly.
-- `default` carries the readable heritage sixteen (D-029). Every slot that fell
-  below the text floor keeps its hue and saturation and gets more lightness.
-  Slot 6 is the exception: it is coral `#ff7a66` (D-032). Slots 1–7 and 9–15
-  all reach 4.5:1 on the terminal background. Slot 8 (bright black) stays the
-  dim tier at 3.01:1.
+  `color.primitive.ansi.*` keeps those values byte for byte; lifted values
+  live in `color.primitive.ansi-readable.*`, and `heritage-ansi` pins every
+  changed role back to the heritage primitive (D-029).
+- `default` carries the readable heritage sixteen (D-029): every slot that
+  fell below the text floor keeps its hue and saturation and gains lightness,
+  except slot 6, which is coral `#ff7a66` (D-032). Slots 1–7 and 9–15 reach
+  4.5:1 on the terminal background; slot 8 (bright black) stays the dim tier,
+  at 3:1.
 - The `extended` overlay proposes a semantic sixteen that all reach 4.5:1.
 
-Programs, not the theme, choose which slot means what. The readable sixteen
+Programs, not the theme, choose which slot means what; the readable sixteen
 make that choice safe for text.
 
-Links use strong red `text.link` (`#f73f35`) and a persistent underline, so they
-stand apart from the rose body and heading colours (D-024). On hover they use
-near-white `text.link-hover` on `interaction.hover.bg` (D-027). The strong
-fill looked louder than the link itself, so it stays with menu items.
-Current-page and selected navigation use their own indicator and on-fill
-roles.
-
 ## Typography
 
-One family: `SauceCodePro NFM` (Source Code Pro in the Nerd Fonts build). It
-falls back to Source Code Pro, Cascadia Mono, Consolas, Liberation Mono,
+One family: `SauceCodePro NFM` (Source Code Pro in the Nerd Fonts build),
+falling back to Source Code Pro, Cascadia Mono, Consolas, Liberation Mono,
 DejaVu Sans Mono and `monospace`. The site records `size-adjust` metrics for
 the fallbacks; no font file is distributed. Weights 400 and 700, plus italic.
 
 Scale (size/line-height in px): `ui-sm` 12/16, `ui-md` 13/18, `ui-lg` 14/20,
 `reading` 15/24, `code` 13/19, `terminal` 13/19 with −0.5px letter-spacing,
 `h1` 20/28 bold, `h2` 16/24 bold, `h3` 13/18 bold in `text.heading`, `caption`
-11/16 only with `text.muted` or lighter. Hosts keep the size the user chose;
-tiny UI text is a metric of the reference implementation, not a rule.
+11/16 only with `text.muted` or lighter. D-037: `display` 32/40 for
+page heroes and metric figures and `title` 24/32 for page titles above `h1`;
+components keep `h1`–`h3`. Hosts keep the size the user chose; tiny UI text is
+a metric of the reference implementation, not a rule.
 
 ## Spacing and density (D-009)
 
-Spacing steps: 0, 1, 2, 4, 8, 12, 16, 24, 32, 48 px. Set a density mode with
-`data-density` on any subtree:
+Spacing steps: 0, 1, 2, 4, 8, 12, 16, 24, 32, 48 px. `compact` is the default
+density (D-038): it applies wherever no `data-density` is set, in components,
+the site and copied bundles. Set `data-density="comfortable"` on any subtree to
+opt in to the larger mode:
 
 | Mode | Control | Row | Type | Horizontal padding | Gaps | Use |
 | --- | --- | --- | --- | --- | --- | --- |
@@ -224,11 +221,10 @@ Spacing steps: 0, 1, 2, 4, 8, 12, 16, 24, 32, 48 px. Set a density mode with
 | `comfortable` | 32px | 36px | `ui-md` | 12px | 4px | everyday applications |
 
 Both meet the 24×24 CSS-pixel target minimum; `compact` needs 4px between
-neighbouring targets. Table rows are exempt and always use the comfortable row
-height: a data row is content, not chrome, and a compact row is harder to scan
-exactly where scanning matters most. Controls inside a row still follow the
-page density. The site's 3px i3 gap, 14/−2 window gaps and 28px bar are
-window-manager geometry, not theme tokens.
+neighbouring targets. Table rows always use the comfortable row height (a data
+row is content, and compact rows are harder to scan); controls inside a row
+follow the page density. The site's 3px i3 gap, 14/−2 window gaps and 28px bar
+are window-manager geometry, not theme tokens.
 
 ## Elevation and layering
 
@@ -240,19 +236,16 @@ skip link 1000.
 
 A popup opened by hovering follows the pointer:
 
-- It sits 8px from the cursor.
-- It flips to the other side of the cursor instead of crossing a viewport
-  edge, and keeps an 8px margin from every edge.
+- It sits 8px from the cursor, flips to the cursor's other side instead of
+  crossing a viewport edge, and keeps 8px from every edge.
 - It moves again on pointer move, scroll and resize.
-- A popup with nothing to operate takes no pointer events, so it never sits
-  between the cursor and what opened it. A popup with a control or a link
-  stays reachable and stays open while the pointer is inside it.
+- A popup with nothing to operate takes no pointer events; one with a control
+  or link stays reachable and open while the pointer is inside it.
 - Either kind closes when the pointer leaves both the trigger and the popup.
 
-The same popup opened from the keyboard anchors to its trigger instead: below
-it, or above when there is no room below. Focus has no pointer to follow. This
-is a placement rule only. What opens a popup, and whether it is a tooltip, a
-preview or an inspector, belongs to the component's own contract.
+Opened from the keyboard, the same popup anchors to its trigger: below it, or
+above when there is no room below. This is a placement rule only; what opens a
+popup and what kind it is belong to the component's contract.
 
 ## Icons
 
@@ -277,10 +270,10 @@ Breakpoints 320 (reflow floor), 600, 900, 1280.
 ## Typography semantics (D-033)
 
 All content titles and H1–H6 use `text.heading`; size, weight and spacing carry
-their relative hierarchy. Chrome/window titles use `text.default` or
-`text.bright`. Ordinary body and long-form prose use `text.default` and
-`text.prose`. Bold inherits the current semantic color, including inside
-headings, muted text, links and selections. It never requests white by itself.
-Near-white is limited to headings, deliberate highlights, selections, hover
-highlights and documented contrast-critical on-fill text. See the exhaustive
-role audit in `docs/rose-typography-migration.md`; measure the actual state pair.
+the hierarchy. Chrome and window titles use `text.default` or `text.bright`;
+body and long-form prose use `text.default` and `text.prose`. Bold inherits the
+current semantic colour, including inside headings, muted text, links and
+selections, and never requests white by itself. Near-white is limited to
+headings, deliberate highlights, selections, hover highlights and documented
+contrast-critical on-fill text; measure the actual state pair. Role audit:
+`docs/rose-typography-migration.md`.
diff --git a/spec/identity.md b/spec/identity.md
index bef387789..46bc059fa 100644
--- a/spec/identity.md
+++ b/spec/identity.md
@@ -6,7 +6,7 @@ summary: What the j3w1 theme is, where it came from, and the five rules that kee
 ---
 
 <!-- @compact:start -->
-True-black canvas (`#000000`), near-black panels (`#100c0c`) and chrome (`#090707`), with dark-red raised layers, rose interface text (`#e99499`), rose reading text (`#e99499`), near-white content headings (`#f4eeee`), dark-red selections (`#531310`), a bright red focus ring (`#e53935`), 1px square borders, zero radii, one monospace family for chrome, reading and code. Red marks *interaction*: focus, selection, active borders, primary actions. It is not a decoration and it is not applied to everything. Darkness is the canvas; readable content is the priority.
+True-black canvas (`#000000`), near-black panels (`#100c0c`) and chrome (`#090707`), with dark-red raised layers, rose interface and reading text (`#e99499`), near-white content headings (`#f4eeee`), dark-red selections (`#531310`), a bright red focus ring (`#e53935`), 1px square borders, zero radii, one monospace family for chrome, reading and code. Red marks *interaction*: focus, selection, active borders, primary actions; it is not decoration. Darkness is the canvas; readable content is the priority.
 
 Five rules keep an implementation recognisable:
 
@@ -19,51 +19,60 @@ Five rules keep an implementation recognisable:
 
 ## Where it came from
 
-The palette began on a Manjaro i3 workstation, preserved in `j3w1/1w3j`. A
-pywal ramp was pulled from a red wallpaper, then frozen and tuned slot by slot
-in `config/Xresources` while watching what `ls`, vim and the agnoster prompt
-really showed. The i3 configuration gave the rest of the look: 1px pixel
-borders, 14/−2 gaps, tabbed layouts, a hidden top bar with Chinese status
-labels, dunst toasts framed in `#ae1914`, and dmenu selections in `#630f0d`.
-
-The modern reference is `j3w1/j3w1.github.io`, a web version of that
-workstation. Its stylesheet named the roles this specification uses
-(`--terminal`, `--surface-raised`, `--selection`, `--focus`, `--prose`,
-`--muted` …) and wrote the first contrast contract. Both sources are pinned by
-revision in `references/sources.json`. This repository is now the authority:
-later changes in either source are proposals, not automatic updates.
+The palette began on a Manjaro i3 workstation (`j3w1/1w3j`): a pywal ramp
+from a red wallpaper, frozen and tuned slot by slot in `config/Xresources`.
+The i3 configuration gave the rest: 1px borders, 14/−2 gaps, tabbed layouts,
+dunst toasts framed in `#ae1914`, dmenu selections in `#630f0d`. Its web
+version, `j3w1/j3w1.github.io`, named the roles this specification uses and
+wrote the first contrast contract. Both are pinned in
+`references/sources.json`. This repository is the authority: later changes in
+either source are proposals, not automatic updates.
 
 ## What "modern" means here
 
-Modern means clear structure, responsive layout, strong keyboard and
-screen-reader support, exact states, and controls that are pleasant to use. It
-does not mean pill buttons, glass panels, gradients, neon glows, a
-Material-style redesign, or red on every surface. The site shows sixteen such
-misreadings as labelled non-examples.
+Clear structure, responsive layout, strong keyboard and screen-reader
+support, exact states, pleasant controls. Not pill buttons, glass panels,
+gradients, neon glows, a Material-style redesign, or red on every surface; the
+site draws such misreadings as labelled non-examples.
+
+One exception (D-014): the generated preview beside each visible CSS hex
+literal on the spec page. It adds no palette, role or geometry rule, and text,
+copying, keyboard order and no-JS access stay intact.
 
-One narrow exception: the colour previews that the spec page draws next to
-each hex value may be round, sit on a checkerboard and animate (D-014).
-Component and consumer rules do not change.
+- A 16px circle with its theme-derived 1px boundary; alpha shows over a
+  checkerboard of theme tokens.
+- On CSS `:hover` it becomes a 17.4px square (fast duration, ease-out on
+  transform and border-radius; none under reduced motion).
+- Mouse and pen pointers also open a non-interactive popup with the exact
+  value; touch and unknown pointers do not. CSS `:hover` alone drives both,
+  never the `hover` or `any-hover` media features, which can report no hover
+  despite a mouse.
+- The popup follows the pointer inside the circle at an 8px gap, flips when
+  needed and keeps an 8px viewport gutter. Tracking has no animation.
+- It closes when the pointer leaves the circle, on an outside press, Escape,
+  loss of window focus, and on page or nested scrolling unless the circle is
+  still under the last pointer position. It never captures input, holds
+  itself open or adds a keyboard stop; token tables and the token inspector
+  keep the persistent information.
 
 ## Profiles
 
-- `default` — the approved everyday composition. Monochrome red/rose for chrome,
-  text, borders, interaction and actions. Three bounded hues (amber, green,
-  blue) for status, diagnostics and diffs (D-001). Syntax is monochrome; the
-  three hues are available to opt-in syntax themes as `code.hued.*` (D-030).
+- `default` — the approved everyday composition: monochrome red/rose for
+  chrome, text, borders, interaction and actions; three bounded hues (amber,
+  green, blue) for status, diagnostics and diffs (D-001). Syntax is monochrome;
+  opt-in syntax themes may use the hues as `code.hued.*` (D-030).
 - `heritage-ansi` — the sixteen Xresources slots and their historical
-  assignments, exact, including the ones that fail the contrast floor. Use it
-  for terminals, archives and fidelity, never for new interface text.
-- `extended` — a proposed overlay that colours syntax, a full sixteen-slot
-  semantic terminal palette and chart series with the same three hues. It is
-  not approved, and the site labels it.
+  assignments, exact, including those that fail the contrast floor. For
+  terminals, archives and fidelity, never new interface text.
+- `extended` — a proposed, unapproved overlay that colours syntax, a
+  sixteen-slot semantic terminal palette and chart series with the same three
+  hues.
 
 ## Naming
 
-Roles are `color.<group>.<role>`. The group list is closed: `surface`, `text`,
+Roles are `color.<group>.<role>`, from a closed group list: `surface`, `text`,
 `border`, `interaction`, `action`, `status`, `code`, `diagnostic`, `diff`,
-`terminal`, `chart`, `icon`. Primitives are `color.primitive.<family>.<step>`;
-the step rises with luminance. A CSS custom property is the path with dots
-replaced by dashes: `color.interaction.focus.ring` →
-`--color-interaction-focus-ring`. Roles alias primitives; primitives carry
-provenance.
+`terminal`, `chart`, `icon`. Primitives are `color.primitive.<family>.<step>`,
+the step rising with luminance; roles alias primitives, and primitives carry
+provenance. A CSS custom property is the path with dashes for dots:
+`color.interaction.focus.ring` → `--color-interaction-focus-ring`.
diff --git a/spec/portability.md b/spec/portability.md
index 02cdda740..d10b20af0 100644
--- a/spec/portability.md
+++ b/spec/portability.md
@@ -15,8 +15,8 @@ a file that changes one does not claim the others. A port never:
 - overwrites a user's whole settings file;
 - replaces keybindings, credentials or unrelated preferences.
 
-It installs under a unique name next to the host's defaults and documents how
-to roll back.
+It installs under a unique name beside the host's defaults and documents the
+rollback.
 
 ## What every port must reproduce
 
@@ -48,9 +48,9 @@ percentage means something only with its denominator.
 
 ## Shared component defaults
 
-A component whose Portability section links here follows these rules. Its
-frontmatter `responsive` and `portability.nativeFallbacks` fields carry the
-same rules for the exports.
+Components whose Portability section links here follow these rules; their
+`responsive` and `portability.nativeFallbacks` fields carry them into the
+exports.
 
 - Wrap labels and actions without changing source order.
 - Use logical spacing in RTL.
@@ -71,16 +71,31 @@ onto the framework's theme keys and lists what it cannot express.
 ## Native ports
 
 A port lives at `ports/<slug>/` with a README, `port.json`, `mapping.json` and
-importable artifacts under `dist/`. Add `capabilities.json` for precise role
-classifications. Add `src/` only for real generator inputs that these sources
-cannot express, and `evidence/` only for actual evidence; neither needs a
-placeholder directory. `templates/port/` is a starting aid when work begins.
-
+importable artifacts under `dist/`. Add `src/` only for real generator inputs
+that these sources cannot express, and `evidence/` only for actual evidence;
+neither needs a placeholder directory. `templates/port/` is a starting aid
+when work begins.
+
+- `capabilities.json` refines each role into mapped, inherited, unsupported,
+  out-of-scope or not-implemented, with a surface and a reason (D-018). A
+  legacy unmapped reason stays unclassified, never guessed. One generated
+  catalogue feeds the summaries, drill-downs and task kits; private parity
+  records never enter it.
+- Every port classifies a new role, even when only one maps it. Telegram alone
+  maps `surface.accent` (outgoing bubbles; incoming stay `surface.raised`,
+  timestamps on both `text.muted`) and `interaction.text-selection.tint`
+  (Android text selection; Desktop keeps `selection.bg` with near-white text).
+  Claude Code's `userMessageBackground` keeps `interaction.selection.bg`, and
+  Obsidian, which keeps the text colour, would suit the tint; each adoption is
+  a separate change with its own import check (D-035, D-036).
 - Statuses are `experimental`, `verified` and `deprecated`. Reference
   implementations and roadmap candidates are not statuses.
 - `verified` needs a real import into the recorded application version, with
   matching evidence and a token digest equal to the current default profile.
-  A successful XML or JSON parse is a structural pass, not verification.
+  Import verification is separate from mapping state and declared status: a
+  relevant change to the target, tokens, mappings, capabilities or artifact
+  bytes makes evidence stale, and a failed or missing check never passes. A
+  successful XML or JSON parse is a structural pass, not verification.
 - Never hand-edit a generated hex. Fix the mapping or the approved token and
   regenerate.
 - `npm run generate` writes `dist/` for every port whose `format` has an
@@ -92,7 +107,7 @@ placeholder directory. `templates/port/` is a starting aid when work begins.
   convention. Unsafe or duplicate paths and missing/extra outputs fail before
   any port artifact is written. Obsidian emits a manifest and CSS together;
   Telegram emits Android text and a Desktop zip.
-- The README downloads table links each file at the release tag, and the site
+- The README downloads table links each file at the release tag; the site
   serves a copy at `ports/<slug>/<file>`.
 
 For JetBrains, an editor scheme (`.icls`) and a UI theme plugin are separate
@@ -104,7 +119,7 @@ tested version before mapping.
 ## The reference implementation
 
 `j3w1/j3w1.github.io` is the flagship web implementation and the source of the
-observed values. This repository does not scrape it at build time, and nothing
-synchronises in either direction. A later integration pins a release of this
-theme in that site through a separate reviewed change, and records its own
-site-specific values (window-manager geometry, wallpaper gradients) as such.
+observed values. Nothing is scraped at build time or synchronised in either
+direction. An integration there pins a release of this theme through a
+separate reviewed change and records its site-specific values (window-manager
+geometry, wallpaper gradients) as such.
diff --git a/tests/browser/chrome-controls.spec.js b/tests/browser/chrome-controls.spec.js
new file mode 100644
index 000000000..9fa4f6e95
--- /dev/null
+++ b/tests/browser/chrome-controls.spec.js
@@ -0,0 +1,102 @@
+/* One control language in the site chrome (button.md; docs/ui-architecture.md,
+   "Site chrome"). On one page of every SiteLayout template, every visible
+   button outside specimens and live examples is a canonical .button with the
+   canonical box at the default compact density (D-038), no <a> carries a
+   button class, and the tools whose primary action used to lose its fill
+   (R-b) show the filled primary. The source half is tests/chrome-controls.test.js. */
+
+import { verification } from "./verification.mjs";
+import { test, expect } from "./evidence-fixture.mjs";
+import { openSpec, rgbToHex } from "./helpers.mjs";
+import { readJson } from "../../scripts/lib/fs.mjs";
+
+const { annotation } = verification({
+  component: "page",
+  category: "appearance",
+  states: [],
+  variants: [],
+  note: "Site chrome on one page per SiteLayout template, desktop and narrow: visible buttons outside specimens, live examples, density-scoped previews and the choice renderer's own parts share the canonical compact .button box; no anchor carries a button class; /builder/ and /patterns/validation-recovery/ show the filled primary. Computed styles only; not a visual or manual review.",
+});
+
+const tokens = await readJson("exports/tokens.resolved.json");
+const token = (path) => tokens.profiles[tokens.defaultProfile].tokens[path].css;
+const releases = await readJson("site/releases.json");
+const firstRelease = releases.revisions.map((pin) => pin.id).sort()[0];
+const comparison = `${firstRelease}/${firstRelease}/${[...releases.profiles].sort()[0]}/`;
+
+const routes = [
+  "", "reference/", "reference/contrast/", "reference/decisions/", "reference/fixtures/", "ports/ghostty/", "foundations/", "components/", "components/button/", "components/dialog/", "components/form-builder/",
+  "patterns/", "patterns/validation-recovery/", "tokens/", "tokens/color.action.primary.bg/", "tools/",
+  "implement/", "agents/", "ports/", "releases/", `releases/${comparison}`, "recipes/",
+  "recipes/button/", "kit/", "builder/", "workbench/", "workbench/button/", "report/", "figma/", "no-such-page/",
+];
+
+/* Specimens, live examples, previews with their own density, and the parts
+   the choice and date renderers draw for a select or date input. */
+const OUTSIDE_CHROME = "[data-specimen], .site-example, template, [inert], [data-density]:not(html), .j3w1-choice, .j3w1-temporal, .j3w1-calendar";
+
+const survey = (page, outside) => page.evaluate((outside) => {
+  const box = (el) => {
+    const cs = getComputedStyle(el);
+    return { height: Math.round(el.getBoundingClientRect().height), paddingLeft: cs.paddingLeft, paddingRight: cs.paddingRight, border: cs.borderTopWidth, fontSize: cs.fontSize };
+  };
+  const probe = document.createElement("button");
+  probe.className = "button";
+  probe.type = "button";
+  probe.textContent = "Probe";
+  document.querySelector("main").append(probe);
+  const canonical = box(probe);
+  probe.remove();
+  const buttons = [...document.querySelectorAll("button")]
+    .filter((el) => el.checkVisibility({ visibilityProperty: true }) && !el.closest(outside))
+    .map((el) => ({ name: (el.textContent.trim() || el.getAttribute("aria-label") || "").slice(0, 40), classes: el.className, box: box(el) }));
+  const anchors = [...document.querySelectorAll("a")]
+    .filter((el) => [...el.classList].some((name) => /^(btn|button)(-|$)|-button$/.test(name)))
+    .map((el) => `${el.className}: ${el.textContent.trim().slice(0, 40)}`);
+  return { canonical, buttons, anchors };
+}, outside);
+
+for (const route of routes) {
+  test(`chrome controls follow the button spec on /${route}`, { annotation }, async ({ page }, info) => {
+    test.skip(!["desktop", "narrow"].includes(info.project.name), "The chrome is measured at the desktop and narrow widths.");
+    /* The 404 page answers with its status, and a release comparison's frames
+       block their historical scripts by design (sandbox); every other page
+       must load clean. */
+    const audit = route === "no-such-page/" ? (await page.goto(route), null) : await openSpec(page, route || "./");
+    const clean = route.startsWith("releases/") && route !== "releases/" ? null : audit;
+    const { canonical, buttons, anchors } = await survey(page, OUTSIDE_CHROME);
+    expect(canonical).toEqual({ height: Number.parseInt(token("density.compact.control-height")), paddingLeft: token("density.compact.control-padding-x"), paddingRight: token("density.compact.control-padding-x"), border: token("border.width.default"), fontSize: token("font.size.ui-md") });
+    expect(buttons.filter((button) => !/(^|\s)button(\s|$)/.test(button.classes)), "chrome buttons carry the canonical class").toEqual([]);
+    expect(buttons.filter((button) => JSON.stringify(button.box) !== JSON.stringify(canonical)), "every tone shares the canonical box").toEqual([]);
+    expect(anchors, "navigation is a link, never a button-styled <a>").toEqual([]);
+    clean?.assertClean();
+  });
+}
+
+for (const route of ["builder/", "patterns/validation-recovery/"]) {
+  test(`/${route} shows the filled primary action (R-b)`, { annotation }, async ({ page }, info) => {
+    test.skip(!["desktop", "narrow"].includes(info.project.name), "The tools are measured at the desktop and narrow widths.");
+    await openSpec(page, route);
+    const primary = page.locator("main button.button:not(.button-secondary, .button-tertiary, .button-destructive, .button-destructive-filled)").filter({ visible: true });
+    await expect(primary).toHaveCount(1);
+    expect(rgbToHex(await primary.evaluate((el) => getComputedStyle(el).backgroundColor))).toBe(token("color.action.primary.bg"));
+  });
+}
+
+
+test("the section is current and the rail collapses to accessible icons from 900 to 1280px", { annotation }, async ({ page }, info) => {
+  test.skip(info.project.name !== "desktop", "Responsive rail at explicit widths.");
+  await page.setViewportSize({ width: 1024, height: 900 });
+  await page.goto("components/button/");
+  const rail = page.getByRole("navigation", { name: "Site", exact: true });
+  const link = rail.getByRole("link", { name: "Components", exact: true });
+  await expect(link).toHaveAttribute("aria-current", "true");
+  await expect(link).toHaveAttribute("title", "Components");
+  expect(await rail.evaluate((el) => el.getBoundingClientRect().width)).toBe(48);
+  expect(await link.locator(".sidebar-nav-label").evaluate((el) => el.getBoundingClientRect().width)).toBe(1);
+  await link.focus(); await expect(link).toBeFocused();
+  await expect(link).toHaveCSS("border-inline-start-width", "2px");
+  await page.setViewportSize({ width: 1440, height: 900 });
+  expect(await rail.evaluate((el) => el.getBoundingClientRect().width)).toBe(240);
+  expect(await link.locator(".sidebar-nav-label").evaluate((el) => el.getBoundingClientRect().width)).toBeGreaterThan(1);
+});
diff --git a/tests/browser/components/admin-form.spec.js b/tests/browser/components/admin-form.spec.js
new file mode 100644
index 000000000..f9ad9d61c
--- /dev/null
+++ b/tests/browser/components/admin-form.spec.js
@@ -0,0 +1,9 @@
+import { test, expect } from "../evidence-fixture.mjs";
+import { verification } from "../verification.mjs";
+
+test("composed matrices keep their raw demo's nested wizard styles", verification({ component: "admin-form", category: "rendering", states: ["default"], variants: ["default"], note: "Default matrix variant, first wizard step: exact transparent fill and 2px edge. Rendering only; no wizard behavior or complete state coverage claim." }), async ({ page }) => {
+  await page.goto("components/admin-form/");
+  const step = page.locator('#admin-form-states [data-state="default"] .wizard-step-button').first();
+  await expect(step).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
+  await expect(step).toHaveCSS("border-bottom-width", "2px");
+});
diff --git a/tests/browser/components/button.spec.js b/tests/browser/components/button.spec.js
index 051a8e3db..483ec491f 100644
--- a/tests/browser/components/button.spec.js
+++ b/tests/browser/components/button.spec.js
@@ -25,7 +25,7 @@ const paint = (locator) =>
 
 test.describe("button", () => {
   test("the state matrix renders every declared state for every tone", verification({component: "button", category: "rendering", states: ["default", "hover", "focus-visible", "active", "disabled", "loading"], variants: ["default", "secondary", "tertiary", "destructive"], note: "Presence and selected structural assertions only; not behavioral verification of every state."}), async ({ page }) => {
-    await openSpec(page, "#c-button");
+    await openSpec(page, "components/button/#c-button");
     for (const state of STATES) {
       await expect(page.locator(`#button-states [data-state="${state}"]`)).toHaveCount(VARIANTS.length);
     }
@@ -36,7 +36,7 @@ test.describe("button", () => {
 
   test("the primary tone: fill, hover fill, container ring, radius 0", verification({component: "button", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "computed styles are the same without scripts; keep one run");
-    await openSpec(page, "#c-button");
+    await openSpec(page, "components/button/#c-button");
     const live = page.locator('#button-states [data-state="default"]').first();
     const button = live.locator("button.button");
 
@@ -60,7 +60,7 @@ test.describe("button", () => {
 
   test("the destructive tone fills on hover with its on-fill text", verification({component: "button", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "one run");
-    await openSpec(page, "#c-button");
+    await openSpec(page, "components/button/#c-button");
     const rest = await paint(page.locator('#button-states [data-state="default"] button.button-destructive').first());
     expect(rgbToHex(rest.color)).toBe(token("color.action.destructive.text"));
     expect(rgbToHex(rest.border)).toBe(token("color.action.destructive.border"));
@@ -76,11 +76,12 @@ test.describe("button", () => {
 
   test("disabled uses the disabled roles at full opacity", verification({component: "button", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "one run");
-    await openSpec(page, "#c-button");
+    await openSpec(page, "components/button/#c-button");
     const button = page.locator('#button-states [data-state="default"] button.button').first();
     await button.evaluate((el) => {
       el.disabled = true;
     });
+    await expect.poll(async () => rgbToHex((await paint(button)).bg)).toBe(token("color.interaction.disabled.bg"));
     const disabled = await paint(button);
     expect(rgbToHex(disabled.bg)).toBe(token("color.interaction.disabled.bg"));
     expect(rgbToHex(disabled.color)).toBe(token("color.text.disabled"));
@@ -94,7 +95,7 @@ test.describe("button", () => {
 
   test("keyboard: Tab reaches the live button and shows the ring", verification({component: "button", category: "keyboard", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs", "narrow", "zoom200"), "one keyboard walk");
-    await openSpec(page, "#c-button");
+    await openSpec(page, "components/button/#c-button");
     const cell = page.locator('#button-states [data-state="default"][data-state-default]').nth(1);
     const button = cell.locator("button.button");
     await button.focus();
diff --git a/tests/browser/components/checkbox.spec.js b/tests/browser/components/checkbox.spec.js
index 75d09b6ac..bd7ef51a2 100644
--- a/tests/browser/components/checkbox.spec.js
+++ b/tests/browser/components/checkbox.spec.js
@@ -27,7 +27,7 @@ const box = (locator) =>
 
 test.describe("checkbox", () => {
   test("the state matrix renders every declared state for both variants", verification({component: "checkbox", category: "rendering", states: ["default", "hover", "focus-visible", "checked", "mixed", "checked+focus-visible", "checked+disabled", "disabled", "invalid", "required"], variants: ["default", "group"], note: "Presence and selected structural assertions only; not behavioral verification of every state."}), async ({ page }) => {
-    await openSpec(page, "#c-checkbox");
+    await openSpec(page, "components/checkbox/#c-checkbox");
     for (const state of STATES) {
       await expect(page.locator(`#checkbox-states [data-state="${state}"]`)).toHaveCount(VARIANTS.length);
     }
@@ -41,7 +41,7 @@ test.describe("checkbox", () => {
 
   test("the live box: square, checked fill and glyph, rings", verification({component: "checkbox", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "computed styles are the same without scripts; keep one run");
-    await openSpec(page, "#c-checkbox");
+    await openSpec(page, "components/checkbox/#c-checkbox");
     const live = page.locator('#checkbox-states [data-state="default"]').first();
     const input = live.locator("input.checkbox-input");
 
@@ -92,7 +92,7 @@ test.describe("checkbox", () => {
 
   test("keyboard: Space toggles the live checkbox", verification({component: "checkbox", category: "keyboard", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs", "narrow", "zoom200"), "one keyboard walk");
-    await openSpec(page, "#c-checkbox");
+    await openSpec(page, "components/checkbox/#c-checkbox");
     const input = page.locator('#checkbox-states [data-state="default"][data-state-default] input.checkbox-input').first();
     await input.focus();
     await expect(input).toBeFocused();
diff --git a/tests/browser/components/code-editor.spec.js b/tests/browser/components/code-editor.spec.js
new file mode 100644
index 000000000..d3c4cd690
--- /dev/null
+++ b/tests/browser/components/code-editor.spec.js
@@ -0,0 +1,17 @@
+import { test, expect } from "../evidence-fixture.mjs";
+import { verification } from "../verification.mjs";
+
+test("code-editor package and matrix render the same decorative whitespace glyphs", verification({ component: "code-editor", category: "rendering", states: ["default"], variants: ["default"], note: "Exact CSS-generated glyphs, colour and geometry in the default package example and default matrix cell; no editor behavior or other state claim." }), async ({ page }) => {
+  await page.goto("components/code-editor/");
+  const shape = (locator) => locator.evaluate((el) => {
+    const style = getComputedStyle(el, "::before"), rect = el.getBoundingClientRect();
+    return { glyphs: style.content, color: style.color, width: rect.width, height: rect.height, text: el.textContent };
+  });
+  const live = page.locator("j3w1-code-editor .code-editor-ws").first();
+  const matrix = page.locator('#code-editor-states [data-state="default"] .code-editor-ws').first();
+  const specimen = await shape(live);
+  expect(specimen.text).toBe("");
+  expect(specimen.glyphs).toBe('"··"');
+  expect(specimen.width).toBeGreaterThan(0);
+  expect(await shape(matrix)).toEqual(specimen);
+});
diff --git a/tests/browser/components/decision-alignment.spec.js b/tests/browser/components/decision-alignment.spec.js
new file mode 100644
index 000000000..c886d9900
--- /dev/null
+++ b/tests/browser/components/decision-alignment.spec.js
@@ -0,0 +1,129 @@
+import { test, expect } from "../evidence-fixture.mjs";
+import { verification } from "../verification.mjs";
+import { openSpec, rgbToHex } from "../helpers.mjs";
+import { token } from "../tokens.mjs";
+import { readJson } from "../../../scripts/lib/fs.mjs";
+
+const metadataComponents = ["avatar", "button-group", "chart", "command-palette", "compact-dashboard", "description-list", "disclosure", "editor-search", "error-state", "file-browser", "kbd", "popover", "range", "repeater", "segmented-control", "skeleton", "timeline", "tree", "button", "wizard", "search-field", "file-input", "progress", "code-editor"];
+for (const id of metadataComponents) {
+  const component = await readJson(`exports/components/${id}.json`);
+  test(`${id}: its declared state matrix remains available`, verification({
+    component: id, category: "rendering", states: component.states, variants: component.variants.map(variant => variant.id),
+    note: "Static matrix presence after dependency or contrast metadata correction; no interaction or comprehensive appearance claim.",
+  }), async ({ page }) => {
+    await openSpec(page, `components/${id}/`);
+    for (const state of component.states) {
+      await expect(page.locator(`#${id}-states [data-state='${state}']`)).toHaveCount(component.variants.length);
+    }
+  });
+}
+
+const selections = [
+  ["combobox", "selected", ".combobox-option[aria-selected='true']", ["default", "with-groups"]],
+  ["menu", "selected", ".menu-item-demo-target", ["default", "with-submenu", "with-checks"]],
+  ["chip", "selected+focus-visible", ".chip-filter, .chip-remove", ["filter", "removable"]],
+  ["pagination", "current", ".pagination-current", ["default"]],
+  ["data-table", "selected+focus-visible", ".data-table-row-demo-target", ["default", "selectable", "resizable"]],
+  ["table", "selected+focus-visible", ".table-row-demo-target", ["default", "sticky-header", "numeric", "with-caption"]],
+  ["list", "selected+focus-visible", ".list-option-demo-target", ["single", "multi", "with-meta"]],
+  ["diff-view", "selected", ".diff-view-row-active", ["unified", "split", "word-level", "conflict"]],
+  ["diagnostics", "selected+focus-visible", ".diagnostics-row-active", ["panel"]],
+  ["sidebar-nav", "selected", ".sidebar-nav-link-demo-target", ["default", "collapsed", "nested"]],
+  ["icon-button", "toggled+focus-visible", ".icon-button", ["default", "toggle"]],
+  ["i3-window-frame", "selected", ".i3-window-frame-workspace-demo-target", ["default", "tabbed", "floating"]],
+  ["card", "selected+focus-visible", ".card-selectable.card-demo-target", ["selectable"]],
+];
+
+for (const [component, state, selector, variants] of selections) {
+  test(`${component}: selection keeps the ordinary ring (D-027)`, verification({
+    component, category: "appearance", states: [state], variants,
+    note: "Computed selection fill and 1px dashed ring at -2px for each matching matrix target. Diff rows are promoted to focusable rows as a grid host would; no host navigation claim.",
+  }), async ({ page }) => {
+    await openSpec(page, `components/${component}/`);
+    const targets = page.locator(`#${component}-states [data-state='${state}']`).locator(selector);
+    expect(await targets.count()).toBeGreaterThanOrEqual(variants.length);
+    for (const target of await targets.all()) {
+      // The forced selection hooks hold the fill; real keyboard focus draws the ring.
+      // Some reference rows delegate DOM focus to their listbox or a grid host.
+      await target.evaluate(el => {
+        const cell = el.closest("[data-state]");
+        cell.setAttribute("data-state-focus-visible", "");
+        if (el.matches(".diff-view-row")) {
+          el.tabIndex = 0;
+          el.setAttribute("aria-current", "true");
+        }
+      });
+      if (component !== "combobox") await target.focus();
+      const style = await target.evaluate(el => {
+        const s = getComputedStyle(el);
+        return { bg: s.backgroundColor, color: s.outlineColor, width: s.outlineWidth, style: s.outlineStyle, offset: s.outlineOffset };
+      });
+      // Table cells paint the diff fill; a chip remove button sits over its parent fill.
+      const fills = component === "diff-view"
+        ? await target.locator(":scope > td").evaluateAll(cells => cells.map(el => getComputedStyle(el).backgroundColor))
+        : [component === "chip" && await target.evaluate(el => el.matches(".chip-remove"))
+          ? await target.locator("..").evaluate(el => getComputedStyle(el).backgroundColor) : style.bg];
+      expect(fills.length).toBeGreaterThan(0);
+      for (const fill of fills) expect(rgbToHex(fill)).toBe(token("color.interaction.selection.bg"));
+      expect(rgbToHex(style.color)).toBe(token("color.interaction.focus.ring"));
+      expect(style.width).toBe("1px");
+      expect(style.style).toBe("dashed");
+      expect(style.offset).toBe("-2px");
+    }
+    if (component === "card") {
+      const normal = page.locator("#card-states [data-state='focus-visible'] .card-link");
+      await expect(normal).toHaveCSS("outline-width", "2px");
+      await expect(normal).toHaveCSS("outline-style", "solid");
+      await expect(normal).toHaveCSS("outline-offset", "-3px");
+      expect(rgbToHex(await normal.evaluate(el => getComputedStyle(el).outlineColor))).toBe(token("color.interaction.focus.ring-container"));
+    }
+  });
+}
+
+for (const [component, selector] of [["breadcrumbs", ".breadcrumbs-link-demo-target"], ["toast", ".toast:not(.toast-danger) .toast-action"]]) {
+  test(`${component}: link hover uses the ordinary hover fill (D-027)`, verification({
+    component, category: "appearance", states: ["hover"], variants: [component === "toast" ? "with-action" : "default", ...(component === "breadcrumbs" ? ["truncated"] : [])],
+    note: "Computed forced hover fill, foreground and underline only; danger toast actions retain their on-fill mapping.",
+  }), async ({ page }) => {
+    await openSpec(page, `components/${component}/`);
+    const targets = page.locator(`#${component}-states [data-state='hover']`).locator(selector);
+    expect(await targets.count()).toBeGreaterThan(0);
+    for (const target of await targets.all()) {
+      await expect.poll(async () => rgbToHex(await target.evaluate(el => getComputedStyle(el).backgroundColor))).toBe(token("color.interaction.hover.bg"));
+      expect(rgbToHex(await target.evaluate(el => getComputedStyle(el).color))).toBe(token("color.text.link-hover"));
+      await expect(target).toHaveCSS("text-decoration-thickness", "2px");
+    }
+  });
+}
+
+test("time-picker: invalid focus retains both boundaries", verification({
+  component: "time-picker", category: "appearance", states: ["invalid+focus-visible"], variants: ["default"],
+  note: "Declared matrix cell with 2px danger border and recoloured 1px dashed ring at -4px, matching date-picker; no time editing behavior claim.",
+}), async ({ page }) => {
+  await openSpec(page, "components/time-picker/");
+  const root = page.locator("#time-picker-states [data-state='invalid+focus-visible'] .time-picker-root");
+  await expect(root).toHaveCount(1);
+  const s = await root.evaluate(el => {
+    const s = getComputedStyle(el);
+    return { border: s.borderTopColor, width: s.borderTopWidth, outline: s.outlineColor, style: s.outlineStyle, offset: s.outlineOffset };
+  });
+  expect(rgbToHex(s.border)).toBe(token("color.status.danger.border"));
+  expect(s.width).toBe("2px");
+  expect(rgbToHex(s.outline)).toBe(token("color.interaction.focus.ring-container"));
+  expect(s.style).toBe("dashed");
+  expect(s.offset).toBe("-4px");
+});
+
+test("settings-panel: a native checkbox toggles on Space", verification({
+  component: "settings-panel", category: "keyboard", states: ["default"], variants: ["default"],
+  note: "One native checkbox: Enter preserves its checked state, Space toggles it; no manual keyboard acceptance or other control claim.",
+}), async ({ page }) => {
+  await openSpec(page, "components/settings-panel/");
+  const checkbox = page.locator("#settings-panel-states [data-state='default'] .checkbox-input").first();
+  await expect(checkbox).toBeChecked();
+  await checkbox.focus();
+  await page.keyboard.press("Enter");
+  await expect(checkbox).toBeChecked();
+  await page.keyboard.press("Space");
+  await expect(checkbox).not.toBeChecked();
+});
diff --git a/tests/browser/components/dialog.spec.js b/tests/browser/components/dialog.spec.js
index b9450aa05..dbf3f2cc6 100644
--- a/tests/browser/components/dialog.spec.js
+++ b/tests/browser/components/dialog.spec.js
@@ -14,7 +14,7 @@ const channels = (css) => {
 
 test.describe("dialog", () => {
   test("the state matrix renders every declared state for every variant, closed cells hide the dialog", verification({component: "dialog", category: "rendering", states: ["default", "open", "closed", "focus-trapped", "hover", "focus-visible", "reduced-motion"], variants: ["default", "alert-dialog", "form"], note: "Presence and selected structural assertions only; not behavioral verification of every state."}), async ({ page }) => {
-    await openSpec(page, "#c-dialog");
+    await openSpec(page, "components/dialog/#c-dialog");
     const matrix = page.locator("#dialog-states");
     const variants = (await matrix.locator("thead th").count()) - 1;
     expect(variants).toBeGreaterThanOrEqual(3);
@@ -33,7 +33,7 @@ test.describe("dialog", () => {
 
   test("the live dialog draws the overlay border on the overlay surface, the backdrop, no radius, and the ring on its first button", verification({component: "dialog", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "computed styles are the same without scripts; keep one run");
-    await openSpec(page, "#c-dialog");
+    await openSpec(page, "components/dialog/#c-dialog");
     const live = page.locator('#dialog-states [data-state="default"]').first();
     const backdrop = live.locator(".dialog-backdrop");
     const dialog = live.locator("dialog.dialog");
@@ -68,7 +68,7 @@ test.describe("dialog", () => {
 
   test("keyboard: Tab walks Close, then the actions, and the ring recolours on the primary fill", verification({component: "dialog", category: "keyboard", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs", "narrow", "zoom200"), "one keyboard walk");
-    await openSpec(page, "#c-dialog");
+    await openSpec(page, "components/dialog/#c-dialog");
     const live = page.locator('#dialog-states [data-state="default"]').first();
     const close = live.locator(".dialog-close");
     await close.focus();
diff --git a/tests/browser/components/link.spec.js b/tests/browser/components/link.spec.js
index 5a84714f4..2b5271bd2 100644
--- a/tests/browser/components/link.spec.js
+++ b/tests/browser/components/link.spec.js
@@ -27,7 +27,7 @@ const paint = (locator) =>
 
 test.describe("link", () => {
   test("the state matrix renders every declared state for every variant", verification({component: "link", category: "rendering", states: ["default", "hover", "focus-visible", "visited", "current"], variants: ["default", "standalone", "current"], note: "Presence and selected structural assertions only; not behavioral verification of every state."}), async ({ page }) => {
-    await openSpec(page, "#c-link");
+    await openSpec(page, "components/link/#c-link");
     for (const state of STATES) {
       await expect(page.locator(`#link-states [data-state="${state}"]`)).toHaveCount(VARIANTS.length);
     }
@@ -36,7 +36,7 @@ test.describe("link", () => {
 
   test("the live inline link: text, underline, hover, ring", verification({component: "link", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "computed styles are the same without scripts; keep one run");
-    await openSpec(page, "#c-link");
+    await openSpec(page, "components/link/#c-link");
     const live = page.locator('#link-states [data-state="default"]').first();
     const link = live.locator("a.link");
 
@@ -49,7 +49,7 @@ test.describe("link", () => {
 
     const hovered = await paint(page.locator('#link-states [data-state="hover"] a.link').first());
     expect(rgbToHex(hovered.color)).toBe(token("color.text.link-hover"));
-    expect(rgbToHex(hovered.bg)).toBe(token("color.interaction.hover.bg-strong"));
+    expect(rgbToHex(hovered.bg)).toBe(token("color.interaction.hover.bg"));
     expect(hovered.thickness).toBe("2px");
 
     await link.focus();
@@ -61,7 +61,7 @@ test.describe("link", () => {
 
   test("the current link swaps the underline for the 2px indicator bar", verification({component: "link", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "one run");
-    await openSpec(page, "#c-link");
+    await openSpec(page, "components/link/#c-link");
     const current = await paint(page.locator('#link-states [data-state="default"] a.link[aria-current="page"]'));
     expect(rgbToHex(current.color)).toBe(token("color.text.bright"));
     expect(current.decoration).toBe("none");
@@ -71,7 +71,7 @@ test.describe("link", () => {
 
   test("keyboard: Tab reaches the live link and shows the ring", verification({component: "link", category: "keyboard", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs", "narrow", "zoom200"), "one keyboard walk");
-    await openSpec(page, "#c-link");
+    await openSpec(page, "components/link/#c-link");
     const link = page.locator('#link-states [data-state="default"][data-state-default] a.link').first();
     await link.focus();
     await expect(link).toBeFocused();
diff --git a/tests/browser/components/menu.spec.js b/tests/browser/components/menu.spec.js
index c2f9a6683..aca58452d 100644
--- a/tests/browser/components/menu.spec.js
+++ b/tests/browser/components/menu.spec.js
@@ -9,7 +9,7 @@ const VARIANTS = 3;
 
 test.describe("menu", () => {
   test("the state matrix renders every declared state for every variant", verification({component: "menu", category: "rendering", states: ["default", "hover", "focus-visible", "open", "closed", "disabled", "checked", "selected"], variants: ["default", "with-submenu", "with-checks"], note: "Presence and selected structural assertions only; not behavioral verification of every state."}), async ({ page }) => {
-    await openSpec(page, "#c-menu");
+    await openSpec(page, "components/menu/#c-menu");
     for (const state of STATES) {
       const cells = page.locator(`#menu-states [data-state="${state}"]`);
       await expect(cells).toHaveCount(VARIANTS);
@@ -23,7 +23,7 @@ test.describe("menu", () => {
 
   test("the menu surface, the active item fill and the ring on the button", verification({component: "menu", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "computed styles are the same without scripts; keep one run");
-    await openSpec(page, "#c-menu");
+    await openSpec(page, "components/menu/#c-menu");
     const live = page.locator('#menu-states [data-state="default"]').first();
     const list = live.locator('[role="menu"]');
     const button = live.locator(".menu-button");
@@ -42,6 +42,7 @@ test.describe("menu", () => {
 
     await item.focus();
     await expect(item).toBeFocused();
+    await expect.poll(async () => rgbToHex(await item.evaluate((el) => getComputedStyle(el).backgroundColor))).toBe(token("color.interaction.selection.bg"));
     const active = await item.evaluate((el) => {
       const s = getComputedStyle(el);
       return { bg: s.backgroundColor, color: s.color };
@@ -53,6 +54,7 @@ test.describe("menu", () => {
     await page.keyboard.press("Shift+Tab");
     await page.keyboard.press("Tab");
     await expect(button).toBeFocused();
+    await expect.poll(async () => rgbToHex(await button.evaluate((el) => getComputedStyle(el).backgroundColor))).toBe(token("color.interaction.pressed.bg"));
     const ring = await button.evaluate((el) => {
       const s = getComputedStyle(el);
       return { style: s.outlineStyle, width: s.outlineWidth, color: s.outlineColor, border: s.borderTopColor, bg: s.backgroundColor };
@@ -66,7 +68,7 @@ test.describe("menu", () => {
 
   test("structure: the button owns the menu and one item is in the tab order", verification({component: "menu", category: "structure", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "narrow", "zoom200"), "one structural check");
-    await openSpec(page, "#c-menu");
+    await openSpec(page, "components/menu/#c-menu");
     const live = page.locator('#menu-states [data-state="default"]').first();
     await expect(live.locator(".menu-button")).toHaveAttribute("aria-haspopup", "menu");
     await expect(live.locator(".menu-button")).toHaveAttribute("aria-expanded", "true");
diff --git a/tests/browser/components/radio-group.spec.js b/tests/browser/components/radio-group.spec.js
index 16b0eb397..386597711 100644
--- a/tests/browser/components/radio-group.spec.js
+++ b/tests/browser/components/radio-group.spec.js
@@ -26,7 +26,7 @@ const box = (locator) =>
 
 test.describe("radio-group", () => {
   test("the state matrix renders every declared state for both variants", verification({component: "radio-group", category: "rendering", states: ["default", "hover", "focus-visible", "checked", "checked+focus-visible", "disabled", "invalid", "required"], variants: ["default", "horizontal"], note: "Presence and selected structural assertions only; not behavioral verification of every state."}), async ({ page }) => {
-    await openSpec(page, "#c-radio-group");
+    await openSpec(page, "components/radio-group/#c-radio-group");
     for (const state of STATES) {
       await expect(page.locator(`#radio-group-states [data-state="${state}"]`)).toHaveCount(VARIANTS.length);
     }
@@ -39,7 +39,7 @@ test.describe("radio-group", () => {
 
   test("the live radios: square boxes, checked fill with the inner square, rings", verification({component: "radio-group", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "computed styles are the same without scripts; keep one run");
-    await openSpec(page, "#c-radio-group");
+    await openSpec(page, "components/radio-group/#c-radio-group");
     const live = page.locator('#radio-group-states [data-state="default"]').first();
     const first = live.locator("input.radio-group-input").first();
     const dot = live.locator(".radio-group-dot").first();
@@ -85,7 +85,7 @@ test.describe("radio-group", () => {
 
   test("keyboard: the arrow keys move the check through the live group", verification({component: "radio-group", category: "keyboard", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs", "narrow", "zoom200"), "one keyboard walk");
-    await openSpec(page, "#c-radio-group");
+    await openSpec(page, "components/radio-group/#c-radio-group");
     const inputs = page.locator('#radio-group-states [data-state="default"][data-state-default]').first().locator("input.radio-group-input");
     await inputs.first().focus();
     await page.keyboard.press("ArrowDown");
diff --git a/tests/browser/components/select.spec.js b/tests/browser/components/select.spec.js
index b5b7feff3..9c5a8253a 100644
--- a/tests/browser/components/select.spec.js
+++ b/tests/browser/components/select.spec.js
@@ -9,7 +9,7 @@ const VARIANTS = ["default", "with-groups", "multiple"];
 
 test.describe("select", () => {
   test("the state matrix renders every declared state for every variant", verification({component: "select", category: "rendering", states: ["default", "hover", "focus-visible", "required", "invalid", "invalid+focus-visible", "disabled"], variants: ["default", "with-groups", "multiple"], note: "Presence and selected structural assertions only; not behavioral verification of every state."}), async ({ page }) => {
-    await openSpec(page, "#c-select");
+    await openSpec(page, "components/select/#c-select");
     for (const state of STATES) {
       await expect(page.locator(`#select-states [data-state="${state}"]`)).toHaveCount(VARIANTS.length);
     }
@@ -21,7 +21,7 @@ test.describe("select", () => {
 
   test("the live control honours the box, focus, invalid and disabled rules", verification({component: "select", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "computed styles are the same without scripts; keep one run");
-    await openSpec(page, "#c-select");
+    await openSpec(page, "components/select/#c-select");
     const live = page.locator('#select-states [data-state="default"]').first();
     const control = live.locator("select");
     const root = live.locator(".select-root");
@@ -74,7 +74,7 @@ test.describe("select", () => {
 
   test("keyboard: Tab reaches the live select and the ring shows", verification({component: "select", category: "keyboard", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs", "narrow", "zoom200"), "one keyboard walk");
-    await openSpec(page, "#c-select");
+    await openSpec(page, "components/select/#c-select");
     const control = page.locator('#select-states [data-state="default"][data-state-default] select').first();
     await control.focus();
     await expect(control).toBeFocused();
diff --git a/tests/browser/components/table.spec.js b/tests/browser/components/table.spec.js
index 187272e96..209b2b40f 100644
--- a/tests/browser/components/table.spec.js
+++ b/tests/browser/components/table.spec.js
@@ -9,7 +9,7 @@ const VARIANTS = 4;
 
 test.describe("table", () => {
   test("the state matrix renders every declared state for every variant", verification({component: "table", category: "rendering", states: ["default", "hover", "selected", "selected+focus-visible", "selected+container-inactive", "sorted", "empty", "loading"], variants: ["default", "sticky-header", "numeric", "with-caption"], note: "Presence and selected structural assertions only; not behavioral verification of every state."}), async ({ page }) => {
-    await openSpec(page, "#c-table");
+    await openSpec(page, "components/table/#c-table");
     for (const state of STATES) {
       const cells = page.locator(`#table-states [data-state="${state}"]`);
       await expect(cells).toHaveCount(VARIANTS);
@@ -23,7 +23,7 @@ test.describe("table", () => {
 
   test("header rule, selected fill, hover fill and square corners", verification({component: "table", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "computed styles are the same without scripts; keep one run");
-    await openSpec(page, "#c-table");
+    await openSpec(page, "components/table/#c-table");
     const cells = page.locator('#table-states [data-state="default"]');
     const plain = cells.nth(0);
     const sticky = cells.nth(1);
@@ -60,6 +60,7 @@ test.describe("table", () => {
     expect(rgbToHex(hovered)).toBe(token("color.interaction.hover.bg"));
 
     await row.evaluate((el) => el.setAttribute("aria-selected", "true"));
+    await expect.poll(async () => rgbToHex(await row.evaluate((el) => getComputedStyle(el).backgroundColor))).toBe(token("color.interaction.selection.bg"));
     const selected = await row.evaluate((el) => {
       const s = getComputedStyle(el);
       return { bg: s.backgroundColor, color: s.color, radius: s.borderRadius };
@@ -71,7 +72,7 @@ test.describe("table", () => {
 
   test("keyboard: the sort buttons are the only tab stops and take the dashed ring", verification({component: "table", category: "keyboard", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs", "narrow", "zoom200"), "one keyboard walk");
-    await openSpec(page, "#c-table");
+    await openSpec(page, "components/table/#c-table");
     const live = page.locator('#table-states [data-state="default"]').first();
     const first = live.locator(".table-sort").first();
     await first.focus();
diff --git a/tests/browser/components/tabs.spec.js b/tests/browser/components/tabs.spec.js
index 3676e58a5..41f3b8706 100644
--- a/tests/browser/components/tabs.spec.js
+++ b/tests/browser/components/tabs.spec.js
@@ -9,7 +9,7 @@ const VARIANTS = 2;
 
 test.describe("tabs", () => {
   test("the state matrix renders every declared state for every variant", verification({component: "tabs", category: "rendering", states: ["default", "hover", "focus-visible", "selected", "selected+focus-visible", "selected+container-inactive", "disabled"], variants: ["default", "overflow"], note: "Presence and selected structural assertions only; not behavioral verification of every state."}), async ({ page }) => {
-    await openSpec(page, "#c-tabs");
+    await openSpec(page, "components/tabs/#c-tabs");
     for (const state of STATES) {
       const cells = page.locator(`#tabs-states [data-state="${state}"]`);
       await expect(cells).toHaveCount(VARIANTS);
@@ -21,7 +21,7 @@ test.describe("tabs", () => {
 
   test("the selected tab is a 2px indicator bar with bright text, and the ring sits on it", verification({component: "tabs", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "computed styles are the same without scripts; keep one run");
-    await openSpec(page, "#c-tabs");
+    await openSpec(page, "components/tabs/#c-tabs");
     const live = page.locator('#tabs-states [data-state="default"]').first();
     const selected = live.locator('[role="tab"][aria-selected="true"]');
     const rest = live.locator('[role="tab"][aria-selected="false"]').first();
@@ -55,7 +55,7 @@ test.describe("tabs", () => {
 
   test("roving tabindex: exactly one tab is in the tab order and it is the selected one", verification({component: "tabs", category: "structure", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "narrow", "zoom200"), "one walk is enough");
-    await openSpec(page, "#c-tabs");
+    await openSpec(page, "components/tabs/#c-tabs");
     const live = page.locator('#tabs-states [data-state="default"]').first();
     await expect(live.locator('[role="tab"][tabindex="0"]')).toHaveCount(1);
     await expect(live.locator('[role="tab"][tabindex="0"]')).toHaveAttribute("aria-selected", "true");
diff --git a/tests/browser/components/text-field.spec.js b/tests/browser/components/text-field.spec.js
index 7f94bed1b..7e1db1aca 100644
--- a/tests/browser/components/text-field.spec.js
+++ b/tests/browser/components/text-field.spec.js
@@ -8,7 +8,7 @@ const spec = JSON.parse(await fs.readFile(new URL("../../../exports/components/t
 
 test.describe("text-field", () => {
   test("the state matrix renders every declared state for every variant", verification({component: "text-field", category: "rendering", states: ["default", "hover", "focus-visible", "placeholder-shown", "filled", "required", "invalid", "invalid+focus-visible", "invalid+hover", "disabled", "disabled+filled", "read-only", "read-only+focus-visible", "loading"], variants: ["default", "password", "search", "number", "affix"], note: "Presence and selected structural assertions only; not behavioral verification of every state."}), async ({ page }) => {
-    await openSpec(page, "#c-text-field");
+    await openSpec(page, "components/text-field/#c-text-field");
     for (const state of spec.states) {
       const cells = page.locator(`#text-field-states [data-state="${state}"]`);
       await expect(cells).toHaveCount(spec.variants.length);
@@ -21,7 +21,7 @@ test.describe("text-field", () => {
 
   test("the live control honours the focus, invalid, disabled and read-only rules", verification({component: "text-field", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs"), "computed styles are the same without scripts; keep one run");
-    await openSpec(page, "#c-text-field");
+    await openSpec(page, "components/text-field/#c-text-field");
     const live = page.locator('#text-field-states [data-state="default"]').first();
     const input = live.locator("input");
     const root = live.locator(".text-field-root");
@@ -89,7 +89,7 @@ test.describe("text-field", () => {
 
   test("keyboard: Tab reaches the input, then the trailing action", verification({component: "text-field", category: "keyboard", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(only(testInfo, "nojs", "narrow", "zoom200"), "one keyboard walk");
-    await openSpec(page, "#c-text-field");
+    await openSpec(page, "components/text-field/#c-text-field");
     const cell = page.locator('#text-field-states [data-state="default"][data-state-default]').nth(1);
     const input = cell.locator("input");
     await input.focus();
diff --git a/tests/browser/demo-calendar.spec.js b/tests/browser/demo-calendar.spec.js
new file mode 100644
index 000000000..921a23c97
--- /dev/null
+++ b/tests/browser/demo-calendar.spec.js
@@ -0,0 +1,82 @@
+import { test, expect } from "./evidence-fixture.mjs";
+import { verification } from "./verification.mjs";
+import { openSpec, only } from "./helpers.mjs";
+
+const scope = note => verification({ component: "toast", category: "enhancements", states: ["default", "hover", "focus-visible"], variants: ["with-action"], note });
+
+test("calendar: remove and undo restore each event and its day", scope("Vue demo deletion through canonical destructive buttons and Undo toast; multiple removals restore in reverse order. Synthetic in-memory data only."), async ({ page }, testInfo) => {
+  test.skip(only(testInfo, "nojs"), "The Vue demo requires JavaScript; static component matrices are checked separately.");
+  const audit = await openSpec(page, "demo/#/apps/calendar");
+  const removeDesign = page.getByRole("button", { name: "Remove event: Design review", exact: true });
+  await removeDesign.focus();
+  await page.keyboard.press("Enter");
+  await expect(removeDesign).toHaveCount(0);
+  const notice = page.locator(".calendar-notifications");
+  await expect(notice.locator(".toast-text")).toHaveText("Design review removed.");
+  await expect(page.getByRole("button", { name: "Add event", exact: true })).toBeFocused();
+  await page.getByRole("button", { name: "Remove event: Component workshop", exact: true }).click();
+  await expect(notice.locator(".toast-text")).toHaveText("Component workshop removed.");
+  await notice.getByRole("button", { name: "Undo", exact: true }).click();
+  const component = page.locator(".calendar-day").filter({ has: page.getByRole("button", { name: "Remove event: Component workshop", exact: true }) });
+  await expect(component.locator("strong")).toHaveText("14");
+  await expect(page.getByRole("button", { name: "Remove event: Component workshop", exact: true })).toBeFocused();
+  await page.getByRole("button", { name: "Undo removal of Design review", exact: true }).click();
+  await expect(page.locator(".calendar-event")).toHaveCount(3);
+  await expect(page.locator(".calendar-day").filter({ has: removeDesign }).locator("strong")).toHaveText("08");
+  await expect(removeDesign).toBeFocused();
+  await expect(notice).toHaveCount(0);
+  audit.assertClean();
+});
+
+test("calendar: Undo survives timeout, hover, focus and dismissal", scope("Twelve-second action toast pauses on pointer hover and keyboard focus; F6 reaches it, Escape and Dismiss return focus, and an independent Undo remains after closing. Clock-controlled automated checks only."), async ({ page }, testInfo) => {
+  test.skip(only(testInfo, "nojs"), "The Vue demo requires JavaScript; static component matrices are checked separately.");
+  await openSpec(page, "demo/#/apps/calendar");
+  await page.clock.install();
+  await page.getByRole("button", { name: "Remove event: Design review", exact: true }).click();
+  const notice = page.locator(".calendar-notifications");
+  const persistentUndo = page.getByRole("button", { name: "Undo removal of Design review", exact: true });
+  await page.clock.runFor(8000);
+  await expect(notice).toBeVisible();
+  await notice.hover();
+  await page.clock.runFor(20000);
+  await expect(notice).toBeVisible();
+  await page.keyboard.press("F6");
+  await expect(notice.getByRole("button", { name: "Undo", exact: true })).toBeFocused();
+  await page.mouse.move(0, 0);
+  await page.clock.runFor(20000);
+  await expect(notice).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(notice).toHaveCount(0);
+  await expect(persistentUndo).toBeFocused();
+  await persistentUndo.click();
+  await page.getByRole("button", { name: "Remove event: Design review", exact: true }).click();
+  await page.mouse.move(0, 0);
+  await page.clock.runFor(12000);
+  await expect(notice).toHaveCount(0);
+  await expect(persistentUndo).toBeVisible();
+  await persistentUndo.click();
+  await page.getByRole("button", { name: "Remove event: Design review", exact: true }).click();
+  await notice.getByRole("button", { name: "Dismiss", exact: true }).click();
+  await expect(notice).toHaveCount(0);
+  await expect(persistentUndo).toBeFocused();
+  await persistentUndo.click();
+  await expect(page.locator(".calendar-event")).toHaveCount(3);
+});
+
+test("calendar: adding an event while another is removed preserves both identities", scope("Restore the removed maximum event id after adding a new event; reset clears undo history and timers. Synthetic local identities and data only."), async ({ page }, testInfo) => {
+  test.skip(only(testInfo, "nojs"), "The Vue demo requires JavaScript; static component matrices are checked separately.");
+  await openSpec(page, "demo/#/apps/calendar");
+  await page.getByRole("button", { name: "Remove event: Release rehearsal", exact: true }).click();
+  await page.getByLabel("Event title").fill("Follow-up");
+  await page.getByLabel("Day", { exact: false }).fill("24");
+  await page.getByRole("button", { name: "Add event", exact: true }).click();
+  await page.getByRole("button", { name: "Undo removal of Release rehearsal", exact: true }).click();
+  await expect(page.locator(".calendar-event")).toHaveCount(4);
+  const ids = await page.locator(".calendar-event").evaluateAll(rows => rows.map(row => row.dataset.eventId));
+  expect(new Set(ids).size).toBe(4);
+  await page.getByRole("button", { name: "Remove event: Follow-up", exact: true }).click();
+  await page.getByRole("button", { name: "Reset demo ↻" }).click();
+  await expect(page.locator(".calendar-event")).toHaveCount(3);
+  await expect(page.locator(".calendar-notifications")).toHaveCount(0);
+  await expect(page.getByRole("button", { name: /^Undo removal/ })).toHaveCount(0);
+});
diff --git a/tests/browser/eligibility.spec.js b/tests/browser/eligibility.spec.js
index e33b2cfb0..a0ce74c62 100644
--- a/tests/browser/eligibility.spec.js
+++ b/tests/browser/eligibility.spec.js
@@ -6,11 +6,13 @@ test("profile columns and pending decision links agree with consumption policy",
   await openSpec(page);
   await expect(page.locator("#consumption-policy")).toContainText("use-and-report");
   await expect(page.locator("#consumption-policy")).not.toContainText("Pre-release");
-  const cells = page.locator("#t-color-border-control td");
-  await expect(cells.nth(1)).toContainText("use-and-report");
-  await expect(cells.nth(2)).toContainText("historical-only");
-  await expect(cells.nth(3)).toContainText("blocked");
-  const link = cells.nth(1).getByRole("link", { name: "D-007" });
-  await expect(link).toHaveAttribute("href", "#d-decisions--d-007");
+  const row = page.locator("#t-color-border-control");
+  await expect(row).toContainText("use-and-report");
+  const link = row.getByRole("link", { name: "D-007" });
+  await expect(link).toHaveAttribute("href", "/theme/reference/decisions/#d-decisions--d-007");
   await expect(page.locator("#d-decisions--d-007")).toHaveCount(1);
+  await page.goto("tokens/");
+  for (const [profile, eligibility] of [["default", "use-and-report"], ["heritage-ansi", "historical-only"], ["extended", "blocked"]]) {
+    await expect(page.locator(`[data-usage-profile="${profile}"] [data-usage-path="color.border.control"]`)).toContainText(eligibility);
+  }
 });
diff --git a/tests/browser/helpers.mjs b/tests/browser/helpers.mjs
index ca42b076a..d015dfcaf 100644
--- a/tests/browser/helpers.mjs
+++ b/tests/browser/helpers.mjs
@@ -5,7 +5,8 @@
 import { expect } from "@playwright/test";
 
 export const openSpec = async (page, path = "reference/") => {
-  if (!path || path.startsWith("#")) path = `reference/${path}`;
+  if (path.startsWith("#c-")) path = `components/${path.slice(3)}/${path}`;
+  else if (!path || path.startsWith("#")) path = `reference/${path}`;
   const bad = [];
   page.on("response", (response) => {
     const url = new URL(response.url());
diff --git a/tests/browser/hex-swatches.spec.js b/tests/browser/hex-swatches.spec.js
index ccdaf31c5..197abc55e 100644
--- a/tests/browser/hex-swatches.spec.js
+++ b/tests/browser/hex-swatches.spec.js
@@ -53,7 +53,7 @@ test.describe("actual pointer input without reported hover capability", () => {
 });
 
 test("hex previews preserve exact colors, copy text and the no-JS baseline", verification({component: "page", category: "appearance", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }) => {
-  await openSpec(page);
+  await openSpec(page, "reference/decisions/");
   const swatch = page.locator('.hex-swatch[data-hex="#ff0000"]').first();
   await expect(swatch).toHaveCount(1);
   const values = await swatch.evaluate((el) => {
@@ -77,7 +77,7 @@ test("hex previews preserve exact colors, copy text and the no-JS baseline", ver
 
 test("hover grows visually by 1.4px without reflow", verification({component: "page", category: "motion", states: [], variants: [], note: "Pointer hover: exact circle-to-square scale, fast duration and unchanged adjacent geometry."}), async ({ page }, testInfo) => {
   test.skip(!only(testInfo, "desktop"), "one hover-capable layout");
-  await openSpec(page);
+  await openSpec(page, "reference/decisions/");
   const swatch = page.locator('.hex-swatch[data-hex="#ff0000"]').first();
   await swatch.scrollIntoViewIfNeeded();
   const geometry = () => swatch.locator("..").evaluate((el) => { const { x, y, width, height } = el.getBoundingClientRect(); return { x, y, width, height }; });
@@ -93,7 +93,7 @@ test("hover grows visually by 1.4px without reflow", verification({component: "p
 test("reduced-motion previews change instantly", verification({ component: "page", category: "motion", states: [], variants: [], note: "Reduced-motion media enabled before loading; hover enlargement has no transition." }), async ({ page }, testInfo) => {
   test.skip(!only(testInfo, "desktop"), "one reduced-motion preview check");
   await page.emulateMedia({ reducedMotion: "reduce" });
-  await openSpec(page);
+  await openSpec(page, "reference/decisions/");
   const swatch = page.locator('.hex-swatch[data-hex="#ff0000"]').first();
   expect(await swatch.evaluate((el) => getComputedStyle(el).transitionDuration)).toBe("0s");
   await swatch.hover();
@@ -103,7 +103,7 @@ test("reduced-motion previews change instantly", verification({ component: "page
 test("forced-colors previews preserve literal color data", verification({ component: "page", category: "appearance", states: [], variants: [], note: "Forced-colors media enabled before loading; the decorative preview retains its exact fill." }), async ({ page }, testInfo) => {
   test.skip(!only(testInfo, "desktop"), "one forced-colors preview check");
   await page.emulateMedia({ forcedColors: "active" });
-  await openSpec(page);
+  await openSpec(page, "reference/decisions/");
   const swatch = page.locator('.hex-swatch[data-hex="#ff0000"]').first();
   expect(await swatch.evaluate((el) => getComputedStyle(el).forcedColorAdjust)).toBe("none");
   expect(await swatch.evaluate((el) => getComputedStyle(el, "::after").backgroundColor)).toBe("rgb(255, 0, 0)");
@@ -112,7 +112,7 @@ test("forced-colors previews preserve literal color data", verification({ compon
 test("printed previews request exact colors", verification({ component: "page", category: "print", states: [], variants: [], note: "Print media enabled before loading; previews request exact color preservation." }), async ({ page }, testInfo) => {
   test.skip(!only(testInfo, "desktop"), "one print preview check");
   await page.emulateMedia({ media: "print" });
-  await openSpec(page);
+  await openSpec(page, "reference/decisions/");
   const swatch = page.locator('.hex-swatch[data-hex="#ff0000"]').first();
   expect(await swatch.evaluate((el) => getComputedStyle(el).printColorAdjust)).toBe("exact");
 });
@@ -146,12 +146,13 @@ test("inspector restores token focus established before its script loads", verif
 test("inspector uses generated previews and retains all token matches without new tab stops", verification({component: "page", category: "enhancements", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
   test.skip(!only(testInfo, "desktop"), "one enhanced inspector");
   await openSpec(page);
-  await page.locator('[data-token="color.interaction.focus.ring"]').first().focus();
+  await page.locator('a[data-token="color.interaction.focus.ring"]').first().focus();
   await expect(page.locator("#inspector .hex-swatch")).not.toHaveCount(0);
   expect(await page.locator("#inspector .hex-swatch[tabindex]").count()).toBe(0);
   await page.keyboard.press("Escape");
   const swatch = page.locator('.hex-swatch[data-hex="#e53935"][data-token-matches]').first();
-  const matches = await swatch.evaluate((el) => JSON.parse(document.getElementById("j3w1-tokens").textContent).colorIndex[el.getAttribute("data-token-matches")]);
+  const data = await (await page.request.get("tokens/inspector.json")).json();
+  const matches = data.colorIndex[await swatch.getAttribute("data-token-matches")];
   expect(matches.length).toBeGreaterThan(1);
   await swatch.hover();
   await expect(page.locator("#hex-popup")).toContainText("equality does not assign a role");
@@ -196,7 +197,7 @@ test("color popup follows only its circle and revalidates stationary hover on sc
   await swatch.hover();
   await page.keyboard.press("Escape");
   await expect(popup).toBeHidden();
-  await page.locator('[data-token="color.interaction.focus.ring"]').first().focus();
+  await page.locator('a[data-token="color.interaction.focus.ring"]').first().focus();
   await expect(page.locator("#inspector")).toBeVisible();
   await page.keyboard.press("Escape");
   await expect(page.locator("#inspector")).toBeHidden();
diff --git a/tests/browser/page.spec.js b/tests/browser/page.spec.js
index 72250724c..5e70d568f 100644
--- a/tests/browser/page.spec.js
+++ b/tests/browser/page.spec.js
@@ -6,6 +6,9 @@ import { promises as fs } from "node:fs";
 import { openSpec, only, rgbToHex } from "./helpers.mjs";
 
 
+const referenceInventory = JSON.parse(await fs.readFile("spec/inventory.json", "utf8"));
+const referenceRoutes = ["reference/", ...referenceInventory.components.map(({ id }) => `components/${id}/`), "reference/contrast/", "reference/decisions/", "reference/fixtures/", "tokens/"];
+
 /* The page's own selects are themed, so the native control is hidden and the
    visible combobox is what a reader operates. Driven by keyboard: it is a real
    user path, and it does not depend on a control handle staying valid across
@@ -64,7 +67,7 @@ test.describe("the specification page", () => {
     await expect(page.locator('#family-filter input[name="family"]').first()).toBeFocused();
   });
 
-  /* One scan of the page, split in two so the halves run in parallel (D-031):
+  /* Scan every page that now holds the former reference, split in two (D-031):
      color contrast, which is most of the time, and every other rule. The
      rule set is read from a tag-based run, so the two halves together are
      exactly the rules the tags select; nothing is dropped or added. */
@@ -77,56 +80,66 @@ test.describe("the specification page", () => {
     return [...new Set([...r.passes, ...r.violations, ...r.incomplete, ...r.inapplicable].map((x) => x.id))].sort();
   };
   for (const [part, pick] of [["color contrast", (id) => id === "color-contrast"], ["every other rule", (id) => id !== "color-contrast"]]) {
-    test(`axe finds no WCAG 2.x A/AA violations, ${part} (a scan, not a conformance claim)`, verification({component: "page", category: "axe", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
+    test(`axe finds no WCAG 2.x A/AA violations, ${part} (a scan, not a conformance claim)`, verification({component: "page", category: "axe", states: [], variants: [], note: "Hub, all component detail pages, contrast, decisions, fixtures and every token-profile table. Same WCAG tags and inert-clone exclusion as the former long page; live variants also scanned. Automated Chromium only, no conformance claim."}), async ({ page }, testInfo) => {
       test.skip(!only(testInfo, "desktop"), "one scan is enough");
       test.setTimeout(600_000);
       await openSpec(page);
       const all = await tagRules(page);
       expect(all).toContain("color-contrast");
       const rules = all.filter(pick);
-      /* Non-default matrix cells are aria-hidden inert clones of the default
-         cell; scanning every one of them multiplies the run time by the number
-         of states without adding findings. The live cells are scanned. */
-      const results = await new AxeBuilder({ page }).withRules(rules).exclude('.matrix [aria-hidden="true"]').analyze();
-      const ran = new Set([...results.passes, ...results.violations, ...results.incomplete, ...results.inapplicable].map((x) => x.id));
-      expect([...ran].sort()).toEqual(rules);
       await fs.mkdir("test-results", { recursive: true });
-      await fs.writeFile(`test-results/axe-${part.replace(/ /g, "-")}.json`, JSON.stringify(results, null, 2));
-      expect(results.violations.map((v) => `${v.id}: ${v.nodes.length} × ${v.help}`)).toEqual([]);
+      for (const route of referenceRoutes) {
+        if (route !== "reference/") await page.goto(route, { waitUntil: "networkidle" });
+        // The former reference displayed every profile together. Scan all of
+        // those static tables, including the profiles the explorer filters.
+        if (route === "tokens/") await page.locator("[data-usage-profile]").evaluateAll((sections) => sections.forEach((section) => { section.hidden = false; }));
+        /* Preserve the original exclusion: non-default state clones are
+           aria-hidden; every live cell and all normative text are scanned. */
+        const results = await new AxeBuilder({ page }).withRules(rules).exclude('.matrix [aria-hidden="true"]').analyze();
+        const ran = new Set([...results.passes, ...results.violations, ...results.incomplete, ...results.inapplicable].map((x) => x.id));
+        expect([...ran].sort(), route).toEqual(rules);
+        const suffix = route === "reference/" ? "" : `-${route.replace(/[^a-z0-9]+/g, "-")}`;
+        await fs.writeFile(`test-results/axe-${part.replace(/ /g, "-")}${suffix}.json`, JSON.stringify(results, null, 2));
+        expect(results.violations.map((v) => `${v.id}: ${v.nodes.length} × ${v.help}`), route).toEqual([]);
+      }
     });
   }
 
   test("reflow: no horizontal page scroll at 360px and at 200% text zoom", verification({component: "page", category: "reflow", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(!only(testInfo, "narrow", "zoom200"), "reflow projects only");
+    test.setTimeout(180_000); // Complete the split reference; each navigation retains its own timeout.
     await openSpec(page);
-    const overflow = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
-    expect(overflow).toBeLessThanOrEqual(0);
-    await page.evaluate(() => {
-      document.documentElement.style.fontSize = "200%";
-    });
-    await page.waitForTimeout(50);
-    const zoomed = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
-    expect(zoomed).toBeLessThanOrEqual(0);
+    for (const route of referenceRoutes) {
+      if (route !== "reference/") await page.goto(route, { waitUntil: "networkidle" });
+      const overflow = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+      expect(overflow, route).toBeLessThanOrEqual(0);
+      await page.evaluate(() => { document.documentElement.style.fontSize = "200%"; });
+      await page.waitForTimeout(50);
+      const zoomed = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+      expect(zoomed, route).toBeLessThanOrEqual(0);
+    }
   });
 
   test("reduced motion: every transition and animation is effectively instant", verification({component: "page", category: "motion", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(!only(testInfo, "desktop"), "one check is enough");
     await page.emulateMedia({ reducedMotion: "reduce" });
+    test.setTimeout(180_000); // Every moved component and document is still covered.
     await openSpec(page);
-    const slow = await page.evaluate(() =>
-      [...document.querySelectorAll("main *")]
-        .map((el) => getComputedStyle(el))
-        .filter((s) => s.transitionDuration.split(",").some((d) => parseFloat(d) > 0.01) || s.animationDuration.split(",").some((d) => parseFloat(d) > 0.01))
-        .length,
-    );
-    expect(slow).toBe(0);
+    for (const route of referenceRoutes) {
+      if (route !== "reference/") await page.goto(route, { waitUntil: "networkidle" });
+      const slow = await page.evaluate(() =>
+        [...document.querySelectorAll("main *")]
+          .map((el) => getComputedStyle(el))
+          .filter((s) => s.transitionDuration.split(",").some((d) => parseFloat(d) > 0.01) || s.animationDuration.split(",").some((d) => parseFloat(d) > 0.01))
+          .length,
+      );
+      expect(slow, route).toBe(0);
+    }
   });
 
   test("enhancements: search narrows the contents, family filter hides sections, density and profile persist, reset clears", verification({component: "page", category: "enhancements", states: [], variants: [], note: "Only the assertions in this named test; no comprehensive state or variant coverage claim. Profile and density record the initial configuration; any switches are described by the test."}), async ({ page }, testInfo) => {
     test.skip(!only(testInfo, "desktop"), "scripts on desktop");
-    /* Two themed comboboxes and a reload of a 4.4MB page do not fit the default
-       budget; the axe scan raises its own for the same reason. No assertion is
-       relaxed. */
+    /* Exercise both themed specimen controls, persistence and a reload. */
     test.setTimeout(120_000);
     const context = page.context();
     await context.grantPermissions(["clipboard-read", "clipboard-write"]);
@@ -137,12 +150,19 @@ test.describe("the specification page", () => {
        Compact is the default now, so comfortable is the choice that proves the
        setting persists. */
     await expect(page.locator("#controls .j3w1-choice-trigger").first()).toBeVisible({ timeout: 30_000 });
+    /* The saved density must reach the specimens, not only a marker: the
+       specimen subtree takes data-density and its density variables follow. */
+    const specimenDensity = async () => page.locator(".ladder").first().evaluate((el) => [el.getAttribute("data-density"), getComputedStyle(el).getPropertyValue("--density-control-height").trim()]);
     await chooseThemed(page, "density", "comfortable");
-    await expect(page.locator("html")).toHaveAttribute("data-density", "comfortable");
+    await expect(page.locator("html")).toHaveAttribute("data-demo-density", "comfortable");
+    await expect(page.locator("html")).toHaveAttribute("data-density", "compact");
+    expect(await specimenDensity()).toEqual(["comfortable", "32px"]);
     await chooseThemed(page, "profile", "heritage-ansi");
     await expect(page.locator(".ladder").first()).toHaveAttribute("data-profile", "heritage-ansi");
     await page.reload({ waitUntil: "networkidle" });
-    await expect(page.locator("html")).toHaveAttribute("data-density", "comfortable");
+    await expect(page.locator("html")).toHaveAttribute("data-demo-density", "comfortable");
+    await expect(page.locator("html")).toHaveAttribute("data-density", "compact");
+    await expect.poll(specimenDensity).toEqual(["comfortable", "32px"]);
     const keys = await page.evaluate(() => Object.keys(localStorage));
     expect(keys.every((k) => k.startsWith("j3w1-theme:"))).toBe(true);
     await page.locator("#search").fill("focus ring");
@@ -156,6 +176,7 @@ test.describe("the specification page", () => {
     expect(new URL(page.url()).search).toBe("");
     /* Back to the page's default, which is compact. */
     await expect(page.locator("html")).toHaveAttribute("data-density", "compact");
+    expect(await specimenDensity()).toEqual(["compact", "24px"]);
     await expect(firstFamily).toBeChecked();
     const copy = page.locator("button[data-copy]").first();
     await copy.click();
diff --git a/tests/browser/portal.spec.js b/tests/browser/portal.spec.js
index 1c3b46787..4f759bd40 100644
--- a/tests/browser/portal.spec.js
+++ b/tests/browser/portal.spec.js
@@ -27,7 +27,7 @@ test("portal retains specification content and opens its compact command utility
 test("legacy homepage hashes migrate to the complete reference", { annotation }, async ({ page }, info) => {
   test.skip(info.project.name === "nojs", "No-JS readers use the static full-reference link; automatic hash migration requires JavaScript.");
   await page.goto("./#c-dialog");
-  await expect(page).toHaveURL(/\/reference\/#c-dialog$/);
+  await expect(page).toHaveURL(/\/components\/dialog\/#c-dialog$/);
   await expect(page.locator("#c-dialog")).toBeVisible();
 });
 
@@ -166,3 +166,20 @@ test('themed task choices move the card and retain keyboard focus', {annotation}
   await expect(page.getByRole('option',{name:'Review',exact:true})).toHaveAttribute('aria-selected','true');
   await page.keyboard.press('Escape');audit.assertClean();
 });
+
+test("a copy button returns to its own label after quick repeated copies (R-g)", { annotation }, async ({ page }, info) => {
+  test.skip(info.project.name !== "desktop", "Clipboard permissions are granted in one configuration.");
+  await page.context().grantPermissions(["clipboard-read", "clipboard-write"]);
+  await page.clock.install();
+  await openSpec(page, "components/button/");
+  const copy = page.locator("main [data-copy]").first();
+  await expect(copy).toHaveText("Copy markup");
+  await copy.click();
+  await expect(copy).toHaveText("copied");
+  await page.clock.runFor(500);
+  await copy.click();
+  await expect(copy).toHaveText("copied");
+  /* Both resets have run; the second click must not have saved "copied" as the label. */
+  await page.clock.runFor(3000);
+  await expect(copy).toHaveText("Copy markup");
+});
diff --git a/tests/browser/ports.spec.js b/tests/browser/ports.spec.js
index e23c6b3e3..3b53c8016 100644
--- a/tests/browser/ports.spec.js
+++ b/tests/browser/ports.spec.js
@@ -1,12 +1,11 @@
 import { test, expect } from "./evidence-fixture.mjs";
 import { verification } from "./verification.mjs";
 import AxeBuilder from "@axe-core/playwright";
-import { createHash } from "node:crypto";
 import { renderPortCatalogue } from "../../scripts/lib/port-presentation.mjs";
 import { describePort } from "../../scripts/lib/port-capabilities.mjs";
 import { fixture } from "../fixtures/port-capabilities.mjs";
+import { sha256 } from "../../scripts/lib/fs.mjs";
 const { annotation } = verification({ component: "page", category: "enhancements", states: [], variants: [], note: "Real port catalogue, static JSON, served port files and their download links, navigation, narrow/no-JS access. A served file is not an import; synthetic state/evidence coverage is in source tests, not a real import claim." });
-const sha256 = (bytes) => "sha256-" + createHash("sha256").update(bytes).digest("base64");
 test("port explorer lists every published port with a working download and the contribution route", { annotation }, async ({ page }) => {
   await page.goto("ports/");
   const { ports } = await (await page.request.get("exports/port-capabilities.json")).json();
@@ -56,12 +55,12 @@ test("port explorer navigation is keyboard accessible with no axe violations", {
 test("synthetic mapping states use the real renderer and keyboard search without publishing a port", verification({ component: "page", category: "enhancements", states: [], variants: [], note: "Request-intercepted, explicitly synthetic port data exercises the real static renderer, mapping classifications, search/reset and no-JS. Never a real port or import result." }), async ({ page }, info) => {
   const port = describePort(fixture());
   const rendered = renderPortCatalogue({ ports: [port] }, { revision: "a".repeat(40) });
-  await page.route("**/theme/ports/", async route => {
+  await page.route("**/theme/ports/ghostty/", async route => {
     const response = await route.fetch();
     const html = await response.text();
     await route.fulfill({ response, body: html.replace(/<div data-port-content[^>]*>[\s\S]*<\/section><\/div>/, `<div data-port-content>${rendered}</div>`) });
   });
-  await page.goto("ports/");
+  await page.goto("ports/ghostty/");
   await expect(page.getByRole("heading", { name: "Synthetic test only" })).toBeVisible();
   await expect(page.locator("[data-port-row]")).toHaveCount(5);
   for (const state of ["mapped", "inherited", "unsupported", "out-of-scope", "not-implemented"]) await expect(page.locator("[data-port-row]").filter({ has: page.getByRole("cell", { name: state, exact: true }) })).toHaveCount(1);
@@ -80,3 +79,22 @@ test("synthetic mapping states use the real renderer and keyboard search without
   }
   expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
 });
+
+
+test("each port has its complete static mapping page and the summary searches native keys", { annotation }, async ({ page }, info) => {
+  const { ports } = await (await page.request.get("exports/port-capabilities.json")).json();
+  for (const port of ports) {
+    await page.goto(`ports/${port.id}/`);
+    await expect(page.locator("[data-port-entry]")).toHaveCount(1);
+    await expect(page.locator("[data-port-row]")).toHaveCount(port.mappings.length);
+    await expect(page.getByRole("link", { name: "All ports", exact: true })).toBeVisible();
+  }
+  await page.goto("ports/");
+  await expect(page.locator("[data-port-row]")).toHaveCount(0);
+  if (info.project.name === "nojs") return;
+  const port = ports.find((port) => port.mappings.some((mapping) => mapping.nativeKeys.length));
+  const native = port.mappings.find((mapping) => mapping.nativeKeys.length).nativeKeys[0];
+  await page.getByRole("searchbox", { name: "Search ports, roles and native keys" }).fill(native);
+  await expect(page.locator("[data-port-entry]:visible")).not.toHaveCount(0);
+  await expect(page.locator("[data-port-count]")).toContainText("ports shown");
+});
diff --git a/tests/browser/recipes.spec.js b/tests/browser/recipes.spec.js
index bd406be3f..ea46ec2f4 100644
--- a/tests/browser/recipes.spec.js
+++ b/tests/browser/recipes.spec.js
@@ -10,10 +10,9 @@ const appearance = (locator) => locator.evaluate((el) => {
 
 test("standalone recipes match canonical defaults and stay inside their style scope", { annotation }, async ({ page }, testInfo) => {
   test.skip(testInfo.project.name !== "desktop", "Canonical computed-style comparison uses one identical browser configuration.");
-  await page.goto("reference/", { waitUntil: "networkidle" });
-  await page.evaluate(() => document.documentElement.dataset.density = "comfortable");
   const canonical = {};
   for (const [id, parts] of Object.entries(selectors)) {
+    await page.goto(`components/${id}/`, { waitUntil: "networkidle" });
     canonical[id] = {};
     for (const part of parts) canonical[id][part] = await appearance(page.locator(`#${id}-states [data-state="default"]`).first().locator(part).first());
   }
diff --git a/tests/browser/reference-hub.spec.js b/tests/browser/reference-hub.spec.js
new file mode 100644
index 000000000..fa2ff9e17
--- /dev/null
+++ b/tests/browser/reference-hub.spec.js
@@ -0,0 +1,82 @@
+import { test, expect } from "./evidence-fixture.mjs";
+import { verification } from "./verification.mjs";
+const scope = verification({ component: "page", category: "enhancements", states: [], variants: [], note: "Static hub/detail navigation, legacy anchors, search/family intersection, request retry and native keyboard token information. Automated Chromium only; no manual accessibility claim." });
+
+test("legacy component heading links are static and jump to their detail with scripts", scope, async ({ page }, info) => {
+  const hash = "c-button--keyboard";
+  await page.goto(`reference/#${hash}`, { waitUntil: "networkidle" });
+  if (info.project.name === "nojs") {
+    await expect(page.locator(`#${hash}`)).toHaveAttribute("href", `/theme/components/button/#${hash}`);
+    await page.locator(`#${hash}`).click();
+  }
+  await expect(page).toHaveURL(new RegExp(`/components/button/#${hash}$`));
+  await expect(page.locator(`#${hash}`)).toBeVisible();
+  await expect(page.locator(".matrix")).toHaveCount(1);
+});
+
+test("family and text filters compose on both stubs and contents (R-e)", scope, async ({ page }, info) => {
+  test.skip(info.project.name !== "desktop", "One enhancement check.");
+  await page.goto("reference/");
+  await page.locator("#search").fill("textbox");
+  await expect(page.locator("#search-count")).toContainText("1 component");
+  const button = page.locator('[data-toc-component="button"]').locator("..");
+  await expect(button).toBeHidden();
+  await page.locator('#family-filter input[value="actions"]').uncheck();
+  await expect(button).toBeHidden();
+  await expect(page.locator('[data-toc-component="text-field"]').locator("..")).toBeVisible();
+  await page.locator('#family-filter input[value="forms-basic"]').uncheck();
+  await expect(page.locator("#search-count")).toContainText("0 components");
+  await page.locator("#search").fill("");
+  await expect(page.locator('[data-toc-component="text-field"]').locator("..")).toBeHidden();
+  await page.locator('#family-filter input[value="forms-basic"]').check();
+  await expect(page.locator('[data-toc-component="text-field"]').locator("..")).toBeVisible();
+});
+
+test("search retries an HTTP failure and shares its successful request with commands (R-f)", scope, async ({ page }, info) => {
+  test.skip(info.project.name !== "desktop", "One network lifecycle check.");
+  let attempts = 0;
+  await page.route("**/theme/search.json", async (route) => {
+    attempts++;
+    if (attempts === 1) await route.fulfill({ status: 503, body: "Unavailable" });
+    else await route.continue();
+  });
+  await page.goto("reference/");
+  await page.locator("#search").focus();
+  await expect(page.locator("#search-count")).toContainText("unavailable");
+  await page.locator("#search").fill("textbox");
+  await expect(page.locator("#search-count")).toContainText("1 component");
+  await page.getByRole("button", { name: "Search the design system", exact: true }).click();
+  await page.locator('.site-command [role="combobox"]').fill("text field");
+  await expect(page.locator('.site-command').getByRole('option')).toHaveCount(1);
+  expect(attempts).toBe(2);
+});
+
+test("inspector data is lazy and token information is keyboard reachable without prose stops (R-i)", scope, async ({ page }, info) => {
+  test.skip(info.project.name !== "desktop", "One keyboard/data lifecycle check.");
+  let requests = 0;
+  page.on("request", (request) => { if (request.url().endsWith("tokens/inspector.json")) requests++; });
+  await page.goto("reference/", { waitUntil: "networkidle" });
+  expect(requests).toBe(0);
+  await expect(page.locator("#j3w1-tokens")).toHaveCount(0);
+  await expect(page.locator(".spec-body code[data-token][tabindex], .doc code[data-token][tabindex]")).toHaveCount(0);
+  const link = page.locator('a[data-token="color.interaction.focus.ring"]').first();
+  await link.focus();
+  await expect(link).toBeFocused();
+  await expect(page.locator("#inspector")).toBeVisible();
+  await expect(page.locator("#inspector")).toContainText("--color-interaction-focus-ring");
+  expect(requests).toBe(1);
+  await page.keyboard.press("Escape");
+  await expect(page.locator("#inspector")).toBeHidden();
+});
+
+test("matrix forcing stays scoped and chrome stays compact when specimens change", scope, async ({ page }, info) => {
+  test.skip(info.project.name !== "desktop", "One style isolation check.");
+  await page.goto("components/button/");
+  const hover = page.locator('#button-states [data-state="hover"] .button').first();
+  const live = page.locator("j3w1-button .button").first();
+  await expect(hover).not.toHaveCSS("background-color", await live.evaluate((el) => getComputedStyle(el).backgroundColor));
+  await page.locator('#controls .j3w1-choice-trigger').first().click();
+  await page.locator('#controls [data-choice-value="comfortable"]').first().click();
+  await expect(page.locator("html")).toHaveAttribute("data-density", "compact");
+  await expect(page.locator("#button-states")).toHaveAttribute("data-density", "comfortable");
+});
diff --git a/tests/browser/spec-tables.spec.js b/tests/browser/spec-tables.spec.js
index c79ba9f2f..c08390c49 100644
--- a/tests/browser/spec-tables.spec.js
+++ b/tests/browser/spec-tables.spec.js
@@ -5,18 +5,18 @@ import { openSpec } from "./helpers.mjs";
 test("documentation tables keep readable columns and compact copy controls", verification({ component: "page", category: "reflow", states: [], variants: [], note: "Documentation table sizing, contained horizontal overflow and single-line controls; component specimen geometry is checked by its own tests." }), async ({ page }, testInfo) => {
   if (testInfo.project.name === "desktop") await page.setViewportSize({ width: 980, height: 1000 });
   await openSpec(page);
-  const border = page.locator("#t-color-border .profile-token-table");
+  const border = page.locator("#t-color-border .compact-token-table");
   const first = border.locator("tbody tr").first();
   const geometry = await first.evaluate((row) => {
     const cells = [...row.cells];
-    return { descriptionWidth: cells.at(-1).getBoundingClientRect().width, height: row.getBoundingClientRect().height,
-      descriptionWrap: getComputedStyle(cells.at(-1)).overflowWrap, fontSize: getComputedStyle(row.closest("table")).fontSize };
+    return { descriptionWidth: cells[1].getBoundingClientRect().width, height: row.getBoundingClientRect().height,
+      descriptionWrap: getComputedStyle(cells[1]).overflowWrap, fontSize: getComputedStyle(row.closest("table")).fontSize };
   });
   expect(geometry.descriptionWidth).toBeGreaterThanOrEqual(180);
   expect(geometry.height).toBeLessThanOrEqual(112);
   expect(geometry.descriptionWrap).toBe("normal");
   expect(geometry.fontSize).toBe("12px");
-  const broken = await page.locator(".spec-table th, .spec-table .copy-button").evaluateAll((nodes) => nodes.filter((el) => {
+  const broken = await page.locator(".spec-table th, .swatch-row .button").evaluateAll((nodes) => nodes.filter((el) => {
     if (!el.getClientRects().length || !/^\w+$/.test(el.textContent.trim())) return false;
     const range = document.createRange(); range.selectNodeContents(el);
     return range.getBoundingClientRect().height > parseFloat(getComputedStyle(el).lineHeight);
@@ -32,4 +32,13 @@ test("documentation tables keep readable columns and compact copy controls", ver
     expect(await region.evaluate((el) => el.scrollWidth <= el.clientWidth)).toBe(true);
     await page.locator("#t-color-border").screenshot({ path: "test-results/compact-border-table.png" });
   }
+  // Descriptions and the other profile values moved to the token explorer.
+  // Keep the original readable-description constraints at their new home.
+  await page.goto("tokens/", { waitUntil: "networkidle" });
+  const description = page.locator('[data-usage-profile="default"] [data-usage-path="color.border.active"]');
+  const usage = await description.evaluate((row) => ({ width: row.cells[3].getBoundingClientRect().width, height: row.getBoundingClientRect().height, wrap: getComputedStyle(row.cells[3]).overflowWrap }));
+  expect(usage.width).toBeGreaterThanOrEqual(180);
+  expect(usage.height).toBeLessThanOrEqual(112);
+  expect(usage.wrap).toBe("normal");
+
 });
diff --git a/tests/browser/usage.spec.js b/tests/browser/usage.spec.js
index 5ee2cf04c..6c2f9cfd2 100644
--- a/tests/browser/usage.spec.js
+++ b/tests/browser/usage.spec.js
@@ -51,7 +51,7 @@ test("token details are persistent, source-linked and readable without scripts",
   await expect(page.locator(".hex-swatch").first()).toBeVisible();
   const source = page.locator('.usage-source a[href*="spec/components/text-field.md"]').first();
   if (await source.count()) await expect(source).toHaveAttribute("href", /\/blob\/[a-f0-9]{40}\/spec\/components\/text-field\.md#L\d+$/);
-  else await expect(page.locator("header .stamp")).toContainText("Local build");
+  else await expect(page.locator("header .site-stamp")).toContainText("Local build");
   expect(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth)).toBe(false);
   if (testInfo.project.name === "desktop") {
     await page.context().grantPermissions(["clipboard-read", "clipboard-write"]);
diff --git a/tests/browser/workbench.spec.js b/tests/browser/workbench.spec.js
index cb8562d6b..4fc441d30 100644
--- a/tests/browser/workbench.spec.js
+++ b/tests/browser/workbench.spec.js
@@ -29,18 +29,18 @@ test("workbench uses real viewport widths and reports measured mismatches withou
   test.skip(info.project.name === "nojs", "Interactive enhancement.");
   const frame = await open(page, "button");
   await expect(frame.locator("[data-open-dialog]")).toBeHidden();
-  const withoutOverlay = await localBox(frame.locator(".button"));
+  const withoutOverlay = await localBox(frame.locator("[data-preview-root] .button"));
   await choice(page, "part", "root");
   await expect(page.locator("[data-measurements]")).toContainText("matches");
-  expect(await localBox(frame.locator(".button"))).toEqual(withoutOverlay);
+  expect(await localBox(frame.locator("[data-preview-root] .button"))).toEqual(withoutOverlay);
   await chooseOptions(page.locator("[data-width-preset]"), "320");
   await expect(page.locator("[data-viewport-report]")).toContainText("320 × 560");
-  const before = await localBox(frame.locator(".button"));
+  const before = await localBox(frame.locator("[data-preview-root] .button"));
   await expect(frame.locator("[data-part-overlay]")).toHaveCSS("pointer-events", "none");
-  await frame.locator(".button").click();
+  await frame.locator("[data-preview-root] .button").click();
   await expect(frame.locator("[data-preview-status]")).toContainText("Button activated");
-  expect(await localBox(frame.locator(".button"))).toEqual(before);
-  await frame.locator(".button").evaluate(el => el.style.paddingInlineStart = "37px");
+  expect(await localBox(frame.locator("[data-preview-root] .button"))).toEqual(before);
+  await frame.locator("[data-preview-root] .button").evaluate(el => el.style.paddingInlineStart = "37px");
   await expect(page.locator("[data-measurements]")).toContainText("37px — MISMATCH");
   await frame.locator("[data-preview-root]").evaluate(el => { const probe = document.createElement("div"); probe.style.width = "1700px"; probe.textContent = "Controlled overflow probe"; el.append(probe); window.dispatchEvent(new Event("resize")); });
   await expect(page.locator("[data-viewport-report]")).not.toContainText("Outer horizontal overflow: 0 px");
@@ -151,17 +151,17 @@ test("motion respects reduced preference and contrast results retain build conte
   await page.locator('[data-replay="slow"]').click();
   await expect(frame.locator("[data-preview-status]")).toContainText("one-quarter");
   await page.locator('[data-replay="stop"]').click();
-  await expect(frame.locator(".button")).not.toHaveAttribute("style", /transition-duration/);
+  await expect(frame.locator("[data-preview-root] .button")).not.toHaveAttribute("style", /transition-duration/);
   await page.locator('[data-replay="slow"]').click();
   await page.locator("[data-workbench]").evaluate(el => el.hidden = true);
-  await expect(frame.locator(".button")).not.toHaveAttribute("style", /transition-duration/);
+  await expect(frame.locator("[data-preview-root] .button")).not.toHaveAttribute("style", /transition-duration/);
   await page.locator("[data-workbench]").evaluate(el => el.hidden = false);
   await page.locator("[data-compare-reduced]").click();
   await expect(page.locator("[data-comparison-report]")).toContainText("Reduced motion is active");
   await page.emulateMedia({ reducedMotion: "reduce" });
   await page.locator('[data-replay="normal"]').click();
   await expect(frame.locator("[data-preview-status]")).toContainText("no playback");
-  await expect(frame.locator(".button")).toHaveCSS("transition-duration", "0s");
+  await expect(frame.locator("[data-preview-root] .button")).toHaveCSS("transition-duration", "0s");
 });
 
 test("viewport fixtures exercise all laboratory components and preserve the approved pressed border", { annotation }, async ({ page }, info) => {
@@ -185,7 +185,7 @@ test("viewport fixtures exercise all laboratory components and preserve the appr
   const frame = await open(page, "button");
   await choice(page, "state", "active");
   const expected = await page.locator("[data-workbench]").evaluate(el => { const d = JSON.parse(el.dataset.workbenchData); return d.tokens.default[d.contract.tokens["root.border-active"]].value.components.map(v => Math.round(v * 255)); });
-  await expect(frame.locator(".button")).toHaveCSS("border-top-color", `rgb(${expected.join(", ")})`);
+  await expect(frame.locator("[data-preview-root] .button")).toHaveCSS("border-top-color", `rgb(${expected.join(", ")})`);
 });
 
 test("workbench controls and report page have accessible labels and no axe violations", { annotation }, async ({ page }, info) => {
diff --git a/tests/chatgpt-port.test.js b/tests/chatgpt-port.test.js
index 99c2dd188..f3d47fcaf 100644
--- a/tests/chatgpt-port.test.js
+++ b/tests/chatgpt-port.test.js
@@ -1,8 +1,9 @@
+import { scratchDirSync } from "./helpers/scratch.mjs";
+import { defaultTokens } from "./helpers/tokens.mjs";
 import { test } from "node:test";
 import assert from "node:assert/strict";
 import { readFileSync } from "node:fs";
-import { mkdtempSync, mkdirSync, writeFileSync } from "node:fs";
-import os from "node:os";
+import { mkdirSync, writeFileSync } from "node:fs";
 import path from "node:path";
 import { assertSampleFormat, buildChatgptPresets, chatgptPortProblems, chatgptRoles, readSamples } from "../scripts/lib/chatgpt-port.mjs";
 import { parseCodexTheme, chatgptPresetsSchema, codexThemeSampleSchema, CODEX_THEME_PREFIX } from "../schemas/chatgpt.mjs";
@@ -10,11 +11,11 @@ import { parseCodexTheme, chatgptPresetsSchema, codexThemeSampleSchema, CODEX_TH
 const source = JSON.parse(readFileSync("ports/chatgpt/src/presets.json", "utf8"));
 const built = JSON.parse(readFileSync("ports/chatgpt/dist/presets.json", "utf8"));
 const manifest = JSON.parse(readFileSync("theme.json", "utf8"));
-const tokens = JSON.parse(readFileSync("exports/tokens.resolved.json", "utf8")).profiles.default.tokens;
+const tokens = await defaultTokens();
 const byId = Object.fromEntries(built.presets.map((p) => [p.id, p]));
 const setting = (id, name) => byId[id].settings.find((r) => r.setting === name);
 
-test("Signature: rose text.bright on true black, accent focus ring, contrast 46", () => {
+test("Signature: rose text.bright on true black, accent focus ring, contrast 46", (t) => {
   assert.equal(setting("signature", "Foreground").source, "color.text.bright");
   assert.equal(setting("signature", "Foreground").value, tokens["color.text.bright"].value.hex);
   assert.equal(setting("signature", "Background").value, tokens["color.surface.canvas"].value.hex);
@@ -23,7 +24,7 @@ test("Signature: rose text.bright on true black, accent focus ring, contrast 46"
   assert.equal(byId.signature.recommended, true);
 });
 
-test("Reading: the same with text.default and contrast 52", () => {
+test("Reading: the same with text.default and contrast 52", (t) => {
   assert.equal(setting("reading", "Foreground").source, "color.text.default");
   assert.equal(setting("reading", "Foreground").value, tokens["color.text.default"].value.hex);
   assert.equal(setting("reading", "Contrast").value, "52");
@@ -32,7 +33,7 @@ test("Reading: the same with text.default and contrast 52", () => {
   }
 });
 
-test("host calibration is exact and marked as calibration, not a theme role", () => {
+test("host calibration is exact and marked as calibration, not a theme role", (t) => {
   for (const id of ["signature", "reading"]) {
     for (const [name, value] of [["Mode", "Dark"], ["Theme", "ChatGPT"], ["Reduce motion", "System"], ["Separate light and dark", "Off"], ["Diff markers", "+/-"]]) {
       assert.deepEqual(setting(id, name), { setting: name, value, source: "calibration" });
@@ -42,7 +43,7 @@ test("host calibration is exact and marked as calibration, not a theme role", ()
   }
 });
 
-test("the presets are generated from the source, deterministically", () => {
+test("the presets are generated from the source, deterministically", (t) => {
   const exported = Object.fromEntries(Object.entries(tokens));
   const again = buildChatgptPresets(source, exported, manifest);
   assert.deepEqual(again, built);
@@ -50,7 +51,7 @@ test("the presets are generated from the source, deterministically", () => {
   assert.equal(setting("signature", "Opaque windows").source, "calibration", "the table sets what the import string sets");
 });
 
-test("the emitted strings match the strict schema exactly: a changed, missing or extra field is refused", () => {
+test("the emitted strings match the strict schema exactly: a changed, missing or extra field is refused", (t) => {
   const good = byId.signature.importString;
   assert.ok(good.startsWith(CODEX_THEME_PREFIX));
   const payload = parseCodexTheme(good);
@@ -63,7 +64,7 @@ test("the emitted strings match the strict schema exactly: a changed, missing or
   assert.throws(() => chatgptPresetsSchema.parse({ ...source, extra: true }));
 });
 
-test("the README shows exactly the generated tables and strings", () => {
+test("the README shows exactly the generated tables and strings", (t) => {
   const readme = readFileSync("ports/chatgpt/README.md", "utf8");
   for (const p of built.presets) {
     assert.ok(readme.includes(p.importString), `${p.id} import string`);
@@ -73,54 +74,54 @@ test("the README shows exactly the generated tables and strings", () => {
   assert.match(readme, /rollout/);
 });
 
-const sampleDir = (text) => {
-  const root = mkdtempSync(path.join(os.tmpdir(), "chatgpt-samples-"));
+const sampleDir = (t, text) => {
+  const root = scratchDirSync(t, "chatgpt-samples-");
   mkdirSync(path.join(root, "ports/chatgpt/evidence"), { recursive: true });
   writeFileSync(path.join(root, "ports/chatgpt/evidence/test-build.codex-theme.txt"), text);
   return root;
 };
 
-test("a recorded ChatGPT export with a different format stops generation; the same format passes", () => {
+test("a recorded ChatGPT export with a different format stops generation; the same format passes", (t) => {
   const exported = Object.fromEntries(Object.entries(tokens));
   const same = parseCodexTheme(byId.signature.importString);
   const sameText = `# build: 1.2026.270\n# date: 2026-09-26\n${CODEX_THEME_PREFIX}${JSON.stringify({ ...same, theme: { ...same.theme, accent: "#E53935" } })}\n`;
-  const ok = readSamples(sampleDir(sameText));
+  const ok = readSamples(sampleDir(t, sameText));
   assert.equal(ok.length, 1, "upper-case hex from ChatGPT is accepted in a sample");
   assert.doesNotThrow(() => buildChatgptPresets(source, exported, manifest, { samples: ok }));
   const changed = structuredClone(same);
   changed.theme.foreground = changed.theme.ink;
   delete changed.theme.ink;
   const renamed = `# build: 1.2026.300\n# date: 2026-10-20\n${CODEX_THEME_PREFIX}${JSON.stringify(changed)}\n`;
-  assert.throws(() => readSamples(sampleDir(renamed)), /test-build\.codex-theme\.txt: ChatGPT 1\.2026\.300 \(2026-10-20\) exports a theme format this port does not emit/);
+  assert.throws(() => readSamples(sampleDir(t, renamed)), /test-build\.codex-theme\.txt: ChatGPT 1\.2026\.300 \(2026-10-20\) exports a theme format this port does not emit/);
   assert.throws(() => assertSampleFormat(same, [{ build: "x", date: "2026-10-20", payload: { ...same, extra: 1 } }]), /different theme format/);
-  assert.throws(() => readSamples(sampleDir(`${CODEX_THEME_PREFIX}${JSON.stringify(same)}\n`)), /needs "# build:"/);
+  assert.throws(() => readSamples(sampleDir(t, `${CODEX_THEME_PREFIX}${JSON.stringify(same)}\n`)), /needs "# build:"/);
   assert.ok(codexThemeSampleSchema.safeParse({ ...same, theme: { ...same.theme, accent: "#E53935" } }).success);
 });
 
-test("a role of the wrong kind is refused, not emitted as nonsense", () => {
+test("a role of the wrong kind is refused, not emitted as nonsense", (t) => {
   const exported = Object.fromEntries(Object.entries(tokens));
   assert.throws(() => buildChatgptPresets({ ...source, shared: { ...source.shared, uiFontSize: "color.text.bright" } }, exported, manifest));
   assert.throws(() => buildChatgptPresets({ ...source, shared: { ...source.shared, accent: "font.size.reading" } }, exported, manifest));
 });
 
-test("two settings that share a role both stay mapped", () => {
+test("two settings that share a role both stay mapped", (t) => {
   const shared = { ...source, shared: { ...source.shared, semanticColors: { ...source.shared.semanticColors, skill: source.shared.accent } } };
   assert.deepEqual(chatgptRoles(shared)[source.shared.accent], ["Accent", "theme.accent", "theme.semanticColors.skill"]);
 });
 
-test("a byte-order mark and a bad date in a sample are handled plainly (review r4b)", () => {
+test("a byte-order mark and a bad date in a sample are handled plainly (review r4b)", (t) => {
   const same = parseCodexTheme(byId.signature.importString);
   const line = `${CODEX_THEME_PREFIX}${JSON.stringify(same)}`;
-  assert.equal(readSamples(sampleDir(`\uFEFF# build: b1\n# date: 2026-09-26\n${line}\n`)).length, 1);
-  assert.throws(() => readSamples(sampleDir(`# build: b1\n# date: 26/09/2026\n${line}\n`)), /yyyy-mm-dd/);
+  assert.equal(readSamples(sampleDir(t, `\uFEFF# build: b1\n# date: 2026-09-26\n${line}\n`)).length, 1);
+  assert.throws(() => readSamples(sampleDir(t, `# build: b1\n# date: 26/09/2026\n${line}\n`)), /yyyy-mm-dd/);
 });
 
-test("a sample whose code theme id differs from the source stops generation (review r4b)", () => {
+test("a sample whose code theme id differs from the source stops generation (review r4b)", (t) => {
   const same = parseCodexTheme(byId.signature.importString);
   assert.throws(() => assertSampleFormat(same, [{ build: "b1", date: "2026-09-26", payload: { ...same, codeThemeId: "codex" } }]), /codeThemeId "codex"/);
 });
 
-test("the port leaves experimental or names a tested build only with a recorded export per build (review r4b)", () => {
+test("the port leaves experimental or names a tested build only with a recorded export per build (review r4b)", (t) => {
   const port = JSON.parse(readFileSync("ports/chatgpt/port.json", "utf8"));
   const sample = { build: "1.2026.270", date: "2026-09-26" };
   assert.deepEqual(chatgptPortProblems(port, []), []);
@@ -129,6 +130,6 @@ test("the port leaves experimental or names a tested build only with a recorded
   assert.equal(chatgptPortProblems({ ...port, testedVersions: ["1.2026.300"] }, [sample]).length, 1);
 });
 
-test("a truncated paste is reported as unreadable, not as a new ChatGPT format (review r6)", () => {
-  assert.throws(() => readSamples(sampleDir(`# build: b1\n# date: 2026-09-26\n${CODEX_THEME_PREFIX}{"theme":\n`)), /is not a readable codex-theme-v1: string/);
+test("a truncated paste is reported as unreadable, not as a new ChatGPT format (review r6)", (t) => {
+  assert.throws(() => readSamples(sampleDir(t, `# build: b1\n# date: 2026-09-26\n${CODEX_THEME_PREFIX}{"theme":\n`)), /is not a readable codex-theme-v1: string/);
 });
diff --git a/tests/chrome-controls.test.js b/tests/chrome-controls.test.js
new file mode 100644
index 000000000..5daac3bee
--- /dev/null
+++ b/tests/chrome-controls.test.js
@@ -0,0 +1,134 @@
+/* One control language (docs/ui-architecture.md, "Site chrome"; button.md):
+   only component stylesheets give a button its look, and the chrome takes
+   its spacing and type from tokens. The browser half of this guard is
+   tests/browser/chrome-controls.spec.js. */
+
+import assert from "node:assert/strict";
+import test from "node:test";
+import postcss from "postcss";
+import { listFiles, readText } from "../scripts/lib/fs.mjs";
+
+/* Chrome stylesheets: the site's own stylesheets and the demo app's. Not
+   chrome: component stylesheets and their partials, the generated tokens,
+   and the two component-level sources the package builds controls.css and
+   the recipes from (themed-controls.css, recipe-foundation.css). */
+const COMPONENT_LEVEL = new Set(["tokens.generated.css", "themed-controls.css", "recipe-foundation.css"]);
+const chrome = [
+  ...(await listFiles("site/src/styles", { filter: (f) => /^site\/src\/styles\/[^/]+\.css$/.test(f) && !COMPONENT_LEVEL.has(f.split("/").pop()) })),
+  "apps/demo/src/style.css",
+];
+
+/* The last compound of a selector targets a button: the element, a class
+   named like one (.button-*, .btn, .copy-button), a button input type, or
+   the file input's button. :is() and :where() arguments count; :not() and
+   :has() arguments do not. */
+const BUTTON_CLASS = /^(btn(-[\w-]+)?|button(-[\w-]+)?|[\w-]+-button)$/;
+const splitTop = (list) => {
+  const parts = [];
+  let depth = 0, start = 0;
+  for (let i = 0; i < list.length; i++) {
+    if ("([".includes(list[i])) depth++;
+    else if (")]".includes(list[i])) depth--;
+    else if (list[i] === "," && depth === 0) { parts.push(list.slice(start, i)); start = i + 1; }
+  }
+  return [...parts, list.slice(start)].map((part) => part.trim()).filter(Boolean);
+};
+const lastCompound = (selector) => {
+  let depth = 0, start = 0;
+  for (let i = 0; i < selector.length; i++) {
+    if ("([".includes(selector[i])) depth++;
+    else if (")]".includes(selector[i])) depth--;
+    else if (depth === 0 && /[\s>+~]/.test(selector[i])) start = i + 1;
+  }
+  return selector.slice(start);
+};
+const targetsButton = (selector) => {
+  let hit = false;
+  const compound = lastCompound(selector.trim())
+    .replace(/:(is|where|matches)\(((?:[^()]|\([^()]*\))*)\)/g, (_, __, inner) => { if (splitTop(inner).some(targetsButton)) hit = true; return ""; })
+    .replace(/:(not|has)\((?:[^()]|\([^()]*\))*\)/g, "");
+  if (/^button(?![\w-])/i.test(compound)) hit = true;
+  for (const [, name] of compound.matchAll(/\.([\w-]+)/g)) if (BUTTON_CLASS.test(name)) hit = true;
+  if (/\[type=["']?(button|submit|reset)["']?\]/.test(compound)) hit = true;
+  if (/::(-webkit-)?file-(selector|upload)-button/.test(compound)) hit = true;
+  return hit;
+};
+
+const LOOK = /^(background|border|padding)(-|$)/;
+const RESET = new Set(["font", "color", "border-radius"]);
+
+const EXCEPTIONS = {};
+
+const rulesOf = async (file) => {
+  const rules = [];
+  postcss.parse(await readText(file)).walkRules((rule) => {
+    if (rule.parent?.type === "atrule" && /keyframes/.test(rule.parent.name)) return;
+    rules.push(rule);
+  });
+  return rules;
+};
+
+test("no chrome stylesheet declares a button look; base.css only resets", async () => {
+  const problems = [];
+  for (const file of chrome) {
+    for (const rule of await rulesOf(file)) {
+      for (const selector of rule.selectors) {
+        if (!targetsButton(selector)) continue;
+        const exception = EXCEPTIONS[file];
+        const excepted = exception?.selectors.has(selector.trim());
+        for (const decl of rule.nodes.filter((node) => node.type === "decl")) {
+          if (excepted && exception.values && LOOK.test(decl.prop)) {
+            for (const [variable] of decl.value.matchAll(/var\([^)]*\)/g)) if (!exception.values.test(variable)) problems.push(`${file}: ${selector.trim()} { ${decl.prop}: ${decl.value} } is not the secondary tone`);
+            continue;
+          }
+          if (excepted) continue;
+          const allowed = !LOOK.test(decl.prop) || (file.endsWith("/base.css") && RESET.has(decl.prop));
+          if (!allowed) problems.push(`${file}: ${selector.trim()} { ${decl.prop}: ${decl.value} }`);
+        }
+      }
+    }
+  }
+  assert.deepEqual(problems, [], "button looks belong in site/src/styles/components (or the shared partial they import)");
+});
+
+test("retired reference control classes and layout have no source users", async () => {
+  for (const file of await listFiles("site/src", { filter: (file) => /\.(astro|css|ts)$/.test(file) })) {
+    assert.doesNotMatch(await readText(file), /class="(?:btn|copy-button)\b|SpecLayout/, file);
+  }
+});
+
+test("component partials are imported only by component stylesheets", async () => {
+  const partials = await listFiles("site/src/styles/partials", { filter: (f) => f.endsWith(".css") });
+  assert.ok(partials.length > 0);
+  const sources = await listFiles("site/src", { filter: (f) => /\.(css|astro|ts)$/.test(f) && !f.includes("/partials/") });
+  for (const partial of partials) {
+    const name = partial.split("/").pop();
+    for (const file of sources) {
+      if (!(await readText(file)).includes(`partials/${name}`)) continue;
+      assert.match(file, /^site\/src\/styles\/components\//, `${file} imports ${partial}`);
+    }
+  }
+});
+
+/* Spacing and type come from --space-* and the font tokens; 0 and 1px
+   (a border, a hairline) are the only literal lengths. */
+const SPACING_AND_TYPE = /^(margin|padding|inset)(-.+)?$|^(gap|row-gap|column-gap|top|right|bottom|left|font|font-size|line-height)$/;
+const LITERAL = /(?<![\w.-])(\d*\.?\d+)px\b/g;
+
+test("chrome stylesheets take spacing and font sizes from tokens", async () => {
+  const problems = [];
+  for (const file of chrome) {
+    postcss.parse(await readText(file)).walkDecls((decl) => {
+      if (!SPACING_AND_TYPE.test(decl.prop)) return;
+      for (const [, number] of decl.value.matchAll(LITERAL)) {
+        if (Number(number) !== 0 && Number(number) !== 1) problems.push(`${file}: ${decl.parent.selector} { ${decl.prop}: ${decl.value} }`);
+      }
+    });
+  }
+  assert.deepEqual(problems, []);
+});
+
+test("the guard recognises button selectors", () => {
+  for (const selector of ["button", ".btn", ".btn-quiet:hover", ".copy-button", ".x :is(input, button)", "[type=submit]", "input::file-selector-button", ".button-secondary"]) assert.ok(targetsButton(selector), selector);
+  for (const selector of [".button-group .label", "a", ".site-actions", "button .icon", ".toolbar"]) assert.equal(targetsButton(selector), false, selector);
+});
diff --git a/tests/component-decisions.test.js b/tests/component-decisions.test.js
new file mode 100644
index 000000000..1831c290e
--- /dev/null
+++ b/tests/component-decisions.test.js
@@ -0,0 +1,59 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { loadComponents } from "../scripts/lib/spec.mjs";
+import { loadDeclaredPairs, validateTokens } from "../scripts/lib/validators.mjs";
+import { cssSourceClosure } from "../scripts/lib/ui-distribution.mjs";
+
+const components = await loadComponents();
+const byId = new Map(components.map(component => [component.id, component]));
+const pairs = await loadDeclaredPairs({ ...await validateTokens(), components });
+const selectionComponents = ["combobox", "menu", "chip", "pagination", "data-table", "table", "list", "diff-view", "diagnostics", "sidebar-nav", "icon-button", "i3-window-frame", "card"];
+
+test("D-027 declares an ordinary, unwaived ring on every corrected selection fill", () => {
+  for (const id of selectionComponents) {
+    const selectionPairs = pairs.filter(pair => pair.source === id && pair.bgPath === "color.interaction.selection.bg" && pair.kind === "ui");
+    assert.ok(selectionPairs.some(pair => pair.fgPath === "color.interaction.focus.ring"), `${id}: selected ring pair is declared`);
+    for (const pair of selectionPairs) {
+      assert.equal(pair.fgPath, "color.interaction.focus.ring", `${id}: selection keeps the ordinary ring`);
+      assert.equal(pair.min, 3);
+      assert.equal(pair.pass, true);
+      assert.equal(pair.waiver, null);
+    }
+  }
+  assert.equal(byId.get("card").tokens["root.ring"], "color.interaction.focus.ring-container", "the unselected card keeps its container ring");
+  assert.equal(byId.get("button").tokens["root.ring"], "color.interaction.focus.ring-container", "primary fill keeps its recoloured ring");
+  assert.equal(byId.get("toast").tokens["danger.text"], "color.status.danger.on-fill", "danger fill keeps its on-fill mapping");
+});
+
+test("code selection syntax limits are measured as waived decoration at the text floor", () => {
+  for (const role of ["comment", "type"]) {
+    const pair = pairs.find(pair => pair.source === "code-editor" && pair.fgPath === `color.code.syntax.${role}` && pair.bgPath === "color.code.selection-bg");
+    assert.ok(pair, `${role}: missing recorded limitation`);
+    assert.equal(pair.min, 4.5);
+    assert.equal(pair.kind, "ui");
+    assert.equal(pair.pass, false, "a waiver never turns the measured failure into a pass");
+    assert.match(pair.waiver, /syntax colour is decoration/);
+    assert.match(pair.waiver, /short-lived selection/);
+    assert.match(pair.waiver, /recorded selection value/);
+  }
+});
+
+test("focus-offset dependency entries follow the stylesheet and its imported dependencies", async () => {
+  const ids = ["avatar", "button-group", "chart", "command-palette", "compact-dashboard", "description-list", "disclosure", "editor-search", "error-state", "file-browser", "kbd", "multiselect", "popover", "range", "repeater", "segmented-control", "skeleton", "timeline", "tree"];
+  for (const id of ids) {
+    const styles = [...await cssSourceClosure(".", [`site/src/styles/components/${id}.css`])].map(([, text]) => text).join("\n");
+    const declared = Object.values(byId.get(id).tokens);
+    assert.ok(styles.includes("var(--focus-offset)"), id);
+    assert.ok(declared.includes("focus.offset"), `${id}: missing focus offset`);
+    assert.equal(declared.includes("space.2"), styles.includes("var(--space-2)"), `${id}: retain space.2 only when a stylesheet dependency uses it`);
+  }
+});
+
+test("waiver reasons carry no computed ratios that can become stale", () => {
+  for (const id of ["button", "wizard", "search-field", "file-input", "toast", "progress"]) {
+    for (const pair of byId.get(id).contrast) {
+      assert.doesNotMatch(pair.waiver ?? "", /\d+\.\d+:1/, `${id}: computed measurements belong in the report`);
+    }
+  }
+});
+
diff --git a/tests/density-default.test.js b/tests/density-default.test.js
new file mode 100644
index 000000000..adbb12ec4
--- /dev/null
+++ b/tests/density-default.test.js
@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import postcss from "postcss";
+import { readText } from "../scripts/lib/fs.mjs";
+
+/* D-038: compact is the default density. The density variables must carry the
+   compact values where no data-density is set, and comfortable stays opt-in. */
+
+const declarations = (css, ...selectors) => {
+  const rule = postcss.parse(css).nodes.find((node) => node.type === "rule" && selectors.every((s) => node.selectors.includes(s)));
+  assert.ok(rule, `no rule for ${selectors.join(", ")}`);
+  return Object.fromEntries(rule.nodes.filter((node) => node.type === "decl").map((decl) => [decl.prop, decl.value]));
+};
+
+const COMPACT = { "--density-control-height": "24px", "--density-row-height": "28px", "--density-control-padding-x": "8px", "--density-icon": "12px", "--density-gap": "2px" };
+const COMFORTABLE = { "--density-control-height": "32px", "--density-row-height": "36px", "--density-control-padding-x": "12px", "--density-icon": "16px", "--density-gap": "4px" };
+
+for (const file of ["site/src/styles/tokens.generated.css", "packages/ui/dist/tokens.css"]) {
+  test(`${file} defines compact on :root and keeps comfortable opt-in`, async () => {
+    const css = await readText(file);
+    const compact = declarations(css, ":root", '[data-density="compact"]');
+    for (const [prop, value] of Object.entries(COMPACT)) assert.equal(compact[prop], value, prop);
+    for (const [prop, value] of Object.entries(COMFORTABLE)) assert.equal(declarations(css, '[data-density="comfortable"]')[prop], value, prop);
+  });
+}
+
+test("recipe wrappers without data-density are compact", async () => {
+  const css = await readText("exports/recipes/button/tokens.css");
+  const rule = postcss.parse(css).nodes.find((node) => node.type === "rule" && node.selectors.includes(".j3w1-recipe") && node.selectors.includes('.j3w1-recipe[data-density="compact"]'));
+  assert.ok(rule, "the compact density rule also applies to the bare .j3w1-recipe wrapper");
+});
diff --git a/tests/dependabot-refresh.test.js b/tests/dependabot-refresh.test.js
index e2586bdf0..635de9df3 100644
--- a/tests/dependabot-refresh.test.js
+++ b/tests/dependabot-refresh.test.js
@@ -1,3 +1,4 @@
+import { git as queryGit } from "../scripts/tooling/git.mjs";
 import assert from "node:assert/strict";
 import { execFileSync } from "node:child_process";
 import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync, promises as fs } from "node:fs";
@@ -8,7 +9,7 @@ import { isGenerated, isNpmBump, prPaths, refresh, workspacesOf } from "../scrip
 import { plan } from "../scripts/ci/select.mjs";
 import { scratchDir } from "./helpers/scratch.mjs";
 
-const git = (dir, ...args) => execFileSync("git", ["-C", dir, ...args], { encoding: "utf8" }).trim();
+const git = (dir, ...args) => queryGit(args, { cwd: dir });
 const put = async (dir, file, content) => {
   await fs.mkdir(path.dirname(path.join(dir, file)), { recursive: true });
   await fs.writeFile(path.join(dir, file), content);
diff --git a/tests/design-mode.test.js b/tests/design-mode.test.js
index 8d745cf2b..f9a02c085 100644
--- a/tests/design-mode.test.js
+++ b/tests/design-mode.test.js
@@ -35,7 +35,7 @@ test("the frame agent is injected before </body> or appended, and names its side
 test("the live side decorates exactly the routes the build decorates", () => {
   const index = { "#e53935": ["color.accent"] };
   assert.equal(hexIndexForRoute("index.html", index), index);
-  assert.equal(hexIndexForRoute("reference/index.html", index), index);
+  for (const route of ["reference/index.html", "reference/contrast/index.html", "reference/decisions/index.html", "reference/fixtures/index.html"]) assert.equal(hexIndexForRoute(route, index), index);
   assert.equal(hexIndexForRoute("tokens/color-text-default/index.html", index), index);
   assert.equal(hexIndexForRoute("components/button/index.html", index), index);
   assert.deepEqual(hexIndexForRoute("releases/v0-1-0/workbench/default/index.html", index), {});
diff --git a/tests/dist/base-paths.test.js b/tests/dist/base-paths.test.js
index d4e335559..5efa79bce 100644
--- a/tests/dist/base-paths.test.js
+++ b/tests/dist/base-paths.test.js
@@ -96,3 +96,39 @@ test("canonical, og:url and the nojekyll marker are correct", async () => {
   assert.ok(await exists("dist/index.html"));
   assert.ok(await exists("dist/404.html"));
 });
+
+/* R-j: fragments are part of the link contract, including links between pages. */
+test("every same-site HTML link fragment names a real target on its destination", async () => {
+  const pages = new Map();
+  const inventory = await readJson("spec/inventory.json");
+  for (const file of distFiles.filter((file) => file.endsWith(".html"))) {
+    const ids = new Set(), links = [];
+    walkMarkup(parse(await readText(file)), (node) => {
+      for (const { name, value } of node.attrs ?? []) {
+        if (name === "id") ids.add(value);
+        if ((node.tagName === "a" || node.tagName === "area") && name === "href") links.push(value);
+      }
+    });
+    pages.set(file, { ids, links });
+  }
+  const problems = new Set();
+  for (const [file, { links }] of pages) {
+    // These inert historical reconstructions are digest-recorded evidence,
+    // not navigation. Keep their exact pinned bytes (coordinator direction).
+    if (file.startsWith("dist/releases/specimens/")) continue;
+    const relative = file.slice("dist/".length).replace(/index\.html$/, "");
+    const from = new URL(relative, manifest.site.url);
+    for (const href of links) {
+      const target = new URL(href, from);
+      if (target.origin !== new URL(manifest.site.url).origin || !target.pathname.startsWith(base) || !target.hash || target.hash === "#") continue;
+      const route = decodeURIComponent(target.pathname.slice(base.length));
+      const candidate = "dist/" + (route.endsWith("/") || !route ? route + "index.html" : route);
+      const page = pages.get(candidate) ?? pages.get(candidate + "/index.html");
+      if (!page) continue; // Download fragments (JSON evidence, SVG) are not HTML ids.
+      const hash = decodeURIComponent(target.hash.slice(1));
+      if (route.startsWith("demo/") && (hashDestinations.includes(hash) || /^\/components\/[a-z0-9-]+$/.test(hash) && inventory.components.some((component) => hash === `/components/${component.id}`))) continue; // Vue's registered hash routes.
+      if (!page.ids.has(hash)) problems.add(`${file}: ${href} -> missing #${hash}`);
+    }
+  }
+  assert.deepEqual([...problems], []);
+});
diff --git a/tests/dist/consistency.test.js b/tests/dist/consistency.test.js
index a1e725250..621b24db9 100644
--- a/tests/dist/consistency.test.js
+++ b/tests/dist/consistency.test.js
@@ -31,7 +31,13 @@ test("component sections, exports, contents entries and the search index agree",
     const section = html.match(new RegExp(`<section class="component" id="c-${id}"[^>]*>`))[0];
     const cov = coverage.components[id];
     assert.ok(section.includes(`data-family="${cov.family}"`), `${id} family`);
-    if (cov.demonstrated) assert.ok(html.includes(`id="${id}-states"`), `${id} state matrix rendered`);
+    const detail = await readText(`dist/components/${id}/index.html`);
+    for (const match of detail.matchAll(/data-token="([^"]+)"/g)) assert.ok(tokenPaths.has(match[1]), `${id}: token ${match[1]}`);
+    if (cov.demonstrated) {
+      assert.equal((detail.match(/class="matrix"/g) ?? []).length, 1, `${id}: one full matrix`);
+      assert.ok(detail.includes(`id="${anchorFor.states(id)}"`), `${id} detail state matrix`);
+      assert.ok(html.includes(`id="${anchorFor.states(id)}" data-legacy-target="" href="/theme/components/${id}/#${anchorFor.states(id)}"`), `${id}: static matrix link on hub`);
+    }
   }
 });
 
@@ -70,17 +76,22 @@ test("reviewed Obsidian installers are served byte-identically but are not nativ
   assert.deepEqual(port.files.map(file => file.path), ["dist/manifest.json", "dist/theme.css"]);
 });
 
-test("ids are unique, every contents link has a target, and nothing normative hides inside details", () => {
+test("ids are unique, every contents link has a target, and nothing normative hides inside details", async () => {
   const ids = [...html.matchAll(/\sid="([^"]+)"/g)].map((m) => m[1]);
   const dup = ids.filter((id, i) => ids.indexOf(id) !== i);
   assert.deepEqual([...new Set(dup)], []);
   const idSet = new Set(ids);
   const toc = html.match(/<nav class="toc"[\s\S]*?<\/nav>/)[0];
   for (const m of toc.matchAll(/href="#([^"]+)"/g)) assert.ok(idSet.has(m[1]), `contents link #${m[1]}`);
-  for (const block of html.matchAll(/<details[\s\S]*?<\/details>/g)) {
+  // Normative content lives on the hub and every page it moved to: reference
+  // detail pages, component pages and the token pages. None may hide it in <details>.
+  const htmlFiles = async (dir) => listFiles(dir, { filter: (file) => file.endsWith(".html") });
+  const normativeFiles = [...await htmlFiles("dist/reference"), ...await htmlFiles("dist/components"), ...await htmlFiles("dist/tokens")];
+  assert.ok(normativeFiles.length > 400, `normative pages scanned: ${normativeFiles.length}`);
+  for (const file of normativeFiles) for (const block of (await readText(file)).matchAll(/<details[\s\S]*?<\/details>/g)) {
     const inner = block[0];
     if (inner.includes('class="toc"') || inner.includes("<summary>Contents")) continue;
-    assert.doesNotMatch(inner, /<h3|class="token-table"|class="matrix"|class="component"/, "normative content inside <details>");
+    assert.doesNotMatch(inner, /<h[1-6][\s>]|<table[\s>]|class="[^"]*(token-table|matrix|component)[^"]*"/, `normative content inside <details> in ${file}`);
   }
   for (const id of ["identity", "foundations", "accessibility", "portability", "decisions"]) assert.ok(idSet.has(anchorFor.doc(id)), id);
   assert.ok(idSet.has("for-agents") && idSet.has("references") && idSet.has("contrast-report") && idSet.has("coverage-ledger"));
diff --git a/tests/dist/hex-swatches.test.js b/tests/dist/hex-swatches.test.js
index e880f7354..8c22a23c5 100644
--- a/tests/dist/hex-swatches.test.js
+++ b/tests/dist/hex-swatches.test.js
@@ -1,10 +1,14 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { parse } from "parse5";
-import { readText } from "../../scripts/lib/fs.mjs";
+import { hexIndexForRoute } from "../../scripts/lib/hex-routes.mjs";
+import { listFiles, readText } from "../../scripts/lib/fs.mjs";
 
 test("every eligible built-page literal has one adjacent swatch and matching fill", async () => {
-  const tree = parse(await readText("dist/reference/index.html"));
+  let total = 0;
+  for (const file of await listFiles("dist", { filter: (file) => file.endsWith(".html") })) {
+  if (hexIndexForRoute(file.slice("dist/".length), {}) === null) continue;
+  const tree = parse(await readText(file));
   let text = "";
   const previews = [];
   const attr = (n, key) => n.attrs?.find((a) => a.name === key)?.value;
@@ -22,7 +26,7 @@ test("every eligible built-page literal has one adjacent swatch and matching fil
       previews.push({ end: text.length, hex });
       return;
     }
-    const block = ["p", "div", "td", "th", "pre", "li", "h1", "h2", "h3", "h4", "section", "br", "button"].includes(n.tagName);
+    const block = ["p", "div", "td", "th", "pre", "li", "h1", "h2", "h3", "h4", "section", "br", "button", "dl", "dt", "dd", "header", "footer", "nav", "main", "ul", "ol", "h5", "h6", "form", "fieldset", "legend"].includes(n.tagName);
     if (block) text += "\n";
     if (n.nodeName === "#text") text += n.value;
     for (const c of n.childNodes ?? []) visit(c);
@@ -30,8 +34,10 @@ test("every eligible built-page literal has one adjacent swatch and matching fil
   };
   visit(tree);
   const literals = [...text.matchAll(/(?<![\w#/@.-])#(?:[a-f\d]{8}|[a-f\d]{6}|[a-f\d]{4}|[a-f\d]{3})(?![\w/-])/gi)].filter((m) => !/(?:[a-z][\w+.-]*:\/\/|mailto:)[^\s<>"']*$/i.test(text.slice(Math.max(0, text.lastIndexOf("\n", m.index)), m.index)));
-  assert.ok(literals.length > 1000, "audit covers prose, component tables and contrast report");
+  total += literals.length;
   const expected = literals.map((m) => ({ end: m.index + m[0].length, hex: m[0] }));
-  assert.equal(previews.length, expected.length, `preview count ${previews.length}, literal count ${expected.length}`);
+  assert.equal(previews.length, expected.length, `${file}: preview count ${previews.length}, literal count ${expected.length}`);
   for (let i = 0; i < expected.length; i++) assert.deepEqual(previews[i], expected[i], `literal ${i}: ${text.slice(expected[i].end - 50, expected[i].end + 50)}`);
+  }
+  assert.ok(total > 1000, "audit covers every decorated page, including prose, tables and contrast pairs");
 });
diff --git a/tests/dist/implement-anchors.test.js b/tests/dist/implement-anchors.test.js
new file mode 100644
index 000000000..17c41a7b9
--- /dev/null
+++ b/tests/dist/implement-anchors.test.js
@@ -0,0 +1,14 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { readText } from "../../scripts/lib/fs.mjs";
+
+/* The implementation guide's section anchors are published links: bookmarks and
+   agent briefs point at them. Condensing the guide must keep every one. */
+const PUBLISHED = ["install-and-pin", "load-one-component", "vue-3-javascript-sfcs", "react-astro-and-plain-html",
+  "attributes-properties-and-events", "forms-and-validation", "composition-lifecycle-and-styling",
+  "copy-a-complete-bundle", "troubleshooting-and-upgrades"];
+
+test("every published /implement/ section anchor still exists", async () => {
+  const html = await readText("dist/implement/index.html");
+  for (const id of PUBLISHED) assert.ok(html.includes(`id="${id}"`), id);
+});
diff --git a/tests/dist/reference-hub.test.js b/tests/dist/reference-hub.test.js
new file mode 100644
index 000000000..1d11faff0
--- /dev/null
+++ b/tests/dist/reference-hub.test.js
@@ -0,0 +1,72 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { parse } from "parse5";
+import { readText, readJson, listFiles } from "../../scripts/lib/fs.mjs";
+import { walkMarkup, attribute } from "../../scripts/lib/markup.mjs";
+import { scopeRecipeCss } from "../../scripts/lib/recipe-css.mjs";
+import { anchorFor } from "../../scripts/lib/anchors.mjs";
+
+const hub = await readText("dist/reference/index.html");
+test("the public pre-modernization anchors all remain in the static hub", async () => {
+  const ids = new Set([...hub.matchAll(/\sid="([^"]+)"/g)].map((match) => match[1]));
+  const fixture = (await readText("tests/fixtures/reference-anchors.txt")).trim().split("\n");
+  assert.ok(fixture.length > 1000, "fixture retains public component, doc, role and specimen anchors");
+  assert.deepEqual(fixture.filter((id) => !ids.has(id)), []);
+  assert.doesNotMatch(hub, /class="matrix"|class="contrast-table"/, "hub contains links to full detail");
+});
+test("matrix scoping retains forced states without leaking into live variants", () => {
+  const source = ".button:hover, [data-state-hover] .button { color: var(--color-text-default); }";
+  const live = scopeRecipeCss(source);
+  assert.doesNotMatch(live, /data-state-hover/);
+  const matrix = scopeRecipeCss(source, { scope: ".reference-matrix-button", keepStates: true });
+  assert.match(matrix, /\.reference-matrix-button \[data-state-hover\] \.button/);
+  assert.doesNotMatch(matrix, /^\[data-state-hover\]/m);
+});
+test("component pages render every computed contrast declaration and carry only scoped matrix styles", async () => {
+  const { pairs } = await readJson("exports/contrast.json");
+  const { components } = await readJson("exports/coverage.json");
+  for (const id of Object.keys(components)) {
+    const html = await readText(`dist/components/${id}/index.html`);
+    const tree = parse(html); let rows = 0;
+    walkMarkup(tree, (node) => {
+      if (node.tagName === "table" && (attribute(node, "class") ?? "").includes("contrast-table")) walkMarkup(node, (child) => { if (child.tagName === "tbody") rows += child.childNodes.filter((row) => row.tagName === "tr").length; });
+    });
+    assert.equal(rows, pairs.filter((pair) => pair.source === id).length, id);
+    assert.ok(html.includes(`.reference-matrix-${id}`), `${id}: own matrix scope`);
+    assert.ok(html.includes(`id="${anchorFor.states(id)}"`));
+  }
+});
+test("reference HTML and every page stay within their size budgets", async () => {
+  let elements = 0;
+  walkMarkup(parse(hub), (node) => { if (node.tagName) elements++; });
+  assert.ok(Buffer.byteLength(hub) <= 800_000, `hub: ${Buffer.byteLength(hub)} bytes`);
+  assert.ok(elements <= 20_000, `hub: ${elements} elements`);
+  for (const file of await listFiles("dist", { filter: (file) => file.endsWith(".html") })) {
+    if (file === "dist/tokens/index.html") continue;
+    const bytes = Buffer.byteLength(await readText(file));
+    const limit = file === "dist/404.html" ? 40_000 : /^dist\/components\/[^/]+\/index.html$/.test(file) ? 400_000 : 1_000_000;
+    assert.ok(bytes <= limit, `${file}: ${bytes} bytes exceeds ${limit}`);
+  }
+});
+test("search endpoints share one index and token data stays outside HTML (R-f, R-i)", async () => {
+  assert.equal(await readText("dist/search-index.json"), await readText("dist/search.json"));
+  assert.doesNotMatch(hub, /id="j3w1-tokens"/);
+  assert.match(hub, /data-inspector-source="\/theme\/tokens\/inspector.json"/);
+  assert.ok((await readJson("dist/tokens/inspector.json")).profiles.default);
+  const tokens = await readText("dist/tokens/index.html");
+  assert.match(tokens, /data-source="\/theme\/tokens\/query.json"/);
+  assert.doesNotMatch(tokens, /type="application\/json" id="usage-data"/);
+});
+test("surface and text grid values remain separate literals with generated swatches (R-h)", () => {
+  let rows = 0;
+  walkMarkup(parse(hub), (node) => {
+    if (!(attribute(node, "class") ?? "").split(" ").includes("swatch-row")) return;
+    const content = (node) => node.nodeName === "#text" ? node.value : (node.childNodes ?? []).map(content).join("");
+    if (!/#[0-9a-f]{6}/i.test(content(node))) return; // Alpha backdrop is rgb(), not a hex literal.
+    rows++;
+    let swatches = 0;
+    walkMarkup(node, (child) => { if (attribute(child, "data-hex")) swatches++; });
+    assert.ok(swatches > 0, attribute(node, "id"));
+  });
+  assert.equal(rows, 31, "all surface and text hex values are audited");
+});
diff --git a/tests/fixtures/reference-anchors.txt b/tests/fixtures/reference-anchors.txt
new file mode 100644
index 000000000..ee286f3ba
--- /dev/null
+++ b/tests/fixtures/reference-anchors.txt
@@ -0,0 +1,1130 @@
+d-identity
+d-identity--where-it-came-from
+d-identity--what-modern-means-here
+d-identity--profiles
+d-identity--naming
+d-foundations
+d-foundations--surfaces
+d-foundations--text-ladder
+d-foundations--borders
+d-foundations--interaction-states
+d-foundations--actions
+d-foundations--status-diagnostics-and-diffs-d-001
+d-foundations--code-and-terminal
+d-foundations--typography
+d-foundations--spacing-and-density-d-009
+d-foundations--elevation-and-layering
+d-foundations--icons
+d-foundations--layout
+d-foundations--typography-semantics-d-033
+f-foundations
+t-color-surface
+t-color-surface-desktop
+t-color-surface-canvas
+t-color-surface-chrome
+t-color-surface-chrome-alt
+t-color-surface-sunken
+t-color-surface-default
+t-color-surface-raised
+t-color-surface-overlay
+t-color-surface-accent
+t-color-surface-input
+t-color-surface-backdrop
+t-color-surface-code
+t-color-surface-terminal
+t-color-text
+t-color-text-default
+t-color-text-bright
+t-color-text-prose
+t-color-text-muted
+t-color-text-subtle
+t-color-text-disabled
+t-color-text-placeholder
+t-color-text-accent
+t-color-text-accent-strong
+t-color-text-link
+t-color-text-link-underline
+t-color-text-link-hover
+t-color-text-on-selection
+t-color-text-on-action
+t-color-text-on-danger
+t-color-text-on-light
+t-color-text-inverse
+t-color-text-heading
+t-color-text-highlight
+s-text-ladder
+s-selection-focus
+s-borders
+s-status
+s-terminal-slots
+t-color-border
+t-color-border-divider
+t-color-border-default
+t-color-border-strong
+t-color-border-control
+t-color-border-active
+t-color-border-overlay
+t-color-border-disabled
+t-color-border-selected-indicator
+t-color-border-selected-indicator-inactive
+t-color-interaction
+t-color-interaction-focus-ring
+t-color-interaction-focus-ring-container
+t-color-interaction-selection-bg
+t-color-interaction-selection-text
+t-color-interaction-selection-inactive-bg
+t-color-interaction-selection-inactive-text
+t-color-interaction-text-selection-bg
+t-color-interaction-text-selection-text
+t-color-interaction-text-selection-tint
+t-color-interaction-hover-bg
+t-color-interaction-hover-bg-strong
+t-color-interaction-pressed-bg
+t-color-interaction-disabled-bg
+t-color-interaction-marquee
+t-color-interaction-drop-target
+t-color-interaction-scrollbar-track
+t-color-interaction-scrollbar-thumb
+t-color-interaction-scrollbar-thumb-hover
+t-color-action
+t-color-action-primary-bg
+t-color-action-primary-text
+t-color-action-primary-hover-bg
+t-color-action-primary-pressed-bg
+t-color-action-primary-border
+t-color-action-secondary-bg
+t-color-action-secondary-text
+t-color-action-secondary-border
+t-color-action-secondary-hover-bg
+t-color-action-secondary-pressed-bg
+t-color-action-tertiary-text
+t-color-action-tertiary-hover-bg
+t-color-action-destructive-text
+t-color-action-destructive-border
+t-color-action-destructive-hover-bg
+t-color-action-destructive-hover-text
+t-color-action-destructive-pressed-bg
+t-color-action-destructive-filled-bg
+t-color-action-destructive-filled-text
+t-color-status
+t-color-status-danger-text
+t-color-status-danger-fill
+t-color-status-danger-on-fill
+t-color-status-danger-tint
+t-color-status-danger-border
+t-color-status-warning-text
+t-color-status-warning-fill
+t-color-status-warning-on-fill
+t-color-status-warning-tint
+t-color-status-warning-border
+t-color-status-success-text
+t-color-status-success-fill
+t-color-status-success-on-fill
+t-color-status-success-tint
+t-color-status-success-border
+t-color-status-info-text
+t-color-status-info-fill
+t-color-status-info-on-fill
+t-color-status-info-tint
+t-color-status-info-border
+t-color-status-neutral-text
+t-color-status-neutral-fill
+t-color-status-neutral-on-fill
+t-color-status-neutral-tint
+t-color-status-neutral-border
+t-color-code
+t-color-code-bg
+t-color-code-current-line
+t-color-code-gutter-bg
+t-color-code-line-number
+t-color-code-line-number-active
+t-color-code-gutter-rule
+t-color-code-caret
+t-color-code-selection-bg
+t-color-code-search-match-bg
+t-color-code-search-current-bg
+t-color-code-search-current-text
+t-color-code-bracket-match
+t-color-code-indent-guide
+t-color-code-whitespace
+t-color-code-syntax-keyword
+t-color-code-syntax-string
+t-color-code-syntax-comment
+t-color-code-syntax-number
+t-color-code-syntax-constant
+t-color-code-syntax-function
+t-color-code-syntax-variable
+t-color-code-syntax-type
+t-color-code-syntax-operator
+t-color-code-syntax-punctuation
+t-color-code-syntax-property
+t-color-code-syntax-heading
+t-color-code-syntax-tag
+t-color-code-syntax-attribute
+t-color-code-syntax-escape
+t-color-code-syntax-invalid
+t-color-code-syntax-deprecated
+t-color-code-hued-string
+t-color-code-hued-number
+t-color-code-hued-constant
+t-color-code-hued-function
+t-color-code-hued-attribute
+t-color-code-hued-escape
+t-color-code-hued-type
+t-color-code-hued-property
+t-color-code-hued-operator
+t-color-diagnostic
+t-color-diagnostic-error-underline
+t-color-diagnostic-error-text
+t-color-diagnostic-error-stripe
+t-color-diagnostic-error-bg
+t-color-diagnostic-warning-underline
+t-color-diagnostic-warning-text
+t-color-diagnostic-warning-stripe
+t-color-diagnostic-info-underline
+t-color-diagnostic-info-text
+t-color-diagnostic-hint-underline
+t-color-diagnostic-unused-text
+t-color-diff
+t-color-diff-added-bg
+t-color-diff-added-gutter
+t-color-diff-added-emphasis
+t-color-diff-removed-bg
+t-color-diff-removed-gutter
+t-color-diff-removed-emphasis
+t-color-diff-modified-bg
+t-color-diff-modified-gutter
+t-color-diff-conflict-border
+t-color-diff-header-bg
+t-color-terminal
+t-color-terminal-bg
+t-color-terminal-fg
+t-color-terminal-cursor
+t-color-terminal-selection-bg
+t-color-terminal-selection-text
+t-color-terminal-prompt-bg
+t-color-terminal-prompt-text
+t-color-terminal-ansi-0
+t-color-terminal-ansi-1
+t-color-terminal-ansi-2
+t-color-terminal-ansi-3
+t-color-terminal-ansi-4
+t-color-terminal-ansi-5
+t-color-terminal-ansi-6
+t-color-terminal-ansi-7
+t-color-terminal-ansi-8
+t-color-terminal-ansi-9
+t-color-terminal-ansi-10
+t-color-terminal-ansi-11
+t-color-terminal-ansi-12
+t-color-terminal-ansi-13
+t-color-terminal-ansi-14
+t-color-terminal-ansi-15
+t-color-chart
+t-color-chart-series-1
+t-color-chart-series-2
+t-color-chart-series-3
+t-color-chart-series-4
+t-color-chart-axis
+t-color-chart-grid
+t-color-chart-label
+t-color-icon
+t-color-icon-default
+t-color-icon-decorative
+t-space
+t-space-0
+t-space-1
+t-space-2
+t-space-4
+t-space-8
+t-space-12
+t-space-16
+t-space-24
+t-space-32
+t-space-48
+t-density
+t-density-compact-control-height
+t-density-compact-row-height
+t-density-compact-control-padding-x
+t-density-compact-icon
+t-density-compact-gap
+t-density-comfortable-control-height
+t-density-comfortable-row-height
+t-density-comfortable-control-padding-x
+t-density-comfortable-icon
+t-density-comfortable-gap
+t-border
+t-border-width-default
+t-border-width-emphasis
+t-radius
+t-radius-none
+t-font
+t-font-family-mono
+t-font-weight-regular
+t-font-weight-bold
+t-font-size-ui-sm
+t-font-size-ui-md
+t-font-size-ui-lg
+t-font-size-reading
+t-font-size-code
+t-font-size-terminal
+t-font-size-h1
+t-font-size-h2
+t-font-size-h3
+t-font-size-caption
+t-font-line-height-ui-sm
+t-font-line-height-ui-md
+t-font-line-height-ui-lg
+t-font-line-height-reading
+t-font-line-height-code
+t-font-line-height-terminal
+t-font-line-height-h1
+t-font-line-height-h2
+t-font-line-height-h3
+t-font-line-height-caption
+t-font-letter-spacing-terminal
+t-focus
+t-focus-ring
+t-focus-ring-container
+t-focus-offset
+t-focus-offset-container
+t-focus-offset-invalid
+t-motion
+t-motion-duration-fast
+t-motion-duration-base
+t-motion-duration-slow
+t-shadow
+t-shadow-floating
+t-layout
+t-layout-measure
+t-layout-content-max
+t-layout-app-max
+t-breakpoint
+t-breakpoint-xs
+t-breakpoint-sm
+t-breakpoint-md
+t-breakpoint-lg
+t-icon
+t-icon-size-sm
+t-icon-size-md
+t-icon-size-lg
+t-icon-stroke
+t-z
+t-z-canvas
+t-z-raised
+t-z-popover
+t-z-drawer
+t-z-dialog
+t-z-toast
+t-z-skip-link
+t-color-primitive
+t-color-primitive-ink-0
+t-color-primitive-ink-14
+t-color-primitive-ink-15
+t-color-primitive-ink-20
+t-color-primitive-ink-25
+t-color-primitive-ink-28
+t-color-primitive-ink-30
+t-color-primitive-ink-40
+t-color-primitive-ink-52
+t-color-primitive-ink-60
+t-color-primitive-red-40
+t-color-primitive-red-50
+t-color-primitive-red-100
+t-color-primitive-red-150
+t-color-primitive-red-200
+t-color-primitive-red-250
+t-color-primitive-red-300
+t-color-primitive-red-350
+t-color-primitive-red-400
+t-color-primitive-red-450
+t-color-primitive-red-500
+t-color-primitive-red-550
+t-color-primitive-red-650
+t-color-primitive-red-750
+t-color-primitive-red-760
+t-color-primitive-red-770
+t-color-primitive-red-800
+t-color-primitive-red-810
+t-color-primitive-red-850
+t-color-primitive-red-860
+t-color-primitive-rose-300
+t-color-primitive-rose-320
+t-color-primitive-rose-350
+t-color-primitive-rose-450
+t-color-primitive-rose-550
+t-color-primitive-rose-600
+t-color-primitive-rose-650
+t-color-primitive-rose-700
+t-color-primitive-rose-800
+t-color-primitive-coral-700
+t-color-primitive-paper-90
+t-color-primitive-paper-100
+t-color-primitive-amber-500
+t-color-primitive-amber-600
+t-color-primitive-amber-tint
+t-color-primitive-green-500
+t-color-primitive-green-600
+t-color-primitive-green-tint
+t-color-primitive-blue-500
+t-color-primitive-blue-600
+t-color-primitive-blue-tint
+t-color-primitive-alpha-transparent
+t-color-primitive-alpha-black-55
+t-color-primitive-alpha-black-65
+t-color-primitive-alpha-red-6
+t-color-primitive-alpha-red-12
+t-color-primitive-alpha-red-50
+t-color-primitive-ansi-0
+t-color-primitive-ansi-1
+t-color-primitive-ansi-2
+t-color-primitive-ansi-3
+t-color-primitive-ansi-4
+t-color-primitive-ansi-5
+t-color-primitive-ansi-6
+t-color-primitive-ansi-7
+t-color-primitive-ansi-8
+t-color-primitive-ansi-9
+t-color-primitive-ansi-10
+t-color-primitive-ansi-11
+t-color-primitive-ansi-12
+t-color-primitive-ansi-13
+t-color-primitive-ansi-14
+t-color-primitive-ansi-15
+t-color-primitive-ansi-readable-1
+t-color-primitive-ansi-readable-4
+t-color-primitive-ansi-readable-8
+t-color-primitive-ansi-readable-9
+t-color-primitive-ansi-readable-10
+t-color-primitive-ansi-readable-12
+t-color-primitive-ansi-readable-13
+t-color-primitive-ansi-readable-14
+t-color-primitive-ansi-readable-15
+f-actions
+c-button
+workbench-button-embedded
+button-states
+c-button--purpose
+c-button--anatomy
+c-button--states
+c-button--keyboard
+c-button--accessibility
+c-button--portability
+c-button--non-examples
+c-icon-button
+icon-button-states
+c-icon-button--purpose
+c-icon-button--anatomy
+c-icon-button--states
+c-icon-button--keyboard
+c-icon-button--accessibility
+c-icon-button--portability
+c-icon-button--non-examples
+c-link
+link-states
+c-link--purpose
+c-link--anatomy
+c-link--states
+c-link--keyboard
+c-link--accessibility
+c-link--portability
+c-link--non-examples
+c-button-group
+button-group-states
+c-button-group--purpose
+c-button-group--anatomy
+c-button-group--states
+c-button-group--keyboard
+c-button-group--accessibility
+c-button-group--portability
+c-button-group--non-examples
+c-segmented-control
+segmented-control-states
+c-segmented-control--purpose
+c-segmented-control--anatomy
+c-segmented-control--states
+c-segmented-control--keyboard
+c-segmented-control--accessibility
+c-segmented-control--portability
+c-segmented-control--non-examples
+f-forms-basic
+c-field
+field-states
+c-field--purpose
+c-field--anatomy
+c-field--states
+c-field--keyboard
+c-field--accessibility
+c-field--portability
+c-field--non-examples
+c-text-field
+workbench-text-field-embedded
+text-field-states
+c-text-field--purpose
+c-text-field--anatomy
+c-text-field--states
+c-text-field--keyboard
+c-text-field--accessibility
+c-text-field--portability
+c-text-field--non-examples
+c-textarea
+textarea-states
+c-textarea--purpose
+c-textarea--anatomy
+c-textarea--states
+c-textarea--keyboard
+c-textarea--accessibility
+c-textarea--portability
+c-textarea--non-examples
+c-select
+select-states
+c-select--purpose
+c-select--anatomy
+c-select--states
+c-select--keyboard
+c-select--accessibility
+c-select--portability
+c-select--non-examples
+c-checkbox
+workbench-checkbox-embedded
+checkbox-states
+c-checkbox--purpose
+c-checkbox--anatomy
+c-checkbox--states
+c-checkbox--keyboard
+c-checkbox--accessibility
+c-checkbox--portability
+c-checkbox--non-examples
+c-radio-group
+radio-group-states
+c-radio-group--purpose
+c-radio-group--anatomy
+c-radio-group--states
+c-radio-group--keyboard
+c-radio-group--accessibility
+c-radio-group--portability
+c-radio-group--non-examples
+c-switch
+switch-states
+c-switch--purpose
+c-switch--anatomy
+c-switch--states
+c-switch--keyboard
+c-switch--accessibility
+c-switch--portability
+c-switch--non-examples
+c-fieldset
+fieldset-states
+c-fieldset--purpose
+c-fieldset--anatomy
+c-fieldset--states
+c-fieldset--keyboard
+c-fieldset--accessibility
+c-fieldset--portability
+c-fieldset--non-examples
+c-number-field
+number-field-states
+c-number-field--purpose
+c-number-field--anatomy
+c-number-field--states
+c-number-field--keyboard
+c-number-field--accessibility
+c-number-field--portability
+c-number-field--non-examples
+c-search-field
+search-field-states
+c-search-field--purpose
+c-search-field--anatomy
+c-search-field--states
+c-search-field--keyboard
+c-search-field--accessibility
+c-search-field--portability
+c-search-field--non-examples
+c-range
+range-states
+c-range--purpose
+c-range--anatomy
+c-range--states
+c-range--keyboard
+c-range--accessibility
+c-range--portability
+c-range--non-examples
+f-forms-advanced
+c-combobox
+combobox-states
+c-combobox--purpose
+c-combobox--anatomy
+c-combobox--states
+c-combobox--keyboard
+c-combobox--accessibility
+c-combobox--portability
+c-combobox--non-examples
+c-date-picker
+date-picker-states
+c-date-picker--purpose
+c-date-picker--anatomy
+c-date-picker--states
+c-date-picker--keyboard
+c-date-picker--accessibility
+c-date-picker--portability
+c-date-picker--non-examples
+c-time-picker
+time-picker-states
+c-time-picker--purpose
+c-time-picker--anatomy
+c-time-picker--states
+c-time-picker--keyboard
+c-time-picker--accessibility
+c-time-picker--portability
+c-time-picker--non-examples
+c-file-input
+file-input-states
+c-file-input--purpose
+c-file-input--anatomy
+c-file-input--states
+c-file-input--keyboard
+c-file-input--accessibility
+c-file-input--portability
+c-file-input--non-examples
+c-wizard
+wizard-states
+c-wizard--purpose
+c-wizard--anatomy
+c-wizard--states
+c-wizard--keyboard
+c-wizard--accessibility
+c-wizard--portability
+c-wizard--non-examples
+c-form-builder
+form-builder-states
+c-form-builder--purpose
+c-form-builder--anatomy
+c-form-builder--states
+c-form-builder--keyboard
+c-form-builder--accessibility
+c-form-builder--portability
+c-form-builder--non-examples
+c-multiselect
+multiselect-states
+c-multiselect--purpose
+c-multiselect--anatomy
+c-multiselect--states
+c-multiselect--keyboard
+c-multiselect--accessibility
+c-multiselect--portability
+c-multiselect--non-examples
+c-repeater
+repeater-states
+c-repeater--purpose
+c-repeater--anatomy
+c-repeater--states
+c-repeater--keyboard
+c-repeater--accessibility
+c-repeater--portability
+c-repeater--non-examples
+f-navigation
+c-tabs
+workbench-tabs-embedded
+tabs-states
+c-tabs--purpose
+c-tabs--anatomy
+c-tabs--states
+c-tabs--keyboard
+c-tabs--accessibility
+c-tabs--portability
+c-tabs--non-examples
+c-breadcrumbs
+breadcrumbs-states
+c-breadcrumbs--purpose
+c-breadcrumbs--anatomy
+c-breadcrumbs--states
+c-breadcrumbs--keyboard
+c-breadcrumbs--accessibility
+c-breadcrumbs--portability
+c-breadcrumbs--non-examples
+c-pagination
+pagination-states
+c-pagination--purpose
+c-pagination--anatomy
+c-pagination--states
+c-pagination--keyboard
+c-pagination--accessibility
+c-pagination--portability
+c-pagination--non-examples
+c-sidebar-nav
+workbench-sidebar-nav-embedded
+sidebar-nav-states
+c-sidebar-nav--purpose
+c-sidebar-nav--anatomy
+c-sidebar-nav--states
+c-sidebar-nav--keyboard
+c-sidebar-nav--accessibility
+c-sidebar-nav--portability
+c-sidebar-nav--non-examples
+c-toolbar
+toolbar-states
+c-toolbar--purpose
+c-toolbar--anatomy
+c-toolbar--states
+c-toolbar--keyboard
+c-toolbar--accessibility
+c-toolbar--portability
+c-toolbar--non-examples
+c-menu
+menu-states
+c-menu--purpose
+c-menu--anatomy
+c-menu--states
+c-menu--keyboard
+c-menu--accessibility
+c-menu--portability
+c-menu--non-examples
+c-skip-link
+skip-link-states
+c-skip-link--purpose
+c-skip-link--anatomy
+c-skip-link--states
+c-skip-link--keyboard
+c-skip-link--accessibility
+c-skip-link--portability
+c-skip-link--non-examples
+c-command-palette
+command-palette-states
+c-command-palette--purpose
+c-command-palette--anatomy
+c-command-palette--states
+c-command-palette--keyboard
+c-command-palette--accessibility
+c-command-palette--portability
+c-command-palette--non-examples
+c-tree
+tree-states
+c-tree--purpose
+c-tree--anatomy
+c-tree--states
+c-tree--keyboard
+c-tree--accessibility
+c-tree--portability
+c-tree--non-examples
+c-disclosure
+disclosure-states
+c-disclosure--purpose
+c-disclosure--anatomy
+c-disclosure--states
+c-disclosure--keyboard
+c-disclosure--accessibility
+c-disclosure--portability
+c-disclosure--non-examples
+f-display
+c-card
+card-states
+c-card--purpose
+c-card--anatomy
+c-card--states
+c-card--keyboard
+c-card--accessibility
+c-card--portability
+c-card--non-examples
+c-list
+list-states
+c-list--purpose
+c-list--anatomy
+c-list--states
+c-list--keyboard
+c-list--accessibility
+c-list--portability
+c-list--non-examples
+c-badge
+badge-states
+c-badge--purpose
+c-badge--anatomy
+c-badge--states
+c-badge--keyboard
+c-badge--accessibility
+c-badge--portability
+c-badge--non-examples
+c-chip
+chip-states
+c-chip--purpose
+c-chip--anatomy
+c-chip--states
+c-chip--keyboard
+c-chip--accessibility
+c-chip--portability
+c-chip--non-examples
+c-table
+workbench-table-embedded
+table-states
+c-table--purpose
+c-table--anatomy
+c-table--states
+c-table--keyboard
+c-table--accessibility
+c-table--portability
+c-table--non-examples
+c-data-table
+data-table-states
+c-data-table--purpose
+c-data-table--anatomy
+c-data-table--states
+c-data-table--keyboard
+c-data-table--accessibility
+c-data-table--portability
+c-data-table--non-examples
+c-description-list
+description-list-states
+c-description-list--purpose
+c-description-list--anatomy
+c-description-list--states
+c-description-list--keyboard
+c-description-list--accessibility
+c-description-list--portability
+c-description-list--non-examples
+c-avatar
+avatar-states
+c-avatar--purpose
+c-avatar--anatomy
+c-avatar--states
+c-avatar--keyboard
+c-avatar--accessibility
+c-avatar--portability
+c-avatar--non-examples
+c-timeline
+timeline-states
+c-timeline--purpose
+c-timeline--anatomy
+c-timeline--states
+c-timeline--keyboard
+c-timeline--accessibility
+c-timeline--portability
+c-timeline--non-examples
+c-chart
+chart-states
+c-chart--purpose
+c-chart--anatomy
+c-chart--states
+c-chart--keyboard
+c-chart--accessibility
+c-chart--portability
+c-chart--non-examples
+c-kbd
+kbd-states
+c-kbd--purpose
+c-kbd--anatomy
+c-kbd--states
+c-kbd--keyboard
+c-kbd--accessibility
+c-kbd--portability
+c-kbd--non-examples
+f-feedback
+c-alert
+alert-states
+c-alert--purpose
+c-alert--anatomy
+c-alert--states
+c-alert--keyboard
+c-alert--accessibility
+c-alert--portability
+c-alert--non-examples
+c-toast
+toast-states
+c-toast--purpose
+c-toast--anatomy
+c-toast--states
+c-toast--keyboard
+c-toast--accessibility
+c-toast--portability
+c-toast--non-examples
+c-progress
+progress-states
+c-progress--purpose
+c-progress--anatomy
+c-progress--states
+c-progress--keyboard
+c-progress--accessibility
+c-progress--portability
+c-progress--non-examples
+c-loading-indicator
+loading-indicator-states
+c-loading-indicator--purpose
+c-loading-indicator--anatomy
+c-loading-indicator--states
+c-loading-indicator--keyboard
+c-loading-indicator--accessibility
+c-loading-indicator--portability
+c-loading-indicator--non-examples
+c-tooltip
+tooltip-states
+c-tooltip--purpose
+c-tooltip--anatomy
+c-tooltip--states
+c-tooltip--keyboard
+c-tooltip--accessibility
+c-tooltip--portability
+c-tooltip--non-examples
+c-dialog
+workbench-dialog-embedded
+dialog-states
+c-dialog--purpose
+c-dialog--anatomy
+c-dialog--states
+c-dialog--keyboard
+c-dialog--accessibility
+c-dialog--portability
+c-dialog--non-examples
+c-drawer
+drawer-states
+c-drawer--purpose
+c-drawer--anatomy
+c-drawer--states
+c-drawer--keyboard
+c-drawer--accessibility
+c-drawer--portability
+c-drawer--non-examples
+c-empty-state
+empty-state-states
+c-empty-state--purpose
+c-empty-state--anatomy
+c-empty-state--states
+c-empty-state--keyboard
+c-empty-state--accessibility
+c-empty-state--portability
+c-empty-state--non-examples
+c-skeleton
+skeleton-states
+c-skeleton--purpose
+c-skeleton--anatomy
+c-skeleton--states
+c-skeleton--keyboard
+c-skeleton--accessibility
+c-skeleton--portability
+c-skeleton--non-examples
+c-popover
+popover-states
+c-popover--purpose
+c-popover--anatomy
+c-popover--states
+c-popover--keyboard
+c-popover--accessibility
+c-popover--portability
+c-popover--non-examples
+c-error-state
+error-state-states
+c-error-state--purpose
+c-error-state--anatomy
+c-error-state--states
+c-error-state--keyboard
+c-error-state--accessibility
+c-error-state--portability
+c-error-state--non-examples
+f-developer
+c-code-editor
+code-editor-states
+c-code-editor--purpose
+c-code-editor--anatomy
+c-code-editor--states
+c-code-editor--keyboard
+c-code-editor--accessibility
+c-code-editor--portability
+c-code-editor--non-examples
+c-diagnostics
+diagnostics-states
+c-diagnostics--purpose
+c-diagnostics--anatomy
+c-diagnostics--states
+c-diagnostics--keyboard
+c-diagnostics--accessibility
+c-diagnostics--portability
+c-diagnostics--non-examples
+c-diff-view
+diff-view-states
+c-diff-view--purpose
+c-diff-view--anatomy
+c-diff-view--states
+c-diff-view--keyboard
+c-diff-view--accessibility
+c-diff-view--portability
+c-diff-view--non-examples
+c-terminal
+terminal-states
+c-terminal--purpose
+c-terminal--anatomy
+c-terminal--states
+c-terminal--keyboard
+c-terminal--accessibility
+c-terminal--portability
+c-terminal--non-examples
+c-editor-search
+editor-search-states
+c-editor-search--purpose
+c-editor-search--anatomy
+c-editor-search--states
+c-editor-search--keyboard
+c-editor-search--accessibility
+c-editor-search--portability
+c-editor-search--non-examples
+f-composed
+c-settings-panel
+settings-panel-states
+c-settings-panel--purpose
+c-settings-panel--anatomy
+c-settings-panel--states
+c-settings-panel--keyboard
+c-settings-panel--accessibility
+c-settings-panel--portability
+c-settings-panel--non-examples
+c-admin-form
+admin-form-states
+c-admin-form--purpose
+c-admin-form--anatomy
+c-admin-form--states
+c-admin-form--keyboard
+c-admin-form--accessibility
+c-admin-form--portability
+c-admin-form--non-examples
+c-filterable-table
+filterable-table-states
+c-filterable-table--purpose
+c-filterable-table--anatomy
+c-filterable-table--states
+c-filterable-table--keyboard
+c-filterable-table--accessibility
+c-filterable-table--portability
+c-filterable-table--non-examples
+c-i3-window-frame
+i3-window-frame-states
+c-i3-window-frame--purpose
+c-i3-window-frame--anatomy
+c-i3-window-frame--states
+c-i3-window-frame--keyboard
+c-i3-window-frame--accessibility
+c-i3-window-frame--portability
+c-i3-window-frame--non-examples
+c-file-browser
+file-browser-states
+c-file-browser--purpose
+c-file-browser--anatomy
+c-file-browser--states
+c-file-browser--keyboard
+c-file-browser--accessibility
+c-file-browser--portability
+c-file-browser--non-examples
+c-compact-dashboard
+compact-dashboard-states
+c-compact-dashboard--purpose
+c-compact-dashboard--anatomy
+c-compact-dashboard--states
+c-compact-dashboard--keyboard
+c-compact-dashboard--accessibility
+c-compact-dashboard--portability
+c-compact-dashboard--non-examples
+s-stress
+fx-fx-long
+fx-fx-320
+fx-fx-i18n
+fx-fx-rtl
+fx-fx-rm
+fx-fx-hc
+fx-fx-touch
+fx-fx-density
+fx-fx-overflow
+s-non-examples
+x-pills
+x-glass
+x-gradients
+x-glow
+x-everything-red
+x-material
+x-light
+x-rainbow
+x-traffic-light
+x-sans
+x-inactive-text
+x-focus-as-selection
+x-heritage-ui
+x-circles
+x-hairline-edge
+x-opacity-disabled
+d-form-patterns
+d-form-patterns--scope
+d-form-patterns--interaction
+d-form-patterns--evidence-and-limits
+d-figma-bridge
+d-figma-bridge--supported-mapping
+d-figma-bridge--generate-a-pinned-payload
+d-figma-bridge--reviewed-import-route
+d-figma-bridge--rollback-and-conflicts
+d-figma-bridge--actual-verification-status
+d-accessibility
+d-accessibility--what-is-claimed
+d-accessibility--contrast
+d-accessibility--text-hierarchy
+d-accessibility--focus
+d-accessibility--keyboard
+d-accessibility--motion
+d-accessibility--forced-colours-and-high-contrast
+d-accessibility--reflow-zoom-and-text
+d-accessibility--colour-is-never-the-only-channel
+d-accessibility--limitations-recorded-not-hidden
+d-accessibility--verification-evidence-and-freshness
+d-portability
+d-portability--scope-of-a-port
+d-portability--what-every-port-must-reproduce
+d-portability--fallbacks-by-host-capability
+d-portability--shared-component-defaults
+d-portability--web-consumers
+d-portability--native-ports
+d-portability--the-reference-implementation
+d-consume--consuming-j3w1-theme-for-agents-and-integrators
+d-consume--official-web-implementations
+d-consume--0-pin-a-revision-first
+d-consume--1-read-the-manifest
+d-consume--2-read-this-document-at-the-same-revision
+d-consume--3-pick-a-profile
+d-consume--4-read-only-what-you-need-in-this-order
+d-consume--5-inspect-the-target-before-changing-anything
+d-consume--6-implement-the-mapping
+d-consume--7-validate-and-report
+d-consume--what-you-may-not-do
+d-consume--deviation-report-format
+d-consume--theme-lock-json
+d-consume--the-short-prompt
+d-decisions
+d-decisions--d-000
+d-decisions--d-001
+d-decisions--d-002
+d-decisions--d-003
+d-decisions--d-004
+d-decisions--d-005
+d-decisions--d-006
+d-decisions--d-007
+d-decisions--d-008
+d-decisions--d-009
+d-decisions--d-010
+d-decisions--d-011
+d-decisions--d-012
+d-decisions--d-013
+d-decisions--d-014
+d-decisions--follow-the-pointer-hovering-effect
+d-decisions--d-015
+d-decisions--d-016
+d-decisions--d-017
+d-decisions--d-018
+d-decisions--d-019
+d-decisions--d-020
+d-decisions--d-021
+d-decisions--d-022
+d-decisions--d-023
+d-decisions--d-024
+d-decisions--d-025
+d-decisions--d-026
+d-decisions--d-027
+d-decisions--d-028
+d-decisions--d-029
+d-decisions--d-030
+d-decisions--d-031
+d-decisions--d-032
+d-decisions--d-033
+d-decisions--d-034
+d-decisions--d-035
+d-decisions--d-036
diff --git a/tests/helpers/json.mjs b/tests/helpers/json.mjs
new file mode 100644
index 000000000..385398c89
--- /dev/null
+++ b/tests/helpers/json.mjs
@@ -0,0 +1,3 @@
+import { readFileSync } from "node:fs";
+
+export const readJsonWithBom = file => JSON.parse(readFileSync(file, "utf8").replace(/^\uFEFF/, ""));
diff --git a/tests/helpers/powershell.mjs b/tests/helpers/powershell.mjs
new file mode 100644
index 000000000..13e61f908
--- /dev/null
+++ b/tests/helpers/powershell.mjs
@@ -0,0 +1,14 @@
+import { spawnSync } from "node:child_process";
+
+export const powershell = process.env.J3W1_PWSH ?? (process.platform === "win32" ? "pwsh.exe" : "pwsh");
+
+export const powershellEnvironment = () => {
+  const env = { ...process.env };
+  if (process.platform === "win32") {
+    for (const key of Object.keys(env)) if (key.toLowerCase() === "psmodulepath") delete env[key];
+  }
+  return env;
+};
+
+export const powershellAvailable = (engine = powershell, env = process.env) =>
+  spawnSync(engine, ["-NoProfile", "-NonInteractive", "-Command", "$PSVersionTable.PSVersion.ToString()"], { encoding: "utf8", env }).status === 0;
diff --git a/tests/helpers/scratch.mjs b/tests/helpers/scratch.mjs
index 09e709ed1..fc351a189 100644
--- a/tests/helpers/scratch.mjs
+++ b/tests/helpers/scratch.mjs
@@ -2,15 +2,28 @@
    the directory with mkdtemp under the OS tmpdir and remove exactly that
    directory afterwards, never a path a caller could point elsewhere. */
 
+import { mkdtempSync, rmSync } from "node:fs";
 import { promises as fs } from "node:fs";
 import os from "node:os";
 import path from "node:path";
 
-const remove = async (root) => {
+const assertScratch = root => {
   if (!path.resolve(root).startsWith(path.resolve(os.tmpdir()) + path.sep)) throw new Error(`Scratch directory escaped the tmpdir: ${root}`);
+};
+const remove = async root => {
+  assertScratch(root);
   await fs.rm(root, { recursive: true, force: true });
 };
 
+export const scratchDirSync = (t, prefix) => {
+  const root = mkdtempSync(path.join(os.tmpdir(), prefix));
+  t.after(() => {
+    assertScratch(root);
+    rmSync(root, { recursive: true, force: true });
+  });
+  return root;
+};
+
 /* Runs `fn(root)` and removes `root` when it settles. */
 export const withScratch = async (prefix, fn) => {
   const root = await fs.mkdtemp(path.join(os.tmpdir(), prefix));
diff --git a/tests/helpers/tokens.mjs b/tests/helpers/tokens.mjs
new file mode 100644
index 000000000..61c4ab1b2
--- /dev/null
+++ b/tests/helpers/tokens.mjs
@@ -0,0 +1,7 @@
+import { readJson } from "../../scripts/lib/fs.mjs";
+
+export const loadTokenExports = () => readJson("exports/tokens.resolved.json");
+export const defaultTokens = async () => {
+  const exported = await loadTokenExports();
+  return exported.profiles[exported.defaultProfile].tokens;
+};
diff --git a/tests/node-helpers.test.js b/tests/node-helpers.test.js
new file mode 100644
index 000000000..fe851c070
--- /dev/null
+++ b/tests/node-helpers.test.js
@@ -0,0 +1,47 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { existsSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { rgb, rgbToHex, rgbCssToHex, colorValue } from "../scripts/lib/color.mjs";
+import { hexToColor, TokenError } from "../scripts/lib/tokens.mjs";
+import { escapeHtml } from "../scripts/lib/markup.mjs";
+import { keyIndex } from "../packages/ui/src/internal/dom.js";
+import { scratchDirSync, withScratch } from "./helpers/scratch.mjs";
+import { readJsonWithBom } from "./helpers/json.mjs";
+
+test("byte colour conversion and analytical precision remain distinct from token authoring", () => {
+  assert.deepEqual(rgb("#a3676b"), [163, 103, 107]);
+  assert.equal(rgbToHex(rgb("#a3676b")), "#a3676b");
+  assert.equal(rgbCssToHex("rgba(163, 103, 107, 0.5)"), "#a3676b");
+  assert.equal(colorValue("#a3676b").components[0], 163 / 255);
+  assert.equal(hexToColor("#A3676B").components[0], 0.6392);
+  assert.throws(() => hexToColor("bad"), TokenError);
+  assert.equal(escapeHtml(`<a x="'">&`), "&lt;a x=&quot;&#39;&quot;&gt;&amp;");
+});
+
+test("keyboard movement wraps menus and toolbars but clamps trees and tables", () => {
+  const move = (key, index, wrap) => keyIndex({ key, index, length: 3, wrap });
+  assert.equal(move("ArrowUp", 0, true), 2);
+  assert.equal(move("ArrowDown", 2, true), 0);
+  assert.equal(move("ArrowUp", 0, false), 0);
+  assert.equal(move("ArrowDown", 2, false), 2);
+  for (const wrap of [false, true]) {
+    assert.equal(move("Home", 2, wrap), 0);
+    assert.equal(move("End", 0, wrap), 2);
+    assert.equal(move("ArrowDown", 1, wrap), 2);
+  }
+  assert.equal(keyIndex({ key: "ArrowLeft", index: 2, length: 3, next: "ArrowLeft", previous: "ArrowRight" }), 0);
+});
+
+test("scratch cleanup covers rejection and synchronous fixture teardown", async () => {
+  let root;
+  await assert.rejects(withScratch("node-helper-", async dir => { root = dir; throw new Error("fixture failed"); }), /fixture failed/);
+  assert.equal(existsSync(root), false);
+  let teardown;
+  const sync = scratchDirSync({ after: callback => { teardown = callback; } }, "node-helper-");
+  const file = path.join(sync, "bom.json");
+  writeFileSync(file, '\uFEFF{"value":1}');
+  assert.deepEqual(readJsonWithBom(file), { value: 1 });
+  teardown();
+  assert.equal(existsSync(sync), false);
+});
diff --git a/tests/node-regressions.test.js b/tests/node-regressions.test.js
new file mode 100644
index 000000000..08824a313
--- /dev/null
+++ b/tests/node-regressions.test.js
@@ -0,0 +1,53 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { pathToFileURL } from "node:url";
+import path from "node:path";
+import { readJson, readText, repoRoot } from "../scripts/lib/fs.mjs";
+import { git } from "../scripts/tooling/git.mjs";
+import { uiConsumptionGuide, packageReadmeGenerator } from "../scripts/lib/generators.mjs";
+import { luminanceHex } from "../scripts/lib/contrast.mjs";
+
+/* The optional revision reads the same regression inputs from Git, without
+   creating a second checkout or changing this worktree. */
+const revision = process.env.THEME_REGRESSION_REVISION;
+const sourceOf = file => revision ? git(["show", `${revision}:${file}`]) : readText(file);
+const moduleOf = async file => {
+  if (!revision) return import(pathToFileURL(path.join(repoRoot, file)));
+  const location = pathToFileURL(path.join(repoRoot, file));
+  const source = (await sourceOf(file)).replace(/^(import .+? from |export .+? from )(["'])(\.[^"']+)\2;$/gm,
+    (_, prefix, quote, relative) => `${prefix}${quote}${new URL(relative, location).href}${quote};`);
+  return import(`data:text/javascript;base64,${Buffer.from(source).toString("base64")}`);
+};
+
+test("R-a: every install and copy command pins the manifest package version", async () => {
+  const guide = await sourceOf("docs/ui-consumption.md");
+  const manifest = await readJson("theme.json");
+  const pins = [...guide.matchAll(/(?:@j3w1\/ui@|j3w1-ui-)(\d+\.\d+\.\d+)/g)].map(match => match[1]);
+  assert.equal(pins.length, 4);
+  assert.deepEqual(pins, Array(4).fill(manifest.version));
+  const future = uiConsumptionGuide(guide, "99.0.0");
+  assert.equal([...future.matchAll(/99\.0\.0/g)].length, 4);
+  const result = await packageReadmeGenerator.run({ check: true, manifest: { ...manifest, version: "99.0.0" } });
+  assert.ok(result.changed.includes("docs/ui-consumption.md"), "check mode detects command drift in the source guide");
+  assert.ok(result.changed.includes("packages/ui/README.md"));
+});
+
+test("R-l: encoded port brightness keeps its bytes and is named separately from WCAG luminance", async () => {
+  const helpers = await moduleOf("scripts/lib/port-artifacts.mjs");
+  assert.equal(typeof helpers.encodedBrightness, "function");
+  assert.equal("luminance" in helpers, false, "encoded brightness must not claim WCAG luminance");
+  assert.equal(helpers.encodedBrightness("#808080"), 128 / 255);
+  assert.ok(luminanceHex("#808080") < 0.22);
+});
+
+test("R-m: the builder and local workflow reserve their single primary for the main submit", async () => {
+  const { builderMarkup, workflowMarkup } = await moduleOf("packages/ui/src/examples/form-markup.mjs");
+  for (const markup of [builderMarkup("regression"), workflowMarkup("regression")]) {
+    const buttons = [...markup.matchAll(/<button\b[^>]*>/g)].map(match => match[0]);
+    assert.ok(buttons.length > 1);
+    assert.doesNotMatch(markup, /\bbutton-primary\b/);
+    const primaries = buttons.filter(button => /class="button"/.test(button));
+    assert.equal(primaries.length, 1, "secondary tasks must not introduce additional filled primary buttons");
+    assert.match(primaries[0], /type="submit".*data-event="submit"/);
+  }
+});
diff --git a/tests/obsidian-android-install.test.js b/tests/obsidian-android-install.test.js
index 5eee0514e..024c25ffc 100644
--- a/tests/obsidian-android-install.test.js
+++ b/tests/obsidian-android-install.test.js
@@ -1,3 +1,4 @@
+import { sha256Hex } from "../scripts/lib/host-install/files.mjs";
 /* The Android installer, ports/obsidian/install-android.sh, run for real
    against scratch vaults. A stub curl serves fixture files (the committed
    dist artifacts unless a case changes them), so nothing reaches the
@@ -8,13 +9,11 @@
 
 import assert from "node:assert/strict";
 import { spawnSync } from "node:child_process";
-import { createHash } from "node:crypto";
 import { accessSync, constants, promises as fs } from "node:fs";
-import os from "node:os";
 import path from "node:path";
 import test from "node:test";
 import { readText, repoRoot } from "../scripts/lib/fs.mjs";
-import { scratchDir } from "./helpers/scratch.mjs";
+import { withScratch, scratchDir } from "./helpers/scratch.mjs";
 
 const SCRIPT = path.join(repoRoot, "ports/obsidian/install-android.sh");
 const BASE = "https://j3w1.github.io/theme/ports/obsidian/";
@@ -42,15 +41,10 @@ const SHELLS = [
    ash runs its own applets instead, so there those cases cannot inject a
    fault; they are skipped with that reason rather than passed. */
 const STUB_FREE = "this shell runs its own mv/rm applets, so PATH fault stubs cannot reach it";
-const interposes = async (shell) => {
-  const dir = await fs.mkdtemp(path.join(os.tmpdir(), "j3w1-probe-"));
-  try {
+const interposes = shell => withScratch("j3w1-probe-", async dir => {
     await fs.writeFile(path.join(dir, "mv"), "#!/bin/sh\nexit 7\n", { mode: 0o755 });
     return spawnSync(shell.command, [...shell.args, "-c", "mv a b"], { cwd: dir, env: { PATH: dir } }).status === 7;
-  } finally {
-    await fs.rm(dir, { recursive: true, force: true });
-  }
-};
+});
 for (const shell of SHELLS) shell.interposes = shell.command ? await interposes(shell) : false;
 
 const CURL = `#!/bin/sh
@@ -93,7 +87,7 @@ for arg; do case $arg in */.j3w1-backup-*) exit 1 ;; esac; done
 exec "$REAL_RM" "$@"
 `;
 
-const sha = (bytes) => createHash("sha256").update(bytes).digest("hex");
+const sha = (bytes) => sha256Hex(bytes);
 const snapshot = async (dir) => {
   const out = {};
   const walk = async (rel) => {
diff --git a/tests/obsidian-cascade.test.js b/tests/obsidian-cascade.test.js
index 301f2f7db..c66ad4c00 100644
--- a/tests/obsidian-cascade.test.js
+++ b/tests/obsidian-cascade.test.js
@@ -1,5 +1,6 @@
 /* Source-derived structural checks on synthetic ancestry/state fixtures.
    No running Obsidian, device, browser or manual accessibility pass is implied. */
+import { colorValue } from "../scripts/lib/color.mjs";
 import assert from "node:assert/strict";
 import test from "node:test";
 import postcss from "postcss";
@@ -17,7 +18,7 @@ const role = name => toCss(resolved.get(name).type, resolved.get(name).resolved)
 const color = hex => {
   if (hex === "rgb(0 0 0 / 0%)") return { colorSpace: "srgb", components: [0, 0, 0], alpha: 0, hex: "#000000" };
   assert.match(hex, /^#[0-9a-f]{6}$/);
-  return { colorSpace: "srgb", components: [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16) / 255), alpha: 1, hex };
+  return colorValue(hex);
 };
 const pair = (fg, bg, min = 4.5) => evaluatePair({ fg: color(fg), bg: color(bg), surface: color(role("color.surface.overlay")), min });
 const nativeCss = version => {
diff --git a/tests/port-artifacts.test.js b/tests/port-artifacts.test.js
index 7f47dc5de..8ab5cb3d9 100644
--- a/tests/port-artifacts.test.js
+++ b/tests/port-artifacts.test.js
@@ -13,7 +13,7 @@ import test from "node:test";
 import { parse } from "yaml";
 import { readJson, readText } from "../scripts/lib/fs.mjs";
 import { validatePorts } from "../scripts/lib/validators.mjs";
-import { assertHostMapping, GHOSTTY_KEYS, hostEntries, PORT_EMITTERS, WARP_YAML_KEYS, luminance } from "../scripts/lib/port-artifacts.mjs";
+import { assertHostMapping, GHOSTTY_KEYS, hostEntries, PORT_EMITTERS, WARP_YAML_KEYS, encodedBrightness } from "../scripts/lib/port-artifacts.mjs";
 import { parsePlist } from "../scripts/lib/host-install/plist.mjs";
 import { downloadsTable } from "../scripts/lib/exports.mjs";
 import { PORT_FORMATS } from "../schemas/port.mjs";
@@ -119,7 +119,7 @@ for (const entry of ports.filter(({ port }) => !["obsidian-theme", "windows-them
       // Orca's Import from YAML: hex colours, background + foreground + an ANSI slot, dark below 0.55.
       for (const key of WARP_YAML_KEYS) if (at(key)) assert.match(at(key), /^#[0-9a-f]{6}$/);
       assert.equal(WARP_YAML_KEYS.filter((key) => key.startsWith("terminal_colors.")).map(at).filter(Boolean).length, 16);
-      assert.ok(luminance(theme.background) < 0.55);
+      assert.ok(encodedBrightness(theme.background) < 0.55);
     } else {
       const got = ghostty(text);
       assert.deepEqual([...got.keys()].sort(), [...want.keys()].sort());
diff --git a/tests/port-preservation.test.js b/tests/port-preservation.test.js
index cac533ba3..d8bceb539 100644
--- a/tests/port-preservation.test.js
+++ b/tests/port-preservation.test.js
@@ -1,7 +1,7 @@
+import { sha256Hex } from "../scripts/lib/host-install/files.mjs";
 /* Same-input renderer regression. The source prepares 3.1.0 separately;
    these calls retain the 3.0.0 input version to isolate the envelope refactor. */
 import assert from "node:assert/strict";
-import { createHash } from "node:crypto";
 import test from "node:test";
 import { readJson, exists } from "../scripts/lib/fs.mjs";
 import { loadResolvedProfile, toResolvedExport } from "../scripts/lib/tokens.mjs";
@@ -28,5 +28,5 @@ for (const fixture of baseline.files) test(`${fixture.path}: identical 3.0.0 inp
   assert.equal(artifacts.length, 1);
   const bytes = Buffer.from(artifacts[0].text);
   assert.equal(bytes.length, fixture.bytes);
-  assert.equal(createHash("sha256").update(bytes).digest("hex"), fixture.sha256);
+  assert.equal(sha256Hex(bytes), fixture.sha256);
 });
diff --git a/tests/readable-heritage.test.js b/tests/readable-heritage.test.js
index 944d3128b..1fa6b15cd 100644
--- a/tests/readable-heritage.test.js
+++ b/tests/readable-heritage.test.js
@@ -1,26 +1,19 @@
 import test from "node:test";
 import assert from "node:assert/strict";
-import { readFile } from "node:fs/promises";
+import { loadTokenExports } from "./helpers/tokens.mjs";
+import { hexOf as tokenHex } from "../scripts/lib/color.mjs";
+import { contrastHex as contrast } from "../scripts/lib/contrast.mjs";
 import { HERITAGE_ANSI } from "../schemas/roles.mjs";
 
 /* D-029: the default profile carries the readable heritage sixteen and two
    lifted syntax reds; heritage-ansi keeps the historical values exactly. */
 
-const resolved = JSON.parse(await readFile(new URL("../exports/tokens.resolved.json", import.meta.url), "utf8"));
+const resolved = await loadTokenExports();
 const hexOf = (profile, path) => {
   const token = resolved.profiles[profile].tokens[path];
   assert.ok(token, `${profile}: ${path} exists`);
-  return token.value.hex;
+  return tokenHex(token);
 };
-const luminance = (hex) => {
-  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-};
-const contrast = (a, b) => {
-  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
-  return (hi + 0.05) / (lo + 0.05);
-};
-
 const HERITAGE_SYNTAX = { keyword: "#f73f35", tag: "#f73f35", property: "#e53935", heading: "#e53935", invalid: "#e53935" };
 
 test("heritage-ansi keeps every terminal slot and the lifted syntax reds at their historical values", () => {
diff --git a/tests/recipes.test.js b/tests/recipes.test.js
index 4f602510c..208498e73 100644
--- a/tests/recipes.test.js
+++ b/tests/recipes.test.js
@@ -24,6 +24,23 @@ test("recipe manifests identify maintained dependencies and byte-identical outpu
   assert.throws(() => recipeDependenciesSchema(z).parse({ ...declarations, recipes: declarations.recipes.map((r) => ({ ...r, behavior: ["missing.js"] })) }));
 });
 
+test("recipe styles inline their relative imports and digest every imported file", async () => {
+  const declarations = recipeDependenciesSchema(z).parse(await readJson("site/recipes.json"));
+  for (const recipe of declarations.recipes) {
+    const metadata = await readJson(`exports/recipes/${recipe.id}/manifest.json`);
+    const css = await readText(`exports/recipes/${recipe.id}/component.css`);
+    assert.doesNotMatch(css, /@import/, recipe.id);
+    for (const style of recipe.styles) {
+      for (const [, imported] of (await readText(style)).matchAll(/@import\s+["']([^"']+)["']/g)) {
+        const file = new URL(imported, `file:///${style}`).pathname.slice(1);
+        assert.ok(metadata.source.files[file], `${recipe.id}: ${file} is a digested source`);
+      }
+    }
+  }
+  /* The button recipe takes its tones from the shared partial. */
+  assert.match(await readText("exports/recipes/button/component.css"), /\.j3w1-recipe \.button-secondary[^{]*\{[^}]*--_bg: var\(--color-action-secondary-bg\)/);
+});
+
 test("instances preserve every local relationship and reject ambiguous markup", () => {
   const source = '<label for="name">Name</label><input id="name" aria-describedby="help error"><p id="help">Help</p><p id="error">Error</p>';
   const first = instantiateRecipe(source, "first");
diff --git a/tests/site-source.test.js b/tests/site-source.test.js
index b561b1115..d3ef1cd4f 100644
--- a/tests/site-source.test.js
+++ b/tests/site-source.test.js
@@ -50,3 +50,25 @@ test("anchors are only produced by scripts/lib/anchors.mjs", async () => {
     for (const m of text.matchAll(/id=\{?["'`](c|f|d|t|s)-\$\{/g)) assert.fail(`${file}: hand-built anchor ${m[0]}`);
   }
 });
+
+test("demonstration fragments resolve locally while historical records and strict IDREFs stay exact (R-j)", async () => {
+  const { renderSpecimenMarkup } = await import("../scripts/lib/specimen-markup.mjs");
+  const { namespaceMarkup } = await import("../scripts/lib/markup.mjs");
+  const { parseFragment } = await import("parse5");
+  const source = '<a href="#demo">Demo</a><a id="own" href="#application">Own</a><a href="#panel">Panel</a><div id="panel"></div>';
+  const live = renderSpecimenMarkup(source, "live");
+  assert.match(live, /href="#demo-live" id="demo-live"/);
+  assert.match(live, /id="own-live" href="#own-live"/);
+  assert.match(live, /href="#panel-live"/);
+  const historical = renderSpecimenMarkup(source, "record", { inert: true, resolveLinks: false });
+  assert.match(historical, /href="#demo-record" tabindex="-1"/);
+  assert.doesNotMatch(historical, /id="demo-record"/);
+  assert.throws(() => namespaceMarkup(parseFragment('<label for="missing">Label</label>'), (id) => id), /Unresolved markup ID reference/);
+});
+
+test("code-editor whitespace remains decorative while historical bytes stay exact", async () => {
+  const { renderSpecimenMarkup } = await import("../scripts/lib/specimen-markup.mjs");
+  const source = '<span class="code-editor-ws" aria-hidden="true">··</span>';
+  assert.equal(renderSpecimenMarkup(source, "graphic"), '<span class="code-editor-ws" aria-hidden="true" data-whitespace="··"></span>');
+  assert.equal(renderSpecimenMarkup(source, "record", { decorations: false }), source);
+});
diff --git a/tests/spec-prose.test.js b/tests/spec-prose.test.js
new file mode 100644
index 000000000..a48609c30
--- /dev/null
+++ b/tests/spec-prose.test.js
@@ -0,0 +1,27 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { listFiles, readText } from "../scripts/lib/fs.mjs";
+import { splitFrontmatter } from "../scripts/lib/spec.mjs";
+
+/* Contrast ratios are computed from the tokens (frontmatter contrast pairs,
+   exports/contrast.md). Spec prose names only the floors; a hand-written ratio
+   goes stale the moment a value changes. */
+const FLOORS = new Set(["3:1", "4.5:1", "7:1"]);
+const RATIO = /(?<![\d.])\d+(?:\.\d+)?:1(?![\d.])/g;
+
+const strays = (text) => [...text.matchAll(RATIO)].map((m) => m[0]).filter((r) => !FLOORS.has(r));
+
+test("spec prose names no contrast ratio other than the floors", async () => {
+  const problems = [];
+  const docs = await listFiles("spec", { filter: (f) => /^spec\/[a-z-]+\.md$/.test(f) && f !== "spec/decisions.md" });
+  for (const file of docs) for (const r of strays(await readText(file))) problems.push(`${file}: ${r}`);
+  for (const file of await listFiles("spec/components", { filter: (f) => f.endsWith(".md") })) {
+    const { body } = splitFrontmatter(await readText(file), file);
+    for (const r of strays(body)) problems.push(`${file}: ${r}`);
+  }
+  assert.deepEqual(problems, []);
+});
+
+test("the ratio pattern catches stray ratios and spares the floors", () => {
+  assert.deepEqual(strays("4.5:1 text, 3:1 rings, 7:1 AAA; was 9.28:1 and 10:1"), ["9.28:1", "10:1"]);
+});
diff --git a/tests/task-consumption.test.js b/tests/task-consumption.test.js
index a7d0a0255..9e58ed1d8 100644
--- a/tests/task-consumption.test.js
+++ b/tests/task-consumption.test.js
@@ -1,7 +1,7 @@
+import { sha256 } from "../scripts/lib/fs.mjs";
 import test from "node:test";
 import assert from "node:assert/strict";
 import { readFile } from "node:fs/promises";
-import { createHash } from "node:crypto";
 import { z } from "zod";
 import { lockSchema } from "../schemas/lock.mjs";
 
@@ -20,7 +20,7 @@ test("composed acceptance retains the reviewed candidate and upstream lock ident
   assert.deepEqual(lock.integration, manifest.request.integration);
   for (const [file, digest] of Object.entries(lock.exports)) assert.equal(digest, manifest.source.inputs[file], file);
   for (const [file, digest] of Object.entries(provenance.candidateDigests)) {
-    assert.equal("sha256-" + createHash("sha256").update(await readFile(directory + file)).digest("base64"), digest, file);
+    assert.equal(sha256(await readFile(directory + file)), digest, file);
   }
   assert.ok(lock.deviations.length > 0, "Actual downstream omissions and ambiguities remain recorded");
 });
diff --git a/tests/telegram-port.test.js b/tests/telegram-port.test.js
index 925feae15..b90994280 100644
--- a/tests/telegram-port.test.js
+++ b/tests/telegram-port.test.js
@@ -1,4 +1,5 @@
 // Native format and semantic contracts; these are not real-import evidence.
+import { luminanceRgb as luminance } from "../scripts/lib/contrast.mjs";
 import assert from "node:assert/strict";
 import test from "node:test";
 import { readFile } from "node:fs/promises";
@@ -117,7 +118,7 @@ test("emission is byte-identical across repeats and time zones", () => {
 });
 
 test("every token and upstream key has one classification with direct, non-redundant inheritance", () => {
-  assert.equal(resolved.size, 352);
+  assert.equal(resolved.size, 356);
   assertPortMapping({ ...port, mapping }, resolved.keys());
   assertCapabilities({ ...port, mapping }, capabilities);
   const keys = Object.values(mapping.mappings).flat(); assert.equal(new Set(keys).size, keys.length);
@@ -327,7 +328,6 @@ test("wallpaper, solid bubbles, rose messages, chrome emphasis and avatars keep
     for (const key of [incoming, outgoing]) for (const end of wallpaper) assert.notDeepEqual(rgba(target, key), end, `${target}:${key} differs from the wallpaper`);
     // Lightness ladder: wallpaper < incoming < outgoing, so both bubbles read
     // as raised shapes over the whole wallpaper gradient.
-    const luminance = ([r, g, b]) => [r, g, b].map(v => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }).reduce((sum, v, i) => sum + v * [0.2126, 0.7152, 0.0722][i], 0);
     assert.ok(Math.max(...wallpaper.map(luminance)) < luminance(rgba(target, incoming)), `${target}: incoming is lighter than the wallpaper`);
     assert.ok(luminance(rgba(target, incoming)) < luminance(rgba(target, outgoing)), `${target}: outgoing is lighter than incoming`);
   }
@@ -349,7 +349,6 @@ test("on-fill foregrounds retain contrast, near-white stays restricted and inter
   assert.equal(effective("desktop", "historyFileThumbRadialFg").role, "color.text.highlight", "the thumbnail radial control inherits the same contrast-critical highlight");
   // Near-white by relative luminance, not by literal value, so a token change
   // cannot silently widen it. Bright rose (text.bright) stays well below.
-  const luminance = ([r, g, b]) => [r, g, b].map(v => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }).reduce((sum, v, i) => sum + v * [0.2126, 0.7152, 0.0722][i], 0);
   // Fills a near-white glyph may sit on, plus the dark media scrim behind
   // loader icons over photos.
   const fills = new Set(["color.action.primary.bg", "color.action.primary.hover-bg", "color.action.primary.pressed-bg", "color.interaction.selection.bg", "color.interaction.selection.inactive-bg", "color.interaction.hover.bg-strong", "color.status.danger.fill", "color.interaction.text-selection.bg", "color.surface.backdrop"]);
diff --git a/tests/telegram-publish.test.js b/tests/telegram-publish.test.js
index 3f21d4f3e..62e255aeb 100644
--- a/tests/telegram-publish.test.js
+++ b/tests/telegram-publish.test.js
@@ -1,8 +1,8 @@
+import { scratchDir } from "./helpers/scratch.mjs";
 import test from "node:test";
 import assert from "node:assert/strict";
 import fs from "node:fs/promises";
 import path from "node:path";
-import os from "node:os";
 import { spawnSync } from "node:child_process";
 import { parse } from "yaml";
 import { converge, digest, run, redactor, stateDirectory, atomicJson, gitAdapter, parseArgs, liveTransport } from "../ports/telegram/publish.mjs";
@@ -64,8 +64,7 @@ const core = (transport, extra = {}) => converge({ transport, artifacts, cloud,
 const writes = transport => transport.events.filter(e => ["create", "update", "upload"].includes(e[0]));
 
 async function fixture(t, { configured = true, transport = mock(), localCloud = cloud } = {}) {
-  const root = await fs.mkdtemp(path.join(os.tmpdir(), "telegram-publisher-"));
-  t.after(() => fs.rm(root, { recursive: true, force: true }));
+  const root = await scratchDir(t, "telegram-publisher-");
   const repo = path.join(root, "repo");
   const stateRoot = path.join(root, "private");
   await fs.mkdir(path.join(repo, "ports/telegram"), { recursive: true });
diff --git a/tests/windows-atomic.test.js b/tests/windows-atomic.test.js
index 7da119a95..582fc90e0 100644
--- a/tests/windows-atomic.test.js
+++ b/tests/windows-atomic.test.js
@@ -1,11 +1,11 @@
+import { scratchDirSync } from "./helpers/scratch.mjs";
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import fs from 'node:fs';
-import os from 'node:os';
 import path from 'node:path';
 import {replaceDurableTemp,writeDurableTemp} from '../scripts/lib/host-install/files.mjs';
 test('Windows transient sharing refusal retries atomic replacement with fresh path validation',t=>{
- const folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-atomic-'));t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const folder=scratchDirSync(t, 'j3w1-atomic-');
  const target=path.join(folder,'journal.json');fs.writeFileSync(target,'before');const temp=writeDurableTemp(target,'after');
  let calls=0,validations=0,sleeps=0;
  replaceDurableTemp(temp,target,{platform:'win32',beforeAttempt:()=>validations++,sleep:()=>sleeps++,rename:(a,b)=>{
@@ -15,7 +15,7 @@ test('Windows transient sharing refusal retries atomic replacement with fresh pa
  assert.equal(fs.readFileSync(target,'utf8'),'after');assert.equal(validations,3);assert.equal(sleeps,2);assert.ok(!fs.existsSync(temp));
 });
 test('permanent replacement and path-policy failures retain the old file and never delete it',t=>{
- const folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-atomic-'));t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const folder=scratchDirSync(t, 'j3w1-atomic-');
  const target=path.join(folder,'journal.json');fs.writeFileSync(target,'before');const temp=writeDurableTemp(target,'after');
  let calls=0;
  assert.throws(()=>replaceDurableTemp(temp,target,{platform:'win32',attempts:3,sleep:()=>{},rename:()=>{calls++;throw Object.assign(Error('denied'),{code:'EACCES'});}}),/denied/);
diff --git a/tests/windows-font.test.js b/tests/windows-font.test.js
index a62a941d0..d15313dcb 100644
--- a/tests/windows-font.test.js
+++ b/tests/windows-font.test.js
@@ -1,15 +1,16 @@
+import { powershell as pwsh, powershellAvailable } from "./helpers/powershell.mjs";
+import { scratchDirSync } from "./helpers/scratch.mjs";
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import fs from 'node:fs';
-import os from 'node:os';
 import path from 'node:path';
 import {spawnSync} from 'node:child_process';
 import {repoRoot} from '../scripts/lib/fs.mjs';
-const pwsh=process.env.J3W1_PWSH??(process.platform==='win32'?'pwsh.exe':'pwsh');
-const available=spawnSync(pwsh,['--version']).status===0;
+
+const available=powershellAvailable();
 if(!available&&process.env.CI)test('font dependency tests require PowerShell',()=>assert.fail('PowerShell 7.4+ is required'));
 test('font dependency resumes an interrupted owned install and rejects failed or corrupt downloads',{skip:available?false:'PowerShell unavailable'},t=>{
- const root=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-font-test-'));t.after(()=>fs.rmSync(root,{recursive:true,force:true}));
+ const root=scratchDirSync(t, 'j3w1-font-test-');
  const result=spawnSync(pwsh,['-NoProfile','-NonInteractive','-File',path.join(repoRoot,'tests/helpers/windows-font-fixture.ps1'),'-Installer',path.join(repoRoot,'ports/windows/install.ps1'),'-Root',root],{encoding:'utf8',timeout:30000});
  assert.equal(result.status,0,result.stdout+'\n'+result.stderr);
 });
diff --git a/tests/windows-install.test.js b/tests/windows-install.test.js
index 6be3d83fe..823fd05da 100644
--- a/tests/windows-install.test.js
+++ b/tests/windows-install.test.js
@@ -1,21 +1,21 @@
+import { powershell as pwsh, powershellAvailable } from "./helpers/powershell.mjs";
+import { readJsonWithBom as read } from "./helpers/json.mjs";
+import { scratchDirSync } from "./helpers/scratch.mjs";
 import assert from 'node:assert/strict';
 import test from 'node:test';
 import fs from 'node:fs';
-import os from 'node:os';
 import path from 'node:path';
 import {spawnSync} from 'node:child_process';
 import {repoRoot} from '../scripts/lib/fs.mjs';
 
-const pwsh=process.env.J3W1_PWSH??(process.platform==='win32'?'pwsh.exe':'pwsh');
-const probe=spawnSync(pwsh,['--version'],{encoding:'utf8'});
-const unavailable=probe.status!==0;
+
+const unavailable=!powershellAvailable();
 if(unavailable&&process.env.CI)test('Windows lifecycle tests require PowerShell',()=>assert.fail('PowerShell 7.4+ is required; set J3W1_PWSH'));
 const installer=path.join(repoRoot,'ports/windows/install.ps1');
-const read=p=>JSON.parse(fs.readFileSync(p,'utf8').replace(/^\uFEFF/,''));
+
 const write=(p,x)=>{fs.mkdirSync(path.dirname(p),{recursive:true});fs.writeFileSync(p,typeof x==='string'?x:JSON.stringify(x));};
 function fixture(t){
- const root=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-windows-wrapper-'));
- t.after(()=>fs.rmSync(root,{recursive:true,force:true}));
+ const root=scratchDirSync(t, 'j3w1-windows-wrapper-');
  const source=path.join(root,'source'),state=path.join(root,'state');
  fs.mkdirSync(source);fs.cpSync(path.join(repoRoot,'ports/windows'),path.join(source,'ports/windows'),{recursive:true});
  const env={...process.env,LOCALAPPDATA:path.join(root,'local'),APPDATA:path.join(root,'roaming'),HOME:path.join(root,'home'),USERPROFILE:path.join(root,'home'),XDG_CONFIG_HOME:path.join(root,'config'),XDG_CACHE_HOME:path.join(root,'cache'),POWERSHELL_TELEMETRY_OPTOUT:'1',NO_COLOR:'1'};
@@ -147,8 +147,7 @@ test('Prepare retains verified release and returns a plan without mutating theme
 });
 
 test('native Startup link preserves long explicit guard arguments without writing Startup',{skip:process.platform!=='win32'?'Native Windows shell-link API required':false},t=>{
- const folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1 startup link test '));
- t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const folder=scratchDirSync(t, 'j3w1 startup link test ');
  const probe=spawnSync(pwsh,['-NoProfile','-Command','[Diagnostics.Process]::GetCurrentProcess().MainModule.FileName'],{encoding:'utf8',windowsHide:true,timeout:15000});
  assert.equal(probe.status,0,probe.stderr);
  const target=probe.stdout.trim(),working=path.join(folder,'guard source');fs.mkdirSync(working);
diff --git a/tests/windows-markdown.test.js b/tests/windows-markdown.test.js
index 7ada1330a..23c7ff57b 100644
--- a/tests/windows-markdown.test.js
+++ b/tests/windows-markdown.test.js
@@ -1,14 +1,15 @@
+import { defaultTokens } from "./helpers/tokens.mjs";
+import { sha256Hex } from "../scripts/lib/host-install/files.mjs";
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import fs from 'node:fs';
 import path from 'node:path';
-import {createHash} from 'node:crypto';
 import {repoRoot} from '../scripts/lib/fs.mjs';
 import {windowsMarkdownArtifacts} from '../scripts/lib/windows-markdown.mjs';
 
 const port=path.join(repoRoot,'ports/windows');
 const host=JSON.parse(fs.readFileSync(path.join(port,'host.json'),'utf8'));
-const tokens=JSON.parse(fs.readFileSync(path.join(repoRoot,'exports/tokens.resolved.json'),'utf8')).profiles.default.tokens;
+const tokens=await defaultTokens();
 const resolved=new Map(Object.entries(tokens).map(([role,t])=>[role,{type:t.type,resolved:t.value}]));
 
 test('Markdown renders digits in token and digest placeholders and stays in every admitted CSS extent',()=>{
@@ -29,7 +30,7 @@ test('Markdown source and palette are manifest-pinned and participate in managed
  const manifest=JSON.parse(fs.readFileSync(path.join(port,'dist/install-manifest.json'),'utf8'));
  const mod=settings.bundledMods.find(m=>m.id==='j3w1-powertoys-markdown');assert.ok(mod);
  for(const file of [mod.path,'dist/j3w1-powertoys-markdown.json','dist/markdown-theme.css']){
-  const digest=createHash('sha256').update(fs.readFileSync(path.join(port,file))).digest('hex');
+  const digest=sha256Hex(fs.readFileSync(path.join(port,file)));
   assert.equal(manifest.files.find(f=>f.path===file)?.sha256,digest);
   if(file===mod.path)assert.equal(mod.sha256,digest);
  }
diff --git a/tests/windows-menu.test.js b/tests/windows-menu.test.js
index 39cd95dc2..6eb97de2c 100644
--- a/tests/windows-menu.test.js
+++ b/tests/windows-menu.test.js
@@ -1,3 +1,4 @@
+import { defaultTokens } from "./helpers/tokens.mjs";
 import assert from 'node:assert/strict';
 import test from 'node:test';
 import {readJson} from '../scripts/lib/fs.mjs';
@@ -9,7 +10,7 @@ const ids=['windows-11-taskbar-styler','windows-11-start-menu-styler',
 test('every supported shell host receives the common menu controls and resource palette',async()=>{
  const host=await readJson('ports/windows/host.json');
  const mapping=await readJson('ports/windows/mapping.json');
- const tokens=(await readJson('exports/tokens.resolved.json')).profiles.default.tokens;
+ const tokens=await defaultTokens();
  assert.deepEqual(host.stylers.map(x=>x.id),ids);
  const expectedResources={MenuFlyoutPresenterBackground:'color.surface.raised',
   MenuFlyoutPresenterBorderBrush:'color.border.overlay',MenuFlyoutSeparatorBackground:'color.border.divider',
diff --git a/tests/windows-native.test.js b/tests/windows-native.test.js
index 7fba2463e..6794af2dd 100644
--- a/tests/windows-native.test.js
+++ b/tests/windows-native.test.js
@@ -1,7 +1,7 @@
+import { scratchDirSync } from "./helpers/scratch.mjs";
 import assert from 'node:assert/strict';
 import test from 'node:test';
 import fs from 'node:fs';
-import os from 'node:os';
 import path from 'node:path';
 import {spawnSync} from 'node:child_process';
 import {repoRoot} from '../scripts/lib/fs.mjs';
@@ -30,8 +30,7 @@ function compile(compiler,args){
  assert.equal(result.status,0,result.stdout+'\n'+result.stderr);
 }
 for(const mod of settings.bundledMods)test(`complete native DLL link: ${mod.id}`,options,t=>{
- const tools=toolchain(),folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-native-link-'));
- t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const tools=toolchain(),folder=scratchDirSync(t, 'j3w1-native-link-');
  const file=path.join(source,mod.path),output=path.join(folder,mod.id+'.dll');
  compile(tools.compiler,['-shared','-DWH_MOD',tools.library,file,'-include','windhawk_api.h',...libraries(file),'-o',output]);
  assert.ok(fs.statSync(output).size>0);
@@ -47,8 +46,7 @@ for(const [name,mod] of [
  ['markdown-background','j3w1-powertoys-markdown'],
  ['preview-host','j3w1-powertoys-markdown'],
 ])test(`native offscreen regression: ${name}`,options,t=>{
- const tools=toolchain(),folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-native-regression-'));
- t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const tools=toolchain(),folder=scratchDirSync(t, 'j3w1-native-regression-');
  const file=path.join(repoRoot,`tests/windows-${name}-native.cpp`),output=path.join(folder,name+'.exe');
  // Synthetic test executables run outside Windhawk's ModsRuntime. Link their
  // C++ runtime statically so they do not depend on Windhawk's DLL search path.
@@ -58,8 +56,7 @@ for(const [name,mod] of [
 });
 
 for(const [id,define] of [['j3w1-calculator','1'],['j3w1-notepad-native','0']])test('native app worker shutdown: '+id,options,t=>{
- const tools=toolchain(),folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-native-lifetime-'));
- t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const tools=toolchain(),folder=scratchDirSync(t, 'j3w1-native-lifetime-');
  const file=path.join(repoRoot,'tests/windows-app-lifetime-native.cpp'),output=path.join(folder,id+'.exe');
  compile(tools.compiler,['-static','-DJ3W1_TEST_CALCULATOR='+define,file,...libraries(path.join(source,'dist/'+id+'.wh.cpp')),'-o',output]);
  for(const state of ['exit-active','exit-completed','unload','reconfigure']){
@@ -69,8 +66,7 @@ for(const [id,define] of [['j3w1-calculator','1'],['j3w1-notepad-native','0']])t
 });
 
 test('native Notepad editor preservation',options,t=>{
- const tools=toolchain(),folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-native-editor-'));
- t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const tools=toolchain(),folder=scratchDirSync(t, 'j3w1-native-editor-');
  const output=path.join(folder,'notepad-editor.exe');
  compile(tools.compiler,['-static',path.join(repoRoot,'tests/windows-notepad-editor-native.cpp'),...libraries(path.join(source,'dist/j3w1-notepad-native.wh.cpp')),'-ldwrite','-o',output]);
  const result=spawnSync(output,[],{encoding:'utf8',windowsHide:true,timeout:30000});
@@ -78,8 +74,7 @@ test('native Notepad editor preservation',options,t=>{
 });
 
 test('native Calculator clock and ownership restoration',options,t=>{
- const tools=toolchain(),folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-native-calculator-'));
- t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const tools=toolchain(),folder=scratchDirSync(t, 'j3w1-native-calculator-');
  const output=path.join(folder,'calculator-ownership.exe');
  compile(tools.compiler,['-static',path.join(repoRoot,'tests/windows-calculator-ownership-native.cpp'),...libraries(path.join(source,'dist/j3w1-calculator.wh.cpp')),'-o',output]);
  for(const state of ['resource-scaling','background-transition-ownership','hover-state-palette','button-style-dispatch','cached-color-frame','composite-button-scope','clock-lifecycle','animation-frame','resource-ownership']){
@@ -88,8 +83,7 @@ test('native Calculator clock and ownership restoration',options,t=>{
  }
 });
 test('native Terminal chrome ownership and worker shutdown',options,t=>{
- const tools=toolchain(),folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-native-terminal-'));
- t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const tools=toolchain(),folder=scratchDirSync(t, 'j3w1-native-terminal-');
  const output=path.join(folder,'terminal-chrome.exe');
  compile(tools.compiler,['-static',path.join(repoRoot,'tests/windows-terminal-chrome-native.cpp'),...libraries(path.join(source,'dist/j3w1-terminal-chrome.wh.cpp')),'-o',output]);
  for(const state of ['resource-scaling','popup-load-lifecycle','background-transition-ownership','hover-state-palette','legacy-boundary','legacy-ownership','legacy-lifecycle']){
@@ -100,8 +94,7 @@ test('native Terminal chrome ownership and worker shutdown',options,t=>{
 
 
 for(const [id,paint] of [['j3w1-notepad-chrome','0'],['j3w1-paint-chrome','1']])test('native WinUI chrome ownership and worker shutdown: '+id,options,t=>{
- const tools=toolchain(),folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-native-notepad-chrome-'));
- t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const tools=toolchain(),folder=scratchDirSync(t, 'j3w1-native-notepad-chrome-');
  const output=path.join(folder,'notepad-chrome.exe');
  compile(tools.compiler,['-static','-DJ3W1_TEST_PAINT='+paint,path.join(repoRoot,'tests/windows-winui-chrome-native.cpp'),...libraries(path.join(source,'dist/'+id+'.wh.cpp')),'-o',output]);
  for(const state of ['resource-scaling','paint-type-filter','popup-load-lifecycle',...(paint==='1'?['preopen-menu-ownership']:[]),'paint-split-edge-ownership','background-transition-ownership','hover-state-palette','split-parent-bindings','window-backing-ownership','cached-color-frame','composite-button-scope','partial-init','state-ownership','resource-ownership','closed-source-backdrop','retired-control-capacity','retired-control-retry','keytip-ownership','cleanup-retry','public-caption-scope','public-caption-ownership','public-caption-window-ownership',...(paint==='1'?['paint-chrome-admission']:['notepad-chrome-admission']),'backing-admission','captured-native-backdrop',...(paint==='0'?['existing-caption-default-reset']:[]),'native-caption-capture','backdrop-passthrough','discovery-admission','discovery-lifecycle','exit-active','exit-completed','unload','reconfigure']){
@@ -111,8 +104,7 @@ for(const [id,paint] of [['j3w1-notepad-chrome','0'],['j3w1-paint-chrome','1']])
 });
 
 test('native Explorer stock folder rendering and cache lifetime',options,t=>{
- const tools=toolchain(),folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-native-folder-'));
- t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const tools=toolchain(),folder=scratchDirSync(t, 'j3w1-native-folder-');
  const output=path.join(folder,'folder.exe');
  compile(tools.compiler,['-static',path.join(repoRoot,'tests/windows-folder-glyph-native.cpp'),...libraries(path.join(source,'dist/j3w1-explorer-native.wh.cpp')),'-o',output]);
  // Real initialization must see the same supported Windows version as Explorer.
@@ -122,8 +114,7 @@ test('native Explorer stock folder rendering and cache lifetime',options,t=>{
 });
 
 test('native Settings CoreWindow discovery and ownership',options,t=>{
- const tools=toolchain(),folder=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-native-settings-'));
- t.after(()=>fs.rmSync(folder,{recursive:true,force:true}));
+ const tools=toolchain(),folder=scratchDirSync(t, 'j3w1-native-settings-');
  const output=path.join(folder,'settings-startup.exe');
  compile(tools.compiler,['-static','-municode',path.join(repoRoot,'tests/windows-settings-startup-native.cpp'),'-lbcrypt','-luser32','-o',output]);
  const result=spawnSync(output,[],{encoding:'utf8',windowsHide:true,timeout:30000});
diff --git a/tests/windows-port.test.js b/tests/windows-port.test.js
index f4d13982d..dd861ce3d 100644
--- a/tests/windows-port.test.js
+++ b/tests/windows-port.test.js
@@ -1,11 +1,13 @@
+import { readJsonWithBom as read } from "./helpers/json.mjs";
+import { defaultTokens } from "./helpers/tokens.mjs";
+import { scratchDirSync } from "./helpers/scratch.mjs";
+import { sha256Hex } from "../scripts/lib/host-install/files.mjs";
 import assert from 'node:assert/strict';
 import test from 'node:test';
 import {parse} from 'jsonc-parser';
 import fs from 'node:fs';
-import os from 'node:os';
 import path from 'node:path';
 import {spawnSync} from 'node:child_process';
-import {createHash} from 'node:crypto';
 import {repoRoot,readJson} from '../scripts/lib/fs.mjs';
 import {assertPortArtifacts} from '../scripts/lib/port-artifacts.mjs';
 import {CURSOR_NAMES,windowsStyleValue,windowsWebContentStyles,validateWindowsStylerTarget} from '../scripts/lib/windows-port.mjs';
@@ -14,8 +16,8 @@ import {flattenStylerSettings,stylerSettings} from '../ports/windows/src/compati
 
 const source=path.join(repoRoot,'ports/windows');
 const runtime=path.join(source,'dist/runtime.cjs');
-const sha=b=>createHash('sha256').update(b).digest('hex');
-const read=p=>JSON.parse(fs.readFileSync(p,'utf8').replace(/^\uFEFF/,''));
+const sha=b=>sha256Hex(b);
+
 const readConfig=p=>{const errors=[];const value=parse(fs.readFileSync(p,'utf8').replace(/^\uFEFF/,''),errors,{allowTrailingComma:true});assert.deepEqual(errors,[],`Invalid settings: ${p}`);return value;};
 const write=(p,x)=>{fs.mkdirSync(path.dirname(p),{recursive:true});fs.writeFileSync(p,typeof x==='string'?x:JSON.stringify(x,null,2)+'\n');};
 
@@ -71,8 +73,7 @@ test('Search presentation cannot hide controls, accept scripts or substitute lit
   assert.throws(()=>windowsWebContentStyles([{target:'.suggestion .details',styles:{},presentation:{'background-color':fill}}],value),/Unsupported Search presentation/);
 });
 function fixture(t) {
- const state=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-windows-test-'));
- t.after(()=>fs.rmSync(state,{recursive:true,force:true}));
+ const state=scratchDirSync(t, 'j3w1-windows-test-');
  const terminal=path.join(state,'fixture/terminal/settings.json');
  const before='\uFEFF{\n // keep this comment\n "profiles": {"list": [{"guid":"one","commandline":"keep-one","font":{"size":17},"colorScheme":"j3w1zsh"},{"guid":"two","commandline":"keep-two"}]},\n "keybindings": [{"command":"paste","keys":"ctrl+v"}],\n}\n';
  write(terminal,before);
@@ -102,8 +103,7 @@ test('Windows manifest covers every binary and executable artifact byte exactly'
 
 test('Windows native values, Terminal ANSI and styler selectors resolve from canonical roles',async()=>{
  const host=await readJson('ports/windows/host.json');
- const resolved=await readJson('exports/tokens.resolved.json');
- const tokens=resolved.profiles.default.tokens;
+ const tokens=await defaultTokens();
  const settings=await readJson('ports/windows/dist/windows-settings.json');
  for(const [key,role]of Object.entries(host.roles))assert.equal(settings.values[key],tokens[role].css,key);
  const terminal=await readJson('ports/windows/dist/terminal-fragment.json');
@@ -116,7 +116,7 @@ test('Windows native values, Terminal ANSI and styler selectors resolve from can
 
 test('Settings resource overrides retain shared brushes and stay isolated from other stylers',async()=>{
  const host=await readJson('ports/windows/host.json');
- const tokens=(await readJson('exports/tokens.resolved.json')).profiles.default.tokens;
+ const tokens=await defaultTokens();
  const settings=host.stylers.find(m=>m.id==='windows-11-settings-styler');
  const expected={SystemControlFocusVisualPrimaryBrush:'color.interaction.focus.ring',SystemControlFocusVisualSecondaryBrush:'color.surface.canvas',FocusStrokeColorOuterBrush:'color.interaction.focus.ring',FocusStrokeColorInnerBrush:'color.surface.canvas',ToolTipBackground:'color.surface.raised',ToolTipForeground:'color.text.default',ToolTipBorderBrush:'color.border.overlay',ToolTipBackgroundBrush:'color.surface.raised',ToolTipForegroundBrush:'color.text.default'};
  Object.assign(expected,{ProgressBarBackground:'color.interaction.pressed.bg',ProgressBarForeground:'color.action.primary.bg',ProgressBarBorderBrush:'color.border.control',ToggleSwitchContentForeground:'color.text.default',ToggleSwitchContentForegroundDisabled:'color.text.disabled',ToggleSwitchHeaderForeground:'color.text.default',ToggleSwitchHeaderForegroundDisabled:'color.text.disabled',ToggleSwitchKnobStrokeOn:'color.border.control'});
@@ -214,7 +214,7 @@ test('Calculator uses an exact package and separate primary, disabled and intera
 
 test('Explorer marquee settings encode canonical alpha and module compatibility',async()=>{
  const settings=await readJson('ports/windows/dist/j3w1-explorer-native.json');
- const tokens=(await readJson('exports/tokens.resolved.json')).profiles.default.tokens;
+ const tokens=await defaultTokens();
  for(const [key,role] of Object.entries((await readJson('ports/windows/host.json')).nativeExplorer)){
   if(key==='version')continue;
   assert.equal(settings[key],windowsStyleValue(key,{type:tokens[role].type,resolved:tokens[role].value}));
@@ -229,7 +229,7 @@ test('Explorer marquee settings encode canonical alpha and module compatibility'
 
 test('Explorer submenu stays on the hover palette while its child flyout is open',async()=>{
  const config=await readJson('ports/windows/dist/windows-11-file-explorer-styler.json');
- const tokens=(await readJson('exports/tokens.resolved.json')).profiles.default.tokens;
+ const tokens=await defaultTokens();
  for(const [target,opened,hover,normal,disabled] of [
   ['MenuFlyoutSubItem > Grid#LayoutRoot@CommonStates','SubMenuOpened','PointerOver','Normal','Disabled'],
   ['AppBarButton > Grid#Root@CommonStates > Border#AppBarButtonInnerBorder','OverflowSubMenuOpened','OverflowPointerOver','OverflowNormal','OverflowDisabled'],
@@ -247,7 +247,7 @@ test('Explorer submenu stays on the hover palette while its child flyout is open
 
 test('toast actions use the secondary palette across native states without changing content or geometry',async()=>{
  const payload=await readJson('ports/windows/dist/windows-11-notification-center-styler.json');
- const tokens=(await readJson('exports/tokens.resolved.json')).profiles.default.tokens;
+ const tokens=await defaultTokens();
  const button=payload.controlStyles.find(t=>t.target==='Button#VerbButton');
  const presenter=payload.controlStyles.find(t=>t.target==='Button#VerbButton > ContentPresenter@CommonStates');
  const expected=(key,role)=>`${key}=${windowsStyleValue(key,{type:tokens[role].type,resolved:tokens[role].value})}`;
@@ -317,7 +317,7 @@ test('malformed settings fail preflight before any theme write',t=>{
 });
 test('concurrent lifecycle and directory junction targets are refused',t=>{
  const f=fixture(t);write(path.join(f.state,'lifecycle.lock'),{pid:process.pid});assert.match(f.run('Apply').stderr,/Another lifecycle/);fs.unlinkSync(path.join(f.state,'lifecycle.lock'));
- const outside=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-outside-'));t.after(()=>fs.rmSync(outside,{recursive:true,force:true}));fs.symlinkSync(outside,path.join(f.state,'assets'),process.platform==='win32'?'junction':'dir');assert.match(f.run('Apply').stderr,/Reparse\/symlink/);assert.deepEqual(fs.readdirSync(outside),[]);
+ const outside=scratchDirSync(t, 'j3w1-outside-');fs.symlinkSync(outside,path.join(f.state,'assets'),process.platform==='win32'?'junction':'dir');assert.match(f.run('Apply').stderr,/Reparse\/symlink/);assert.deepEqual(fs.readdirSync(outside),[]);
 });
 
 test('named theme and layout edits preserve later additions and detect duplicate identities',t=>{
@@ -451,7 +451,7 @@ test('recoverable lock-screen image is journaled and restored; later image edits
 });
 
 test('compact cursors use a black body and canonical red edge with visible bounded hotspots',async()=>{
- const tokens=(await readJson('exports/tokens.resolved.json')).profiles.default.tokens;
+ const tokens=await defaultTokens();
  const black=tokens['color.surface.canvas'].css,red=tokens['color.border.active'].css;
  const colors=new Set([black,red]);
  for(const name of CURSOR_NAMES){
@@ -992,7 +992,7 @@ test('Paint preopening menu styles retain native structure and join the existing
 test('Quick Settings maps its own media, toggle and slider states without changing actions or content',async()=>{
  const host=await readJson('ports/windows/host.json');
  const mapping=await readJson('ports/windows/mapping.json');
- const tokens=(await readJson('exports/tokens.resolved.json')).profiles.default.tokens;
+ const tokens=await defaultTokens();
  const id='windows-11-notification-center-styler';
  const config=host.stylers.find(m=>m.id===id);
  const payload=await readJson('ports/windows/dist/'+id+'.json');
diff --git a/tests/windows-settings-startup.test.js b/tests/windows-settings-startup.test.js
index 468a9afea..bd3b1c77a 100644
--- a/tests/windows-settings-startup.test.js
+++ b/tests/windows-settings-startup.test.js
@@ -1,13 +1,13 @@
+import { scratchDirSync } from "./helpers/scratch.mjs";
+import { sha256Hex } from "../scripts/lib/host-install/files.mjs";
 import assert from 'node:assert/strict';
 import test from 'node:test';
-import {createHash} from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
-import os from 'node:os';
 import {spawnSync} from 'node:child_process';
 import {repoRoot} from '../scripts/lib/fs.mjs';
 import {settingsStylerSource} from '../ports/windows/src/settings-styler-source.mjs';
-const hash=bytes=>createHash('sha256').update(bytes).digest('hex');
+const hash=bytes=>sha256Hex(bytes);
 const fixture=Buffer.from('// retained license\n// @compilerOptions -lcomctl32 -lole32\nHWND GetCoreWnd() { return nullptr; }\nPTP_TIMER g_statsTimer;\nBOOL Wh_ModInit() {\n    retainedInit();\n}\nvoid Wh_ModUninit() { retainedRestore(GetCoreWnd()); }\n');
 const replacement='namespace j3w1Settings { bool Admit(); }\nHWND GetCoreWnd() { return ownedWindow(); }';
 test('Settings source adaptation preserves license, initialization and shared restore lookup',()=>{
@@ -43,8 +43,7 @@ test('Generated Settings startup admission pins both executable and XAML binary'
 });
 
 test('Settings derived source journals both pins, restores the prior adapter, and refuses altered cache',t=>{
- const state=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-settings-source-'));
- t.after(()=>fs.rmSync(state,{recursive:true,force:true}));
+ const state=scratchDirSync(t, 'j3w1-settings-source-');
  const source=path.join(state,'source');fs.cpSync(path.join(repoRoot,'ports/windows'),source,{recursive:true});
  const write=(file,value)=>{fs.mkdirSync(path.dirname(file),{recursive:true});fs.writeFileSync(file,typeof value==='string'?value:JSON.stringify(value));};
  const read=file=>JSON.parse(fs.readFileSync(file,'utf8'));
diff --git a/tests/windows-setup.test.js b/tests/windows-setup.test.js
index 69aa423f9..52666879d 100644
--- a/tests/windows-setup.test.js
+++ b/tests/windows-setup.test.js
@@ -1,21 +1,20 @@
+import { powershell, powershellAvailable, powershellEnvironment } from "./helpers/powershell.mjs";
+import { scratchDirSync } from "./helpers/scratch.mjs";
 import assert from 'node:assert/strict';
 import test from 'node:test';
 import fs from 'node:fs';
-import os from 'node:os';
 import path from 'node:path';
 import {spawnSync} from 'node:child_process';
 import {repoRoot} from '../scripts/lib/fs.mjs';
-const engines=[process.env.J3W1_PWSH||'pwsh',...(process.platform==='win32'?['powershell.exe']:[])];
+const engines=[powershell,...(process.platform==='win32'?['powershell.exe']:[])];
 for(const engine of engines){
  // A Node child of pwsh inherits its module paths. Let each engine construct
  // its own defaults so Windows PowerShell 5.1 loads its inbox Utility module.
- const engineEnv={...process.env};
- if(process.platform==='win32')for(const key of Object.keys(engineEnv))if(key.toLowerCase()==='psmodulepath')delete engineEnv[key];
- const available=spawnSync(engine,['-NoProfile','-NonInteractive','-Command','$PSVersionTable.PSVersion.ToString()'],{encoding:'utf8',env:engineEnv}).status===0;
+ const engineEnv=powershellEnvironment();
+ const available=powershellAvailable(engine,engineEnv);
  if(!available&&process.env.CI)test(`Windows setup requires ${engine}`,()=>assert.fail('The selected setup test engine must be available in CI'));
  for(const scenario of ['identity','process-context','runtime-selection','modes','download','recovery','legacy-recovery','orchestration','cached-setup','child-failure'])test(`Windows setup ${scenario} (${path.basename(engine)})`,{skip:available?false:'PowerShell unavailable'},t=>{
-  const root=fs.mkdtempSync(path.join(os.tmpdir(),'j3w1-install-test-'));
-  t.after(()=>fs.rmSync(root,{recursive:true,force:true}));
+  const root=scratchDirSync(t, 'j3w1-install-test-');
   const r=spawnSync(engine,['-NoProfile','-NonInteractive','-File',path.join(repoRoot,'tests/helpers/windows-setup-fixture.ps1'),'-Setup',path.join(repoRoot,'ports/windows/install.ps1'),'-Root',root,'-Case',scenario],{encoding:'utf8',timeout:60000,env:{...engineEnv,LOCALAPPDATA:root}});
   assert.equal(r.status,0,r.stdout+'\n'+r.stderr);
   assert.ok(r.stdout.includes(`PASS ${scenario}`));
diff --git a/tests/windows-text-popup.test.js b/tests/windows-text-popup.test.js
index e48b8113f..52ec17968 100644
--- a/tests/windows-text-popup.test.js
+++ b/tests/windows-text-popup.test.js
@@ -1,3 +1,4 @@
+import { defaultTokens } from "./helpers/tokens.mjs";
 import assert from 'node:assert/strict';
 import test from 'node:test';
 import {readJson} from '../scripts/lib/fs.mjs';
@@ -7,7 +8,7 @@ test('text-command and suggestion backings are shared once in every shell host a
  const host=await readJson('ports/windows/host.json');
  const mapping=await readJson('ports/windows/mapping.json');
  const variants=(await readJson('ports/windows/dist/windows-settings.json')).stylerVariants;
- const tokens=(await readJson('exports/tokens.resolved.json')).profiles.default.tokens;
+ const tokens=await defaultTokens();
  const frameKeys=['CommandBarFlyoutBackground','CommandBarFlyoutBorderBrush','CommandBarOverflowPresenterBackground',
   'FlyoutPresenterBackground','FlyoutPresenterBorderBrush','AutoSuggestBoxSuggestionsListBackground','AutoSuggestBoxSuggestionsListBorderBrush'];
  const targets=['Microsoft.UI.Xaml.Controls.Primitives.CommandBarFlyoutCommandBar',
@@ -79,7 +80,7 @@ test('detached Settings search backings replace acrylic without changing content
  const host=await readJson('ports/windows/host.json');
  const settings=host.stylers.find(x=>x.id==='windows-11-settings-styler');
  const mapping=await readJson('ports/windows/mapping.json');
- const tokens=(await readJson('exports/tokens.resolved.json')).profiles.default.tokens;
+ const tokens=await defaultTokens();
  const payload=await readJson('ports/windows/dist/'+settings.id+'.json');
  const backing=target=>[...host.menuTargets,...settings.targets].find(x=>x.target===target);
  // The status popup owns a Border; the suggestions popup owns a Grid. Its
diff --git a/tokens/foundations.tokens.json b/tokens/foundations.tokens.json
index 38ce3d7da..73d0a4410 100644
--- a/tokens/foundations.tokens.json
+++ b/tokens/foundations.tokens.json
@@ -156,6 +156,36 @@
         },
         "$description": "URxvt pixelsize 13."
       },
+      "display": {
+        "$value": {
+          "value": 32,
+          "unit": "px"
+        },
+        "$description": "Page heroes and metric figures on the portal (D-037).",
+        "$extensions": {
+          "io.github.j3w1.theme": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          }
+        }
+      },
+      "title": {
+        "$value": {
+          "value": 24,
+          "unit": "px"
+        },
+        "$description": "Page titles above h1 on the portal (D-037).",
+        "$extensions": {
+          "io.github.j3w1.theme": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          }
+        }
+      },
       "h1": {
         "$value": {
           "value": 20,
@@ -220,6 +250,34 @@
           "unit": "px"
         }
       },
+      "display": {
+        "$value": {
+          "value": 40,
+          "unit": "px"
+        },
+        "$extensions": {
+          "io.github.j3w1.theme": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          }
+        }
+      },
+      "title": {
+        "$value": {
+          "value": 32,
+          "unit": "px"
+        },
+        "$extensions": {
+          "io.github.j3w1.theme": {
+            "status": "approved",
+            "approval": {
+              "decision": "D-037"
+            }
+          }
+        }
+      },
       "h1": {
         "$value": {
           "value": 28,